/* ==========================================================================
   Nim v7 "Hyper-Modern Visual & Interaction Masterpiece" — luxury layer.
   Loads AFTER app.css. Pure CSS3 design tokens; zero external assets:
   every texture is a procedural SVG data-URI, every motion is transform/
   opacity based (compositor-only), every surface respects both themes.
   The whole layer is wrapped in progressive enhancement: without JS the
   site stays fully usable — the aura simply breathes, tilt/beam stay off.
   ========================================================================== */

/* ---------- 0. v7 design tokens ---------- */
:root {
  --v7-ease: cubic-bezier(.22, 1, .36, 1);        /* easeOutQuint-ish */
  --v7-ease-io: cubic-bezier(.65, 0, .35, 1);
  --v7-dur: .45s;
  --v7-dur-fast: .22s;

  --v7-glow: rgba(181, 227, 60, .38);             /* lime halo */
  --v7-glow-soft: rgba(181, 227, 60, .14);
  --v7-aura-1: rgba(181, 227, 60, .10);
  --v7-aura-2: rgba(80, 140, 255, .09);
  --v7-grain-opacity: .035;

  --v7-glass: rgba(255, 255, 255, .58);
  --v7-glass-line: rgba(255, 255, 255, .65);
  --v7-glass-shadow: 0 20px 60px rgba(11, 19, 36, .10);

  --v7-ring-track: rgba(11, 19, 36, .10);
  --v7-ring-1: #B5E33C;
  --v7-ring-2: #508CFF;

  /* fluid type scale — clamp only, zero layout shift */
  --fs-h1: clamp(2.3rem, 1.4rem + 3.4vw, 4.1rem);
  --fs-h2: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem);
  --fs-h3: clamp(1.14rem, 1.02rem + .5vw, 1.35rem);
  --space-section: clamp(3.4rem, 2.2rem + 4vw, 6.2rem);
}

html.theme-dark {
  --v7-glow: rgba(181, 227, 60, .45);
  --v7-glow-soft: rgba(181, 227, 60, .18);
  --v7-aura-1: rgba(181, 227, 60, .13);
  --v7-aura-2: rgba(80, 140, 255, .14);
  --v7-grain-opacity: .05;
  --v7-glass: rgba(18, 29, 54, .55);
  --v7-glass-line: rgba(232, 236, 244, .14);
  --v7-glass-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  --v7-ring-track: rgba(232, 236, 244, .14);
}

/* ---------- 1. WCAG 2.1 AA contrast fixes (light palette) ---------- */
/* --muted #75808F measured 3.8:1 on --paper; AA needs 4.5:1. */
:root { --muted: #5F6B7A; }                       /* 5.2:1 on paper  */
html.theme-dark { --muted: #97A2B3; }             /* 6.3:1 on navy   */

/* Accessible focus everywhere in the v7 layer */
.v7 :focus-visible,
.bento-card:focus-visible,
.btn-magnetic:focus-visible,
.vpe-btn:focus-visible,
.pin-dock button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 2. Ambient architecture: aura canvas + grain ---------- */
#v7Aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--v7-ease);
}
#v7Aura.is-on { opacity: 1; }
#v7Aura canvas { display: block; width: 100%; height: 100%; }

/* The page content must sit above the ambient layers */
body > main, .site-header, body > footer, .cookie-card { position: relative; z-index: 1; }

/* Procedural grain — one inline SVG turbulence tile, zero assets. */
body::after {
  content: "";
  position: fixed;
  inset: -60px;                      /* overscan so the grain can drift */
  z-index: 2;
  pointer-events: none;
  opacity: var(--v7-grain-opacity);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
html.theme-dark body::after { mix-blend-mode: soft-light; }

/* Mobile: no pointer — the aura breathes on its own (pure CSS, no JS). */
@media (hover: none) {
  #v7Aura .aura-breathe {
    position: absolute;
    top: -18vh; left: 50%;
    width: 88vmax; height: 88vmax;
    transform: translate(-50%, 0);
    background:
      radial-gradient(closest-side, var(--v7-aura-1), transparent 68%),
      radial-gradient(closest-side at 68% 62%, var(--v7-aura-2), transparent 70%);
    filter: blur(8px);
    animation: v7-breathe 13s var(--v7-ease-io) infinite alternate;
  }
}
@keyframes v7-breathe {
  from { transform: translate(-50%, -4%) scale(.92); opacity: .75; }
  to   { transform: translate(-46%, 6%) scale(1.1);  opacity: 1; }
}

/* ---------- 3. Dynamic variable grid & bento architecture ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  perspective: 1200px;
}
.bento > .bento-card { grid-column: span 2; }
.bento > .bento-wide  { grid-column: span 3; }
.bento > .bento-tall  { grid-row: span 2; }
@media (max-width: 980px) {
  .bento > .bento-card, .bento > .bento-wide { grid-column: span 3; }
}
@media (max-width: 640px) {
  .bento > .bento-card, .bento > .bento-wide { grid-column: span 6; }
  .bento > .bento-tall { grid-row: span 1; }
}

.bento-card {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--v7-glass);
  border: 1px solid var(--v7-glass-line);
  box-shadow: var(--v7-glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform-style: preserve-3d;
  transition: transform var(--v7-dur) var(--v7-ease),
              box-shadow var(--v7-dur) var(--v7-ease),
              border-color var(--v7-dur) var(--v7-ease);
}
@supports not (backdrop-filter: blur(1px)) {
  .bento-card { background: var(--white); }
}
.bento-card:hover {
  border-color: rgba(181, 227, 60, .5);
  box-shadow: var(--v7-glass-shadow), 0 0 0 1px rgba(181, 227, 60, .25), 0 12px 44px var(--v7-glow-soft);
}
/* 1px gradient border glow (inset ring) */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(181, 227, 60, .55), rgba(255, 255, 255, .08) 38%, rgba(80, 140, 255, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--v7-dur) var(--v7-ease);
  pointer-events: none;
}
.bento-card:hover::after { opacity: 1; }
/* JS tilt writes --rx/--ry; CSS only consumes them (fallback: static). */
.bento-card[data-tilt] { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }

