/* ── Self-hosted fonts (latin subset) ──────────────────────────── */
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --bg:#0b1120; --bg-elev:#0e1730; --bg-grad:radial-gradient(120% 120% at 80% 0%,#16224a 0%,#0b1120 60%);
  --border:#243154; --border-soft:#1b2a52;
  --accent:#3b82f6; --accent-2:#22d3ee; --accent-3:#a78bfa;
  --text:#ffffff; --muted:#aab7d4; --muted-2:#7e8db0;
  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --maxw:1140px; --radius:16px;
}

/* ── Reset / base ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--body); color:var(--text); background:var(--bg); line-height:1.6;
       -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3 { font-family:var(--display); font-weight:700; line-height:1.08; margin:0 0 .4em; letter-spacing:-.01em; }
img,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.container { max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.section { padding:96px 0; position:relative; }
.kicker { font:600 12px var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.section-title { font-size:clamp(28px,4vw,42px); margin:0 0 14px; }
.section-lead { color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:60ch; margin:0 0 36px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn { display:inline-block; border-radius:999px; padding:13px 26px; font:600 15px var(--body);
       cursor:pointer; border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(59,130,246,.32); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(59,130,246,.45); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:#cfe0ff; }
.btn-block { width:100%; text-align:center; }

/* ── Brand mark ────────────────────────────────────────────────── */
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand-mark { display:inline-flex; }
.brand-name { font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; }

/* ── Nav ───────────────────────────────────────────────────────── */
.site-nav { position:sticky; top:0; z-index:30; background:rgba(11,17,32,.72);
            backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .25s, background .25s; }
.site-nav.scrolled { border-bottom-color:var(--border); background:rgba(11,17,32,.92); }
.nav-inner { display:flex; align-items:center; gap:20px; padding-block:16px; }
.nav-links { display:flex; gap:26px; margin-left:auto; font:500 15px var(--body); color:var(--muted); }
.nav-links a { position:relative; padding-block:4px; transition:color .15s; }
.nav-links a:hover { color:#fff; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
                      background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .2s; }
