/* ============================== nascode "THE CORE" — home page (EN / LTR) ============================== */
/* ============================== TOKENS ============================== */
:root{
  --void:#070608;
  --ink:#0d0b11;
  --wine:#16101a;
  --rose:#ff5e86;
  --rose-deep:#c23a60;
  --cream:#f3ece1;
  --mist:#8f8790;
  --line:rgba(243,236,225,.10);
  --line-soft:rgba(243,236,225,.05);

  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Poppins",system-ui,sans-serif;
  --font-mono:"Poppins",ui-monospace,monospace;

  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --ease:cubic-bezier(.6,.01,.2,1);
  --grade:rgba(40,16,30,0); /* scroll-driven tint */
}
.home-core *{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body.home-core{
  font-family:var(--font-body); background:var(--void); color:var(--cream);
  line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; cursor:none;
}
@media (pointer:coarse){ body.home-core{cursor:auto} }
.home-core ::selection{ background:var(--rose); color:#1a0d14; }
.home-core a{ color:inherit; text-decoration:none; }
.home-core em,.home-core i,.home-core cite,.home-core address{ font-style:normal; }
.home-core :focus-visible{ outline:2px solid var(--rose); outline-offset:4px; border-radius:2px; }
.home-core canvas{ display:block }

/* ============================== ATMOSPHERE ============================== */
#scene{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.6s var(--ease); }
.atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(40,20,34,.5), transparent 60%),
    radial-gradient(70% 60% at 90% 100%, rgba(28,16,26,.6), transparent 65%),
    var(--void);
}
.grade{ position:fixed; inset:0; z-index:2; pointer-events:none; background:var(--grade); transition:background .6s linear; mix-blend-mode:screen; }
.grain{
  position:fixed; inset:0; z-index:55; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================== CURSOR ============================== */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference; }
.cursor{ width:32px; height:32px; border:1px solid rgba(255,255,255,.7); transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s; }
.cursor-dot{ width:5px; height:5px; background:#fff; transform:translate(-50%,-50%); }
.cursor.hover{ width:64px; height:64px; background:rgba(255,255,255,.05); }
@media (pointer:coarse){ .cursor,.cursor-dot{ display:none } }

/* ============================== ATMOSPHERE + CURSOR PARTICLE CANVASES ============================== */
#bgfx{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#cursorfx{ position:fixed; inset:0; z-index:50; pointer-events:none; }
@media (pointer:coarse){ #cursorfx{ opacity:.65 } }

/* ============================== LOADER ============================== */
.loader{ position:fixed; inset:0; z-index:100; background:radial-gradient(130% 120% at 50% 44%, #140c16, var(--void) 68%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--pad); --clip:160%; clip-path:circle(var(--clip) at 50% 47%); -webkit-clip-path:circle(var(--clip) at 50% 47%); will-change:clip-path; }
.logo{ display:block; width:auto; color:var(--cream); aspect-ratio:1527.45/246.1; overflow:visible }
.logo--nav{ height:22px }
.logo--loader{ height:clamp(26px,4.8vw,40px) }
.logo--foot{ height:clamp(40px,8vw,80px) }
.brand:hover .logo{ color:#fff }
/* HUD corners */
.ld-corner{ position:absolute; font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); }
.ld-corner b{ color:var(--cream); font-weight:500 }
.ld-tl{ top:var(--pad); left:var(--pad); opacity:.9 }
.ld-tr{ top:var(--pad); right:var(--pad); text-align:right; line-height:1.8 }
.ld-bottom{ position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) + 1.1rem); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--font-mono); font-weight:500; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); }
.ld-bdot{ color:var(--rose) }
/* core */
.ld-core{ display:flex; flex-direction:column; align-items:center; }
.ld-orb{ position:relative; width:clamp(186px,40vw,248px); aspect-ratio:1; display:grid; place-items:center; }
.ld-orb-glow{ position:absolute; inset:-36%; border-radius:50%; background:radial-gradient(circle, rgba(255,94,134,.55), rgba(255,94,134,0) 60%); filter:blur(16px); opacity:.22; }
.ld-halo{ position:absolute; inset:2%; border-radius:50%; border:1px solid rgba(255,255,255,.08); animation:ldpulse 2.8s ease-in-out infinite; }
.ld-orb-core{ position:absolute; inset:24%; border-radius:50%; overflow:hidden;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), rgba(255,214,234,.5) 16%, rgba(255,170,205,0) 44%),
    radial-gradient(circle at 52% 56%, #ffd2e7, #ff5e86 56%, #93264a 100%);
  box-shadow: inset -8px -12px 26px rgba(105,8,44,.6), inset 7px 9px 18px rgba(255,255,255,.4), 0 0 46px rgba(255,94,134,.42);
  animation:ldfloat 5.5s ease-in-out infinite; }
