/* ==========================================================================
   Smart Solution Labs — home page (Home v2)
   Ported from the Claude Design source (Home v2.dc.html + Header/Footer).
   Dark is the base theme; `html[data-theme="light"]` flips the token set, and
   `.section--dark` keeps the dark palette as islands inside the light page.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --bg:#030712; --bg2:#050812; --bg3:#0B1120; --card:#0E1530; --card2:#0A0F26;
  --ink:#EAF0FF; --ink2:#B8C1DE; --mut:#8A94B8; --mut2:#9BA3C4; --dim:#5A6488;
  --panel60:rgba(14,21,48,0.6); --deep60:rgba(7,11,24,0.6); --hdr:rgba(7,11,24,0.85);
  --teal-ink:#4EE0D0; --violet-ink:#B394FF; --blue-ink:#5B8CFF; --purple-ink:#8B5CF6;

  --line:rgba(91,140,255,0.12);
  --shell:1240px;
  --grad:linear-gradient(135deg,#4EE0D0,#5B8CFF 50%,#8B5CF6);
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Stands in for art that hasn't been dropped in yet. */
  --art-fallback:radial-gradient(circle at 50% 38%, rgba(91,140,255,0.22), transparent 68%),
                 radial-gradient(circle at 18% 82%, rgba(78,224,208,0.16), transparent 62%),
                 linear-gradient(160deg,#0B1230,#070B1C);
}

html[data-theme="light"] {
  --bg:#EDF1F9; --bg2:#E9EDF8; --bg3:#F3EFFC; --card:#FFFFFF; --card2:#FBFCFF;
  --ink:#141B3C; --ink2:#3A4570; --mut:#5F6A92; --mut2:#4D577E; --dim:#98A1BF;
  --panel60:rgba(255,255,255,0.8); --deep60:rgba(244,247,255,0.85);
  /* The design omits --hdr in light mode, which leaves a near-black sticky
     header behind dark text. Light value carried over from the v1 palette. */
  --hdr:rgba(250,251,255,0.9);
  --teal-ink:#0B7E74; --violet-ink:#7442CC; --blue-ink:#2F5BD4; --purple-ink:#6C3BD6;
}

/* Dark islands: sections that stay dark even in the light theme. */
html[data-theme="light"] .section--dark,
html[data-theme="light"] .site-footer {
  background-color:#090D20;
  color:#EAF0FF;
  --bg:#030712; --bg2:#050812; --bg3:#0B1120; --card:#0E1530; --card2:#0A0F26;
  --ink:#EAF0FF; --ink2:#B8C1DE; --mut:#8A94B8; --mut2:#9BA3C4; --dim:#5A6488;
  --panel60:rgba(14,21,48,0.6); --deep60:rgba(7,11,24,0.6);
  --teal-ink:#4EE0D0; --violet-ink:#B394FF; --blue-ink:#5B8CFF; --purple-ink:#8B5CF6;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body, section, footer, header { transition:background-color .35s ease; }

a { color:var(--teal-ink); }
a:hover { color:var(--purple-ink); }
::selection { background:#8B5CF6; color:#fff; }

img { max-width:100%; }
h1, h2, h3, h4 { margin:0; text-wrap:pretty; }
p { margin:0; }

.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;
}

.skip-link {
  position:fixed; inset-inline-start:12px; top:-60px; z-index:200;
  background:var(--card2); color:var(--ink); border:1px solid var(--teal-ink);
  border-radius:10px; padding:10px 18px; font-size:14px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus { top:12px; }

:where(a, button, input):focus-visible { outline:2px solid var(--teal-ink); outline-offset:3px; }

.center { display:flex; justify-content:center; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes gradShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes pulseDot { 0%,100% { box-shadow:0 0 6px #4EE0D0; } 50% { box-shadow:0 0 18px #4EE0D0, 0 0 30px rgba(78,224,208,0.5); } }
@keyframes orbitSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes waveBar { 0%,100% { transform:scaleY(0.25); } 50% { transform:scaleY(1); } }
@keyframes auroraA { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(70px,-40px) scale(1.15); } }
@keyframes auroraB { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-90px,40px) scale(1.2); } }
@keyframes lineFlow { to { background-position:24px 0; } }
@keyframes nodeFloat { 0%,100% { transform:var(--tf) translateY(0); } 50% { transform:var(--tf) translateY(-9px); } }
@keyframes coreLift { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-10px) scale(1.015); } }
@keyframes auraBreathe { 0%,100% { opacity:0.6; transform:scale(0.96); } 50% { opacity:1; transform:scale(1.05); } }
@keyframes nodeTwinkle { 0%,100% { transform:scale(0.82); opacity:0.5; } 50% { transform:scale(1.12); opacity:1; } }
@keyframes wireRun { 0% { left:0; opacity:0; } 15% { opacity:1; } 70% { opacity:1; } 100% { left:calc(100% - 5px); opacity:0; } }
@keyframes driftUp {
  0% { transform:translate3d(0,14px,0); opacity:0; }
  20% { opacity:var(--dop,0.5); }
  80% { opacity:var(--dop,0.5); }
  100% { transform:translate3d(var(--dx,10px),-120px,0); opacity:0; }
}
@keyframes bgDrift {
  0% { transform:scale(1.06) translate3d(0,0,0); }
  50% { transform:scale(1.16) translate3d(-2.5%,-1.5%,0); }
  100% { transform:scale(1.06) translate3d(0,0,0); }
}
@keyframes bgPulse { 0%,100% { opacity:0.42; filter:saturate(1) brightness(1); } 50% { opacity:0.62; filter:saturate(1.25) brightness(1.12); } }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position:sticky; top:0; z-index:50;
  padding-block:14px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px 20px;
  padding:16px 28px;
  background:var(--hdr);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark { height:44px; width:auto; border-radius:8px; }
