/* =========================================================
   DN Shield — dark, technical .NET protection studio
   Purple -> blue gradient brand. Editorial, premium.
   ========================================================= */

:root{
  /* Brand gradient from the logo */
  --purple:#7C3AED; --purple-lt:#9F6BF4; --blue:#2563EB; --blue-lt:#4F86F7;
  --grad:linear-gradient(120deg, #7C3AED 0%, #4F6BF0 50%, #2563EB 100%);
  --grad-soft:linear-gradient(120deg, rgba(124,58,237,.16), rgba(37,99,235,.16));

  /* Dark surfaces (cool near-black with a faint plum tint) */
  --bg:#08080C; --bg-2:#0C0C13; --surface:#111119; --surface-2:#15151F; --raise:#1A1A26;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-grad:rgba(139,92,246,.35);

  /* Text */
  --ink:#F5F5FA; --ink-2:#C4C4D4; --muted:#8C8CA3; --faint:#7A7A92;
  --on-grad:#FFFFFF;

  --ok:#34D399; --warn:#FBBF24; --plan:#8C8CA3; --proto:#A78BFA;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1280px; --gut:clamp(1.15rem,4vw,3.5rem); --r:14px; --r-sm:9px;
  --ease:cubic-bezier(.22,.7,.3,1);

  --h1:clamp(2.6rem,1.5rem + 4.6vw,5rem);
  --h2:clamp(2rem,1.3rem + 2.8vw,3.4rem);
  --h3:clamp(1.3rem,1.1rem + .9vw,1.7rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ font-family:var(--body); background:var(--bg); color:var(--ink-2); line-height:1.65; font-size:1.0625rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden }
img,svg,picture{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ list-style:none }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.04; letter-spacing:-.02em; font-weight:800 }
::selection{ background:rgba(124,58,237,.4); color:#fff }
:focus-visible{ outline:2px solid var(--purple-lt); outline-offset:3px; border-radius:3px }
[hidden]{ display:none !important }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto }
  [data-reveal]{ opacity:1 !important; transform:none !important }
}

.wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto }
.wrap-narrow{ width:min(820px, 100% - var(--gut)*2); margin-inline:auto }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--purple); color:#fff; padding:.7rem 1rem; border-radius:var(--r-sm) }

.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem }
.eyebrow .n{ color:var(--purple-lt) }
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--line-2) }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.9rem 1.4rem; font-family:var(--display); font-weight:600; font-size:.98rem; border-radius:var(--r-sm); border:1px solid transparent; white-space:nowrap; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s }
.btn .icon{ width:18px; height:18px; transition:transform .25s var(--ease) }
.btn:hover .icon{ transform:translateX(3px) }
.btn-grad{ background:var(--grad); color:#fff; box-shadow:0 8px 30px -10px rgba(124,58,237,.6) }
.btn-grad:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(79,107,240,.7) }
.btn-ghost{ border-color:var(--line-2); color:var(--ink) }
.btn-ghost:hover{ border-color:var(--purple-lt); background:rgba(124,58,237,.08) }
.btn-sm{ padding:.62rem 1.05rem; font-size:.92rem }
.btn-lg{ padding:1.05rem 1.7rem; font-size:1.05rem }
.btn-on-grad{ background:#fff; color:#2b1a66 }
.btn-on-grad:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -12px rgba(0,0,0,.5) }
.btn-on-grad.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5) }
.btn-on-grad.ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; box-shadow:none }