.ld-orb-core::after{ content:""; position:absolute; inset:-26%; background:conic-gradient(from 0deg, transparent 0 58%, rgba(255,255,255,.4) 76%, transparent 90%); mix-blend-mode:screen; animation:ldspin 4.2s linear infinite; }
.ld-rings{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ld-track{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1.4 }
.ld-prog{ fill:none; stroke:var(--rose); stroke-width:2.4; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(255,94,134,.65)); }
.ld-orbit{ position:absolute; inset:8%; border-radius:50%; animation:ldspin 5.6s linear infinite; }
.ld-orbit span{ position:absolute; top:-3.5px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--rose); box-shadow:0 0 12px rgba(255,94,134,.95); }
@keyframes ldspin{ to{ transform:rotate(360deg) } }
@keyframes ldpulse{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(1.06); opacity:.12 } }
@keyframes ldfloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3%) } }
.ld-count{ margin-top:2.3rem; font-family:var(--font-display); font-weight:200; font-size:clamp(3rem,11vw,6.4rem); line-height:.82; letter-spacing:-.05em; color:var(--cream); display:flex; align-items:flex-start; }
.ld-count i{ font-style:normal; font-family:var(--font-mono); font-weight:500; font-size:.85rem; letter-spacing:.1em; color:var(--rose); margin:.55em 0 0 .18em; }
.ld-label{ margin-top:1rem; font-family:var(--font-mono); font-weight:500; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mist); }
.ld-dots::after{ content:""; animation:lddots 1.6s steps(4,end) infinite; }
@keyframes lddots{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} 100%{content:""} }
.loader-line{ position:absolute; left:var(--pad); right:var(--pad); top:auto; bottom:calc(var(--pad) + .2rem); height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; }
.loader-bar{ position:absolute; left:0; bottom:0; height:2px; width:0%; background:linear-gradient(90deg, rgba(255,94,134,.4), var(--rose)); box-shadow:0 0 12px rgba(255,94,134,.5); }

/* ============================== NAV ============================== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:70; display:flex; align-items:center; justify-content:space-between; padding:1.3rem var(--pad); mix-blend-mode:exclusion; transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), mix-blend-mode .1s; }
.nav.scrolled{ mix-blend-mode:normal; background:rgba(7,6,8,.72); backdrop-filter:blur(11px) saturate(1.1); -webkit-backdrop-filter:blur(11px) saturate(1.1); border-bottom:1px solid var(--line-soft); padding-top:.95rem; padding-bottom:.95rem; }
.brand{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:-.045em }
.brand .dot{ color:var(--rose) }
.nav-cta{ font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); border:1px solid rgba(255,255,255,.5); padding:.6rem 1.1rem; border-radius:40px; transition:border-color .35s,color .35s,background .35s }
.nav-cta:hover{ border-color:var(--rose); color:var(--rose); background:rgba(255,94,134,.06) }
.nav-right{ display:flex; align-items:center; gap:.95rem }
.nav-status{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); white-space:nowrap }
.nav-dot{ width:7px; height:7px; border-radius:50%; background:#2fd27a; flex:none; animation:navpulse 1.6s ease-out infinite }
@keyframes navpulse{ 0%{ box-shadow:0 0 0 0 rgba(47,210,122,.65); opacity:1 } 70%{ box-shadow:0 0 0 7px rgba(47,210,122,0); opacity:.7 } 100%{ box-shadow:0 0 0 0 rgba(47,210,122,0); opacity:1 } }
@media (max-width:560px){ .nav-status{ display:none } }

/* ============================== CHAPTER NAV (right rail, no neon) ============================== */
.chnav{ display:none !important; position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); z-index:65; flex-direction:column; gap:.95rem; align-items:flex-end; }
.chnav button{ display:flex; align-items:center; gap:.7rem; background:none; border:none; cursor:none; color:var(--mist); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.chnav .lbl{ opacity:0; transform:translateX(6px); transition:opacity .35s, transform .35s, color .35s; white-space:nowrap; }
.chnav .pip{ width:7px; height:7px; border-radius:50%; border:1px solid var(--line); transition:all .4s var(--ease); }
.chnav button.active .pip,.chnav button:hover .pip{ background:var(--rose); border-color:var(--rose); transform:scale(1.25) }
.chnav button.active .lbl,.chnav button:hover .lbl{ opacity:1; transform:translateX(0); color:var(--cream) }
@media (max-width:860px){ .chnav{ display:none } }

/* ============================== SHELL ============================== */
main{ position:relative; z-index:10 }
.eyebrow{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); display:flex; align-items:center; gap:.85rem; margin-bottom:1.5rem; }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--rose) }
.eyebrow .idx{ color:var(--rose) }
.scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.mask{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.1em }
.eyebrow,.nav-cta,.btn,.chnav button,.hero-top,.hero-scroll,.stat,.cap-row .ci,.proof-cell .pl,.proof-cities,.signal-tag,.foot-col h4,.faq-q .qi{ font-weight:500 }
.mask > *{ display:block }

