:root{
  --ink:#0a0a0d;
  --ink-2:#111116;
  --ink-3:#16161c;
  --bone:#f3ede1;
  --bone-dim:#c9c2b5;
  --halo-a:#38bdf8;
  --halo-b:#a855f7;
  --halo-c:#c026d3;
  --line:rgba(243,237,225,.12);
  --line-strong:rgba(243,237,225,.28);
  --grid:rgba(243,237,225,.045);
  --max: 1440px;
  --pad: clamp(20px, 3vw, 56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--bone);font-family:"Fraunces",serif;font-optical-sizing:auto;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--halo-b);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.55;
  will-change: auto;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* Big sections : let the browser skip rendering what's offscreen. Massive
   scroll perf win on mobile, no visual impact. */
section.products, section.manifesto, section.contact, footer, .legal-line{
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.card{
  contain: layout paint style;
}

/* ===== NAV ===== */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding: 22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  mix-blend-mode:difference;color:#fff;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
nav.top .brand{display:flex;align-items:center;gap:12px;font-family:"Bricolage Grotesque",sans-serif;font-weight:500;letter-spacing:-.012em;font-size:19px;text-transform:none;font-variation-settings:"opsz" 24}
nav.top .brand img{width:32px;height:auto;display:block;filter: drop-shadow(0 0 12px rgba(168,85,247,.5))}
nav.top ul{display:flex;gap:28px;list-style:none;align-items:center}
nav.top ul a{opacity:.85;transition:opacity .2s}
nav.top ul a:hover{opacity:1}
nav.top .nav-right{display:flex;align-items:center;gap:18px}
nav.top .lang{display:flex;gap:0;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px;font-size:11px}
nav.top .lang button{padding:4px 9px;border-radius:999px;transition: background .25s, color .25s;color:rgba(255,255,255,.7)}
nav.top .lang button.active{background:rgba(255,255,255,.95);color:#000}
nav.top .cta{padding:9px 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:100vh;padding: 140px var(--pad) 80px;
  display:grid;grid-template-columns: 1.15fr 1fr;gap: clamp(24px,4vw,80px);
  max-width:var(--max);margin:0 auto;
  background:
    radial-gradient(800px 600px at 85% 35%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(600px 500px at 20% 85%, rgba(56,189,248,.15), transparent 60%),
    linear-gradient(180deg,#0a0a0d 0%,#0b0b10 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
}
.hero .left{position:relative;z-index:2;align-self:center;padding-top:20px}
.hero .right{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:20px 0}

.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-dim);display:flex;gap:14px;align-items:center;margin-bottom:28px;
}
.eyebrow .bar{width:28px;height:1px;background:var(--bone-dim);opacity:.6}
.eyebrow em{font-style:normal;color:var(--halo-a)}

h1.title{
  font-family:"Fraunces",serif;font-weight:300;
  font-size: clamp(52px, 7.5vw, 124px);
  line-height:.92;letter-spacing:-.035em;
  font-variation-settings:"opsz" 144;
  margin-bottom: 24px;
}
h1.title .row{display:block;overflow:hidden}
h1.title .row > span{display:inline-block;opacity:0;transform:translateY(40%);animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards}
h1.title .row:nth-child(1) > span{animation-delay:.15s}
h1.title .row:nth-child(2) > span{animation-delay:.32s}
h1.title .accent{
  font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;
  background:linear-gradient(100deg,var(--halo-a) 0%,var(--halo-b) 50%,var(--halo-c) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
@keyframes rise{to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion: reduce){h1.title .row > span{opacity:1;transform:none;animation:none}}

.lede{
  max-width:520px;font-size:19px;line-height:1.55;color:var(--bone);opacity:.78;
  font-weight:400;font-variation-settings:"opsz" 14;margin-bottom:40px;
}
.lede em{font-family:"Instrument Serif",serif;font-style:italic;color:var(--bone);opacity:1}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;font-size:14px;letter-spacing:.02em;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
  cursor:pointer;
}
.btn.primary{
  color:#0a0a0d;
  background:linear-gradient(100deg,var(--halo-a),var(--halo-b) 60%,var(--halo-c));
  box-shadow:0 10px 40px -10px rgba(168,85,247,.7), inset 0 0 0 1px rgba(255,255,255,.3);
}
.btn.primary:hover{transform:translateY(-2px) scale(1.01)}
.btn.ghost{border:1px solid var(--line-strong);color:var(--bone)}
.btn.ghost:hover{background:rgba(243,237,225,.06);border-color:var(--bone)}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

/* ===== Mia app-style screen (shared by hero + device mockup) ===== */
.stage{
  position:relative;inset:auto;
  width:min(100%, 460px);aspect-ratio: 9/16;
  max-height: calc(100vh - 170px);
  border-radius: 28px;overflow:hidden;
  background:#05050a;
  box-shadow: 0 60px 120px -30px rgba(168,85,247,.55), 0 0 0 1px rgba(243,237,225,.08);
}
.stage .heroVideo,.miaScreen .heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#05050a}
/* Soft top + bottom gradients so overlays stay readable over any video frame */
.stage::before,.miaScreen::before{content:"";position:absolute;left:0;right:0;top:0;height:35%;background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);z-index:2;pointer-events:none}
.stage::after,.miaScreen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);z-index:2;pointer-events:none}
@keyframes ripple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes blink{0%,60%,100%{opacity:1}70%,85%{opacity:.25}}