.nav-links a:hover::after { width:100%; }
.nav-right { display:flex; align-items:center; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
@media (max-width:880px){
  .nav-inner{ flex-wrap:wrap; }
  .nav-toggle{ display:block; order:2; margin-left:auto; }
  .nav-right{ order:1; }
  .nav-links{ display:none; flex-direction:column; gap:8px; width:100%; order:3; padding-bottom:8px; }
  body.nav-open .nav-links{ display:flex; }
}

/* ── Reveal (one-shot, on first center) ────────────────────────── */
html.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
html.js .section.revealed .reveal { opacity:1; transform:none; }
html.js .section.revealed .reveal:nth-child(2){ transition-delay:.07s; }
html.js .section.revealed .reveal:nth-child(3){ transition-delay:.14s; }
html.js .section.revealed .reveal:nth-child(4){ transition-delay:.21s; }
html.js .section.revealed .bento.reveal,
html.js .section.revealed .svc-grid .reveal { transition-delay:.1s; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { min-height:92vh; display:flex; align-items:center; padding-block:0; background:var(--bg); overflow:hidden; }
.hero-inner { position:relative; z-index:2; }
.hero-title { font-size:clamp(38px,7vw,76px); margin:0 0 22px; }
.shine { background:linear-gradient(90deg,#3b82f6,#22d3ee,#a78bfa,#3b82f6); background-size:300% 100%;
         -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero.in-view .shine { animation:shine 7s linear infinite; }
@keyframes shine { to { background-position:300% 0; } }
.hero-sub { color:var(--muted); font-size:clamp(16px,2vw,20px); max-width:58ch; margin:0 0 34px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }

.hero-bg { position:absolute; inset:0; z-index:1; }
.shapes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.aurora { position:absolute; inset:-30%; filter:blur(40px); opacity:.85;
  background:
    radial-gradient(38% 38% at 28% 30%,rgba(59,130,246,.55),transparent 60%),
    radial-gradient(34% 34% at 72% 58%,rgba(99,102,241,.5),transparent 60%),
    radial-gradient(30% 30% at 52% 82%,rgba(34,211,238,.4),transparent 60%);
  animation:drift 16s ease-in-out infinite alternate; animation-play-state:paused; }
.hero.in-view .aurora { animation-play-state:running; }
@keyframes drift { 0%{transform:translate(-3%,-2%) scale(1)} 100%{transform:translate(4%,3%) scale(1.15)} }
.grid-overlay { position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);
  animation:gridpan 24s linear infinite; animation-play-state:paused; }
.hero.in-view .grid-overlay { animation-play-state:running; }
@keyframes gridpan { to { background-position:44px 44px; } }
.particle { position:absolute; width:4px; height:4px; border-radius:50%; background:#7aa2ff; box-shadow:0 0 10px #7aa2ff;
  animation:float 9s ease-in-out infinite; animation-play-state:paused; opacity:.5; }
.hero.in-view .particle { animation-play-state:running; }
.particle:nth-child(3){ left:16%; top:32%; animation-delay:0s; }
.particle:nth-child(4){ left:66%; top:26%; animation-delay:1.6s; background:#22d3ee; box-shadow:0 0 10px #22d3ee; }
.particle:nth-child(5){ left:82%; top:62%; animation-delay:3.2s; background:#a78bfa; box-shadow:0 0 10px #a78bfa; }
.particle:nth-child(6){ left:40%; top:74%; animation-delay:4.8s; }
@keyframes float { 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(-18px); opacity:1; } }
.scroll-cue { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; color:var(--muted);
  font-size:22px; animation:bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ── Work / bento ──────────────────────────────────────────────── */
.work { background:var(--bg-grad); }
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:16px; }
.tile { position:relative; border-radius:var(--radius); overflow:hidden; background-size:cover; background-position:center;
        border:1px solid var(--border); display:flex; flex-direction:column; color:#fff;
        transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; isolation:isolate; }

/* Personalized brand logo, sitting in a clean chip over the brand gradient. */
.tile-logo { position:relative; z-index:2; flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:22px 22px 6px; }
.logo-chip { background:rgba(255,255,255,.95); border-radius:14px; padding:16px 20px;
             box-shadow:0 10px 26px rgba(0,0,0,.30); display:flex; align-items:center; justify-content:center; max-width:82%; }
.logo-chip img { max-height:48px; max-width:100%; width:auto; display:block; }
.tile-big .logo-chip img { max-height:104px; }
.tile-wide .logo-chip img { max-height:58px; }
.tile:hover .logo-chip { box-shadow:0 14px 34px rgba(0,0,0,.42); }
.tile:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.tile-big { grid-column:span 2; grid-row:span 2; }
.tile-wide { grid-column:span 2; }
.tile-tall { grid-row:span 2; }
.tile-sm, .tile-cta { grid-column:span 1; }
.tile::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(7,12,28,.9)); z-index:1; }
.tile-meta { position:relative; z-index:2; padding:18px 20px; }
.tile-cat { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9fb6e8; margin-bottom:4px; }
.tile-name { display:block; font-family:var(--display); font-weight:700; font-size:20px; }
.tile-blurb { display:block; font-size:13px; color:#c8d4ee; max-height:0; opacity:0; overflow:hidden;
              transition:max-height .35s ease, opacity .35s ease, margin .35s ease; }
.tile:hover .tile-blurb { max-height:80px; opacity:1; margin-top:6px; }
.tile-visit { display:inline-block; font-size:13px; font-weight:600; color:#9fd0ff; margin-top:8px; }
.tile-sheen { position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg);
  animation:sweep 6s ease-in-out infinite; animation-play-state:paused; }
.work.in-view .tile-sheen { animation-play-state:running; }
.tile:nth-child(2) .tile-sheen{ animation-delay:1.5s; } .tile:nth-child(3) .tile-sheen{ animation-delay:3s; }
@keyframes sweep { 0%,100%{ left:-60%; } 45%,55%{ left:140%; } }
.tile-cta { background:var(--bg-elev); border:1px dashed var(--border); align-items:center; justify-content:center; text-align:center; }
.tile-cta .tile-meta { text-align:center; }
.tile-cta .tile-name { color:#cfe0ff; } .tile-cta .tile-cat { color:var(--accent); }
@media (max-width:880px){ .bento{ grid-template-columns:repeat(2,1fr); } .tile-big,.tile-wide{ grid-column:span 2; } .tile-big{ grid-row:span 1; } }
@media (max-width:520px){ .bento{ grid-template-columns:1fr; } .tile,.tile-big,.tile-wide{ grid-column:span 1; } }

/* ── Services ──────────────────────────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.svc-card { background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
            transition:transform .25s, border-color .25s, box-shadow .25s; }
.svc-card:hover { transform:translateY(-4px); border-color:#33507f; box-shadow:0 14px 34px rgba(0,0,0,.35); }
.svc-icon { font-size:26px; }
.svc-name { font-size:20px; margin:14px 0 8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.svc-desc { color:var(--muted); font-size:15px; margin:0; }
.svc-link { display:inline-block; margin-top:14px; font-weight:600; color:var(--accent-2); }
.svc-pill { font:700 10px var(--body); letter-spacing:.1em; text-transform:uppercase; background:var(--accent);
            color:#fff; border-radius:6px; padding:3px 8px; }
.svc-flag { border-color:var(--accent); background:linear-gradient(180deg,#13235a,var(--bg-elev));
            box-shadow:0 0 0 1px var(--accent) inset; }
@media (max-width:760px){ .svc-grid{ grid-template-columns:1fr; } }

/* ── AI spotlight ──────────────────────────────────────────────── */
.ai { background:linear-gradient(120% 120% at 90% 0%,#1e1b4b 0%,#0b1120 62%); overflow:hidden; }
.ai-bg { position:absolute; inset:0; z-index:0; }
.aurora-violet { inset:-30%; opacity:.6;
  background:radial-gradient(40% 40% at 75% 20%,rgba(167,139,250,.5),transparent 60%),
            radial-gradient(35% 35% at 30% 70%,rgba(59,130,246,.4),transparent 60%); }
.ai-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.ai-tools { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.tool { font-size:13px; color:#cdd9f5; border:1px solid var(--border); border-radius:999px; padding:8px 15px; background:rgba(14,23,48,.6); }
.ai-contrast { display:flex; flex-direction:column; gap:10px; }
.ba { border-radius:12px; padding:16px 18px; }
.ba-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; display:block; margin-bottom:6px; }
.ba p { margin:0; font-size:14px; line-height:1.5; }
.ba-before { background:#10182e; border:1px solid var(--border); color:#92a1c2; }
.ba-after { background:#15203f; border:1px solid var(--accent); color:#d6e4ff; }
.ba-arrow { text-align:center; color:var(--accent-2); font-size:20px; }
@media (max-width:820px){ .ai-inner{ grid-template-columns:1fr; gap:30px; } }

/* ── Process ───────────────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:54px; }
.step { background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.step-n { font-family:var(--display); font-weight:700; font-size:14px; color:var(--accent-2); letter-spacing:.1em; }
.step-name { font-size:19px; margin:10px 0 8px; }
.step-desc { color:var(--muted); font-size:14px; margin:0; }
.stats { display:flex; gap:48px; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--border); }
.stat-num { font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,44px); color:var(--accent-2); }
.stat-label { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
@media (max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } .stats{ gap:28px; } }

/* ── Testimonial ───────────────────────────────────────────────── */
.testimonial { background:var(--bg-grad); }
.quotes { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.quote { margin:0; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:30px; }
.quote blockquote { margin:0 0 16px; font-family:var(--display); font-weight:500; font-size:clamp(19px,2.4vw,26px); line-height:1.3; }
.quote-author { font-weight:600; }
.quote-role { display:block; color:var(--muted-2); font-size:14px; }

/* ── Contact ───────────────────────────────────────────────────── */
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-direct { color:var(--muted); }
.contact-direct a { color:var(--accent-2); }
.contact-form { background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:28px; display:grid; gap:16px; }
.contact-form label { display:grid; gap:7px; font-size:14px; font-weight:500; color:var(--muted); }
.contact-form input, .contact-form textarea {
  font:400 15px var(--body); color:#fff; background:#0a1126; border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.contact-form textarea { resize:vertical; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-note { border-radius:10px; padding:12px 14px; font-size:14px; margin:0; }
.form-note-ok { background:rgba(34,197,94,.12); border:1px solid #2e7d4f; color:#9be6b4; }
.form-note-err { background:rgba(239,68,68,.12); border:1px solid #8a3535; color:#ffb4b4; }
@media (max-width:820px){ .contact-inner{ grid-template-columns:1fr; gap:28px; } }

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer { background:#070c1c; border-top:1px solid var(--border); padding:56px 0 28px; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-tag { color:var(--muted-2); font-size:14px; max-width:34ch; margin-top:10px; }
.footer-h { font-family:var(--display); font-size:14px; letter-spacing:.04em; color:#cfe0ff; margin:0 0 12px; }
.footer-grid a { color:var(--muted); font-size:14px; line-height:2; transition:color .15s; }
.footer-grid a:hover { color:#fff; }
.footer-legal { color:var(--muted-2); font-size:13px; margin-top:40px; padding-top:20px; border-top:1px solid var(--border); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } }

/* ── Reduced motion: static, fully visible ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  html.js .reveal { opacity:1 !important; transform:none !important; }
  .hero-bg, .ai-bg, .tile-sheen, .scroll-cue { display:none !important; }
}