/* ==========================================================
   Next Key Tech — v2 "future interface"
   Brand: navy #000F1E · red #FF4438 · text #CDCDCD
   ========================================================== */
:root {
  --navy: #000f1e;
  --navy-2: #041a30;
  --red: #ff4438;
  --red-2: #ff7a45;
  --white: #fff;
  --text: #cdcdcd;
  --dim: #8396ab;
  --line: rgba(168, 211, 255, .12);
  --glass: rgba(6, 24, 44, .42);
  --glass-hi: rgba(255, 255, 255, .06);
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--navy); color: var(--text);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }
body.is-booting { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); color: var(--white); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
p { margin: 0; }
em { font-style: normal; color: var(--red); }
svg { display: block; }
::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.tag { color: var(--red); margin-bottom: 26px; display: inline-block; }
.tag--dark { color: var(--navy); }
.sect { position: relative; padding: 150px 0; }
.h2 { font-size: clamp(2rem, 4.6vw, 4rem); }
.head { margin-bottom: 70px; max-width: 880px; }
.head__p { margin-top: 24px; max-width: 560px; color: var(--dim); }
.head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; max-width: none; }

/* split helpers */
.ch { display: inline-block; will-change: transform; }
.wd { display: inline-block; white-space: nowrap; }
.h2 .wd, .cpanel__title .wd { overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }

/* ---------------- Background ---------------- */
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; display: block; }
html.no-webgl #bg { display: none; }
html.no-webgl body { background: radial-gradient(ellipse at 70% 20%, rgba(255, 68, 56, .25), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(60, 120, 255, .15), transparent 50%), var(--navy); background-attachment: fixed; }
.noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px; mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); opacity: .25; }