/* ===== App-style Mia overlay (reusable in hero + device mockup) ===== */
.miaOverlay{position:absolute;inset:0;z-index:3}
.miaOverlay > *{pointer-events:auto}

/* Glass icon button — matches Flutter app (_GlassButtonWithHover) */
.miaOverlay .iconBtn{
  position:absolute;
  width: var(--ic-s, 44px);height: var(--ic-s, 44px);
  border-radius:50%;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;cursor:pointer;padding:0;
  transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.miaOverlay .iconBtn:hover{
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.miaOverlay .iconBtn.topLeft{top:24px;left:24px}
.miaOverlay .iconBtn.topRight{top:24px;right:24px}
.miaOverlay .iconBtn.bottomLeft{bottom:24px;left:24px}
.miaOverlay .iconBtn.bottomRight{bottom:24px;right:24px}
.miaOverlay .iconBtn .material-symbols-rounded{
  font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  font-size: var(--ic-font, 24px);line-height:1;
  letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  color:#fff;
  font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Logo button uses the monochrome SVG, tinted white like the Flutter app
   (ColorFilter.mode(Colors.white.withValues(alpha: 0.95), BlendMode.srcIn)) */
.miaOverlay .iconBtn.logo img{
  width:18px;height:18px;display:block;
  filter: brightness(0) invert(1);
  opacity:.95;
}

.miaOverlay .name{
  position:absolute;left:0;right:0;bottom:40%;
  text-align:center;color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size: var(--name-s, clamp(36px, 4.5vw, 56px));
  letter-spacing:-.015em;line-height:1;
  text-shadow:0 4px 24px rgba(0,0,0,.55);
  font-variation-settings:"opsz" 72;
}
.miaOverlay .role{
  position:absolute;left:0;right:0;bottom:calc(40% - 30px);
  text-align:center;color:rgba(255,255,255,.9);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-size: var(--role-s, clamp(13px, 1.2vw, 16px));
  letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
/* Main "Discuter" pill — matches Flutter app (_MainButtonWithHover) */
.miaOverlay .discuter{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);
  width: var(--btn-w, 72%);max-width:400px;min-width:200px;
  padding: var(--btn-py, 18px) 24px;
  border-radius:50px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.125);
  backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  color:#fff;text-align:center;
  font-family: var(--btn-ff, "Roboto","Helvetica Neue",-apple-system,sans-serif);
  font-weight:500;font-size: var(--btn-s, 24px);letter-spacing:.01em;
  text-decoration:none;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.miaOverlay .discuter:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  transform: translateX(-50%) translateY(-2px);
}

/* ===== WHISPER ===== */
.whisper{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;
  font-family:"Instrument Serif",serif;font-style:italic;
  font-size: clamp(28px, 4.5vw, 64px);
  padding:22px 0;color:var(--bone);background:var(--ink-2);
}
.whisper .track{display:inline-block;padding-left:100%;animation: slide 38s linear infinite}
.whisper span{opacity:.7}
.whisper .glow{
  background:linear-gradient(100deg,var(--halo-a),var(--halo-b) 50%,var(--halo-c));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:1;
}
.whisper .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bone-dim);margin:0 22px;vertical-align:middle}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ===== PRODUCTS ===== */
.products{
  max-width:var(--max);margin:0 auto;padding: 140px var(--pad) 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.section-label{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;
  margin-bottom:40px;gap:40px;flex-wrap:wrap;
}
.section-label .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.section-label h2{
  font-family:"Fraunces",serif;font-weight:300;font-size:clamp(40px,5vw,72px);line-height:.95;
  letter-spacing:-.03em;max-width:760px;font-variation-settings:"opsz" 144;
}
.section-label h2 em{font-family:"Instrument Serif",serif;font-style:italic;color:var(--bone-dim);font-weight:400}

.card{
  position:relative;border:1px solid var(--line);border-radius:6px;
  padding:0;min-height:640px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg, rgba(243,237,225,.02), transparent 60%);
  overflow:hidden;transition: border-color .4s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(600px 400px at var(--mx,50%) var(--my,30%), rgba(168,85,247,.18), transparent 55%);
}
.card:hover::after{opacity:1}
.card .inner{padding:36px 36px 32px;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.card .num{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;color:var(--bone-dim);text-transform:uppercase}
.card h3{font-family:"Fraunces",serif;font-weight:400;font-size:44px;line-height:1.02;letter-spacing:-.025em;margin-top:14px;font-variation-settings:"opsz" 144}
.card h3 em{font-family:"Instrument Serif",serif;font-style:italic;color:var(--bone-dim);display:block;font-size:28px;margin-top:6px}
.card .tagline{margin-top:20px;font-size:18px;line-height:1.55;max-width:440px;opacity:.82}
.card .bullets{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:10px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--bone-dim)}
.card .bullets li{display:flex;gap:12px;align-items:center}
.card .bullets li::before{content:"";width:14px;height:1px;background:var(--bone-dim);flex-shrink:0}
.card .foot{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.card .link{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding-bottom:4px;border-bottom:1px solid var(--line-strong)}
.card .link:hover{border-color:var(--bone)}
.card .host{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--bone-dim);letter-spacing:.1em}

