/* ============================================================
   SOVEKT — Infrastructure-grade brand system
   Concept: warm signal on a calm, engineered dark base.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* Surfaces — cool near-black, faint blue cast */
  --bg:        #0b0e13;
  --bg-2:      #0e1219;
  --surface:   #131822;
  --surface-2: #19202c;
  --border:    #232c3a;
  --border-2:  #2f3a4b;

  /* Text tiers (all AA on --bg) */
  --text:   #eef1f6;
  --text-2: #aeb7c4;
  --text-3: #8a94a3;

  /* Accent — warm amber "signal": the glow of a system running well */
  --accent:        #f6a623;
  --accent-strong: #ffba43;
  --accent-ink:    #2a1c05;          /* text that sits on amber */
  --accent-soft:   rgba(246,166,35,.12);
  --accent-line:   rgba(246,166,35,.32);

  /* Cool support — used sparingly for the product/case study */
  --cool:      #62d2d8;
  --cool-soft: rgba(98,210,216,.12);

  /* Semantic */
  --success: #5cd99b;
  --warning: #f6c544;

  /* Type */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --nav-h: 72px;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --section-y: clamp(80px, 10vw, 144px);
  --radius: 14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(.22,.7,.2,1);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-0.03em; }
p{ margin:0; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section-y); position:relative; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent-line);
}
.section-head{ max-width:640px; margin-bottom:clamp(40px,6vw,68px); }
.section-head h2{
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  margin-top:18px;
  text-wrap:balance;
}
.section-head p{
  color:var(--text-2);
  font-size:1.075rem;
  margin-top:18px;
  max-width:54ch;
  text-wrap:pretty;
}

/* ---- Buttons ---- */
.btn{
  --bx:0;
  display:inline-flex; align-items:center; gap:.6em;
  padding:14px 22px;
  border-radius:10px;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:-0.01em;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), box-shadow .35s var(--ease), color .2s;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 0 0 0 var(--accent-soft);
}
.btn-primary:hover{
  background:var(--accent-strong);
  box-shadow:0 10px 34px -10px rgba(246,166,35,.6);
}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border-2);
}
.btn-ghost:hover{
  border-color:var(--text-3);
  background:var(--surface);
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,14,19,.72);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--border);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand .word{
  font-family:var(--font-display); font-weight:600; font-size:1.32rem;
  letter-spacing:-0.04em; color:var(--text);
}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:.95rem; color:var(--text-2); font-weight:500;
  position:relative; transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background:var(--accent); transition:width .28s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }

