/* ═══════════════════════════════════════════════
   Axon Agentic Engineering — Shared Stylesheet
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

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

:root {
  --bg:      #07070F;
  --surface: #0C0C15;
  --card:    #111119;
  --border:  #24242F;
  --accent:  #E8EBF4;
  --accent2: #AAB2C6;
  --success: #BFE9D4;
  --warning: #E8D9B0;
  --danger:  #E6A0AC;
  --text:    #E9E9F2;
  --muted:   #868EA0;
  --white:   #FFFFFF;
  --glass-bg:     rgba(255,255,255,0.042);
  --glass-bg2:    rgba(255,255,255,0.065);
  --glass-stroke: rgba(255,255,255,0.11);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.08) inset;
  --font-d: 'Outfit', sans-serif;
  --font-b: 'Inter', sans-serif;
  --font-m: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
  --font-logo: 'Michroma', sans-serif;

  /* ── The signature: one glowing-gray cursor, everywhere ── */
  --cursor:      #AAB2C6;
  --cursor-glow: 0 0 6px rgba(170,178,198,0.75), 0 0 15px rgba(170,178,198,0.32);
}

html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-x: none; max-width: 100vw; }
body {
  font-family: var(--font-b);
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.7; overflow-x: hidden; overscroll-behavior-x: none;
  max-width: 100vw;
}

/* Fixed background orbs — always visible behind glass surfaces.
   Slow drift makes the glass feel like it's floating, not painted on. */
body::before {
  content: "";
  position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 12% 18%, rgba(232,235,244,0.09) 0%, transparent 62%),
    radial-gradient(ellipse 65% 50% at 88% 78%, rgba(170,178,198,0.065) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 52% 52%, rgba(232,235,244,0.038) 0%, transparent 65%);
  animation: orbdrift 32s ease-in-out infinite alternate;
}
@keyframes orbdrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.2%, 1.8%, 0) scale(1.07); }
}

/* Film grain — the texture that makes glass read as glass, not flat plastic */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

a { color: var(--accent); text-decoration: none; }

/* ── UTILITIES ── */
.container { max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.text-center { text-align: center; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── GLASS CARD ── */
.glass {
  background: var(--glass-bg2);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  position: relative; overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none; z-index: 0;
}
.glass > * { position: relative; z-index: 1; }

/* ── A²E MARK ── */
.mark {
  font-family: 'Michroma', sans-serif; white-space: nowrap;
  line-height: 1; display: inline-block;
  --c1: #FFFFFF; --c2: #AAB2C6; --side: #566072;
  --caret: #E8ECF5; --glow: rgba(255,255,255,0.26);
  filter: drop-shadow(0 1px 6px var(--glow));
}
.mark .gloss {
  -webkit-text-fill-color: transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.07) 34%, rgba(255,255,255,0) 52%),
    linear-gradient(150deg, var(--c1) 0%, var(--c2) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.mark .asq {
  position: relative; display: inline-block;
  transform: perspective(620px) rotateY(-13deg); transform-origin: center;
}
.mark .a3d { position: relative; text-shadow: 0.05em 0.018em 0 var(--side); }
.mark .sup2 {
  position: absolute; top: -0.14em; right: -0.02em;
  font-size: 0.5em; line-height: 1; font-family: 'Michroma', sans-serif;
  text-shadow: 0.05em 0.02em 0 var(--side);
}
.mark .eletter { margin-left: 0.06em; }
.mark .caret {
  display: inline-block; width: 0.055em; height: 0.82em;
  background: var(--cursor); border-radius: 1px;
  margin-left: 0.16em; vertical-align: -0.06em;
  box-shadow: var(--cursor-glow);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* The blinking caret reads as an intentional terminal cursor only on the large
   standalone hero mark. Inside the small nav/footer lockups it sits against the
   divider rule and flickers like a stray clipped letter — hide it there. */
.lockup .mark .caret, .footer-logo .mark .caret, .hero-lockup .mark .caret { display: none; }

/* ── BINARY HEARTBEAT (terminal icon — replaces emoji) ──
   A monospace bit that types/erases 0↔1 behind the signature cursor. */
.bit {
  display: inline-flex; align-items: center; gap: 0.12em;
  font-family: var(--font-m); line-height: 1; color: var(--accent2);
  font-style: normal;
}
.bit-v {
  display: inline-block; min-width: 0.64em; font-style: normal;
  text-shadow: 0 0 10px rgba(170,178,198,0.5);
}
.bit-c {
  display: inline-block; width: 0.1em; height: 0.92em;
  background: var(--cursor); border-radius: 1px;
  box-shadow: var(--cursor-glow);
  animation: blink 1.05s steps(1) infinite;
}

.lockup { display: inline-flex; align-items: center; gap: 0.85rem; }
.lockup-rule { width: 1px; height: 38px; background: var(--glass-stroke); }
.lockup-words { display: flex; flex-direction: column; line-height: 1; }
.lk-axon { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.18em; color: var(--white); }
.lk-sub  { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 18px 0; transition: all .35s ease;
}
nav.scrolled {
  background: rgba(7,7,15,0.72);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom-color: rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 4px 24px rgba(0,0,0,0.4);
  padding: 11px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { text-decoration: none; }
.nav-logo .mark { font-size: 1.5rem; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 13px; color: var(--muted); transition: color .2s;
  font-family: var(--font-d); font-weight: 500;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-cta {
  background: var(--accent); color: #0B0B12 !important;
  font-weight: 700 !important; padding: 9px 20px; border-radius: 8px;
  font-size: 13px !important; transition: opacity .2s, transform .2s !important;
}
.nav-cta:hover { opacity: .9; transform: translateY(-1px); }

/* ── MOBILE NAV (hamburger) ── */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; z-index: 210;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(7,7,15,0.94);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 0 28px;
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease;
}
.mobile-menu.open { max-height: 360px; padding: 10px 28px 22px; }
.mobile-menu a {
  padding: 15px 2px; font-family: var(--font-d); font-weight: 600; font-size: 15px;
  color: var(--text); border-bottom: 1px solid var(--border); transition: color .2s;
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu .mm-cta {
  margin-top: 14px; background: var(--accent); color: #0B0B12; text-align: center;
  border-radius: 9px; padding: 14px; border: none; font-weight: 700;
}
.mobile-menu .mm-cta:hover { color: #0B0B12; opacity: .9; }
@media(max-width:680px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}
@media(max-width:768px) {
  .nav-inner { position: relative; justify-content: center; }
  .nav-toggle { position: absolute; right: 0; }
}
@media(max-width:430px) {
  .nav-logo .lockup-rule { height: 28px; }
  .nav-logo .lk-axon { font-size: 11px; letter-spacing: 0.2em; }
  .nav-logo .lk-sub  { font-size: 8px; letter-spacing: 0.18em; margin-top: 5px; }
}

/* ── SECTIONS ── */
.section { padding: 96px 0; }
.section + .section { border-top: 1px solid var(--border); }
.section-label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent2); font-weight: 500; margin-bottom: 14px; font-family: var(--font-m);
}
.section-label::before { content: "// "; color: var(--accent2); opacity: 0.55; }
.section-title {
  font-family: var(--font-d);
  font-size: clamp(24px,3.5vw,38px); font-weight: 800;
  line-height: 1.2; margin-bottom: 14px;
  background: linear-gradient(176deg, #FFFFFF 0%, #ECEEF3 40%, #B8BECD 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 1px 1px rgba(0,0,0,0.16);
}
.section-sub { font-size: 16px; color: var(--muted); max-width: 580px; line-height: 1.65; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #0B0B12;
  font-size: 15px; font-weight: 700; padding: 15px 28px;
  border-radius: 10px; transition: opacity .2s, transform .2s; font-family: var(--font-d);
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); color: #0B0B12; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-bg); color: var(--text);
  font-size: 15px; font-weight: 600; padding: 15px 28px;
  border-radius: 10px; border: 1px solid var(--glass-stroke);
  transition: border-color .2s, color .2s, transform .2s; font-family: var(--font-d);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent2); font-size: 14px; font-weight: 600;
  font-family: var(--font-d); transition: color .2s, gap .2s;
  border: none; background: none; cursor: pointer; padding: 0;
}
.btn-ghost:hover { color: var(--white); gap: 12px; }

/* ── PAGE HERO (sub-pages) ── */
.page-hero {
  padding: 160px 0 80px;
  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(232,235,244,0.09) 0%, transparent 60%);
  border-bottom: 1px solid var(--border);
}
/* Inner pages carry the plain phosphor treatment (texture, no bezel/log) in
   place of the removed .wm-mark watermark. The copy must clear the backdrop. */
.page-hero.crt-hero > .container { position: relative; z-index: 2; }
.page-hero h1 {
  font-family: var(--font-d);
  font-size: clamp(32px,5vw,56px); font-weight: 900;
  line-height: 1.1; margin-bottom: 14px;
  letter-spacing: -0.5px;
  background: linear-gradient(176deg, #FFFFFF 0%, #EDEFF4 38%, #B4BACA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: phosphor-pulse 6s linear infinite;
}
.ph-typed {
  -webkit-text-fill-color: #E8EBF4;
  color: #E8EBF4;
  animation: phosphor-pulse-typed 6s linear infinite;
  animation-delay: -1.2s;
}
.page-hero-caret {
  display: inline-block;
  width: 3px; height: 0.78em;
  background: var(--cursor);
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: -0.05em;
  animation: blink 1.15s steps(1) infinite, phosphor-caret-glow 5s ease-in-out infinite;
  animation-delay: 0s, -0.8s;
}
.page-hero p {
  font-size: clamp(16px,2vw,19px); color: var(--muted);
  max-width: 580px; line-height: 1.65; margin-bottom: 32px;
}

/* ── MARQUEE (terminal status feed) ── */
.marquee-wrap {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 14px 0; overflow: hidden;
  background: rgba(255,255,255,0.014);
}
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 36s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 12px; font-weight: 400; color: var(--muted);
  font-family: var(--font-m); text-transform: lowercase; letter-spacing: 0.01em;
}
.marquee-item::before {
  content: "▸"; font-size: 11px; color: var(--cursor);
  text-shadow: var(--cursor-glow);
}

/* ── STEP CONNECTOR ── */
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 52px; }
.step-row { display: flex; gap: 0; }
.step-line { display: flex; flex-direction: column; align-items: center; width: 56px; flex-shrink: 0; }
.step-dot {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-weight: 800; font-size: 16px; color: #0B0B12;
  background: linear-gradient(135deg,#FFFFFF,#A6AEC2);
  box-shadow: 0 4px 16px rgba(255,255,255,.12);
}
.step-connector { width: 2px; flex: 1; min-height: 16px; background: linear-gradient(to bottom, rgba(232,235,244,.35), rgba(232,235,244,.06)); margin: 5px 0; }
.step-body { flex: 1; padding: 0 0 44px 24px; }
.step-tag   { font-family: var(--font-m); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--accent2); margin-bottom: 4px; }
.step-title { font-family: var(--font-d); font-size: 19px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.step-desc  { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 560px; }
.step-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: rgba(191,233,212,.08); border: 1px solid rgba(191,233,212,.2);
  border-radius: 6px; padding: 5px 12px; font-size: 12px; color: var(--success); font-weight: 600;
}

/* ── FAQ ── */
.faq-list { margin-top: 52px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-stroke); border-radius: 12px; overflow: hidden;
  transition: border-color .2s; box-shadow: var(--glass-shadow); position: relative;
}
.faq-item::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 35%);
  pointer-events: none; z-index: 0;
}
.faq-q, .faq-a { position: relative; z-index: 1; }
.faq-item.open { border-color: rgba(232,235,244,.3); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; cursor: pointer; user-select: none;
  font-family: var(--font-d); font-size: 15px; font-weight: 600; color: var(--white); gap: 16px;
}
.faq-q:hover { color: var(--accent); }
.faq-icon { font-size: 20px; color: var(--muted); flex-shrink: 0; transition: transform .25s; }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 24px; font-size: 14px; color: var(--muted); line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 400px; padding: 0 24px 20px; }