.card .media{position:relative;height:300px;margin:0;overflow:hidden;border-bottom:1px solid var(--line);background:#07070b}
.card .media .ph-tag{position:absolute;left:14px;top:14px;z-index:6;padding:4px 9px;border-radius:2px}
.card .media .ph-caption{position:absolute;left:14px;bottom:10px;right:14px;z-index:6}
.card .media .ph-badge{position:absolute;right:14px;top:14px;z-index:6;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.15em;color:var(--halo-a);text-transform:uppercase;border:1px solid rgba(56,189,248,.45);padding:4px 9px;border-radius:2px;background:rgba(56,189,248,.08)}
/* Card 1 : two badges stacked (speed first, then UE5) */
.card .media .ph-badge.speed{
  top:14px;
  background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(192,38,211,.18));
  border-color: rgba(168,85,247,.55);
  color:#fff;
  font-weight:500;
  letter-spacing:.1em;
}
.card .media .ph-badge.ue5{top:46px}

.media.characters{background:#000;cursor:pointer}
.media.characters .thumb{position:absolute;inset:0;background:url("https://img.youtube.com/vi/Hy-OFJzJxKE/maxresdefault.jpg") center/cover no-repeat, #0a0a0d;transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s;filter: saturate(1.05) contrast(1.02)}
.media.characters:hover .thumb{transform:scale(1.04);filter:saturate(1.15) contrast(1.05)}
.media.characters .grade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.75) 100%),radial-gradient(closest-side at 30% 50%, transparent 55%, rgba(0,0,0,.45) 100%)}
.media.characters .scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(56,189,248,.10) 50%,transparent);height:80px;animation: scanY 5s ease-in-out infinite}
@keyframes scanY{0%{transform:translateY(-80px)}100%{transform:translateY(300px)}}
.media.characters .playC{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:76px;height:76px;border-radius:50%;background:rgba(10,10,13,.55);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border:1px solid rgba(243,237,225,.4);display:flex;align-items:center;justify-content:center;transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s}
.media.characters .playC::after{content:"";width:0;height:0;border-left:15px solid var(--bone);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.media.characters .playC::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(243,237,225,.2);animation: ripple 2.6s ease-out infinite}
.media.characters:hover .playC{transform:translate(-50%,-50%) scale(1.1);background:rgba(168,85,247,.3);border-color:rgba(243,237,225,.6)}
.media.characters .dur{position:absolute;right:14px;bottom:14px;z-index:6;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--bone);background:rgba(0,0,0,.6);padding:3px 7px;border-radius:2px}