/* ---------------- Cursor ---------------- */
.cur, .cur-dot { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; opacity: 0; }
.cur { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); display: grid; place-items: center; mix-blend-mode: difference; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s, border-color .3s; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.cur__label { font-family: var(--mono); font-size: .7rem; color: var(--navy); opacity: 0; transition: opacity .2s; text-transform: uppercase; }
body.c-hover .cur { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: #fff; border-color: #fff; }
body.c-view .cur { width: 100px; height: 100px; margin: -50px 0 0 -50px; background: #fff; border-color: #fff; mix-blend-mode: normal; }
body.c-view .cur__label { opacity: 1; }
@media (hover: none), (max-width: 900px) { .cur, .cur-dot { display: none; } }

/* ---------------- HUD ---------------- */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.hud__rail { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.hud__rail li { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.hud__rail i { width: 14px; height: 1px; background: var(--dim); transition: width .5s var(--ease), background .3s; }
.hud__rail span { opacity: 0; transform: translateX(-6px); transition: .4s var(--ease); }
.hud__rail li.is-on { color: #fff; }
.hud__rail li.is-on i { width: 34px; background: var(--red); box-shadow: 0 0 10px var(--red); }
.hud__rail li.is-on span { opacity: 1; transform: none; }
.hud__meta { position: absolute; right: 28px; bottom: 26px; display: grid; gap: 4px; text-align: right; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--dim); }
.hud__meta b { color: #fff; font-weight: 500; }
@media (max-width: 1599px) { .hud__rail span { display: none; } }
@media (max-width: 1439px) { .hud__meta { display: none; } }
@media (max-height: 760px) and (min-width: 901px) {
  .process__count { font-size: clamp(3.4rem, 7vw, 6rem); margin-top: 14px; }
  .process .tag { margin-bottom: 14px; }
  .pstep { padding: 34px; }
}
@media (max-width: 1100px) { .hud { display: none; } }

/* ---------------- Buttons ---------------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border-radius: 14px; font-family: var(--display); font-size: .82rem; font-weight: 500; letter-spacing: .01em; overflow: hidden; isolation: isolate; white-space: nowrap; transition: color .4s var(--ease), box-shadow .4s, border-color .4s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; clip-path: circle(0% at var(--bx, 50%) var(--by, 50%)); transition: clip-path .6s var(--ease); }
.btn:hover::after { clip-path: circle(150% at var(--bx, 50%) var(--by, 50%)); }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 12px 40px -10px rgba(255, 68, 56, .7); }
.btn--red:hover { color: var(--navy); }
.btn--glass { background: var(--glass-hi); border: 1px solid var(--line); color: #fff; backdrop-filter: blur(14px); }
.btn--glass:hover { color: var(--navy); }
.btn--dark { background: var(--navy); color: #fff; justify-content: center; }
.btn--dark::after { background: #fff; }
.btn--dark:hover { color: var(--navy); }
.btn--sm { padding: 11px 18px; border-radius: 11px; font-size: .74rem; }

/* ---------------- Nav ---------------- */
.nav { position: fixed; top: 18px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 0 20px; transition: transform .6s var(--ease); }
.nav.is-hidden { transform: translateY(-140%); }
.nav__pill { display: flex; align-items: center; gap: 30px; width: 100%; max-width: 1100px; padding: 10px 10px 10px 22px; border-radius: 18px; background: rgba(0, 15, 30, .45); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8); }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__links a { display: inline-flex; align-items: center; height: 40px; font-family: var(--body); font-size: .95rem; font-weight: 500; line-height: 1; color: var(--dim); transition: color .3s; }
.nav__links a:hover, .nav__links a.is-on { color: #fff; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); font-family: var(--body); font-size: .82rem; font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; }
.status i, .foot__status i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); position: relative; margin-left: auto; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: #fff; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
body.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
body.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }
.mmenu { position: fixed; inset: 0; z-index: 90; background: rgba(0, 15, 30, .92); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; padding: 110px 28px 40px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
body.menu-open .mmenu { opacity: 1; visibility: visible; }
.mmenu nav a { display: flex; align-items: baseline; gap: 14px; font-family: var(--display); font-size: clamp(1.8rem, 8vw, 2.6rem); color: #fff; padding: 6px 0; border-bottom: 1px solid var(--line); transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.mmenu nav a small { font-family: var(--mono); font-size: .75rem; color: var(--red); }
body.menu-open .mmenu nav a { transform: none; opacity: 1; }
body.menu-open .mmenu nav a:nth-child(2) { transition-delay: .05s; }
body.menu-open .mmenu nav a:nth-child(3) { transition-delay: .1s; }
body.menu-open .mmenu nav a:nth-child(4) { transition-delay: .15s; }
body.menu-open .mmenu nav a:nth-child(5) { transition-delay: .2s; }
body.menu-open .mmenu nav a:nth-child(6) { transition-delay: .25s; }
.mmenu__foot { margin-top: 36px; display: grid; gap: 6px; color: var(--dim); word-break: break-all; text-transform: none; }

/* ---------------- Hero ---------------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 150px 0 60px; }
.hero__frame i { position: absolute; width: 22px; height: 22px; border-color: rgba(255, 255, 255, .35); border-style: solid; border-width: 0; }
.hero__frame i:nth-child(1) { top: 100px; left: 24px; border-top-width: 1px; border-left-width: 1px; }
.hero__frame i:nth-child(2) { top: 100px; right: 24px; border-top-width: 1px; border-right-width: 1px; }
.hero__frame i:nth-child(3) { bottom: 24px; left: 24px; border-bottom-width: 1px; border-left-width: 1px; }
.hero__frame i:nth-child(4) { bottom: 24px; right: 24px; border-bottom-width: 1px; border-right-width: 1px; }
.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__title { font-size: clamp(2.1rem, 5.6vw, 5.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.hero__title .line { display: block; overflow: hidden; padding: 0 .05em .06em; }
.hero__title em { background: linear-gradient(95deg, var(--red), var(--red-2) 55%, #ffc2a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title em .ch { -webkit-text-fill-color: currentColor; }
.caret { display: inline-block; width: .08em; height: .82em; margin-left: .08em; background: var(--red); vertical-align: -.04em; animation: caret 1s steps(1) infinite; box-shadow: 0 0 18px var(--red); }
@keyframes caret { 50% { opacity: 0; } }
.hero__sub { max-width: 640px; margin: 34px auto 0; font-size: 1.08rem; color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 80px; }
.tile { position: relative; padding: 22px 24px 24px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); overflow: hidden; transition: border-color .4s, transform .5s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 68, 56, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.tile:hover { border-color: rgba(255, 68, 56, .45); transform: translateY(-6px); }
.tile:hover::before { opacity: 1; }
.tile__head { display: flex; justify-content: space-between; color: var(--dim); }
.tile__head i { font-style: normal; color: var(--red); }
.tile__num { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 500; color: #fff; margin: 18px 0 16px; letter-spacing: -.04em; line-height: 1; }
.tile__num small { font-size: .45em; color: var(--red); margin-left: 4px; }
.tile__bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.tile__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--red-2)); box-shadow: 0 0 12px var(--red); }
.tile--hot { border-color: rgba(255, 68, 56, .4); background: linear-gradient(160deg, rgba(255, 68, 56, .16), rgba(6, 24, 44, .45)); }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--dim); }
.hero__scroll span { width: 1px; height: 26px; background: linear-gradient(var(--red), transparent); animation: drop 1.6s var(--ease) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* odometer */
.odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; }
.odo__col { display: flex; flex-direction: column; flex-shrink: 0; }
.odo__col span { height: 1em; display: block; flex-shrink: 0; }

/* ---------------- About / manifesto ---------------- */
.manifesto { font-size: clamp(1.6rem, 3.6vw, 3.1rem); font-weight: 400; line-height: 1.25; letter-spacing: -.03em; max-width: 1150px; }
.manifesto .w { opacity: .14; transition: none; }
.manifesto em .w, .manifesto .w.is-red { color: var(--red); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 100px; border-top: 1px solid var(--line); }
.metric { padding: 34px 26px 10px 0; border-right: 1px solid var(--line); }
.metric + .metric { padding-left: 26px; }
.metric:last-child { border-right: 0; }
.metric__n { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.4rem); color: #fff; letter-spacing: -.05em; line-height: 1; }
.metric__l { margin-top: 14px; color: var(--dim); }

/* ---------------- Services stack ---------------- */
.stack { display: grid; gap: 30px; padding-bottom: 40px; }
.scard {
  position: sticky; top: calc(110px + var(--i) * 16px);
  border-radius: 26px; padding: 24px 34px 34px;
  background: linear-gradient(160deg, rgba(10, 34, 60, .82), rgba(2, 16, 32, .9));
  border: 1px solid var(--line); backdrop-filter: blur(20px);
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .9);
  transform-origin: 50% 0; will-change: transform;
}
.scard::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--navy); opacity: var(--shade, 0); pointer-events: none; }
.scard__top { display: flex; justify-content: space-between; color: var(--dim); padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.scard__top span:first-child { color: var(--red); }
.scard__body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.scard h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: 20px; }
.scard p { color: var(--dim); max-width: 520px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pills li { padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; color: #fff; }

.viz { height: 200px; border-radius: 18px; border: 1px solid var(--line); background: rgba(0, 15, 30, .55); position: relative; overflow: hidden; }
.viz--browser { padding: 16px; display: grid; gap: 12px; align-content: start; }
.vb__bar { display: flex; gap: 6px; }
.vb__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.vb__row { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); animation: shimmer 2.4s infinite; }
.vb__row.red { background: var(--red); box-shadow: 0 0 14px rgba(255, 68, 56, .6); }
.w70 { width: 70%; } .w40 { width: 40%; } .w55 { width: 55%; }
.vb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vb__grid span { height: 70px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); animation: shimmer 2.4s infinite; }
.vb__grid span:nth-child(2) { animation-delay: .3s; } .vb__grid span:nth-child(3) { animation-delay: .6s; }
@keyframes shimmer { 50% { opacity: .45; } }
.viz--bars { display: flex; align-items: flex-end; gap: 10px; padding: 22px; }
.viz--bars span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--red), rgba(255, 68, 56, .15)); transform-origin: bottom; animation: grow 2.6s var(--ease) infinite alternate; }
.viz--bars span:nth-child(2n) { animation-delay: .2s; } .viz--bars span:nth-child(3n) { animation-delay: .4s; }
@keyframes grow { from { transform: scaleY(.35); } }
.viz--rank { padding: 18px; display: grid; gap: 8px; align-content: center; }
.viz--rank div { display: flex; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--dim); }
.viz--rank div:first-child { border-color: var(--red); background: rgba(255, 68, 56, .12); color: #fff; animation: rise 3s var(--ease) infinite; }
.viz--rank b { color: #fff; font-weight: 500; width: 26px; }
@keyframes rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); box-shadow: 0 0 24px rgba(255, 68, 56, .35); } }
.viz--radar { background: radial-gradient(circle, transparent 20%, rgba(168, 211, 255, .08) 21%, transparent 22%, transparent 45%, rgba(168, 211, 255, .08) 46%, transparent 47%, transparent 70%, rgba(168, 211, 255, .08) 71%, transparent 72%), rgba(0, 15, 30, .55); }
.viz--radar .sweep { position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, rgba(255, 68, 56, .35), transparent 60deg); border-radius: 50%; animation: spin 3.5s linear infinite; }
.viz--radar i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 16px var(--red); animation: blink 1.6s infinite; }
.viz--radar b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #fff; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.viz--orbit span { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.viz--orbit span:nth-child(1) { width: 90px; height: 90px; }
.viz--orbit span:nth-child(2) { width: 150px; height: 150px; }
.viz--orbit span:nth-child(3) { width: 210px; height: 210px; }
.viz--orbit span::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 14px var(--red); }
.viz--orbit span { animation: spin 6s linear infinite; }
.viz--orbit span:nth-child(2) { animation-duration: 9s; animation-direction: reverse; }
.viz--orbit span:nth-child(3) { animation-duration: 14s; }
.viz--orbit b { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 10px; background: var(--red); box-shadow: 0 0 30px var(--red); }
.viz--wave { display: flex; align-items: center; justify-content: center; gap: 6px; }
.viz--wave span { width: 6px; height: 70%; border-radius: 6px; background: var(--red); animation: talk 1.1s ease-in-out infinite; }
.viz--wave span:nth-child(odd) { background: #fff; }
.viz--wave span:nth-child(2) { animation-delay: -.1s; } .viz--wave span:nth-child(3) { animation-delay: -.25s; }
.viz--wave span:nth-child(4) { animation-delay: -.4s; } .viz--wave span:nth-child(5) { animation-delay: -.55s; }
.viz--wave span:nth-child(6) { animation-delay: -.7s; } .viz--wave span:nth-child(7) { animation-delay: -.3s; }
.viz--wave span:nth-child(8) { animation-delay: -.15s; } .viz--wave span:nth-child(9) { animation-delay: -.6s; }
.viz--wave span:nth-child(10) { animation-delay: -.45s; } .viz--wave span:nth-child(11) { animation-delay: -.8s; }
@keyframes talk { 0%, 100% { transform: scaleY(.15); } 50% { transform: scaleY(1); } }

/* ---------------- Projects ---------------- */
.plist { border-top: 1px solid var(--line); }
.prow { position: relative; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 30px; padding: 38px 10px; border-bottom: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.prow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 68, 56, .14), transparent 70%); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.prow:hover::before { transform: scaleY(1); }
.prow__n { color: var(--red); }
.prow h3 { font-size: clamp(1.25rem, 2.6vw, 2.2rem); font-weight: 400; transition: transform .6s var(--ease), color .4s; }
.prow:hover h3 { transform: translateX(16px); }
.prow__t { color: var(--dim); text-align: right; }
.prow__img { display: none; }
.ppreview { position: fixed; top: 0; left: 0; z-index: 60; width: 340px; height: 240px; margin: -120px 0 0 -170px; pointer-events: none; opacity: 0; transform: scale(.6); }
.ppreview__in { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(255, 68, 56, .5); }
.ppreview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Process ---------------- */
.process { position: relative; }
.process__pin { min-height: 100vh; display: flex; align-items: center; padding: 110px 0 60px; }
.process .h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.process__count { font-family: var(--display); font-size: clamp(4rem, 9vw, 8.5rem); line-height: 1; color: #fff; letter-spacing: -.06em; margin-top: 24px; display: flex; align-items: flex-start; }
.process__count span { display: inline-block; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .25)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.process__count small { font-size: .2em; color: var(--red); margin-top: 1.2em; margin-left: 8px; font-family: var(--mono); letter-spacing: 0; }
.process__track { height: 2px; background: var(--line); margin-top: 20px; max-width: 380px; }
.process__track span { display: block; height: 100%; background: var(--red); box-shadow: 0 0 12px var(--red); transform: scaleX(.25); transform-origin: 0 50%; }
.process__right { position: relative; display: grid; }
.pstep { grid-area: 1 / 1; padding: 44px; border-radius: 24px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; }
.pstep.is-active { opacity: 1; visibility: visible; }
.pstep .mono { color: var(--red); }
.pstep h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin: 18px 0 18px; }
.pstep p { color: var(--dim); font-size: 1.05rem; }