/* ============================== HERO ============================== */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:6.5rem var(--pad) 1.8rem; position:relative; }
.hero-top{ display:flex; gap:2rem; justify-content:space-between; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); }
.hero-top .col{ display:flex; flex-direction:column; gap:.25rem }
.hero-top b{ color:var(--cream); font-weight:500 }
.hero-mid{ display:flex; flex-direction:column; justify-content:center; flex:1; max-width:900px; }
.hero h1{ font-family:var(--font-display); font-weight:300; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2.05rem,4.9vw,4.3rem); text-transform:lowercase; }
.hero h1 .t-light{ font-weight:300; color:var(--cream); opacity:.9 }
.hero h1 .em{ font-family:var(--font-display); font-style:normal; font-weight:700; color:var(--cream); letter-spacing:-.012em; position:relative; }
.hero h1 .q{ color:var(--rose); font-weight:500 }
.hero-sub{ max-width:46ch; margin-top:1.8rem; color:var(--mist); font-size:clamp(.98rem,1.15vw,1.12rem); line-height:1.6 }
.hero-sub strong{ color:var(--cream); font-weight:600 }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; align-items:center }
.hero-bottom{ display:flex; flex-wrap:wrap; gap:clamp(1rem,3vw,2.4rem); align-items:center; padding-top:1.3rem; border-top:1px solid var(--line-soft) }
.stat{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist) }
.stat b{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--cream); letter-spacing:0 }
.hero-scroll{ margin-left:auto; display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist) }
.hero-scroll .tick{ width:42px; height:1px; background:var(--line); position:relative; overflow:hidden }
.hero-scroll .tick::after{ content:""; position:absolute; inset:0; background:var(--rose); transform:translateX(-100%); animation:tick 2.6s var(--ease) infinite }
@keyframes tick{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ============================== BTN ============================== */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.65rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.95rem 1.5rem; border-radius:60px; border:1px solid var(--line); overflow:hidden; will-change:transform }
.btn .lbl,.btn .arr{ position:relative; z-index:2; transition:color .4s var(--ease),transform .4s var(--ease) }
.btn::after{ content:""; position:absolute; inset:0; background:var(--cream); transform:translateY(101%); transition:transform .5s var(--ease); z-index:1 }
.btn--solid {
  background: var(--cream);
  color: var(--void) !important;
  border-color: var(--cream)
}
.btn--solid::after{ background:var(--rose) }
.btn:hover::after{ transform:translateY(0) }
.btn:hover .arr{ transform:translateX(5px) }
.btn--solid:hover .lbl,.btn--solid:hover .arr{ color:#1a0d14 }
.btn--ghost:hover .lbl,.btn--ghost:hover .arr{ color:var(--void) }

/* ============================== 01 SIGNAL ============================== */
.signal{ min-height:100svh; display:flex; align-items:center; padding:8rem var(--pad); }
.signal-inner{ max-width:1100px; position:relative }
.manifesto{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.05; font-size:clamp(1.7rem,5vw,4.4rem); max-width:18ch; }
.manifesto .hot{ color:var(--rose); font-style:normal; font-family:var(--font-display); font-weight:700 }
.manifesto .soft{ color:var(--mist) }
.signal-foot{ display:flex; flex-wrap:wrap; gap:2.2rem; justify-content:space-between; align-items:flex-end; margin-top:3rem }
.signal-note{ max-width:38ch; color:var(--mist); font-size:1.02rem; line-height:1.6 }
.signal-tag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rose) }

/* ============================== 02 CAPABILITIES ============================== */
.cap{ padding:7rem var(--pad) 4rem; position:relative }
.cap-head{ max-width:760px; margin-bottom:1rem }
.cap-title{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(1.8rem,5vw,4rem); line-height:1.05; text-transform:lowercase }
.cap-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4rem; padding:1.7rem 0; border-top:1px solid var(--line); position:relative; cursor:none }
.cap-row:last-child{ border-bottom:1px solid var(--line) }
.cap-row .ci{ font-family:var(--font-mono); font-size:.7rem; color:var(--mist); letter-spacing:.1em }
.cap-row .cn{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.4rem,3.8vw,2.9rem); text-transform:lowercase; line-height:1.08; transition:transform .5s var(--ease),color .4s }
.cap-row .cd{ font-family:var(--font-body); color:var(--mist); font-size:.92rem; max-width:28ch; text-align:right; opacity:.45; transition:opacity .4s,color .4s }
.cap-row:hover .cn{ transform:translateX(16px); color:var(--cream) }
.cap-row:hover .cd{ opacity:1; color:var(--cream) }
.cap-row:hover .ci{ color:var(--rose) }
@media (max-width:760px){ .cap-row{ grid-template-columns:auto 1fr } }