.media.people{background:radial-gradient(600px 300px at 70% 30%, rgba(168,85,247,.2), transparent 60%),linear-gradient(135deg,#08080c,#0c0c12);display:flex;align-items:center;justify-content:center}
.device{position:relative;width:190px;height:340px;margin-top:20px;border-radius:32px;background:linear-gradient(160deg,#1a1a22,#0c0c12);box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(243,237,225,.08);transform: rotate(-8deg);overflow:hidden}
.device::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:60px;height:16px;background:#000;border-radius:10px;z-index:3}
.device .screen{position:absolute;inset:6px;border-radius:26px;background:#0a0a10;overflow:hidden}
.device .screen::before,.device .screen::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.device .screen::before{top:0;height:30%;background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%)}
.device .screen::after{bottom:0;height:55%;background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%)}
.device .miaVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.device .miaOverlay{--ic-s:28px;--ic-font:15px;--name-s:22px;--role-s:9px;--btn-s:11px;--btn-py:8px;--btn-w:74%}
.device .miaOverlay .iconBtn.topLeft,.device .miaOverlay .iconBtn.topRight{top:12px}
.device .miaOverlay .iconBtn.topLeft{left:12px} .device .miaOverlay .iconBtn.topRight{right:12px}
.device .miaOverlay .iconBtn.bottomLeft,.device .miaOverlay .iconBtn.bottomRight{bottom:12px}
.device .miaOverlay .iconBtn.bottomLeft{left:12px} .device .miaOverlay .iconBtn.bottomRight{right:12px}
.device .miaOverlay .iconBtn.logo img{width:13px;height:13px}
.device .miaOverlay .name{bottom:48%;font-weight:600}
.device .miaOverlay .role{bottom:calc(48% - 14px)}
.device .miaOverlay .discuter{bottom:18%;max-width:140px;min-width:80px;border-width:1px}

/* ===== MANIFESTO ===== */
.manifesto{
  position:relative;padding: 160px var(--pad) 180px;
  background:radial-gradient(900px 500px at 50% 0%, rgba(56,189,248,.14), transparent 60%),var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;overflow:hidden;
}
.manifesto .watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,80vw);height:auto;opacity:.07;pointer-events:none;z-index:0;filter:blur(.5px)}
.manifesto > *{position:relative;z-index:1}
.manifesto .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:32px}
.manifesto p.big{max-width:1100px;margin:0 auto;font-family:"Fraunces",serif;font-weight:300;font-size: clamp(32px, 4.2vw, 62px);line-height:1.08;letter-spacing:-.022em;font-variation-settings:"opsz" 144}
.manifesto p.big em{font-family:"Instrument Serif",serif;font-style:italic;background:linear-gradient(100deg,var(--halo-a),var(--halo-b) 55%,var(--halo-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.manifesto .sign{margin-top:48px;font-family:"Instrument Serif",serif;font-style:italic;color:var(--bone-dim);font-size:16px}

/* ===== CONTACT ===== */
.contact{
  position:relative;overflow:hidden;
  padding:140px 0;
  background:
    radial-gradient(900px 600px at 85% 45%, rgba(168,85,247,.11), transparent 62%),
    radial-gradient(700px 450px at 10% 80%, rgba(56,189,248,.08), transparent 70%),
    var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.contact .contact-inner{
  position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);
  z-index:1;
}
/* Decorative geometric accent on the left edge */
.contact::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:65%;pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--halo-b) 50%, transparent 100%);
  opacity:.35;
}