/* ---------------- Reviews marquee ---------------- */
.reviews .head { margin-bottom: 60px; }
.rmarquee { display: grid; gap: 20px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rmarquee__row { display: flex; gap: 20px; width: max-content; will-change: transform; }
.rcard { margin: 0; flex-shrink: 0; width: 460px; padding: 28px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.rcard blockquote { margin: 0; color: #fff; font-size: 1.02rem; }
.rcard figcaption { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--display); font-size: .85rem; }
.rcard figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--red); }
.stars { margin-left: auto; color: #ffb800; letter-spacing: 2px; font-size: .85rem; }
.rcard--stat { width: 260px; justify-content: center; }
.rcard--stat b { font-family: var(--display); font-weight: 500; font-size: 3.4rem; color: #fff; letter-spacing: -.05em; line-height: 1; }
.rcard--stat .mono { color: var(--dim); }
.rcard--red { background: var(--red); border-color: var(--red); }
.rcard--red .mono { color: rgba(255, 255, 255, .85); }

/* ---------------- FAQ ---------------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
.acc { border-radius: 18px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px); overflow: hidden; transition: border-color .4s, background .4s; }
.acc.is-open { border-color: rgba(255, 68, 56, .45); background: linear-gradient(160deg, rgba(255, 68, 56, .1), rgba(6, 24, 44, .5)); }
.acc__q { width: 100%; display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; text-align: left; font-family: var(--body); font-size: 1.04rem; font-weight: 600; color: #fff; }
.acc__n { font-family: var(--mono); font-size: .75rem; color: var(--red); margin-top: 4px; }
.acc__q i { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background .4s, border-color .4s, transform .5s var(--ease); }
.acc__q i::before, .acc__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: #fff; transition: transform .5s var(--ease); }
.acc__q i::after { transform: rotate(90deg); }
.acc.is-open .acc__q i { background: var(--red); border-color: var(--red); transform: rotate(180deg); }
.acc.is-open .acc__q i::after { transform: rotate(0); }
.acc__a { height: 0; overflow: hidden; }
.acc.is-open .acc__a { height: auto; }
.acc__a p { padding: 0 24px 24px 56px; color: var(--dim); }

/* ---------------- Contact panel ---------------- */
.cpanel { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 60px; border-radius: 30px; background: var(--red); color: var(--navy); overflow: hidden; box-shadow: 0 40px 120px -40px rgba(255, 68, 56, .8); }
.cpanel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 80%) var(--my, 0%), rgba(255, 255, 255, .28), transparent 50%); pointer-events: none; }
.cpanel > * { position: relative; }
.cpanel__title { color: var(--navy); font-size: clamp(2rem, 4vw, 3.6rem); margin-bottom: 24px; }
.cpanel__title em { color: #fff; }
.cpanel__left > p { max-width: 440px; font-size: 1.05rem; }
.cpanel__info { margin-top: 40px; display: grid; gap: 8px; text-transform: none; }
.cpanel__info a { border-bottom: 1px solid rgba(0, 15, 30, .3); }
.cpanel__info a:hover { border-color: var(--navy); }
.cform { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.cf { display: grid; gap: 6px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .92); transition: box-shadow .3s; }
.cf:focus-within { box-shadow: 0 0 0 3px var(--navy); }
.cf span { color: #6b7280; font-size: .7rem; }
.cf input, .cf select, .cf textarea { border: 0; outline: 0; background: none; font: inherit; color: var(--navy); width: 100%; resize: vertical; padding: 0; }
.cf--full { grid-column: 1 / -1; }
.cform__ok { position: absolute; inset: 0; border-radius: 14px; background: var(--navy); color: #fff; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; font-family: var(--display); font-size: 1.1rem; opacity: 0; visibility: hidden; }
.cform__ok svg { width: 64px; height: 64px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Footer ---------------- */
.foot { position: relative; padding: 40px 0 30px; background: linear-gradient(180deg, transparent, rgba(0, 15, 30, .78) 18%, rgba(0, 15, 30, .78)); }
.foot__status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--dim); }
.foot__status span { display: inline-flex; align-items: center; gap: 8px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr .8fr; gap: 40px; padding: 70px 0 40px; }
.foot__brand img { height: 46px; width: auto; margin-bottom: 20px; }
.foot__brand p { color: var(--dim); max-width: 380px; font-size: .95rem; }
.foot h4 { color: var(--red); margin-bottom: 18px; font-weight: 400; }
.foot ul { display: grid; gap: 10px; color: var(--dim); font-size: .95rem; }
.foot ul a:hover { color: #fff; }
.foot__mega { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 15.5vw, 16rem); line-height: .8; letter-spacing: -.07em; text-align: center; margin: 20px 0 30px;
  user-select: none; }
.foot__mega, .foot__mega .ch { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 68, 56, .9) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__mega:has(.ch) { background: none; }
.foot__bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--dim); padding-top: 22px; border-top: 1px solid var(--line); }
.foot__bot a:hover { color: var(--red); }

