/* WhiteLabelTickets — shared design system. One source of truth for both pages. */
:root{
  --bg:#ffffff; --soft:#f6f8fc; --ink:#0b1220; --muted:#5a6675;
  --line:#e7ebf3; --card:#ffffff;
  --g1:#f97316; --g2:#ec4899; --g3:#8b5cf6;
  --grad:linear-gradient(120deg,#f97316 0%,#ec4899 52%,#8b5cf6 100%);
  --grad-soft:linear-gradient(120deg,rgba(249,115,22,.10),rgba(236,72,153,.10) 52%,rgba(139,92,246,.10));
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.07);
  --shadow-lg:0 30px 60px -18px rgba(99,40,120,.28);
  --radius:18px;
  --display:'Archivo Black',system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:16px;color:#fff;
  background:var(--grad);background-size:160% 160%;background-position:0% 50%;
  box-shadow:0 10px 26px rgba(236,72,153,.32);
  transition:transform .18s ease, box-shadow .18s ease, background-position .5s ease}
.btn:hover{transform:translateY(-2px);background-position:100% 50%;box-shadow:0 16px 34px rgba(139,92,246,.40)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:#cdd5e2;box-shadow:var(--shadow);transform:translateY(-2px)}

/* Header / footer */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.logo{display:flex;align-items:center;gap:11px;font-weight:900;font-size:19px;letter-spacing:-.02em}
.logo svg{filter:drop-shadow(0 6px 14px rgba(236,72,153,.30));transition:transform .25s ease}
.logo:hover svg{transform:rotate(-6deg) scale(1.08)}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a.lnk{font-weight:700;font-size:14.5px;color:var(--muted);transition:color .15s}
.navlinks a.lnk:hover{color:var(--ink)}
.nav .btn{min-height:44px;padding:0 20px;font-size:14px}
footer.site{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer .logo{font-size:16px}

/* Type */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:#fff;
  padding:7px 14px;border-radius:999px;margin-bottom:20px;box-shadow:var(--shadow)}
.eyebrow .pdot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(236,72,153,.14)}
h1{font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:.98;
  font-size:clamp(40px,6.6vw,72px);margin:0 0 18px;text-transform:uppercase}
.sub{max-width:560px;color:var(--muted);font-size:clamp(16px,2vw,20px);margin:0 0 28px}
.kicker{font-weight:800;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 12px}
h2{font-family:var(--display);font-weight:400;letter-spacing:-.022em;line-height:1.02;
  font-size:clamp(30px,4.6vw,50px);margin:0 0 14px;text-transform:uppercase}
.lead{color:var(--muted);max-width:700px;font-size:clamp(16px,1.9vw,19px)}
.center .lead{margin-left:auto;margin-right:auto}

