/* ============================================================================
   useTalos TECHIFY LAYER — shared HUD design-system overlay
   Loaded AFTER each page's inline styles; overrides the soft/bubbly v1 look
   with the futuristic HUD system per TECHIFY-DESIGN-SYSTEM-2026-07-06.md.
   Pages: usetalos-consultation-pages/*.html  ·  Author: Fable (Mariah) 2026-07-06
   Rules honored: no bubbles · ONE coral accent · every link stays a real <a>
   · reduced-motion safe · no horizontal scroll · zero new CDN deps.
   ========================================================================== */

:root{
  /* mono voice for kickers/labels/telemetry */
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* accent LAW: the old pink #FF5470 becomes THE one coral */
  --red:#FF6A55; --red2:#E85541; --coral:#FF6A55;
  --glow-red:0 12px 30px rgba(255,106,85,.30);
  /* sharpen the whole radius scale (was 16/12/22 — soft) */
  --radius:12px; --radius-sm:8px; --radius-lg:14px;
  --hud-line:color-mix(in srgb,var(--azure,#1E9BFF) 32%,transparent);
  --hud-line-hot:var(--cyan,#45E3FF);
  --hud-tick:color-mix(in srgb,var(--cyan,#45E3FF) 75%,transparent);
}

/* re-pin the eyebrow pulse to coral (v1 keyframes hardcoded the pink) */
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,106,85,.18)}
  50%{box-shadow:0 0 0 7px rgba(255,106,85,.05)}
}

/* ---------- page-wide HUD grid (very faint, masked to the top) ---------- */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(color-mix(in srgb,var(--azure,#1E9BFF) 8%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--azure,#1E9BFF) 8%,transparent) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 78%)}

/* ---------- scroll progress telemetry bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan,#45E3FF),var(--azure,#1E9BFF));
  box-shadow:0 0 8px color-mix(in srgb,var(--cyan,#45E3FF) 70%,transparent)}

/* ---------- mono kickers / labels ---------- */
.kicker{font-family:var(--mono);border-radius:6px;letter-spacing:.18em;font-size:11px}
.kicker::before{content:"// "}
.eyebrow{font-family:var(--mono);border-radius:var(--radius-sm);letter-spacing:.09em;text-transform:uppercase;font-size:11.5px}
.panel-top .lbl{font-family:var(--mono);letter-spacing:.04em}

/* ---------- buttons & pills: sharp frames, not lozenges ---------- */
.btn{border-radius:10px}
.btn-ghost{border-color:var(--hud-line)}
.btn-ghost:hover{box-shadow:0 0 0 1px var(--hud-line-hot)}
.pill{border-radius:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.scenario-row{border-radius:12px}
.badge{border-radius:8px;font-family:var(--mono);letter-spacing:.1em}

/* ---------- HUD panels: cards, tiers, steps, chat panel, media frames ------
   Framed border + glowing top rule + (JS-injected) corner tick. */
.card,.tier,.step,.panel,details{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--hud-line);
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(226,237,255,.4))}
.card{background-color:var(--surface,#fff)}
.tier,.step,details{background-color:var(--surface,#fff)}
.tier.pop{border:1.6px solid transparent;
  background:linear-gradient(var(--surface,#fff),var(--surface,#fff)) padding-box,
             linear-gradient(135deg,var(--cyan,#45E3FF),var(--azure,#1E9BFF) 60%,var(--coral)) border-box}
.card:hover,.tier:hover,.step:hover{border-color:var(--hud-line-hot);
  box-shadow:0 0 0 1px var(--hud-line-hot),0 22px 54px rgba(30,155,255,.24)}
/* the v1 card top-line only appeared on hover — keep it armed at rest */
.card::before{transform:scaleX(1);opacity:.35;background:linear-gradient(90deg,var(--cyan,#45E3FF),var(--azure,#1E9BFF),transparent)}
.card:hover::before{opacity:1}
/* JS-injected corner tick (span.hud-tick, aria-hidden) */
.hud-tick{position:absolute;top:9px;right:9px;width:14px;height:14px;pointer-events:none;z-index:4;
  border-top:2px solid var(--hud-tick);border-right:2px solid var(--hud-tick)}
.card .hud-tick{right:36px} /* clear the card's "+" affordance */
.step .num{border-radius:8px;font-family:var(--mono);
  background:linear-gradient(150deg,#0b1c3a,#123a9e);
  box-shadow:0 0 14px color-mix(in srgb,var(--cyan,#45E3FF) 45%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan,#45E3FF) 55%,transparent)}
.card .ic{border-radius:10px}

/* FAQ: access-log styling */
details{border-radius:10px}
details[open]{border-left:2px solid var(--azure,#1E9BFF);
  box-shadow:0 0 0 1px var(--hud-line),0 18px 46px rgba(11,95,217,.12)}
summary .pl{border-radius:6px;font-family:var(--mono)}

/* chat mock reads as a console, not a bubble bath */
.bubble{border-radius:10px;box-shadow:none;border:1px solid var(--line2,#E1EEFF)}
.bubble.them{border-bottom-left-radius:3px}
.bubble.us{border:0;border-bottom-right-radius:3px}
.float-chip{border-radius:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
.float-chip .ic{border-radius:6px}

/* media frames get the same framing discipline */
.media-wrap,.video-wrap{border-radius:var(--radius-lg);border:1px solid var(--hud-line)}

/* ---------- the hero "blob" becomes a reactor core (bubbles are banned) --- */
.blob{border-radius:0!important;
  clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
  background:linear-gradient(160deg,rgba(69,227,255,.65),rgba(30,155,255,.4));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 24px color-mix(in srgb,var(--cyan,#45E3FF) 60%,transparent);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),filter .35s}
.blob.squish{border-radius:0!important;
  clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
  transform:translateX(-46px) scale(.82) rotate(14deg);filter:hue-rotate(-18deg) brightness(1.15)}

/* ---------- FUTURISTIC EDGE-FX (markup injected by techify.js) ---------- */
.edge-fx{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.edge-fx .hud{position:absolute;width:62px;height:62px;border:2px solid color-mix(in srgb,var(--cyan,#45E3FF) 72%,transparent);opacity:.6;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cyan,#45E3FF) 70%,transparent))}
.edge-fx .hud.tl{top:88px;left:22px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.edge-fx .hud.tr{top:88px;right:22px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.edge-fx .hud.bl{bottom:22px;left:22px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.edge-fx .hud.br{bottom:22px;right:22px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.edge-fx .hud::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 10px var(--coral);animation:hudpulse 2.4s ease-in-out infinite}
.edge-fx .hud.tl::after{top:-4px;left:-4px}.edge-fx .hud.tr::after{top:-4px;right:-4px}
.edge-fx .hud.bl::after{bottom:-4px;left:-4px}.edge-fx .hud.br::after{bottom:-4px;right:-4px}
@keyframes hudpulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.edge-fx .shard{position:absolute;opacity:.55;will-change:transform}
.edge-fx .hex{width:118px;height:118px;border:1.5px solid color-mix(in srgb,var(--azure,#1E9BFF) 72%,transparent);
  clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
  background:linear-gradient(160deg,rgba(69,227,255,.10),transparent);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cyan,#45E3FF) 55%,transparent))}
.edge-fx .ring{width:92px;height:92px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--cyan,#45E3FF) 55%,transparent);animation:tfspin 16s linear infinite}
.edge-fx .ring::before{content:"";position:absolute;inset:15px;border-radius:50%;border:1px solid color-mix(in srgb,var(--azure,#1E9BFF) 45%,transparent)}
@keyframes tfspin{to{transform:rotate(360deg)}}
.edge-fx .s1{top:13%;left:-32px}
.edge-fx .s2{top:65%;left:2.5%}
.edge-fx .s3{top:19%;right:-26px}
.edge-fx .s4{top:73%;right:4%}
.edge-fx .stream{position:absolute;top:0;bottom:0;width:2px;opacity:.5;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cyan,#45E3FF) 32%,transparent),transparent)}
.edge-fx .stream.l{left:42px}.edge-fx .stream.r{right:42px}
.edge-fx .stream i{position:absolute;left:-2px;width:6px;height:62px;border-radius:6px;filter:blur(1px);
  background:linear-gradient(180deg,transparent,var(--cyan,#45E3FF),transparent);animation:tfflow 3.6s linear infinite}
.edge-fx .stream.r i{animation-delay:1.8s}
@keyframes tfflow{0%{top:-70px}100%{top:100%}}
.edge-fx .scan{position:absolute;left:0;right:0;height:150px;top:-150px;
  background:linear-gradient(180deg,transparent,rgba(69,227,255,.09),transparent);animation:tfsweep 7.5s ease-in-out infinite}
@keyframes tfsweep{0%{top:-150px}100%{top:100%}}

/* ---------- final CTA: add circuit texture + system readout ---------- */
.final{position:relative}
.final::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 90% at 50% 50%,#000,transparent 88%);
  mask-image:radial-gradient(90% 90% at 50% 50%,#000,transparent 88%)}
.final .wrap::after{content:"// SYSTEM READY — CONSULT SLOT OPEN";display:block;margin-top:26px;
  font:700 .62rem var(--mono);letter-spacing:.18em;opacity:.72;text-transform:uppercase}

/* ---------- footer: glowing top rule ---------- */
footer{border-top:1px solid color-mix(in srgb,var(--cyan,#45E3FF) 45%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cyan,#45E3FF) 30%,transparent)}
.foot-col h4{font-family:var(--mono);letter-spacing:.14em}

/* ---------- SCRUB-SCENE: pinned faux-3D frame-scrub showpiece ----------
   Markup: <section class="scrub-scene" data-frames="...">
             <div class="ss-pin"> <img.ss-poster> <canvas.ss-canvas>
               <span.ss-hud> <img.ss-obj?> <div.ss-copy> </div></section>
   scroll-fakes.js drives it; without JS the poster still shows. */
.scrub-scene{position:relative;height:230vh;margin:40px 0}
.scrub-scene .ss-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.scrub-scene .ss-poster,.scrub-scene .ss-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scrub-scene .ss-canvas{opacity:0;transition:opacity .5s}
.scrub-scene .ss-canvas.on{opacity:1}
.scrub-scene .ss-poster.off{opacity:0;transition:opacity .5s}
.scrub-scene .ss-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(85% 70% at 50% 45%,transparent 55%,rgba(234,244,255,.55) 100%)}
.scrub-scene .ss-hud{position:absolute;top:26px;left:28px;z-index:3;font:700 .62rem var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:#9fd8ff;opacity:.9;
  padding:7px 12px;border:1px solid rgba(69,227,255,.34);border-radius:6px;
  background:rgba(4,16,31,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scrub-scene .ss-hud::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 8px var(--coral);margin-right:8px;vertical-align:1px;
  animation:hudpulse 2.4s ease-in-out infinite}
.scrub-scene .ss-obj{position:absolute;right:7%;bottom:11%;z-index:2;width:min(24vw,280px);
  pointer-events:none;will-change:transform,opacity;
  filter:drop-shadow(0 18px 34px rgba(11,95,217,.35)) drop-shadow(0 0 26px color-mix(in srgb,var(--cyan,#45E3FF) 40%,transparent));
  animation:ssobj-float 6s ease-in-out infinite}
@keyframes ssobj-float{50%{translate:0 -12px}}
/* copy panel = dark HUD console pinned to the lower third — never a white card
   floating over the subject (2026-07-07 fix: the "white box over the robot") */
.scrub-scene .ss-copy{position:absolute;left:20px;right:20px;bottom:7%;z-index:2;margin-inline:auto;
  text-align:center;max-width:620px;padding:22px 26px;
  border-radius:12px;border:1px solid rgba(69,227,255,.34);
  background:rgba(4,16,31,.58);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 0 0 1px rgba(69,227,255,.08),0 24px 60px rgba(0,0,0,.45);opacity:0;will-change:transform,opacity}
.scrub-scene .ss-copy::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan,#45E3FF),var(--azure,#1E9BFF),transparent)}
.scrub-scene .ss-copy .ss-k{display:inline-block;font:700 .66rem var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:#45E3FF;margin-bottom:10px}
.scrub-scene .ss-copy h3{font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 8px;color:#fff}
.scrub-scene .ss-copy p{color:#b9d6f2;font-size:1.02rem;margin:0}
/* idle life: the pinned frame breathes even when scroll is parked */
.scrub-scene .ss-canvas.on{animation:ss-breathe 9s ease-in-out infinite alternate}
@keyframes ss-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(max-width:860px){
  .scrub-scene{height:175vh}
  .scrub-scene .ss-obj{width:38vw;right:4%;bottom:8%}
}
@media(prefers-reduced-motion:reduce){
  .scrub-scene{height:auto;margin:24px 0}
  .scrub-scene .ss-pin{position:relative;height:52vh}
  .scrub-scene .ss-canvas{display:none}
  .scrub-scene .ss-copy{opacity:1!important;transform:none!important}
  .scrub-scene .ss-obj{display:none}
}

/* ---------- Lenis smooth-scroll host classes ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- craft layer (2026-07-07 award pass, shared with homepage) ---------- */
/* film grain — kills the flat-plastic tell */
body::after{content:"";display:none;position:fixed;inset:0;z-index:75;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#EAF4FF}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#45E3FF,#1E9BFF);border-radius:8px;border:2.5px solid #EAF4FF}

/* ---------- responsive + accessibility guards ---------- */
@media(max-width:720px){
  .edge-fx .shard,.edge-fx .stream{display:none} /* corners + scan stay; clutter goes */
}
@media(prefers-reduced-motion:reduce){
  body::before{display:none}
  .edge-fx{display:none}
  .scroll-progress{display:none}
  .blob,.blob.squish{transition:none}
}