/* ============================================================
   L-O.PRO BETA — Atelier System
   Pure CSS. No framework. No build.
   ============================================================ */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;font-family:var(--sans);background:var(--bg-0);color:var(--ink);line-height:1.5;overflow-x:hidden;cursor:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--p);color:#fff}

/* ---- Design tokens ---- */
:root{
  /* Type stack — variable + monospace */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --serif:'Fraunces','Times New Roman',Georgia,serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  /* Surfaces */
  --bg-0:#04040a;
  --bg-1:#080612;
  --bg-2:#0e0a1c;
  --bg-3:#15102a;
  --panel:rgba(255,255,255,0.025);
  --panel-2:rgba(255,255,255,0.045);
  --line:rgba(255,255,255,0.06);
  --line-2:rgba(255,255,255,0.12);

  /* Ink */
  --ink:#FAFAFA;
  --ink-2:rgba(250,250,250,0.62);
  --ink-3:rgba(250,250,250,0.32);
  --ink-4:rgba(250,250,250,0.14);

  /* Accent — overridden per-page via inline style on :root */
  --p:#7C3AED;
  --pb:#A78BFA;
  --pl:#5B21B6;
  --pk:#EC4899;
  --acc:#E5FF52;
  --good:#34D399;
  --warn:#FBBF24;
  --bad:#F87171;

  /* Spacing */
  --gut:max(20px,4vw);

  /* Radii */
  --r-1:6px;
  --r-2:12px;
  --r-3:20px;
  --r-4:32px;

  /* Easings */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-elastic:cubic-bezier(.34,1.56,.64,1);
}

/* ---- Type helpers ---- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif);font-style:italic}
.tiny{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--p);display:inline-flex;align-items:center;gap:8px}
.kicker::before{content:'';display:inline-block;width:18px;height:1px;background:currentColor}

/* ---- Custom cursor ---- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;will-change:transform;mix-blend-mode:difference}
.cursor-dot{width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor-ring{width:44px;height:44px;border:1px solid rgba(255,255,255,0.55);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s var(--ease-out),height .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out)}
.cursor-ring.hover{width:62px;height:62px;background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0)}
.cursor-ring.text{width:4px;height:32px;border-radius:2px;background:#fff;border-color:transparent}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}body{cursor:auto}}

/* ---- Noise + Grain overlay ---- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>")}

/* ---- Mesh background (animated gradient mesh) ---- */
.mesh{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg-0)}
.mesh::before,.mesh::after{content:'';position:absolute;border-radius:50%;filter:blur(120px);opacity:.4;will-change:transform}
.mesh::before{width:60vmax;height:60vmax;top:-20vmax;left:-10vmax;background:radial-gradient(circle,var(--p),transparent 60%);animation:meshA 28s ease-in-out infinite alternate}
.mesh::after{width:55vmax;height:55vmax;bottom:-25vmax;right:-15vmax;background:radial-gradient(circle,var(--pk),transparent 60%);animation:meshB 36s ease-in-out infinite alternate}
@keyframes meshA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(20vw,15vh) scale(1.3)}100%{transform:translate(-10vw,30vh) scale(.9)}}
@keyframes meshB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-15vw,-20vh) scale(1.2)}100%{transform:translate(10vw,-10vh) scale(.85)}}

/* ---- Canvas Plasma layer ---- */
canvas#plasma{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ---- Scanline texture (very subtle) ---- */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9991;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(255,255,255,.012) 3px,transparent 4px);opacity:.6}

