:root{
  --bg:#F9FAFB;
  --section:#F1F5F9;
  --card:#FFFFFF;
  --text:#1F2937;
  --muted:rgba(31,41,55,.72);
  --line:rgba(31,41,55,.14);
  --header-bg:#0F172A;
  --header-text:#E5E7EB;
  --footer-bg:#020617;
  --footer-text:#9CA3AF;
  --primary:#2563EB;
  --accent:#38BDF8;
  --shadow:0 18px 50px rgba(2,6,23,.14);
  --radius:18px;
  --radius-sm:12px;
  --container:1120px;
  --focus:0 0 0 3px rgba(56,189,248,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}

.skip-link{
  position:absolute; left:-999px; top:12px; z-index:999;
  background:var(--card); color:var(--text);
  border:1px solid var(--line);
  padding:10px 12px; border-radius:12px;
}
.skip-link:focus{left:12px; outline:none; box-shadow:var(--focus)}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,23,42,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(229,231,235,.18);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px}

.brand{display:flex; align-items:center; gap:10px}
.brand-link{display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.08em; color:var(--header-text)}
.brand-logo{width:40px; height:40px; border-radius:10px; object-fit:cover; background:rgba(255,255,255,.08)}
.brand-link span{font-size:18px; line-height:1}
.brand-sub{font-size:12px; opacity:.82; color:var(--header-text)}

.nav{display:flex; align-items:center; gap:18px}
.nav a{font-weight:520; opacity:.92; color:var(--header-text)}
.nav a:hover{opacity:1; color:var(--accent)}

.nav .btn{border-color:rgba(229,231,235,.22)}
.nav .btn-ghost{color:var(--header-text); background:rgba(229,231,235,.08)}
.nav .btn-ghost:hover{background:rgba(229,231,235,.12)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(31,41,55,.18);
  background:transparent;
  font-weight:650;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(31,41,55,.28)}
.btn:focus{outline:none; box-shadow:var(--focus)}

.btn-primary{
  background:var(--primary);
  border-color:rgba(37,99,235,.55);
  color:#FFFFFF;
}
.btn-primary:hover{background:#1D4ED8}
.btn-ghost{background:rgba(15,23,42,.04)}

.nav-toggle{
  display:none;
  width:44px; height:40px;
  background:rgba(229,231,235,.08);
  border:1px solid rgba(229,231,235,.18);
  border-radius:12px;
  padding:10px;
}
.nav-toggle:focus{outline:none; box-shadow:var(--focus)}
.nav-toggle span{display:block; height:2px; background:rgba(229,231,235,.92); margin:5px 0; border-radius:2px}

.mobile-nav{border-top:1px solid rgba(229,231,235,.18); background:rgba(15,23,42,.96)}
.mobile-nav-inner{display:grid; gap:12px; padding:14px 20px 18px}
.mobile-nav-inner a{opacity:.92; font-weight:600; color:var(--header-text)}
.mobile-nav-inner a:hover{opacity:1; color:var(--accent)}

.mobile-nav-inner .btn{border-color:rgba(229,231,235,.22)}
.mobile-nav-inner .btn-ghost{color:var(--header-text); background:rgba(229,231,235,.08)}
.mobile-nav-inner .btn-ghost:hover{background:rgba(229,231,235,.12)}

.hero{padding:70px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:stretch}
.eyebrow{margin:0 0 10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.hero h1{margin:0 0 12px; font-size:44px; line-height:1.05; letter-spacing:-.03em}
.lead{font-size:18px; color:rgba(31,41,55,.86); margin:0 0 18px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 22px}

.trust-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:10px}
.trust-item{border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 12px; background:var(--card)}
.trust-title{font-weight:720}
.trust-desc{color:var(--muted); font-size:13px; margin-top:2px}

.hero-panel{display:flex}
.panel-card{
  width:100%;
  border-radius:var(--radius);
  border:1px solid rgba(56,189,248,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.92));
  box-shadow:var(--shadow);
  padding:18px;
}
.panel-kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:12px}
.panel-title{font-weight:760; font-size:18px; margin-top:8px}
.panel-body{color:rgba(31,41,55,.78); margin-top:8px}
.panel-metrics{display:grid; gap:10px; margin-top:16px}
.metric{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:rgba(37,99,235,.06)}
.metric-label{color:var(--muted); font-size:13px}
.metric-value{font-weight:700}

.section{padding:64px 0}
.section-alt{background:var(--section)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px}
.section-head h2{margin:0; font-size:28px; letter-spacing:-.02em}
.section-head p{margin:0; max-width:640px; color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  padding:16px;
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted)}

.section-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start}
.about-box{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:16px}
.about-box h3{margin:0 0 10px}

.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checklist li{position:relative; padding-left:26px; color:rgba(31,41,55,.86)}
.checklist li::before{content:""; position:absolute; left:0; top:9px; width:14px; height:14px; border-radius:4px; background:var(--accent)}

.case-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px}
.case{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px}
.case-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.case h3{margin:0; font-size:16px}
.project-link{color:inherit}
.project-link:hover{color:var(--primary)}
.project-url{color:inherit}
.project-url:hover{color:var(--accent); opacity:1}
.tag{font-size:12px; padding:6px 10px; border:1px solid rgba(56,189,248,.45); border-radius:999px; color:#0F172A; background:rgba(56,189,248,.18); cursor:pointer}
.tag:hover{opacity:1; background:rgba(56,189,248,.28); border-color:rgba(56,189,248,.7)}
.tag:focus{outline:none}
.tag:focus-visible{box-shadow:var(--focus)}
.case-dl{margin:12px 0 0; display:grid; gap:10px}
.case-dl dt{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.case-dl dd{margin:0; color:rgba(31,41,55,.86)}

.note{margin-top:16px; border:1px dashed rgba(31,41,55,.22); border-radius:var(--radius); padding:14px; color:rgba(31,41,55,.88); background:rgba(37,99,235,.05)}

.muted{color:var(--muted)}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.contact-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px}
.contact-lines{display:grid; gap:12px; margin-top:14px}
.contact-line{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:rgba(15,23,42,.03)}
.contact-label{color:var(--muted); font-size:13px}
.contact-value{font-weight:700}

.form{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px}
.form h3{margin:0 0 12px}
label{display:grid; gap:8px; margin:0 0 12px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.18);
  background:#FFFFFF;
  color:var(--text);
  font:inherit;
}
input:focus, textarea:focus{outline:none; box-shadow:var(--focus); border-color:rgba(56,189,248,.6)}
.form-footnote{margin:10px 0 0; font-size:13px}

.mini-faq{margin-top:14px}
.mini-faq h4{margin:0 0 8px; font-size:14px}
.mini-faq ul{margin:0; padding-left:18px; color:rgba(31,41,55,.86)}

.footer{border-top:1px solid rgba(229,231,235,.18); padding:22px 0 30px; background:var(--footer-bg); color:var(--footer-text)}
.footer-inner{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; align-items:start}
.footer-brand{font-weight:800; letter-spacing:.06em}
.footer-links{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start}
.footer-meta{text-align:right}

.footer a{color:var(--footer-text)}
.footer a:hover{opacity:1; color:var(--accent)}

@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr 1fr;}
  .case-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .footer-meta{text-align:left}
  .section-head{flex-direction:column; align-items:flex-start}
}

@media (max-width: 760px){
  .nav{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .hero{padding:54px 0 28px}
  .hero h1{font-size:36px}
  .trust-row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;}
  .brand-logo{width:34px; height:34px}
  .brand-link span{font-size:16px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}