/* ========= styleheather.css (simple, no vars) ========= */

/* Base */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: "Funnel Display", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#1e1f2a;
  background:#fff;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }

/* your font */
.features h3, nav {
  font-family: "Jacquarda Bastarda 9", serif;
}

/* apply to any element you want to shimmer */
.shimmer-text {
  color: #000;                    /* fallback color if no clip support */
  position: relative;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .shimmer-text {
    /* mostly black with a thin #4440ff band */
    background-image: linear-gradient(
      90deg,
      #4440ff,
      #4440ff 44%,
      #000,
      #4440ff 56%,
      #000 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: #000;
    animation: shimmer-slide 3.5s linear infinite;
  }
}

@keyframes shimmer-slide {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .shimmer-text { animation: none !important; }
}


.denisa {
  font-family: "Jacquarda Bastarda 9", serif;
  font-size:50px;
}

.jacquarda-bastarda-9-regular {
  font-family: "Jacquarda Bastarda 9", serif;
  font-weight: 400;
  font-style: normal;
}

.pxlh{
  font-family:"Jacquarda Bastarda 9", serif;
  font-weight:600; /* your note */
  font-size: calc(var(--ui) * 1.2em);
  line-height: calc(var(--ui) * 40px);
  margin: 0;
}


 .navcontainer {
  max-width: 700px;
  margin: auto;
 }

 
/* ===== chrrybmb header (mini, prism, responsive) ===== */
.site-header{
  /* one knob for header height; scales smoothly with viewport */
  --H: clamp(42px, 4.2vw + 24px, 56px);

  --indigo:#4440ff; --pink:#ffe9ff; --ink:#0e0f1a;
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  isolation: isolate;
}

/* subtle prism veil — no solid bg */
.site-header__chrome{
  position: absolute; inset: 0; pointer-events: none; opacity: .42;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)),
    conic-gradient(from var(--spin,0deg) at 80% 0%, #7ff0ff, #ff6adf 45%, #7ff0ff);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.4) 65%, transparent);
          mask-image: linear-gradient(#000, rgba(0,0,0,.4) 65%, transparent);
  animation: headerSpin 28s linear infinite;
}
@keyframes headerSpin { to { --spin: 1turn; } }
@media (prefers-reduced-motion: reduce){ .site-header__chrome{ animation:none } }

/* layout: brand | nav | search */
.header__inner{
  height: var(--H);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: min(1100px, 100%);
  margin-inline: auto;
  padding-inline: clamp(10px, 3vw, 16px);
}
@supports (padding: max(0px)){
  .header__inner{
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
  }
}

/* logo strictly follows header height — never overflows */
.brand{ display:inline-grid; place-items:center; overflow:hidden; text-decoration:none }
.brand__logo{
  height: calc(var(--H) - 10px);
  width: auto; max-height: 100%; display:block; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(68,64,255,.18));
}
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo{ filter: drop-shadow(0 10px 24px rgba(68,64,255,.22)) saturate(118%); }

/* nav — micro caps with prism underline */
.nav{ min-width: 0; }
.nav__list{
  display:flex; justify-content:center; align-items:center;
  gap: clamp(8px, 2vw, 14px);
  list-style:none; margin:0; padding:0; flex-wrap: nowrap;
}
.nav__list a{
  position:relative; padding: 6px 6px; border-radius:8px;
  font: 800 10.5px/1 "Funnel Display", system-ui, sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#1b1e35; text-decoration:none;
  white-space: nowrap;
}
.nav__list a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:3px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, #7ff0ff, #ff6adf, #7ff0ff);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .18s ease; opacity:.85;
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after{ transform: scaleX(1); }

/* tiny search button */
.icon-btn{
  inline-size: clamp(24px, 3.2vw, 28px);
  block-size: clamp(24px, 3.2vw, 28px);
  display:grid; place-items:center; border-radius:8px; cursor:pointer;
  border:1px solid #5a57ff; background:linear-gradient(180deg,#fff,#f6f6ff);
  box-shadow:0 0 0 1px rgba(68,64,255,.06) inset; color:#17182a;
}
.icon-btn svg{ inline-size: 77%; block-size: 77%; }
.icon-btn:hover{ box-shadow:0 0 0 1px rgba(68,64,255,.12) inset, 0 6px 16px rgba(68,64,255,.10) }
.icon-btn:focus-visible{ outline:2px solid #5a57ff; outline-offset:2px }

/* micro squeeze on very small phones */
@media (max-width: 420px){
  .site-header{ --H: clamp(38px, 3.8vw + 22px, 50px); }
  .header__inner{ gap: 6px; padding-inline: 8px; }
  .nav__list{ gap: 8px; }
  .nav__list a{ padding: 5px 4px; }
}

/* ===== search overlay (functional) ===== */
.search[hidden]{ display:none; }

.search{
  position: fixed; inset: 0;
  z-index: 2147483647;              /* above everything */
}

.search__backdrop{
  position:absolute; inset:0;
  background: rgba(12,14,26,.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1;                       /* under the panel */
}

.search__panel{
  position:relative;
  z-index: 2;                       /* above the backdrop (clickable!) */
  width:min(720px, 92vw);
  margin: clamp(80px, 10vh, 140px) auto 0;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
  border:1px solid rgba(90,87,255,.45);
  box-shadow: 0 20px 60px rgba(68,64,255,.18);
}

.search__head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px dashed rgba(68,64,255,.25);
}
.search__head svg{ width:14px; height:14px; color:#17182a; }
.search__head input{
  border:0; outline:0; background:transparent;
  font: 700 14px/1.2 "DM Sans", system-ui, sans-serif; color:#0e0f1a;
}
.kbd{
  font: 800 10px/1 "Funnel Display", system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid #5a57ff; border-radius:8px; padding:6px 8px; background:#fff; color:#17182a;
}

.search__results{
  list-style:none; margin:0; padding:6px;
  max-height:min(52vh, 420px); overflow:auto;
}
.search__results li{
  border-radius:12px; padding:10px 12px; display:grid; gap:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.42));
  border:1px solid transparent;
}
.search__results li + li{ margin-top:6px; }
.search__results a{
  text-decoration:none; color:#121324; font:600 13px/1.25 "DM Sans", system-ui, sans-serif;
}
.search__results .path{ font:600 11px/1 "DM Sans"; opacity:.65; }
.search__results li[aria-selected="true"]{
  border-color:#5a57ff; box-shadow:0 0 0 1px rgba(68,64,255,.10) inset;
}