/* ==========================================================
   Theme additions: mega menu, inner pages, extra visuals
   ========================================================== */
body.admin-bar .nav { margin-top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { margin-top: 46px; } }

/* mega menu */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > a { gap: 8px; }
.nav__item > a::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--ease); }
.nav__item:hover > a::after, .nav__item:focus-within > a::after { transform: translateY(1px) rotate(-135deg); }
.mega { position: absolute; top: calc(100% + 26px); left: 50%; width: min(900px, 92vw); transform: translate(-50%, 12px); padding: 26px; border-radius: 22px; background: rgba(0, 15, 30, .88); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transition: opacity .35s, transform .5s var(--ease), visibility .35s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; }
.mega a { height: auto; line-height: 1.3; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-family: var(--body); font-size: .93rem; font-weight: 500; color: var(--text); text-transform: none; transition: background .3s, color .3s; }
.mega a:hover, .mega a.is-on { background: rgba(255, 68, 56, .1); color: #fff; }
.mega a svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: .9rem; }
.mega__foot a { padding: 0; color: var(--red); font-family: var(--mono); font-size: .78rem; }
.mega__foot a:hover { background: none; }
.mmenu__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.mmenu__sub > div { overflow: hidden; }
.mmenu__sub.is-open { grid-template-rows: 1fr; }
.mmenu nav .mmenu__sub a { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 30px; font-family: var(--body); font-size: 1rem; color: var(--text); border: 0; transform: none; opacity: 1; }
.mmenu nav .mmenu__sub a svg { width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 1.7; }
.mmenu nav button { display: flex; align-items: baseline; gap: 14px; width: 100%; font-family: var(--display); font-size: clamp(1.8rem, 8vw, 2.6rem); color: #fff; padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.mmenu nav button small { font-family: var(--mono); font-size: .75rem; color: var(--red); }
body.menu-open .mmenu nav button { transform: none; opacity: 1; transition-delay: .1s; }
.mmenu { overflow-y: auto; justify-content: flex-start; }

/* inner page hero */
.hero--page { min-height: 86vh; min-height: 86svh; }
.hero--page .hero__title { font-size: clamp(2rem, 5.6vw, 5.2rem); }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: var(--dim); margin-bottom: 18px; }
.crumbs a:hover { color: #fff; }
.crumbs span { color: var(--red); }
.tile__txt { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; color: #fff; margin: 18px 0 16px; letter-spacing: -.02em; line-height: 1.2; }
.tile__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 68, 56, .12); border: 1px solid rgba(255, 68, 56, .3); margin-top: 18px; }
.tile__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.tile { display: block; }

