/* ==========================================================================
   Stellar Forge — Design System
   Cosmic + engineering + premium. Deep space base, restrained signal-blue/
   violet accent, geometric display type, monospace used as structural
   labeling (the way engineers label things), not decoration.
   ========================================================================== */

:root{
  /* --- Color: named tokens --- */
  --void:        #0a0e1a;   /* base background */
  --void-raised: #0e1424;   /* card / elevated surface */
  --void-line:   #161d33;   /* hairline borders */
  --ink:         #e9edf7;   /* primary text */
  --ink-dim:     #97a1bd;   /* secondary text */
  --ink-faint:   #5b6480;   /* tertiary / labels */
  --signal:      #5b8cff;   /* electric blue — primary accent */
  --signal-2:    #9b6bff;   /* violet — secondary accent */
  --signal-soft: rgba(91,140,255,0.12);
  --glow:        rgba(91,140,255,0.35);
  --ok:          #4ade80;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* --- Scale --- */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.2rem);

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1180px;
  --edge: 24px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Starfield + grid ambience — pure CSS, no JS, negligible weight */
.cosmos{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.cosmos::before{
  content:""; position:absolute; inset:-10%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(233,237,247,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 90px, rgba(233,237,247,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 300px 60px, rgba(233,237,247,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 420px 200px, rgba(233,237,247,0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 260px, rgba(233,237,247,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 520px 320px, rgba(233,237,247,0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 640px 40px, rgba(233,237,247,0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 760px 180px, rgba(233,237,247,0.3) 50%, transparent 51%);
  background-repeat:repeat;
  background-size:800px 400px;
  opacity:0.5;
}
.cosmos::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,26,0) 0%, var(--void) 92%),
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(91,140,255,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(155,107,255,0.10), transparent 60%);
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--signal); color:#04060c;
  padding:12px 18px; z-index:999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; top:0; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--signal); outline-offset:3px; border-radius:4px;
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--edge); position:relative; z-index:1; }
.section{ padding-block:clamp(56px, 9vw, 108px); position:relative; z-index:1; }
.section-tight{ padding-block:clamp(36px, 5vw, 64px); }
.grid{ display:grid; gap:24px; }
@media (min-width:760px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:980px){
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid-5{ grid-template-columns:repeat(5,1fr); }
}

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.12; margin:0 0 0.5em; letter-spacing:-0.01em; font-weight:600; }
h1{ font-size:var(--step-4); letter-spacing:-0.02em; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; color:var(--ink-dim); max-width:70ch; }
.lede{ font-size:var(--step-1); color:var(--ink-dim); max-width:56ch; }
strong{ color:var(--ink); }
a{ color:var(--signal); text-decoration:none; }
a:hover{ text-decoration:underline; }
.label{
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--signal); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; font-weight:500;
}
.label::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--signal); box-shadow:0 0 10px var(--glow); }
.center{ text-align:center; margin-inline:auto; }
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--ink-faint); }
.small{ font-size:0.88rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,26,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--void-line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.brand:hover{ text-decoration:none; }
.brand svg{ display:block; }
nav.main-nav{ display:none; gap:28px; align-items:center; }
nav.main-nav a{ color:var(--ink-dim); font-size:0.94rem; font-weight:500; }
nav.main-nav a:hover{ color:var(--ink); text-decoration:none; }
@media (min-width:940px){ nav.main-nav{ display:flex; } }
.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:inline-flex; background:none; border:1px solid var(--void-line); color:var(--ink); border-radius:8px; padding:8px 10px; }
@media (min-width:940px){ .nav-toggle{ display:none; } }
.mobile-nav{ display:none; flex-direction:column; gap:2px; padding:8px var(--edge) 18px; border-bottom:1px solid var(--void-line); background:var(--void); }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ color:var(--ink-dim); padding:10px 0; border-bottom:1px solid var(--void-line); font-size:0.95rem; }
.mobile-nav a:last-child{ border-bottom:none; }
@media (min-width:940px){ .mobile-nav{ display:none !important; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:0.94rem;
  padding:12px 22px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; }
.btn-primary{
  background:linear-gradient(135deg, var(--signal), var(--signal-2));
  color:#050810; box-shadow:0 0 0 rgba(91,140,255,0);
}
.btn-primary:hover{ box-shadow:0 8px 30px -6px var(--glow); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color:var(--void-line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--signal); background:var(--signal-soft); }
.btn-sm{ padding:9px 16px; font-size:0.86rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(72px, 12vw, 132px) clamp(48px, 8vw, 88px); position:relative; }
.hero-inner{ max-width:820px; }
.hero h1{ margin-bottom:0.4em; }
.hero .lede{ margin-bottom:0; }
.hero-visual{ margin-top:56px; }

/* ---------- Cards ---------- */
.card{
  background:var(--void-raised); border:1px solid var(--void-line); border-radius:var(--radius);
  padding:28px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, transparent, transparent);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
a.card{ color:inherit; display:block; }
a.card:hover{ text-decoration:none; border-color:rgba(91,140,255,0.45); transform:translateY(-3px); box-shadow:0 16px 40px -20px rgba(91,140,255,0.35); }
.card-icon{
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--signal-soft); color:var(--signal); margin-bottom:18px; flex-shrink:0;
}
.card h3, .card h4{ margin-bottom:0.4em; }
.card p{ margin-bottom:0; font-size:0.95rem; }
.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:0.88rem; font-weight:600; color:var(--signal); font-family:var(--font-mono); }