/* ---- Reduce motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .mesh::before,.mesh::after{animation:none}
  canvas#plasma{display:none}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{position:relative;z-index:1}
section{position:relative;padding:clamp(80px,12vh,160px) var(--gut)}
.wrap{max-width:1440px;margin-inline:auto;width:100%}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);width:100%}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);background:linear-gradient(180deg,rgba(4,4,10,.65),transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .4s var(--ease-out)}
.topbar.hidden{transform:translateY(-100%)}
.brand{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 12px var(--good);animation:beat 2.4s ease infinite;align-self:center;margin-right:2px}
@keyframes beat{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.brand b{color:var(--ink);font-weight:700}
.brand i{font-style:normal;color:var(--ink-3);font-weight:400;font-size:11px}
.top-nav{display:flex;align-items:center;gap:6px}
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.lang-toggle button{padding:6px 12px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);transition:color .25s,background .25s}
.lang-toggle button.is-active{background:var(--ink);color:var(--bg-0)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);transition:color .25s,border-color .25s}
.menu-btn:hover{color:var(--ink);border-color:var(--line-2)}
.menu-btn::before{content:'';width:14px;height:1px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor}

/* ---- Overlay Menu ---- */
.menu-overlay{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;padding:calc(60px + var(--gut)) var(--gut) var(--gut);background:radial-gradient(80% 80% at 50% 0%,rgba(124,58,237,.16),transparent 70%),var(--bg-0);opacity:0;visibility:hidden;transition:opacity .5s var(--ease-out),visibility .5s}
.menu-overlay.is-open{opacity:1;visibility:visible}
.menu-overlay .menu-close{position:absolute;top:18px;right:var(--gut);padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;flex:1;align-content:center;max-width:1100px;margin:auto;width:100%}
.menu-grid a{display:flex;align-items:center;gap:18px;padding:22px 8px;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:clamp(28px,4.5vw,56px);font-weight:400;color:var(--ink);letter-spacing:-.02em;transition:color .3s,padding .35s var(--ease-out);position:relative}
.menu-grid a:last-child,.menu-grid a:nth-last-child(2){border-bottom:1px solid var(--line)}
.menu-grid a span.num{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--ink-3);letter-spacing:.15em;width:34px}
.menu-grid a span.arr{margin-left:auto;font-family:var(--mono);font-style:normal;font-size:18px;color:var(--ink-3);transform:translateX(0);transition:transform .35s var(--ease-out),color .3s}
.menu-grid a:hover{color:var(--p);padding-left:24px}
.menu-grid a:hover span.arr{transform:translateX(8px);color:var(--p)}
.menu-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;padding-top:18px;border-top:1px solid var(--line);margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
@media(max-width:720px){
  .menu-grid{grid-template-columns:1fr}
  .menu-grid a{padding:16px 4px;font-size:clamp(22px,7vw,32px)}
}

/* ============================================================
   HERO
   ============================================================ */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(110px,14vh,180px);padding-bottom:clamp(40px,6vh,80px);overflow:hidden}
.hero-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.hero-head .meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;max-width:260px;line-height:1.7}
.hero-head .meta b{color:var(--ink);font-weight:600;display:block;margin-bottom:6px}

.hero-title{font-family:var(--sans);font-weight:900;font-size:clamp(56px,13.5vw,260px);line-height:.86;letter-spacing:-.045em;color:var(--ink);margin:clamp(24px,5vh,56px) 0;text-wrap:balance}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .ln span{display:inline-block;will-change:transform,opacity}
.hero-title .serif-line{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.hero-title .grad{background:linear-gradient(96deg,var(--p) 0%,var(--pk) 50%,var(--pb) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gShift 9s ease-in-out infinite}
@keyframes gShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-sub{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.hero-sub p{font-family:var(--sans);font-weight:300;font-size:clamp(16px,1.5vw,22px);max-width:520px;line-height:1.45;color:var(--ink-2)}
.hero-sub p strong{color:var(--ink);font-weight:500}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:transform .35s var(--ease-out),background .3s,color .3s,border-color .3s;will-change:transform}
.btn .ico{width:8px;height:8px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease-out)}
.btn:hover .ico{transform:rotate(45deg) translate(3px,-3px)}
.btn-primary{background:var(--ink);color:var(--bg-0)}
.btn-primary:hover{background:var(--p);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.btn[data-magnetic]{transition:transform .15s var(--ease-out),background .3s,color .3s,border-color .3s}

.hero-foot{margin-top:clamp(36px,7vh,80px);display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);flex-wrap:wrap}
.scroll-hint{display:inline-flex;align-items:center;gap:10px}
.scroll-hint::after{content:'';width:32px;height:1px;background:linear-gradient(90deg,var(--ink-3),transparent);position:relative;overflow:hidden}
.scroll-hint .line{display:inline-block;width:30px;height:1px;background:linear-gradient(90deg,var(--p),transparent);position:relative}
.scroll-hint .line::after{content:'';position:absolute;left:-30px;top:0;width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--ink),transparent);animation:run 2.4s linear infinite}
@keyframes run{0%{left:-30px}100%{left:60px}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{position:relative;display:flex;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;gap:48px;flex-shrink:0;padding-right:48px;animation:scrollMarquee 28s linear infinite;will-change:transform;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(32px,4.5vw,72px);letter-spacing:-.02em;color:var(--ink-2)}
.marquee-track .star{color:var(--p);font-style:normal;font-family:var(--sans);font-weight:300}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(48px,7vh,96px)}
.sec-head .lhs{max-width:780px}
.sec-head h2{font-family:var(--sans);font-weight:800;font-size:clamp(38px,6vw,96px);line-height:.95;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.sec-head h2 .serif{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink-2)}
.sec-head .lede{margin-top:18px;max-width:560px;font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.2vw,18px);color:var(--ink-2);line-height:1.55}
.sec-head .rhs{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.18em;text-transform:uppercase;text-align:right;line-height:1.7}
.sec-head .rhs b{color:var(--p);font-weight:600;letter-spacing:.16em;display:block}