.contact .intro h2{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.03em;margin-top:14px;font-variation-settings:"opsz" 144}
.contact .intro h2 em{font-family:"Instrument Serif",serif;font-style:italic;color:var(--bone-dim)}
.contact .intro .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.contact .intro p{margin-top:24px;font-size:18px;line-height:1.55;opacity:.78;max-width:420px}

.contact .topics{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;max-width:440px;
}
.contact .topics li{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  padding:8px 14px;border-radius:999px;color:var(--bone-dim);
  border:1px solid var(--line-strong);text-transform:uppercase;
  background: rgba(243,237,225,.02);
  transition: border-color .3s, color .3s, background .3s;
}
.contact .topics li:hover{border-color:var(--halo-a);color:var(--halo-a);background:rgba(56,189,248,.05)}

.contact .sla{
  margin-top:40px;font-family:"Instrument Serif",serif;font-style:italic;
  font-size:20px;line-height:1.4;color:var(--bone);opacity:.9;
}
.contact .sla::before{content:"↳ ";color:var(--halo-a);font-style:normal;font-family:"JetBrains Mono",monospace;font-size:14px;margin-right:8px;opacity:.7}
.contact .sla em{
  background:linear-gradient(100deg, var(--halo-a), var(--halo-b) 60%, var(--halo-c));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}