.link{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-grad); padding-bottom:2px; transition:border-color .2s, color .2s }
.link .icon{ width:16px; height:16px; color:var(--purple-lt); transition:transform .25s var(--ease) }
.link:hover{ color:#fff; border-color:var(--purple-lt) }
.link:hover .icon{ transform:translateX(3px) }

/* ---------- Status pills ---------- */
.status{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap }
.status .dot{ width:7px; height:7px; border-radius:50% }
.status--available{ color:#9df0cf; border-color:rgba(52,211,153,.4) } .status--available .dot{ background:var(--ok); box-shadow:0 0 0 3px rgba(52,211,153,.15) }
.status--prototype{ color:#cdbcff; border-color:rgba(167,139,250,.45) } .status--prototype .dot{ background:var(--proto); box-shadow:0 0 0 3px rgba(167,139,250,.15) }
.status--dev{ color:#ffe3a3; border-color:rgba(251,191,36,.4) } .status--dev .dot{ background:var(--warn); box-shadow:0 0 0 3px rgba(251,191,36,.12) }
.status--planned{ color:var(--muted); border-color:var(--line-2) } .status--planned .dot{ background:var(--faint) }

/* ---------- Masthead ---------- */
.masthead{ position:sticky; top:0; z-index:100; background:rgba(8,8,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.mast{ display:flex; align-items:center; gap:2rem; height:70px }
.brand{ display:flex; align-items:center; gap:.65rem }
.brand img{ width:34px; height:34px }
.brand-name{ font-family:var(--display); font-weight:800; font-size:1.18rem; color:#fff; letter-spacing:-.02em }
.nav{ display:flex; gap:.35rem; margin-left:auto }
.nav a{ padding:.5rem .85rem; border-radius:var(--r-sm); font-weight:500; font-size:.96rem; color:var(--ink-2); transition:color .2s, background .2s }
.nav a:hover{ color:#fff; background:rgba(255,255,255,.05) }
.nav a.is-active{ color:#fff; background:var(--grad-soft) }
.mast-cta{ display:flex; align-items:center }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:var(--r-sm); flex-direction:column; align-items:center; justify-content:center; gap:5px }
.burger span{ width:20px; height:2px; background:#fff; transition:transform .25s var(--ease), opacity .2s }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }
.mnav{ border-top:1px solid var(--line); background:var(--bg-2) }
.mnav nav{ display:grid; padding:.5rem 0 1.5rem }
.mnav a{ display:flex; justify-content:space-between; align-items:center; padding:1rem 0; font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line) }
.mnav a .icon{ color:var(--purple-lt); width:20px; height:20px }
.mnav a.is-active{ color:#fff }
.mnav .mnav-cta{ margin-top:1.25rem; justify-content:center; font-size:1rem; border-bottom:0 }
@media (max-width:920px){ .nav,.mast-cta{ display:none } .burger{ display:flex; margin-left:auto } }

/* ---------- Sections ---------- */
.section{ padding-block:clamp(4rem,9vw,8rem); position:relative }
.section--tight{ padding-block:clamp(3rem,6vw,5rem) }
.bg-2{ background:var(--bg-2) }
.bg-surface{ background:var(--surface) }
.rule-top{ border-top:1px solid var(--line) }
.sec-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem 3rem; align-items:end; margin-bottom:clamp(2.2rem,5vw,3.8rem) }
.sec-head h2{ font-size:var(--h2); max-width:18ch }
.sec-head .lede{ color:var(--ink-2); font-size:1.12rem; max-width:52ch }
.sec-head .aside{ padding-bottom:.4rem }
@media (max-width:820px){ .sec-head{ grid-template-columns:1fr } }

.lede{ font-size:clamp(1.08rem,1rem + .5vw,1.3rem); color:var(--ink-2); line-height:1.6 }
.measure{ max-width:64ch }

/* ---------- Grid glow backdrop ---------- */
.glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.glow::before{ content:""; position:absolute; width:60vw; height:60vw; border-radius:50%; filter:blur(120px); opacity:.5; background:radial-gradient(circle, rgba(124,58,237,.35), transparent 60%) }
.glow--hero::before{ top:-20%; right:-10% }
.glow--hero::after{ content:""; position:absolute; width:45vw; height:45vw; left:-10%; bottom:-30%; border-radius:50%; filter:blur(120px); opacity:.4; background:radial-gradient(circle, rgba(37,99,235,.35), transparent 60%) }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.hero-media{ position:absolute; inset:0; z-index:0 }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.28 }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 8%, rgba(8,8,12,.6) 55%, rgba(8,8,12,.35) 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 40%, transparent 70%, rgba(8,8,12,.7) 100%);
}
.hero-grid-lines{ position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%) }
.hero-inner{ position:relative; z-index:2; padding:clamp(4.5rem,11vw,9rem) 0 clamp(3.5rem,8vw,7rem); max-width:50rem }
.hero .wrap{ position:relative; z-index:2 }
.hero-chip{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-grad); background:rgba(124,58,237,.08); padding:.4rem .8rem; border-radius:999px; margin-bottom:1.6rem }
.hero-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--purple-lt); box-shadow:0 0 0 4px rgba(167,139,250,.18) }
.hero h1{ font-size:var(--h1); font-weight:900; letter-spacing:-.035em; line-height:.98 }
.hero h1 .l2{ display:block }
.hero-sub{ margin-top:1.6rem; font-size:clamp(1.1rem,1rem + .6vw,1.35rem); color:var(--ink-2); max-width:46ch }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.3rem }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.8rem; color:var(--muted) }
.hero-meta span{ display:inline-flex; align-items:center; gap:.5rem }
.hero-meta .icon{ width:16px; height:16px; color:var(--purple-lt) }
@media (max-width:640px){ .hero-media img{ opacity:.18 } .hero-actions .btn{ width:100% } }