/* ============================================================
   BENTO — What we do
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);padding:32px;overflow:hidden;min-height:240px;transform-style:preserve-3d;transition:border-color .4s var(--ease-out),background .4s}
.tile::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 40%);opacity:0;transition:opacity .35s;pointer-events:none}
.tile:hover{border-color:var(--line-2);background:var(--panel-2)}
.tile:hover::before{opacity:1}
.tile .label{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase;margin-bottom:auto}
.tile h3{font-family:var(--sans);font-weight:600;font-size:clamp(20px,2vw,30px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-top:auto}
.tile h3 .serif{font-family:var(--serif);font-style:italic;font-weight:300}
.tile p{margin-top:14px;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:380px}
.tile .ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:8px;filter:saturate(1.2)}
.tile.span-7{grid-column:span 7}
.tile.span-5{grid-column:span 5}
.tile.span-4{grid-column:span 4}
.tile.span-8{grid-column:span 8}
.tile.span-6{grid-column:span 6}
.tile.span-12{grid-column:span 12}
.tile.tall{min-height:340px}
.tile.feat{background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),radial-gradient(120% 80% at 0% 100%,color-mix(in srgb,var(--p) 28%,transparent),transparent 70%)}
.tile.feat .ic{color:var(--p)}
.tile a.tile-link{position:absolute;inset:0;z-index:2}
@media(max-width:900px){
  .tile.span-7,.tile.span-5,.tile.span-4,.tile.span-8,.tile.span-6,.tile.span-12{grid-column:span 12}
}

/* ============================================================
   ECOSYSTEM (SVG Network)
   ============================================================ */
.eco{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eco-canvas{position:relative;aspect-ratio:1/1;min-height:340px;border:1px solid var(--line);border-radius:var(--r-4);background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.03),transparent 70%);overflow:hidden}
.eco-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.eco-canvas .pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px rgba(124,58,237,.16),0 0 24px var(--p);transform:translate(-50%,-50%);cursor:pointer;transition:transform .3s var(--ease-elastic)}
.eco-canvas .pin:hover{transform:translate(-50%,-50%) scale(1.4)}
.eco-canvas .pin.center{background:var(--ink);box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 32px rgba(255,255,255,.5)}
.eco-canvas .lbl{position:absolute;transform:translate(-50%,calc(-50% - 26px));font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.eco-list{display:flex;flex-direction:column;gap:4px}
.eco-row{display:flex;align-items:flex-start;gap:18px;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease-out)}
.eco-row:first-child{border-top:1px solid var(--line)}
.eco-row:hover{padding-left:14px}
.eco-row .ic{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;font-size:18px;flex-shrink:0}
.eco-row .ctx{flex:1}
.eco-row h4{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:4px;display:flex;align-items:baseline;gap:10px}
.eco-row h4 small{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--good)}
.eco-row p{font-size:13px;color:var(--ink-2);line-height:1.55}
.eco-row .arr{margin-left:8px;font-family:var(--mono);font-size:13px;color:var(--ink-3);align-self:center;transition:transform .3s,color .3s}
.eco-row:hover .arr{color:var(--p);transform:translateX(6px)}
@media(max-width:880px){
  .eco{grid-template-columns:1fr}
  .eco-canvas{aspect-ratio:auto;min-height:280px}
}

/* ============================================================
   TERMINAL
   ============================================================ */
