/* ==========================================================================
   ORBT homepage 2026 — maximalist sticker-zine redesign (scoped .hp-*)
   Poster hero (asymmetric, type bleeds) · cursor mascot + draggable stickers ·
   rainbow kinetic ribbon · asymmetric colour bento · savage pricing.
   Uses orbt.css brand tokens (--rainbow, --accent, --text, --bg).
   ========================================================================== */

.hp-main{ overflow-x:clip; }
.hp-tag{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hp-barcode{ height:30px; width:118px; background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 4px,var(--text) 4px 5px,transparent 5px 9px,var(--text) 9px 12px,transparent 12px 15px); }

/* ---------- HERO ---------- */
.hp-hero{ position:relative; padding:clamp(120px,15vh,180px) 0 clamp(40px,6vw,80px); overflow:hidden; }
.hp-hero .wrap{ position:relative; z-index:3; }
.hp-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hp-blob{ position:absolute; fill:var(--text); }
.hp-blob.b1{ width:46vw; top:-10%; right:-8%; opacity:1; }
.hp-blob.b2{ width:30vw; bottom:-18%; left:-10%; opacity:.07; }
.hp-ribbon{ position:absolute; z-index:1; left:-6%; right:-6%; top:46%; height:clamp(36px,5vw,72px);
  background:var(--rainbow); transform:rotate(-4deg); opacity:.95; box-shadow:0 20px 50px -20px rgba(123,47,247,.5);
  -webkit-mask:none; }
.hp-ribbon::after{ content:"OWN YOUR LINK ✦ EVERYTHING YOU ARE ✦ ONE ORBIT ✦ OWN YOUR LINK ✦ EVERYTHING YOU ARE ✦ ";
  position:absolute; inset:0; display:flex; align-items:center; white-space:nowrap;
  font-family:var(--display); font-weight:800; font-size:clamp(20px,2.6vw,34px); color:#fff; mix-blend-mode:overlay;
  animation:hp-ribbon-move 18s linear infinite; }
@keyframes hp-ribbon-move{ to{ transform:translateX(-50%); } }

.hp-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,48px); align-items:center; }
.hp-eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.hp-eyebrow::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--rainbow); }
.hp-h1{ font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,8.5vw,7.4rem); line-height:.86; letter-spacing:-.035em; text-transform:uppercase; margin:0 0 1.1rem; }
.hp-h1 .rb{ background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hp-h1 .out{ -webkit-text-stroke:2px var(--text); -webkit-text-fill-color:transparent; }
.hp-lead{ color:var(--muted); font-size:clamp(1.04rem,1.4vw,1.22rem); line-height:1.5; max-width:46ch; margin-bottom:1.4rem; }
.hp-cta-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hp-claim{ width:min(440px,100%); display:flex; align-items:stretch; background:#fff; border:2.5px solid var(--text);
  border-radius:999px; padding:6px 6px 6px 4px; box-shadow:6px 6px 0 0 var(--text); }
.hp-claim .pre{ display:flex; align-items:center; padding-left:1rem; color:var(--faint); font-family:var(--mono); font-size:.95rem; }
.hp-claim input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-family:var(--mono); font-size:1rem; padding:.7rem .4rem; }
.hp-claim button{ flex:none; }
.hp-trust{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; color:var(--muted); font-family:var(--mono); font-size:.8rem; }
.hp-trust .av{ display:flex; } .hp-trust .av span{ width:30px;height:30px;border-radius:50%;margin-left:-9px;border:2.5px solid var(--bg);background:var(--bg-3) center/cover; }
.hp-trust .av span:first-child{ margin-left:0; }