/* ── CTA SECTION ── */
.cta-section {
  padding: 100px 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(232,235,244,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 20%, rgba(170,178,198,.05) 0%, transparent 60%);
  border-top: 1px solid var(--border);
}
.cta-box {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(170,178,198,.05));
  border: 1px solid rgba(255,255,255,0.13); border-radius: 20px;
  padding: 60px 48px; text-align: center;
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.12) inset;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
}
.cta-box > * { position: relative; z-index: 1; }
@media(max-width:600px) { .cta-box { padding: 40px 24px; } }
.cta-box h2 {
  font-family: var(--font-d); font-size: clamp(26px,4vw,40px); font-weight: 800;
  margin-bottom: 14px; line-height: 1.2;
  background: linear-gradient(176deg, #FFFFFF 0%, #ECEEF3 40%, #B8BECD 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.cta-box p  { font-size: 16px; color: var(--muted); margin-bottom: 36px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.65; }
.cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.cta-contact { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.cc-item { text-align: center; }
.cc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 4px; font-family: var(--font-m); }
.cc-val   { font-size: 15px; font-weight: 600; color: var(--accent); }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--border); padding: 48px 0 32px; }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 36px; }
.footer-logo .mark { font-size: 1.2rem; }
.footer-tagline { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 220px; line-height: 1.6; }
.footer-col-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-family: var(--font-m); font-weight: 500; margin-bottom: 12px; display: block; }
.footer-col-links { display: flex; flex-direction: column; gap: 8px; }
.footer-col-links a { font-size: 13px; color: var(--muted); transition: color .2s; font-family: var(--font-d); }
.footer-col-links a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 12px; color: var(--muted); font-family: var(--font-d); }

/* ═══════════════════════════════════════════════
   EXPANDABLE SECTIONS (progressive disclosure)
   ═══════════════════════════════════════════════ */
.exp { cursor: pointer; }
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.exp-toggle {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--glass-stroke); background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; color: var(--accent2); font-weight: 400;
  font-family: var(--font-d);
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s, background .2s;
}
.exp:hover .exp-toggle { color: var(--white); background: rgba(255,255,255,0.1); border-color: var(--accent2); }
.exp.open .exp-toggle { transform: rotate(135deg); color: var(--white); background: rgba(255,255,255,0.12); }
.exp-body {
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition: max-height .4s ease, opacity .35s ease, margin-top .35s ease;
}
.exp.open .exp-body { max-height: 480px; opacity: 1; margin-top: 14px; }
.exp-teaser { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; opacity: .8; transition: opacity .3s; }
.exp.open .exp-teaser { opacity: 0; height: 0; margin: 0; }

/* ═══════════════════════════════════════════════
   BRAND BAND — large logo centerpiece
   ═══════════════════════════════════════════════ */
