/* ============================================================
   hero.css — hero stages, girl + transitioning phone, docking tiles
   ============================================================ */

.hero{position:relative;display:flex;align-items:flex-start;justify-content:center;padding:0px 24px 90px}
.hero-home{min-height:100vh}
.hero-interior{min-height:50vh;padding-top:0px}
.hero-inner{position:relative;width:min(var(--w-wide),100%);min-height:640px;margin-top:150px;}
.hero-interior .hero-inner{min-height:400px}

/* ---------- copy panel (gradient glass) ---------- */
.hero-copy{position:absolute;left:0;top:54px;z-index:5;max-width:35%;min-width:240px;padding:20px 20px 20px 20px;
  background:linear-gradient(135deg,rgba(200,240,90,.13),rgba(63,210,180,.10) 38%,rgba(139,147,255,.12) 72%,rgba(255,126,90,.10));
  backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid var(--hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-lg),var(--inset)}
.hero-interior .hero-copy{top:24px;}
.hero-copy::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--periwinkle) 55%,transparent) 0%,
    color-mix(in srgb,var(--verdigris) 30%,transparent) 8%,
    var(--hairline) 26%, var(--hairline) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.hero-copy .eyebrow{display:block;margin-bottom:18px}
.hero-copy h1{margin-bottom:18px}
.hero-copy .sub{margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-micro{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px}
.hero-micro li{font-family: Verdana, Geneva, sans-serif;font-size:.72rem;color:var(--ink-faint);display:flex;align-items:center;gap:7px}
.hero-micro li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verdigris);box-shadow:0 0 8px var(--verdigris)}

/* ---------- girl + phone ---------- */
.caspian-stage{position:absolute;right:-1%;padding-bottom:100px;z-index:4;
  opacity:0;transform:translateX(90px);min-width:627px;
  transition:opacity 1.1s ease .15s,transform 1.2s cubic-bezier(.16,1,.3,1) .15s}
.caspian-stage {
  right: -1%;
  left: max(30%, 230px);
}
.loaded .caspian-stage{opacity:1;transform:translateX(0)}
/* wrap exactly the girl image so the phone overlay %s anchor to the photo,
   and right-align it within the (wider) stage so she hugs the right */
.girl-wrap{position:relative;width:627px;max-width:100%;margin:0 auto;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55))}
.girl-img{display:block;height:600px !important;width:627px !important;max-width:100%;position:relative;z-index:4;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),rgba(0,0,0,.45) calc(100% - 18px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),rgba(0,0,0,.45) calc(100% - 18px),transparent)}

/* live phone screen overlay — geometry measured from girl_phone.png.
   width/height restored (were missing -> frames collapsed to 0 and vanished). */
.phone-screen {
    position: absolute;
    left: 15.9%;
    top: 1.22%;
    width: 34.1%;
    height: 78.33%;
    border-radius: 12% / 8%;
    overflow: hidden;
    background: #07060e;
    z-index: 10;
    transform: rotate(-1.08deg);
}
.scan-frame{position:absolute;inset:0;opacity:0;transition:opacity .75s ease}
.scan-frame.active{opacity:1}
.scan-frame img{width:100%;height:100%;object-fit:cover;display:block}
.scan-line{position:absolute;left:0;right:0;height:2px;top:0;z-index:3;
  background:linear-gradient(90deg,transparent,var(--verdigris),transparent);
  box-shadow:0 0 14px var(--verdigris);animation:scanSweep 2.6s ease-in-out infinite}
@keyframes scanSweep{0%{top:2%}50%{top:96%}100%{top:2%}}

/* ---------- interior randomized photo blob ---------- */
.hero-home .hero-inner{ margin-top:150px; }
.hero-blob{position:absolute;right:-1%;top:0;z-index:0;pointer-events:none;
  width:var(--blob-w,min(620px,48vw));height:var(--blob-h,420px);
  -webkit-mask:none;
          mask:var(--blob-mask) center/cover no-repeat}