/* ---------- Logo / trust strip ---------- */
.proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2) }
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr) }
.proof-item{ padding:1.6rem 1.5rem 1.6rem 0; border-left:1px solid var(--line); padding-left:1.6rem }
.proof-item:first-child{ border-left:0; padding-left:0 }
.proof-item .k{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:#fff; display:flex; align-items:center; gap:.5rem }
.proof-item .k .icon{ width:18px; height:18px; color:var(--purple-lt) }
.proof-item p{ margin-top:.4rem; font-size:.92rem; color:var(--muted) }
@media (max-width:860px){ .proof-grid{ grid-template-columns:1fr 1fr } .proof-item{ padding:1.1rem 1rem 1.1rem 1.2rem; border-top:1px solid var(--line) } .proof-item:nth-child(-n+2){ border-top:0 } .proof-item:nth-child(odd){ border-left:0; padding-left:0 } }

/* ---------- The problem (editorial split) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center }
.split--text p+p{ margin-top:1rem }
@media (max-width:860px){ .split{ grid-template-columns:1fr } }

.decompile{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:0 30px 70px -30px rgba(0,0,0,.8) }
.decompile .bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2); font-family:var(--mono); font-size:.76rem; color:var(--muted) }
.decompile .bar .dots{ display:flex; gap:.4rem; margin-right:.6rem }
.decompile .bar .dots i{ width:10px; height:10px; border-radius:50%; background:var(--raise) }
.decompile pre{ margin:0; padding:1.2rem 1.3rem; font-family:var(--mono); font-size:.82rem; line-height:1.7; color:var(--ink-2); overflow-x:auto }
.decompile .before{ border-bottom:1px solid var(--line) }
.decompile .tag{ display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .5rem; border-radius:4px; margin-bottom:.6rem }
.decompile .tag.red{ color:#ffb4b4; background:rgba(255,80,80,.12) }
.decompile .tag.ok{ color:#9df0cf; background:rgba(52,211,153,.12) }

/* code syntax */
.c-kw{ color:#c59cff } .c-str{ color:#9df0cf } .c-num{ color:#ffd79a } .c-com{ color:var(--faint); font-style:italic } .c-attr{ color:#7fd0ff } .c-dim{ color:var(--faint) }

/* ---------- Feature groups ---------- */
.fgroup{ padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line) }
.fgroup:first-of-type{ border-top:0 }
.fgroup-head{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; margin-bottom:2rem }
.fgroup-ic{ width:48px; height:48px; border-radius:12px; background:var(--grad-soft); border:1px solid var(--line-grad); display:grid; place-items:center; color:var(--purple-lt) }
.fgroup-ic .icon{ width:24px; height:24px }
.fgroup-head h3{ font-size:var(--h3); display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }
.fgroup-head .ebadge{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#cdbcff; border:1px solid var(--line-grad); padding:.2rem .55rem; border-radius:999px }
.fgroup-head p{ margin-top:.5rem; color:var(--muted); max-width:62ch }
.frows{ display:grid; gap:0; border-top:1px solid var(--line) }
.frow{ display:grid; grid-template-columns:minmax(0,15rem) 1fr auto; gap:1.5rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--line); transition:padding-left .25s var(--ease) }
.frow:hover{ padding-left:.5rem }
.frow h4{ font-family:var(--display); font-weight:700; font-size:1.08rem; color:#fff; letter-spacing:-.01em }
.frow p{ color:var(--ink-2); font-size:.96rem }
@media (max-width:760px){ .frow{ grid-template-columns:1fr auto; grid-template-areas:"h s" "p p"; gap:.4rem 1rem } .frow h4{ grid-area:h } .frow .status{ grid-area:s } .frow p{ grid-area:p } .fgroup-head{ grid-template-columns:1fr } }

/* ---------- Editions ---------- */
.ed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2rem) }
@media (max-width:820px){ .ed-grid{ grid-template-columns:1fr } }
.ed-card{ position:relative; border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem); background:var(--surface); display:flex; flex-direction:column; overflow:hidden }
.ed-card--ent{ border-color:var(--line-grad); background:linear-gradient(180deg, rgba(124,58,237,.08), rgba(37,99,235,.04)), var(--surface) }
.ed-card--ent::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad) }
.ed-eyebrow{ font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem }
.ed-eyebrow .pill{ color:#cdbcff; border:1px solid var(--line-grad); border-radius:999px; padding:.15rem .55rem; font-size:.68rem }
.ed-card h3{ font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem) }
.ed-card .concept{ margin-top:.5rem; font-family:var(--display); font-weight:600; color:var(--purple-lt); font-size:1.05rem }
.ed-card .lede{ margin-top:1rem; font-size:1.02rem; color:var(--ink-2) }
.ed-list{ margin-top:1.5rem; display:grid; gap:.6rem; border-top:1px solid var(--line); padding-top:1.3rem }
.ed-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem }
.ed-list .icon{ width:18px; height:18px; color:var(--purple-lt); margin-top:.2rem; flex:none }
.ed-card .ed-cta{ margin-top:auto; padding-top:1.7rem }
.ed-note{ margin-top:1rem; font-family:var(--mono); font-size:.76rem; color:var(--muted) }