/* ---------- 4. Dynamic border beam (light along card edges) ---------- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.beam-card { position: relative; overflow: hidden; }
.beam-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--beam, 0deg),
    transparent 0deg, transparent 288deg,
    rgba(181, 227, 60, .0) 300deg, rgba(181, 227, 60, .9) 330deg,
    rgba(232, 236, 244, .95) 346deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--v7-dur-fast) var(--v7-ease);
  pointer-events: none;
}
.beam-card:hover::before,
.beam-card:focus-within::before { opacity: 1; animation: v7-beam 3.4s linear infinite; }
@keyframes v7-beam { to { --beam: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .beam-card:hover::before { animation: none; opacity: .8; }
}

/* ---------- 5. Magnetic buttons ---------- */
.btn-magnetic {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform .3s var(--v7-ease);
  will-change: transform;
}
.btn-magnetic::after {                    /* soft proximity halo */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(closest-side, var(--v7-glow-soft), transparent);
  opacity: 0;
  transition: opacity .3s var(--v7-ease);
  z-index: -1;
}
.btn-magnetic:hover::after { opacity: 1; }
summary.btn-magnetic { list-style: none; }
summary.btn-magnetic::-webkit-details-marker { display: none; }

/* ---------- 6. Fluid type on v7 sections (clamp only — no CLS) ---------- */
.v7 .hero h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
.v7 .section h2, .v7 h2.v7-h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.v7 h3 { font-size: var(--fs-h3); }
.tabular, .est-ticker strong, .ring-stat strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 7. Live Viewport Emulator (work showcase) ---------- */
.vpe {
  margin: 2.2rem auto 0;
  max-width: 1040px;
  display: grid;
  gap: 16px;
  justify-items: center;
}
.vpe-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.vpe-btn {
  border: 1px solid var(--line);
  background: var(--v7-glass);
  color: var(--ink);
  border-radius: 999px;
  padding: .5em 1.1em;
  font: 600 .86rem/1 var(--font-head);
  cursor: pointer;
  transition: all var(--v7-dur-fast) var(--v7-ease);
}
.vpe-btn:hover { border-color: var(--lime); }
.vpe-btn[aria-pressed="true"] {
  background: var(--navy);
  color: #E8ECF4;
  border-color: var(--navy);
  box-shadow: 0 6px 18px var(--v7-glow-soft);
}