.brand__text { display:flex; flex-direction:column; line-height:1.1; align-items:flex-start; }
html[dir="rtl"] .brand__text { align-items:flex-end; text-align:right; }
.brand__name { font-size:16px; font-weight:700; letter-spacing:2px; color:var(--ink); }
.brand__sub { font-size:10px; letter-spacing:3px; color:var(--mut); }
.brand__accent { color:var(--purple-ink); }

.site-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.site-nav__link { text-decoration:none; font-size:14px; color:var(--ink2); }
.site-nav__link:hover { color:var(--teal-ink); }
.site-nav__link.is-active { color:var(--teal-ink); font-weight:600; }

.site-header__actions { display:flex; align-items:center; gap:14px; }
.site-header__hairline {
  position:absolute; bottom:-1px; inset-inline-start:0; width:100%; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(78,224,208,0.5) 30%,rgba(139,92,246,0.5) 70%,transparent);
}
.theme-btn {
  background:none; border:none; color:var(--ink2); padding:6px;
  cursor:pointer; font-family:inherit; line-height:0; display:flex; align-items:center;
  transition:color .25s;
}
.theme-btn:hover { color:var(--teal-ink); }
.lang-btn {
  background:none; border:1.5px solid rgba(138,148,184,0.45); color:var(--ink2);
  border-radius:50%; width:44px; height:44px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:color .25s, border-color .25s;
}
.lang-btn:hover { color:var(--ink); border-color:var(--teal-ink); }