/* interactivity polish */
.search__results li{
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.search__results li:hover{
  border-color:#5a57ff;
  box-shadow:0 0 0 1px rgba(68,64,255,.10) inset, 0 8px 18px rgba(68,64,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.48));
}
.search__results li:hover a{ text-decoration:none }
.search__results li[aria-selected="true"]{
  border-color:#5a57ff;
  box-shadow:0 0 0 1px rgba(68,64,255,.10) inset;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.48));
}

.search .kbd{
  cursor: pointer;
  user-select: none;
}
.search .kbd:focus-visible{
  outline: 2px solid #5a57ff;
  outline-offset: 2px;
}
.search .kbd:active{
  transform: translateY(1px);
}


/* Buttons */
.btn{
  display:inline-block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-weight:700;
  border:0;
  border-radius:999px;
  padding:.65rem 1rem; color:#fff;
  background:linear-gradient(135deg,#f800ff,#4440ff);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:transform .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(68,64,255,.18) }
.btn--ghost{
  background: #ffffff60; color:#4440ff; border:2px solid #5a57ff;
}

/* === Iridescent edge halo (outer-ring) on hover === */
/* Standalone class. Do NOT combine with .btn */

.btn-iris{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: .30rem 1.05rem;
  margin: 0;
  border-radius: 55px;
  border: 0;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;

  /* Base visuals (keep your gradient fill) */
  color: #fff;
  background: linear-gradient(135deg,#f800ff,#4440ff);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;

  /* IMPORTANT: allow the outer halo to breathe beyond the pill */
  overflow: visible;
  isolation: isolate;
  z-index: 7; /* ensures it renders above hero overlays with z<7 */
}

/* lift on hover */
.btn-iris:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(68,64,255,.18);
}

/* Outer halo ring — lives OUTSIDE the pill edges only */
.btn-iris::before{
  content: "";
  position: absolute;
  inset: -2px;  
  padding: 4px;
  filter: blur(8px);      /* how far the halo extends outside */
  border-radius: inherit;
  pointer-events: none;

  /* Prism band that will travel left→right */
  background: linear-gradient(90deg,
    rgba(248,0,255,.45) 40%,
    rgba(255,255,255,.95) 50%,
    rgba(68,64,255,.45) 60%
  );
  background-size: 260% 100%;
  background-position: -160% 0;

  /* Show ONLY a ring: exclude the inner pill area */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 8px;              /* ring thickness (matches inset) */

  /* Soft, watery glow */
  filter: blur(10px) saturate(115%);
  opacity: 0;                /* idle = invisible */
  transition: background-position 2.2s linear, opacity .18s ease;
}

/* trigger a single left→right sweep on hover/focus */
.btn-iris:hover::before,
.btn-iris:focus-visible::before{
  background-position: 160% 0;
  opacity: 1;
}

/* GHOST variant: transparent pill + animated outer halo */
.btn-iris.btn-iris--ghost{
  background: #ffffff60; color: #4440ff;
  border: 2px solid #5a57ff; /* static base border */
  box-shadow: none;
}

/* ghost uses the same halo; keep it a touch stronger */
.btn-iris.btn-iris--ghost::before{
  inset: -3px;
  padding: 3px;
  filter: blur(7px) saturate(120%);
  opacity: 0;
}
.btn-iris.btn-iris--ghost:hover::before,
.btn-iris.btn-iris--ghost:focus-visible::before{
  opacity: 1;
}

/* Optional: continuous shimmer while hovered */
.btn-iris.btn-iris--loop:hover::before,
.btn-iris.btn-iris--loop:focus-visible::before{
  transition: none;
  animation: iris-loop 6.6s linear infinite;
}
@keyframes iris-loop{
  from { background-position: -160% 0; }
  to   { background-position: 160% 0; }
}

/* Reduced motion: keep a calm, static halo on interaction */
@media (prefers-reduced-motion: reduce){
  .btn-iris::before{
    transition: opacity 4.4s ease;
    background-position: 0 0;
  }
  .btn-iris:hover::before,
  .btn-iris:focus-visible::before{
    opacity: .8;
  }
}

.btn-iris{ --halo: 4px; --halo-blur: 8px; }
.btn-iris::before{ inset: calc(-1*var(--halo)); padding: var(--halo); filter: blur(var(--halo-blur)) saturate(115%); }
.btn-iris.btn-iris--ghost::before{ inset: calc(-1*var(--halo)); padding: var(--halo); filter: blur(calc(var(--halo-blur) - 1px)) saturate(120%); }

.heather-svg{
  display:block;
  margin: 0;
  vertical-align: bottom;
  filter: drop-shadow(0 16px 40px rgba(68,64,255,.10));
  width: min(32vw, 666px);     
  height: 100%;
  align-self: flex-end;        /* sit on the bottom of the hero column */
}

html, body { height: 100%; }
body{
  min-height: 100svh; /* handles iOS chrome changes better than 100vh */
  display: flex;
  flex-direction: column;
}
main { flex: 1; } /* whatever wrapper holds your page content */

/* ----- Simple, brandy footer (no overlap) ----- */
.site-footer{
  /* in flow by default: never covers content */
  position: relative;
  z-index: 1;

  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;

  /* glass vibe */
  background: rgba(255,255,255,.55, .8);
  backdrop-filter: blur(10px) saturate(135%) contrast(105%);
  -webkit-backdrop-filter: blur(10px) saturate(135%) contrast(105%);
  border-top: 1px solid rgba(68,64,255,.12);

  /* soft top corners for the brand look */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  /* keep things tidy */
  overflow-x: clip;
}

.site-footer .dot{
  width:6px; height:6px; border-radius:50%;
  background: linear-gradient(90deg, var(--indigo,#4440ff), #8aa3ff);
}

.site-footer small{
  font: 600 13px/1 "DM Sans", system-ui, -apple-system, sans-serif;
  color:#1b1e35; white-space: nowrap;
}

/* Make sure nothing forces horizontal scroll */
img, svg, canvas, video, object, iframe { max-width: 100%; height: auto; }

/* --- Optional: on wider screens, "stick" to the bottom edge gracefully --- */
/* Sticky does NOT overlap content because it takes layout space. */
@media (min-width: 700px){
  .site-footer{
    position: sticky;
    bottom: 0; /* sticks when you scroll to the bottom area */
  }
}


/* ---------------- Hero ---------------- */
.hero{
    border-radius: clamp(16px, 2.4vw, 28px);
    box-shadow:
      0 18px 50px rgba(68,64,255,.10),
      0 2px 10px rgba(0,0,0,.04);
    width: min(1100px, 88vw);
    height: min(777px, 33vw) auto;
    
    margin: clamp(12px,3vw,28px) auto; 
  position: relative;
  isolation: isolate;
  padding: 0 0 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 120% -10%, rgba(68,64,255,.18) 0 50%, transparent 66%),
    linear-gradient(300deg, rgba(68,64,255,.44), #ffe9ff);
  background-size:180% 180%, 100% 100%;
  animation:bg-pan 12s ease-in-out infinite alternate;
  
  /* put inside .hero */
.radiant-orb{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;                    /* below text, above bg spans as needed */
  /* center falls back if no JS/pointer */
  --orb-x: 50%;
  --orb-y: 35%;

  /* subtle glow */
  background:
    radial-gradient(160px circle at var(--orb-x) var(--orb-y),
      rgba(68,64,255,.45),
      rgba(68,64,255,0) 60%);
  filter: blur(28px);
  transform: translateZ(0);
  will-change: background, filter;

  animation: orb-breathe 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;         /* nice on light bg; drop if too bright */
}

@keyframes orb-breathe{
  from { filter: blur(24px); opacity: .85; }
  to   { filter: blur(32px); opacity: .65; }
}

/* If user prefers reduced motion, keep a static soft glow */
@media (prefers-reduced-motion: reduce){
  .radiant-orb{ animation: none; }
}

/* Mobile/touch fallback: ensure it’s visible even without movement */
@media (pointer: coarse){
  .radiant-orb{
    --orb-x: 50%;
    --orb-y: 38%;
    opacity: .8;
  }
}

  
}

.mb10 {
  margin-bottom: 10px;
}

.mb50 {
  margin-bottom: 50px;
}

.mt50 {
  margin-top: 50px;
}

.mt20 {
  margin-top: 20px;
}


    /* Buttons (keep your styles) */
    .btn-pixel{
      --px: 10.5px; --px-track: .16em;
      display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
      padding: 8px 12px; border-radius: 10px;
      font: 800 var(--px)/1 var(--px-font); text-transform: uppercase; letter-spacing: var(--px-track);
      background: linear-gradient(180deg, #ffffff, #f6f6ff);
      border: 1px solid #1f22ff; color:#17182a;
      box-shadow: 0 0 0 1px rgba(68,64,255,.08) inset, 0 6px 18px rgba(68,64,255,.12);
      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
      text-decoration:none; cursor:pointer; user-select:none;
    }
    .btn-pixel:hover{ transform: translateY(-0.5px); box-shadow: 0 0 0 1px rgba(68,64,255,.10) inset, 0 10px 22px rgba(68,64,255,.18); }
    .btn-pixel:active{ transform: translateY(0); filter: saturate(105%); }
    .btn-pixel--ghost{ background:#fff; border-style:dashed; opacity:.92 }
    .btn-pixel:focus-visible{ outline:2px solid #5a57ff; outline-offset:2px; }


    /* Back to top */
.backtop{
  position: sticky;                /* sticks near the bottom of the viewport */
  bottom: clamp(10px, 4vh, 24px);  /* how far off the bottom */
  z-index: 10;
  padding: 8px 0 2px;              /* tiny breathing room above footer */
}

.btn-top{
  --indigo: var(--indigo, #4440ff);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #5a57ff;
  background: linear-gradient(180deg,#fff,#f6f6ff);
  color:#17182a;
  font: 800 12px/1 "Funnel Display", system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow: 0 8px 16px rgba(68,64,255,.12);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease, filter .2s ease;
}

.btn-top:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(68,64,255,.18); }
.btn-top:active{ transform: translateY(0); }
.btn-top:focus-visible{ outline:2px solid #5a57ff; outline-offset:2px; }

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

/* Optional: fade in only after some scroll */
.backtop{ opacity:0; filter:saturate(.96); transition: opacity .2s ease, filter .2s ease; }
.backtop.is-visible{ opacity:1; filter:none; }

/* Mobile: make sure it fits nicely */
@media (max-width:480px){
  .btn-top{ padding:10px 12px; }
}



.hero__actions{
  display: flex;
  justify-content: center;   /* center as default */
  align-items: center;
  gap: 14px;                 /* controls distance between buttons */
  flex-wrap: wrap;           /* allows wrap if space is tight */
  margin-top: clamp(8px, 2vw, 16px);
}



@keyframes bg-pan{
  0%{ background-position: 0% 50%, 50% 50% }
  100%{ background-position: 100% 50%, 50% 50% }
}

/* one-time float-in */
.hero{ animation: heroFloatIn .6s cubic-bezier(.22,.7,.25,1) both; }
@keyframes heroFloatIn{
  from{ opacity:0; transform: translateY(12px) scale(.992); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}
/* Respect reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero{ animation: none; }
}
 

/* Hero grid: text | media (stacks on mobile) */
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap: min(32px, 3vw);
  align-items:end; /* bottom-align children so image sits on the floor */
}
@media (min-width:900px){
  .hero__grid{ grid-template-columns: 1.1fr .9fr }
}

/* ===== Edge-only prism sweep on black type ===== */

/* animate the sweep position cleanly */
@property --shine-x {
  syntax: "<percentage>";
  initial-value: -20%;
  inherits: false;
}

.hero .name-edge{
  position: relative;
  margin: 0 0 10px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: var(--track, -0.06em);
  line-height: .77;
  color: #000;                       
  font-size: 4rem;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* 1) crisp white edge that is revealed by a moving mask */
.hero .name-edge::after{
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.95);     
  mix-blend-mode: screen;                               

  /* moving narrow window that reveals the edge */
  -webkit-mask-image: linear-gradient(90deg,
      transparent calc(var(--shine-x) - 9%),
      #fff        calc(var(--shine-x) - 1.2%),
      #fff        calc(var(--shine-x) + 1.2%),
      transparent calc(var(--shine-x) + 9%)
  );
          mask-image: linear-gradient(90deg,
      transparent calc(var(--shine-x) - 9%),
      #fff        calc(var(--shine-x) - 1.2%),
      #fff        calc(var(--shine-x) + 1.2%),
      transparent calc(var(--shine-x) + 9%)
  );
  animation: edgeSweep 7s linear infinite;
  opacity: .95;
}

/* 2) subtle colored fringe that follows the same mask (prism vibe, not glowy) */
.hero .name-edge::before{
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  color: transparent; /* show only the shadows */
  text-shadow:
    0 0 6px  rgba(248,0,255,.30),  /* magenta */
    0 0 10px rgba(68,64,255,.26);  /* indigo */

  /* same moving window, slightly wider for soft color roll-off */
  -webkit-mask-image: linear-gradient(90deg,
      transparent calc(var(--shine-x) - 12%),
      #fff        calc(var(--shine-x) - 2%),
      #fff        calc(var(--shine-x) + 2%),
      transparent calc(var(--shine-x) + 12%)
  );
          mask-image: linear-gradient(90deg,
      transparent calc(var(--shine-x) - 12%),
      #fff        calc(var(--shine-x) - 2%),
      #fff        calc(var(--shine-x) + 2%),
      transparent calc(var(--shine-x) + 12%)
  );
  animation: edgeSweep 2s linear infinite;
  opacity: .75;
}

@keyframes edgeSweep{
  0%   { --shine-x: -20%; }
  100% { --shine-x: 120%; }
}

/* Reduce motion, keep it crisp */
@media (prefers-reduced-motion: reduce){
  .hero .name-edge::before,
  .hero .name-edge::after{ animation: none; opacity: .66; }
}

/* Optional: tweak tracking on small screens */
@media (max-width: 600px){
  .hero .name-edge{ --track: -0.01em; }
}




/* Hero text */
.hero__content h1{
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing:-.02em;
  margin:0 0 10px;
  padding-bottom: 20px auto;
  color:#1e1f2a;
  position: relative;
  z-index: 3;
}
.kicker{ 
  font-size: 18px;
  width: 600px auto;
  font-family: "Jacquarda Bastarda 9", serif;
  color:#2c3144;
  padding-bottom: 30px;
  margin: 20px 0 20px 0;
 }

.hero__cta{ 
    display: flex;
    gap: 22px;
    margin-bottom: 80px;
    padding-bottom: 50px;
    flex-wrap: wrap; 
}

/* Hero media (Heather) */
.hero__media{ 
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  position: relative;
  padding-bottom: 0 !important;
  margin-bottom: 0; 
}

.hero__img{
  position: relative;
  width: min(42vw, 800px);
  margin:0;
  filter: drop-shadow(0 16px 40px rgba(68,64,255,.10));


}

/* Mobile: center the image & text, still flush to bottom */
@media (max-width:900px){
  .hero__media{ justify-content:center }
  .hero__content{ text-align:center }
  .hero__img{ width: min(72vw, 520px) }
}


/* ensure we can absolutely position inside the media box */
.hero__media{ position: relative; }

/* keep stacking clean: text < image < light orb */
.hero__img{ position: relative; z-index: 2; }

/* ============ RADIANT ORB (in front of Heather) ============ */
.hero .radiant-orb{
  position: absolute;
  /* POSITION: nudge where you want the orb to sit */
  right: min(90%, 400px);
  bottom: 28%;               /* move up/down along Heather */
  width: 14vmin; height: 15vmin;
  border-radius: 100%;
  pointer-events: none;
  z-index: 3;

  /* CORE GLOW — white hot center with subtle falloff */
  background:
    radial-gradient(circle,
      rgba(255,255,255,.8) 22%,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.45) 6%,
      rgba(64, 0, 255, 0.2) 64%,
      rgba(255,255,255,0) 72%);
      filter: url(#softWobble) blur(77px);
  /* make it add light to what’s underneath */
  mix-blend-mode: screen;
  will-change: transform, filter, box-shadow;
transform-origin: 50% 50%;
animation:
  orbPulse 1.8s ease-in-out infinite alternate,
  orbGlow  1.8s ease-in-out infinite alternate;
box-shadow:
    0 0 18px 22px rgba(255,255,255,.35),
    0 0 60px 88px rgba(255,255,255,.22);
}

/* IRIDESCENT RING — faint spectral halo that rotates */
.hero .radiant-orb::after{
  content:""; position:absolute; inset:-100%;
  border-radius:50%;
  /* soft color fringe for “iridescent” feel */
  background:
    conic-gradient(
      rgba(255,255,255,.18), rgba(255,255,255,.18) 8%,
      rgba(248,0,255,.24) 12%, rgba(68,64,255,.22) 20%,
      rgba(255,255,255,.14) 28%, rgba(255,255,255,.18) 40%,
      rgba(68,64,255,.22) 52%, rgba(248,0,255,.24) 64%,
      rgba(255,255,255,.18) 76%, rgba(255,255,255,.18) 100%
    );
  /* show as a halo, not a disk */
  -webkit-mask-image: radial-gradient(circle, transparent 46%, #000 56%, transparent 77%);
          mask-image: radial-gradient(circle, transparent 46%, #000 56%, transparent 77%);
          filter: url(#softWobble) blur(77px);
  mix-blend-mode: screen;
  animation:
  orbPulse 4.8s ease-in-out infinite alternate,
  orbGlow  2.8s ease-in-out infinite alternate;
  opacity: .77;
}

/* BEAMS — rotating white rays with long falloff */
.hero .radiant-orb::before{
  content:""; position:absolute; inset:-200%; border-radius:50%;
  /* conic stripes → beams, with empty gaps */
  background:
  repeating-conic-gradient(
    rgba(255,255,255,0)     0deg 18deg,
    rgba(255,255,255,.16)  50deg 19.2deg,
    rgba(255,255,255,.48) 19.2deg 30deg,
    rgba(255,255,255,.16)  21deg 22.2deg
  ),
  repeating-conic-gradient(from 7deg,
  rgba(255,255,255,0)     0deg 80deg,
  rgba(255,255,255,.12)  60deg 60deg,
  rgba(255,255,255,.42)  19deg 20.6deg,
  rgba(255,255,255,.12)  20.6deg 21.8deg
);
-webkit-mask-image:
radial-gradient(circle, transparent 0 46%, #000 60%),
radial-gradient(115% 135% at 50% 52%, #000 0 74%, transparent 90%);
    mask-image:
radial-gradient(circle, transparent 0 46%, #000 60%),
radial-gradient(115% 135% at 50% 52%, #000 0 74%, transparent 90%);

mix-blend-mode: screen;
filter: url(#softWobble) blur(77px);
opacity: .55;
animation: beamsSpin 28s linear infinite;
}

.hero .radiant-veil{
  position:absolute;
  right: min(90%, 400px);
  bottom: 28%;
  width: 15vmin; height: 15vmin;
  pointer-events:none; z-index:3;
}
.hero .radiant-veil::before{
  content:""; position:absolute; inset:-160%; border-radius:50%;
  background-color: rgba(255,255,255,0.01);
  -webkit-backdrop-filter: blur(10px) saturate(110%) contrast(102%);
          backdrop-filter: blur(10px) saturate(110%) contrast(102%);


          -webkit-mask-image:
          radial-gradient(circle, transparent 0 46%, #000 60%),
          repeating-conic-gradient(
            rgba(0,0,0,0)     0deg 18deg,
            rgba(0,0,0,.35)  18deg 19.2deg,
            rgba(0,0,0,1)   19.2deg 21deg,
            rgba(0,0,0,.35)  21deg 22.2deg
          ),
          radial-gradient(115% 135% at 50% 52%, #000 0 74%, transparent 90%);
              mask-image:
          radial-gradient(circle, transparent 0 46%, #000 60%),
          repeating-conic-gradient(
            rgba(0,0,0,0)     0deg 18deg,
            rgba(0,0,0,.35)  18deg 19.2deg,
            rgba(0,0,0,1)   19.2deg 21deg,
            rgba(0,0,0,.35)  21deg 22.2deg
          ),
          radial-gradient(circle, #000 0 74%, transparent 88%);

          -webkit-mask-composite: source-in, source-in;
          mask-composite: intersect;
          filter: url(#softWobble) blur(66px);
          animation: beamsSpin 28s linear infinite;
          opacity: .33;
}

.hero .prism-glimmer{
  position:absolute;
  right: min(90%, 400px); bottom: 28%;
  width: 10vmin; height: 10vmin;
  pointer-events:none; z-index:5;   /* above orb */
}
.hero .prism-glimmer::before{
  content:""; position:absolute; inset:-190%; border-radius:50%;
  /* gentle spectrum; mostly whites with magenta/indigo flares */
  background:
    conic-gradient(
      rgba(255,255,255,.00) 0deg,
      rgba(248,0,255,.22) 18deg,
      rgba(68,64,255,.20) 36deg,
      rgba(255,255,255,.06) 54deg,
      rgba(248,0,255,.20) 120deg,
      rgba(68,64,255,.18) 180deg,
      rgba(255,255,255,.08) 240deg,
      rgba(248,0,255,.18) 300deg,
      rgba(68,64,255,.18) 330deg,
      rgba(255,255,255,.00) 360deg
    );
  mix-blend-mode: screen;
  opacity: .66;
  filter: url(#softWobble) blur(77px);

  -webkit-mask-image:
      /* inner donut */
      radial-gradient(circle, transparent 0 46%, #000 60%),
      /* feathered wedges */
      repeating-conic-gradient(
        rgba(0,0,0,0)     0deg 18deg,
        rgba(0,0,0,.35)  18deg 19.2deg,
        rgba(0,0,0,1)   19.2deg 21deg,
        rgba(0,0,0,.35)  21deg 22.2deg
      ),
      /* elliptical outer fade → longer, oval-ish tails */
      radial-gradient(115% 135% at 50% 52%, #000 0 74%, transparent 90%);
          mask-image:
      radial-gradient(circle, transparent 0 46%, #000 60%),
      repeating-conic-gradient(
        rgba(0,0,0,0)     0deg 18deg,
        rgba(0,0,0,.35)  18deg 19.2deg,
        rgba(0,0,0,1)   19.2deg 21deg,
        rgba(0,0,0,.35)  21deg 22.2deg
      ),
      radial-gradient(115% 135% at 50% 52%, #000 0 74%, transparent 90%);

  -webkit-mask-composite: source-in, source-in;
          mask-composite: intersect;

  animation: beamsSpin 28s linear infinite reverse;
}

        /* Indigo shift riding the same oval rays */
.indigo-shift{
  position:absolute;
  right: min(90%, 400px); bottom: 28%;
  width: 16vmin; height: 16vmin;
  pointer-events:none; z-index:6;
}
.indigo-shift::before{
  content:""; position:absolute; inset:-99%; border-radius:50%;
  background:
    conic-gradient(
      rgba(68,64,255,.30) 0deg,
      rgba(248,0,255,.18) 35deg,
      rgba(68,64,255,.32) 90deg,
      rgba(255,255,255,.06) 120deg,
      rgba(68,64,255,.28) 200deg,
      rgba(248,0,255,.18) 260deg,
      rgba(68,64,255,.30) 360deg
    );
  mix-blend-mode: color-dodge;     /* edgy, bright indigo shift */
  opacity: .33;
  filter: url(#softWobble) blur(33px);

  /* reuse the oval-ray mask so the shift only lives on beams */
  -webkit-mask-image:
      radial-gradient(circle, transparent 0 46%, #000 60%),
      repeating-conic-gradient(
        rgba(0,0,0,0)     0deg 18deg,
        rgba(0,0,0,.35)  18deg 19.2deg,
        rgba(0,0,0,1)   19.2deg 21deg,
        rgba(0,0,0,.35)  21deg 22.2deg
      ),
      radial-gradient(circle, #000 0 74%, transparent 88%);
          mask-image:
      radial-gradient(circle, transparent 0 46%, #000 60%),
      repeating-conic-gradient(
        rgba(0,0,0,0)     0deg 18deg,
        rgba(0,0,0,.35)  18deg 19.2deg,
        rgba(0,0,0,1)   19.2deg 21deg,
        rgba(0,0,0,.35)  21deg 22.2deg
      ),
      radial-gradient(circle, #000 0 74%, transparent 88%);

  -webkit-mask-composite: source-in, source-in;
          mask-composite: intersect;

  animation: beamsSpin 36s linear infinite reverse;
}

    /* === Reveal presets === */
    [data-animate]{
      opacity: 0;
      transform: translate3d(0, var(--reveal-ydist), 0) scale(.985);
      will-change: transform, opacity;
    }
    [data-animate="fade-in"]{ transform: translate3d(0,0,0) scale(.98); }
    [data-animate="zoom-in"]{ transform: scale(.96); }
    [data-animate].is-in{
      opacity: 1;
      transform: none;
      transition:
        opacity var(--reveal-dur) var(--reveal-ease),
        transform var(--reveal-dur) var(--reveal-ease);
      transition-delay: var(--stagger, 0ms);
      filter: none;
    }


/* Animations */
@keyframes orbPulse{
  0%{
    transform: scale(1);
    filter: blur(2px) brightness(1) saturate(1);
  }
  100%{
    transform: scale(1.12);                /* was 1.08 */
    filter: blur(3px) brightness(1.18) saturate(1.08);
  }
}

@keyframes orbGlow{
  0%{
    box-shadow:
      0 0 18px 12px rgba(255,255,255,.35),
      0 0 60px 88px rgba(255,255,255,.22);
  }
  100%{
    box-shadow:
      0 0 26px 16px rgba(255,255,255,.48),  /* brighter inner bloom */
      0 0 120px 140px rgba(255,255,255,.30);/* longer outer glow */
  }
}


/* add a scanning column on top of the pixel-chrome */
.hero .pixel-chrome::after{
  content:""; position:absolute; inset:0;
  mix-blend-mode: screen;
  opacity:.66; filter: blur(8px);

  /* scanning band with feathered edges */
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(248,0,255,.30) 8%,
      rgba(68,64,255,.35) 12%,
      rgba(255,255,255,.20) 16%,
      rgba(255,255,255,0) 22%
    );
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: scanSweep 4.4s steps(88,end) infinite;
  z-index: 4;

  /* show only inside the pixel grid (reuse 12px grid mask) */
  -webkit-mask-image:
    repeating-linear-gradient(90deg,#000 0 12px,transparent 12px 14px),
    repeating-linear-gradient(0deg,#000 0 12px,transparent 12px 14px),
    linear-gradient(to left, #000 62%, transparent 92%);
          mask-image:
    repeating-linear-gradient(90deg,#000 0 14px,transparent 12px 24px),
    repeating-linear-gradient(0deg,#000 0 14px,transparent 12px 24px),
    linear-gradient(to left, #000 62%, transparent 92%);
  -webkit-mask-composite: source-in, source-in;
          mask-composite: intersect;
}


.site-shell{ position: relative; z-index: 1; }   /* content above */
.plus-field{ position: fixed; inset: 0; pointer-events:none; z-index: 0; }


/* Load your font if not already present */
@import url("https://fonts.googleapis.com/css2?family=Jacquarda+Bastarda+9&display=swap");

/* Keep site content above the decorative layer */
.site-shell { position: relative; z-index: 1; }

/* Transparent, click-through background layer behind everything */
.plus-field {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Brand colors */
:root{
  --magenta: #f800ff;
  --indigo:  #4440ff;
}

/* ===== Marquee ===== */
.xm-marquee{
  --speed: 22s;
  --pad: clamp(8px, 2vw, 14px);
  position: relative;
  overflow: hidden;
  padding-block: var(--pad);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 8px 26px rgba(68,64,255,.10);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.xm-bleed{
  width: 100vw; position: relative; left: 50%; margin-left: -50vw; border-radius: 0;
}
.xm-lane{
  position: absolute; top: 0; left: 0;
  display: inline-block; white-space: nowrap;
  will-change: transform; backface-visibility: hidden;
  animation: xm-left var(--speed) linear infinite;
}
.xm-lane:nth-of-type(2){ animation-name: xm-left-2; }
.xm-text{
  font: 800 clamp(10px, 2.2vw, 14px)/1 "Funnel Display", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .12em; color: #1b1e35;
  padding-right: 2ch; white-space: nowrap;
}
@keyframes xm-left{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-100%,0,0)} }
@keyframes xm-left-2{ from{transform:translate3d(100%,0,0)} to{transform:translate3d(0,0,0)} }

/* --- FORCE RUN on mobile & iOS --- */
/* Ensure our lanes have an explicit, running animation */
.xm-marquee .xm-lane{
  animation-name: xm-left;
  animation-duration: var(--speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
.xm-marquee .xm-lane:nth-of-type(2){ animation-name: xm-left-2; }

/* If any global CSS paused animations, override it on touch devices */
@media (hover:none) and (pointer:coarse){
  .xm-marquee .xm-lane{
    animation-play-state: running !important;
  }
}

/* If you previously respected reduced-motion, neutralize it for this component */
@media (prefers-reduced-motion: reduce){
  .xm-marquee .xm-lane{
    animation-name: xm-left !important;
    animation-duration: var(--speed) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
  .xm-marquee .xm-lane:nth-of-type(2){
    animation-name: xm-left-2 !important;
  }
}

/* Safety: never pause on hover unless explicitly wrapped */
.xm-marquee:hover .xm-lane{ animation-play-state: running; }


/* Base “+” */
.plus-field .plus{
  position: absolute;
  right: 0; bottom: 0;                /* final position set inline by JS */
  font-family: "Jacquarda Bastarda 9", serif;
  font-weight: 400; line-height: 1;
  font-size: var(--size, 28px);
  opacity: var(--alpha, .65);
  transform: rotate(var(--rot, 0deg)) translateZ(0);

  /* FILL: indigo ⇄ magenta gradient (slow, subtle drift) */
  background: linear-gradient(135deg, var(--magenta), var(--indigo));
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Soft ambient glow around glyph edges */
  text-shadow:
    0 0 0.8px rgba(248,0,255,.28),
    0 0 6px   rgba(68,64,255,.22);

  /* Animations: slow fill drift + gentle twinkle */
  animation:
    fill-drift var(--driftDur, 12s) ease-in-out infinite alternate,
    twinkle    var(--twinkleDur, 6s) ease-in-out infinite;
  will-change: background-position, opacity, filter;
}

/* OUTER SHINE: a moving highlight band that travels L→R */
.plus-field .plus::after{
  content: '+';
  position: absolute; inset: 0;
  font: inherit;                                /* same size & font */
  /* the “shine” is a narrow white band that moves across the glyph */
  background: linear-gradient(90deg,
  transparent 0%,
  rgba(255,255,255,.9) 7%,
  transparent 14%,
  rgba(255,255,255,.55) 18%,
  transparent 26%
);

  background-size: 200% 100%;
  background-position: -50% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Edge glow to make the shine read outside the glyph */
  text-shadow:
    0 0 8px rgba(255,255,255,.45),
    0 0 14px rgba(68,64,255,.35),
    0 0 24px rgba(68,64,255,.28);

  animation: outer-shine var(--shineDur, 3.6s) linear infinite;
  will-change: background-position, filter;
}

/* Keyframes */
@keyframes fill-drift   { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes outer-shine  { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes twinkle {
  0%,100% { opacity: var(--alpha, .65); filter: drop-shadow(0 0 1px rgba(68,64,255,.16)); }
  50%     { opacity: calc(var(--alpha, .65) + .12); filter: drop-shadow(0 0 1.6px rgba(68,64,255,.28)); }
}





/* features */

/* ---------- Card system (glass + iridescent rim) ---------- */
:root{
  --card-r: 22px;
  --card-bg: rgba(255,255,255,.62);
  --card-bg-2: rgba(255,255,255,.42);
  --card-shadow: 0 10px 40px rgba(68,64,255,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  --rim-a: rgba(248,0,255,.45);
  --rim-b: rgba(68,64,255,.45);
}

.card-iris{
  position: relative;
  border-radius: var(--card-r);
  padding: clamp(18px, 4vw, 28px);
  background:
    linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
  transform-origin: 50% 60%;
}

/* Iridescent border ring (static) */
.card-iris::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding: 1px; /* base rim thickness */
  background: linear-gradient(135deg, var(--rim-a), var(--rim-b));
  /* Show only the ring, not the fill */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.8;
}

/* One-time prism sweep on mount + on hover re-sparkle */
.card-iris::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding: 1px;
  background: linear-gradient(90deg,
    rgba(248,0,255,.0) 0%,
    rgba(248,0,255,.45) 44%,
    rgba(255,255,255,.95) 50%,
    rgba(68,64,255,.45) 56%,
    rgba(248,0,255,.0) 100%
  );
  background-size: 260% 100%;
  background-position: -160% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: blur(6px) saturate(115%);
  opacity: 0;
}

/* entrance + hover interactions */
.card-iris[data-animate].is-in{
  animation: cardFloatIn .7s cubic-bezier(.22,.7,.25,1) both;
}
.card-iris[data-animate].is-in::after{
  animation: rimSweep 1.1s ease-out .1s both;
}
.card-iris:hover::after{
  animation: rimSweep .9s linear both;
}
@keyframes cardFloatIn{
  0%{ opacity:0; transform: translateY(14px) scale(.985); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes rimSweep{
  0%{ background-position: -160% 0; opacity:.9; }
  100%{ background-position: 160% 0; opacity:0; }
}

/* ---------- Hero card sizing / layout ---------- */
.hero-card{
  padding: clamp(24px, 4vw);
  border-radius: clamp(18px, 1.4vw, 28px);
}
.hero .hero-card .hero__grid{ gap: min(36px, 3.5vw); }
.hero .pixel-veil, .hero .pixel-chrome{ pointer-events:none; }
.hero__content{ position: relative; z-index: 2; } /* above decorative panes */
.hero__media{ position: relative; z-index: 1; }

/* ---------- Features grid ---------- */
.features{ padding: clamp(36px, 6vw, 0px) 0;
}

.features__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}
@media (min-width: 780px){
  .features__grid{ grid-template-columns: repeat(3, 1fr); }
}
.feature-card{
  display:flex; flex-direction:column; gap: 14px;
  min-height: 220px;
}
.feature-card h3{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -.01em;
  color: #12131a;
}
.feature-card p{
  margin: 0 0 auto;
  color:#2c3144;
}
.feature-card .btn-iris{
  align-self: flex-start;
}
/* Global UI scale (85%) */
:root { --ui-scale: .85; }

/* Breathe room for feature cards on phones */
@media (max-width: 680px){
  /* ensure the grid stacks */
  .features .features__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 4vw, 22px);
    /* side padding so cards don't touch edges */
    padding-inline: clamp(14px, 5vw, 24px);
  }

  /* keep each card a bit narrower than the viewport */
  .features .feature-card{
    width: min(100%, 560px);
    margin-inline: auto;          /* centers the narrower card */
  }
}


/* Global density system */
:root{ --ui: 1 }                  /* default = normal */
.density-sm{ --ui: .92 }
.density-xs{ --ui: .66 }

/* Helpers that scale common primitives */
.u-fs-hero   { font-size: calc(var(--ui) * var(--fs-hero, clamp(42px,8vw,76px))); }
.u-fs-lede   { font-size: calc(var(--ui) * var(--fs-lede, clamp(16px,2.4vw,20px))); }
.u-pad-card  { padding: calc(var(--ui) * 22px) calc(var(--ui) * 6px); }
.u-radius    { border-radius: calc(var(--ui) * var(--cardR, 22px)); }
.u-btn       { font-size: calc(var(--ui) * 14px); padding: calc(var(--ui) * 12px) calc(var(--ui) * 14px); }
.u-icon      { width: calc(var(--ui) * 18px); height: calc(var(--ui) * 18px); }



/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card-iris[data-animate].is-in{ animation: none; opacity: 1; transform:none; }
  .card-iris::after{ animation: none !important; opacity: 0; }
}


@keyframes scanSweep{
  to{ background-position: -90% 0; }
}

@keyframes ringSpin{
  to { transform: rotate(360deg); }
}
@keyframes beamsSpin{
  to { transform: rotate(-360deg); }
}

/* Mobile: keep it tasteful and centered on the figure */
@media (max-width: 900px){
  .radiant-veil,
  .prism-glimmer,
  .radiant-orb{
    right: 50%; transform: translateX(50%);
    bottom: 32%;
  }
  .radiant-veil::before{ inset:-120%; }
  .prism-glimmer::before{ inset:-130%; }
}



/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .radiant-veil::before,
  .prism-glimmer::before,
  .radiant-orb::before,
  .radiant-orb::after{ animation:none !important }
}

@media (max-width: 900px){
  .hero {
    max-height: 700px;
  }

  .hero__media { 
    height: 200px;
  }

  .hero__actions{
    flex-direction: column;
    gap: 12px;
  }


.radiant-veil{
    position: absolute;
    bottom: 88% !important;
    width: 15vmin; height: 15vmin;
    pointer-events:none; z-index:3;
  }

  
  .btn-iris{ 
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
} 

  .heather-svg{
    height: auto;
    width: min(72vw, 520px);
  }


.hero__content h1{
  font-size: 60px !important;
  letter-spacing:-.09em !important;
  margin: 30px !important;
}
.kicker{ 
  font-size: 18px;
  font-weight: 900 !important;
  font-family: "Jacquarda Bastarda 9", serif;
 }