form.contact-form{
  display:flex;flex-direction:column;gap:18px;
  font-family:"Bricolage Grotesque",sans-serif;
  padding: 36px 36px 28px;
  border-radius:14px;position:relative;
  /* Gradient border trick via two backgrounds on padding-box + border-box */
  background:
    linear-gradient(180deg, rgba(20,20,28,.72), rgba(14,14,20,.8)) padding-box,
    linear-gradient(135deg, rgba(56,189,248,.35), rgba(168,85,247,.28) 50%, rgba(192,38,211,.2) 100%) border-box;
  border:1px solid transparent;
  backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 120px -40px rgba(168,85,247,.45), 0 0 0 1px rgba(243,237,225,.03) inset;
}
/* Subtle corner ornament: a tiny monospace tag in the top-right */
form.contact-form::before{
  content:"04/04";position:absolute;top:14px;right:18px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  color:var(--bone-dim);opacity:.55;pointer-events:none;
}
form.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-dim);font-family:"JetBrains Mono",monospace}
form.contact-form input,form.contact-form select,form.contact-form textarea{
  font:inherit;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;
  background:rgba(243,237,225,.04);border:1px solid var(--line);border-radius:4px;
  padding:14px 16px;color:var(--bone);outline:none;transition: border-color .3s, background .3s;
}
form.contact-form select{appearance:none;-webkit-appearance:none;background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%), linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);background-position: calc(100% - 20px) center, calc(100% - 14px) center;background-size: 6px 6px, 6px 6px;background-repeat: no-repeat;padding-right:44px}
form.contact-form select option{background:#0e0e14;color:var(--bone)}
form.contact-form textarea{min-height:140px;resize:vertical;font-family:"Bricolage Grotesque",sans-serif}
form.contact-form input:focus,form.contact-form select:focus,form.contact-form textarea:focus{border-color:var(--halo-a);background:rgba(56,189,248,.04)}
form.contact-form .submit-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:20px;flex-wrap:wrap}
form.contact-form .hint{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase;opacity:.7}
form.contact-form .turnstile-container{min-height:0;margin-top:4px}
form.contact-form .turnstile-container:not(:empty){min-height:66px}
form.contact-form .form-status{min-height:18px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
form.contact-form .form-status[data-kind="ok"]{color:#34d399}
form.contact-form .form-status[data-kind="err"]{color:#f87171}
form.contact-form button[type="submit"][disabled]{opacity:.6;cursor:wait}

/* ===== FOOTER ===== */
footer{max-width:var(--max);margin:0 auto;padding: 80px var(--pad) 60px;display:grid;grid-template-columns: 1.5fr 1fr 1fr 1fr;gap: 40px}
footer .col h4{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:18px;font-weight:500}
footer .col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
footer .col a{opacity:.85}footer .col a:hover{opacity:1;color:var(--halo-a)}
footer .col.brand p{max-width:320px;opacity:.7;font-size:15px;line-height:1.55;margin-top:14px}
footer .col.brand .mark{font-family:"Bricolage Grotesque",sans-serif;font-size:28px;font-weight:500;letter-spacing:-.022em;display:flex;align-items:center;gap:14px;font-variation-settings:"opsz" 48}
footer .col.brand .mark img{width:42px;height:auto;filter: drop-shadow(0 0 16px rgba(168,85,247,.55))}
.legal-line{max-width:var(--max);margin:0 auto;padding: 20px var(--pad) 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.legal-line em{font-family:"Instrument Serif",serif;font-style:italic;text-transform:none;letter-spacing:normal;font-size:15px;color:var(--bone);opacity:.92}
.legal-line em em{
  background:linear-gradient(100deg,var(--halo-a),var(--halo-b) 55%,var(--halo-c));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}

.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition: border-color .3s, background .3s, transform .3s;color:var(--bone-dim)}
.socials a:hover{border-color:var(--halo-a);color:var(--halo-a);background:rgba(56,189,248,.08);transform:translateY(-2px)}
.socials svg{width:15px;height:15px}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:300;display:none;background:rgba(0,0,0,.88);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);align-items:center;justify-content:center;padding:5vh 5vw;opacity:0;transition:opacity .35s ease}
.lightbox.open{display:flex;opacity:1}
.lightbox .frame{position:relative;width:min(1200px,100%);aspect-ratio:16/9;border-radius:6px;overflow:hidden;box-shadow: 0 60px 160px -20px rgba(168,85,247,.55), 0 0 0 1px rgba(243,237,225,.12);transform:scale(.96);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lightbox.open .frame{transform:scale(1)}
.lightbox iframe{width:100%;height:100%;border:0;display:block;background:#000}
.lightbox .close{position:absolute;top:28px;right:28px;z-index:10;width:44px;height:44px;border-radius:50%;background:rgba(243,237,225,.08);border:1px solid rgba(243,237,225,.25);color:var(--bone);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:18px;transition: background .3s, transform .3s}
.lightbox .close:hover{background:rgba(243,237,225,.2);transform:rotate(90deg)}

/* ===== CUSTOM CURSOR ===== */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(243,237,225,.5);pointer-events:none;z-index:200;transform:translate(-50%,-50%);transition: width .25s, height .25s, border-color .25s, background .25s;mix-blend-mode:difference}
.cursor.grow{width:64px;height:64px;background:rgba(168,85,247,.15);border-color:transparent}

/* ===== LEGAL PAGE ===== */
.legal-page{max-width:920px;margin:0 auto;padding:180px var(--pad) 120px;font-size:16px;line-height:1.7}
.legal-page h1{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.03em;margin-bottom:12px;font-variation-settings:"opsz" 144}
.legal-page .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:24px}
.legal-page h2{font-family:"Fraunces",serif;font-weight:400;font-size:26px;margin:48px 0 16px;letter-spacing:-.015em}
.legal-page p{margin-bottom:14px;opacity:.88}
.legal-page a{color:var(--halo-a);border-bottom:1px solid rgba(56,189,248,.4)}
.legal-page a:hover{color:var(--bone);border-color:var(--bone)}
.legal-page dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;margin:20px 0;font-family:"JetBrains Mono",monospace;font-size:13px}
.legal-page dt{color:var(--bone-dim);letter-spacing:.1em;text-transform:uppercase;font-size:11px;align-self:center}
.legal-page dd{color:var(--bone)}
.legal-page .back{display:inline-flex;align-items:center;gap:8px;margin-top:60px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-dim);border-bottom:1px solid var(--line-strong);padding-bottom:4px}
.legal-page .back:hover{color:var(--bone)}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px){
  .hero{grid-template-columns:1fr;padding:80px var(--pad) 60px;gap:32px}
  .hero .left{padding-top:0}
  .hero .right{min-height:auto}
  .products{grid-template-columns:1fr}
  .contact .contact-inner{grid-template-columns:1fr}
  form.contact-form{padding:28px 22px 22px}
  footer{grid-template-columns:1fr 1fr;gap:28px}
  nav.top ul{display:none}
  nav.top .nav-right .lang{display:flex}
  .cursor{display:none}
  /* Card 2 device mockup: taller media container so the rotated phone fits */
  .card .media.people{height:430px}
  /* Breath line not useful on mobile */
  .breath{display:none}
  /* Watermark in manifesto smaller on mobile so it doesn't wash out */
  .manifesto .watermark{width:min(700px, 95vw);opacity:.05}
}