/* ============================== 03 IN FOCUS (parallax plates over the core) ============================== */
.focus{ position:relative; height:200vh }
.focus-stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center }
.focus-cap{ position:relative; z-index:3; text-align:center; mix-blend-mode:exclusion }
.focus-cap .e{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cream); display:block; margin-bottom:1rem }
.focus-cap h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.0; font-size:clamp(2.2rem,7vw,6.5rem); text-transform:lowercase; padding-bottom:.08em }
.focus-cap .em{ font-family:var(--font-display); font-style:normal; font-weight:700 }
.plate{ position:absolute; border-radius:16px; will-change:transform; cursor:none; perspective:1100px; }
.plate-in{ position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden; transform-style:preserve-3d;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.5); border:1px solid rgba(243,236,225,.14); background:#0b0610; }
.plate-layer{ position:absolute; inset:-7%; will-change:transform; transition:transform .4s var(--ease); }
.card-bg{ z-index:1; }
img.card-bg{ width:114%; height:114%; max-width:none; max-height:none; object-fit:cover; object-position:50% 50%; display:block; }
.card-tex{ z-index:2; mix-blend-mode:overlay; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); background-size:cover; }
.card-sheen{ position:absolute; inset:0; z-index:3; mix-blend-mode:screen; transform:translateX(-35%);
  transition:transform .8s var(--ease); background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); }
.card-motif{ position:absolute; z-index:3; right:-1%; bottom:-16%; font-family:var(--font-display); font-weight:800;
  font-size:13rem; line-height:.7; color:rgba(255,255,255,.06); text-transform:lowercase; transition:transform .5s var(--ease); pointer-events:none; }
.card-glow{ position:absolute; inset:0; z-index:4; opacity:0; transition:opacity .4s; mix-blend-mode:screen;
  background:radial-gradient(200px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 60%); }