/* hero art — mascot in blob + draggable link stickers */
.hp-stage{ position:relative; aspect-ratio:1/1; min-height:340px; }
.hp-mascot-wrap{ position:absolute; inset:8% 8% 8% 8%; display:grid; place-items:center; will-change:transform; }
.hp-mascot-disc{ position:absolute; inset:0; border-radius:50%; background:var(--text); }
.hp-mascot{ position:relative; width:66%; filter:drop-shadow(0 24px 44px rgba(123,47,247,.45)); animation:hp-float 5s var(--ease) infinite; }
@keyframes hp-float{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-12px) rotate(2deg) } }
.hp-sticker{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem;
  background:#fff; border:2px solid var(--text); border-radius:14px; box-shadow:3px 3px 0 0 var(--text);
  font-family:var(--mono); font-size:.8rem; font-weight:700; color:var(--text); cursor:grab; user-select:none;
  transition:box-shadow .15s var(--ease); touch-action:none; }
.hp-sticker:active{ cursor:grabbing; box-shadow:1px 1px 0 0 var(--text); }
.hp-sticker .dot{ width:10px; height:10px; border-radius:50%; }
.hp-sticker.s1{ top:4%; left:-4%; transform:rotate(-7deg); } .hp-sticker.s1 .dot{ background:var(--c-mag); }
.hp-sticker.s2{ top:18%; right:-8%; transform:rotate(6deg); } .hp-sticker.s2 .dot{ background:var(--c-green); }
.hp-sticker.s3{ bottom:20%; left:-8%; transform:rotate(5deg); } .hp-sticker.s3 .dot{ background:var(--c-blue); }
.hp-sticker.s4{ bottom:2%; right:2%; transform:rotate(-6deg); } .hp-sticker.s4 .dot{ background:var(--c-yellow); }
.hp-stage .hp-barcode{ position:absolute; bottom:-6%; left:50%; transform:translateX(-50%); opacity:.5; }
@media (max-width:900px){
  .hp-hero-grid{ grid-template-columns:1fr; }
  .hp-stage{ order:-1; max-width:420px; margin:0 auto; aspect-ratio:1; min-height:300px; }
}
@media (max-width:600px){
  .hp-h1{ font-size:clamp(2.3rem,12.5vw,3.4rem); overflow-wrap:break-word; }
  .hp-claim{ box-shadow:4px 4px 0 0 var(--text); }
  .hp-ribbon{ height:38px; top:42%; }
}

/* ---------- RIBBON MARQUEE BAND ---------- */
.hp-band{ background:var(--text); color:var(--bg); overflow:hidden; padding:clamp(14px,2vw,22px) 0; border-block:3px solid var(--text); }
.hp-band-track{ display:flex; white-space:nowrap; width:max-content; animation:hp-band 22s linear infinite; }
.hp-band-track.rev{ animation-direction:reverse; }
.hp-band span{ font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,3vw,2.4rem); text-transform:uppercase; letter-spacing:-.01em; padding-inline:1.2rem; display:inline-flex; align-items:center; gap:1.2rem; }
.hp-band span::after{ content:"✦"; color:var(--accent); }
@keyframes hp-band{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .hp-band-track,.hp-ribbon::after{ animation:none; } }

/* ---------- SECTION HEADINGS ---------- */
.hp-sec{ padding:clamp(56px,8vw,110px) 0; position:relative; }
.hp-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,52px); }
.hp-sec-head h2{ font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,5.5vw,4.4rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; max-width:18ch; }
.hp-sec-head h2 em{ font-style:normal; background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hp-sec-head p{ color:var(--muted); max-width:34ch; }

/* ---------- ASYMMETRIC COLOUR BENTO ---------- */
.hp-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.6vw,20px); }
.hp-tile{ position:relative; overflow:hidden; border:2.5px solid var(--text); border-radius:22px; padding:clamp(1.2rem,2vw,1.8rem);
  background:#fff; box-shadow:5px 5px 0 0 var(--text); transition:transform .3s var(--spring), box-shadow .2s var(--ease);
  display:flex; flex-direction:column; min-height:200px; }
