/* Homepage styles 2/5: the hero and its review-window backdrop, buttons. */
/* ─── HERO ────────────────────────────── */
.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:7rem 0 3rem;position:relative}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;background:radial-gradient(ellipse 62% 56% at 50% 46%,rgba(20,22,24,.94) 0%,rgba(20,22,24,.66) 55%,transparent 86%);pointer-events:none;z-index:-1}

/* ---- Hero backdrop: the trailer being reviewed (see heroPlay in js/hero.js) ---- */
.hero-canvas{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;pointer-events:none;z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%)}
.hero-canvas::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(20,22,24,.4) 86%,rgba(20,22,24,.8) 100%),linear-gradient(100deg,rgba(20,22,24,.97) 0%,rgba(20,22,24,.92) 40%,rgba(20,22,24,.5) 54%,rgba(20,22,24,.08) 72%)}
/* .hero-canvas prefix beats the replica's later .rd-app{max-width:1080px}; visible width = 60vw (70vw minus the 10vw right bleed) */
.hero-canvas .hero-app{position:absolute;right:-10vw;top:64%;transform:translateY(-50%);width:70vw;max-width:none;margin:0;opacity:.92;box-shadow:0 30px 70px rgba(0,0,0,.6)}
/* wide screens: the hero goes full-bleed - copy anchored to the viewport edge like the nav logo, window bleeding off the right */
@media(min-width:1100px){.hero{margin-left:calc(50% - 50vw + max(4rem,7vw))}.hero-canvas{left:calc(-1 * max(4rem,7vw));transform:none}}
.hero-app .rd-screen{min-height:0}
.hero-app .rd-pic{aspect-ratio:720/362}
.hero-app .rd-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.hero-marks.fade .rd-mk{opacity:0}
.hero-app .hero-ink{position:absolute;inset:0;width:100%;height:100%;z-index:2}
/* dash 1, gap 2: the gap outruns the path, so a hidden stroke never ends on a zero-length dash (a round cap paints that as a dot) */
.hero-shape{stroke-dasharray:1 2;stroke-dashoffset:1;transition:opacity .35s}
.hero-arrowhead{transition:opacity .2s}
.hero-shape[data-shape="box"],.hero-shape[data-shape="arrow"]{stroke-dasharray:none}
.hero-label{position:absolute;left:41%;top:33%;z-index:2;font-family:'Kalam','Segoe Print',cursive;font-weight:700;font-size:clamp(15px,2.6vw,26px);line-height:1;color:#FF3B30;white-space:nowrap;transform:rotate(-3deg);transform-origin:0 50%;transition:opacity .35s}   /* tilted about its first letter, so the words don't drift while they type */
.hero-fnote{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:8px;align-items:baseline;background:rgba(11,12,13,.92);border:1px solid var(--rd-ln);border-left:3px solid var(--rd-ac);border-radius:6px;padding:6px 10px;font-size:11.5px;color:var(--rd-tx);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.hero-fnote.on{opacity:1;transform:none}
.hero-fnote .tc{font-family:var(--mono);color:var(--rd-tx)}
.hero-fnote b{font-weight:600}
.hero-fnote .fr{font-family:var(--mono);font-size:10.5px;color:var(--rd-ft);opacity:0;transition:opacity .3s}
.hero-fnote.done .fr{opacity:1}
.txt.typing::after{content:'';display:inline-block;width:1.5px;height:1em;vertical-align:-.12em;margin-left:2px;background:currentColor;animation:heroCaret .8s steps(2,start) infinite}
@keyframes heroCaret{to{visibility:hidden}}
.hero-app .rd-scrub{cursor:default}
.hero-marks{position:absolute;inset:0}
.hero-marks .rd-mk{transform:translateX(-50%) scale(1);transition:transform .3s,opacity .4s}
/* the pointer's tip (3,1 in its 20-unit box, drawn at 18px) is the hotspot: the margin puts it on left/top, the press scales around it */
.hero-cursor{position:absolute;left:0;top:0;width:18px;height:18px;margin:-.9px 0 0 -2.7px;z-index:9;pointer-events:none;opacity:0;transition:left .7s cubic-bezier(.3,.05,.25,1),top .7s cubic-bezier(.3,.05,.25,1),opacity .25s ease}
.hero-cursor.on{opacity:1}
.hero-cursor svg{display:block;width:100%;height:100%;transform-origin:2.7px .9px;transition:transform .12s}
.hero-cursor.down svg{transform:scale(.82)}
.hero-cursor .ring{position:absolute;left:2.7px;top:.9px;width:14px;height:14px;border:1.5px solid #fff;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.hero-cursor.down .ring{animation:heroRing .5s ease-out}
@keyframes heroRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
.hero-app .rd-tbtn,.hero-app .rd-play{transition:transform .12s,background .2s,border-color .2s,color .2s}
.hero-app .rd-tbtn.pressed,.hero-app .rd-play.pressed{transform:scale(.88)}
@media (prefers-reduced-motion:reduce){.hero-shape[data-shape="circle"]{stroke-dashoffset:0}.hero-fnote{opacity:1;transform:none}.hero-fnote .fr{opacity:1}.hero-cursor{display:none}}
@media(max-width:1200px){.hero-app .rd-send{display:none}}
/* mobile: still a backdrop - oversize, half off the right edge, running under the headline (poster only, no video) */
@media(max-width:960px){
  .hero-canvas{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
  .hero-canvas::after{background:linear-gradient(180deg,rgba(20,22,24,.55) 0%,rgba(20,22,24,.72) 45%,rgba(20,22,24,.5) 70%,rgba(20,22,24,.9) 100%),linear-gradient(100deg,rgba(20,22,24,.9) 0%,rgba(20,22,24,.55) 45%,rgba(20,22,24,.1) 80%)}
  .hero{min-height:100svh;justify-content:flex-start;padding-top:5.5rem}
  .hero-canvas .hero-app{width:150vw;right:-62vw;top:auto;bottom:-9vh;transform:none;opacity:.95}
  .hero-app .rd-send,.hero-app .rd-tr .rd-ic:not(:last-child){display:none}
  .hero-label{font-size:clamp(18px,5.2vw,30px)}
  .hero-fnote{font-size:12.5px}
}
@media(max-width:480px){.hero-app .rd-pill{display:none}}

.hero-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.3rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:.78rem;color:var(--text-dim);margin-bottom:1.8rem;width:fit-content}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.hero h1{font-size:clamp(2.2rem,5.5vw,3.4rem);font-weight:800;color:var(--text-bright);line-height:1.12;letter-spacing:-0.03em;margin-bottom:1.3rem}
.hero h1 .hl{color:var(--accent);display:block}
.hero-sub{font-size:1.15rem;color:var(--text-dim);max-width:600px;line-height:1.7;margin-bottom:2.2rem}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-sub .gd{color:var(--accent)}
.hero-ctas{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}

.btn-primary{background:var(--accent);color:var(--on-accent);padding:.7rem 1.6rem;border-radius:8px;font-size:.92rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all .2s;font-family:inherit;display:inline-block}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{color:var(--text-dim);padding:.7rem 1.2rem;font-size:.88rem;font-weight:500;text-decoration:none;transition:color .2s;font-family:inherit}
.btn-ghost:hover{color:var(--text-bright)}
.hero-note{margin-top:1.1rem;font-size:.78rem;color:var(--text-dim);opacity:.75}