.card-meta{ position:absolute; z-index:5; left:0; bottom:0; padding:1.1rem; display:flex; align-items:center; gap:.7rem; }
.card-idx{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; color:var(--rose) }
.card-t{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:1.05rem; text-transform:lowercase; color:var(--cream); transition:transform .5s var(--ease) }
.plate:hover .plate-in{ box-shadow:0 55px 130px rgba(0,0,0,.62), 0 0 50px rgba(255,94,134,.12) }
.plate:hover .card-glow{ opacity:1 }
.plate:hover .card-sheen{ transform:translateX(35%) }
.plate:hover .card-t{ transform:translateY(-3px) }
.plate[data-cat="branding"] .card-bg{ background:radial-gradient(120% 100% at 18% 8%, #ff84b6, transparent 56%), linear-gradient(140deg,#3c1026,#180912 72%) }
.plate[data-cat="web"] .card-bg{ background:radial-gradient(120% 100% at 82% 2%, #74a4ff, transparent 56%), linear-gradient(140deg,#101a30,#0a0a16 72%) }
.plate[data-cat="campaigns"] .card-bg{ background:radial-gradient(120% 100% at 28% 92%, #ffa657, transparent 56%), linear-gradient(140deg,#3c1a10,#160a0c 72%) }
.plate[data-cat="strategy"] .card-bg{ background:radial-gradient(120% 100% at 72% 82%, #b78cff, transparent 56%), linear-gradient(140deg,#201433,#0c0816 72%) }
.p1{ width:min(30vw,300px); height:min(40vh,360px); left:8vw; top:18vh }
.p2{ width:min(22vw,240px); height:min(28vh,260px); right:10vw; top:14vh }
.p3{ width:min(26vw,280px); height:min(32vh,300px); right:16vw; bottom:12vh }
.p4{ width:min(20vw,210px); height:min(24vh,220px); left:14vw; bottom:16vh }
@media (max-width:760px){
  .focus{ height:auto; padding:5rem 0 } .focus-stage{ position:static; height:auto; flex-direction:column; gap:1.1rem; overflow:visible; padding:2rem var(--pad) }
  .plate{ position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100%; height:40vh; perspective:none }
  .card-motif{ font-size:9rem }
  .focus-cap{ order:-1; margin-bottom:2rem }
}

/* ============================== 04 PROOF (opaque slab — core passes behind) ============================== */
.proof{ min-height:90svh; display:flex; flex-direction:column; justify-content:center; padding:7rem var(--pad); position:relative; z-index:11; background:linear-gradient(180deg, transparent, var(--void) 12%, var(--void) 88%, transparent) }
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.2rem }
.proof-cell{ background:var(--ink); padding:2.2rem clamp(1rem,2vw,2rem) }
.proof-cell .pv{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(2.4rem,6.5vw,5.4rem); line-height:.85 }
.proof-cell .pv .plus{ color:var(--rose) }
.proof-cell .pl{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mist); margin-top:.9rem }
.proof-cities{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mist) }
.proof-cities b{ color:var(--cream) } .proof-cities .sep{ color:var(--rose) }
@media (max-width:760px){ .proof-grid{ grid-template-columns:repeat(2,1fr) } }

/* ============================== 05 CONSTELLATION / PARTNERS ============================== */
.partners{ padding:7rem 0; overflow:hidden; position:relative; z-index:11 }
.partners .ph{ padding:0 var(--pad); margin-bottom:2.6rem }
.partners h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(1.8rem,4.8vw,3.8rem); line-height:1.05; text-transform:lowercase; max-width:16ch }
.pnote{ color:var(--mist); margin-top:.9rem; max-width:46ch }
.mq-track{ border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.marquee{ display:flex; gap:3.5rem; width:max-content; will-change:transform; padding:1.3rem 0 }
.marquee.row2{ margin-top:1px }
.mq-item{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.4rem,3.6vw,2.5rem); color:var(--mist); white-space:nowrap; display:flex; align-items:center; gap:1.1rem; transition:color .4s }
.mq-item::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .4s }
.mq-item:hover{ color:var(--cream) } .mq-item:hover::before{ background:var(--rose) }

/* ============================== 06 FREQUENCIES / FAQ ============================== */
.faq{ padding:8rem var(--pad); position:relative; z-index:11 }
.faq-grid{ display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(2rem,5vw,5rem); align-items:start }
.faq-aside h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(1.8rem,4.5vw,3.4rem); line-height:1.06; text-transform:lowercase }
.faq-aside p{ color:var(--mist); margin-top:1.1rem; max-width:34ch }
.faq-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem }
.faq-tab{ font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); background:none; border:1px solid var(--line); border-radius:40px; padding:.5rem .95rem; cursor:none; transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease) }
.faq-tab:hover{ color:var(--cream); border-color:rgba(243,236,225,.4) }
.faq-tab.active{ color:var(--void); background:var(--cream); border-color:var(--cream) }
.faq-list{ border-top:1px solid var(--line) }
.faq-item{ will-change:transform,opacity }
.faq-empty{ display:none; padding:2rem 0; color:var(--mist); font-size:.95rem }
.faq-empty.show{ display:block }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-q{ width:100%; text-align:left; background:none; border:none; color:var(--cream); cursor:none; display:flex; align-items:center; gap:1.3rem; padding:1.6rem 0; font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.05rem,2.2vw,1.55rem); text-transform:lowercase }
.faq-q .qi{ font-family:var(--font-mono); font-size:.66rem; color:var(--mist); letter-spacing:.1em }
.faq-q .qt{ margin-right:auto }
.faq-q .sign{ position:relative; width:16px; height:16px; flex:none }
.faq-q .sign::before,.faq-q .sign::after{ content:""; position:absolute; background:var(--rose); transition:transform .4s var(--ease) }
.faq-q .sign::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%) }
.faq-q .sign::after{ top:0; left:50%; height:100%; width:1.5px; transform:translateX(-50%) }
.faq-item.open .sign::after{ transform:translateX(-50%) scaleY(0) }
.faq-item.open .faq-q{ color:var(--rose) }
.faq-a{ overflow:hidden; height:0 }
.faq-a-inner{ padding:0 0 1.7rem; color:var(--mist); max-width:60ch; font-size:1rem }
@media (max-width:860px){ .faq-grid{ grid-template-columns:1fr } }