/* Mobile scroll perf: kill the fixed grain overlay (big repaint killer) and
   drop mix-blend-mode + backdrop-filter on the nav — both force compositing
   on every scroll frame on iOS Safari / Chrome mobile. */
@media (max-width: 960px){
  /* Kill the fixed grain + vignette on mobile. Both cause repaint/layout
     issues when Safari shows/hides the URL bar on scroll — the fixed layer
     lags behind the viewport change and leaves a visible dark band at the
     bottom of the screen. Small screens don't benefit from the vignette. */
  body::before{display:none}
  body::after{display:none}
  nav.top{mix-blend-mode: normal; background: linear-gradient(180deg, rgba(10,10,13,.78) 0%, rgba(10,10,13,.4) 80%, transparent 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color:#fff}
}

/* Very small phones: hide brand wordmark, keep only the logo in nav */
@media (max-width: 640px){
  nav.top{padding:18px 20px}
  nav.top .brand span.brandText{display:none}
  nav.top .brand img{width:30px}
  nav.top .nav-right{gap:12px}
  nav.top .cta{padding:8px 14px;font-size:11px}
  nav.top .lang{font-size:10px}
  nav.top .lang button{padding:3px 7px}
  /* Hero stage fills width better on small phones */
  .stage{width:100%;max-width:100%}
  /* Topic pills break into 2 lines naturally — just ensure sensible size */
  .contact .topics{gap:8px}
  .contact .topics li{font-size:10px;padding:7px 12px}
  /* Legal line stacks cleanly */
  .legal-line{flex-direction:column;align-items:flex-start;gap:10px;font-size:10px}
  /* Footer: one column on tiny screens */
  footer{grid-template-columns:1fr;gap:32px}
}