/* === Design tokens === */ 
:root{
  --bg: #0b0b0c;
  --surface: #121214;
  --text: #eaeaea;
  --muted:#a9a9b3;
  --brand:#5b9cff;
  --brand-2:#9b5bff;
  --ok:#4ade80;
  --warn:#f59e0b;
  --danger:#ef4444;
  --card:#17171a;
  --border:#282830;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
html[data-theme='light']{
  --bg:#f7f8fa; --surface:#fff; --text:#121214; --muted:#555; --card:#fff; --border:#e7e7ee; --shadow: 0 10px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;background:var(--bg);color:var(--text)}
img{max-width:100%;display:block;border-radius:12px}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
p{margin:.5rem 0 1rem;color:var(--muted)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;gap:.6rem;align-items:center;color:var(--text);text-decoration:none;font-weight:700}
.nav .menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--text);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative}
.nav-toggle span{position:absolute;left:8px;right:8px;height:2px;background:var(--text)}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}
.header-actions{display:flex;align-items:center;gap:1rem}

/* Theme switch */
.theme-switch{position:relative;width:44px;height:24px;display:inline-block}
.theme-switch input{display:none}
.theme-switch .slider{position:absolute;inset:0;background:var(--border);border-radius:999px}
.theme-switch .slider::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--text);border-radius:50%;transition:transform .2s ease}
#themeToggle:checked + .slider::after{transform:translateX(20px)}

/* Hero */
.hero{padding:72px 0 32px;background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent)}
.hero .grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.underline{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;color:transparent}
.cta-row{display:flex;gap:.75rem;margin:1rem 0}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:0;margin:1rem 0 0;list-style:none;color:var(--muted)}

/* Cards & sections */
.features{padding:40px 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);padding:18px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--border);padding:10px 14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-color:transparent;color:white;box-shadow:0 6px 20px color-mix(in srgb, var(--brand) 30%, transparent)}
.btn-outline{background:transparent;color:var(--text)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-small{padding:8px 10px}

/* Pricing */
.pricing{padding:56px 0}
.billing-toggle{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{display:none}
.switch .slider{position:absolute;inset:0;background:var(--border);border-radius:99px}
.switch .slider::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--text);border-radius:50%;transition:transform .2s ease}
.switch input:checked + .slider::after{transform:translateX(20px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{position:relative}
.price-card .badge{position:absolute;top:10px;right:10px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;padding:4px 8px;border-radius:999px;font-size:12px}
.price{font-size:28px;font-weight:800;margin:.5rem 0}
.disclaimer{color:var(--muted);margin-top:10px}

/* Process */
.process{padding:40px 0}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;list-style:none}
.steps li{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:14px}
.steps span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;margin-right:8px}

/* Portfolio */
.portfolio{padding:40px 0}
.filters{display:flex;gap:.5rem}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer}
.chip.is-active{outline:2px solid color-mix(in srgb, var(--brand) 60%, transparent)}
.masonry{columns:2;column-gap:16px}
.project{break-inside:avoid;margin:0 0 16px}

/* Testimonials */
.testimonials{padding:40px 0;background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent)}
.slider{position:relative;overflow:hidden}
.slide{opacity:0;transform:translateX(10%);transition:all .5s ease}
.slide.is-active{opacity:1;transform:none}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--border);padding:12px 16px;border-radius:14px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:600}

/* Contact */
.contact{padding:40px 0}
label{display:block;font-weight:600;margin:.5rem 0 .25rem}
input, textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
input:focus, textarea:focus{outline:2px solid color-mix(in srgb, var(--brand) 60%, transparent)}
.form-actions{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}
.checkbox{display:flex;align-items:center;gap:.4rem;font-weight:600;color:var(--muted)}
.form-note{min-height:1.2em}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}

/* Modal & toast */
.modal::backdrop{background:rgba(0,0,0,.55)}
.modal .modal-box{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:18px;min-width:min(560px, 92vw)}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:12px}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--surface);color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .25s ease}
#toast.show{opacity:1}

/* Layout utils */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 960px){
  .hero .grid-2, .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav .menu{position:fixed;inset:64px 0 auto 0;background:var(--bg);flex-direction:column;padding:16px;border-bottom:1px solid var(--border);transform:translateY(-120%);transition:transform .25s ease}
  .nav-toggle{display:inline-block}
  .nav.open .menu{transform:translateY(0)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}