/* ==========================================================================
   KOMOTION — Design system v2 : "tech dense mais lisible"
   Grille fixe, glow curseur, cadres HUD, stack layers
   ========================================================================== */

:root{
  --ink: #0A0A0E;
  --ink-soft: #121118;
  --ink-elevated: #1A1926;
  --line: rgba(237,235,245,.09);
  --line-strong: rgba(237,235,245,.16);

  --signal: #FFC400;
  --ember: #FF4D2E;
  --volt: #7C5CFF;
  --success: #4ADE80;
  --danger: #FB7185;

  --text-ink: #EDEBF5;
  --text-ink-dim: #8E8CA0;
  --text-ink-dimmer: #605E70;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 32px;

  --wrap-max: 1520px;
  --pad: clamp(24px, 5vw, 96px);
  --wrap: min(var(--wrap-max), calc(100vw - 2 * var(--pad)));

  --ease: cubic-bezier(.22,.61,.36,1);
  --mx: 50%;
  --my: 50%;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:'Clash Display', 'Inter', sans-serif;
  font-weight:600;
  line-height:1.05;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{ font-family:'JetBrains Mono', monospace; }

.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 var(--pad); position:relative; z-index:2; }

/* ==========================================================================
   Ambient tech layers — grid / cursor glow / noise
   Fixed, non-interactive, low opacity: decorative only, never over content clarity
   ========================================================================== */
.fx-layer{ position:fixed; inset:0; pointer-events:none; z-index:1; }

.fx-grid{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 95% 70% at 50% 0%, black 15%, transparent 82%);
  mask-image: radial-gradient(ellipse 95% 70% at 50% 0%, black 15%, transparent 82%);
}

.fx-glow{
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,196,0,.07), transparent 70%);
  z-index: 3;
}

.fx-noise{
  z-index:4;
  opacity:.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (max-width: 640px){
  .fx-glow{ display:none; }
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--signal);
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background: var(--signal);
  display:inline-block;
}

/* ---------- Rotating headline word ---------- */
.word-rotate{
  display:inline-block;
  position:relative;
  min-width: 18.5ch;
  text-align:left;
  vertical-align:baseline;
}
.word-rotate > span{
  display:inline-block;
  background: linear-gradient(100deg, var(--signal), var(--ember) 55%, var(--volt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.word-rotate.is-changing > span{
  animation: wordSwap .55s var(--ease) forwards;
}
@keyframes wordSwap{
  0%{ opacity:1; transform: translateY(0); filter: blur(0); }
  45%{ opacity:0; transform: translateY(-10px); filter: blur(3px); }
  55%{ opacity:0; transform: translateY(10px); filter: blur(3px); }
  100%{ opacity:1; transform: translateY(0); filter: blur(0); }
}

/* ---------- HUD corner-bracket frame (pure CSS, no extra markup) ---------- */
.hud-frame{
  position:relative;
  background-image:
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position:
    12px 12px, 12px 12px,
    calc(100% - 12px) 12px, calc(100% - 12px) 12px,
    12px calc(100% - 12px), 12px calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px);
  background-origin: border-box;
}
.hud-frame > *{ position:relative; z-index:1; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: .95em 1.6em;
  border-radius: 999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
  position:relative;
}
.btn-primary{
  background: var(--signal);
  color: #0A0A0E;
  box-shadow: 0 8px 24px -8px rgba(255,196,0,.5);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(255,196,0,.65); }
.btn-ghost{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-ink);
}
.btn-ghost:hover{ border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }

/* ---------- Status widget (live-looking) ---------- */
.status-widget{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:.74rem; color: var(--text-ink-dim);
  padding:7px 14px; border-radius:999px; border:1px solid var(--line-strong);
  background: rgba(237,235,245,.02);
  white-space:nowrap;
}
.status-dot{
  width:7px; height:7px; border-radius:50%; background: var(--success); flex-shrink:0;
  animation: pulseDot 2.2s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); }
  70%{ box-shadow:0 0 0 7px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.status-widget b{ color: var(--text-ink); font-weight:500; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(10,10,14,.78);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: inherit;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index:-1;
  pointer-events:none;
}
.header-inner{
  position:relative;
  z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
  gap: 24px;
}
.logo{ display:flex; align-items:center; gap:11px; font-family:'Clash Display', sans-serif; font-weight:700; font-size:1.25rem; flex-shrink:0; }
.logo-badge{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  background: var(--ink-elevated);
  color: var(--signal);
  font-size: 1.05rem;
  border: 1px solid rgba(255,196,0,.35);
  overflow:hidden;
}
.logo-badge .chev{
  position:absolute; right:5px; top:50%; transform: translateY(-50%);
  width:0; height:0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 7px solid var(--signal);
}
.site-nav{ display:flex; gap:32px; font-size:.95rem; font-weight:500; }
.site-nav a{ color: var(--text-ink-dim); transition: color .25s var(--ease); position:relative; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ color: var(--text-ink); }
.site-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--signal);
}
.header-inner .btn-nav{ display:inline-flex; }
.site-nav-cta{ display:none; }
.nav-toggle{
  display:none;
  position:relative;
  z-index:110;
  background:none;
  border:none;
  width:44px;
  height:44px;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  position:absolute;
  left:11px;
  right:11px;
  height:2px;
  background:var(--text-ink);
  border-radius:2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease), top .28s var(--ease);
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.is-active span:nth-child(1){ top:21px; transform: rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ top:21px; transform: rotate(-45deg); }

body.nav-open,
html.nav-open{ overflow:hidden; }