/* ============================== 07 INSIGHTS ============================== */
.insights{ position:relative; z-index:11; height:240vh; background:linear-gradient(180deg, transparent, rgba(7,6,8,.72) 11%, rgba(7,6,8,.72) 89%, transparent) }
.ins-stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(1.4rem,4vh,2.6rem) }
.ins-head{ position:relative; z-index:3; flex:0 0 auto; padding:0 var(--pad) }
.ins-head h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.05; font-size:clamp(1.8rem,5vw,4rem); text-transform:lowercase }
.ins-head .em{ font-family:var(--font-display); font-style:normal; font-weight:700; color:var(--rose) }
.ins-note{ color:var(--mist); margin-top:1rem; max-width:42ch; font-size:1.02rem; line-height:1.6 }
.ins-track{ display:flex; gap:1.6rem; padding:0 8vw 0 var(--pad); align-items:center; will-change:transform; flex:0 0 auto }
.ins-card{ position:relative; isolation:isolate; flex:0 0 auto; width:clamp(290px,30vw,400px); height:min(54vh,500px); border-radius:18px; overflow:hidden; background:#0c0712 50% 50%/cover no-repeat; border:1px solid rgba(243,236,225,.12); box-shadow:0 30px 80px rgba(0,0,0,.5); display:flex; flex-direction:column; cursor:none; transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease) }
.ins-card::before{ content:""; position:absolute; inset:0; z-index:0; opacity:1; background:radial-gradient(120% 72% at 22% 6%, rgba(255,94,134,.4), transparent 52%), linear-gradient(180deg, rgba(8,5,11,.1) 0%, rgba(8,5,11,.46) 50%, rgba(9,6,12,.93) 100%) }
.ins-card[data-tint="b"]::before{ background:radial-gradient(120% 72% at 78% 6%, rgba(120,160,255,.4), transparent 52%), linear-gradient(180deg, rgba(7,9,18,.1) 0%, rgba(7,9,18,.46) 50%, rgba(8,8,16,.93) 100%) }
.ins-card[data-tint="c"]::before{ background:radial-gradient(120% 72% at 30% 6%, rgba(255,160,90,.4), transparent 52%), linear-gradient(180deg, rgba(16,9,7,.1) 0%, rgba(16,9,7,.46) 50%, rgba(14,9,8,.93) 100%) }
.ins-card[data-tint="d"]::before{ background:radial-gradient(120% 72% at 70% 6%, rgba(182,140,255,.4), transparent 52%), linear-gradient(180deg, rgba(13,9,20,.1) 0%, rgba(13,9,20,.46) 50%, rgba(11,8,16,.93) 100%) }
.ins-card > *{ position:relative; z-index:1 }
.ins-card .ins-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; display:block; border:0 }
.ins-card-top{ display:flex; align-items:flex-start; justify-content:space-between; padding:1.4rem 1.45rem }
.ins-num{ font-family:var(--font-display); font-weight:700; font-size:2.6rem; line-height:.9; color:rgba(255,255,255,.18) }
.ins-cat{ font-family:var(--font-mono); font-weight:500; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); border:1px solid rgba(243,236,225,.32); padding:.42rem .72rem; border-radius:40px }
.ins-card-body{ margin-top:auto; padding:0 1.45rem }
.ins-card-body h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.3rem,2.3vw,1.8rem); line-height:1.12; text-transform:lowercase }
.ins-card-body p{ color:var(--mist); margin-top:.75rem; font-size:.92rem; line-height:1.55; max-width:34ch }
.ins-card-foot{ display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.45rem 1.5rem; margin-top:1.3rem; border-top:1px solid rgba(243,236,225,.1) }
.ins-date{ font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist) }
.ins-cta{ font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); display:flex; align-items:center; gap:.5rem }
.ins-cta i{ font-style:normal; transition:transform .4s var(--ease) }
.ins-card:hover{ transform:translateY(-10px); border-color:rgba(255,94,134,.42); box-shadow:0 50px 120px rgba(0,0,0,.62), 0 0 50px rgba(255,94,134,.14) }
.ins-card:hover .ins-cta i{ transform:translateX(7px) }
.ins-progress{ position:absolute; left:var(--pad); right:var(--pad); bottom:7vh; height:2px; background:rgba(243,236,225,.12); z-index:3 }
.ins-progress span{ display:block; height:100%; width:0%; background:var(--rose) }
.ins-all{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.5rem; font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); border:1px solid var(--line); border-radius:40px; padding:.6rem 1.1rem; cursor:none; transition:border-color .35s,color .35s,background .35s }
.ins-all i{ font-style:normal; transition:transform .4s var(--ease) }
.ins-all:hover{ border-color:var(--rose); color:var(--rose); background:rgba(255,94,134,.06) }
.ins-all:hover i{ transform:translateX(5px) }
@media (max-width:860px){
  .insights{ height:auto; padding:5rem 0 }
  .ins-stage{ position:static; height:auto; display:block }
  .ins-head{ position:static; padding:0 var(--pad) }
  .ins-track{ flex-direction:column; padding:2rem var(--pad) 0; gap:1.2rem; transform:none !important; width:auto !important }
  .ins-card{ width:100%; height:auto; min-height:300px }
  .ins-progress{ display:none }
}