.brand-band {
  padding: 120px 0; text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 55% 75% at 50% 50%, rgba(232,235,244,0.08) 0%, transparent 70%),
    var(--surface);
}
.brand-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(232,235,244,0.06) 0%, transparent 12%),
    radial-gradient(circle at 82% 65%, rgba(170,178,198,0.05) 0%, transparent 14%);
}
.brand-band-inner { position: relative; z-index: 1; }
.mark-xl { font-size: clamp(72px, 17vw, 172px); display: inline-block; }
.mark-float { animation: floaty 6.5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.brand-band-line {
  margin-top: 34px; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(16px,2.4vw,22px); letter-spacing: .01em;
  background: linear-gradient(176deg, #FFFFFF 0%, #AAB2C6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.brand-band-sub {
  margin-top: 12px; font-size: 13px; color: var(--muted);
  max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

/* Faint watermark variant (behind content) */
.wm-mark {
  position: absolute; pointer-events: none; user-select: none; z-index: 0;
  font-family: 'Michroma', sans-serif; white-space: nowrap; line-height: 1;
  color: rgba(255,255,255,0.025);
  font-size: clamp(200px, 46vw, 520px);
}

/* ═══════════════════════════════════════════════
   MOBILE REFINEMENTS
   ═══════════════════════════════════════════════ */
@media(max-width:680px) {
  .section { padding: 72px 0; }
  .section-sub { font-size: 15px; }
}
@media(max-width:560px) {
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .cta-box { padding: 40px 22px; }
  .cta-contact { gap: 24px; }
  .footer-inner { gap: 28px; }
  .brand-band { padding: 84px 0; }
  .step-body { padding-left: 18px; }
  .step-line { width: 46px; }
  .step-dot { width: 38px; height: 38px; font-size: 15px; }
}

/* ── Respect reduced-motion: keep the glow, drop the movement ── */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .mark-float, .mark-hero, .marquee-track { animation: none; }
  .bit-c, .mark .caret, .hero-caret { animation: none; opacity: 1; }
  .page-hero h1, .ph-typed, .page-hero-caret { animation: none; }
  .page-hero h1 { filter: drop-shadow(0 0 10px rgba(170,178,198,0.28)) drop-shadow(0 0 28px rgba(170,178,198,0.10)); }
  .ph-typed { filter: drop-shadow(0 0 8px rgba(170,178,198,0.45)) drop-shadow(0 0 22px rgba(170,178,198,0.18)); }
  .page-hero-caret { box-shadow: var(--cursor-glow); }
}

/* ══════════════════════════════════════════
   PHOSPHOR PULSE — delete this block to revert
   Simulates the slow bloom-and-decay of a phosphor screen coating.
   Applied to glowing text + cursors only; everything else is unaffected.
   ══════════════════════════════════════════ */
/* Irregular CRT flicker: mostly steady glow, with quick stutters,
   a hard dip, and a hot re-strike — like tube voltage wavering. */
@keyframes phosphor-pulse {
  0%, 13%  { filter: drop-shadow(0 0 14px rgba(170,178,198,0.60)) drop-shadow(0 0 36px rgba(170,178,198,0.24)); }
  14%      { filter: drop-shadow(0 0 6px rgba(170,178,198,0.25)) drop-shadow(0 0 14px rgba(170,178,198,0.08)); }
  15%, 32% { filter: drop-shadow(0 0 14px rgba(170,178,198,0.60)) drop-shadow(0 0 36px rgba(170,178,198,0.24)); }
  33%      { filter: drop-shadow(0 0 24px rgba(170,178,198,1.0)) drop-shadow(0 0 60px rgba(170,178,198,0.50)); }
  35%      { filter: drop-shadow(0 0 14px rgba(170,178,198,0.60)) drop-shadow(0 0 36px rgba(170,178,198,0.24)); }
  36%      { filter: drop-shadow(0 0 8px rgba(170,178,198,0.32)) drop-shadow(0 0 18px rgba(170,178,198,0.10)); }
  37%, 58% { filter: drop-shadow(0 0 14px rgba(170,178,198,0.60)) drop-shadow(0 0 36px rgba(170,178,198,0.24)); }
  59%      { filter: drop-shadow(0 0 4px rgba(170,178,198,0.18)) drop-shadow(0 0 10px rgba(170,178,198,0.05)); }
  60%      { filter: drop-shadow(0 0 22px rgba(170,178,198,0.95)) drop-shadow(0 0 55px rgba(170,178,198,0.45)); }
  62%, 84% { filter: drop-shadow(0 0 14px rgba(170,178,198,0.60)) drop-shadow(0 0 36px rgba(170,178,198,0.24)); }
  85%      { filter: drop-shadow(0 0 9px rgba(170,178,198,0.38)) drop-shadow(0 0 22px rgba(170,178,198,0.13)); }
  86%,100% { filter: drop-shadow(0 0 14px rgba(170,178,198,0.60)) drop-shadow(0 0 36px rgba(170,178,198,0.24)); }
}
@keyframes phosphor-pulse-typed {
  0%, 13%  { filter: drop-shadow(0 0 12px rgba(170,178,198,0.68)) drop-shadow(0 0 32px rgba(170,178,198,0.28)); }
  14%      { filter: drop-shadow(0 0 5px rgba(170,178,198,0.28)) drop-shadow(0 0 12px rgba(170,178,198,0.09)); }
  15%, 32% { filter: drop-shadow(0 0 12px rgba(170,178,198,0.68)) drop-shadow(0 0 32px rgba(170,178,198,0.28)); }
  33%      { filter: drop-shadow(0 0 22px rgba(170,178,198,1.0)) drop-shadow(0 0 55px rgba(170,178,198,0.55)); }
  35%      { filter: drop-shadow(0 0 12px rgba(170,178,198,0.68)) drop-shadow(0 0 32px rgba(170,178,198,0.28)); }
  36%      { filter: drop-shadow(0 0 7px rgba(170,178,198,0.35)) drop-shadow(0 0 16px rgba(170,178,198,0.11)); }
  37%, 58% { filter: drop-shadow(0 0 12px rgba(170,178,198,0.68)) drop-shadow(0 0 32px rgba(170,178,198,0.28)); }
  59%      { filter: drop-shadow(0 0 4px rgba(170,178,198,0.20)) drop-shadow(0 0 9px rgba(170,178,198,0.06)); }
  60%      { filter: drop-shadow(0 0 20px rgba(170,178,198,1.0)) drop-shadow(0 0 50px rgba(170,178,198,0.50)); }
  62%, 84% { filter: drop-shadow(0 0 12px rgba(170,178,198,0.68)) drop-shadow(0 0 32px rgba(170,178,198,0.28)); }
  85%      { filter: drop-shadow(0 0 8px rgba(170,178,198,0.42)) drop-shadow(0 0 20px rgba(170,178,198,0.15)); }
  86%,100% { filter: drop-shadow(0 0 12px rgba(170,178,198,0.68)) drop-shadow(0 0 32px rgba(170,178,198,0.28)); }
}
@keyframes phosphor-caret-glow {
  0%, 13%  { box-shadow: 0 0 8px rgba(170,178,198,0.80), 0 0 18px rgba(170,178,198,0.38); }
  14%      { box-shadow: 0 0 3px rgba(170,178,198,0.35), 0 0 7px rgba(170,178,198,0.12); }
  15%, 32% { box-shadow: 0 0 8px rgba(170,178,198,0.80), 0 0 18px rgba(170,178,198,0.38); }
  33%      { box-shadow: 0 0 14px rgba(170,178,198,1.0), 0 0 34px rgba(170,178,198,0.75); }
  35%, 58% { box-shadow: 0 0 8px rgba(170,178,198,0.80), 0 0 18px rgba(170,178,198,0.38); }
  59%      { box-shadow: 0 0 3px rgba(170,178,198,0.30), 0 0 6px rgba(170,178,198,0.10); }
  60%      { box-shadow: 0 0 13px rgba(170,178,198,1.0), 0 0 30px rgba(170,178,198,0.68); }
  62%, 84% { box-shadow: 0 0 8px rgba(170,178,198,0.80), 0 0 18px rgba(170,178,198,0.38); }
  85%      { box-shadow: 0 0 4px rgba(170,178,198,0.42), 0 0 9px rgba(170,178,198,0.16); }
  86%,100% { box-shadow: 0 0 8px rgba(170,178,198,0.80), 0 0 18px rgba(170,178,198,0.38); }
}

/* ══════════════════════════════════════════
   CRT SCAN LINE — delete this block + the JS lines in main.js to revert

   RETUNED 2026-08-11: was 8s / 0.07 peak / position:fixed over the whole
   document. Now 20s / 0.04 and CONFINED to the screen box — main.js
   reparents it into .hero (or .page-hero) instead of <body>.

   The scope change is the important one. Every other CRT effect lives
   inside the bezel; a sweep that washed over the nav and the bezel edge
   broke the physical-screen illusion the frame exists to create. Light
   belongs ON the screen, not over the room.
   ══════════════════════════════════════════ */
#crt-scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 40%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200,210,230,0.017) 35%,
    rgba(200,210,230,0.04) 50%,
    rgba(200,210,230,0.017) 65%,
    transparent 100%
  );
  animation: crt-scan 20s linear infinite;
  will-change: transform;
}
/* On the home hero the screen box is inset by the bezel, so the sweep
   inherits the same geometry and rounds off against the same corners. */