/* photo mode: show the image */
.hero-blob.has-photo{
  background-image:var(--blob-img);background-size:cover;background-position:center}
/* gradient-only fallback — always shows a product-tinted blob */
.hero-blob.gradient-only.tint-fluidity{
  background:radial-gradient(ellipse at 55% 45%,color-mix(in srgb,var(--verdigris) 60%,transparent),color-mix(in srgb,var(--periwinkle) 40%,transparent) 55%,transparent 80%)}
.hero-blob.gradient-only.tint-shield{
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--periwinkle) 55%,transparent),color-mix(in srgb,#1c2a5e 40%,transparent) 55%,transparent 80%)}
.hero-blob.gradient-only.tint-union{
  background:radial-gradient(ellipse at 48% 48%,color-mix(in srgb,var(--absinthe) 45%,transparent),color-mix(in srgb,var(--periwinkle) 35%,transparent) 50%,transparent 78%)}
/* product-tinted wash over photo (soft-light blend) */
.hero-blob::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.55;
  /* mask applied by shape class */
          mask:var(--blob-mask) center/cover no-repeat}
.hero-blob.tint-fluidity::after{background:linear-gradient(135deg,var(--verdigris),var(--periwinkle) 70%,var(--iris))}
.hero-blob.tint-shield::after{background:linear-gradient(135deg,#1c2a5e,var(--periwinkle) 60%,var(--verdigris))}
.hero-blob.tint-union::after{background:linear-gradient(135deg,var(--absinthe),var(--periwinkle) 55%,var(--ember))}

/* ---------- full-width hero background video (home) ---------- */
/* child of .hero (not .hero-inner) so the 150px content offset doesn't move it;
   sits at the very top of the page behind the header, scrolls with the page */
.hero-video{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:var(--hero-video-h,100%);z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
          mask-image:linear-gradient(180deg,#000 82%,transparent)}
.hero-video video{width:100%;height:100%;object-fit:cover;opacity:1}
.hero-video::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,6,14,.35),rgba(7,6,14,.12) 40%,rgba(7,6,14,.5))}

/* ---------- docking tiles ---------- */
.hero-tiles{display:contents}
.dock-tile{position:absolute;z-index:7;padding:12px 12px;min-width:95px;
  left:var(--x,auto);right:var(--rx,auto);top:var(--y,auto);bottom:var(--ry,auto);
  opacity:0;transition:opacity .75s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.dock-tile.lg{min-width:95px;max-width:95px;padding:26px 28px}
.dock-tile h3{margin:10px 0 4px;font-size:.92rem}
.dock-tile p{font-size:.8rem;color:var(--ink-dim);font-weight:300;max-width:22ch}
.dock-tile.lg p{font-size:.86rem;max-width:26ch}
.dock-tile .t-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;
  background:rgba(255,255,255,.07);border:1px solid var(--hairline);color:var(--accent)}
.dock-tile .stat-mini{font-family: Verdana, Geneva, sans-serif;font-size:1.5rem;font-weight:700;color:var(--accent)}
.dock-tile{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),var(--inset)}

/* fly-in origins (set initial transform; cleared on .loaded) */
.from-left{transform:translateX(-46vw) rotate(-7deg)}
.from-right{transform:translateX(46vw) rotate(7deg)}
.from-top{transform:translateY(-55vh) rotate(4deg)}
.from-bottom{transform:translateY(55vh) rotate(-4deg)}
.loaded .dock-tile{opacity:1;transform:translate(0,0) rotate(0)}
.dock-tile:hover{transform:translateY(-6px)!important;transition:transform .35s}