/* ============================== 08 TRANSMISSION / CTA ============================== */
.cta{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:7rem var(--pad); position:relative }
.cta .eyebrow{ justify-content:center }
.cta h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.0; font-size:clamp(2.6rem,9vw,8rem); text-transform:lowercase }
.cta h2 .em{ font-family:var(--font-display); font-style:normal; font-weight:700; color:var(--rose) }
.cta-sub{ color:var(--mist); margin-top:1.4rem; font-size:1.02rem; line-height:1.6; max-width:44ch }
.cta-big{ margin-top:2.6rem } .cta-big .btn{ font-size:.78rem; padding:1.15rem 2.1rem }

/* ============================== FOOTER ============================== */
.foot{ position:relative; z-index:11; padding:0 var(--pad) 2.4rem; background:linear-gradient(180deg, transparent, rgba(10,7,13,.55) 16%, var(--void) 42%); overflow:hidden }
.foot::before{ content:""; position:absolute; top:0; left:var(--pad); right:var(--pad); height:1px; background:linear-gradient(90deg, transparent, rgba(255,94,134,.5), transparent) }
.foot-glow{ position:absolute; left:50%; bottom:-48%; width:min(120vw,1100px); aspect-ratio:1; transform:translateX(-50%); background:radial-gradient(circle, rgba(255,94,134,.11), transparent 62%); pointer-events:none; z-index:0 }
.foot-inner{ position:relative; z-index:1; max-width:1320px; margin:0 auto }
.foot-lead{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding:clamp(3.2rem,7vw,5.4rem) 0 clamp(2.4rem,5vw,3.4rem); border-bottom:1px solid var(--line-soft) }
.foot-lead .eyebrow{ margin-bottom:1.1rem }
.foot-cta-title{ font-family:var(--font-display); font-weight:300; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2rem,5.4vw,4.1rem); text-transform:lowercase; max-width:13ch }
.foot-cta-title .em{ font-family:var(--font-display); font-style:normal; font-weight:700; color:var(--rose) }
.foot-cta-btn{ flex:none }
.foot-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(2.4rem,6vw,5rem); padding:clamp(2.6rem,5vw,3.6rem) 0 }
.foot-id .logo--foot{ height:clamp(26px,4.4vw,46px) }
.foot-tag{ color:var(--mist); max-width:42ch; margin-top:1.5rem; font-size:1.02rem; line-height:1.6 }
.foot-social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.9rem }
.foot-soc{ font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); border:1px solid var(--line); border-radius:40px; padding:.6rem 1.1rem; transition:border-color .35s,color .35s,background .35s,transform .35s }
.foot-soc:hover{ border-color:var(--rose); color:var(--rose); background:rgba(255,94,134,.06); transform:translateY(-2px) }
.foot-cols{ display:flex; gap:clamp(2rem,5vw,4rem); flex-wrap:wrap; justify-content:flex-end }
.foot-col{ min-width:118px }
.foot-col h4{ font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); margin-bottom:1rem }
.foot-col a{ display:block; padding:.3rem 0; color:var(--cream); opacity:.78; transition:opacity .3s,transform .3s,color .3s }
.foot-col a:hover{ opacity:1; transform:translateX(5px); color:var(--rose) }
.foot-office{ display:block; padding:.3rem 0; color:var(--mist); font-size:.95rem }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:2rem; border-top:1px solid var(--line-soft); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist) }
.legal-link{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--mist); background:none; border:none; padding:0; cursor:none; transition:color .3s }
.legal-link:hover{ color:var(--rose) }
.legal-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:5vh 1.1rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s var(--ease),visibility .45s }
.legal-modal.open{ opacity:1; visibility:visible; pointer-events:auto }
.legal-backdrop{ position:absolute; inset:0; background:rgba(4,3,6,.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.legal-panel{ position:relative; width:100%; max-width:760px; max-height:88vh; overflow-y:auto; background:#0b090f; border:1px solid var(--line); border-radius:20px; padding:clamp(1.8rem,4vw,3.2rem); box-shadow:0 50px 140px rgba(0,0,0,.65); transform:translateY(26px) scale(.985); transition:transform .55s var(--ease); -webkit-overflow-scrolling:touch }
.legal-modal.open .legal-panel{ transform:none }
.legal-close{ position:sticky; top:0; float:right; font-family:var(--font-mono); font-weight:500; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); background:none; border:none; cursor:none; display:inline-flex; align-items:center; gap:.4rem; transition:color .3s }
.legal-close span{ font-size:1.15rem; line-height:1 }
.legal-close:hover{ color:var(--rose) }
.legal-eyebrow{ font-family:var(--font-mono); font-weight:500; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose) }
.legal-title{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(1.8rem,5vw,2.8rem); text-transform:lowercase; line-height:1.12; margin:.5rem 0 .4rem }
.legal-updated{ color:var(--mist); font-size:.82rem; margin-bottom:1.8rem }
.legal-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; margin:1.5rem 0 .45rem; color:var(--cream) }
.legal-body p{ color:var(--mist); font-size:.92rem; line-height:1.65; margin-bottom:.4rem }
.legal-body a{ color:var(--rose) }