.hero #crt-scan { top: 88px; left: 26px; right: 26px; border-radius: 10px; }
@media(max-width:900px) { .hero #crt-scan { top: 0; left: 0; right: 0; border-radius: 0; } }
@keyframes crt-scan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(280%); }
}
@media (prefers-reduced-motion: reduce) {
  #crt-scan { display: none; }
}
/* ══════════════════════════════════════════
   END CRT SCAN LINE
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CRT SCREEN — the hero backdrop (added 2026-08-11)

   Replaces the removed .hero-watermark. The viewport reads as the glass
   face of a machine that builds websites, with a real Axon build log
   running behind the copy. Two intensities:

     .crt-hero            → texture only (inner pages, .page-hero)
     .crt-hero.framed     → texture + bezel + boot log (home hero)

   ── LAYER ORDER (z-index), all pointer-events:none ──
     0  crt-lines   scanline pitch          1  crt-tube   vignette + bloom
     0  boot-log    the build log           2  fx-grille  RGB triads
     2  fx-rough    scanline irregularity   3  fx-noise   crawling grain
     3  #crt-scan   travelling sweep        4  fx-sheen   glass reflection
     2  hero-inner  THE COPY — always above the backdrop

   ── DELIBERATELY NOT SHIPPED, do not re-add ──
   ✗ HUM BAR (slow dark AC-ripple roll). Not a tuning failure — the page
     background is #07070F = rgb(7,7,15), so compositing 13% black over it
     yields ~rgb(6,6,13), a 1-2 level shift out of 255. Verified empirically
     at 0.85 alpha (6.5x) with the animation paused: the background still
     does not move. GENERAL RULE: a subtractive effect has nothing to
     subtract on a near-black surface. On a dark UI the only perceptible
     travelling band is an additive one — which is what #crt-scan already is.
   ✗ EDGE DEFOCUS (backdrop-filter blur ring). Held 60fps on the dev Mac,
     which proves nothing about a prospect's phone, and this sits on the
     LCP element. Cost is real, the payoff is subliminal. Skipped.
   ✗ CONVERGENCE FRINGING ON THE HEADLINE. h1 uses background-clip:text with
     a transparent fill; text-shadow on transparent glyphs paints a coloured
     ghost of the whole word rather than an edge fringe. Doing it properly
     needs a duplicated text layer — not worth the markup. Fringing IS
     applied below, but only to solid-colour text.
   ══════════════════════════════════════════════════════════════════ */
.crt-hero { position: relative; overflow: hidden; }
.crt-hero > .crt-lines,
.crt-hero > .crt-tube,
.crt-hero > .boot-log,
.crt-hero > .crt-bezel,
.crt-hero > .crt-rail,
.crt-hero > .fx { pointer-events: none; user-select: none; }

/* Scanline pitch — the base texture. */
.crt-hero .crt-lines {
  position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0)    0px, rgba(0,0,0,0)    2px,
    rgba(0,0,0,0.30) 3px, rgba(0,0,0,0.30) 3.5px);
  opacity: .55;
}
/* Tube curvature + beam bloom. Stays full-bleed even when framed — this is
   the curve of the GLASS, not the edge of the screen. */
.crt-hero .crt-tube {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 76% 66% at 50% 50%, transparent 52%, rgba(0,0,0,0.62) 100%),
    radial-gradient(ellipse 130% 60% at 50% -6%, rgba(170,178,198,0.055) 0%, transparent 62%);
}

/* ── BOOT LOG ──────────────────────────────────────────────────────
   Three nested masks, one job each, multiplied together. (All three as
   multiple mask-images on ONE element needs mask-composite, whose webkit
   and standard syntaxes disagree — nesting is bulletproof and costs
   nothing.)
     .boot-log   punches the centre hole so the copy always sits clear
     .bl-fade-x  feathers the left/right edges
     .bl-fade-y  feathers the top/bottom so it doesn't hard-cut
   Two columns, not one — a single column left the right half of the hero
   dead black and read as a bug. Different content AND different durations
   so the two sides never visibly twin.
   ────────────────────────────────────────────────────────────────── */
.boot-log {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 49% 62% at 50% 52%, transparent 44%, #000 90%);
          mask-image: radial-gradient(ellipse 49% 62% at 50% 52%, transparent 44%, #000 90%);
}
.bl-fade-x {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.bl-fade-y {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%);
}
.bl-col {
  position: absolute; top: 0; width: 33%;
  font-family: var(--font-m); font-size: 11.5px; line-height: 2.0;
  color: var(--accent2); white-space: pre;
}
.bl-col-l { left: 0;  padding-left: 2.5vw; opacity: 0.105; }
.bl-col-r { right: 0; padding-left: 1.5vw; opacity: 0.085; }
@media (prefers-reduced-motion: no-preference) {
  .bl-col-l { animation: boot-scroll 82s linear infinite; }
  .bl-col-r { animation: boot-scroll 104s linear infinite; animation-delay: -37s; }
}
@keyframes boot-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.bl-ok { color: var(--success); }
.bl-p  { color: var(--cursor); }
/* Below ~900px the columns have nowhere to live without hitting the copy. */
@media(max-width:900px) { .boot-log { display: none; } }

/* ── BEZEL + STATUS RAIL (framed only) ─────────────────────────────
   The frame stops being decoration and starts doing a job: it gives the
   log a screen edge to terminate against, so the text reads as contained
   rather than bleeding off the viewport.
   ────────────────────────────────────────────────────────────────── */
.crt-bezel {
  position: absolute; inset: 26px; z-index: 1;
  border: 1px solid rgba(170,178,198,0.14); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset, 0 0 60px rgba(0,0,0,0.6) inset;
}
.crt-bezel i {
  position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--cursor); opacity: .5;
}
.crt-bezel i:nth-child(1) { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.crt-bezel i:nth-child(2) { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.crt-bezel i:nth-child(3) { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.crt-bezel i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
.crt-rail {
  position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 1;
  display: flex; gap: 22px; align-items: center;
  padding: 8px 16px; border-top: 1px solid rgba(170,178,198,0.12);
  font-family: var(--font-m); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); opacity: .58;
}
.crt-rail .r-sep { margin-left: auto; }
.crt-rail .r-live { color: var(--success); }
.crt-rail .r-live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px var(--success); margin-right: 7px;
  vertical-align: 1px;
}
@media(max-width:680px) { .crt-rail .r-hide { display: none; } }

/* Bezel top sits at 88px so it clears the fixed nav (~72px) instead of
   slicing through the lockup — the nav then reads as the machine's toolbar
   and the frame below it as the screen. Sides/bottom stay tight at 26px. */
.framed .crt-bezel { top: 88px; }
.framed .crt-lines,
.framed .boot-log,
.framed .fx { inset: 88px 26px 26px; border-radius: 10px; }
/* The rail lives inside the bezel — pull the hero's bottom padding up off it
   so the proof row and the rail don't crowd each other. */
.framed.hero { padding-bottom: 120px; }
@media(max-width:900px) {
  .framed .crt-bezel, .framed .crt-rail { display: none; }
  .framed .crt-lines, .framed .fx { inset: 0; border-radius: 0; }
  .framed.hero { padding-bottom: 90px; }
}

/* ── TEXTURE STACK — the four that buy the most realism per unit of cost ── */
.crt-hero .fx { position: absolute; inset: 0; }

/* 1. APERTURE GRILLE — vertical RGB phosphor triads. The missing second
      axis: horizontal scanlines alone read as "stripes on a page"; real
      tubes are striped BOTH ways. 3px pitch = 1.5 CSS px per gun at 2x. */
.crt-hero .fx-grille { z-index: 2; mix-blend-mode: screen;
  background: repeating-linear-gradient(to right,
    rgba(255,40,40,0.050) 0px, rgba(255,40,40,0.050) 1px,
    rgba(40,255,90,0.050) 1px, rgba(40,255,90,0.050) 2px,
    rgba(60,90,255,0.050) 2px, rgba(60,90,255,0.050) 3px); }

/* 2. SCANLINE IRREGULARITY — the repeating gradient is mathematically
      perfect, which is exactly why it reads fake. A second layer at a
      non-multiple pitch (7px vs 3px) beats against the first, and a
      sub-pixel drift keeps it from settling into a stable moiré. */
.crt-hero .fx-rough { z-index: 2;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 5px, rgba(0,0,0,0.10) 7px); }
@media (prefers-reduced-motion: no-preference) {
  .crt-hero .fx-rough { animation: line-drift 11s ease-in-out infinite alternate; }
}
@keyframes line-drift { from { transform: translateY(0); } to { transform: translateY(1.6px); } }