@media (max-width: 860px){
  .logo{ position:relative; z-index:110; }
  .site-nav{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:
      calc(76px + env(safe-area-inset-top, 0px))
      max(var(--pad), env(safe-area-inset-right, 0px))
      max(28px, env(safe-area-inset-bottom, 0px))
      max(var(--pad), env(safe-area-inset-left, 0px));
    background: rgba(10,10,14,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow-y:auto;
    overscroll-behavior: contain;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform: translateX(100%);
    transition:
      transform .32s var(--ease),
      opacity .28s var(--ease),
      visibility .32s;
  }
  .site-nav.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform: translateX(0);
  }
  .site-nav a{
    width:100%;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    font-size:1.05rem;
  }
  .site-nav a[aria-current="page"]::after{ display:none; }
  .site-nav a[aria-current="page"]{
    color: var(--signal);
    border-bottom-color: rgba(255,196,0,.22);
  }
  .site-nav a.site-nav-cta{
    color:#0A0A0E;
    border-bottom:none;
    padding:.95em 1.6em;
    margin-top:28px;
    text-align:center;
  }
  .site-nav a.site-nav-cta:hover{ color:#0A0A0E; }
  .site-nav-cta{
    display:inline-flex;
    width:100%;
    justify-content:center;
  }
  .header-inner .btn-nav{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Section rhythm ---------- */
section{ position:relative; padding: clamp(56px, 9vw, 108px) 0; z-index:2; }
.section-line{ border-top: 1px solid var(--line-strong); }
.section-soft{ background: var(--ink-soft); }
.section-surface{ background: var(--ink); }
.section-cta{ padding-bottom: clamp(72px, 10vw, 120px); }
.section-head{ max-width: 660px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(2rem, 4vw, 2.85rem); margin-top:14px; }
.section-head p{ color: var(--text-ink-dim); margin-top:16px; font-size:1.05rem; }
.section-actions{ margin-top: clamp(32px, 5vw, 44px); }

/* ---------- Hero ---------- */
.hero{
  padding-top: clamp(64px, 9vw, 108px);
  padding-bottom: clamp(64px, 9vw, 96px);
  overflow: visible;
}
.hero::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 78% 38%, rgba(255,196,0,.07), transparent 62%),
    radial-gradient(ellipse 40% 35% at 22% 72%, rgba(124,92,255,.05), transparent 58%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background: var(--line-strong);
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  align-items:center;
  min-height: clamp(420px, 52vh, 560px);
}
.hero-copy{
  max-width: 36rem;
  align-self:center;
}
.hero-title{
  display:flex;
  flex-direction:column;
  gap:.06em;
}
.hero-title-line{ display:block; }
.hero-title-accent{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.hero-title-punct{
  color: var(--text-ink);
  margin-left:.02em;
}
.hero h1{ font-size: clamp(2.5rem, 4.6vw, 4.35rem); line-height:1.02; }
.hero h1 .accent{
  background: linear-gradient(100deg, var(--signal), var(--ember) 55%, var(--volt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lede{ color: var(--text-ink-dim); font-size:1.1rem; margin-top:20px; max-width:48ch; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-meta{
  display:flex;
  gap:16px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
  flex-wrap:wrap;
}

/* ---------- Signature: hero screens ---------- */
.signature{
  position:relative;
  min-height: clamp(380px, 46vh, 480px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-right: calc(-1 * max(0px, (100vw - var(--wrap-max)) / 2 - var(--pad) + 32px));
  width: calc(100% + max(0px, (100vw - var(--wrap-max)) / 2 - var(--pad) + 32px));
  overflow: visible;
}
.hero-stage{
  position:relative;
  z-index:2;
  width: min(480px, 100%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
  margin-right: clamp(0px, 2vw, 20px);
}
.hero-stack-label{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background: rgba(18,17,24,.92);
  backdrop-filter: blur(12px);
  font-size:.7rem;
  letter-spacing:.04em;
  color: var(--text-ink);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.55);
}
.hero-screen{
  position:relative;
  width:100%;
}
.hero-screen--app{
  transform: rotate(-.6deg);
  transform-origin: center top;
}
.hero-screen--term{
  width: min(380px, 92%);
  align-self:flex-end;
  transform: rotate(.8deg);
  transform-origin: center top;
}
.hero-float-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--signal); flex-shrink:0;
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .hero-stage:hover .hero-screen--app{ transform: rotate(-.35deg) translateY(-2px); }
  .hero-stage:hover .hero-screen--term{ transform: rotate(.45deg) translateY(-2px); }
}
.hero-orb{
  position:absolute;
  width: min(420px, 72%);
  height: min(420px, 72%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,196,0,.22), rgba(255,77,46,.12) 42%, rgba(124,92,255,.08) 68%, transparent 72%);
  filter: blur(2px);
  z-index:0;
  animation: heroOrbPulse 8s ease-in-out infinite;
}
@keyframes heroOrbPulse{
  0%,100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.06); opacity:1; }
}

.app-preview{
  position:relative;
  width:100%;
  opacity:.98;
}
.app-frame{
  background: rgba(18,17,24,.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  overflow:hidden;
  box-shadow:
    0 40px 80px -28px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,196,0,.06),
    0 0 60px -20px rgba(255,196,0,.12);
}
.app-chrome{
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(237,235,245,.02);
}
.app-dots{ display:flex; gap:6px; flex-shrink:0; }
.app-dots span{ width:9px; height:9px; border-radius:50%; }
.app-dots span:nth-child(1){ background:#FF5F57; }
.app-dots span:nth-child(2){ background:#FEBC2E; }
.app-dots span:nth-child(3){ background:#28C840; }
.app-url{ font-size:.68rem; color: var(--text-ink-dimmer); letter-spacing:.04em; }
.app-body{ display:grid; grid-template-columns: 118px 1fr; min-height: 210px; }
.app-sidebar{
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: rgba(237,235,245,.015);
  display:flex; flex-direction:column; gap:4px;
}
.app-nav-item{
  display:flex; align-items:center; gap:8px;
  font-size:.68rem; color: var(--text-ink-dim);
  padding: 8px 10px; border-radius:8px;
  font-family:'Inter',sans-serif;
}
.app-nav-item.is-active{
  background: rgba(255,196,0,.1);
  color: var(--text-ink);
  border: 1px solid rgba(255,196,0,.18);
}
.app-nav-icon{
  width:12px; height:12px; border-radius:3px;
  background: var(--line-strong); flex-shrink:0;
}
.app-nav-item.is-active .app-nav-icon{ background: var(--signal); }
.app-main{ padding: 14px; display:flex; flex-direction:column; gap:12px; }
.app-kpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.app-kpi{
  background: rgba(237,235,245,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.app-kpi-label{
  display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-ink-dimmer); font-family:'JetBrains Mono',monospace;
  margin-bottom:4px;
}
.app-kpi-value{
  display:block; font-family:'Clash Display',sans-serif; font-size:1.05rem; font-weight:600;
}
.app-kpi-value.is-warn{ color: var(--signal); }
.app-table{
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow:hidden;
  font-family:'JetBrains Mono',monospace; font-size:.68rem;
}
.app-row{
  display:grid; grid-template-columns: 1fr 1.2fr .9fr;
  gap:8px; align-items:center;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  color: var(--text-ink-dim);
}
.app-row:first-child{ border-top:none; }
.app-row-head{
  background: rgba(237,235,245,.03);
  color: var(--text-ink-dimmer);
  text-transform:uppercase; letter-spacing:.05em; font-size:.6rem;
}
.app-badge{
  display:inline-block; padding: 3px 7px; border-radius:999px; font-size:.56rem;
  border: 1px solid transparent; text-align:center;
}
.app-badge.is-ok{ background: rgba(74,222,128,.12); color:#86EFAC; border-color: rgba(74,222,128,.25); }
.app-badge.is-pending{ background: rgba(255,196,0,.1); color: var(--signal); border-color: rgba(255,196,0,.25); }

.app-preview .app-row:not(.app-row-head){
  opacity:0; transform: translateY(4px);
  animation: appRowIn .45s var(--ease) forwards;
}
.app-preview .app-row:nth-child(2){ animation-delay: .6s; }
.app-preview .app-row:nth-child(3){ animation-delay: 1s; }
@keyframes appRowIn{ to{ opacity:1; transform:none; } }

.terminal{
  position:relative;
  width:100%;
  background: rgba(18,17,24,.96);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  backdrop-filter: blur(18px);
  box-shadow:
    0 36px 70px -24px rgba(0,0,0,.65),
    0 0 50px -12px rgba(124,92,255,.18);
  padding: 20px 22px 24px;
}
.terminal-bar{ display:flex; gap:7px; margin-bottom:14px; }
.terminal-bar span{ width:10px; height:10px; border-radius:50%; }
.terminal-bar span:nth-child(1){ background:#FF5F57; }
.terminal-bar span:nth-child(2){ background:#FEBC2E; }
.terminal-bar span:nth-child(3){ background:#28C840; }
.terminal-lines{ font-family:'JetBrains Mono', monospace; font-size:.88rem; line-height:1.8; color: var(--text-ink); }
.terminal-lines .cmd{ color: var(--signal); }
.terminal-lines li{ opacity:0; transform: translateY(6px); animation: lineIn .5s var(--ease) forwards; }
.terminal-lines li:nth-child(1){ animation-delay: .2s; }
.terminal-lines li:nth-child(2){ animation-delay: .7s; }
.terminal-lines li:nth-child(3){ animation-delay: 1.2s; }
.terminal-lines li:nth-child(4){ animation-delay: 1.7s; }
@keyframes lineIn{ to{ opacity:1; transform:none; } }
.ok{ color:#4ADE80; }
.cursor-blink{ display:inline-block; width:7px; height:14px; background:var(--signal); vertical-align:middle; animation: blink 1s steps(1) infinite; margin-left:4px; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Code diff ---------- */
.code-diff{ background: var(--ink-elevated); border:1px solid var(--line-strong); border-radius: var(--radius-m); overflow:hidden; }
.code-diff-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 18px; border-bottom:1px solid var(--line); }
.code-diff-head .dots{ display:flex; gap:6px; }
.code-diff-head .dots span{ width:9px; height:9px; border-radius:50%; }
.code-diff-head .dots span:nth-child(1){ background:#FF5F57; }
.code-diff-head .dots span:nth-child(2){ background:#FEBC2E; }
.code-diff-head .dots span:nth-child(3){ background:#28C840; }
.code-diff-head .filename{ font-family:'JetBrains Mono',monospace; font-size:.76rem; color: var(--text-ink-dimmer); }
.code-diff-body{ font-family:'JetBrains Mono',monospace; font-size:.85rem; padding: 10px 0; }
.code-diff .line{ padding:5px 20px; display:flex; gap:14px; align-items:flex-start; }
.code-diff .line .sign{ opacity:.6; width:10px; flex-shrink:0; }
.code-diff .line.rm{ background: rgba(251,113,133,.07); color:#FCA5A5; }
.code-diff .line.add{ background: rgba(74,222,128,.08); color:#86EFAC; }
.code-diff .line.neutral{ color: var(--text-ink-dim); }

/* ---------- Cards: services ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tech-card{
  --card-accent: var(--signal);
  --card-accent-dim: rgba(255,196,0,.14);
  position:relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  padding: 34px;
  overflow:hidden;
  min-height: 248px;
  display:flex;
  flex-direction:column;
  background-color: var(--ink-elevated);
  background-image:
    linear-gradient(color-mix(in srgb, var(--card-accent) 55%, transparent), color-mix(in srgb, var(--card-accent) 55%, transparent)),
    linear-gradient(color-mix(in srgb, var(--card-accent) 55%, transparent), color-mix(in srgb, var(--card-accent) 55%, transparent)),
    linear-gradient(color-mix(in srgb, var(--card-accent) 55%, transparent), color-mix(in srgb, var(--card-accent) 55%, transparent)),
    linear-gradient(color-mix(in srgb, var(--card-accent) 55%, transparent), color-mix(in srgb, var(--card-accent) 55%, transparent)),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--card-accent-dim), transparent 58%);
  background-repeat: no-repeat;
  background-size:
    14px 2px, 2px 14px,
    14px 2px, 2px 14px,
    100% 100%;
  background-position:
    16px 16px, 16px 16px,
    calc(100% - 30px) calc(100% - 16px), calc(100% - 16px) calc(100% - 30px),
    0 0;
}
.tech-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--card-accent), transparent 72%);
  opacity:.9;
}
.tech-card::after{
  content: attr(data-num);
  position:absolute;
  right: 18px; bottom: -14px;
  font-family:'Clash Display', sans-serif;
  font-size: clamp(5rem, 9vw, 6.5rem);
  font-weight:700;
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(237,235,245,.07);
  pointer-events:none;
}
.tech-card--vitrine{ --card-accent: var(--signal); --card-accent-dim: rgba(255,196,0,.12); }
.tech-card--metier{ --card-accent: var(--volt); --card-accent-dim: rgba(124,92,255,.14); }
.tech-card--auto{ --card-accent: var(--ember); --card-accent-dim: rgba(255,77,46,.12); }
.tech-card--saas{
  --card-accent: #FFB347;
  --card-accent-dim: rgba(255,179,71,.12);
}
.tech-card--metier .service-icon{ background: linear-gradient(135deg, var(--volt), #5B7CFF); }
.tech-card--auto .service-icon{ background: linear-gradient(135deg, var(--ember), #FF8A4C); }
.tech-card--saas .service-icon{ background: linear-gradient(135deg, #FFB347, var(--volt)); }
.tech-card--metier .tag{ background: rgba(124,92,255,.1); color: #B8A4FF; border-color: rgba(124,92,255,.22); }
.tech-card--auto .tag{ background: rgba(255,77,46,.1); color: #FFAB9A; border-color: rgba(255,77,46,.22); }
.tech-card--saas .tag{ background: rgba(255,179,71,.1); color: #FFD08A; border-color: rgba(255,179,71,.22); }
.service-icon{
  width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--signal), var(--ember));
  color:#0A0A0E; font-weight:700; margin-bottom:22px; font-family:'Clash Display',sans-serif;
  position:relative; z-index:1;
  box-shadow: 0 10px 24px -10px var(--card-accent-dim);
}
.tech-card h3, .tech-card p, .tech-card .tag-row{ position:relative; z-index:1; }
.tech-card h3{ font-size:1.26rem; margin-bottom:12px; }
.tech-card p{ color: var(--text-ink-dim); font-size:.98rem; flex:1; }
.tech-card .tag-row{ margin-top:auto; padding-top:20px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tag{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.03em;
  padding: 5px 10px; border-radius:6px;
  background: rgba(255,196,0,.1); color: var(--signal);
  border:1px solid rgba(255,196,0,.2);
}

/* ---------- Process timeline (animated draw-in line) ---------- */
.timeline{ position:relative; }
.timeline-track{ position:absolute; left:0; right:0; top:23px; height:2px; background: var(--line-strong); }
.timeline-track-fill{
  position:absolute; left:0; top:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--signal), var(--ember), var(--volt));
  transition: width 1.4s var(--ease);
}
.process-list{ position:relative; display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.process-item{ position:relative; padding-top:44px; }
.process-item .node{
  position:absolute; top:14px; left:0; width:18px; height:18px; border-radius:50%;
  background: var(--ink); border:2px solid var(--signal);
}
.process-item .num{ font-family:'JetBrains Mono', monospace; font-size:.78rem; color: var(--text-ink-dimmer); display:block; margin-bottom:8px; }
.process-item h3{ font-size:1.06rem; margin-bottom:10px; }
.process-item p{ color: var(--text-ink-dim); font-size:.93rem; }
@media (max-width: 900px){ .process-list{ grid-template-columns: 1fr 1fr; } .timeline-track{ display:none; } }
@media (max-width: 560px){ .process-list{ grid-template-columns: 1fr; } }

/* ---------- Stack layers (sous le capot) ---------- */
.stack-section{
  display:grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 80px);
  align-items:start;
}
.stack-copy h2{ font-size: clamp(2rem, 4vw, 2.85rem); margin-top:14px; }
.stack-copy p{ color: var(--text-ink-dim); margin-top:16px; font-size:1.05rem; max-width:42ch; }
.stack-board{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.stack-board::before{
  content:"";
  position:absolute;
  left:22px; top:28px; bottom:28px;
  width:2px;
  background: linear-gradient(to bottom, var(--signal), var(--ember) 45%, var(--volt));
  opacity:.35;
  border-radius:2px;
}
.stack-layer{
  --layer-accent: var(--signal);
  position:relative;
  display:grid;
  grid-template-columns: 46px 1fr;
  gap:18px;
  align-items:start;
  padding: 22px 22px 22px 18px;
  border:1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--layer-accent) 14%, transparent), transparent 38%),
    var(--ink-elevated);
}
.stack-layer-num{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--layer-accent) 35%, transparent);
  background: color-mix(in srgb, var(--layer-accent) 12%, transparent);
  color: var(--layer-accent);
  font-size:.78rem;
  position:relative; z-index:1;
}
.stack-layer-body h3{ font-size:1.08rem; margin-bottom:6px; }
.stack-layer-body p{ color: var(--text-ink-dim); font-size:.92rem; margin:0; }
.stack-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.stack-tags span{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  letter-spacing:.04em;
  padding: 5px 10px;
  border-radius:6px;
  border:1px solid color-mix(in srgb, var(--layer-accent) 28%, transparent);
  background: color-mix(in srgb, var(--layer-accent) 10%, transparent);
  color: color-mix(in srgb, var(--layer-accent) 80%, var(--text-ink));
}
.stack-layer--front{ --layer-accent: var(--signal); }
.stack-layer--api{ --layer-accent: var(--volt); }
.stack-layer--data{ --layer-accent: #5B9BD5; }
.stack-layer--services{ --layer-accent: var(--ember); }
@media (max-width: 860px){
  .stack-section{ grid-template-columns:1fr; }
}

/* ---------- Case study full (legacy) ---------- */
.case-full{ display:grid; grid-template-columns: .85fr 1.15fr; gap:56px; align-items:start; padding: 56px 0; }
.case-full + .case-full{ border-top: 1px solid var(--line); }
.case-visual{
  border-radius: var(--radius-l);
  min-height: 320px;
  display:flex; align-items:flex-end; padding:30px;
  color:#fff;
  border: 1px solid var(--line-strong);
}
.case-visual.wizarr{ background: linear-gradient(160deg, #1b1730, var(--volt) 150%); }
.case-visual.picomi{ background: linear-gradient(160deg, #301d0c, var(--ember) 150%); }
.case-visual span{ font-family:'Clash Display',sans-serif; font-size:2.3rem; opacity:.9; }
.case-body h3{ font-size:2rem; margin-bottom:6px; }
.case-body .case-tagline{ color: var(--signal); font-family:'JetBrains Mono',monospace; font-size:.85rem; margin-bottom:22px; display:block; }
.case-block{ margin-bottom:22px; }
.case-block h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-ink-dim); margin-bottom:8px; font-family:'JetBrains Mono',monospace; font-weight:500; }
.case-block p{ color: var(--text-ink); font-size:1.02rem; }
@media (max-width: 860px){ .case-full{ grid-template-columns:1fr; } }

/* ---------- Portfolio (realisations page) ---------- */
.portfolio-stats{ padding: clamp(28px, 5vw, 44px) 0; }
.portfolio-stats-row{
  list-style:none;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
  margin:0;
  padding:0;
}
.portfolio-stats-row li{
  padding: clamp(20px, 3vw, 28px);
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--ink-elevated);
}
.portfolio-stat-num{
  display:block;
  font-family:'Clash Display', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin-bottom:6px;
  color: var(--text-ink);
}
.portfolio-stat-label{
  font-size:.9rem;
  color: var(--text-ink-dim);
  line-height:1.45;
}
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 3vw, 24px);
}
.portfolio-tile{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-strong);
  border-radius: var(--radius-l);
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  background: var(--ink-elevated);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.portfolio-tile:hover{
  border-color: color-mix(in srgb, var(--tile-accent, var(--signal)) 45%, var(--line-strong));
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,.55);
}
.portfolio-tile--wizarr{ --tile-accent: var(--volt); }
.portfolio-tile--picomi{ --tile-accent: var(--ember); }
.portfolio-tile-thumb{
  position:relative;
  aspect-ratio: 16/9;
  padding: clamp(20px, 3vw, 28px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.portfolio-tile--wizarr .portfolio-tile-thumb{
  background: linear-gradient(155deg, #1c1830 0%, var(--volt) 145%);
}
.portfolio-tile--picomi .portfolio-tile-thumb{
  background: linear-gradient(155deg, #2e1c0c 0%, var(--ember) 145%);
}
.portfolio-tile-mark{
  font-family:'Clash Display', sans-serif;
  font-size: clamp(2rem, 5vw, 2.6rem);
  opacity:.92;
  color:#fff;
  position:relative;
  z-index:1;
}
.portfolio-tile-index{
  position:absolute;
  top:16px; right:18px;
  font-size:.72rem;
  letter-spacing:.08em;
  color: rgba(255,255,255,.55);
}
.portfolio-tile-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding: clamp(20px, 3vw, 26px);
}
.portfolio-tile-type{
  font-size:.72rem;
  letter-spacing:.08em;
  color: var(--tile-accent, var(--signal));
  margin-bottom:8px;
}
.portfolio-tile-body h3{
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  margin-bottom:10px;
}
.portfolio-tile-body p{
  color: var(--text-ink-dim);
  font-size:.95rem;
  flex:1;
  margin:0;
}
.portfolio-tile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:14px;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-ink-dimmer);
}
.portfolio-tile-meta span{
  padding: 4px 8px;
  border-radius:6px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.portfolio-tile-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.portfolio-tile-link{
  font-size:.72rem;
  letter-spacing:.06em;
  color: var(--text-ink-dim);
  transition: color .25s var(--ease);
}
.portfolio-tile:hover .portfolio-tile-link{ color: var(--tile-accent, var(--signal)); }
.portfolio-badge{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  letter-spacing:.06em;
  padding: 5px 10px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  white-space:nowrap;
}
.portfolio-badge--live{
  color: #8AE6A0;
  border-color: rgba(138,230,160,.35);
  background: rgba(138,230,160,.08);
}
.portfolio-badge--soon{
  color: var(--signal);
  border-color: rgba(255,196,0,.35);
  background: rgba(255,196,0,.08);
}
.dossier-head{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 28px);
  align-items:end;
  padding: clamp(24px, 4vw, 36px);
  margin-bottom: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-l);
  color:#fff;
}
.dossier-head--wizarr{
  background: linear-gradient(135deg, #1b1730 0%, color-mix(in srgb, var(--volt) 70%, #1b1730) 100%);
}
.dossier-head--picomi{
  background: linear-gradient(135deg, #301d0c 0%, color-mix(in srgb, var(--ember) 65%, #301d0c) 100%);
}
.dossier-index{
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height:1;
  opacity:.45;
  align-self:start;
}
.dossier-head-copy h2{
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  margin: 6px 0 10px;
}
.dossier-type{
  font-size:.72rem;
  letter-spacing:.08em;
  opacity:.75;
}
.dossier-head-copy p{
  margin:0;
  opacity:.88;
  font-size:1rem;
  max-width:52ch;
}
.dossier-head .portfolio-badge{ align-self:start; }
.dossier-panels{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 18px);
}
.dossier-panel{
  padding: clamp(20px, 3vw, 26px);
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--ink-elevated);
}
.dossier-panel h4{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--text-ink-dim);
  margin-bottom:10px;
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}
.dossier-panel p{
  color: var(--text-ink);
  font-size:.98rem;
  margin:0;
  line-height:1.6;
}
.dossier-panel--result{
  border-color: color-mix(in srgb, var(--signal) 25%, var(--line));
  background:
    linear-gradient(135deg, rgba(255,196,0,.06), transparent 55%),
    var(--ink-elevated);
}
.dossier-panel--stack .tag-row{ margin-top:4px; }

/* ---------- Portfolio drawer modal ---------- */
.portfolio-modal{
  --drawer-width: clamp(320px, 50vw, 680px);
  position:fixed;
  inset:0;
  z-index:200;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.portfolio-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.portfolio-modal-scrim{
  position:absolute;
  inset:0;
  background: rgba(10,10,14,.72);
  backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity .4s var(--ease);
}
.portfolio-modal.is-open .portfolio-modal-scrim{ opacity:1; }
.portfolio-modal-shell{
  position:absolute;
  top:0; right:0; bottom:0;
  z-index:1;
  width: var(--drawer-width);
  max-width:100%;
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line-strong);
  background: var(--ink-soft);
  box-shadow: -24px 0 80px -20px rgba(0,0,0,.65);
  transform: translateX(104%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.portfolio-modal.is-open .portfolio-modal-shell{ transform: translateX(0); }
.portfolio-modal-toolbar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px clamp(16px, 3vw, 22px);
  border-bottom:1px solid var(--line);
  background: rgba(10,10,14,.92);
  backdrop-filter: blur(10px);
}
.portfolio-modal-label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--text-ink-dim);
}
.portfolio-modal-close{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background: var(--ink-elevated);
  color: var(--text-ink);
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.portfolio-modal-close:hover{
  border-color: var(--signal);
  color: var(--signal);
  background: rgba(255,196,0,.08);
}
.portfolio-modal-body{
  flex:1;
  overflow-y:auto;
  overscroll-behavior: contain;
}
.portfolio-modal-dossier{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.portfolio-modal-dossier[hidden]{
  display:none !important;
}
.dossier-slider{
  position:relative;
  flex-shrink:0;
  min-height: clamp(180px, 32vh, 280px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.dossier-slider-track{
  display:flex;
  height:100%;
  min-height: inherit;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.dossier-slide{
  flex:0 0 100%;
  min-height: clamp(180px, 32vh, 280px);
  position:relative;
}
.dossier-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dossier-slide-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
}
.dossier-slide--wizarr-1{ background: linear-gradient(155deg, #1c1830 0%, var(--volt) 145%); }
.dossier-slide--wizarr-2{ background: linear-gradient(165deg, #221a38 0%, #5a3fd4 140%); }
.dossier-slide--wizarr-3{ background: linear-gradient(145deg, #181530 0%, var(--volt) 130%, #1c1830 160%); }
.dossier-slide--picomi-1{ background: linear-gradient(155deg, #2e1c0c 0%, var(--ember) 145%); }
.dossier-slide--picomi-2{ background: linear-gradient(165deg, #3a220f 0%, #c45a20 140%); }
.dossier-slide--picomi-3{ background: linear-gradient(145deg, #281808 0%, var(--ember) 130%, #2e1c0c 160%); }
.dossier-slide:has(img) .dossier-slide-inner{ display:none; }
.dossier-media-mark{
  font-family:'Clash Display', sans-serif;
  font-size: clamp(3rem, 10vw, 4.5rem);
  line-height:1;
  opacity:.35;
}
.dossier-media-caption{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.55;
}
.dossier-slider-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:2;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(10,10,14,.55);
  color:#fff;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(6px);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.dossier-slider-btn:hover{
  border-color: var(--signal);
  color: var(--signal);
  background: rgba(10,10,14,.75);
}
.dossier-slider-btn--prev{ left:12px; }
.dossier-slider-btn--next{ right:12px; }
.dossier-slider-dots{
  position:absolute;
  left:50%; bottom:12px;
  transform: translateX(-50%);
  z-index:2;
  display:flex;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(10,10,14,.45);
  backdrop-filter: blur(6px);
}
.dossier-slider-dot{
  width:8px; height:8px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background: transparent;
  cursor:pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.dossier-slider-dot.is-active{
  background: var(--signal);
  border-color: var(--signal);
  transform: scale(1.15);
}
.dossier-slider-dot:only-child,
.dossier-slider:has(.dossier-slide:only-child) .dossier-slider-btn,
.dossier-slider:has(.dossier-slide:only-child) .dossier-slider-dots{
  display:none;
}
.dossier-content{
  padding: clamp(20px, 3.5vw, 28px);
  display:flex;
  flex-direction:column;
  gap: clamp(18px, 3vw, 24px);
}
.dossier-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.dossier-top-main{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.dossier-top .dossier-index{
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height:1;
  color: var(--text-ink-dimmer);
  flex-shrink:0;
  margin-top:4px;
}
.dossier-top h2{
  font-size: clamp(1.55rem, 3vw, 2rem);
  margin:4px 0 0;
  line-height:1.1;
}
.dossier-top .dossier-type{
  display:block;
  font-size:.7rem;
  letter-spacing:.08em;
  color: var(--signal);
  opacity:1;
}
.dossier-lede{
  margin:0;
  color: var(--text-ink-dim);
  font-size:1rem;
  line-height:1.55;
}
.dossier-facts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.dossier-facts li{
  padding: 12px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--ink-elevated);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dossier-facts li span{
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--text-ink-dimmer);
}
.dossier-facts li strong{
  font-family:'Clash Display', sans-serif;
  font-size:1rem;
  font-weight:600;
  color: var(--text-ink);
}
.dossier-facts-note{
  margin:0;
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-ink-dimmer);
}
.dossier-sections{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dossier-section{
  padding: clamp(16px, 2.5vw, 20px);
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--ink-elevated);
}
.dossier-section h4,
.dossier-stack h4{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--text-ink-dim);
  margin-bottom:8px;
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}
.dossier-section p{
  margin:0;
  color: var(--text-ink);
  font-size:.96rem;
  line-height:1.6;
}
.dossier-section--result{
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  background:
    linear-gradient(135deg, rgba(255,196,0,.07), transparent 58%),
    var(--ink-elevated);
}
.dossier-stack{
  padding-top:4px;
  border-top:1px solid var(--line);
}
.dossier-stack .tag-row{ margin-top:0; }
body.modal-open{ overflow:hidden; }
@media (max-width: 640px){
  .portfolio-modal{ --drawer-width: 100%; }
  .dossier-top{ flex-direction:column; }
}
@media (min-width: 641px) and (max-width: 1024px){
  .portfolio-modal{ --drawer-width: min(560px, 62vw); }
}
@media (max-width: 760px){
  .portfolio-stats-row{ grid-template-columns:1fr; }
  .dossier-head{
    grid-template-columns:1fr;
    align-items:start;
  }
  .dossier-head .portfolio-badge{ justify-self:start; }
  .dossier-panels{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .portfolio-tile-foot{ flex-direction:column; align-items:flex-start; }
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  border-radius: var(--radius-l);
  background: linear-gradient(120deg, var(--signal), var(--ember) 60%, var(--volt));
  padding: clamp(40px, 6vw, 76px);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  color: #0A0A0E;
  overflow:hidden;
}
.cta-band h2{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); max-width:16ch; position:relative; z-index:1; }
.cta-band .btn-primary{ background:#0A0A0E; color:#fff; box-shadow:none; position:relative; z-index:1; }
.cta-band .btn-primary:hover{ background:#000; }

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  z-index:2;
  margin-top: auto;
  border-top:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255,196,0,.04), transparent 120px),
    var(--ink-soft);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--signal), var(--volt), transparent);
  opacity:.45;
}
.footer-shell{
  padding-top: clamp(40px, 6vw, 56px);
  padding-bottom: clamp(18px, 3vw, 24px);
}
.footer-main{
  display:grid;
  grid-template-columns: minmax(260px, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(28px, 4vw, 36px);
  border-bottom:1px solid var(--line);
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.footer-logo{
  display:inline-flex;
  color: var(--text-ink);
  text-decoration:none;
}
.footer-logo-mark{
  display:flex;
  align-items:center;
  min-height: 44px;
  min-width: clamp(140px, 18vw, 200px);
}
.footer-logo-mark img{
  display:block;
  height: clamp(34px, 4vw, 42px);
  width:auto;
  max-width: min(220px, 100%);
}
.footer-tagline{
  margin:0;
  max-width:34ch;
  color: var(--text-ink-dim);
  font-size:.94rem;
  line-height:1.55;
}
.footer-cta{
  margin-top:4px;
  font-size:.88rem;
  padding: .75em 1.25em;
}
.footer-columns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.footer-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.footer-col-title{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--text-ink-dimmer);
  margin-bottom:4px;
}
.footer-col a{
  color: var(--text-ink);
  font-size:.92rem;
  transition: color .25s var(--ease);
}
.footer-col a:hover{ color: var(--signal); }
.footer-col-text{
  color: var(--text-ink-dim);
  font-size:.88rem;
  line-height:1.45;
}
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top: clamp(16px, 2.5vw, 20px);
}
.footer-copy{
  font-size:.78rem;
  color: var(--text-ink-dimmer);
}
.footer-domain{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-ink-dim);
  text-decoration:none;
  transition: color .25s var(--ease);
}
.footer-domain:hover{ color: var(--signal); }
@media (max-width: 900px){
  .footer-main{ grid-template-columns:1fr; }
  .footer-columns{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .footer-columns{ grid-template-columns:1fr; }
  .footer-bar{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Contact page ---------- */
.page-hero:has(+ .contact-section){
  padding-bottom: clamp(12px, 2vw, 24px);
}
section.contact-section{
  padding: clamp(20px, 3vw, 36px) 0 clamp(52px, 7vw, 80px);
}
.contact-panel{
  display:grid;
  grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr);
  gap:0;
  border-radius: var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line-strong);
  background: var(--ink-elevated);
}
.contact-panel-intro{
  padding: clamp(28px, 4vw, 40px);
  border-right:1px solid var(--line);
  background:
    linear-gradient(165deg, rgba(255,196,0,.07), transparent 45%),
    var(--ink-soft);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-panel-intro h2{
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
  line-height:1.15;
  max-width:22ch;
}
.contact-panel-intro p{
  color: var(--text-ink-dim);
  font-size:.96rem;
  line-height:1.55;
  margin:0;
}
.contact-quick{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-quick li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.92rem;
  color: var(--text-ink-dim);
}
.contact-quick .mono{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid var(--line-strong);
  background: rgba(255,196,0,.08);
  color: var(--signal);
  font-size:.68rem;
  flex-shrink:0;
}
.contact-direct{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.contact-direct-label{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--text-ink-dimmer);
}
.contact-direct a{
  font-family:'Clash Display', sans-serif;
  font-size:1.05rem;
  color: var(--text-ink);
}
.contact-direct a:hover{ color: var(--signal); }
.contact-direct span:last-child{
  font-size:.88rem;
  color: var(--text-ink-dim);
}
.contact-form{
  padding: clamp(28px, 4vw, 40px);
  margin:0;
}
.contact-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.field--full{ grid-column:1 / -1; }
.field--half{ min-width:0; }
.field label{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--text-ink-dim);
  margin-bottom:7px;
}
.field-req{ color: var(--signal); }
.field input,
.field textarea,
.field select{
  width:100%;
  background: var(--ink-soft);
  border:1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 13px 14px;
  color: var(--text-ink);
  font-family:'Inter', sans-serif;
  font-size:.96rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field select{
  appearance:none;
  cursor:pointer;
  padding-right:38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-ink-dim) 50%),
    linear-gradient(135deg, var(--text-ink-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% + 2px),
    calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--text-ink-dimmer); opacity:.85; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(255,196,0,.12);
}
.field textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.55;
}
.field--check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top: clamp(16px, 2.5vw, 20px);
}
.field--check input{
  width:auto;
  margin-top:3px;
  accent-color: var(--signal);
  flex-shrink:0;
}
.field--check label{
  margin:0;
  text-transform:none;
  letter-spacing:0;
  font-family:'Inter', sans-serif;
  font-size:.88rem;
  line-height:1.45;
  color: var(--text-ink-dim);
}
.field--hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.contact-form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top: clamp(20px, 3vw, 24px);
  padding-top: clamp(18px, 2.5vw, 22px);
  border-top:1px solid var(--line);
}
.contact-form-note{
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-ink-dimmer);
  margin:0;
}
.contact-form-alert{
  margin-top:16px;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  font-size:.92rem;
  line-height:1.45;
  border:1px solid var(--line-strong);
}
.contact-form-alert--success{
  color:#8AE6A0;
  border-color: rgba(138,230,160,.35);
  background: rgba(138,230,160,.08);
}
.contact-form-alert--error{
  color:#FFAB9A;
  border-color: rgba(255,77,46,.35);
  background: rgba(255,77,46,.08);
}
.contact-form.is-loading .contact-submit-label::after{
  content:'…';
  animation: contactDots 1s steps(3, end) infinite;
}
.contact-form.is-loading #contactSubmit{
  opacity:.75;
  pointer-events:none;
}
@keyframes contactDots{
  0%{ content:'…'; }
  33%{ content:''; }
  66%{ content:'.'; }
}
@media (max-width: 900px){
  .contact-panel{
    grid-template-columns:1fr;
  }
  .contact-panel-intro{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .contact-direct{ margin-top:12px; }
}
@media (max-width: 640px){
  .contact-form-grid{ grid-template-columns:1fr; }
  .contact-form-foot{
    flex-direction:column;
    align-items:flex-start;
  }
  .dossier-facts{ grid-template-columns:1fr; }
}

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

@media (max-width: 860px){
  .stack-section{ grid-template-columns:1fr; }
}

/* ---------- Page hero (pages intérieures) ---------- */
.page-hero{
  position:relative;
  padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 44px);
  text-align:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,196,0,.07), transparent 68%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(124,92,255,.04), transparent 62%);
  pointer-events:none;
}
.page-hero-inner{
  position:relative;
  max-width: 720px;
  margin:0 auto;
}
.page-hero .eyebrow{
  justify-content:center;
}
.page-hero .eyebrow::after{
  content:"";
  width:18px; height:2px;
  background: var(--signal);
  display:inline-block;
}
.page-hero h1{
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin-top:14px;
  line-height:1.06;
}
.page-hero-lede{
  color: var(--text-ink-dim);
  font-size:1.05rem;
  margin: 16px auto 0;
  max-width: 50ch;
  line-height:1.6;
}
.page-hero-rule{
  width: 48px; height:2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
}

/* ---------- Scroll showcase (services) ---------- */
.scroll-showcase{
  --showcase-offset: clamp(64px, 9vh, 80px);
  padding-top: clamp(16px, 3vw, 32px);
  padding-bottom: clamp(48px, 8vw, 80px);
}
.scroll-showcase-layout{
  display:grid;
  grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items:start;
}
.scroll-showcase-aside{
  position:sticky;
  top: var(--showcase-offset);
  height: calc(100vh - var(--showcase-offset));
  display:flex;
  align-items:center;
  align-self:start;
  gap: clamp(16px, 2.5vw, 24px);
}
.scroll-showcase-aside .scroll-rail--side,
.scroll-showcase-aside .scroll-stage{
  position:relative;
  top:auto;
}
.scroll-rail--side{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(22px, 4vh, 32px);
  padding: 6px 0;
  align-self:center;
}
.scroll-rail--side .scroll-rail-track{
  position:absolute;
  top: 10px; bottom: 10px; left:50%;
  width:2px; height:auto;
  transform: translateX(-50%);
  background: var(--line-strong);
  border-radius:2px;
  pointer-events:none;
}
.scroll-rail--side .scroll-rail-fill{
  position:absolute; top:0; left:0;
  width:100%; height:0%;
  background: linear-gradient(to bottom, var(--signal), var(--volt));
  border-radius:2px;
  transition: height .55s var(--ease);
}
.scroll-stage{
  flex:1;
  min-width:0;
  align-self:center;
}
.scroll-visual-stack{
  position:relative;
  min-height: clamp(300px, 44vh, 400px);
}
.scroll-visual{
  position:absolute; inset:0;
  border-radius: var(--radius-l);
  display:flex;
  flex-direction:column;
  justify-content:stretch;
  padding:0;
  color:#fff;
  overflow:hidden;
  opacity:0;
  transform: scale(.94) translateY(14px);
  filter: blur(5px);
  transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease);
  pointer-events:none;
  box-shadow: 0 32px 70px -28px rgba(0,0,0,.6);
}
.scroll-visual::before,
.scroll-step-visual::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  z-index:0;
}
.scroll-visual > *,
.scroll-step-visual > *{
  position:relative;
  z-index:1;
}
.scroll-visual.hud-frame,
.scroll-step-visual.hud-frame{
  background-image:none;
}
.scroll-visual.hud-frame::after,
.scroll-step-visual.hud-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background-image:
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal));
  background-repeat:no-repeat;
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position:
    12px 12px, 12px 12px,
    calc(100% - 12px) 12px, calc(100% - 12px) 12px,
    12px calc(100% - 12px), 12px calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px);
}
.scroll-visual.is-visible{
  opacity:1;
  transform: scale(1) translateY(0);
  filter: blur(0);
  pointer-events:auto;
  z-index:2;
}
.scroll-rail-dot{
  position:relative; z-index:1;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background: var(--ink-soft);
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem;
  color: var(--text-ink-dim);
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.scroll-rail-dot span{ pointer-events:none; }
.scroll-rail-dot.is-active,
.scroll-rail-dot:hover{
  border-color: var(--signal);
  color: var(--text-ink);
  background: rgba(255,196,0,.1);
  transform: scale(1.06);
}
.scroll-steps{ min-width:0; }
.scroll-step{
  min-height: calc(100vh - var(--showcase-offset));
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(32px, 6vh, 64px) 0;
  border-bottom: 1px solid var(--line);
}
.scroll-step:last-child{
  border-bottom:none;
  padding-bottom: clamp(32px, 6vh, 64px);
}
.scroll-step h2{
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  margin-bottom:8px;
}
.scroll-step .case-tagline{ display:block; margin-bottom:24px; }
.scroll-step .case-block + .case-block{ margin-top:4px; }
.scroll-step-visual{ display:none; }

.sv-vitrine::before{ background: linear-gradient(160deg, #241f3d, var(--signal) 155%); }
.sv-metier::before{ background: linear-gradient(160deg, #1c1830, var(--volt) 150%); }
.sv-auto::before{ background: linear-gradient(160deg, #35210e, var(--ember) 150%); }
.sv-saas::before{ background: linear-gradient(160deg, #3d2a05, var(--signal) 145%); }
.sv-vitrine,
.sv-saas{ color:#0A0A0E; }

.scroll-panel-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  padding: clamp(16px, 2.5vw, 22px);
  min-height:0;
}
.scroll-panel-footer{
  padding: clamp(16px, 2.5vw, 22px) clamp(20px, 3vw, 28px);
  background: linear-gradient(to top, rgba(0,0,0,.42), transparent);
}
.sv-vitrine .scroll-panel-footer,
.sv-saas .scroll-panel-footer{
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent);
}
.scroll-panel-num{
  font-family:'Clash Display', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height:1;
  opacity:.9;
  display:block;
}
.scroll-panel-visual-tag{
  display:block;
  margin-top:8px;
  font-size:.72rem;
  letter-spacing:.08em;
  opacity:.85;
}
.scroll-mock-chrome{
  display:flex;
  gap:6px;
  margin-bottom:14px;
  flex-shrink:0;
}
.scroll-mock-chrome span{
  width:9px;
  height:9px;
  border-radius:50%;
  background: rgba(255,255,255,.22);
}
.sv-vitrine .scroll-mock-chrome span,
.sv-saas .scroll-mock-chrome span{
  background: rgba(0,0,0,.18);
}
.scroll-mock-chrome span:nth-child(1){ background:#FF5F57; opacity:1; }
.scroll-mock-chrome span:nth-child(2){ background:#FEBC2E; opacity:1; }
.scroll-mock-chrome span:nth-child(3){ background:#28C840; opacity:1; }
.scroll-mock-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  padding: 8px 4px;
}
.scroll-mock-line{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
}
.sv-vitrine .scroll-mock-line,
.sv-saas .scroll-mock-line{
  background: rgba(0,0,0,.12);
}
.scroll-mock-line--lg{ width:72%; height:14px; }
.scroll-mock-line--sm{ width:42%; }
.scroll-mock-content--grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-content:center;
}
.scroll-mock-block{
  height:48px;
  border-radius:10px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.08);
}
.scroll-mock-block--wide{ grid-column:1 / -1; height:36px; }
.scroll-mock-content--flow{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:12px 0;
}
.scroll-mock-node{
  width:36px;
  height:36px;
  border-radius:10px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.scroll-mock-connector{
  width:28px;
  height:2px;
  background: rgba(255,255,255,.22);
  flex-shrink:0;
}
.scroll-mock-content--dash{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  align-content:center;
}
.scroll-mock-stat{
  height:52px;
  border-radius:10px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.1);
}

@media (max-width: 960px){
  .scroll-showcase{
    padding-top:0;
  }
  .scroll-showcase-layout{
    display:block;
  }
  .scroll-showcase-aside{
    position:sticky;
    top: calc(var(--showcase-offset) - 1px);
    z-index:25;
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-inline: calc(-1 * var(--pad));
    padding: 12px var(--pad) 14px;
    background: rgba(18,17,24,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:1px solid var(--line-strong);
  }
  .scroll-showcase-aside .scroll-stage{
    display:none;
  }
  .scroll-rail--side{
    flex-direction:row;
    justify-content:center;
    flex-wrap:nowrap;
    gap:10px;
    order:0;
    padding:0;
    align-self:center;
  }
  .scroll-rail--side .scroll-rail-track{ display:none; }
  .scroll-rail-dot{
    width:38px;
    height:38px;
    flex-shrink:0;
  }
  .scroll-steps{ margin-top:8px; }
  .scroll-step-visual{
    display:flex;
    flex-direction:column;
    justify-content:stretch;
    min-height: clamp(180px, 42vw, 240px);
    border-radius: var(--radius-l);
    margin-bottom:22px;
    overflow:hidden;
    color:#fff;
    box-shadow: 0 24px 50px -24px rgba(0,0,0,.55);
  }
  .scroll-step{
    min-height:0;
    padding: 32px 0 40px;
    scroll-margin-top: calc(var(--showcase-offset) + 72px);
  }
  .scroll-step:first-child{
    padding-top:24px;
  }
  .scroll-step h2{
    font-size: clamp(1.65rem, 6vw, 2.2rem);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .fx-glow, .fx-grid{ display:none; }
  .hero-orb{ animation:none !important; }
  .scroll-visual{ transition:none !important; filter:none !important; transform:none !important; opacity:1 !important; }
}

@media (max-width: 900px){
  .hero{
    padding-top: clamp(40px, 7vw, 64px);
    padding-bottom: clamp(48px, 8vw, 72px);
    overflow-x: clip;
  }
  .hero .wrap{
    max-width:100%;
    overflow-x: clip;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap: clamp(28px, 6vw, 40px);
    min-height:0;
    min-width:0;
  }
  .hero-copy{
    max-width:none;
    min-width:0;
  }
  .hero-title-accent{ white-space:normal; flex-wrap:wrap; }
  .word-rotate{ min-width:0; max-width:100%; }
  .hero .eyebrow{
    max-width:100%;
    flex-wrap:wrap;
    row-gap:.35em;
    font-size:.72rem;
    letter-spacing:.08em;
    line-height:1.45;
  }
  .hero h1{ font-size: clamp(2rem, 8vw, 3.2rem); }
  .hero-lede{ font-size:1.02rem; max-width:none; }
  .hero-actions .btn-primary{ color:#0A0A0E; }
  .signature{
    min-height:auto;
    margin:0;
    width:100%;
    max-width:100%;
    justify-content:center;
    overflow:hidden;
  }
  .hero-orb{
    width:min(280px, 78%);
    height:min(280px, 78%);
    right:-6%;
    top:6%;
    left:auto;
    animation:none;
  }
  .hero-stage:hover .hero-screen--app,
  .hero-stage:hover .hero-screen--term{
    transform:none;
  }
  .hero-stage{
    width:100%;
    max-width:100%;
    margin:0 auto;
    gap:14px;
    min-width:0;
  }
  .hero-screen--app,
  .hero-screen--term,
  .app-preview,
  .app-frame,
  .terminal{
    max-width:100%;
    min-width:0;
  }
  .hero-screen--app,
  .hero-screen--term{
    transform:none;
  }
  .hero-screen--term{
    width:100%;
    align-self:stretch;
  }
  .hero-meta{
    margin-top:28px;
    padding-top:24px;
    gap:12px;
  }
  .card-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  .hero-meta{ flex-direction:column; align-items:stretch; }
  .hero-meta .status-widget{ width:100%; }
  .hero-stack-label{ font-size:.66rem; padding:7px 12px; }
  .app-body{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .app-sidebar{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
    padding:10px 12px;
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .app-nav-item{
    padding:6px 8px;
    font-size:.62rem;
    flex:1 1 calc(50% - 6px);
    justify-content:center;
  }
  .app-main{ padding:12px; gap:10px; }
  .app-kpis{ gap:6px; }
  .app-kpi{ padding:8px; }
  .app-kpi-value{ font-size:.95rem; }
  .app-table{ font-size:.64rem; }
  .app-row{ padding:7px 8px; }
  .terminal{ padding:16px 18px 18px; }
  .terminal-lines{ font-size:.8rem; line-height:1.7; }
}

@media (max-width: 480px){
  .hero .eyebrow{
    font-size:.68rem;
    letter-spacing:.08em;
    align-items:flex-start;
  }
  .hero .eyebrow::before{ margin-top:.45em; flex-shrink:0; }
  .app-sidebar{ display:none; }
  .app-kpis{ grid-template-columns:1fr 1fr; }
  .app-kpi:last-child{ grid-column:1 / -1; }
  .hero-orb{ display:none; }
}