/* ---------- responsive hero ---------- */
@media (max-width:1080px){.caspian-stage{width:min(440px,52vw)}}
@media (max-width:880px){
  .hero{padding-top:112px;min-height:auto}
  .hero-home,.hero-interior{min-height:auto!important}
  .hero-inner{display:flex;flex-direction:column;gap:28px;min-height:auto;margin-top:0!important}
  .hero-copy{position:relative;left:auto;top:auto;max-width:100%}
  .caspian-stage{position:relative;right:auto;left:auto;bottom:auto;min-width:0;
    width:min(380px,86vw);margin:0 auto;padding-bottom:0;transform:none}
  .girl-wrap{width:100%;margin:0 auto}
  .girl-img{width:100%!important;height:auto!important}
  .hero-video,.hero-blob{display:none}
  .hero-tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .dock-tile,.dock-tile.lg{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;
    width:100%;min-width:0;max-width:none}
  /* kill the off-screen fly-in transforms on mobile (they caused h-overflow) */
  .dock-tile.from-left,.dock-tile.from-right,.dock-tile.from-top,.dock-tile.from-bottom{transform:none}
}
@media (max-width:520px){.hero-tiles{grid-template-columns:1fr;gap:20px}}

@media (prefers-reduced-motion:reduce){
  .caspian-stage,.dock-tile{opacity:1!important;transform:none!important}
}

/* ---------- interior randomized content tiles ---------- */
.tiles-interior .dock-tile.lg{min-width:230px;max-width:300px;padding:22px 24px}
.dock-tile .t-ic .material-icons{font-size:18px;line-height:1}
.dock-tile .metric-label{display:block;font-family:var(--font-util);font-size:.62rem;color:var(--ink-faint);margin-top:3px;letter-spacing:.04em;max-width:20ch;line-height:1.3}
.dock-tile.lg p{font-size:.86rem;max-width:26ch}

/* rotating interior cards: scroll inside if content overflows */
.tiles-interior .dock-tile{overflow:auto}


/* === defog home cards === */
.hero-home .dock-tile{padding:6px 6px!important}
.hero-home .dock-tile p{line-height:1!important;margin-bottom:0!important;padding-bottom:0!important}
/* === end defog home cards === */

/* === defog card tweaks === */
.hero-home .dock-tile,.tiles-interior .dock-tile{border-radius:12px!important}
.dock-tile .t-ic{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:auto!important;height:auto!important;font-size:2.2rem!important}
.dock-tile .t-ic .material-icons{font-size:36px!important}
/* === end defog card tweaks === */

/* === defog managed overrides === */
/* phone overlay — geometry tuned to girl_phone.png */
.phone-screen{
  left:15.52%!important; top:1.22%!important;
  width:35.49%!important; height:calc(80.00% - 6px)!important;
  border-radius:12.57% / 5.83%!important;
  overflow:hidden!important; background:#07060e!important; z-index:10!important;
  transform:rotate(-1.02deg)!important;
}
.scan-frame img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important;transform:none!important;background:#07060e}
/* interior orbiting cards: 200x120px (50px shorter/narrower), scroll on overflow */
.tiles-interior .dock-tile.lg,
.tiles-interior .dock-tile{
  min-width:160px!important; max-width:200px!important; width:200px!important;
  height:120px!important; padding:10px 12px!important; overflow:auto!important;
}
.tiles-interior .dock-tile p{line-height:1!important;margin:0!important;padding:0!important}
.tiles-interior .dock-tile h3{margin:4px 0 2px!important;line-height:1.05!important;font-size:.9rem!important}
.tiles-interior .dock-tile .metric-label{margin-top:2px!important;line-height:1.1!important}
/* home fixed dock-tiles: compact */
.hero-home .dock-tile{padding:8px 10px!important;overflow:auto!important}
.hero-home .dock-tile p{line-height:1!important;margin-bottom:0!important;font-size:.78rem!important}
.hero-home .dock-tile h3{font-size:.9rem!important;margin:4px 0 2px!important;line-height:1.05!important}
/* === end defog managed overrides === */