.term{position:relative;max-width:920px;margin:0 auto;background:linear-gradient(150deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--line-2);border-radius:var(--r-3);overflow:hidden;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 60px 120px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset}
.term::before{content:'';position:absolute;top:0;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,var(--p),transparent);opacity:.6}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--line)}
.term-dot{width:11px;height:11px;border-radius:50%}
.tr{background:#FF5F57}.ty{background:#FEBC2E}.tg{background:#28C840}
.term-bar .ti{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.term-body{padding:24px 28px;font-family:var(--mono);font-size:13px;line-height:2;color:var(--ink-2);min-height:380px;max-height:520px;overflow:auto}
.term-body::-webkit-scrollbar{width:6px}
.term-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.term-body .cmd{color:var(--p)}
.term-body .out{color:var(--ink-2)}
.term-body .ok{color:var(--good)}
.term-body .warn{color:var(--warn)}
.term-body .bad{color:var(--bad)}
.term-body .hl{color:var(--ink);font-weight:700}
.term-body .dim{color:var(--ink-3)}
.term-body .row{display:block;opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease-out),transform .35s var(--ease-out)}
.term-body .row.on{opacity:1;transform:translateY(0)}
.term-cursor{display:inline-block;width:8px;height:1em;background:var(--p);vertical-align:text-bottom;margin-left:2px;animation:tBlink 1.05s steps(2) infinite}
@keyframes tBlink{50%{opacity:0}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.mani{text-align:left;max-width:1180px;margin-inline:auto;position:relative}
.mani-lead{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--p);display:inline-flex;align-items:center;gap:10px;margin-bottom:32px}
.mani-lead::before{content:'';width:24px;height:1px;background:currentColor}
.mani-text{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,5.4vw,84px);line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
.mani-text strong{font-family:var(--sans);font-style:normal;font-weight:600;background:linear-gradient(96deg,var(--p),var(--pk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mani-text em{font-style:italic;color:var(--p)}
.mani-text span.wrd{display:inline-block;will-change:transform,opacity;transition:opacity .35s,transform .55s var(--ease-out)}

/* ============================================================
   SERVICES GRID (10 services on Home / similar on subpages)
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.svc{position:relative;grid-column:span 2;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);padding:22px 20px;color:var(--ink);transition:transform .45s var(--ease-out),background .35s,border-color .35s;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-height:200px}
.svc::before{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--p),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.svc:hover{transform:translateY(-4px);background:var(--panel-2);border-color:var(--line-2)}
.svc:hover::before{transform:scaleX(1)}
.svc .n{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.18em}
.svc .ic{font-size:22px;margin-top:auto}
.svc h4{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.svc .tag{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase}
.svc.featured{grid-column:span 4;background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),radial-gradient(80% 80% at 0% 100%,color-mix(in srgb,var(--p) 22%,transparent),transparent 70%)}
@media(max-width:1200px){
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .svc,.svc.featured{grid-column:span 2}
}
@media(max-width:640px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc,.svc.featured{grid-column:span 1;min-height:160px}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:42px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:relative}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--sans);font-weight:800;font-size:clamp(40px,5.6vw,84px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .v.grad{background:linear-gradient(180deg,var(--ink),var(--p));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.stat .l b{display:block;color:var(--ink-2);font-weight:400;text-transform:none;letter-spacing:.02em;margin-top:6px;font-family:var(--sans);font-size:13px;line-height:1.4}
@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}

/* ============================================================
   FEATURE NODES (subpage 4-card grid)
   ============================================================ */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feat{position:relative;padding:28px 24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;transition:transform .45s var(--ease-out),border-color .35s,background .35s;display:flex;flex-direction:column;gap:14px;min-height:240px}
.feat::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--p),transparent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.feat:hover{transform:translateY(-5px);background:var(--panel-2);border-color:var(--line-2)}
.feat:hover::after{transform:scaleX(1)}
.feat .ic{font-size:28px;color:var(--p);filter:saturate(1.2)}
.feat h4{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.2}
.feat p{font-size:13px;color:var(--ink-2);line-height:1.6;margin-top:auto}
@media(max-width:1100px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feats{grid-template-columns:1fr}}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta{position:relative;text-align:center;padding-block:clamp(120px,18vh,200px);overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--p) 18%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.cta h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(44px,8vw,140px);line-height:.95;letter-spacing:-.02em;text-wrap:balance;color:var(--ink);max-width:1100px;margin-inline:auto}
.cta h2 .grad{background:linear-gradient(96deg,var(--p),var(--pk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}
.cta p{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.3vw,19px);color:var(--ink-2);max-width:600px;margin:28px auto 40px;line-height:1.55}
.cta .btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta .btn{padding:18px 32px;font-size:13px}
.cta .meta{margin-top:24px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase}

/* WhatsApp button accent */
.btn-wa{background:#25D366;color:#06160a;border:0}
.btn-wa:hover{background:#1ebe5d;color:#06160a}
.btn-wa::before{content:'';width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%2306160a'><path d='M16 .4C7.4.4.4 7.4.4 16c0 2.8.7 5.5 2.1 7.9L0 32l8.4-2.4c2.3 1.3 4.9 1.9 7.6 1.9C24.6 31.6 31.6 24.6 31.6 16S24.6.4 16 .4zm8.7 22c-.4 1.1-2.1 2-3 2.1-.8.1-1.7.1-2.7-.2-.6-.2-1.4-.5-2.4-.9-4.2-1.8-6.9-6.1-7.1-6.4-.2-.3-1.7-2.2-1.7-4.3 0-2 1.1-3 1.5-3.4.4-.4.9-.5 1.2-.5h.8c.3 0 .6.1.9.6.4.7 1 2.4 1.1 2.6.1.2.1.4.1.6-.1.2-.2.3-.4.6-.2.2-.4.5-.6.7-.2.2-.4.4-.2.7.3.5 1.2 2 2.5 3.1 1.8 1.5 3.2 2 3.7 2.2.5.2.7.2 1-.1.3-.3 1.2-1.4 1.5-1.9.3-.5.6-.4 1-.2.4.2 2.4 1.1 2.8 1.3.4.2.7.3.8.5.1.2.1 1-.3 2.1z'/></svg>") center/contain no-repeat;display:inline-block}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:60px var(--gut) 32px;border-top:1px solid var(--line);position:relative;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer h5{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer ul a{font-family:var(--sans);font-size:14px;color:var(--ink-2);transition:color .25s;display:inline-flex;align-items:center;gap:6px}
.footer ul a:hover{color:var(--ink)}
.footer ul a small{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.1em}
.footer .signature{font-family:var(--serif);font-style:italic;font-weight:300;font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);max-width:340px}
.footer .signature small{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}
.footer-bottom .clock{display:inline-flex;align-items:center;gap:8px}
.footer-bottom .clock::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);animation:beat 2.4s ease infinite}
@media(max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer .signature{font-size:24px}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;background:var(--bg-0);transform:translateY(100%);transition:transform .65s var(--ease-in-out)}
.page-wipe.is-leaving{transform:translateY(0)}
.page-wipe.is-entering{transform:translateY(-100%);transition:none}

/* ============================================================
   CONSENT
   ============================================================ */
.consent{position:fixed;bottom:18px;left:18px;right:18px;z-index:200;max-width:520px;margin-inline:auto;background:rgba(8,6,18,.92);border:1px solid var(--line-2);border-radius:var(--r-2);padding:16px 18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:13px;color:var(--ink-2);transform:translateY(calc(100% + 30px));transition:transform .6s var(--ease-out) .6s}
.consent.is-visible{transform:translateY(0)}
.consent.is-hidden{display:none}
.consent p{flex:1;min-width:200px;line-height:1.45}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.consent .row{display:flex;gap:8px;flex-shrink:0}
.consent button{padding:8px 14px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.consent .ok{background:var(--ink);color:var(--bg-0)}
.consent .ok:hover{background:var(--p);color:#fff}
.consent .no{color:var(--ink-2);border:1px solid var(--line-2)}
.consent .no:hover{color:var(--ink);border-color:var(--ink)}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.dly-1{transition-delay:.08s}
.reveal.dly-2{transition-delay:.16s}
.reveal.dly-3{transition-delay:.24s}
.reveal.dly-4{transition-delay:.32s}

/* ============================================================
   UTIL
   ============================================================ */
.hide-mobile{}
@media(max-width:720px){.hide-mobile{display:none!important}}
.col{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Smooth scroll progress bar */
.scroll-bar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--p),var(--pk));z-index:99;will-change:width;box-shadow:0 0 14px var(--p)}

/* Hover scramble */
.scramble{cursor:none}