/* comparison table */
.cmp{ width:100%; border-collapse:collapse; font-size:.96rem }
.cmp th,.cmp td{ text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--line) }
.cmp thead th{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500 }
.cmp td.col,.cmp th.col{ text-align:center; width:150px }
.cmp tbody tr:hover{ background:rgba(255,255,255,.02) }
.cmp .cap{ color:var(--ink); font-weight:500 }
.cmp .yes{ color:var(--ok) } .cmp .no{ color:var(--faint) } .cmp .plan{ color:var(--muted); font-family:var(--mono); font-size:.78rem }
.cmp .icon{ width:18px; height:18px; display:inline-block }
.cmp .col-ent{ background:linear-gradient(180deg, rgba(124,58,237,.06), transparent) }
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface) }
@media (max-width:640px){ .cmp td.col,.cmp th.col{ width:90px } .cmp th,.cmp td{ padding:.8rem .7rem } }

/* ---------- Technology / virtualization ---------- */
.vm-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center }
@media (max-width:880px){ .vm-grid{ grid-template-columns:1fr } }
.codeblock{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#0b0b11; box-shadow:0 30px 70px -30px rgba(0,0,0,.8) }
.codeblock .bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2); font-family:var(--mono); font-size:.76rem; color:var(--muted) }
.codeblock .bar .dots{ display:flex; gap:.4rem; margin-right:.5rem }
.codeblock .bar .dots i{ width:10px; height:10px; border-radius:50%; background:var(--raise) }
.codeblock pre{ margin:0; padding:1.3rem 1.4rem; font-family:var(--mono); font-size:.86rem; line-height:1.8; overflow-x:auto; color:var(--ink-2) }
.vm-steps{ display:grid; gap:0; margin-top:1rem; counter-reset:step; border-top:1px solid var(--line) }
.vm-step{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.1rem 0; border-bottom:1px solid var(--line) }
.vm-step .num{ font-family:var(--mono); font-size:.82rem; color:var(--purple-lt); padding-top:.2rem }
.vm-step h4{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:#fff }
.vm-step p{ color:var(--ink-2); font-size:.95rem; margin-top:.2rem }

.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.principle{ background:var(--surface); padding:1.6rem }
.principle .icon{ width:22px; height:22px; color:var(--purple-lt); margin-bottom:.9rem }
.principle h4{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:#fff; margin-bottom:.4rem }
.principle p{ font-size:.93rem; color:var(--muted) }
@media (max-width:820px){ .principles{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .principles{ grid-template-columns:1fr } }

/* callout */
.callout{ border:1px solid var(--line-grad); border-left:3px solid var(--purple); border-radius:var(--r-sm); background:var(--grad-soft); padding:1.2rem 1.4rem; display:flex; gap:.9rem; align-items:flex-start }
.callout .icon{ width:22px; height:22px; color:var(--purple-lt); flex:none; margin-top:.15rem }
.callout p{ color:var(--ink-2); font-size:.96rem }
.callout strong{ color:#fff }

/* ---------- Roadmap ---------- */
.road{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.phase{ background:var(--surface); padding:1.7rem 1.6rem; position:relative }
.phase--current{ background:linear-gradient(180deg, rgba(124,58,237,.1), transparent), var(--surface) }
.phase .n{ font-family:var(--display); font-weight:800; font-size:2.3rem; color:var(--raise); letter-spacing:-.03em; line-height:1 }
.phase--current .n{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.phase h4{ font-family:var(--display); font-weight:700; font-size:1.12rem; color:#fff; margin:.7rem 0 .5rem }
.phase p{ font-size:.92rem; color:var(--muted) }
.phase .tag{ position:absolute; top:1.3rem; right:1.3rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#cdbcff; border:1px solid var(--line-grad); border-radius:999px; padding:.15rem .5rem }
@media (max-width:820px){ .road{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .road{ grid-template-columns:1fr } }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.3rem 0; font-family:var(--display); font-weight:700; font-size:1.12rem; color:#fff }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .icon{ width:22px; height:22px; color:var(--purple-lt); flex:none; transition:transform .25s var(--ease) }
.faq details[open] summary .icon{ transform:rotate(45deg) }
.faq .a{ padding:0 0 1.4rem; color:var(--ink-2); max-width:66ch }
.faq .a p+p{ margin-top:.8rem }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r); padding:clamp(2.5rem,6vw,4.5rem); background:var(--grad); text-align:center }
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 10%, rgba(255,255,255,.22), transparent 55%); pointer-events:none }
.cta-band > *{ position:relative; z-index:1 }
.cta-band h2{ color:#fff; font-size:var(--h2); max-width:20ch; margin-inline:auto }
.cta-band p{ color:rgba(255,255,255,.9); margin:1rem auto 0; max-width:52ch; font-size:1.12rem }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem }
.cta-band .fine{ margin-top:1.3rem; font-family:var(--mono); font-size:.78rem; color:rgba(255,255,255,.8) }

/* ---------- Page header ---------- */
.page-head{ padding:clamp(3.5rem,8vw,6rem) 0 clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid var(--line); position:relative; overflow:hidden }
.crumbs{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:1.3rem; display:flex; gap:.5rem; flex-wrap:wrap }
.crumbs a:hover{ color:#fff } .crumbs span:not(:last-child)::after{ content:"/"; margin-left:.5rem; color:var(--faint) }
.page-head h1{ font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem); max-width:18ch; font-weight:900; letter-spacing:-.03em }
.page-head .lede{ margin-top:1.3rem; max-width:58ch }

/* ---------- Contact form ---------- */
.contact-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr } }
.card{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:clamp(1.5rem,3.5vw,2.5rem) }
.form{ display:grid; gap:1.3rem }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr } }
.field{ display:grid; gap:.45rem }
.field label{ font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink) }
.field label .opt{ font-family:var(--mono); font-weight:400; font-size:.72rem; color:var(--muted); margin-left:.4rem; text-transform:uppercase; letter-spacing:.05em }
.field input,.field select,.field textarea{ width:100%; font:inherit; font-size:.98rem; color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.85rem 1rem; transition:border-color .15s, box-shadow .15s }
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F6BF4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:16px; padding-right:2.75rem }
.field textarea{ min-height:150px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--purple-lt); box-shadow:0 0 0 3px rgba(124,58,237,.2) }
.field .err{ display:none; font-size:.84rem; color:#ff9a9a }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#e5484d }
.field.invalid .err{ display:block }
.field .hint{ font-size:.84rem; color:var(--muted) }
.captcha-row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.captcha-q{ font-family:var(--mono); font-size:1.1rem; color:#fff; min-width:4ch }
.captcha-row input{ width:120px }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-foot{ display:grid; gap:.9rem }
.form-status{ display:none; padding:.9rem 1rem; border-radius:var(--r-sm); font-size:.95rem; border:1px solid var(--line-2); border-left:3px solid var(--purple) }
.form-status[data-state]{ display:block }
.form-status[data-state="error"]{ border-left-color:#e5484d; color:#ffc9c9 }
.form-status[data-state="success"]{ border-left-color:var(--ok); color:#b6f5da }
.form-success{ display:none }
.form-success[data-show="true"]{ display:block }
.form-success h3{ font-size:1.5rem; color:#fff }
.form-success p{ margin-top:.6rem; color:var(--ink-2) }

.contact-aside .blk{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:1.4rem; margin-bottom:1.1rem }
.contact-aside .blk .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem }
.contact-aside .blk a.big{ font-family:var(--display); font-weight:700; font-size:1.15rem; color:#fff; display:inline-flex; align-items:center; gap:.5rem }
.contact-aside .blk a.big .icon{ color:var(--purple-lt); width:18px; height:18px }
.contact-aside .blk a.big:hover{ color:var(--purple-lt) }
.contact-aside .blk p{ font-size:.94rem; color:var(--muted) }
.contact-aside .blk ul{ display:grid; gap:.5rem; margin-top:.3rem }
.contact-aside .blk li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem; color:var(--ink-2) }
.contact-aside .blk li .icon{ width:16px; height:16px; color:var(--purple-lt); margin-top:.25rem; flex:none }

/* ---------- Footer ---------- */
.site-foot{ border-top:1px solid var(--line); background:var(--bg-2) }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:2.5rem; padding:clamp(3rem,6vw,4.5rem) 0 2.5rem }
.foot-brand .brand{ margin-bottom:1rem }
.foot-brand p{ max-width:34ch; color:var(--muted); font-size:.95rem }
.foot-status{ margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.78rem; color:var(--ink-2) }
.foot-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 3px rgba(251,191,36,.15) }
.foot-col h2{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; font-weight:500; margin-bottom:1rem }
.foot-col a{ display:flex; align-items:center; gap:.5rem; padding:.3rem 0; color:var(--muted); font-size:.95rem; transition:color .2s }
.foot-col a:hover{ color:#fff }
.foot-col a .icon{ width:15px; height:15px; color:var(--purple-lt) }
.foot-bar{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.3rem 0; border-top:1px solid var(--line); font-family:var(--mono); font-size:.76rem; color:var(--muted) }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; gap:2rem } .foot-bar{ justify-content:center; text-align:center } }

/* ---------- 404 ---------- */
.big404{ font-family:var(--display); font-weight:900; font-size:clamp(6rem,22vw,16rem); line-height:.85; letter-spacing:-.05em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease) }
[data-reveal].in{ opacity:1; transform:none }