/* === PATCH01 hero === */
/* Interior blob: substantially larger for visual impact */
.hero-blob{
  width:var(--blob-w,min(740px,55vw))!important;
  height:var(--blob-h,min(620px,62vh))!important;
  right:-4%!important;
}
/* Interior fly-in cards: keep overflow visible so cards don't clip */
.hero-interior{overflow:visible!important}
/* Home cards: minor refined positions */
/* 4th card restored */
/* === END PATCH01 hero === */

/* === fix_width_glass: dock-tile glassy transparency === */
/* Override global glass opacity for tiles that float over the hero photo */
.dock-tile.glass{
  background:rgba(6,8,26,1.0)!important;
  backdrop-filter:blur(22px) saturate(2.16)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6)!important;
  /* Slightly brighter periwinkle border so tiles don't vanish on the bg */
  border:1px solid rgba(139,147,255,.30)!important;
}
/* Interior orbit tiles: match same transparency */
.tiles-interior .dock-tile.glass{
  background:rgba(5,7,22,.42)!important;
  backdrop-filter:blur(24px) saturate(1.7)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.7)!important;
}
/* Hover: slightly more opaque so content is legible while mouse is on it */
.dock-tile.glass:hover{
  background:rgba(6,8,26,.65)!important;
  box-shadow:var(--shadow),0 0 0 1px rgba(139,147,255,.35),0 0 20px rgba(100,120,255,.12)!important;
}
/* Text in transparent tiles: slightly brighter for legibility */
.dock-tile h3{color:var(--ink)!important}
.dock-tile p,.dock-tile .metric-label{color:rgba(237,235,247,.80)!important}
/* === END fix_width_glass dock-tile === */

/* === fix_mobile: dock-tile centering on mobile === */
@media (max-width:880px){
  /* 20px gap between hero copy card and first fly-in tile */
  .hero-home .hero-tiles{margin-top:20px}
  .hero-interior .tiles-interior{margin-top:20px}
}
@media (max-width:640px){
  /* Home fly-in tiles: flex column, centered */
  .hero-tiles{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:14px!important;
  }
  .hero-home .hero-tiles{gap:14px!important;margin-top:20px!important;padding:0 16px}
  /* Interior orbit tiles: same treatment */
  .tiles-interior{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:14px!important;
    position:relative!important;
  }
  .dock-tile,.dock-tile.lg,.tiles-interior .dock-tile{
    position:relative!important;
    left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;
    opacity:1!important;
    transform:none!important;
    width:calc(100% - 0px)!important;
    max-width:380px!important;
    min-width:0!important;
  }
  .tiles-interior .dock-tile.lg{min-width:0!important;max-width:380px!important}
}
/* === end fix_mobile tiles === */

/* === fix_final: tighten hero outer padding === */
.hero-section,.hero-interior,.hero-home{
  padding-bottom:40px!important;
}
/* Hero inner: reduce top margin on mobile so content starts sooner */
@media(max-width:880px){
  .hero-inner{margin-top:80px!important}
  .hero-home .hero-inner{margin-top:90px!important}
}
/* Dock-tile gap in mobile flow: 16px between stacked tiles */
@media(max-width:640px){
  .hero-tiles,.tiles-interior{gap:16px!important}
}
/* === end fix_final hero === */

/* === defog blob shapes === */
/* SVG blob — controlled size, vertical-centered, right-aligned */
.hero-blob {
  position:absolute !important;
  right:-2% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:min(540px, 44vw) !important;
  height:min(440px, 60vh) !important;
  z-index:0; pointer-events:none; overflow:visible !important;
}
.hero-blob { -webkit-mask:none !important; mask:none !important; }
/* === end defog blob shapes === */

/* === defog v5 dock-tile orbit reset === */
/* When JS orbit runs, neutralise CSS-variable positioning so left/top win.
   Without this, --rx (right offset) competes with JS-set left, pulling cards
   into a single column. */