/* 3. CRAWLING GRAIN — the site's body film grain is static, so it reads as
      paper texture rather than tube noise. Stepped jitter (not a smooth
      tween) is what makes it read as noise instead of drift. */
.crt-hero .fx-noise { z-index: 3; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px; }
@media (prefers-reduced-motion: no-preference) {
  .crt-hero .fx-noise { animation: grain-crawl .5s steps(1) infinite; }
}
@keyframes grain-crawl {
  0%   { transform: translate(0,0); }     25% { transform: translate(-3%,2%); }
  50%  { transform: translate(2%,-3%); }  75% { transform: translate(-2%,-1%); }
  100% { transform: translate(0,0); } }

/* 4. GLASS REFLECTION — ambient room light on the tube face. Cheapest big
      win: nothing else says "physical object in a room" as directly.
      Deliberately STATIC — a moving reflection reads as a gimmick. */
.crt-hero .fx-sheen { z-index: 4; mix-blend-mode: screen;
  background: linear-gradient(122deg,
    rgba(255,255,255,0.055) 0%,  rgba(255,255,255,0.022) 16%,
    transparent 33%, transparent 63%,
    rgba(255,255,255,0.014) 84%, rgba(255,255,255,0.042) 100%); }

/* CONVERGENCE ERROR — RGB guns never align perfectly, so real edges carry
   faint red/cyan fringes. Solid-colour text ONLY (see the h1 note above). */
.crt-hero .bl-col,
.crt-hero .hero-eyebrow,
.crt-hero .proof-label,
.crt-hero .crt-rail {
  text-shadow: -0.5px 0 0 rgba(255,70,70,0.30), 0.5px 0 0 rgba(70,210,255,0.26);
}

/* Reduced motion: keep every texture, drop only the movement — matches the
   site's existing convention for the phosphor pulse and the CRT sweep. */
@media (prefers-reduced-motion: reduce) {
  .crt-hero .crt-tube { animation: none; }
}
/* ══════════════════════════════════════════
   END CRT SCREEN
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES — migrated from per-page inline <style> blocks
   (2026-07-06 consolidation; see AUDIT_REPORT_2026-07-04.md finding #3)
   ══════════════════════════════════════════════════════════════════ */

/* ── SHARED: Pricing Cards (index, pricing, web-design) ── */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 52px; align-items: start; }
@media(max-width:700px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-stroke); border-radius: 16px; padding: 30px 28px;
  box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transition: border-color .2s, transform .15s;
}
.price-card::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.price-card > * { position: relative; z-index: 1; }
.price-card.featured { border-color: rgba(232,235,244,.3); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(170,178,198,.06)); }
.price-card:hover { transform: translateY(-2px); border-color: var(--accent2); }
.price-tier { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-family: var(--font-m); margin-bottom: 10px; }
.price-name { font-family: var(--font-d); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.price-amount { font-family: var(--font-d); font-size: 38px; font-weight: 900; color: var(--white); line-height: 1; margin: 14px 0; }
.price-amount span { font-size: 18px; font-weight: 500; color: var(--muted); vertical-align: top; margin-top: 8px; display: inline-block; }
.price-amount.custom { font-size: 24px; line-height: 1.3; margin: 14px 0; }
.price-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.price-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.price-feature { font-size: 13px; color: var(--text); display: flex; gap: 8px; }
.price-feature::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }
.price-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; font-family: var(--font-d); }

/* ── SHARED: Before/After Comparison (ai-systems, web-design) ── */
.before-after { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: stretch; margin-top: 52px; }
@media(max-width:640px) { .before-after { grid-template-columns: 1fr; gap: 16px; } .ba-divider { display: none; } }
.ba-col { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 28px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.ba-col::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.ba-col > * { position: relative; z-index: 1; }
.ba-col.after { border-color: rgba(191,233,212,.4); background: rgba(191,233,212,.06); }
.ba-label { font-family: var(--font-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 18px; }
.ba-col:not(.after) .ba-label { color: var(--danger); }
.ba-col.after .ba-label { color: var(--success); }
.ba-items { display: flex; flex-direction: column; gap: 12px; }
.ba-item { display: flex; gap: 10px; font-size: 14px; }
.ba-item .bi-icon { flex-shrink: 0; margin-top: 1px; }
.ba-divider { display: flex; align-items: center; justify-content: center; }
.ba-divider-inner { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #FFFFFF, #A6AEC2); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #0B0B12; }

/* ── SHARED: Axon Terminal Component, variant 01 command→output (index, web-design)
     + variant 02 diff-specific additions (web-design only) — see _terminal-sandbox/COMPONENTS.md ── */
.term-showcase { display: flex; justify-content: center; margin-top: 8px; }
.term {
  position: relative; font-family: var(--font-m);
  background: rgba(7,7,15,0.78);
  border: 1px solid var(--glass-stroke); border-radius: 12px;
  box-shadow: var(--glass-shadow); overflow: hidden;
  width: 100%; max-width: 640px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: term-tube 6s linear infinite;
}
@keyframes term-tube {
  0%, 13%  { box-shadow: var(--glass-shadow), 0 0 22px rgba(170,178,198,0.10) inset; }
  14%      { box-shadow: var(--glass-shadow), 0 0 8px  rgba(170,178,198,0.03) inset; }
  15%, 32% { box-shadow: var(--glass-shadow), 0 0 22px rgba(170,178,198,0.10) inset; }
  33%      { box-shadow: var(--glass-shadow), 0 0 34px rgba(170,178,198,0.20) inset; }
  35%, 58% { box-shadow: var(--glass-shadow), 0 0 22px rgba(170,178,198,0.10) inset; }
  59%      { box-shadow: var(--glass-shadow), 0 0 7px  rgba(170,178,198,0.03) inset; }
  60%      { box-shadow: var(--glass-shadow), 0 0 30px rgba(170,178,198,0.18) inset; }
  62%,100% { box-shadow: var(--glass-shadow), 0 0 22px rgba(170,178,198,0.10) inset; }
}
.term-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 45%;
  pointer-events: none; z-index: 6; mix-blend-mode: screen;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(200,210,230,0.04) 40%,
    rgba(210,220,240,0.10) 50%, rgba(200,210,230,0.04) 60%, transparent 100%);
  animation: term-scan 7s linear infinite; will-change: transform;
}
@keyframes term-scan { from { transform: translateY(-110%); } to { transform: translateY(260%); } }
.term::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.06) 3px);
  opacity: .5;
}
.term-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 5;
}
.term-bar .mark { font-size: 15px; filter: drop-shadow(0 1px 5px rgba(255,255,255,0.22)); }
.term-bar .mark .caret { display: none; }
.term-bar .bar-rule { width: 1px; height: 16px; background: var(--glass-stroke); }
.term-bar .title { font-size: 11px; letter-spacing: .07em; color: var(--muted); text-transform: lowercase; }
.term-bar .bit { margin-left: auto; font-size: 12px; }
.term-body {
  padding: 18px 20px 22px; font-size: 14.5px; line-height: 1.85;
  position: relative; z-index: 5;
  text-shadow: 0 0 1px rgba(200,210,235,0.45), 0 0 8px rgba(170,178,198,0.18);
  animation: term-text-flicker 6s linear infinite; will-change: filter, opacity;
}
@keyframes term-text-flicker {
  0%, 13%  { opacity: 1;    filter: brightness(1.00); }
  14%      { opacity: .86;  filter: brightness(0.90); }
  15%, 32% { opacity: 1;    filter: brightness(1.00); }
  33%      { opacity: 1;    filter: brightness(1.18); }
  35%, 58% { opacity: 1;    filter: brightness(1.00); }
  59%      { opacity: .82;  filter: brightness(0.88); }
  60%      { opacity: 1;    filter: brightness(1.14); }
  62%,100% { opacity: 1;    filter: brightness(1.00); }
}
.t-prompt { color: var(--cursor); text-shadow: var(--cursor-glow); }
.t-cmd    { color: var(--text); }
.t-out    { color: var(--accent2); }
.t-dim    { color: var(--muted); }
.t-ok     { color: var(--success); text-shadow: 0 0 8px rgba(191,233,212,0.35); }
.t-line   { display: block; white-space: pre-wrap; }
.t-blank  { display: block; height: 10px; }
.t-caret {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--cursor); margin-left: 2px; border-radius: 1px;
  box-shadow: var(--cursor-glow); animation: blink 1.15s steps(1) infinite;
}
.t-del { color: var(--danger); }
.t-add { color: var(--success); text-shadow: 0 0 8px rgba(191,233,212,0.30); }
.tdiff-del { background: rgba(230,160,172,0.06); }
.tdiff-add { background: rgba(191,233,212,0.06); }
.term-diff-wrap { display: flex; justify-content: center; margin-top: 52px; }