/* service card link */
.scard__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-family: var(--display); font-size: .8rem; color: #fff; }
.scard__link svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2.2; transition: transform .4s var(--ease); }
.scard__link:hover svg { transform: translate(3px, -3px); }
.scard h3 a:hover { color: var(--red); }

/* services quick grid (icons list) */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 90px; }
.sgrid a { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); color: #fff; font-weight: 600; overflow: hidden; transition: border-color .4s, transform .5s var(--ease); }
.sgrid a::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 68, 56, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.sgrid a:hover { border-color: rgba(255, 68, 56, .5); transform: translateY(-4px); }
.sgrid a:hover::before { opacity: 1; }
.sgrid svg { position: relative; width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sgrid span { position: relative; }
.sgrid i { position: relative; margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--dim); }

/* features grid */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fcard { position: relative; padding: 30px 28px 32px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px); overflow: hidden; transition: border-color .4s, transform .5s var(--ease); }
.fcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 68, 56, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.fcard:hover { border-color: rgba(255, 68, 56, .45); transform: translateY(-6px); }
.fcard:hover::before { opacity: 1; }
.fcard > * { position: relative; }
.fcard .mono { color: var(--red); }
.fcard h3 { font-size: 1.2rem; margin: 22px 0 12px; line-height: 1.25; }
.fcard p { color: var(--dim); font-size: .97rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .viz { height: 320px; }

/* other services rows */
.plist--links .prow { grid-template-columns: 70px 1fr auto; padding: 28px 10px; }
.plist--links .prow h3 { font-size: clamp(1.15rem, 2.2vw, 1.8rem); }
.prow__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s, border-color .4s, transform .5s var(--ease); }
.prow__arrow svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; }
.prow:hover .prow__arrow { background: var(--red); border-color: var(--red); transform: rotate(45deg); }