.hamburger{
  display:none;
  width:42px; height:42px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  position:relative;
}
.hamburger span{
  position:absolute; left:11px; right:11px; height:1.8px; background:var(--text);
  transition:transform .3s var(--ease), opacity .2s;
}
.hamburger span:nth-child(1){ top:15px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger span:nth-child(3){ top:25px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Mobile menu sheet */
.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
  background:rgba(11,14,19,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:14px var(--pad) 28px;
  display:none; flex-direction:column; gap:6px;
  transform:translateY(-12px); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-menu.open{ display:flex; transform:none; opacity:1; }
.mobile-menu a{
  padding:15px 6px; font-size:1.15rem; font-family:var(--font-display);
  font-weight:500; color:var(--text); border-bottom:1px solid var(--border);
}
.mobile-menu .btn{ margin-top:18px; justify-content:center; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:80px;
  overflow:hidden;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:48px; align-items:center;
}
.hero h1{
  font-size:clamp(2.7rem, 6vw, 4.7rem);
  line-height:1.0; letter-spacing:-0.04em; text-wrap:balance;
  margin-top:24px;
}
.hero h1 .glow{ color:var(--accent); position:relative; white-space:nowrap; }
.hero h1 .glow::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius:2px; box-shadow:0 0 12px rgba(246,166,35,.6);
  transform:scaleX(0); transform-origin:left;
}
.hero h1.in .glow::after{ animation:underline .7s var(--ease) .55s forwards; }
.hero h1.in .glow{ animation:glowPulse 3.6s ease-in-out 1.4s infinite; }
@keyframes underline{ to{ transform:scaleX(1); } }
@keyframes glowPulse{
  0%,100%{ text-shadow:0 0 0 transparent; }
  50%{ text-shadow:0 0 20px rgba(246,166,35,.45); }
}
/* rotating manual-task word */
.rotator{ display:inline-block; min-width:5.2em; text-align:left; }
.rot-word{ display:inline-block; color:var(--accent); will-change:transform,opacity; }
.rot-word.swap{ animation:rotSwap .5s var(--ease); }
@keyframes rotSwap{
  0%{ opacity:0; transform:translateY(.45em); }
  100%{ opacity:1; transform:translateY(0); }
}
.hero-sub{
  margin-top:26px; font-size:clamp(1.05rem,1.5vw,1.28rem);
  color:var(--text-2); max-width:46ch; text-wrap:pretty;
}
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.proof{
  display:flex; gap:34px; margin-top:48px; flex-wrap:wrap;
  padding-top:30px; border-top:1px solid var(--border);
}
.proof-item .n{
  font-family:var(--font-display); font-weight:600; font-size:1.7rem;
  letter-spacing:-0.03em; color:var(--text);
}
.proof-item .l{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); margin-top:4px;
}

/* Hero signature: interactive manual-vs-automated workflow */
.hero-art{ position:relative; }
.wf-panel{
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.wf-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.wf-toggle{ display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
.wf-mode{
  font-family:var(--font-mono); font-size:.72rem; border:none; border-radius:8px;
  padding:7px 14px; cursor:pointer; background:transparent; color:var(--text-3);
  transition:background .2s, color .2s;
}
.wf-mode.is-manual{ background:#e24b4a; color:#2a0c0c; }
.wf-mode.is-auto{ background:var(--accent); color:var(--accent-ink); }
.wf-status{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); }
.wf-canvas{ width:100%; display:block; overflow:visible; }

.wf-canvas .dot{ fill:var(--accent-strong); filter:drop-shadow(0 0 6px rgba(246,166,35,.9)); }
.wnode{ cursor:pointer; }
.wnode rect, .wnode .nd{ transition:stroke .2s, opacity .25s, fill .2s, filter .2s; }
.wf-canvas.dim .wnode:not(.focus) rect,
.wf-canvas.dim .wnode:not(.focus) .nd{ opacity:.3; }
.wf-token{ cursor:grab; touch-action:none; }
.wf-token.grabbing{ cursor:grabbing; }
.wf-token rect{ fill:var(--surface-2); stroke:#e24b4a; stroke-width:1.4; }
.wf-token text{ font-family:var(--font-mono); font-size:9px; fill:var(--text); pointer-events:none; }
.wf-nodelabel{ font-family:var(--font-mono); font-size:10px; fill:var(--text-2); pointer-events:none; }
.wf-cap{ font-family:var(--font-sans); font-size:11.5px; fill:var(--text-3); }

.hero-glow{
  position:absolute; z-index:1; inset:auto; width:60vw; height:60vw;
  max-width:760px; max-height:760px;
  right:-14vw; top:8%;
  background:radial-gradient(circle, rgba(246,166,35,.16), transparent 62%);
  filter:blur(20px); pointer-events:none;
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.8; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
/* faint blueprint grid behind everything */
.grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
  opacity:.5;
}

/* =========================================================
   TECH STRIP
   ========================================================= */
.strip{ border-block:1px solid var(--border); background:var(--bg-2); }
.strip .wrap{ display:flex; align-items:center; gap:30px; flex-wrap:wrap;
  padding-block:26px; }
.strip .label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); white-space:nowrap;
}
.strip ul{ display:flex; gap:14px 28px; flex-wrap:wrap; flex:1; }
.strip li{
  font-family:var(--font-mono); font-size:.92rem; color:var(--text-2);
  display:inline-flex; align-items:center; gap:8px;
}
.strip li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* =========================================================
   GENERIC CARD + spotlight
   ========================================================= */
.card{
  position:relative; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:30px; overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card::before{ /* cursor spotlight */
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 70%);
  transition:opacity .35s var(--ease);
}
.card:hover{ border-color:var(--border-2); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }

/* =========================================================
   PROBLEMS
   ========================================================= */
.problems-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.problem .ico{
  width:44px; height:44px; border-radius:11px; background:var(--surface-2);
  border:1px solid var(--border); display:grid; place-items:center; color:var(--accent);
  margin-bottom:22px;
}
.problem h3{ font-size:1.22rem; letter-spacing:-0.02em; }
.problem p{ color:var(--text-2); margin-top:12px; font-size:1rem; }
.problem .cost{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--text-3); text-transform:uppercase;
}
.problem .cost b{ color:var(--warning); font-weight:500; }

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.service{ padding:34px; }
.service .topline{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.service .num{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em;
  color:var(--text-3);
}
.service .ico{
  width:48px; height:48px; border-radius:12px; background:var(--accent-soft);
  border:1px solid var(--accent-line); display:grid; place-items:center; color:var(--accent);
}
.service h3{ font-size:1.45rem; margin-top:26px; letter-spacing:-0.025em; }
.service p{ color:var(--text-2); margin-top:14px; max-width:46ch; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em;
  color:var(--text-2); background:var(--surface-2); border:1px solid var(--border);
  padding:5px 11px; border-radius:7px;
}

/* =========================================================
   CASE STUDY
   ========================================================= */
.case{ background:var(--bg-2); border-block:1px solid var(--border); }
.case-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,72px); align-items:center; }
.case-badge{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cool); display:inline-flex; align-items:center; gap:.6em;
}
.case-badge::before{ content:""; width:22px; height:1px; background:var(--cool); }
.case h2{ font-size:clamp(1.9rem,4vw,2.9rem); margin-top:18px; }
.case .lead{ color:var(--text-2); margin-top:18px; font-size:1.08rem; max-width:48ch; }
.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px; max-width:440px; }
.metric{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px;
}
.metric .n{ font-family:var(--font-display); font-weight:600; font-size:2rem; letter-spacing:-0.03em; color:var(--text); }
.metric .n.cool{ color:var(--cool); }
.metric .l{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-top:4px; }

