:root{
  --bg:#0d0f14;
  --bg-alt:#12151c;
  --surface:#161a22;
  --surface-2:#1c212b;
  --border:#262c38;
  --text:#e9ecf2;
  --muted:#9aa3b4;
  --accent:#5b8cff;
  --accent-strong:#3f74ff;
  --radius:14px;
  --maxw:1080px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --bg-alt:#f6f7f9;
    --surface:#ffffff;
    --surface-2:#f3f5f8;
    --border:#e6e8ec;
    --text:#161a22;
    --muted:#5c6573;
    --accent:#2f6df6;
    --accent-strong:#235ad6;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.brand-mark{
  width:30px;height:30px;border-radius:8px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;
}
.brand-mark-sm{width:24px;height:24px;font-size:13px;border-radius:6px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  color:var(--text)!important;border:1px solid var(--border);
  padding:7px 14px;border-radius:9px;
}
.nav-cta:hover{border-color:var(--accent);color:var(--accent)!important}
@media(max-width:620px){ .nav-links a:not(.nav-cta){display:none} }

/* Hero */
.hero{padding:96px 0 84px;text-align:center}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  font-weight:600;color:var(--accent);margin-bottom:18px;
}
.hero h1{
  font-size:clamp(30px,5vw,52px);line-height:1.1;
  font-weight:700;letter-spacing:-.025em;margin-bottom:22px;
}
.lede{
  max-width:620px;margin:0 auto 34px;
  font-size:clamp(16px,2vw,19px);color:var(--muted);
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:11px;font-size:15px;font-weight:600;
  border:1px solid transparent;transition:.16s;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Sections */
.section{padding:74px 0}
.section-alt{background:var(--bg-alt)}
.section-title{
  font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;
  margin-bottom:36px;
}

/* Cards grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-work{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid,.grid-work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.grid,.grid-work{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;transition:.16s;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card-icon{
  width:44px;height:44px;border-radius:11px;
  background:var(--surface-2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card-icon svg{width:22px;height:22px}
.card h3{font-size:17px;font-weight:600;margin-bottom:8px}
.card p{font-size:14px;color:var(--muted)}

/* Approach */
.approach{display:grid;grid-template-columns:0.9fr 1.4fr;gap:48px;align-items:start}
@media(max-width:780px){.approach{grid-template-columns:1fr;gap:28px}}
.approach-lede{color:var(--muted);font-size:17px;margin-top:-14px}
.steps{list-style:none;display:flex;flex-direction:column;gap:22px}
.steps li{display:flex;gap:18px}
.step-num{
  font-size:14px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:2px;min-width:26px;
}
.steps h4{font-size:16px;font-weight:600;margin-bottom:3px}
.steps p{font-size:14px;color:var(--muted)}

/* Work */
.work-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;transition:.16s;
}
.work-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.tag{
  display:inline-block;font-size:12px;font-weight:600;
  color:var(--accent);background:var(--surface-2);
  padding:4px 11px;border-radius:999px;margin-bottom:14px;
}
.work-card h3{font-size:18px;font-weight:600;margin-bottom:8px}
.work-card p{font-size:14px;color:var(--muted)}

/* Contact */
.section-contact{text-align:center}
.contact p{max-width:520px;margin:0 auto 18px;color:var(--muted);font-size:17px}
.contact .section-title{margin-bottom:14px}
.contact-note{
  font-size:13px!important;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:0!important;
}

/* Login page */
.login-body{display:flex;min-height:100vh}
.login-shell{
  margin:auto;width:100%;max-width:420px;padding:40px 24px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.login-card{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:34px 30px;
}
.login-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;margin-bottom:24px}
.login-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.login-sub{font-size:14px;color:var(--muted);margin-bottom:24px}
.login-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:13px;font-weight:600;color:var(--text)}
.field-label-row{display:flex;align-items:center;justify-content:space-between}
.field-link{font-size:12px;font-weight:500;color:var(--accent)}
.field-link:hover{text-decoration:underline}
.field input{
  width:100%;height:44px;padding:0 14px;font-size:15px;
  color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:10px;outline:none;transition:.15s;
}
.field input::placeholder{color:var(--muted)}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.remember{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer}
.remember input{width:16px;height:16px;accent-color:var(--accent)}
.login-submit{width:100%;height:46px;margin-top:4px;font-size:15px}
.login-submit:disabled{opacity:.7;cursor:default;transform:none}
.login-foot{margin-top:22px;text-align:center;font-size:13px;color:var(--muted)}
.login-foot a{color:var(--accent);font-weight:500}
.login-foot a:hover{text-decoration:underline}
.login-legal{font-size:12px;color:var(--muted)}
.login-error{
  display:flex;align-items:center;gap:9px;
  background:color-mix(in srgb,#e5484d 16%,transparent);
  border:1px solid color-mix(in srgb,#e5484d 45%,transparent);
  color:#e5484d;border-radius:10px;padding:11px 13px;font-size:13px;font-weight:500;
}
.login-error svg{width:18px;height:18px;flex-shrink:0;stroke-width:2}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:28px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-inner .brand{font-size:14px;font-weight:600;color:var(--muted)}
.footer-meta{font-size:13px;color:var(--muted)}