/* ── index.html ── */
/* Home hero (logo culmination, centered) */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 150px 0 90px;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(232,235,244,0.12) 0%, transparent 62%),
    radial-gradient(ellipse 45% 35% at 88% 82%, rgba(170,178,198,0.07) 0%, transparent 58%);
  position: relative; overflow: hidden;
}
/* NOTE: the giant .hero-watermark A²E logo that used to live here was REMOVED
   2026-08-11. At ~680px / 1.8% opacity it rendered as a random crop of one
   letterform carrying the mark's 3D perspective and gloss — it read as fog,
   not brand, and duplicated the hero lockup sitting directly on top of it.
   Replaced by the CRT SCREEN block further down. Do not reintroduce it. */
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Medium floating lockup — the hero focal point */
.mark-hero { font-size: clamp(46px, 8.5vw, 92px); }
.hero-lockup { display: inline-flex; align-items: center; gap: 1.2rem; margin-bottom: 32px; }
.hero-lockup .lockup-rule { width: 1px; height: clamp(52px, 9vw, 88px); background: rgba(255,255,255,0.18); }
.hero-lockup .lk-axon { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: clamp(13px, 2.2vw, 22px); letter-spacing: 0.22em; color: var(--white); }
.hero-lockup .lk-sub  { font-family: var(--font-b); font-weight: 400; font-size: clamp(9px, 1.4vw, 13px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
.hero-eyebrow {
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent2); font-weight: 700; font-family: var(--font-m);
  margin-bottom: 20px; opacity: .8;
}
.hero h1 {
  font-family: var(--font-d);
  font-size: clamp(26px,7vw,64px); font-weight: 900;
  line-height: 1.08; margin-bottom: 0; letter-spacing: -1px;
  overflow-wrap: break-word; word-break: break-word;
}
.hero h1 .fixed-line {
  display: block;
  background: linear-gradient(176deg, #FFFFFF 0%, #EDEFF4 45%, #C2C7D3 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.hero h1 .tw-line {
  display: block; min-height: 1.1em; margin-top: 12px;
  font-family: var(--font-m); font-weight: 700; font-size: 0.78em; letter-spacing: -0.01em;
  background: linear-gradient(176deg, #FFFFFF 0%, #AAB2C6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
  animation: phosphor-pulse-typed 6s linear infinite;
  animation-delay: -1.4s;
}
.hero-prompt {
  -webkit-text-fill-color: var(--accent2); color: var(--accent2);
  margin-right: 0.18em; opacity: .85;
}
.hero-caret {
  display: inline-block; width: 0.048em; height: 0.88em;
  background: var(--cursor); border-radius: 2px;
  margin-left: 0.06em; vertical-align: -0.05em;
  animation: blink 1.15s steps(1) infinite, phosphor-caret-glow 6s linear infinite;
  animation-delay: 0s, -1.0s;
  -webkit-text-fill-color: var(--cursor);
}
.hero-sub { font-size: clamp(15px,2vw,19px); color: var(--muted); max-width: 560px; margin: 22px auto 40px; line-height: 1.65; }
.hero-sub strong { color: var(--text); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 52px; }
.hero-proof { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; }
.proof-item { padding: 16px 26px; border-right: 1px solid var(--border); }
.proof-item:last-child { border-right: none; }
.proof-val { font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--white); line-height: 1; }
.proof-val.g { color: var(--accent2); }
.proof-label { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-m); }
@media(max-width:560px){
  .hero-proof{ gap:0; } .proof-item{ padding:12px 16px; border-right:none; min-width:44%; }
  /* overflow-x: clip (not hidden) keeps horizontal safety without vertically
     clipping the floating .mark-float lockup — `hidden` was slicing the logo's
     top edge as it floated up 9px. html/body/.hero already clip horizontally. */
  .hero-inner { width: 100%; overflow-x: clip; }
  .hero-eyebrow { letter-spacing: 1px; white-space: normal; width: 100%; max-width: 100%; }
  .hero h1 { width: 100%; max-width: 100%; }
  .hero-sub { width: 100%; max-width: 100%; }
  .hero-lockup { max-width: 100%; gap: 0.7rem; }
  .mark-hero { font-size: 38px; }
  .hero-lockup .lockup-rule { height: 38px; }
  .hero-lockup .lk-axon { font-size: 10px; }
  .hero-lockup .lk-sub { font-size: 7.5px; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; justify-content: center; }
}

/* 3-step process (expandable) */
.process-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
  margin-top: 52px; align-items: start;
  border: 1px solid var(--glass-stroke); border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
}
@media(max-width:700px) { .process-grid { grid-template-columns: 1fr; } }
.process-card {
  background: var(--glass-bg2); padding: 30px 28px; position: relative; overflow: hidden;
  border-right: 1px solid var(--glass-stroke);
}
.process-card:last-child { border-right: none; }
.process-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.process-card > * { position: relative; z-index: 1; }
.process-icon { font-size: 26px; margin-bottom: 14px; }
.process-num { font-family: var(--font-m); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--accent2); margin-bottom: 10px; }
.process-title { font-family: var(--font-d); font-size: 18px; font-weight: 700; color: var(--white); }
.process-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }
.process-tag { display: inline-block; margin-top: 14px; font-size: 11px; font-family: var(--font-d); font-weight: 600; color: var(--accent2); letter-spacing: .04em; }