section{padding:clamp(46px,8vw,76px) 0;position:relative}
.band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Hero bits */
.hero{position:relative;overflow:hidden;padding:clamp(44px,8vw,74px) 0 clamp(34px,6vw,64px)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0;animation:drift 16s ease-in-out infinite}
.blob.a{width:520px;height:520px;left:-160px;top:-200px;background:radial-gradient(circle,#f9731644,transparent 65%)}
.blob.b{width:560px;height:560px;right:-180px;top:-120px;background:radial-gradient(circle,#ec489944,transparent 65%);animation-delay:-5s}
.blob.c{width:480px;height:480px;left:30%;top:120px;background:radial-gradient(circle,#8b5cf63a,transparent 65%);animation-delay:-9s}
/* Honeycomb — the only visual thread back to BuzzHive. Subtle, behind the hero text. */
.honeycomb{position:absolute;z-index:0;opacity:.5;pointer-events:none;width:clamp(150px,20vw,240px);height:auto;animation:bob 9s ease-in-out infinite}
@media (max-width:720px){ .honeycomb{opacity:.35;width:130px} }
/* Full-bleed honeycomb covering the whole hero. */
.hexbg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.13;pointer-events:none}
@media (max-width:720px){ .hexbg{opacity:.1} }
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,4vw,40px);align-items:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.reassure{margin-top:20px;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;font-weight:500}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(260px,46vw,380px)}
.hero-art .ring{position:absolute;width:330px;height:330px;border-radius:50%;
  background:conic-gradient(from 0deg,#f97316,#ec4899,#8b5cf6,#f97316);filter:blur(2px);opacity:.16;animation:spin 22s linear infinite}
.float{animation:bob 6s ease-in-out infinite}
.float.d1{animation-delay:-1.5s}.float.d2{animation-delay:-3s}.float.d3{animation-delay:-4.5s}
/* Generic two-column split (text + graphic), liquid. */
.splitgrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,28vw,340px);gap:clamp(24px,4vw,48px);align-items:center}
.splitart{position:relative;display:flex;justify-content:center;align-items:center}
.splitart svg{width:100%;max-width:340px;height:auto;transition:transform .35s cubic-bezier(.2,.7,.3,1),filter .35s ease;will-change:transform}
.splitart:hover svg{transform:translateY(-8px) rotate(-.8deg) scale(1.02);filter:drop-shadow(0 24px 44px rgba(139,92,246,.24))}

/* Value strip */
.strip{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(16px,3vw,22px);padding:clamp(20px,4vw,26px) 0}
.vp{display:flex;gap:13px;align-items:center;transition:transform .2s ease}
.vp:hover{transform:translateY(-3px)}
.vp .ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(236,72,153,.26);transition:transform .25s ease}
.vp:hover .ic{transform:scale(1.08) rotate(5deg)}
.vp b{display:block;font-size:15.5px;font-weight:800}
.vp span{color:var(--muted);font-size:13.5px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(14px,2.4vw,20px);margin-top:clamp(28px,5vw,40px)}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.step:before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:#f4d3e6}
.step:hover:before{transform:scaleX(1)}
.step .ic{width:54px;height:54px;border-radius:15px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 22px rgba(236,72,153,.28);transition:transform .25s ease}
.step:hover .ic{transform:translateY(-3px) rotate(-4deg) scale(1.05)}
.step .num{position:absolute;right:22px;top:18px;font-family:var(--display);font-size:34px;color:#eef1f7;line-height:1}
.step h3{margin:0 0 8px;font-size:20px;font-weight:800;text-transform:none;letter-spacing:0}
.step p{margin:0;color:var(--muted);font-size:15.5px}

/* Features */
.feat{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.2vw,18px);margin-top:clamp(28px,5vw,40px)}
.f{flex:1 1 260px;max-width:360px;position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.f:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#f4d3e6}
.f .ic{width:50px;height:50px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 9px 20px rgba(236,72,153,.26);transition:transform .25s ease}
.f:hover .ic{transform:scale(1.08) rotate(5deg)}
.f b{display:block;font-size:17px;font-weight:800;margin-bottom:5px}
.f span{color:var(--muted);font-size:14.5px}

/* Walkthrough (how-it-works) timeline */
.walk{display:grid;gap:18px;margin-top:42px;max-width:880px}
.wrow{position:relative;display:grid;grid-template-columns:66px 1fr;gap:22px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow);
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.wrow:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.wrow:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#f4d3e6}
.wrow:hover:before{transform:scaleY(1)}
.wrow .ic{width:60px;height:60px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(236,72,153,.28);transition:transform .25s ease}
.wrow:hover .ic{transform:rotate(-5deg) scale(1.06)}
.wrow .nlabel{font-family:var(--display);font-size:12px;color:var(--g2);letter-spacing:.12em;margin:0 0 6px}
.wrow h3{margin:0 0 7px;font-size:21px;font-weight:800}
.wrow p{margin:0;color:var(--muted);font-size:15.5px}

/* Money-flow diagram */
.flow{position:relative;margin-top:38px;background:linear-gradient(180deg,#ffffff,#fdf6fb);border:1px solid var(--line);border-radius:22px;padding:30px 24px;box-shadow:var(--shadow);overflow-x:auto;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.flow:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#f4d3e6}
.flow svg{display:block;margin:0 auto;min-width:680px;max-width:980px;width:100%;height:auto}

/* Fact grid */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2.4vw,16px);margin-top:clamp(26px,4vw,36px);max-width:880px}
.fact{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.fact:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#f4d3e6}
.fact .chk{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 7px 16px rgba(236,72,153,.24);transition:transform .25s ease}
.fact:hover .chk{transform:scale(1.1) rotate(6deg)}
.fact b{display:block;font-size:16px;font-weight:800;margin-bottom:3px}
.fact span{color:var(--muted);font-size:14.5px}

/* Full-bleed gradient CTA / form band */
.cta-band{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:clamp(56px,9vw,84px) 0}
.cta-band:before{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 60% at 15% 10%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(45% 70% at 90% 90%, rgba(0,0,0,.14), transparent 60%)}
.cta-band>.wrap{position:relative}
.cta-band .kicker{color:#fff;-webkit-text-fill-color:#fff;opacity:.92;background:none}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.94)}

/* Form */
.formcard{background:#fff;color:var(--ink);border-radius:22px;box-shadow:0 40px 80px -24px rgba(60,20,80,.5);padding:clamp(22px,4vw,34px);max-width:640px;margin:36px auto 0}
.field{margin-bottom:16px}
label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.req{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
input,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;min-height:50px;transition:border-color .15s,box-shadow .15s}
textarea{min-height:108px;resize:vertical}
input:focus,textarea:focus{outline:0;border-color:var(--g2);box-shadow:0 0 0 4px rgba(236,72,153,.14)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.note{color:var(--muted);font-size:13px}
.alert{border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:15px;background:#fef2f4;border:1px solid #f7c9d3;color:#9f1239;text-align:left}
.ok{text-align:center;padding:18px 4px}
.ok .check{width:64px;height:64px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 12px 26px rgba(236,72,153,.3)}
.ok h3{font-family:var(--display);font-weight:400;font-size:25px;margin:0 0 8px}
.ok p{color:var(--muted);margin:0}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-200}}

/* Liquid layout: grids reflow on their own via auto-fit/minmax + clamp().
   Only the nav links and the form footer need a touch of breakpoint. */
@media (max-width:720px){
  body{font-size:16px}
  .splitgrid{grid-template-columns:1fr}
  .navlinks .lnk{display:none}
  .cta-row .btn{width:100%}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}