.tiles-interior .dock-tile {
  right: auto !important;
  bottom: auto !important;
}
/* Interior orbit container: must scroll with hero, not be viewport-fixed */
.hero-interior { position: relative; }
.tiles-interior { position: absolute !important; inset: 0; pointer-events: none; }
.tiles-interior .dock-tile { pointer-events: auto; }

/* Hero blob: vertically + horizontally centered in available right column.
   Right column = space between hero-copy card and right edge of content area. */
.hero-blob {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* Center between hero-copy right edge and content right edge.
     Approx: hero-copy is ~45% wide on left, so right column center ≈ 73% of inner. */
  left: auto !important;
  right: 4% !important;
  width: min(540px, 42vw) !important;
  height: min(440px, 60vh) !important;
  z-index: 0;
  pointer-events: none;
  overflow: visible !important;
}
/* === end defog v5 dock-tile orbit reset === */

/* === defog cloud blob === */
.hero-blob.cloud-blob{
  position:absolute !important;
  left:67% !important; right:auto !important;
  top:50% !important; transform:translate(-50%,-50%) !important;
  width:650px !important; height:auto !important; max-height:70vh !important;
  z-index:0; pointer-events:none; overflow:visible !important;
  -webkit-mask:none !important; mask:none !important;
}
.hero-interior .hero-inner{ margin-top:150px !important; }
.hero-interior{ min-height:560px; }
@media (max-width:1100px){ .hero-blob.cloud-blob{ left:62% !important; width:min(560px,52vw) !important; } }
@media (max-width:880px){  .hero-blob.cloud-blob{ left:50% !important; width:78vw !important; } }
/* === end defog cloud blob === */

/* === defog girl-card transparency === */
.hero-home .hero-tiles .dock-tile.glass,
.hero-home .dock-tile.glass{
  background:rgba(8,10,28,.30) !important;
  backdrop-filter:blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6) !important;
}
/* === end defog girl-card transparency === */

/* === defog hero in-flow copy === */
/* Desktop only: mobile (<=880px) already stacks the copy card in flow. */
@media (min-width:881px){
  /* Copy card in normal flow: it (the tallest item) sets the hero container's
     height, so the horizontal rule + page content follow the container naturally.
     Cloud + orbiting cards stay absolute and ride inside it. */
  .hero-interior .hero-copy{
    position:relative !important;
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    margin:24px 0 0 0 !important;
  }
}
/* === end defog hero in-flow copy === */

/* === defog mobile orbit stack === */
@media (max-width:880px){
  .hero-interior .tiles-interior{
    position:relative !important; inset:auto !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; gap:14px !important;
    margin-top:24px !important; pointer-events:auto !important;
  }
  .hero-interior .tiles-interior .dock-tile{
    position:relative !important;
    left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
    transform:none !important; opacity:1 !important;
    width:100% !important; max-width:380px !important; min-width:0 !important;
  }
}
/* === end defog mobile orbit stack === */

/* === defog hero no-floor === */
/* Hero sizes to the copy card (in flow). No artificial floor -> no dead space. */
.hero-interior{ min-height:0 !important; }
@media (min-width:881px){
  .hero-interior .hero-inner{ min-height:0 !important; }
}
/* Cloud can never be taller than the hero box it sits in (centered, scales to fit) */
.hero-blob.cloud-blob{ max-height:calc(100% - 28px) !important; }
/* === end defog hero no-floor === */

/* === defog mobile hero top === */
@media (max-width:880px){
  .hero{ padding-top:80px !important; }
  .hero-interior .hero-inner{ margin-top:8px !important; }
}
/* === end defog mobile hero top === */

/* === defog orbit transparency === */
.tiles-interior .dock-tile.glass{
  background:rgba(5,7,22,.15) !important;
  backdrop-filter:blur(24px) saturate(1.7) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.7) !important;
}
.tiles-interior .dock-tile.glass:hover{
  background:rgba(6,8,26,.34) !important;
}
/* === end defog orbit transparency === */