/* ---------- Overflow safety: let grid/flex cells shrink so code blocks scroll ---------- */
.split>*, .vm-grid>*, .contact-grid>*, .sec-head>*, .ed-card, .frow>*{ min-width:0 }
.decompile, .codeblock{ max-width:100% }
.decompile pre, .codeblock pre{ max-width:100% }
.callout{ min-width:0 }
.callout p{ overflow-wrap:anywhere }

/* 2026 redesign — solid surfaces, large editorial type, photographic hero. */
:root{--bg:#17191c;--bg-2:#111315;--surface:#202327;--surface-2:#262a2f;--raise:#2b3036;--ink:#f7f8fa;--ink-2:#c9cdd3;--muted:#a2a9b2;--faint:#929ba5;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.24);--r:4px;--r-sm:3px;--purple-lt:#8baeff;--line-grad:#496aaf;--h2:clamp(2.3rem,4.3vw,4.1rem);--h1:clamp(3.2rem,6.5vw,6.5rem);--wrap:1320px;--grad:linear-gradient(110deg,#2563eb,#2563eb)}
.utility{background:#111315;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--muted)}
.utility .wrap{min-height:35px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.utility span{display:flex;gap:10px;align-items:center}.utility i{width:6px;height:6px;background:#4f86f7}.utility b{color:#6d7784;font-weight:400}
.masthead{background:#1c1f23;backdrop-filter:none}.mast{height:82px}.brand img{width:40px;height:40px}.brand-name{font-size:1.35rem}.nav a.is-active{background:#272e39;border-bottom:2px solid var(--blue)}
.btn-grad{background:#2563eb;box-shadow:none}.btn-grad:hover{background:#3472fa;box-shadow:none;transform:translateY(-2px)}.btn-ghost{background:rgba(14,18,25,.2);border-color:#87909c}.btn-ghost:hover{background:#2b3038;border-color:#fff}.btn{min-height:46px}.btn-lg{min-height:58px}.grad-text{background:none;color:#79a3ff}.glow,.hero-grid-lines{display:none}
.hero{background:#10151d;isolation:isolate}.hero-media{inset:0 0 0 27%;z-index:-2}.hero-media picture{height:100%;width:100%}.hero-media img{height:100%;width:100%;object-fit:cover;object-position:66% center;opacity:1;filter:saturate(.4)}
.hero-media::after{background:linear-gradient(90deg,#10151d 0%,rgba(16,21,29,.88) 15%,rgba(16,21,29,.3) 68%,rgba(16,21,29,.15)),linear-gradient(0deg,rgba(16,21,29,.6),transparent 60%)}
.hero-inner{max-width:860px;padding:clamp(4rem,7vw,7rem) 0 3rem}.hero h1{max-width:12ch;line-height:.99;letter-spacing:-.055em}.hero h1 .l2{color:white}.hero-chip{border:0;background:none;border-radius:0;padding:0;color:#dae0e8;font-size:.69rem;letter-spacing:.13em}.hero-chip .dot{background:#4f86f7;border-radius:0;box-shadow:none;width:6px;height:6px}.hero-sub{font-size:clamp(1.05rem,1.4vw,1.22rem);max-width:47ch;color:#d2d8e0;line-height:1.65}.hero-actions{margin-top:1.8rem}.hero-meta{max-width:640px;margin-top:2.7rem;color:#c3cbd6;font-size:.7rem;gap:12px 22px}.hero-meta .icon{color:#82a8ff}
.proof{background:#202327}.proof-item{padding-block:2rem}.proof-item .k{font-size:1rem}.proof-item p{font-size:.86rem;max-width:27ch}
.section{padding-block:clamp(4rem,7vw,7rem)}.eyebrow{font-size:.7rem;color:#adb7c3}.eyebrow .n{color:#75a0ff}.eyebrow::before{width:25px;background:#557bbf}.sec-head{grid-template-columns:1.5fr .5fr;align-items:end}.sec-head .aside{justify-self:end}.sec-head h2{max-width:23ch;letter-spacing:-.045em}.sec-head .lede{max-width:60ch;font-size:1.05rem}.split{gap:clamp(2rem,6vw,6rem)}
.protection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.protection-card{padding:30px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#1b1e22}.cap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#93b3ff;font:11px var(--mono);letter-spacing:.07em}.cap-top .icon{width:28px;height:28px}.protection-card h3{font-size:clamp(1.6rem,2.3vw,2rem);line-height:1.1;letter-spacing:-.03em;margin:35px 0 20px}.protection-card p{font-size:.96rem;color:#b8c0ca}.cap-foot{margin-top:auto;padding-top:30px;display:flex;align-items:flex-start;flex-direction:column;gap:22px}.cap-foot .link{font-size:.9rem}.status{font-size:.65rem;border-radius:2px;letter-spacing:.025em}
.ed-grid{gap:24px}.ed-card{padding:clamp(1.5rem,3.8vw,3.5rem);border-top:3px solid #627286;background:#202327}.ed-card--ent{background:#1c273a;border-color:#486aab;border-top-color:#568aff}.ed-card--ent::before{display:none}.ed-card h3{font-size:clamp(1.85rem,3vw,2.8rem);max-width:16ch;letter-spacing:-.04em}.ed-card .concept{color:#a4bce9}.ed-eyebrow{margin-bottom:1.5rem}.ed-list{padding-top:1rem}.ed-list li{flex-wrap:wrap}.ed-cta .btn{width:100%}
.page-head{background:#202327;border-bottom:1px solid #3a414a}.page-head::after{content:'';position:absolute;right:4%;top:10%;width:200px;height:200px;background:url('/images/brand/mark-192.webp') center/contain no-repeat;opacity:.07;pointer-events:none}.page-head h1{font-size:clamp(2.6rem,5.7vw,5.5rem);letter-spacing:-.045em}.page-head .wrap{position:relative;z-index:1}.fgroup{border-radius:4px}.fgroup-head{background:#202327}.frow{background:#191c20}.codeblock,.decompile{box-shadow:0 18px 45px rgba(0,0,0,.17);border-radius:4px}.vm-step .num{border-radius:2px}.road-card{border-radius:4px}.cta-band{background:#245bd7;text-align:left;border-radius:4px;padding:clamp(2rem,5vw,5rem)}.cta-band::after{display:none}.cta-band h2{margin:0;max-width:21ch}.cta-band p{margin:1.25rem 0 0}.cta-band .actions{justify-content:flex-start}.cta-band .fine{color:#dbe6ff}.btn-on-grad{color:#1747af}.site-foot{background:#101214}.foot-grid{gap:2rem}.foot-col a,.contact-aside a{overflow-wrap:anywhere}.cmp-wrap{overflow-x:auto}.icon{flex-shrink:0}
@media(min-width:1600px){.hero-inner{padding-top:8rem;padding-bottom:4rem}.hero-media{left:35%}}
@media(max-width:1000px){.protection-card{padding:24px}.hero-media{left:15%}.hero-media::after{background:linear-gradient(90deg,#10151d,rgba(16,21,29,.75) 40%,rgba(16,21,29,.25))}.hero h1{font-size:clamp(3.4rem,8vw,5.4rem)}}
@media(max-width:820px){.sec-head{grid-template-columns:1fr}.sec-head .aside{justify-self:start}.protection-grid{grid-template-columns:1fr}.protection-card h3{margin-top:22px;max-width:22ch}.cap-foot{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.hero-inner{padding-top:4rem}.hero-media{inset:0}.hero-media::after{background:linear-gradient(90deg,rgba(16,21,29,.96),rgba(16,21,29,.6)),linear-gradient(0deg,#10151d,transparent)}.hero-sub{max-width:45ch}}
@media(max-width:560px){.utility .wrap{min-height:31px}.utility span:last-child{display:none}.mast{height:70px}.brand-name{font-size:1.2rem}.hero h1{font-size:clamp(2.9rem,11.8vw,4.2rem)}.hero-inner{padding:3.5rem 0 2rem}.hero-chip{font-size:.58rem;letter-spacing:.07em}.hero-sub{font-size:1rem}.hero-media img{opacity:.7;object-position:65% center}.hero-actions{gap:10px}.hero-meta{font-size:.65rem;gap:12px;margin-top:2rem}.proof-item .k{font-size:.85rem}.proof-item p{font-size:.8rem}.proof-item{padding-block:1.4rem}.ed-card h3{max-width:16ch}.status{white-space:normal}.frow{grid-template-columns:1fr;grid-template-areas:'h' 's' 'p'}.frow .status{justify-self:start}.page-head::after{width:120px;height:120px}.cta-band .actions .btn{width:100%}.btn{white-space:normal;text-align:center}.foot-bar{justify-content:flex-start;text-align:left}}