:root{color-scheme:dark;--bg:#0b1322;--panel:#131f32;--line:#304159;--text:#f1f5fb;--muted:#a8b8ce;--accent:#6de3c1}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.top{min-height:82px;display:flex;align-items:center;gap:36px;padding:12px max(5vw,24px);border-bottom:1px solid #26354b;background:#0b1322eb;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.logo{font-size:24px;font-weight:800;letter-spacing:-1px;white-space:nowrap}
.mark{display:inline-grid;place-items:center;background:var(--accent);color:#081c1c;width:34px;height:34px;border-radius:10px;margin-right:8px}
.top nav{display:flex;gap:28px;margin-left:auto;font-size:14px;color:#d6e0ec}
.header-actions{display:flex;align-items:center;gap:10px}
.header-user{font-size:13px;color:var(--accent);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-button{background:transparent;color:var(--text);border:1px solid #5b728e;border-radius:9px;padding:9px 15px;font-size:14px;white-space:nowrap}
.login-button:hover,.login-button:focus-visible{border-color:var(--accent)}
.smallbtn,.outline{border:1px solid #5b728e;border-radius:9px;padding:10px 16px;font-size:14px}
.smallbtn{white-space:nowrap}
.hero{padding:115px max(7vw,24px) 80px;min-height:680px;background:radial-gradient(circle at 90% 20%,#19445c 0,transparent 36%),linear-gradient(135deg,#101c31,#0b1322 68%)}
.eyebrow{color:var(--accent);font-weight:750;font-size:12px;letter-spacing:2.7px}
.hero h1{font-size:clamp(34px,5vw,68px);line-height:1.27;letter-spacing:-2.5px;margin:28px 0}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:700px;color:var(--muted);font-size:18px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.primary{display:inline-block;background:var(--accent);color:#062321;font-weight:800;padding:14px 24px;border-radius:10px}
.metrics{margin-top:110px;display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;color:var(--accent)}
.metrics b{font-weight:500;color:#d4deea;margin-left:12px}
.section{padding:100px max(7vw,24px)}
h2{font-size:clamp(28px,3.5vw,44px);line-height:1.3;letter-spacing:-1.4px;margin:15px 0}
.lead{color:var(--muted);margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;min-height:340px;display:flex;flex-direction:column}
.number{color:var(--accent);font-size:12px;letter-spacing:1px}
.symbol{font-size:48px;color:#93b9ce;margin:24px 0 0}
.card h3{font-size:26px;margin:6px 0}
.card p{color:var(--muted);font-size:15px}
.card a{margin-top:auto;color:var(--accent);font-weight:700}
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#101d2e}
.about p{font-size:19px;color:var(--muted);align-self:center}
.contact{text-align:center;background:radial-gradient(circle at center,#1c3e50,#0b1322 70%)}
.contact p{color:var(--muted)}
.contact .primary{margin:20px 0}
.contact small{display:block;color:#93a8bc}
footer{border-top:1px solid var(--line);padding:30px max(7vw,24px);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px}
footer strong{color:var(--text)}
/* Build002 customer authentication */
body.auth-open{overflow:hidden}
.auth-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.auth-backdrop{position:absolute;inset:0;background:rgba(2,8,18,.78);backdrop-filter:blur(5px)}
.auth-dialog{position:relative;width:min(100%,460px);max-height:min(90vh,850px);overflow-y:auto;padding:34px;background:#131f32;border:1px solid #4a607b;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.auth-dialog h2{font-size:29px;margin:8px 0}
.auth-description{color:var(--muted);font-size:14px;margin:0 0 22px}
.auth-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:var(--muted);font-size:30px;line-height:1}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-form label{font-size:13px;color:#dbe6f2;font-weight:600;margin-top:6px}
.auth-form input{width:100%;min-height:44px;padding:10px 12px;background:#0b1627;border:1px solid #52667e;border-radius:9px;color:var(--text);outline:none}
.auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(109,227,193,.15)}
.auth-submit{margin-top:16px;padding:12px 16px;background:var(--accent);color:#062321;border:0;border-radius:9px;font-weight:800}
.auth-submit:disabled{opacity:.65;cursor:wait}
.auth-switch{text-align:center;color:var(--muted);font-size:13px}
.auth-switch button{background:none;border:0;color:var(--accent);font-weight:700;padding:3px}
.auth-message{margin:14px 0 0;padding:10px 12px;border:1px solid #4b7a6d;border-radius:9px;color:var(--accent);font-size:13px}
.auth-message.error{border-color:#9a5360;color:#ffadb9}
@media(max-width:960px){.top{gap:16px}.top nav{gap:14px}.header-actions{gap:7px}.smallbtn,.login-button{padding:8px 10px}}
@media(max-width:760px){.top{min-height:70px;gap:12px;flex-wrap:wrap}.top nav{display:none}.header-actions{margin-left:auto}.header-user{max-width:100px}.hero{padding-top:80px;min-height:auto}.metrics{margin-top:65px;gap:12px;flex-direction:column}.cards,.about{grid-template-columns:1fr}.section{padding-top:70px;padding-bottom:70px}footer{flex-direction:column}.hero h1{letter-spacing:-1.3px}.auth-dialog{padding:26px 20px}}
@media(max-width:420px){.top{padding:10px 12px}.logo{font-size:21px}.smallbtn{font-size:12px}.login-button{font-size:12px}.header-user{max-width:76px}}

/* Build002 STEP 4-04-04: account type selector */
.auth-role-group{display:flex;gap:20px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 15px}
.auth-role-group legend{font-size:13px;color:var(--muted);padding:0 6px}
.auth-role-group label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}
.auth-role-group input{accent-color:var(--accent)}
#roleMenuLink{font-size:13px;white-space:nowrap}
@media(max-width:760px){#roleMenuLink{font-size:12px}}

/* STEP 4-04-06-02 Password visibility */

.fillton-password-field {
    position: relative;
    width: 100%;
}

.fillton-password-field > input {
    width: 100%;
    padding-right: 52px !important;
}

.fillton-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a8b8ce;
    cursor: pointer;
}

.fillton-password-toggle:hover,
.fillton-password-toggle:focus-visible {
    color: #6de3c1;
    background: rgba(109, 227, 193, 0.08);
}

.fillton-password-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* STEP 4-04-07-05 - User work menu */

.fillton-work-menu[hidden] {
    display: none !important;
}

.fillton-work-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.fillton-work-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 18px;
    border: 1px solid rgba(150, 180, 200, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color .15s, background .15s;
}

.fillton-work-link:hover,
.fillton-work-link:focus-visible {
    border-color: #6de3c1;
    background: rgba(109, 227, 193, .08);
}

.fillton-work-link span:last-child {
    flex-shrink: 0;
    opacity: .7;
}