/* ============================================================
   wAIser.dev — Blackwall design system
   (base adapted from Blackwall Live + site components)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
/* Design tokens live in tokens.css (loaded first). Legacy shorthand vars
   --red/--hot/--ice/--bg/--surf/--line/--mut are aliased there. */
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { background:var(--bg); color:#f4f4f5; font-family:"Space Grotesk",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:var(--red); color:#050507; }
a { color:inherit; }

/* global overlays */
#field { position:fixed; inset:0; z-index:0; pointer-events:none; }
.scanlines { position:fixed; inset:0; z-index:60; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,42,60,.06) 0 1px, transparent 1px 3px); }
.progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:80; background:linear-gradient(90deg,var(--red),var(--hot)); box-shadow:0 0 12px var(--red); }
.hud-corner { position:fixed; z-index:70; width:22px; height:22px; border:2px solid rgba(255,42,60,.5); pointer-events:none; }
.hud-corner.tl{ top:18px; left:18px; border-right:0; border-bottom:0; } .hud-corner.tr{ top:18px; right:18px; border-left:0; border-bottom:0; }
.hud-corner.bl{ bottom:18px; left:18px; border-right:0; border-top:0; } .hud-corner.br{ bottom:18px; right:18px; border-left:0; border-top:0; }

main { position:relative; z-index:2; }
.wrap { max-width:1200px; margin:0 auto; padding:0 40px; }
.mono { font-family:"Space Mono",monospace; }
.k { font-family:"Space Mono",monospace; letter-spacing:.24em; color:var(--red); font-size:12px; text-transform:uppercase; }