/* AI teaser */
.ai-teaser { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ai-teaser-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media(max-width:680px) { .ai-teaser-inner { grid-template-columns: 1fr; gap: 32px; } }
.ai-teaser-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent2); font-family: var(--font-m); margin-bottom: 12px; }
.ai-teaser h2 { font-family: var(--font-d); font-size: clamp(22px,3vw,34px); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 14px; }
.ai-teaser p { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.ai-teaser-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.ai-pill { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-stroke); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--muted); font-family: var(--font-d); }
.ai-teaser-visual { background: var(--glass-bg2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--glass-stroke); border-radius: 16px; padding: 28px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.ai-teaser-visual::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.ai-teaser-visual > * { position: relative; z-index: 1; }
.atv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.atv-row:last-child { border-bottom: none; }
.atv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.atv-dot.g { background: var(--success); box-shadow: 0 0 6px var(--success); }
.atv-dot.b { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
.atv-dot.m { background: var(--muted); }
.atv-label { font-family: var(--font-d); font-size: 13px; color: var(--text); flex: 1; }
.atv-val { font-size: 12px; font-weight: 700; color: var(--success); font-family: var(--font-d); }
.atv-val.b { color: var(--accent2); }

/* CTA watermark */
.cta-section { position: relative; overflow: hidden; }

/* Interactive build pipeline (How It Works) — uses the shared .term above */
.pipe-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 48px; }
.pipe-wrap .term { max-width: 720px; }
.pipe { margin-top: 4px; }
.pipe-step {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 8px;
  border-radius: 7px; cursor: pointer; transition: background .15s; position: relative;
}
.pipe-step:hover { background: rgba(170,178,198,0.06); }
.pipe-step:focus-visible { outline: 2px solid var(--cursor); outline-offset: 2px; background: rgba(170,178,198,0.06); }
.pipe-step.is-pending { opacity: .35; }
.pipe-step .pidx { color: var(--muted); flex-shrink: 0; }
.pipe-step .pstage { color: var(--accent2); flex-shrink: 0; min-width: 62px; }
.pipe-step .ptitle { color: var(--text); flex: 1; }
.pipe-step .pmeta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pipe-step .pday { color: var(--muted); font-size: 12.5px; }
.pipe-step .pcheck { color: var(--success); text-shadow: 0 0 8px rgba(191,233,212,0.35); }
.pipe-step .pspin { color: var(--accent2); width: 1ch; display: inline-block; }
.pipe-step.is-running .pcheck, .pipe-step.is-pending .pcheck,
.pipe-step.is-running .pday,   .pipe-step.is-pending .pday { display: none; }
.pipe-step.is-done .pspin { display: none; }
.pipe-step .pexp {
  color: var(--muted); font-size: 17px; line-height: 1; width: 1ch; text-align: center;
  display: inline-block; transition: transform .2s, color .2s; transform-origin: center;
}
.pipe-step:hover .pexp { color: var(--cursor); }
.pipe-step.open .pexp { transform: rotate(45deg); color: var(--cursor); text-shadow: var(--cursor-glow); }
@keyframes exp-pulse {
  0%, 100% { transform: scale(1); color: var(--muted); }
  50%      { transform: scale(1.4); color: var(--cursor); text-shadow: var(--cursor-glow); }
}
.pipe-step.nudge .pexp { animation: exp-pulse 1.1s ease-in-out 2; }
.pipe-step.is-pending, .pipe-step.is-running { pointer-events: none; }
.pipe-step.is-pending .pexp { opacity: 0.25; }
.pipe-detail {
  max-height: 0; overflow: hidden; transition: max-height .5s ease, opacity .5s ease;
  opacity: 0;
  color: var(--muted); font-size: 13.5px; line-height: 1.7; font-family: var(--font-b);
}
.pipe-step.open + .pipe-detail { opacity: 1; }
.pipe-detail .pd-inner { padding: 2px 8px 12px 80px; }
.pipe-detail .pd-inner::before { content: "↳ "; color: var(--accent2); }
.pipe-final { color: var(--success); text-shadow: 0 0 8px rgba(191,233,212,0.4); }
.pipe-final .dot { color: var(--success); }
@media (max-width: 600px) {
  .pipe-step { flex-wrap: wrap; }
  .pipe-step .ptitle { flex-basis: 100%; order: 3; padding-left: 72px; }
  .pipe-detail .pd-inner { padding-left: 28px; }
}

/* ── about.html ── */
.principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; align-items: start; }
@media(max-width:640px) { .principle-grid { grid-template-columns: 1fr; } }
.principle-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 26px 28px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.principle-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.principle-card > * { position: relative; z-index: 1; }
.principle-num { font-family: var(--font-m); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--accent2); margin-bottom: 12px; }
.principle-title { font-family: var(--font-d); font-size: 16px; font-weight: 700; color: var(--white); }
.principle-body { font-size: 14px; color: var(--muted); line-height: 1.7; }

.story-block { max-width: 720px; margin: 52px 0; }
.story-block p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 20px; }
.story-block p strong { color: var(--text); }
.story-block p:last-child { margin-bottom: 0; }

.path-row { display: flex; gap: 0; margin-top: 52px; border: 1px solid var(--glass-stroke); border-radius: 14px; overflow: hidden; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--glass-shadow); }
@media(max-width:640px) { .path-row { flex-direction: column; } }
.path-item { flex: 1; padding: 28px 24px; background: var(--glass-bg2); border-right: 1px solid var(--glass-stroke); position: relative; overflow: hidden; }
.path-item:last-child { border-right: none; }
.path-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.path-item > * { position: relative; z-index: 1; }
.path-arrow { font-size: 20px; margin-bottom: 10px; }
.path-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); font-family: var(--font-m); margin-bottom: 6px; }
.path-title { font-family: var(--font-d); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.path-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ── ai-systems.html ── */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 52px; align-items: start; }
@media(max-width:740px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 24px 26px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.problem-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.problem-card > * { position: relative; z-index: 1; }
.pc-icon  { font-size: 28px; margin-bottom: 14px; }
.pc-title { font-family: var(--font-d); font-size: 16px; font-weight: 700; color: var(--white); }
.pc-desc  { font-size: 13px; color: var(--muted); line-height: 1.6; }
.pc-cost  { margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--danger); }

.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; align-items: start; }
@media(max-width:640px) { .modules { grid-template-columns: 1fr; } }
.module-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 26px 28px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transition: border-color .2s; }
.module-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.module-card > * { position: relative; z-index: 1; }
.module-card:hover { border-color: var(--accent); }
.module-num  { font-family: var(--font-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--accent2); margin-bottom: 8px; }
.module-name { font-family: var(--font-d); font-size: 17px; font-weight: 700; color: var(--white); }
.module-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.module-tag  { margin-top: 16px; display: inline-block; background: rgba(170,178,198,.1); border: 1px solid rgba(170,178,198,.22); border-radius: 6px; padding: 3px 10px; font-size: 11px; color: var(--accent2); font-weight: 600; font-family: 'Rajdhani', sans-serif; letter-spacing: .04em; }

.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; align-items: start; }
@media(max-width:640px) { .why-grid { grid-template-columns: 1fr; } }
.why-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 28px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.why-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.why-card > * { position: relative; z-index: 1; }
.why-card.featured { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(170,178,198,.06)); border-color: rgba(232,235,244,.22); grid-column: 1 / -1; }
.why-icon  { font-size: 32px; margin-bottom: 14px; }
.why-title { font-family: var(--font-d); font-size: 17px; font-weight: 700; color: var(--white); }
.why-desc  { font-size: 14px; color: var(--muted); line-height: 1.65; }

.price-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 52px; align-items: start; }
@media(max-width:700px) { .price-grid-3 { grid-template-columns: 1fr; } }
.price-card-sm { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 16px; padding: 28px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.price-card-sm::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.price-card-sm > * { position: relative; z-index: 1; }
.price-card-sm.featured { border-color: rgba(232,235,244,.3); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(170,178,198,.06)); }