.pill-btn {
  background:none;
  border:1px solid rgba(138,148,184,0.4);
  color:var(--mut);
  border-radius:999px;
  padding:7px 16px;
  font-size:13px; font-family:inherit;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.pill-btn:hover { color:var(--ink); border-color:var(--teal-ink); }
.pill-btn--icon { padding:7px 12px; font-size:14px; line-height:1; }

/* ── Buttons & links ────────────────────────────────────────────────────── */

.btn {
  display:inline-block; text-decoration:none;
  border-radius:14px; padding:15px 32px; font-size:16px;
  transition:filter .2s, border-color .2s, color .2s, box-shadow .3s;
}
/* Design v4: primary CTAs are frosted glass — a translucent gradient over a
   backdrop blur, with a white hairline and an inner top highlight. */
.btn--grad {
  background:linear-gradient(135deg,rgba(78,224,208,0.62),rgba(91,140,255,0.66) 50%,rgba(139,92,246,0.7));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 30px rgba(91,140,255,0.25);
  color:#FFFFFF; font-weight:700;
}
.btn--grad:hover { filter:brightness(1.15); color:#FFFFFF; }
.btn--glow { box-shadow:0 0 40px rgba(139,92,246,0.35); }
.btn--glow:hover { box-shadow:0 0 60px rgba(139,92,246,0.55); }
.btn--ghost { border:1px solid rgba(138,148,184,0.4); color:var(--ink); }
.btn--ghost:hover { border-color:var(--teal-ink); color:var(--teal-ink); }
.btn--lg { padding:16px 36px; }
.btn--pill { font-size:14px; border-radius:999px; padding:10px 22px; }

.text-link { text-decoration:none; color:var(--teal-ink); font-size:14.5px; font-weight:600; white-space:nowrap; }
.text-link--strong { font-size:15px; font-weight:700; }
.text-link--strong:hover { color:var(--violet-ink); }

/* ── Section furniture ──────────────────────────────────────────────────── */

.section { position:relative; padding:110px 48px; }
.section--bordered { border-top:1px solid rgba(91,140,255,0.08); }

.shell { position:relative; max-width:var(--shell); margin:0 auto; display:flex; flex-direction:column; gap:48px; }
.shell--narrow { max-width:1140px; gap:56px; }
.shell--gap40 { gap:40px; }

.section__head { display:flex; flex-direction:column; gap:14px; max-width:680px; }
.section__head--center { align-items:center; text-align:center; max-width:none; }
.section__head--split {
  flex-direction:row; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; max-width:none;
}
.section__lead { display:flex; flex-direction:column; gap:14px; }

.section__sub { color:var(--mut); font-size:15.5px; line-height:1.9; max-width:660px; }
.section__head--center .section__sub { max-width:640px; }
.section__sub--lg { color:var(--ink2); font-size:17px; max-width:600px; }
.section__sub--xl { color:var(--ink2); font-size:19px; line-height:1.9; max-width:600px; }

.h2 { font-size:38px; font-weight:800; }
.h2--lg { font-size:42px; line-height:1.35; }
.h2--xl { font-size:52px; line-height:1.3; }
.h2--cta { font-size:46px; line-height:1.4; }

/* Numbered section eyebrows: "01 — WHAT WE BUILD" */
.eyebrow {
  display:flex; align-items:center; gap:10px;
  color:var(--teal-ink); font-family:var(--mono);
  font-size:11.5px; letter-spacing:3px; font-weight:700;
}
.section__head--center .eyebrow { justify-content:center; }
.eyebrow--violet { color:var(--violet-ink); }
.eyebrow__rule { width:26px; height:1px; background:linear-gradient(90deg,transparent,#4EE0D0); }
.eyebrow__rule--violet { background:linear-gradient(90deg,transparent,#B394FF); }

.grad-text {
  background:linear-gradient(90deg,#4EE0D0,#5B8CFF,#8B5CF6,#4EE0D0);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}

.icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon--md {
  color:var(--teal-ink);
  width:50px; height:50px; border-radius:14px; font-size:23px;
  background:linear-gradient(135deg,rgba(91,140,255,0.16),rgba(78,224,208,0.14));
  border:1px solid rgba(91,140,255,0.35);
}

.grid { display:grid; gap:20px; }

/* Scroll reveal. `.reveal-armed` is added by JS, so without scripting the
   sections stay visible instead of being stuck at opacity 0. */
.reveal-armed { opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal-armed.is-visible { opacity:1; transform:none; }

/* ── v3 shared ──────────────────────────────────────────────────────────── */

.section3 { position:relative; padding:130px 48px; }
.section3--bordered { border-top:1px solid rgba(91,140,255,0.1); }
.shell3 { position:relative; max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:54px; }
.shell3--row { flex-direction:row; align-items:center; gap:70px; flex-wrap:wrap; }

.head3 { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.head3--stack { flex-direction:column; align-items:flex-start; gap:14px; }
.head3--narrow { max-width:720px; }
.head3__lead { display:flex; flex-direction:column; gap:14px; }
.head3__aside { color:var(--mut); font-size:15.5px; line-height:1.95; max-width:420px; }
.head3__aside--wide { max-width:none; }
.h2--fluid { font-size:clamp(34px,4vw,54px); font-weight:800; line-height:1.3; }
.eyebrow--blue { color:var(--blue-ink); }
.eyebrow__rule--blue { background:linear-gradient(90deg,transparent,#7CA8FF); }
/* The `background` shorthand resets background-clip, so re-declare the clip
   here or the gradient paints as a solid block behind invisible text. */
.grad-text--static {
  background:linear-gradient(100deg,#4EE0D0,#5B8CFF 55%,#B394FF);
  background-size:auto; animation:none;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-text--violet { background:linear-gradient(100deg,#B394FF,#5B8CFF); background-size:auto; animation:none;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.grid3 { display:grid; gap:22px; }

@keyframes marqueeX { to { transform:translateX(-50%); } }
@keyframes blinkCaret { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes scrollHint { 0%,100% { transform:translateY(0); opacity:0.9; } 50% { transform:translateY(9px); opacity:0.4; } }
@keyframes floatGlow { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

/* ── Hero v3 ────────────────────────────────────────────────────────────── */

.hero3 {
  position:relative; min-height:92vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 48px 40px;
}
/* City night-scape recovered from the standalone export; the gradients under
   it double as the fallback if the file ever goes missing. */
.hero3__photo {
  position:absolute; inset:0; pointer-events:none; opacity:0.88;
  background:
    url(../nj/hero-city-rtl.webp) center / cover no-repeat,
    radial-gradient(ellipse 70% 50% at 72% 18%, rgba(139,92,246,0.30), transparent 66%),
    radial-gradient(ellipse 60% 45% at 18% 30%, rgba(78,224,208,0.20), transparent 62%),
    linear-gradient(180deg,#050A1E,#030712);
}
.hero3__net, .hero3__ripple { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero3__net { opacity:0.75; }
.hero3__scrim {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,7,18,0.08), rgba(3,7,18,0.6) 76%, var(--bg));
}
.hero3__watermark {
  position:absolute; top:6%; inset-inline-end:-2%;
  font-family:var(--mono); font-weight:800; font-size:clamp(160px,26vw,380px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(91,140,255,0.14);
  pointer-events:none; user-select:none;
}
.hero3__inner { position:relative; max-width:1240px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:34px; }
.hero3__kicker {
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:4px; font-weight:700; color:var(--teal-ink);
  animation:fadeUp .7s ease both;
}
.hero3__dot { width:10px; height:10px; border-radius:50%; background:var(--teal-ink); box-shadow:0 0 14px var(--teal-ink); }
.hero3__title {
  font-size:clamp(44px,7vw,96px); font-weight:800; line-height:1.22; letter-spacing:-1px; max-width:1000px;
  animation:fadeUp .7s ease .1s both;
}
.hero3__sub {
  color:var(--ink2); font-size:clamp(16px,1.6vw,21px); font-weight:300; line-height:2; max-width:640px;
  animation:fadeUp .7s ease .2s both;
}
.hero3__ctas { display:flex; gap:16px; flex-wrap:wrap; animation:fadeUp .7s ease .3s both; }
.hero3__ctas .btn { padding:17px 38px; font-weight:800; }
.hstats {
  display:flex; flex-wrap:wrap; margin-top:22px;
  border-top:1px solid rgba(91,140,255,0.16);
  animation:fadeUp .7s ease .4s both;
}
.hstat {
  flex:1; min-width:170px; padding:22px 26px 4px;
  border-inline-end:1px solid rgba(91,140,255,0.12);
  display:flex; flex-direction:column; gap:5px;
}
.hstat__v {
  font-size:34px; font-weight:800;
  background:linear-gradient(120deg,#4EE0D0,#7CA8FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hstat__k { color:var(--mut); font-size:13px; }
.hero3__scroll {
  position:absolute; bottom:22px; inset-inline:0; margin:0 auto;
  width:22px; height:36px; border-radius:12px; border:1.5px solid rgba(138,148,184,0.4);
  display:flex; justify-content:center; padding-top:7px; pointer-events:none;
}
.hero3__scroll i { width:3px; height:8px; border-radius:2px; background:var(--teal-ink); animation:scrollHint 1.8s ease-in-out infinite; }

/* ── Marquee v3 ─────────────────────────────────────────────────────────── */

.marquee3 { border-block:1px solid rgba(91,140,255,0.14); background:var(--bg2); overflow:hidden; padding:18px 0; }
.marquee3__track { display:flex; width:max-content; animation:marqueeX 30s linear infinite; }
.marquee3__item {
  display:flex; align-items:center; gap:26px; padding-inline-end:26px;
  font-family:var(--mono); font-size:13px; letter-spacing:3px; font-weight:700;
  color:var(--mut2); white-space:nowrap;
}
.marquee3__item i { color:var(--teal-ink); font-style:normal; }

/* ── 01 · Capability rows ───────────────────────────────────────────────── */

.caps3 { display:flex; flex-direction:column; }
.caps3__end { border-top:1px solid rgba(91,140,255,0.14); }
.cap3 {
  display:flex; gap:38px; align-items:flex-start; flex-wrap:wrap;
  border-top:1px solid rgba(91,140,255,0.14);
  padding:26px 18px;
  transition:background .4s, padding .5s ease;
}
.cap3.is-active { padding:34px 18px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 5%, transparent), transparent 65%); }
.cap3__n {
  font-family:var(--mono); font-weight:800; line-height:1; font-size:30px;
  color:transparent; -webkit-text-stroke:1.2px rgba(138,148,184,0.45);
  transition:all .5s;
}
.cap3.is-active .cap3__n { font-size:58px; -webkit-text-stroke-color:var(--c); }
.cap3__main { flex:1; min-width:260px; display:flex; flex-direction:column; gap:10px; }
.cap3__title { font-weight:800; font-size:24px; color:var(--mut); transition:all .5s; }
.cap3.is-active .cap3__title { font-size:34px; color:var(--ink); }
.cap3__body { overflow:hidden; max-height:0; opacity:0; transition:max-height .6s ease, opacity .5s ease; }
.cap3.is-active .cap3__body { max-height:220px; opacity:1; }
.cap3__desc { color:var(--mut2); font-size:14.5px; line-height:1.95; max-width:560px; }
.cap3__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.cap3__tag {
  border:1px solid color-mix(in srgb, var(--c) 24%, transparent); color:var(--c);
  border-radius:7px; padding:4px 11px;
  font-family:var(--mono); font-size:10px; letter-spacing:1.8px; font-weight:700;
}
.cap3__arrow { font-size:26px; margin-top:6px; color:rgba(138,148,184,0.3); transition:all .5s; }
.cap3.is-active .cap3__arrow { color:var(--c); transform:translateX(-6px); }

/* ── 02 · Najeeb ────────────────────────────────────────────────────────── */

.section3--najeeb { overflow:hidden; background:var(--bg3); border-block:1px solid rgba(139,92,246,0.16); }
.nj3__glow {
  position:absolute; top:-160px; inset-inline-start:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.2), transparent 68%); filter:blur(60px); pointer-events:none;
}
.nj3__copy { flex:1; min-width:340px; display:flex; flex-direction:column; gap:24px; }
.nj3__sub { color:var(--ink2); font-size:17px; font-weight:300; line-height:2; max-width:560px; }
.checks { display:flex; flex-direction:column; gap:14px; }
.check { display:flex; gap:14px; align-items:flex-start; color:var(--mut2); font-size:15px; line-height:1.9; }
.check__mark {
  width:22px; height:22px; flex-shrink:0; margin-top:3px; border-radius:50%;
  border:1.5px solid var(--teal-ink); display:flex; align-items:center; justify-content:center;
  color:var(--teal-ink); font-size:12px; font-weight:800;
}
.btn--violet {
  align-self:flex-start; border:1px solid rgba(179,148,255,0.5); color:var(--violet-ink);
  font-size:15px; font-weight:700; border-radius:12px; padding:14px 30px;
}
.btn--violet:hover { background:rgba(139,92,246,0.12); color:var(--violet-ink); }
.nj3__media { flex:1; min-width:340px; display:flex; flex-direction:column; gap:18px; }
.nj3__shot {
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid rgba(139,92,246,0.3); box-shadow:0 30px 80px rgba(3,7,18,0.7);
  background:var(--art-fallback);
}
.nj3__shot img { display:block; width:100%; height:300px; object-fit:cover; }
.nj3__shot-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 40%, rgba(7,11,34,0.92)); }
.nj3__caption { position:absolute; bottom:0; inset-inline:0; padding:22px; display:flex; flex-direction:column; gap:8px; }
.nj3__live { font-family:var(--mono); font-size:10.5px; letter-spacing:3px; color:var(--teal-ink); font-weight:700; }
.nj3__line { font-size:16px; font-weight:600; color:var(--ink); min-height:24px; }
.nj3__caret { color:var(--teal-ink); font-style:normal; animation:blinkCaret 1s step-end infinite; }
.nj3__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nj3__stat {
  border:1px solid rgba(139,92,246,0.25); background:var(--card); border-radius:16px;
  padding:18px 14px; display:flex; flex-direction:column; gap:4px; align-items:center;
}
.nj3__v { font-size:22px; font-weight:800; color:var(--violet-ink); }
.nj3__k { color:var(--mut); font-size:11.5px; text-align:center; }

/* ── 03 · Case studies ──────────────────────────────────────────────────── */

.mm { display:flex; gap:60px; align-items:center; flex-wrap:wrap; }
/* Fallback panel behind the product shot: monmedx-overview.png exceeds the
   design MCP's read cap, so until the real file lands the frame shows a
   branded panel instead of collapsing to nothing. */
.mm__shot {
  position:relative; flex:1.2; min-width:360px; min-height:300px;
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(91,140,255,0.16);
  background:
    radial-gradient(circle at 50% 40%, rgba(91,140,255,0.14), transparent 72%),
    repeating-linear-gradient(0deg, rgba(91,140,255,0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(91,140,255,0.05) 0 1px, transparent 1px 40px),
    var(--art-fallback);
  display:flex; align-items:center; justify-content:center;
}
.mm__mark {
  position:absolute;
  font-family:var(--mono); font-size:clamp(24px,3vw,38px); font-weight:800; letter-spacing:6px;
  background:linear-gradient(90deg,#4EE0D0,#5B8CFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mm__shot img {
  position:relative; display:block; width:100%; height:auto;
  filter:drop-shadow(0 30px 60px rgba(3,7,18,0.8));
  animation:floatGlow 9s ease-in-out infinite;
}
.mm__body { flex:1; min-width:320px; display:flex; flex-direction:column; gap:18px; }
.mm__badge {
  align-self:flex-start; border:1px solid rgba(78,224,208,0.4); color:var(--teal-ink);
  border-radius:999px; padding:8px 18px; font-size:12.5px; font-weight:700;
}
.mm__title { font-size:40px; font-weight:800; letter-spacing:-0.5px; }
.mm__desc { color:var(--mut2); font-size:15.5px; line-height:2; }
.mm__facts { display:flex; gap:34px; flex-wrap:wrap; padding:18px 0; border-block:1px solid rgba(91,140,255,0.14); }
.mmfact { display:flex; flex-direction:column; gap:4px; }
.mmfact__v { font-size:26px; font-weight:800; color:var(--c); }
.mmfact__k { color:var(--mut); font-size:12.5px; }

.grid3--cases { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:24px; }
.cc {
  position:relative; overflow:hidden; background:var(--card);
  border:1px solid rgba(91,140,255,0.16); border-radius:24px; padding:34px;
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .25s, transform .25s;
}
.cc:hover { border-color:rgba(78,224,208,0.45); transform:translateY(-5px); }
.cc__head { display:flex; align-items:center; gap:16px; }
.cc__logo {
  position:relative; width:54px; height:54px; flex-shrink:0; border-radius:16px;
  display:flex; align-items:center; justify-content:center; padding:10px; box-sizing:border-box;
  background:linear-gradient(145deg, var(--c), #4EE0D0);
  box-shadow:0 0 24px color-mix(in srgb, var(--c) 30%, transparent);
}
.cc__logo img { width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }
/* Exported logo SVGs lost their embedded bitmap — monogram keeps the chip legible. */
.cc__logo b {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:21px; font-weight:800; color:#070B18;
}
.cc__id { display:flex; flex-direction:column; gap:3px; }
.cc__name { font-size:23px; font-weight:800; }
.cc__kind { color:var(--c); font-size:12.5px; font-weight:700; }
.cc__desc { color:var(--mut2); font-size:14px; line-height:1.95; }
.cc__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.cc__tag {
  border:1px solid color-mix(in srgb, var(--c) 22%, transparent); color:var(--c);
  border-radius:7px; padding:4px 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:1.6px; font-weight:700;
}

/* ── 04 · Industries ────────────────────────────────────────────────────── */

.grid3--ind { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.ind {
  position:relative; overflow:hidden; border-radius:22px;
  border:1px solid rgba(91,140,255,0.16); min-height:320px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:border-color .25s, transform .25s;
  background:var(--art-fallback);
}
.ind:hover { border-color:rgba(78,224,208,0.5); transform:translateY(-5px); }
.ind__img { position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.ind__scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(3,7,18,0.12) 30%, rgba(3,7,18,0.94)); }
.ind__body { position:relative; padding:26px; display:flex; flex-direction:column; gap:9px; }
.ind__title { font-size:21px; font-weight:800; }
.ind__desc { color:var(--mut2); font-size:13.5px; line-height:1.85; }
.ind__tag {
  align-self:flex-start; margin-top:6px;
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent); color:var(--c);
  border-radius:7px; padding:4px 11px;
  font-family:var(--mono); font-size:10px; letter-spacing:1.8px; font-weight:700;
}

/* ── 05 · Platform ──────────────────────────────────────────────────────── */

.section3--platform { overflow:hidden; background:var(--bg3); border-top:1px solid rgba(91,140,255,0.12); }
.pf3__bg {
  position:absolute; inset:0; pointer-events:none; opacity:0.13;
  background:url(../nj/integration.webp) center / cover no-repeat;
}
.pf3__scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,8,26,0.85),rgba(5,8,26,0.95)); }
.pfgrid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:rgba(91,140,255,0.18); border:1px solid rgba(91,140,255,0.18);
  border-radius:20px; overflow:hidden;
}
.pfcell { background:var(--card); padding:26px 24px; display:flex; flex-direction:column; gap:8px; transition:background .25s; }
.pfcell:hover { background:var(--card2); }
.pfcell__k { font-family:var(--mono); font-size:12px; letter-spacing:2px; font-weight:800; color:var(--c); }
.pfcell__d { color:var(--mut); font-size:13px; line-height:1.8; }
.pfbadges { display:flex; gap:12px; flex-wrap:wrap; }
.cbadge {
  border:1px solid rgba(138,148,184,0.3); color:var(--mut2);
  border-radius:999px; padding:9px 20px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:2px; font-weight:700;
}

/* ── 06 · Process ───────────────────────────────────────────────────────── */

.section3--process { background:var(--bg2); border-top:1px solid rgba(91,140,255,0.12); }
.steps3 {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.st3 {
  position:relative; padding:34px 28px;
  border-inline-start:1px solid rgba(91,140,255,0.16);
  display:flex; flex-direction:column; gap:14px;
  transition:background .25s;
}
.st3:hover { background:rgba(78,224,208,0.03); }
.st3__n {
  font-family:var(--mono); font-size:52px; font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb, var(--c) 55%, transparent);
}
.st3__title { font-size:19px; font-weight:800; }
.st3__dur {
  align-self:flex-start; border:1px solid color-mix(in srgb, var(--c) 30%, transparent); color:var(--c);
  border-radius:999px; padding:4px 14px; font-size:11.5px; font-weight:700;
}
.st3__desc { color:var(--mut); font-size:13.5px; line-height:1.9; }

/* ── Final CTA ──────────────────────────────────────────────────────────── */

.section3--fcta { overflow:hidden; padding:150px 48px; border-top:1px solid rgba(139,92,246,0.16); }
.fcta__glow {
  position:absolute; top:-180px; inset-inline-start:32%; width:620px; height:480px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,0.28),transparent 65%); filter:blur(70px); pointer-events:none;
}
.fcta { position:relative; max-width:860px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; }
.fcta__kicker { font-family:var(--mono); font-size:12px; letter-spacing:4px; font-weight:700; color:var(--teal-ink); }
.fcta__title { font-size:clamp(36px,5vw,64px); font-weight:800; line-height:1.3; }
.fcta__sub { color:var(--ink2); font-size:17px; font-weight:300; line-height:2; max-width:560px; }
.fcta__btns { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.fcta__btns .btn { padding:17px 40px; font-weight:800; }
/* ── Footer (v3 redesign) ───────────────────────────────────────────────── */

.site-footer { position:relative; overflow:hidden; background:var(--bg2); border-top:1px solid rgba(91,140,255,0.14); padding:0; }
.site-footer__hairline {
  position:absolute; top:0; inset-inline-start:0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(78,224,208,0.6),rgba(91,140,255,0.6),rgba(139,92,246,0.6),transparent);
}
.site-footer__glow {
  position:absolute; bottom:-180px; inset-inline-start:22%;
  width:560px; height:380px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(139,92,246,0.16),transparent 68%);
  filter:blur(70px);
}

.fcta2 {
  /* Local deviation: the design caps footer rows at var(--shell); we run them
     full-bleed so the footer (and its divider rules) reach both page edges. */
  position:relative; width:100%;
  padding:34px clamp(24px,4vw,80px) 26px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(91,140,255,0.12);
}
.fcta2__title { font-size:21px; font-weight:800; line-height:1.5; color:var(--ink); max-width:560px; }
.fcta2__btns { display:flex; gap:10px; flex-wrap:wrap; }
.fcta2__btn { text-decoration:none; font-size:14px; border-radius:11px; padding:11px 22px; transition:filter .2s, border-color .2s, color .2s; }
.fcta2__btn--grad {
  background:linear-gradient(135deg,rgba(78,224,208,0.62),rgba(91,140,255,0.66) 50%,rgba(139,92,246,0.7));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 30px rgba(91,140,255,0.25);
  color:#FFFFFF; font-weight:700;
}
.fcta2__btn--grad:hover { filter:brightness(1.15); color:#FFFFFF; }
.fcta2__btn--ghost { border:1px solid rgba(138,148,184,0.35); color:var(--ink); }
.fcta2__btn--ghost:hover { border-color:var(--teal-ink); color:var(--teal-ink); }

.fgrid {
  position:relative; width:100%;
  padding:32px clamp(24px,4vw,80px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px clamp(36px,4vw,72px);
}
.fbrand { display:flex; flex-direction:column; gap:12px; max-width:320px; }
.fbrand img { height:42px; width:56px; object-fit:cover; border-radius:9px; }
.fbrand__blurb { color:var(--mut); font-size:13px; line-height:1.8; }
.fbrand__badges { display:flex; gap:7px; flex-wrap:wrap; }
.fbadge {
  border:1px solid rgba(138,148,184,0.25); color:var(--mut2);
  border-radius:7px; padding:3px 9px;
  font-family:var(--mono); font-size:10px; letter-spacing:1.5px; font-weight:700;
}
.fgroup { display:flex; flex-direction:column; gap:11px; }
.fgroup__title { color:var(--ink); font-size:12.5px; font-weight:700; letter-spacing:1px; }
.fgroup a { color:var(--mut); text-decoration:none; font-size:13.5px; }
.fgroup a:hover { color:var(--teal-ink); }

.fnl { display:flex; flex-direction:column; gap:11px; min-width:250px; }
.fnl__field { display:flex; gap:8px; }
.fnl__field input {
  flex:1; min-width:0;
  background:var(--card); border:1px solid rgba(138,148,184,0.25);
  border-radius:10px; padding:10px 13px;
  color:var(--ink); font-size:13px; font-family:inherit; outline:none;
}
.fnl__field button {
  background:linear-gradient(135deg,rgba(78,224,208,0.62),rgba(91,140,255,0.66) 50%,rgba(139,92,246,0.7));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 30px rgba(91,140,255,0.25);
  color:#FFFFFF; font-weight:700;
  border-radius:10px; padding:10px 18px;
  font-size:13px; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.fnl__field button:hover { filter:brightness(1.12); }
.fnl__field button:disabled { opacity:.6; cursor:progress; filter:none; }
.site-footer__status { font-size:12px; line-height:1.6; min-height:16px; color:var(--mut); }
.site-footer__status[data-state="ok"] { color:var(--teal-ink); }
.site-footer__status[data-state="error"] { color:#FF8080; }
.fnl__contacts { display:flex; gap:8px 14px; flex-wrap:wrap; color:var(--mut); font-size:12px; }
.fnl__socials { display:flex; gap:8px; flex-wrap:wrap; }
.fnl__socials a {
  text-decoration:none; color:var(--mut2);
  border:1px solid rgba(138,148,184,0.25); border-radius:8px;
  padding:5px 11px; font-size:11.5px; font-weight:600;
}
.fnl__socials a:hover { border-color:var(--teal-ink); color:var(--teal-ink); }

.fbar {
  position:relative; border-top:1px solid rgba(138,148,184,0.12);
  width:100%; padding:16px clamp(24px,4vw,80px);
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between;
}
.fbar__copy { color:var(--dim); font-size:12px; }
.fbar__links { display:flex; gap:22px; flex-wrap:wrap; }
.fbar__links a { color:var(--dim); text-decoration:none; font-size:12px; }
.fbar__links a:hover { color:var(--teal-ink); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width:900px) {
  .section3, .section3--fcta { padding:80px 28px; }
  .hero3 { padding:60px 28px 40px; min-height:auto; }
  .site-header { padding:12px 20px; gap:10px 16px; }
  .site-nav { order:3; width:100%; flex-wrap:nowrap; gap:18px; overflow-x:auto; scrollbar-width:none; }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-nav__link { white-space:nowrap; }
  .nj3__copy, .nj3__media, .mm__shot, .mm__body { min-width:100%; }
  .shell3--row, .mm { gap:36px; }
  .cap3 { gap:18px; }
  .cap3.is-active .cap3__title { font-size:24px; }
  .cap3.is-active .cap3__n { font-size:40px; }
  .st3 { border-inline-start:0; border-top:1px solid rgba(91,140,255,0.16); }
}

@media (max-width:640px) {
  .section3, .section3--fcta { padding:64px 18px; }
  .hero3 { padding:48px 18px 36px; }
  .hero3__watermark { display:none; }
  .hstat { min-width:50%; }
  .mm__facts { gap:20px; }
  .btn { padding:13px 24px; font-size:15px; }
  .fgrid { grid-template-columns:1fr; }
  .fbrand, .fnl { max-width:none; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal-armed { opacity:1; transform:none; }
  .hero3__net, .hero3__ripple { display:none; }
}