.vpe-device {
  position: relative;
  width: min(100%, 960px);
  border-radius: 26px;
  border: 1px solid var(--v7-glass-line);
  background: linear-gradient(160deg, #1B2740, #0B1324 70%);
  padding: 14px;
  box-shadow: 0 34px 90px rgba(11, 19, 36, .35), inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: max-width var(--v7-dur) var(--v7-ease);
}
.vpe-device[data-device="tablet"] { max-width: 620px; border-radius: 30px; }
.vpe-device[data-device="mobile"] { max-width: 330px; border-radius: 38px; }
.vpe-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #F2F4EC, #E7EBDD);
}
.vpe-device[data-device="tablet"] .vpe-screen { aspect-ratio: 3 / 4; }
.vpe-device[data-device="mobile"] .vpe-screen { aspect-ratio: 9 / 19.5; border-radius: 26px; }
/* camera notch / bezel detail */
.vpe-device::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
/* procedural "site" inside the screen — pure CSS, no screenshots */
.vpe-site {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--font-head);
  color: #17203A;
  transition: grid-template-columns var(--v7-dur) var(--v7-ease);
}
.vpe-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .75);
  border-bottom: 1px solid rgba(23, 32, 58, .08);
}
.vpe-logo { width: 54px; height: 8px; border-radius: 99px; background: var(--navy); }
.vpe-nav i { width: 26px; height: 5px; border-radius: 99px; background: rgba(23, 32, 58, .22); }
.vpe-body {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  padding: 16px;
  align-content: start;
}
.vpe-device[data-device="mobile"] .vpe-body,
.vpe-device[data-device="tablet"] .vpe-body { grid-template-columns: 1fr; }
.vpe-hero-line { height: 16px; border-radius: 6px; background: linear-gradient(90deg, var(--navy), #2A3A5F); margin-bottom: 8px; }
.vpe-hero-line.short { width: 62%; }
.vpe-hero-sub { height: 8px; width: 78%; border-radius: 99px; background: rgba(23, 32, 58, .25); margin-bottom: 12px; }
.vpe-cta { width: 92px; height: 26px; border-radius: 99px; background: var(--lime); box-shadow: 0 6px 16px var(--v7-glow-soft); }
.vpe-card { border-radius: 12px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(23, 32, 58, .07); min-height: 74px; }
.vpe-foot { height: 30px; background: rgba(11, 19, 36, .86); }
.vpe-score {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex;
  gap: 6px;
}
.vpe-score b {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font: 800 .72rem/1 var(--font-head);
  color: #0B1324;
  background: conic-gradient(var(--lime) calc(var(--score, 100) * 1%), rgba(11, 19, 36, .12) 0);
}
.vpe-score b::after {
  content: attr(data-v);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
}

/* ---------- 8. Before / After slider 2.0 (multi-stage) ---------- */
.ba2 { margin: 2.2rem auto 0; max-width: 1040px; }
.ba2-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.ba2-tab {
  border: 1px solid var(--line);
  background: var(--v7-glass);
  color: var(--ink);
  border-radius: 999px;
  padding: .5em 1.1em;
  font: 600 .86rem/1 var(--font-head);
  cursor: pointer;
  transition: all var(--v7-dur-fast) var(--v7-ease);
}
.ba2-tab[aria-selected="true"] { background: var(--navy); color: #E8ECF4; border-color: var(--navy); }

.ba2-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  border: 1px solid var(--v7-glass-line);
  box-shadow: var(--v7-glass-shadow);
  touch-action: none;
  user-select: none;
}
.ba2-pane {
  position: absolute;
  inset: 0;
  display: none;
}
.ba2-pane.is-active { display: block; animation: v7-fade .5s var(--v7-ease); }
@keyframes v7-fade { from { opacity: 0; } to { opacity: 1; } }

.ba2-pane .ba-after, .ba2-pane .ba-before { position: absolute; inset: 0; }
.ba2-pane img, .ba2-pane .ba-paint {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* procedural painted panes (zero assets): "after" = clean, "before" = cluttered */
.ba-paint { position: relative; }
.ba-paint-after { background:
  radial-gradient(120% 90% at 12% 8%, rgba(181, 227, 60, .16), transparent 55%),
  linear-gradient(180deg, #FBFAF7, #EFF2E6); }
.ba-paint-after::before {
  content: "";
  position: absolute;
  left: 8%; top: 14%;
  width: 46%; height: 12%;
  border-radius: 8px;
  background: linear-gradient(90deg, #0B1324, #24304E);
  box-shadow: 0 14px 30px rgba(11, 19, 36, .18);
}
.ba-paint-after::after {
  content: "";
  position: absolute;
  left: 8%; top: 34%;
  width: 30%; height: 9%;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 10px 24px var(--v7-glow);
}
.ba-paint-before { background:
  repeating-linear-gradient(0deg, rgba(196, 61, 61, .05) 0 8px, transparent 8px 24px),
  linear-gradient(180deg, #EFE6D8, #E4D8C6); }
.ba-paint-before::before {
  content: "";
  position: absolute;
  left: 5%; top: 8%;
  width: 90%; height: 8%;
  background: repeating-linear-gradient(90deg, #8A6F52 0 40px, #A98B67 40px 84px);
  border-radius: 4px;
}
.ba-paint-before::after {
  content: "";
  position: absolute;
  right: 6%; bottom: 10%;
  width: 34%; height: 34%;
  border-radius: 6px;
  border: 3px dashed rgba(196, 61, 61, .55);
  background:
    repeating-linear-gradient(45deg, rgba(196, 61, 61, .08) 0 6px, transparent 6px 12px);
}
.ba2-pane .ba-tag {
  position: absolute;
  top: 14px;
  z-index: 3;
  font: 700 .72rem/1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55em .9em;
  border-radius: 999px;
  color: #E8ECF4;
  background: rgba(11, 19, 36, .78);
  backdrop-filter: blur(6px);
}
.ba2-pane .ba-tag-before { left: 14px; }
.ba2-pane .ba-tag-after { right: 14px; background: rgba(181, 227, 60, .92); color: #1A2405; }

.ba2-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  z-index: 4;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 18px rgba(11, 19, 36, .4);
}
.ba2-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  gap: 0;
  color: #0B1324;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(11, 19, 36, .15);
  box-shadow: 0 10px 26px rgba(11, 19, 36, .3);
  backdrop-filter: blur(8px);
  font: 800 .95rem/1 var(--font-head);
  cursor: ew-resize;
}
.ba2-knob::before { content: "◂"; margin-right: 2px; }
.ba2-knob::after { content: "▸"; margin-left: 2px; }
.ba2-stage.is-dragging .ba2-handle { transition: none; }
.ba2-handle { transition: left .18s var(--v7-ease); }

/* ---------- 9. Fluid accordions: grid-template-rows 0fr -> 1fr ---------- */
.faq-item { border-radius: var(--radius); }
.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--v7-ease);
}
.faq-item[open] .faq-a { grid-template-rows: 1fr; }
.faq-item .faq-a > * { min-height: 0; overflow: hidden; }
/* JS adds .is-closing while the 0fr transition plays, then removes [open] */
.faq-item.is-closing .faq-a { grid-template-rows: 0fr; }
.faq-item.is-closing .faq-q { pointer-events: none; }

/* ---------- 10. Executive client portal: dark HUD / glass dashboard ---------- */
.layout-client .portal-hud {
  position: relative;
  border-radius: calc(var(--radius) + 10px);
  padding: clamp(18px, 2.6vw, 34px);
  background:
    radial-gradient(130% 120% at 88% -10%, rgba(80, 140, 255, .18), transparent 52%),
    radial-gradient(120% 110% at -6% 108%, rgba(181, 227, 60, .12), transparent 50%),
    linear-gradient(165deg, #101A31, #0B1324 62%);
  color: #E8ECF4;
  border: 1px solid rgba(232, 236, 244, .12);
  box-shadow: 0 30px 80px rgba(11, 19, 36, .45);
  overflow: hidden;
}
.portal-hud::before {                       /* fine grid texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 236, 244, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 236, 244, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent);
  pointer-events: none;
}
.portal-hud h1, .portal-hud h2, .portal-hud h3 { color: #F4F7FC; letter-spacing: -.015em; }
.portal-hud .form-note { color: #A7B2C4; }

.glass-panel {
  position: relative;
  border-radius: calc(var(--radius) + 4px);
  background: rgba(18, 29, 54, .58);
  border: 1px solid rgba(232, 236, 244, .12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-panel { background: #131E38; }
}
.glass-panel:hover { border-color: rgba(181, 227, 60, .3); }

/* HUD quick-stat strip */
.hud-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 18px;
  position: relative;
}
.hud-stat {
  border-radius: var(--radius);
  padding: 14px 16px;
  background: rgba(18, 29, 54, .5);
  border: 1px solid rgba(232, 236, 244, .1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hud-stat strong { display: block; font: 800 1.35rem/1.1 var(--font-head); color: #F4F7FC; font-variant-numeric: tabular-nums; }
.hud-stat small { color: #A7B2C4; font: 600 .72rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .07em; }

/* ---------- 11. Project health rings (SVG, zero JS to draw) ---------- */
.ring-wrap { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 74px; height: 74px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .ring-track { fill: none; stroke: var(--v7-ring-track); stroke-width: 7; }
.ring .ring-fill {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 148;                 /* 2π × 23.5 (52 viewBox) */
  stroke-dashoffset: 148;                /* JS animates to the real value */
  transition: stroke-dashoffset 1.4s var(--v7-ease) .2s;
}
.ring .ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 .95rem/1 var(--font-head);
  color: #F4F7FC;
  font-variant-numeric: tabular-nums;
}
.ring-stat small { color: #A7B2C4; font: 600 .72rem/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.ring-stat strong { color: #F4F7FC; font: 700 1rem/1.3 var(--font-head); }

/* ---------- 12. Milestone Roadmap 2.0: glow when approved, pulse in review ---------- */
.portal-hud .milestones { position: relative; }
.portal-hud .milestone-dot { transition: box-shadow .5s var(--v7-ease), background .5s var(--v7-ease); }
.portal-hud .milestone-approved .milestone-dot,
.portal-hud .milestone-done .milestone-dot {
  background: var(--lime);
  color: #1A2405;
  box-shadow: 0 0 0 4px rgba(181, 227, 60, .18), 0 0 22px var(--v7-glow);
}
.portal-hud .milestone-active .milestone-dot { color: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .portal-hud .milestone-active .milestone-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 2px solid rgba(181, 227, 60, .55);
    animation: v7-pulse 2.2s var(--v7-ease-io) infinite;
  }
  @keyframes v7-pulse {
    0%   { transform: scale(.82); opacity: .9; }
    70%  { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
  }
}
.portal-hud .milestone { position: relative; }
.portal-hud .milestone-dot { position: relative; }

/* ---------- 13. Interactive Mockup Pinning HUD 2.0 ---------- */
/* Floating action dock */
.pin-dock {
  position: sticky;
  bottom: 18px;
  z-index: 30;
  margin: 14px auto 0;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16, 26, 49, .82);
  border: 1px solid rgba(232, 236, 244, .16);
  box-shadow: 0 18px 50px rgba(11, 19, 36, .45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #E8ECF4;
}
.pin-dock .dock-label { font: 700 .68rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: #A7B2C4; }
.pin-dock button {
  border: 1px solid rgba(232, 236, 244, .18);
  background: transparent;
  color: #E8ECF4;
  border-radius: 999px;
  padding: .48em 1em;
  font: 600 .82rem/1 var(--font-head);
  cursor: pointer;
  transition: all var(--v7-dur-fast) var(--v7-ease);
}
.pin-dock button:hover { border-color: var(--lime); color: #F4F7FC; }
.pin-dock button[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: #1A2405;
  box-shadow: 0 6px 18px var(--v7-glow-soft);
}
.pin-dock .dock-sep { width: 1px; height: 22px; background: rgba(232, 236, 244, .18); }

/* annotation mode state: crosshair cursor + armed hint */
.annotate-canvas { position: relative; }
.annotate-canvas.is-annotate { cursor: crosshair; }
.annotate-stage.is-annotate .annotate-canvas { outline: 2px dashed rgba(181, 227, 60, .55); outline-offset: 6px; }

/* fullscreen preview mode */
.annotate-stage.is-full {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 12, 24, .96);
  padding: 3vh 3vw;
  overflow: auto;
}
.annotate-stage.is-full .annotate-canvas { max-width: none !important; margin: 0 auto; }
body.v7-no-scroll { overflow: hidden; }

/* pin badges: author initials + status pulse */
.pin-marker {
  display: grid;
  place-items: center;
  font: 800 .72rem/1 var(--font-head);
}
.pin-marker .pin-initials {
  position: absolute;
  inset: auto auto -8px -8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 .5rem/1 var(--font-head);
  letter-spacing: .02em;
  color: #0B1324;
  background: #8FB5FF;
  border: 2px solid #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .pin-marker.pin-open::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid rgba(196, 61, 61, .6);
    animation: v7-pulse 2.4s var(--v7-ease-io) infinite;
  }
}
.pin-marker.pin-ghost { opacity: .8; border-style: dashed; }

/* popover conversation card */
.pin-pop {
  position: absolute;
  z-index: 40;
  width: min(340px, 86vw);
  border-radius: var(--radius);
  background: rgba(16, 26, 49, .94);
  border: 1px solid rgba(232, 236, 244, .16);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  backdrop-filter: blur(16px);
  color: #E8ECF4;
  padding: 14px;
  transform-origin: top left;
  animation: v7-pop .28s var(--v7-ease);
}
@keyframes v7-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.pin-pop .pin-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pin-pop .pin-pop-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 .72rem/1 var(--font-head);
  background: var(--lime);
  color: #1A2405;
}
.pin-pop h4 { margin: 0; font: 700 .92rem/1.3 var(--font-head); color: #F4F7FC; }
.pin-pop .pin-pop-meta { color: #A7B2C4; font: 500 .72rem/1.4 var(--font-body); }
.pin-pop .pin-pop-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #A7B2C4;
  font: 700 1rem/1 var(--font-head);
  cursor: pointer;
}
.pin-pop .pin-pop-close:hover { color: #F4F7FC; }

.pin-thread { display: grid; gap: 8px; max-height: 220px; overflow: auto; margin: 4px 0 10px; }
.pin-msg { border-radius: 12px; padding: 9px 12px; font: 500 .84rem/1.5 var(--font-body); }
.pin-msg.client { background: rgba(80, 140, 255, .16); border: 1px solid rgba(80, 140, 255, .3); }
.pin-msg.staff  { background: rgba(181, 227, 60, .12); border: 1px solid rgba(181, 227, 60, .32); margin-left: 14px; }
.pin-msg b { display: block; font: 700 .68rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; color: #C9D4E5; }
.pin-msg.staff b { color: #D9F0A0; }
.pin-msg time { display: block; margin-top: 4px; font-size: .66rem; color: #8792A1; }
.pin-thread-empty { color: #A7B2C4; font: 500 .8rem/1.5 var(--font-body); }

.pin-reply-form { display: grid; gap: 8px; }
.pin-reply-form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(232, 236, 244, .2);
  background: rgba(11, 19, 36, .6);
  color: #E8ECF4;
  font: 500 .84rem/1.5 var(--font-body);
  padding: 9px 11px;
  resize: vertical;
  min-height: 56px;
}
.pin-reply-form textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.pin-reply-form button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: .55em 1.2em;
  font: 700 .8rem/1 var(--font-head);
  background: var(--lime);
  color: #1A2405;
  cursor: pointer;
}
.pin-reply-form button:hover { box-shadow: 0 8px 22px var(--v7-glow-soft); }

/* ---------- 14. Estimator 3.0: rush slider, tiers, floating ticker ---------- */
.rush-slider { display: grid; gap: 8px; margin-top: 6px; }
.rush-slider input[type="range"] { width: 100%; accent-color: var(--lime); }
.rush-scale { display: flex; justify-content: space-between; font: 600 .72rem/1 var(--font-body); color: var(--muted); }
.rush-val { font: 700 .82rem/1 var(--font-head); color: var(--ink); font-variant-numeric: tabular-nums; }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 14px 0 4px; }
.tier-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  padding: 16px;
  cursor: pointer;
  transition: transform var(--v7-dur) var(--v7-ease), box-shadow var(--v7-dur) var(--v7-ease), border-color var(--v7-dur) var(--v7-ease);
}
.tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(181, 227, 60, .6); }
.tier-card.is-on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 14px 40px var(--v7-glow-soft); }
.tier-card .tier-flag {
  position: absolute;
  top: -10px; right: 14px;
  font: 700 .62rem/1 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--navy);
  color: #E8ECF4;
  border-radius: 999px;
  padding: .5em .8em;
}
.tier-card strong { display: block; font: 800 .95rem/1.25 var(--font-head); color: var(--ink); }
.tier-card small { color: var(--muted); font: 500 .78rem/1.5 var(--font-body); }
.tier-card .tier-price { display: block; margin-top: 8px; font: 800 1.02rem/1 var(--font-head); color: var(--navy); font-variant-numeric: tabular-nums; }

/* floating live price ticker */
.est-ticker {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(16, 26, 49, .88);
  border: 1px solid rgba(232, 236, 244, .16);
  box-shadow: 0 18px 50px rgba(11, 19, 36, .45);
  backdrop-filter: blur(16px);
  color: #A7B2C4;
  font: 600 .74rem/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity .4s var(--v7-ease), translate .4s var(--v7-ease);
}
.est-ticker.is-live { opacity: 1; translate: 0 0; }
.est-ticker strong {
  color: #F4F7FC;
  font: 800 1.06rem/1 var(--font-head);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.est-ticker .tick-currency { color: var(--lime); font-weight: 800; }
@media (max-width: 640px) { .est-ticker { right: 12px; bottom: 12px; } }

/* ---------- 15. Interactive tech-stack radar ---------- */
.radar { margin-top: 26px; display: grid; gap: 16px; }
.radar-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.radar-filter {
  border: 1px solid var(--line);
  background: var(--v7-glass);
  color: var(--ink);
  border-radius: 999px;
  padding: .5em 1.05em;
  font: 600 .84rem/1 var(--font-head);
  cursor: pointer;
  transition: all var(--v7-dur-fast) var(--v7-ease);
}
.radar-filter[aria-pressed="true"] { background: var(--navy); color: #E8ECF4; border-color: var(--navy); }
.radar-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.radar-chip {
  position: relative;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: .62em 1.15em;
  font: 600 .9rem/1 var(--font-head);
  color: var(--ink);
  cursor: default;
  transition: transform var(--v7-dur) var(--v7-ease), box-shadow var(--v7-dur) var(--v7-ease), border-color var(--v7-dur) var(--v7-ease), opacity .3s var(--v7-ease);
}
.radar-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(181, 227, 60, .65);
  box-shadow: 0 10px 30px var(--v7-glow-soft);
}
.radar-chip.is-hidden { display: none; }
.radar-chip .chip-cat {
  font: 700 .58rem/1 var(--font-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: .6em;
}
/* benchmark stat card on hover — CSS only */
.radar-chip .chip-stat {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  border-radius: 12px;
  background: rgba(16, 26, 49, .95);
  color: #E8ECF4;
  border: 1px solid rgba(232, 236, 244, .16);
  padding: 10px 13px;
  font: 500 .78rem/1.5 var(--font-body);
  box-shadow: 0 16px 44px rgba(11, 19, 36, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--v7-ease), transform .25s var(--v7-ease);
  z-index: 20;
}
.radar-chip .chip-stat b { color: var(--lime); font-variant-numeric: tabular-nums; }
.radar-chip:hover .chip-stat, .radar-chip:focus-visible .chip-stat {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 17. Theme toggle: three visible states (dark/light/system) ---------- */
.theme-icon { display: none; line-height: 0; position: relative; }
.theme-icon .icon { width: 17px; height: 17px; }
html[data-theme-pref="light"] .theme-icon-sun { display: inline-flex; }
html[data-theme-pref="dark"] .theme-icon-moon { display: inline-flex; }
html[data-theme-pref="system"] .theme-icon-auto { display: inline-flex; }
html:not([data-theme-pref]) .theme-icon-sun { display: inline-flex; }   /* legacy */
.theme-icon-auto b {
  position: absolute;
  right: -4px; bottom: -3px;
  font: 800 .44rem/1 var(--font-head);
  background: var(--lime);
  color: #1A2405;
  border-radius: 4px;
  padding: 1px 2.5px;
}

/* ---------- 16. Motion safety & print ---------- */
@media (prefers-reduced-motion: reduce) {
  #v7Aura .aura-breathe,
  .beam-card:hover::before,
  .pin-marker.pin-open::after,
  .portal-hud .milestone-active .milestone-dot::after { animation: none !important; }
  .bento-card, .btn-magnetic, .vpe-device, .radar-chip, .tier-card { transition: none !important; }
  .ring .ring-fill { transition: none !important; stroke-dashoffset: 0; }
}
@media print {
  #v7Aura, body::after, .pin-dock, .est-ticker, .vpe-bar, .ba2-tabs { display: none !important; }
}