/* Faux product window */
.mock{
  background:var(--surface); border:1px solid var(--border-2); border-radius:14px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7); overflow:hidden;
}
.mock .bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.mock .dot{ width:11px; height:11px; border-radius:50%; background:var(--border-2); }
.mock .url{ margin-left:10px; font-family:var(--font-mono); font-size:.74rem; color:var(--text-3); }
.mock .body{ display:grid; grid-template-columns:64px 1fr; min-height:300px; }
.mock .side{ border-right:1px solid var(--border); padding:16px 0; display:flex; flex-direction:column; gap:14px; align-items:center; }
.mock .side .si{ width:26px; height:26px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border); }
.mock .side .si.on{ background:var(--accent-soft); border-color:var(--accent-line); }
.mock .main{ padding:20px; }
.mock .mh{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.mock .mh .t{ font-family:var(--font-display); font-weight:600; font-size:1rem; }
.mock .mh .pill{ font-family:var(--font-mono); font-size:.68rem; color:var(--accent-ink); background:var(--accent); padding:4px 10px; border-radius:20px; }
.mock .cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mock .col .ch{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:9px; display:flex; justify-content:space-between; }
.mock .kanban{ display:flex; flex-direction:column; gap:9px; }
.mock .kc{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:10px; }
.mock .kc .l1{ height:7px; border-radius:4px; background:var(--border-2); width:78%; }
.mock .kc .l2{ height:6px; border-radius:4px; background:var(--border); width:54%; margin-top:7px; }
.mock .kc.accent{ border-color:var(--accent-line); }
.mock .kc.accent .l1{ background:var(--accent); opacity:.8; }

/* =========================================================
   INDUSTRIES
   ========================================================= */
.ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ind{ padding:32px; }
.ind .ico{ color:var(--accent); margin-bottom:22px; }
.ind .k{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.ind h3{ font-size:1.3rem; margin-top:10px; letter-spacing:-0.02em; }
.ind p{ color:var(--text-2); margin-top:12px; font-size:.99rem; }

/* =========================================================
   PROCESS
   ========================================================= */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.step{ padding:32px clamp(20px,3vw,38px); position:relative; }
.step:not(:last-child){ border-right:1px solid var(--border); }
.step .si{
  font-family:var(--font-mono); font-size:.78rem; color:var(--accent);
  display:flex; align-items:center; gap:10px;
}
.step .si .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.step h3{ font-size:1.42rem; margin-top:22px; letter-spacing:-0.025em; }
.step p{ color:var(--text-2); margin-top:14px; }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.quote{ max-width:880px; margin-inline:auto; text-align:center; }
.quote blockquote{
  font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em;
  font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.25; margin:0; text-wrap:balance;
}
.quote blockquote .hl{ color:var(--accent); }
.quote .who{ margin-top:30px; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(28px,5vw,64px); align-items:start; }
.faq-list{ border-top:1px solid var(--border); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 4px; text-align:left; background:none; border:0;
  font-family:var(--font-display); font-weight:500; font-size:1.18rem; letter-spacing:-0.02em;
  color:var(--text); transition:color .2s;
}
.faq-q:hover{ color:var(--accent); }
.faq-icon{ position:relative; width:18px; height:18px; flex:none; }
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s;
}
.faq-icon::before{ top:8px; left:0; width:18px; height:2px; }
.faq-icon::after{ left:8px; top:0; width:2px; height:18px; }
.faq-item[aria-expanded="true"] .faq-icon::after{ transform:scaleY(0); opacity:0; }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a p{ color:var(--text-2); padding:0 4px 26px; max-width:62ch; }

/* =========================================================
   CTA / BOOKING
   ========================================================= */
.cta{ position:relative; overflow:hidden; }
.cta .wrap{ position:relative; z-index:1; }
.cta-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 0%, var(--accent-soft), transparent 70%); }
.cta-head{ text-align:center; max-width:680px; margin-inline:auto; margin-bottom:48px; }
.cta-head h2{ font-size:clamp(2.1rem,4.5vw,3.4rem); text-wrap:balance; }
.cta-head p{ color:var(--text-2); font-size:1.12rem; margin-top:20px; }
.cta-head .email{ color:var(--accent); border-bottom:1px solid var(--accent-line); }
.cal-shell{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:10px; box-shadow:0 40px 100px -50px rgba(0,0,0,.8); overflow:hidden;
}
#my-cal-inline{ width:100%; min-height:620px; border-radius:12px; overflow:auto; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--border); background:var(--bg-2); }
.footer .wrap{ padding-block:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer .brand .word{ font-size:1.1rem; }
.footer .meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-3); }
.footer .socials{ display:flex; gap:10px; }
.footer .socials a{
  width:40px; height:40px; border-radius:10px; background:var(--surface); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--text-2); transition:color .2s, border-color .2s, transform .2s var(--ease);
}
.footer .socials a:hover{ color:var(--accent); border-color:var(--border-2); transform:translateY(-2px); }

/* =========================================================
   REVEAL MOTION
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  body{ font-size:16px; }
  .nav-links{ display:none; }
  .nav-cta .btn-primary{ display:none; }
  .hamburger{ display:block; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-art{ max-width:420px; margin-inline:auto; }
  .hero{ min-height:auto; }
  /* headline: stack the rotating word and "by hand." onto their own lines across the whole mobile range */
  .rotator{ min-width:0; display:block; }
  .hero h1 .glow{ display:inline-block; }
  .problems-grid,.services-grid,.ind-grid,.process-grid,.metrics{ grid-template-columns:1fr; }
  .step:not(:last-child){ border-right:0; border-bottom:1px solid var(--border); }
  .case-grid{ grid-template-columns:1fr; }
  .case .mock-wrap{ order:-1; }
  .faq-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  :root{ --pad:18px; }
  .proof{ gap:24px; }
  .service,.card,.ind{ padding:24px; }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .footer .wrap{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  /* workflow: JS paints a static automated snapshot; just calm the dots */
  .wf-canvas .dot{ opacity:0 !important; }
  .hero h1 .glow::after{ transform:scaleX(1) !important; }
  .rot-word.swap{ animation:none !important; }
  .hero-glow{ transform:none !important; opacity:.9 !important; }
}