/* ---------- wAIser wordmark (the domain hook) ---------- */
.wm { font-family:"Chakra Petch",sans-serif; font-weight:700; letter-spacing:.02em; color:#fff; white-space:nowrap; }
.wm .ai { color:var(--red); text-shadow:0 0 16px rgba(255,42,60,.7); position:relative; }
.wm .tld { color:var(--mut); font-weight:500; }

/* nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:75; display:flex; align-items:center; justify-content:space-between;
  height:70px; box-sizing:border-box; padding:0 40px; backdrop-filter:blur(10px); background:rgba(5,5,7,.4); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.nav.solid { background:rgba(5,5,7,.9); border-color:var(--line); }
.nav .brand { display:flex; align-items:center; gap:11px; height:40px; font-size:19px; text-decoration:none; }
.nav .brand .m { width:30px; height:30px; flex:none; display:block; filter:drop-shadow(0 0 10px rgba(255,42,60,.4)); transition:filter .3s, transform .3s; }
.nav .brand:hover .m { filter:drop-shadow(0 0 16px rgba(255,42,60,.7)); transform:rotate(45deg); }
.nav .links { display:flex; align-items:center; gap:22px; font-size:13px; color:var(--mut); }
.nav .links a { text-decoration:none; transition:color .2s; } .nav .links a:hover, .nav .links a.on{ color:#fff; }
.nav .avail { display:inline-flex; align-items:center; gap:8px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.08em; color:#3ad17a; border:1px solid rgba(58,209,122,.28); padding:7px 12px; border-radius:8px; }
.nav .avail i { width:7px; height:7px; border-radius:50%; background:#3ad17a; box-shadow:0 0 8px #3ad17a; animation:dot 2s infinite; }

/* ---- language toggle: segmented pill, red active segment ---- */
.lang-toggle{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); cursor:pointer; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.06em; line-height:1; transition:border-color .2s; }
.lang-toggle:hover{ border-color:rgba(255,42,60,.45); }
.lang-toggle > span{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:5px 8px; border-radius:999px; color:var(--mut); transition:color .2s, background .2s, box-shadow .2s; }
/* hide the legacy "|" separator span (any middle span without an id/indicator class) */
.lang-toggle > span:not([id]):not([class]){ display:none; }
.lang-toggle > span.active{ color:#050507; background:var(--red); font-weight:700; box-shadow:0 0 14px rgba(255,42,60,.45); }
.lang-toggle:hover > span:not(.active){ color:#e8e8ec; }
@media (prefers-reduced-motion: reduce){ .lang-toggle, .lang-toggle > span{ transition:none; } }
@keyframes dot { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ---- mobile menu ---- */
.nav__burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.04); cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; z-index:82; }
.nav__burger span{ display:block; width:20px; height:2px; background:#f4f4f5; transition:transform .3s, opacity .2s; }
.nav__burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mnav{ position:fixed; inset:0; z-index:79; display:none; }
.mnav.open{ display:block; }
.mnav__scrim{ position:absolute; inset:0; background:rgba(3,3,5,.72); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s; }
.mnav.open .mnav__scrim{ opacity:1; }
.mnav__panel{ position:absolute; top:0; right:0; height:100%; width:min(84vw,340px); background:#0a0b0f; border-left:1px solid rgba(255,42,60,.25); box-shadow:-30px 0 80px rgba(0,0,0,.6); padding:90px 34px 40px; transform:translateX(100%); transition:transform .35s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; gap:6px; }
.mnav.open .mnav__panel{ transform:translateX(0); }
.mnav__panel a{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:22px; color:#e8e8ec; text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line); transition:color .2s, padding-left .2s; }
.mnav__panel a:hover, .mnav__panel a.on{ color:var(--red); padding-left:8px; }
.mnav__panel a.mnav__cta{ margin-top:22px; border-bottom:0; text-align:center; background:var(--red); color:#050507; border-radius:9px; padding:16px; font-family:"Space Mono",monospace; font-size:14px; letter-spacing:.06em; text-transform:uppercase; clip-path:polygon(0 0,100% 0,100% 74%,93% 100%,0 100%); }
.mnav__avail{ margin-top:auto; display:inline-flex; align-items:center; gap:9px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.08em; color:#3ad17a; }
.mnav__avail i{ width:7px; height:7px; border-radius:50%; background:#3ad17a; box-shadow:0 0 8px #3ad17a; animation:dot 2s infinite; }
body.mnav-lock{ overflow:hidden; }
@media (max-width:1024px){ .nav .links{ display:none; } .nav__burger{ display:flex; } }
@media (prefers-reduced-motion: reduce){ .mnav__panel, .mnav__scrim{ transition:none; } }

/* ============ HERO ============ */
.hero { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; padding:120px 0 90px; }
.grid3d { position:absolute; left:50%; bottom:-2vh; width:220vw; height:60vh; transform:translateX(-50%) perspective(340px) rotateX(73deg);
  transform-origin:center bottom; z-index:1; pointer-events:none;
  /* horizontal depth lines (44px apart) + vertical radial lines (64px apart) */
  background-image:linear-gradient(rgba(255,42,60,.55) 1px,transparent 1px), linear-gradient(90deg,rgba(255,42,60,.4) 1px,transparent 1px);
  background-size:64px 44px, 64px 44px; mask-image:linear-gradient(to top, #000 0%, transparent 82%); }
/* grid floor is static (no scrolling animation) */
.hero__glow { position:absolute; left:50%; bottom:-8vh; transform:translateX(-50%); width:80vw; height:40vh; z-index:1;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,42,60,.45), transparent 65%); filter:blur(30px); }
.hero__in { position:relative; z-index:3; text-align:center; padding:0 24px; max-width:1000px; }
.hero__boot { font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.18em; color:var(--red); min-height:1.4em; margin-bottom:24px; }
.hero__boot .cur { display:inline-block; width:8px; height:1em; background:var(--red); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0;} }
.hero h1 { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(30px,4.6vw,64px); line-height:1.02; letter-spacing:-.01em; color:#fff; }
.hero h1 .rip { color:var(--red); text-shadow:0 0 40px rgba(255,42,60,.5); }
.hero__wm { font-size:clamp(58px,12vw,168px); line-height:.9; margin-bottom:18px; text-shadow:0 0 30px rgba(255,42,60,.4); }
.hero__wm .ai { animation:aiflick 4s infinite; }
@keyframes aiflick { 0%,96%,100%{opacity:1;} 97%{opacity:.5;} 98%{opacity:1;} }
.hero__sub { margin:26px auto 0; max-width:600px; font-size:clamp(15px,1.8vw,19px); line-height:1.6; color:#b6b6bc; opacity:0; }
.hero__cta { margin-top:34px; display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; opacity:0; }
.btn { font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.08em; padding:14px 26px; text-decoration:none; border-radius:8px; transition:transform .2s,box-shadow .2s,border-color .2s,color .2s; display:inline-flex; align-items:center; gap:9px; }
.btn--pri { background:var(--red); color:#050507; box-shadow:0 0 30px rgba(255,42,60,.4); font-weight:700; } .btn--pri:hover{ transform:translateY(-2px); box-shadow:0 0 44px rgba(255,42,60,.65); }
.btn--sec { border:1px solid var(--line); color:#e4e4e7; } .btn--sec:hover{ border-color:var(--red); color:var(--red); }
.scrollcue { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.2em; color:var(--mut); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; }
.scrollcue .bar { width:1px; height:34px; background:linear-gradient(var(--red),transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ opacity:.3; transform:scaleY(.6);} 50%{ opacity:1; transform:scaleY(1);} }

/* ============ BRAND MOMENT — "the AI in the name" ============ */
.brand { padding:20vh 0; position:relative; text-align:center; }
.brand__wm { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(72px,17vw,260px); line-height:.86; letter-spacing:-.01em; color:#fff; position:relative; display:inline-block; }
.brand__wm .ai { color:var(--red); position:relative; text-shadow:0 0 50px rgba(255,42,60,.6); }
.brand__wm .ai::after { content:""; position:absolute; left:-6%; right:-6%; top:-8%; bottom:-8%; border:1px solid rgba(255,42,60,.5); border-radius:6px; box-shadow:0 0 30px rgba(255,42,60,.25), inset 0 0 30px rgba(255,42,60,.12); animation:reactor 3.2s ease-in-out infinite; }
@keyframes reactor { 0%,100%{ box-shadow:0 0 30px rgba(255,42,60,.22), inset 0 0 30px rgba(255,42,60,.1);} 50%{ box-shadow:0 0 52px rgba(255,42,60,.5), inset 0 0 44px rgba(255,42,60,.22);} }
.brand__cap { font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--mut); margin-top:34px; }
.brand__cap b { color:var(--hot); font-weight:400; }
.brand__line { margin:22px auto 0; max-width:620px; font-family:"Chakra Petch",sans-serif; font-weight:500; font-size:clamp(20px,2.6vw,32px); line-height:1.3; color:#e8e8ec; }
.brand__line .rip { color:var(--red); }

/* ============ SECTION HEADS ============ */
.sec-head { margin-bottom:52px; }
.sec-head h2 { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(30px,4.4vw,58px); line-height:1.02; margin-top:12px; letter-spacing:-.01em; }
.sec-head p { margin-top:16px; max-width:560px; color:var(--mut); font-size:16px; line-height:1.6; }

/* ============ STATEMENT ============ */
.statement { padding:18vh 0; }
.statement h2 { font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(28px,4.6vw,62px); line-height:1.1; letter-spacing:-.01em; }
.statement h2 .dim { color:#4a4a52; } .statement h2 .rip{ color:var(--red); }
.reveal-word { display:inline-block; overflow:hidden; vertical-align:top; }
.reveal-word > span { display:inline-block; transform:translateY(110%); }

/* ============ STATS ============ */
.stats { padding:7vh 0; border-block:1px solid var(--line); background:rgba(13,14,19,.5); }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
@media (max-width:800px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }
.stat__n { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(40px,5.5vw,76px); line-height:1; color:#fff; }
.stat__n .u { color:var(--red); }
.stat__l { font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--mut); margin-top:12px; text-transform:uppercase; }
.stat__bar { height:4px; margin-top:14px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.stat__bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--hot)); }

/* ============ SERVICES (tilt cards) ============ */
.services { padding:16vh 0 6vh; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; perspective:1200px; }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr; } }
.scard { position:relative; border:1px solid var(--line); border-radius:16px; padding:30px; background:rgba(13,14,19,.6); overflow:hidden;
  display:flex; flex-direction:column; transform-style:preserve-3d; transition:border-color .3s, box-shadow .3s; will-change:transform; min-height:340px; }
.scard__spec { position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,42,60,.16), transparent 60%); }
.scard:hover { border-color:rgba(255,42,60,.5); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.scard:hover .scard__spec { opacity:1; }
.scard__ico { width:46px; height:46px; border-radius:11px; border:1px solid rgba(255,42,60,.35); background:rgba(255,42,60,.08); display:grid; place-items:center; margin-bottom:20px; transform:translateZ(40px); }
.scard__ico svg { width:24px; height:24px; color:var(--hot); }
.scard__method { font-family:"Space Mono",monospace; font-size:12px; color:var(--hot); letter-spacing:.02em; margin-bottom:6px; transform:translateZ(30px); }
.scard__title { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:23px; color:#fff; margin-bottom:14px; transform:translateZ(30px); }
.scard__desc { font-size:14px; line-height:1.65; color:var(--mut); margin-bottom:22px; transform:translateZ(16px); }
.scard__badges { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; transform:translateZ(20px); }
.badge { font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.04em; color:#b6b6bc; border:1px solid var(--line); background:rgba(255,255,255,.03); padding:5px 10px; border-radius:6px; transition:.2s; }
.scard:hover .badge { border-color:rgba(255,42,60,.25); }
.scard--flag { border-color:rgba(255,42,60,.3); }
.scard__flag { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.08em; color:var(--red); border:1px solid rgba(255,42,60,.35); padding:5px 11px; border-radius:999px; margin-bottom:16px; transform:translateZ(30px); }

/* ============ CLIENTS marquee ============ */
.clients { padding:9vh 0; border-top:1px solid var(--line); }
.clients__lbl { text-align:center; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; margin-bottom:38px; }
.marquee { position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display:flex; align-items:center; gap:2.4rem; width:max-content; animation:scrollx 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes scrollx { to { transform:translateX(-50%); } }
.marquee img { display:block; height:66px; width:auto; max-width:190px; padding:13px 22px; background:#e8e8ec; border-radius:10px; object-fit:contain; filter:grayscale(100%); opacity:.82; transition:.3s; }
.lp { position:relative; display:inline-flex; flex:none; border-radius:10px; overflow:hidden; }
.lp:hover img { filter:none; opacity:1; }
/* AI scan beam as logo crosses viewport centre */
.lp::before { content:""; position:absolute; top:-12%; bottom:-12%; left:0; width:3px; z-index:3; pointer-events:none; opacity:0;
  background:var(--red); box-shadow:0 0 16px 3px rgba(255,42,60,.9), 0 0 4px 1px #fff; }
.lp::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:10px; opacity:0; box-shadow:inset 0 0 0 2px var(--red), 0 0 26px rgba(255,42,60,.5); }
.lp.scan::before { animation:lpBeam .8s ease-in-out; }
.lp.scan::after { animation:lpFrame .8s ease-in-out; }
.lp.scan img { filter:grayscale(0); opacity:1; }
@keyframes lpBeam { 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes lpFrame { 0%,100%{ opacity:0; } 22%,78%{ opacity:1; } }

/* ============ BREACH SEQUENCE ============ */
.breach { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; padding:14vh 0; }
.breach__stage { position:relative; width:min(880px,90vw); height:min(520px,66vh); }
.breach__mock { position:absolute; inset:0; border:1px solid var(--line); border-radius:16px; background:linear-gradient(160deg,rgba(13,14,19,.9),rgba(5,5,7,.9)); opacity:0; overflow:hidden; }
.breach__mock .bar { height:44px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 16px; }
.breach__mock .bar i { width:10px; height:10px; border-radius:50%; background:#2a2a30; } .breach__mock .bar i.r{ background:var(--red); }
.breach__mock .bar span { margin-left:auto; font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.08em; }
.breach__mock .body { padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.breach__mock .metric { border:1px solid var(--line); border-radius:10px; padding:20px; }
.breach__mock .metric .v { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:36px; color:#fff; } .breach__mock .metric .v.hot{ color:var(--red); }
.breach__mock .metric .l { font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.06em; margin-top:6px; }
.breach__ring { position:absolute; width:150px; height:150px; border:2px solid var(--red); border-radius:12px; box-shadow:0 0 30px rgba(255,42,60,.5); opacity:0; }
.breach__result { position:absolute; right:-40px; bottom:24px; width:320px; border:1px solid var(--red); border-radius:12px; padding:22px; background:rgba(13,14,19,.96); box-shadow:0 20px 60px rgba(0,0,0,.6); opacity:0; }
.breach__result .k { color:var(--red); }
.breach__result h4 { font-family:"Chakra Petch",sans-serif; font-size:18px; margin-top:8px; color:#fff; line-height:1.25; }
.breach__result p { margin-top:10px; font-size:13px; color:var(--mut); line-height:1.55; }
.breach__label { position:absolute; top:2vh; left:50%; transform:translateX(-50%); text-align:center; width:100%; }
.breach__label h2 { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,46px); margin-top:10px; }
.breach__label p { margin-top:12px; color:var(--mut); font-size:15px; }

/* ============ TILT FEED (blog) ============ */
.feed { padding:14vh 0 10vh; }
.feed__head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:44px; gap:20px; flex-wrap:wrap; }
.feed__head h2 { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,50px); }
.feed__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; perspective:1200px; }
@media (max-width:900px){ .feed__grid{ grid-template-columns:1fr; } }
.tcard { position:relative; border:1px solid var(--line); border-radius:16px; padding:28px; background:rgba(13,14,19,.6); min-height:250px;
  display:flex; flex-direction:column; transform-style:preserve-3d; transition:border-color .3s, box-shadow .3s; will-change:transform; text-decoration:none; }
.tcard__spec { position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:0; transition:opacity .2s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,42,60,.18), transparent 60%); }
.tcard:hover { border-color:rgba(255,42,60,.5); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.tcard:hover .tcard__spec { opacity:1; }
.tcard__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; transform:translateZ(30px); }
.tcard__cat { font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.08em; color:var(--hot); border:1px solid rgba(255,42,60,.3); padding:4px 9px; border-radius:5px; }
.tcard__read { font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); }
.tcard h3 { font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:20px; line-height:1.26; color:#fff; margin-bottom:12px; transform:translateZ(24px); }
.tcard p { font-size:13.5px; line-height:1.6; color:var(--mut); margin-bottom:20px; transform:translateZ(14px); }
.tcard__foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid var(--line); transform:translateZ(20px); }
.tcard__date { font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); }
.tcard__arrow { color:var(--hot); font-size:18px; transition:transform .2s; }
.tcard:hover .tcard__arrow { transform:translateX(4px); }

/* ============ CONTACT ============ */
.contact { padding:16vh 0; position:relative; text-align:center; }
.contact__term { max-width:560px; margin:40px auto 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-align:left; background:rgba(13,14,19,.8); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.contact__bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.contact__bar i { width:10px; height:10px; border-radius:50%; background:#2a2a30; } .contact__bar i.r{ background:var(--red); }
.contact__bar span { margin-left:auto; font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.06em; }
.contact__body { padding:24px; font-family:"Space Mono",monospace; font-size:13.5px; line-height:2; }
.contact__body .p { color:#3ad17a; } .contact__body .c { color:var(--mut); } .contact__body a { color:var(--hot); text-decoration:none; } .contact__body a:hover{ text-decoration:underline; }

/* two contact paths: book a call (agents/security) vs. pitch by email (custom dev) */
.contact__paths{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:40px auto 0; text-align:left; }
@media(max-width:720px){ .contact__paths{ grid-template-columns:1fr; } }
.cpath{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; padding:26px; background:rgba(13,14,19,.6); transition:border-color .25s, box-shadow .25s; }
.cpath--primary{ border-color:rgba(255,42,60,.35); background:linear-gradient(160deg, rgba(255,42,60,.06), rgba(13,14,19,.6)); }
.cpath:hover{ border-color:rgba(255,42,60,.5); box-shadow:0 24px 50px rgba(0,0,0,.45); }
.cpath__tag{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--hot); margin-bottom:16px; }
.cpath__tag i{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); }
.cpath--muted .cpath__tag{ color:var(--mut); }
.cpath--muted .cpath__tag i{ background:var(--mut); box-shadow:none; }
.cpath__t{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:20px; color:#fff; margin-bottom:8px; }
.cpath__d{ font-size:14px; line-height:1.6; color:var(--mut); margin-bottom:20px; }
.cpath__for{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--ink-700); margin-bottom:20px; }
.cpath__for b{ color:#b6b6bc; font-weight:400; }
.cpath__cta{ margin-top:auto; }
.cpath--muted .cpath__cta{ font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.04em; color:var(--hot); text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); padding:13px 20px; border-radius:8px; transition:.2s; align-self:flex-start; }
.cpath--muted:hover .cpath__cta{ border-color:var(--red); color:var(--red); }

/* ============ CTA / FOOTER ============ */
.cta-end { padding:20vh 0; text-align:center; position:relative; }
.cta-end h2 { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(38px,6.5vw,104px); line-height:.92; letter-spacing:-.02em; }
.cta-end h2 .rip{ color:var(--red); text-shadow:0 0 50px rgba(255,42,60,.5); }
.cta-end p { margin:24px auto 0; max-width:480px; color:var(--mut); font-size:16px; line-height:1.6; }
.cta-end .btn { margin-top:34px; }
.foot { padding:40px 0; border-top:1px solid var(--line); }
.foot .wrap { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-family:"Space Mono",monospace; font-size:11.5px; letter-spacing:.08em; color:var(--mut); }
.foot a { text-decoration:none; } .foot a:hover{ color:#fff; }
.foot__links { display:flex; gap:20px; }
.foot__brand { display:inline-flex; align-items:center; gap:10px; }
.foot__mark { width:22px; height:22px; flex:none; display:block; filter:drop-shadow(0 0 6px rgba(255,42,60,.3)); }

/* ============ BLOG PAGE ============ */
.blog-hero { padding:20vh 0 6vh; position:relative; text-align:center; }
.blog-hero h1 { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(44px,8vw,120px); line-height:.9; color:#fff; margin-top:16px; }
.blog-hero h1 .rip { color:var(--red); text-shadow:0 0 50px rgba(255,42,60,.5); }
.blog-hero p { margin:22px auto 0; max-width:520px; color:var(--mut); font-size:17px; line-height:1.6; }
.blog-filter { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:34px 0 2vh; }
.chip { font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.04em; color:var(--mut); border:1px solid var(--line); background:rgba(255,255,255,.03); padding:8px 15px; border-radius:999px; cursor:pointer; transition:.2s; }
.chip.on { color:#050507; background:var(--red); border-color:var(--red); }
.chip:not(.on):hover { color:#fff; border-color:rgba(255,42,60,.5); }
.blog-list { padding:4vh 0 14vh; }
.blog-list .feed__grid { perspective:1200px; }

/* ===== Cyberpunk 2077 glitch — wordmarks (chromatic slice bursts) ===== */
.gtext { position:relative; }
.gtext::before, .gtext::after { content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; }
.gtext::before { color:var(--ice); animation:gtA 3.6s infinite steps(2,end); }
.gtext::after { color:var(--red); animation:gtB 4.2s infinite steps(2,end); }
@keyframes gtA {
  0%,86%,100%{ clip-path:inset(0 0 101% 0); transform:translate(0); }
  88%{ clip-path:inset(8% 0 62% 0); transform:translate(-5px,-1px); }
  91%{ clip-path:inset(48% 0 22% 0); transform:translate(4px,1px); }
  94%{ clip-path:inset(22% 0 56% 0); transform:translate(-3px,0); }
  97%{ clip-path:inset(66% 0 8% 0); transform:translate(3px,0); }
}
@keyframes gtB {
  0%,84%,100%{ clip-path:inset(0 0 101% 0); transform:translate(0); }
  86%{ clip-path:inset(58% 0 12% 0); transform:translate(5px,1px); }
  90%{ clip-path:inset(14% 0 66% 0); transform:translate(-4px,-1px); }
  93%{ clip-path:inset(40% 0 30% 0); transform:translate(3px,0); }
  96%{ clip-path:inset(72% 0 4% 0); transform:translate(-3px,0); }
}

/* ===== Cyberpunk 2077 glitch — buttons + card titles on hover =====
   Channel-split + digital shimmy. Never clips the label, so text stays readable. */
.btn:hover:not(.living), .cmd:hover { animation:btnGlitch .45s steps(1,end) both; }
.tcard:hover h3 { animation:btnGlitch .5s steps(1,end) both; }
@keyframes btnGlitch {
  0%   { transform:translate(0);        text-shadow:none; }
  10%  { transform:translate(-2px,1px); text-shadow:-2px 0 var(--ice), 2px 0 var(--red); }
  20%  { transform:translate(2px,-1px); text-shadow:2px 0 var(--red), -2px 0 var(--ice); }
  30%  { transform:translate(-3px,0);   text-shadow:-3px 0 var(--ice), 3px 0 var(--red); }
  40%  { transform:translate(3px,1px);  text-shadow:2px 0 var(--red); }
  52%  { transform:translate(-1px,-1px);text-shadow:-1px 0 var(--ice), 1px 0 var(--red); }
  64%  { transform:translate(1px,0);    text-shadow:1px 0 var(--red); }
  100% { transform:translate(0);        text-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .gtext::before, .gtext::after{ display:none; }
  .hero__sub,.hero__cta,.scrollcue{ opacity:1 !important; }
  .reveal-word > span{ transform:none !important; }
}

/* ============================================================
   SHARED — hero slug, terminal, agent opportunity scan
   (used by index-mix + team sites)
   ============================================================ */
.hero__slug{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:clamp(18px,2.2vw,26px); letter-spacing:.01em; color:#e8e8ec; margin:2px 0 14px; }
.hero__slug .rip{ color:var(--red); }

/* terminal + split hero */
.net-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:center; position:relative; z-index:3; width:100%; max-width:1240px; margin:0 auto; padding:0 40px; }
@media(max-width:900px){ .net-grid{ grid-template-columns:1fr; gap:36px; } .net-grid .nterm{ order:2; } }
.net-left{ text-align:left; }
.net-left .hero__boot,.net-left .hero__wm,.net-left h1,.net-left .hero__sub{ text-align:left; }
.net-left .hero__wm{ font-size:clamp(52px,8vw,120px); }
.net-left h1{ margin-top:6px; }
.net-left .hero__sub{ margin-left:0; }
.net-left .hero__cta{ justify-content:flex-start; }
.cmd{ font-family:"Space Mono",monospace; font-size:14px; letter-spacing:.04em; background:var(--red); color:#050507; font-weight:700; padding:15px 24px; border-radius:8px; text-decoration:none; display:inline-flex; gap:10px; box-shadow:0 0 30px rgba(255,42,60,.4); }
.cmd .p{ opacity:.7; }
.nterm{ border:1px solid rgba(255,42,60,.3); border-radius:14px; overflow:hidden; background:rgba(8,8,11,.92); box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(255,42,60,.12); position:relative; }
.nterm::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px); }
.nterm__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(255,42,60,.22); }
.nterm__bar i{ width:11px; height:11px; border-radius:50%; background:#2a2a30; } .nterm__bar i.r{ background:var(--red); box-shadow:0 0 8px var(--red); }
.nterm__bar span{ margin-left:auto; font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.08em; }
.nterm__body{ padding:22px; font-family:"Space Mono",monospace; font-size:13.5px; line-height:1.95; min-height:320px; white-space:pre-wrap; }
.nterm__body .p{ color:var(--red); } .nterm__body .g{ color:#3ad17a; } .nterm__body .c{ color:var(--mut); } .nterm__body .w{ color:#f4f4f5; } .nterm__body .h{ color:var(--hot); }
.ncur{ display:inline-block; width:9px; height:1em; background:var(--red); vertical-align:-2px; animation:blink 1s steps(1) infinite; }

/* agent opportunity scan */
.analyze{ padding:16vh 0; position:relative; }
.az-card{ max-width:860px; margin:40px auto 0; border:1px solid rgba(255,42,60,.28); border-radius:16px; background:rgba(10,11,15,.9); overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(255,42,60,.1); position:relative; z-index:2; }
.az-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(255,42,60,.2); }
.az-bar i{ width:11px; height:11px; border-radius:50%; background:#2a2a30; } .az-bar i.r{ background:var(--red); box-shadow:0 0 8px var(--red); }
.az-bar span{ margin-left:auto; font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.08em; }
.az-body{ padding:28px; }
.az-form{ display:flex; gap:12px; align-items:stretch; }
@media(max-width:620px){ .az-form{ flex-direction:column; } }
.az-input{ flex:1; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); padding:0 16px; transition:border-color .2s, box-shadow .2s; }
.az-input:focus-within{ border-color:rgba(255,42,60,.6); box-shadow:0 0 0 3px rgba(255,42,60,.12); }
.az-input .pfx{ font-family:"Space Mono",monospace; font-size:14px; color:var(--hot); }
.az-input input{ flex:1; background:none; border:0; outline:0; color:#f4f4f5; font-family:"Space Mono",monospace; font-size:15px; padding:15px 0; }
.az-input input::placeholder{ color:#5a5d69; }
.az-run{ font-family:"Space Mono",monospace; font-size:14px; font-weight:700; letter-spacing:.04em; background:var(--red); color:#050507; border:0; border-radius:10px; padding:0 26px; cursor:pointer; box-shadow:0 0 30px rgba(255,42,60,.4); transition:transform .15s, box-shadow .2s, opacity .2s; white-space:nowrap; }
.az-run:hover{ transform:translateY(-2px); box-shadow:0 0 44px rgba(255,42,60,.6); }
.az-run:disabled{ opacity:.6; cursor:progress; transform:none; }
.az-hint{ margin-top:12px; font-size:11.5px; letter-spacing:.06em; color:var(--mut); }
.az-out{ display:none; margin-top:22px; }
.az-console{ font-family:"Space Mono",monospace; font-size:13px; line-height:1.9; white-space:pre-wrap; color:#c9ccd6; border-top:1px solid var(--line); padding-top:18px; }
.az-console .p{ color:var(--red); } .az-console .g{ color:#3ad17a; } .az-console .c{ color:var(--mut); } .az-console .h{ color:var(--hot); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.azcur{ display:inline-block; width:8px; height:1em; background:var(--red); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
.az-banner{ display:none; margin-top:20px; padding:12px 16px; border:1px solid rgba(255,90,104,.35); border-left:3px solid var(--hot); border-radius:10px; background:rgba(255,42,60,.06); font-family:"Space Grotesk",sans-serif; font-size:13px; line-height:1.55; color:#e8d7d9; }
.az-report{ display:none; margin-top:20px; }
.az-report__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.az-target{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:26px; color:#fff; margin-top:8px; word-break:break-all; }
.az-score{ text-align:center; flex:none; }
.az-score__n{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:52px; line-height:1; color:var(--red); text-shadow:0 0 26px rgba(255,42,60,.5); }
.az-score__n::after{ content:"%"; font-size:24px; color:var(--hot); }
.az-score__l{ font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.14em; color:var(--mut); margin-top:4px; }
.az-reasons{ list-style:none; margin:10px 0 0; padding:0; text-align:left; display:inline-block; }
.az-reasons li{ font-size:11px; line-height:1.6; color:var(--mut); }
.az-reasons li::before{ content:"✓ "; color:var(--red); }
.az-ops{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
@media(max-width:720px){ .az-ops{ grid-template-columns:1fr; } }
.op{ border:1px solid var(--line); border-radius:12px; padding:20px; background:rgba(255,255,255,.02); opacity:0; transform:translateY(14px); }
.op.in{ opacity:1; transform:none; transition:opacity .5s, transform .5s; }
.op__fit{ display:inline-block; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.08em; padding:4px 9px; border-radius:5px; margin-bottom:12px; }
.op__fit.hi{ color:var(--red); border:1px solid rgba(255,42,60,.4); } .op__fit.md{ color:var(--hot); border:1px solid rgba(255,90,104,.3); }
.op__t{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:17px; color:#fff; margin-bottom:8px; }
.op__d{ font-size:13px; line-height:1.55; color:var(--mut); }
.az-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line); }
.az-cta p{ font-family:"Space Grotesk",sans-serif; font-size:15px; color:#e8e8ec; max-width:44ch; }

/* ============================================================
   LIVING BUTTON — polished Cyberpunk glitch on primary CTAs
   (auto-applied to .btn--pri via upgradeLivingButtons in site.js)
   Red/white channel split + block-shear + shake + label scramble.
   Ambient surge only on hero CTA (added via .surge in JS).
   ============================================================ */
.btn--pri.living{ --lb-split-red:#7a0f16; --lb-split-wht:#ffffff;
  position:relative; overflow:hidden; isolation:isolate; border-radius:2px;
  clip-path:polygon(0 0, 100% 0, 100% 72%, 92% 100%, 0 100%);
  box-shadow:none; filter:drop-shadow(0 0 18px rgba(255,42,60,.4)); }
.btn--pri.living:hover{ transform:none; }
.btn--pri.living::before, .btn--pri.living::after{
  content:attr(data-text); position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:var(--red); font:inherit; letter-spacing:inherit; text-transform:inherit;
  opacity:0; }
.btn--pri.living::before{ color:var(--lb-split-red); }
.btn--pri.living::after{ color:var(--lb-split-wht); }
.living__shear{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:var(--red); color:var(--lb-split-red); text-shadow:2px 0 var(--lb-split-wht);
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  clip-path:polygon(0 40%, 100% 40%, 100% 66%, 0 66%); opacity:0; pointer-events:none; }
/* full commit on hover OR JS .surge */
.btn--pri.living:hover::before, .btn--pri.living.surge::before{ opacity:1; animation:living-red .9s steps(8) 1; }
.btn--pri.living:hover::after, .btn--pri.living.surge::after{ opacity:1; animation:living-wht .9s steps(8) 1; }
.btn--pri.living:hover .living__shear, .btn--pri.living.surge .living__shear{ opacity:1; animation:living-block .45s steps(4) 2; }
.btn--pri.living:hover, .btn--pri.living.surge{ animation:living-shake .45s steps(2) 2; }
@keyframes living-red{ 0%,100%{ transform:translateX(0); clip-path:inset(0); } 25%{ transform:translateX(-16px); clip-path:inset(10% 0 60% 0); } 50%{ transform:translateX(12px); clip-path:inset(45% 0 30% 0); } 75%{ transform:translateX(-9px); clip-path:inset(70% 0 5% 0); } }
@keyframes living-wht{ 0%,100%{ transform:translateX(0); clip-path:inset(0); } 25%{ transform:translateX(16px); clip-path:inset(55% 0 20% 0); } 50%{ transform:translateX(-12px); clip-path:inset(20% 0 55% 0); } 75%{ transform:translateX(9px); clip-path:inset(0 0 75% 0); } }
@keyframes living-block{ 0%,100%{ transform:translateX(0); clip-path:polygon(0 40%,100% 40%,100% 66%,0 66%); } 30%{ transform:translateX(-14px); clip-path:polygon(0 18%,100% 18%,100% 34%,0 34%); } 55%{ transform:translateX(11px); clip-path:polygon(0 58%,100% 58%,100% 82%,0 82%); } 80%{ transform:translateX(-6px); clip-path:polygon(0 30%,100% 30%,100% 50%,0 50%); } }
@keyframes living-shake{ 0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-4px,2px); } 40%{ transform:translate(5px,-2px); } 60%{ transform:translate(-3px,-1px); } 80%{ transform:translate(3px,2px); } }
@media (prefers-reduced-motion: reduce){
  .btn--pri.living::before, .btn--pri.living::after, .btn--pri.living .living__shear{ animation:none !important; opacity:0 !important; }
}

/* ===== Blog cards: laser-grid scan (replaces 3D tilt bend) ===== */
.feed__grid, .blog-list .feed__grid{ perspective:none; }
.tcard{ transform:none !important; }
.tcard:hover{ transform:translateY(-4px) !important; }
.tcard__grid{ position:absolute; inset:0; border-radius:16px; overflow:hidden; opacity:0; transition:opacity .35s; pointer-events:none; z-index:0; }
.tcard:hover .tcard__grid{ opacity:1; }
.tcard__grid::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,42,60,.28) 1px,transparent 1px), linear-gradient(90deg,rgba(255,42,60,.28) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 82%);
  mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 82%); }
.tcard__grid::after{ content:""; position:absolute; left:-2%; right:-2%; height:2px; top:-40px;
  background:linear-gradient(90deg, transparent, rgba(255,90,104,.95), transparent);
  box-shadow:0 0 18px 3px rgba(255,42,60,.7); }
.tcard:hover .tcard__grid::after{ animation:tScan 1.9s linear infinite; }
@keyframes tScan{ 0%{ top:-40px; } 100%{ top:100%; } }
.tcard > *:not(.tcard__grid){ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .tcard:hover .tcard__grid::after{ animation:none; } }

/* ============================================================
   ARTICLE PAGE — single blog post
   ============================================================ */
.art-hero{ padding:20vh 0 5vh; position:relative; }
.art-hero__in{ max-width:820px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.art-back{ display:inline-flex; align-items:center; gap:9px; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--mut); text-decoration:none; margin-bottom:30px; transition:color .2s, gap .2s; }
.art-back:hover{ color:var(--red); gap:13px; }
.art-cat{ display:inline-block; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--hot); border:1px solid rgba(255,42,60,.35); padding:5px 12px; border-radius:6px; }
.art-title{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(30px,5vw,58px); line-height:1.05; letter-spacing:-.015em; color:#fff; margin:22px 0 0; }
.art-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.04em; color:var(--mut); }
.art-meta .who{ display:flex; align-items:center; gap:10px; color:#e8e8ec; }
.art-meta .who .av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--red),#8f0d18); display:grid; place-items:center; font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:13px; color:#fff; box-shadow:0 0 14px rgba(255,42,60,.4); }
.art-meta .sep{ color:#3a3a42; }
.art-hr{ max-width:820px; margin:36px auto 0; padding:0 40px; }
.art-hr div{ height:1px; background:linear-gradient(90deg, transparent, rgba(255,42,60,.5), transparent); }

.art-body{ max-width:720px; margin:0 auto; padding:6vh 40px 4vh; position:relative; z-index:2; }
.art-body .lead{ font-family:"Space Grotesk",sans-serif; font-size:clamp(18px,2.2vw,22px); line-height:1.6; color:#e2e2e6; font-weight:400; margin-bottom:34px; }
.art-body h2{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(22px,2.8vw,32px); color:#fff; letter-spacing:-.01em; margin:48px 0 16px; }
.art-body h2 .rip{ color:var(--red); }
.art-body h3{ font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:20px; color:#f0f0f2; margin:32px 0 12px; }
.art-body p{ font-size:16.5px; line-height:1.78; color:#b6b6bc; margin-bottom:20px; }
.art-body a.inline{ color:var(--hot); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,90,104,.4); }
.art-body strong{ color:#e8e8ec; font-weight:600; }
.art-body ul{ margin:0 0 22px; padding:0; list-style:none; }
.art-body li{ position:relative; padding-left:26px; margin-bottom:12px; font-size:16px; line-height:1.7; color:#b6b6bc; }
.art-body li::before{ content:"▸"; position:absolute; left:0; top:0; color:var(--red); }
.art-body blockquote{ margin:36px 0; padding:22px 26px; border-left:3px solid var(--red); background:linear-gradient(90deg, rgba(255,42,60,.06), transparent); font-family:"Chakra Petch",sans-serif; font-weight:500; font-size:clamp(19px,2.4vw,26px); line-height:1.35; color:#f0f0f2; }
.art-body pre{ margin:28px 0; border:1px solid rgba(255,42,60,.25); border-radius:12px; overflow:hidden; background:rgba(8,8,11,.9); }
.art-body pre .bar{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid rgba(255,42,60,.2); }
.art-body pre .bar i{ width:10px; height:10px; border-radius:50%; background:#2a2a30; } .art-body pre .bar i.r{ background:var(--red); box-shadow:0 0 8px var(--red); }
.art-body pre .bar span{ margin-left:auto; font-family:"Space Mono",monospace; font-size:11px; color:var(--mut); letter-spacing:.06em; }
.art-body pre code{ display:block; padding:18px 20px; font-family:"Space Mono",monospace; font-size:13px; line-height:1.9; color:#c9ccd6; white-space:pre-wrap; }
.art-body pre code .p{ color:var(--red); } .art-body pre code .g{ color:#3ad17a; } .art-body pre code .c{ color:var(--mut); } .art-body pre code .h{ color:var(--hot); }
.art-callout{ margin:34px 0; border:1px solid rgba(255,42,60,.3); border-radius:12px; padding:22px 24px; background:rgba(13,14,19,.6); }
.art-callout .k{ margin-bottom:10px; }
.art-callout p{ margin:0; color:#d4d4d8; }

.art-share{ max-width:720px; margin:0 auto; padding:2vh 40px 6vh; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); }
.art-share__who{ display:flex; align-items:center; gap:14px; }
.art-share__who .av{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--red),#8f0d18); display:grid; place-items:center; font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:18px; color:#fff; flex:none; box-shadow:0 0 16px rgba(255,42,60,.4); }
.art-share__who b{ font-family:"Chakra Petch",sans-serif; font-size:15px; color:#fff; display:block; }
.art-share__who span{ font-family:"Space Mono",monospace; font-size:11.5px; color:var(--mut); letter-spacing:.04em; }
.art-more{ padding:8vh 0 4vh; border-top:1px solid var(--line); }
.art-more .wrap{ max-width:1120px; }
.art-more__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px; }
.art-more__head h2{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(24px,3vw,38px); }
.art-more__head a{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--hot); text-decoration:none; }
.art-more__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .art-more__grid{ grid-template-columns:1fr; } }