/* ============================== WHATSAPP ============================== */
.wa{ position:fixed; right:1.3rem; bottom:1.3rem; z-index:80; width:54px; height:54px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; cursor:none; box-shadow:0 10px 36px rgba(37,211,102,.38); transition:transform .4s var(--ease) }
.wa:hover{ transform:scale(1.08) translateY(-2px) }
.wa svg{ width:28px; height:28px; fill:#fff }

/* ============================== RESPONSIVE / MOBILE PASS ============================== */
@keyframes mq-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (max-width:760px){
  .hero{ padding:5.4rem var(--pad) 1.6rem }
  .hero-top{ font-size:.58rem; gap:1.2rem }
  .hero-sub{ margin-top:1.4rem }
  .hero-actions{ margin-top:1.7rem; gap:.7rem }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center }
  .hero-bottom{ gap:1rem 1.4rem }
  .hero-scroll{ margin-left:0; width:100% }
  .signal{ padding:5.5rem var(--pad); min-height:auto }
  .signal-foot{ margin-top:2.2rem; gap:1.4rem }
  .cap{ padding:5rem var(--pad) 3rem }
  .proof{ padding:5rem var(--pad); min-height:auto }
  .proof-cell{ padding:1.7rem 1.1rem }
  .partners{ padding:5rem 0 }
  .cta{ padding:6rem var(--pad); min-height:auto }
  .foot-grid{ grid-template-columns:1fr; gap:2.6rem }
  .foot-cols{ justify-content:flex-start; gap:2.6rem }
  /* hero: hide secondary CTA on mobile only */
  .hero-actions .btn--ghost{ display:none }
  /* 02 capabilities: tap-to-reveal accordion */
  .cap-row{ grid-template-columns:auto 1fr; align-items:center; padding:1.4rem 2.4rem 1.4rem 0; cursor:pointer }
  .cap-row .cn{ transform:none !important }
  .cap-row .cd{ display:block; grid-column:1 / -1; text-align:left; max-width:none; margin:0; opacity:0; max-height:0; overflow:hidden; line-height:1.55; transition:max-height .45s var(--ease), opacity .35s var(--ease), margin-top .35s var(--ease) }
  .cap-row.open .cd{ opacity:1; max-height:220px; margin-top:.85rem; color:var(--mist) }
  .cap-row.open .cn{ color:var(--cream) }
  .cap-row.open .ci{ color:var(--rose) }
  .cap-row::after{ content:"+"; position:absolute; right:.1rem; top:1.45rem; font-family:var(--font-mono); font-size:1.05rem; line-height:1; color:var(--mist); transition:transform .4s var(--ease), color .4s }
  .cap-row.open::after{ transform:rotate(45deg); color:var(--rose) }
  /* 03 in focus: clean, consistent rounded thumbnail frames, stacked, no motion */
  .plate{ height:clamp(220px,56vw,300px); border-radius:18px; transform:none !important; transition:none !important }
  .plate-in{ border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); clip-path:none !important; -webkit-clip-path:none !important; transform:none !important; transition:none !important }
  .card-bg{ transform:none !important }
  .card-motif{ font-size:8rem }
  /* 05 constellation: taller frames + continuous sliding marquee */
  .marquee{ padding:1.9rem 0; gap:2.6rem; animation:mq-slide 30s linear infinite }
  .marquee.row2{ animation-direction:reverse; animation-duration:34s }
  .mq-item{ font-size:1.55rem }
  /* prevent any horizontal overflow on mobile */
  html,body{ overflow-x:hidden }
}
@media (max-width:560px){
  .nav{ padding:1rem var(--pad) }
  .nav.scrolled{ padding-top:.8rem; padding-bottom:.8rem }
  .logo--nav{ height:19px }
  .nav-cta{ font-size:.62rem; letter-spacing:.1em; padding:.5rem .8rem }
  .nav-right{ gap:.6rem }
  .foot-lead{ padding-top:2.8rem }
  .foot-cta-title{ font-size:clamp(1.8rem,8vw,2.6rem) }
  .foot-cta-btn{ width:100%; justify-content:center }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:.7rem }
}
@media (max-width:400px){
  .hero-top .col:last-child span:last-child{ display:none }
  .nav-cta{ font-size:.58rem }
}
@media (prefers-reduced-motion:reduce){ .home-core *{ animation-duration:.001ms !important; transition-duration:.001ms !important } }