/* ── contact.html ── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 52px; }
@media(max-width:680px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form-wrap { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 18px; padding: 36px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.contact-form-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.contact-form-wrap > * { position: relative; z-index: 1; }
@media(max-width:560px){ .contact-form-wrap{ padding: 26px 22px; } }
.form-title { font-family: var(--font-d); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-family: var(--font-m); margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-stroke); border-radius: 9px; color: var(--text); font-family: var(--font-b); font-size: 14px; padding: 12px 14px; transition: border-color .2s, background .2s; outline: none; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--cursor); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px rgba(170,178,198,0.25), 0 0 14px rgba(170,178,198,0.18); }
.form-group textarea { min-height: 120px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); }
.intent-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.intent-chip { background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: 20px; padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--muted); font-family: var(--font-d); cursor: pointer; transition: all .2s; user-select: none; }
.intent-chip.selected { border-color: var(--cursor); color: var(--white); background: rgba(170,178,198,0.12); box-shadow: 0 0 12px rgba(170,178,198,0.22); }
.form-submit { width: 100%; padding: 15px; border-radius: 10px; background: var(--accent); color: #0B0B12; font-family: var(--font-d); font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: opacity .2s, transform .2s; }
.form-submit:hover { opacity: .9; transform: translateY(-1px); }
.form-note { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }
.form-success { display: none; text-align: center; padding: 28px; font-family: var(--font-d); }
.form-success .fs-icon { font-size: 44px; margin-bottom: 14px; }
.form-success h3 { font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.form-success p { font-size: 14px; color: var(--muted); }
.contact-sidebar { display: flex; flex-direction: column; gap: 20px; }
.contact-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 24px 26px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.contact-card > * { position: relative; z-index: 1; }
.cc-title { font-family: var(--font-d); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.cc-body  { font-size: 13px; color: var(--muted); line-height: 1.65; }
.cc-val-lg { font-family: var(--font-d); font-size: 16px; font-weight: 600; color: var(--accent); margin-top: 10px; display: block; }
.expect-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.expect-item { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
.expect-item::before { content: "→"; color: var(--accent2); font-weight: 700; flex-shrink: 0; }
.service-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sc-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--glass-stroke); border-radius: 9px; background: rgba(255,255,255,0.03); }
.sc-icon { font-size: 20px; flex-shrink: 0; }
.sc-title { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--white); }
.sc-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* ── pricing.html ── */
.service-divider { border: none; border-top: 1px solid var(--border); margin: 72px 0; }
.guarantee-bar { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; margin-top: 40px; padding: 24px 32px; background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: 12px; backdrop-filter: blur(14px); }
.gb-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.gb-item::before { content: "✓"; color: var(--success); font-weight: 700; font-size: 14px; }
/* Add-ons strip (pricing.html — web design section) */
.addon-head { margin-top: 52px; text-align: center; }
.addon-head .addon-title { font-family: var(--font-d); font-size: 16px; font-weight: 700; color: var(--white); }
.addon-head p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.addon-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 20px; align-items: stretch; }
@media(max-width:700px) { .addon-grid { grid-template-columns: 1fr; } }
.addon-item { background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: 12px; padding: 20px 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.addon-item.featured { border-color: rgba(232,235,244,.3); background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(170,178,198,.05)); }
.addon-name { font-family: var(--font-d); font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.addon-price { font-family: var(--font-m); font-size: 13px; color: var(--accent2); margin-bottom: 8px; }
.addon-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.faq-note { margin-top: 48px; text-align: center; font-size: 14px; color: var(--muted); }
.faq-note a { color: var(--accent2); }

/* ── web-design.html ── */
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; align-items: start; }
@media(max-width:640px) { .build-grid { grid-template-columns: 1fr; } }
.build-card {
  background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 28px;
  box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transition: border-color .2s;
}
.build-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.build-card > * { position: relative; z-index: 1; }
.build-card:hover { border-color: var(--accent2); }
.build-icon { font-size: 28px; margin-bottom: 14px; }
.build-title { font-family: var(--font-d); font-size: 17px; font-weight: 700; color: var(--white); }
.build-desc  { font-size: 13px; color: var(--muted); line-height: 1.65; }
.build-tag   { display: inline-block; margin-top: 14px; font-size: 11px; font-family: var(--font-m); font-weight: 500; color: var(--accent2); }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 52px; }
@media(max-width:700px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 14px; padding: 26px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.diff-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%); pointer-events: none; }
.diff-card > * { position: relative; z-index: 1; }
.diff-vs { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.diff-row { display: flex; gap: 10px; font-size: 13px; }
.diff-row .di { flex-shrink: 0; margin-top: 1px; font-weight: 700; }
.diff-row.bad  .di { color: var(--danger); }
.diff-row.good .di { color: var(--success); }
.diff-row.bad  span { color: var(--muted); }
.diff-row.good span { color: var(--text); }
.stack-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.stack-pill { background: var(--glass-bg2); backdrop-filter: blur(14px); border: 1px solid var(--glass-stroke); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-d); box-shadow: var(--glass-shadow); }

/* ── work.html ── */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:680px) { .work-grid { grid-template-columns: 1fr; } }
.wk-card { background: var(--glass-bg2); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-stroke); border-radius: 16px; overflow: hidden; box-shadow: var(--glass-shadow); position: relative; transition: border-color .2s, transform .15s; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.wk-card::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 40%); pointer-events: none; z-index: 1; }
.wk-card:hover { border-color: var(--accent2); transform: translateY(-3px); }
.wk-thumb { height: 200px; display: block; border-bottom: 1px solid var(--glass-stroke); position: relative; z-index: 2; flex-shrink: 0; overflow: hidden; }
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .4s ease; }
.wk-card:hover .wk-thumb img { transform: scale(1.04); }
.wk-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7,7,15,0) 50%, rgba(7,7,15,0.55) 100%); pointer-events: none; z-index: 1; }
.wk-thumb-badge { position: absolute; top: 12px; right: 12px; z-index: 2; }
.wk-thumb-price-tag { position: absolute; bottom: 14px; left: 16px; z-index: 2; }
.wkp-price { font-family: var(--font-d); font-size: 22px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.wkp-sub { font-family: var(--font-m); font-size: 10px; color: rgba(255,255,255,0.75); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.wk-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; }
.wk-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-family: var(--font-d); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.wk-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.wk-badge.live { background: rgba(191,233,212,.15); color: var(--success); border: 1px solid rgba(191,233,212,.25); }
.wk-badge.demo { background: rgba(170,178,198,.12); color: var(--accent2); border: 1px solid rgba(170,178,198,.22); }
.wk-name { font-family: var(--font-d); font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.wk-desc { font-size: 14px; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 20px; }
.wk-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.wk-tag { font-size: 11px; font-weight: 600; color: var(--accent2); font-family: var(--font-d); background: rgba(170,178,198,.1); border: 1px solid rgba(170,178,198,.18); border-radius: 5px; padding: 2px 8px; }
.wk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--font-d); transition: color .2s; }
.wk-link:hover { color: var(--white); }
.work-note { margin-top: 52px; padding: 24px 28px; background: var(--glass-bg); backdrop-filter: blur(14px); border: 1px solid var(--glass-stroke); border-radius: 12px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.work-note strong { color: var(--text); }
.work-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media(max-width:780px) { .work-grid-3 { grid-template-columns: 1fr; } }

/* ── 404.html ── */
.err-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,235,244,0.10) 0%, transparent 60%);
  position: relative; overflow: hidden;
}
.err-inner { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }
.err-mark { font-size: clamp(80px, 20vw, 160px); opacity: 0.06; pointer-events: none; user-select: none; margin-bottom: -20px; }
.err-code {
  font-family: var(--font-m); font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent2);
  margin-bottom: 20px; opacity: .75;
}
.err-code .bit { display: inline-block; }
.err-h { font-family: var(--font-d); font-size: clamp(28px, 6vw, 46px); font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 16px; }
.err-sub { font-size: 16px; color: var(--muted); line-height: 1.65; margin-bottom: 36px; }
.err-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.err-wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(200px, 48vw, 560px);
  opacity: 0.012; pointer-events: none; user-select: none; z-index: 0; white-space: nowrap;
}
.err-wm .mark { filter: none; }
.err-wm .mark .caret { box-shadow: none; animation: none; opacity: 1; }