/* contact tiles + prose + 404 */
.ctiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.prose { max-width: 820px; margin: 0 auto; padding: 48px; border-radius: 24px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px); }
.prose h2, .prose h3 { margin: 1.6em 0 .6em; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.25rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; color: var(--text); }
.prose ul, .prose ol { padding-left: 1.2em; list-style: disc; }
.prose a { color: var(--red); border-bottom: 1px solid rgba(255, 68, 56, .4); }
.prose img { border-radius: 14px; height: auto; }
.e404 { font-family: var(--display); font-size: clamp(6rem, 22vw, 18rem); line-height: .9; letter-spacing: -.07em; background: linear-gradient(180deg, #fff, rgba(255, 68, 56, .9)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* footer: 12 services in two columns */
.foot__grid { grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr; align-items: start; }
.foot__brand img { display: block; }
.foot ul li { line-height: 1.5; }
.foot__more { color: var(--red) !important; }
.foot__bot li { display: inline; margin-right: 12px; }

/* extra service visuals */
.viz--shield { display: grid; place-items: center; }
.viz--shield .sh { position: relative; width: 120px; height: 140px; }
.viz--shield .sh svg { width: 100%; height: 100%; fill: rgba(255, 68, 56, .14); stroke: var(--red); stroke-width: 2; filter: drop-shadow(0 0 22px rgba(255, 68, 56, .5)); }
.viz--shield .sh b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; color: #4ade80; animation: blink 2.4s infinite; }
.viz--shield .badge { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 100px; background: #fff; color: var(--navy); font-family: var(--mono); font-size: .7rem; white-space: nowrap; }
.viz--shield .ring { position: absolute; left: 50%; top: 45%; width: 180px; height: 180px; margin: -90px; border-radius: 50%; border: 1px solid rgba(255, 68, 56, .35); animation: pulseRing 2.4s var(--ease) infinite; }
@keyframes pulseRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.viz--phone { display: grid; place-items: center; }
.viz--phone .ph { width: 92px; height: 170px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .3); padding: 14px 10px; display: grid; gap: 8px; align-content: start; background: rgba(0, 15, 30, .6); box-shadow: 0 0 40px -10px rgba(255, 68, 56, .5); animation: corefloat 5s ease-in-out infinite; }
.viz--phone .ph i { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
.viz--phone .ph i:nth-child(2) { background: var(--red); width: 60%; }
.viz--phone .ph span { height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); animation: shimmer 2.4s infinite; }
@keyframes corefloat { 50% { transform: translateY(-10px) rotate(-3deg); } }
.viz--chat { padding: 18px; display: grid; gap: 10px; align-content: center; }
.viz--chat .q, .viz--chat .a { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: .82rem; }
.viz--chat .q { justify-self: end; background: rgba(255, 255, 255, .08); color: var(--text); }
.viz--chat .a { background: rgba(255, 68, 56, .14); border: 1px solid rgba(255, 68, 56, .35); color: #fff; }
.viz--chat .a b { color: var(--red); }
.viz--chat .dots { display: flex; gap: 4px; padding: 8px 12px; }
.viz--chat .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: blink 1s infinite; }
.viz--chat .dots i:nth-child(2) { animation-delay: .2s; } .viz--chat .dots i:nth-child(3) { animation-delay: .4s; }
.viz--lp { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.viz--lp > div { border-radius: 12px; border: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; align-content: start; }
.viz--lp > div.win { border-color: var(--red); box-shadow: 0 0 24px rgba(255, 68, 56, .3); }
.viz--lp i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.viz--lp b { height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .15); margin-top: 6px; }
.viz--lp .win b { background: var(--red); animation: blink 1.8s infinite; }
.viz--lp small { font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.viz--lp .win small { color: #4ade80; }
.viz--grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 18px; align-content: center; }
.viz--grid i { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: .62rem; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.viz--grid i.t1 { background: var(--red); border-color: var(--red); box-shadow: 0 0 12px rgba(255, 68, 56, .6); }
.viz--grid i.t2 { background: rgba(255, 68, 56, .45); }
.viz--grid i.t3 { background: rgba(255, 68, 56, .2); }
.viz--pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.viz--pipe > div { display: grid; gap: 8px; align-content: start; }
.viz--pipe small { font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.viz--pipe i { height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.viz--pipe i.mv { background: rgba(255, 68, 56, .18); border-color: var(--red); animation: hop 3s var(--ease) infinite; }
@keyframes hop { 0%, 30% { transform: translateX(0); } 50%, 80% { transform: translateX(calc(100% + 10px)); } 100% { transform: translateX(0); } }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1001; padding: 10px 16px; border-radius: 10px; background: var(--red); color: #fff; transition: top .3s; }
.skip-link:focus { top: 16px; }

/* section labels (kicker) */
.kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; font-family: var(--body); font-size: .8rem; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.kicker__num { font-family: var(--display); font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--red); }
.kicker__line { display: block; width: 38px; height: 1.5px; background: linear-gradient(90deg, var(--red), rgba(255, 68, 56, .25)); transform-origin: 0 50%; }
.kicker--pill { padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); letter-spacing: .12em; }
.kicker--pill .kicker__line { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }
.kicker--dark, .kicker--dark .kicker__num { color: var(--navy); }
.kicker--dark .kicker__line { background: var(--navy); }

/* single service page layout */
.prow__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hero--svc { justify-content: center; }
.svc-hero { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.svc-hero__text { text-align: left; align-items: flex-start; }
.svc-hero .crumbs { justify-content: flex-start; }
.svc-hero .hero__title { font-size: clamp(2.2rem, 5vw, 4.8rem); }
.svc-hero .hero__sub { margin-left: 0; }
.svc-hero .hero__cta { justify-content: flex-start; }
.svc-panel { padding: 20px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px); box-shadow: 0 40px 100px -40px rgba(255, 68, 56, .45); }
.svc-panel__top { display: flex; justify-content: space-between; color: var(--dim); margin-bottom: 14px; }
.svc-panel__top span:first-child { color: var(--red); }
.svc-panel__live { display: inline-flex; align-items: center; gap: 6px; }
.svc-panel__live i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: blink 2s infinite; }
.svc-panel .viz { height: 260px; }
.svc-panel__out { display: grid; gap: 8px; margin-top: 14px; }
.svc-panel__out li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 15, 30, .5); color: #fff; font-family: var(--display); font-size: .9rem; }
.svc-panel__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 68, 56, .14); flex-shrink: 0; }
.svc-panel__ico svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-ov__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.svc-ov__side { position: sticky; top: 120px; }
.svc-lead { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.35; color: #fff; letter-spacing: -.02em; }
.svc-lead .w { opacity: .16; }
.svc-body { display: grid; gap: 18px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento__item { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px); overflow: hidden; transition: border-color .4s, transform .5s var(--ease); }
.bento__item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 68, 56, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.bento__item:hover { border-color: rgba(255, 68, 56, .45); transform: translateY(-6px); }
.bento__item:hover::before { opacity: 1; }
.bento__item > * { position: relative; }
.bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; justify-content: space-between; min-height: 340px; border-color: rgba(255, 68, 56, .4); background: linear-gradient(160deg, rgba(255, 68, 56, .2), rgba(6, 24, 44, .5)); }
.bento__item:nth-child(4), .bento__item:nth-child(5), .bento__item:nth-child(6) { grid-column: span 2; }
.bento__top { display: flex; justify-content: space-between; align-items: center; }
.bento__top .mono { color: var(--red); }
.bento__ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--red); box-shadow: 0 0 40px rgba(255, 68, 56, .5); }
.bento__ico svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bento__item h3 { font-size: 1.15rem; margin: 22px 0 10px; line-height: 1.25; }
.bento__item:nth-child(1) h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-top: auto; padding-top: 40px; }
.bento__item p { color: var(--dim); font-size: .97rem; }
.omarquee { position: relative; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.omarquee .rmarquee__row { align-items: center; gap: 40px; }
.oword { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); transition: color .4s; }
.oword:hover { color: #fff; }
.ostar { font-size: 2rem; color: var(--red); }

@media (max-width: 1100px) {
  .svc-hero, .svc-ov__grid { grid-template-columns: 1fr; gap: 44px; }
  .svc-ov__side { position: static; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__item:nth-child(n) { grid-column: span 1; grid-row: auto; }
  .bento__item:nth-child(1) { grid-column: span 2; min-height: 260px; }
}
@media (max-width: 900px) {
  .hero--svc { padding-top: 120px; }
  .bento { grid-template-columns: 1fr; }
  .bento__item:nth-child(1) { grid-column: auto; }
  .svc-panel .viz { height: 200px; }
}

@media (max-width: 1100px) {
  .sgrid, .fgrid, .ctiles { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .mega { display: none; }
  .sgrid, .fgrid, .ctiles { grid-template-columns: 1fr; }
  .sgrid { margin-bottom: 60px; }
  .prose { padding: 28px 22px; }
  .plist--links .prow { grid-template-columns: 1fr auto; }
  .plist--links .prow__n { display: none; }
  .split .viz { height: 220px; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; }
  .status { display: none; }
  .scard__body, .faq__grid, .cpanel { grid-template-columns: 1fr; gap: 36px; }
  .process__grid { gap: 40px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .nav { top: 12px; padding: 0 12px; }
  .nav__links, .nav__pill > .btn { display: none; }
  .burger { display: block; }
  .nav__logo img { height: 30px; }
  .sect { padding: 100px 0; }
  .head--row { flex-direction: column; align-items: flex-start; gap: 0; }
  .tiles { grid-template-columns: 1fr; margin-top: 56px; }
  .tile__num { margin: 12px 0; }
  .hero__frame { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 26px 16px 18px 0 !important; border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:nth-child(odd) { border-right: 1px solid var(--line); }
  .metric:nth-child(even) { padding-left: 16px !important; }
  .scard { padding: 22px 22px 28px; top: calc(84px + var(--i) * 10px); min-height: 0; }
  .viz { height: 160px; }
  .prow { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .prow__t { text-align: left; }
  .prow__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; order: 3; }
  .ppreview { display: none; }
  .process__pin { min-height: 0; padding: 100px 0; }
  .process__grid { grid-template-columns: 1fr; }
  .process__count, .process__track { display: none; }
  .process__right { gap: 16px; }
  .pstep { grid-area: auto; opacity: 1; visibility: visible; padding: 28px; }
  .rcard { width: 320px; }
  .rcard--stat { width: 210px; }
  .cpanel { padding: 34px 22px; border-radius: 22px; }
  .cform { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}