.hp-tile:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 0 var(--text); }
.hp-tile h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,1.8vw,1.6rem); text-transform:uppercase; letter-spacing:-.02em; margin-bottom:.4rem; }
.hp-tile p{ color:var(--muted); font-size:.95rem; }
.hp-tile .chip{ align-self:flex-start; font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; background:var(--text); color:#fff; margin-bottom:auto; }
.hp-tile .ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1rem; background:var(--tc,var(--accent)); border:2.5px solid var(--text); box-shadow:3px 3px 0 0 var(--text); }
.hp-tile .ico svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2.2; }
/* spans + per-tile colour wash */
.hp-tile.big{ grid-column:span 4; min-height:300px; }
.hp-tile.tall{ grid-column:span 2; }
.hp-tile.wide{ grid-column:span 3; }
.hp-tile.sq{ grid-column:span 2; }
.hp-tile.wash{ background:var(--tc); border-color:var(--text); }
.hp-tile.wash h3,.hp-tile.wash p{ color:var(--text); }
.hp-tile.dark{ background:var(--text); }
.hp-tile.dark h3{ color:var(--bg); } .hp-tile.dark p{ color:var(--bg-3); } .hp-tile.dark .chip{ background:#fff; color:var(--text); }
.hp-tile .mini-phone{ margin-top:1.1rem; align-self:center; width:140px; aspect-ratio:9/19; border-radius:22px; background:#fff; border:2.5px solid var(--text); box-shadow:5px 5px 0 0 var(--text); padding:8px; display:flex; flex-direction:column; gap:6px; }
.hp-tile .mini-phone .mp-av{ width:34px;height:34px;border-radius:50%;background:var(--grad-mascot);margin:6px auto 2px; }
.hp-tile .mini-phone .mp-bar{ height:14px;border-radius:6px;background:var(--bg-3); }
.hp-tile .mini-phone .mp-bar.x{ background:var(--rainbow); }
@media (max-width:820px){ .hp-bento{ grid-template-columns:repeat(2,1fr); } .hp-tile.big,.hp-tile.wide,.hp-tile.tall,.hp-tile.sq{ grid-column:span 2; min-height:200px; } }

/* ---------- SAVAGE PRICE ---------- */
.hp-price{ position:relative; border:3px solid var(--text); border-radius:28px; background:#fff; box-shadow:10px 10px 0 0 var(--text);
  padding:clamp(2rem,4vw,3.4rem); text-align:center; overflow:hidden; }
.hp-price .vs-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(1rem,4vw,3rem); }
.hp-price .lbl{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-bottom:.4rem; }
.hp-price .them{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,4.5vw,3.4rem); color:var(--muted); text-decoration:line-through; text-decoration-color:var(--c-red); }
.hp-price .us{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,7vw,5.5rem); line-height:.9; background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hp-price .vs{ font-family:var(--mono); font-size:.8rem; color:var(--faint); width:44px; height:44px; display:grid; place-items:center; border:2px solid var(--text); border-radius:50%; }
.hp-price .sub{ font-family:var(--mono); font-size:.84rem; color:var(--muted); margin-top:.5rem; }
.hp-price .btn{ margin-top:1.8rem; }
@media (max-width:620px){ .hp-price .vs-grid{ grid-template-columns:1fr; gap:1.4rem; } }

/* ---------- BIG CTA ---------- */
.hp-cta{ position:relative; text-align:center; padding:clamp(70px,10vw,140px) 0; overflow:hidden; background:var(--bg-2); border-top:3px solid var(--text); }
.hp-cta .hp-mascot-sm{ width:clamp(80px,12vw,140px); margin:0 auto 1.4rem; filter:drop-shadow(0 16px 30px rgba(123,47,247,.4)); animation:hp-float 5s var(--ease) infinite; }
.hp-cta h2{ font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,9vw,7rem); line-height:.86; text-transform:uppercase; letter-spacing:-.035em; }
.hp-cta h2 .rb{ background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hp-cta p{ color:var(--muted); margin:1rem auto 1.8rem; max-width:40ch; }
.hp-cta .hp-claim{ margin-inline:auto; }

/* reveal */
.hp-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--spring); }
.hp-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .hp-reveal{ opacity:1; transform:none; } .hp-mascot,.hp-cta .hp-mascot-sm{ animation:none; } }