/* ---------- Sections shared ---------- */
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.divider{ height:1px; background:var(--void-line); border:none; margin:0; }

/* ---------- Process ---------- */
.process-list{ display:flex; flex-direction:column; border-top:1px solid var(--void-line); }
.process-item{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--void-line); }
.process-num{ font-family:var(--font-mono); color:var(--signal); font-size:0.95rem; padding-top:4px; }
.process-item h4{ margin-bottom:6px; }
.process-item p{ margin-bottom:0; }

/* ---------- Stat strip ---------- */
.stat-strip{ display:flex; flex-wrap:wrap; gap:40px; padding-block:28px; border-top:1px solid var(--void-line); border-bottom:1px solid var(--void-line); }
.stat{ min-width:140px; }
.stat .num{ font-family:var(--font-display); font-size:1.9rem; color:var(--ink); }
.stat .lbl{ font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em; }

/* ---------- Case study cards ---------- */
.case-card{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--void-line); border-radius:var(--radius); overflow:hidden; background:var(--void-raised); }
@media (min-width:820px){ .case-card{ grid-template-columns:1.1fr 1fr; } }
.case-card .case-visual{ padding:32px; background:radial-gradient(ellipse at top left, rgba(91,140,255,0.14), transparent 60%), var(--void); border-bottom:1px solid var(--void-line); display:flex; flex-direction:column; justify-content:center; }
@media (min-width:820px){ .case-card .case-visual{ border-bottom:none; border-right:1px solid var(--void-line); } }
.case-card .case-body{ padding:32px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.tag{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--ink-dim); border:1px solid var(--void-line); padding:4px 10px; border-radius:100px; }

/* ---------- Testimonial / clients ---------- */
.client-strip{ display:flex; flex-wrap:wrap; gap:16px; }
.client-chip{ border:1px solid var(--void-line); border-radius:100px; padding:10px 20px; font-family:var(--font-mono); font-size:0.85rem; color:var(--ink-dim); }

/* ---------- Forms ---------- */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:0.85rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.form-field .hint{ font-size:0.8rem; color:var(--ink-faint); margin-top:6px; }
input[type=text], input[type=email], select, textarea{
  width:100%; background:var(--void-raised); border:1px solid var(--void-line); color:var(--ink);
  padding:13px 14px; border-radius:8px; font-family:var(--font-body); font-size:0.95rem;
}
textarea{ min-height:130px; resize:vertical; }
input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
.form-row-2{ display:grid; gap:20px; }
@media (min-width:640px){ .form-row-2{ grid-template-columns:1fr 1fr; } }
.form-status{ margin-top:16px; font-size:0.9rem; }
.form-status[data-state="ok"]{ color:var(--ok); }
.form-status[data-state="err"]{ color:#f87171; }
fieldset{ border:none; padding:0; margin:0; }

/* ---------- CTA band ---------- */
.cta-band{ border:1px solid var(--void-line); border-radius:20px; padding:clamp(32px,6vw,64px); text-align:center; background:radial-gradient(ellipse 700px 300px at 50% 0%, rgba(91,140,255,0.16), transparent 70%), var(--void-raised); }
.cta-band h2{ margin-bottom:0.3em; }
.cta-band .lede{ margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); padding-top:20px; }
.breadcrumbs a{ color:var(--ink-faint); }
.breadcrumbs a:hover{ color:var(--signal); }
.breadcrumbs .sep{ margin:0 8px; }

/* ---------- Footer ---------- */
footer.site-footer{ border-top:1px solid var(--void-line); padding-block:56px 32px; position:relative; z-index:1; }
.footer-grid{ display:grid; gap:36px; grid-template-columns:1.4fr 1fr 1fr 1fr; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h5{ font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint); margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:var(--ink-dim); font-size:0.9rem; }
.footer-col a:hover{ color:var(--signal); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--void-line); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; color:var(--ink-faint); font-size:0.82rem; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand span{ font-family:var(--font-display); font-weight:600; color:var(--ink); }

/* ---------- Blog ---------- */
.post-card{ border-bottom:1px solid var(--void-line); padding-block:28px; display:grid; gap:6px; }
.post-meta{ font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; }
.post-body{ max-width:72ch; }
.post-body h2{ font-size:var(--step-2); margin-top:1.4em; }
.post-body h3{ font-size:var(--step-1); margin-top:1.2em; }
.post-body ul, .post-body ol{ color:var(--ink-dim); }
.post-body li{ margin-bottom:0.4em; }

/* ---------- Utility ---------- */
.flow > * + *{ margin-top:1em; }
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.visually-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }