/* ============================================================
   Tech UGC Lab — static rebuild of the Framer landing page
   Breakpoints mirror Framer: Desktop >=1200, Tablet 810-1199, Phone <=809
   ============================================================ */

:root{
  --black:#000000;
  --surface:#0E0E0E;
  --surface-2:#0C0C0C;
  --panel:#0A0A0A;
  --line:#1F1F1F;
  --line-gold:#3A2E14;
  --ink:#FFFFFF;
  --muted:#999999;
  --gold:#F6C566;
  --gold-mid:#E8A93C;
  --gold-deep:#A56907;
  --footer:#5C6478;

  --page-max:1200px;
  --page-pad:20px;

  /* type — desktop */
  --display:46px;      --display-lh:46px;      --display-ls:-1px;
  --subhead:26px;      --subhead-lh:36.4px;    --subhead-ls:-0.52px;
  --heading:41px;      --heading-lh:41px;      --heading-ls:-0.8px;
  --body:18px;         --body-lh:27px;         --body-ls:-0.36px;
  --cardtitle:30px;    --cardtitle-lh:30px;    --cardtitle-ls:-1.2px;

  /* section rhythm — desktop */
  --gap-section:34px;
}

*,*::before,*::after{box-sizing:border-box}
/* Framer applies break-word to every text node; matched here so wrapping is identical */
h1,h2,h3,h4,p,span,b,a,button{overflow-wrap:break-word;word-break:break-word}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font:inherit}

/* ---------- background grid ---------- */
.grid-bg{
  position:absolute; inset:0;
  background-image:url("../assets/img/gXRqxOXvMwVvU6IwUSDBFVY4.png");
  background-size:100% 1200px;
  background-repeat:repeat-y;
  opacity:.72;
  pointer-events:none;
  z-index:0;
}

/* ---------- gutter decor ---------- */
.decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor i{
  position:absolute;
  display:block;
  background-size:cover;
  background-position:center;
  mix-blend-mode:screen;
  border-radius:12px;
  overflow:hidden;
}

/* ---------- shell ---------- */
.wrap{position:relative;overflow:hidden}
.page{
  position:relative; z-index:1;
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 var(--page-pad);
  display:flex; flex-direction:column; align-items:center;
}
section,footer{
  width:100%; max-width:1240px;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--gap-section);
}

/* ---------- typography ---------- */
.display{
  margin:0; font-size:var(--display); line-height:var(--display-lh);
  letter-spacing:var(--display-ls); font-weight:600; color:var(--ink); text-align:center;
  text-wrap:balance;
}
.subhead{
  margin:0; font-size:var(--subhead); line-height:var(--subhead-lh);
  letter-spacing:var(--subhead-ls); font-weight:500; color:var(--muted); text-align:center;
  text-wrap:balance;
}
.heading{
  margin:0; font-size:var(--heading); line-height:var(--heading-lh);
  letter-spacing:var(--heading-ls); font-weight:600; color:var(--ink); text-align:center;
  text-wrap:balance;
}
.body{
  margin:0; font-size:var(--body); line-height:var(--body-lh);
  letter-spacing:var(--body-ls); font-weight:500; color:var(--muted); text-align:center;
}
.card-title{
  margin:0; font-size:var(--cardtitle); line-height:var(--cardtitle-lh);
  letter-spacing:var(--cardtitle-ls); font-weight:600; color:var(--ink);
}
.label{
  margin:0; font-size:20px; line-height:24px; letter-spacing:-.4px;
  font-weight:400; color:var(--gold);
}

/* ---------- hero ---------- */
.hero{padding-top:76px; gap:28px}
.hero-glow{
  position:absolute; top:-150px; left:50%; transform:translateX(-50%);
  width:900px; height:560px; pointer-events:none; z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(246,197,102,.22) 0%, rgba(246,197,102,.10) 45%, rgba(0,0,0,0) 72%);
}
.mark{width:132px;height:53px;object-fit:contain;mix-blend-mode:screen}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:900px;width:100%}

/* ---------- VSL ---------- */
.vsl{padding-top:42px}
.vsl-frame{
  position:relative; width:100%; max-width:992px;
  aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000;
}
.vsl-frame video{width:100%;height:100%;object-fit:cover;display:block}
.play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:5;
}
.play-btn{
  pointer-events:auto; cursor:pointer; position:relative;
  height:clamp(62px,26%,152px); aspect-ratio:1/1;
  border-radius:50%; border:2px solid var(--gold);
  background:rgba(10,10,10,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  transition:box-shadow .24s ease, transform .24s ease, opacity .3s ease;
}
.play-btn:hover{transform:scale(1.07);box-shadow:0 0 0 6px rgba(246,197,102,.12),0 10px 40px rgba(246,197,102,.30)}
.play-btn svg{height:59%;width:auto;display:block;transform:translateX(7%)}
.play-btn::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:1px solid var(--gold); animation:halo 2.6s ease-out infinite;
}
@keyframes halo{from{transform:scale(1);opacity:.45}to{transform:scale(1.55);opacity:0}}
.vsl-frame.is-playing .play-btn{opacity:0;pointer-events:none;transform:scale(.86)}
.vsl-frame.is-playing .play-btn::after{animation:none;opacity:0}

/* ---------- application / typeform ---------- */
.application{padding-top:46px}
.form-shell{
  width:100%; max-width:720px; border-radius:20px; overflow:hidden;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
}
.form-shell iframe{display:block;width:100%;height:640px;border:0}

/* ---------- proof ---------- */
.proof{padding-top:78px}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:20px;
  width:100%; max-width:920px;
}
.stat{
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); border-radius:16px;
  padding:26px 18px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.stat b{font-size:30px;line-height:36px;font-weight:700;color:var(--gold)}
.stat span{font-size:14px;line-height:16.8px;font-weight:500;color:var(--muted);text-align:center}
.graphics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  width:100%; max-width:940px;
}
.graphics img{width:100%;height:254px;object-fit:cover;border-radius:14px}

/* ---------- receipts ---------- */
.receipts{padding-top:76px;gap:31px}
.receipts-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  width:100%; max-width:940px; align-items:start;
}
.receipts-grid img{width:100%;object-fit:cover;border-radius:14px}
.receipts-grid .r1{height:361px}
.receipts-grid .r2{height:107px}
.receipts-grid .r3{height:280px}
.receipts-grid .r4,.receipts-grid .r5,.receipts-grid .r6,
.receipts-grid .r7,.receipts-grid .r8{height:626px}

/* ---------- content examples ---------- */
.examples{padding-top:124px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover}
.examples-copy{max-width:760px;width:100%;display:flex;flex-direction:column;gap:34px}
.video-stack{
  display:flex; flex-direction:column; gap:36px;
  width:100%; max-width:420px;
}
.vcard{display:flex;flex-direction:column;gap:12px;width:100%}
.vcard .vwrap{
  width:100%; height:736px; border-radius:20px; overflow:hidden; background:#000;
}
.vcard video{width:100%;height:100%;object-fit:cover;display:block}
.vcard .vtitle{text-align:center}

/* ---------- roadmap ---------- */
.roadmap{padding-top:80px;gap:48px}
.roadmap-grid{
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:24px;
  width:100%; max-width:1100px;
}
.phase{
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); border-radius:16px;
  padding:32px; display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.phase img{width:62px;height:62px;border-radius:10px;object-fit:cover}
.phase .body{text-align:left}

/* ---------- outcomes ---------- */
.outcomes{padding-top:124px}
.outcome-list{
  display:flex; flex-direction:column; gap:18px;
  width:44.224%; max-width:620px;
}
.outcome{display:flex;align-items:center;gap:12px}
.outcome svg{width:24px;height:24px;flex:0 0 24px}

/* ---------- the edge ---------- */
.edge{padding-top:124px;gap:18px}
.edge-panel{
  width:100%; max-width:860px;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-gold);
  border-radius:18px; padding:34px 38px;
  display:flex; flex-direction:column; gap:14px;
}
.edge-panel{align-items:center}
.edge-panel .heading{font-size:41px;line-height:41px;letter-spacing:-.8px}
.edge-panel .body{font-size:18px;line-height:27px;letter-spacing:-.36px;font-weight:500}

/* ---------- FAQ ---------- */
.faq{padding-top:124px}
.faq-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:720px}
.faq-item{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;overflow:hidden;padding:22px 24px}
.faq-q{
  width:100%; background:none; border:0; cursor:pointer;
  padding:0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--ink); font-size:16px; font-weight:600; line-height:22.4px; text-align:left;
}
.faq-q .chev{flex:0 0 20px;transition:transform .28s ease;color:var(--gold)}
.faq-item[open] .chev, .faq-item.open .chev{transform:rotate(180deg)}
.faq-a{height:0;overflow:hidden;transition:height .32s cubic-bezier(.2,.7,.2,1)}
.faq-a p{
  margin:0; padding:12px 0 0;
  font-size:15px; line-height:24px; color:var(--muted); font-weight:400; text-align:left;
}

/* ---------- CTA ---------- */
.cta{padding-top:124px}
.cta-panel{
  position:relative; width:100%; max-width:900px;
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); border-radius:22px;
  padding:60px 48px 64px;
  display:flex; flex-direction:column; align-items:center; gap:34px; overflow:hidden;
}
.cta-panel::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:620px; height:320px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(246,197,102,.26) 0%, rgba(246,197,102,.08) 45%, rgba(0,0,0,0) 72%);
}
.cta-panel > *{position:relative}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,#F6C566 0%,#E8A93C 55%,#A56907 100%);
  color:#000; text-decoration:none; border-radius:12px; padding:18px 28px;
  font-size:18px; font-weight:600; line-height:1.2;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn svg{width:20px;height:20px;flex:0 0 20px}

/* ---------- footer ---------- */
footer{padding:120px 0 72px}
footer p{
  margin:0; font-size:13px; line-height:22.1px; color:var(--footer);
  text-align:center; font-weight:400; max-width:900px;
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .play-btn::after{animation:none}
}

/* ---------- custom cursor ---------- */
.cursor-ring,.cursor-dot{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;
  z-index:2147483647;opacity:0;will-change:transform;
}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--gold);
  transition:width .25s ease,height .25s ease,background-color .25s ease,opacity .2s ease}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--gold);transition:opacity .2s ease,transform .25s ease}
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button{cursor:none}
.cursor-ring.active{width:53px;height:53px;margin:-26.5px 0 0 -26.5px;background:rgba(246,197,102,.10)}
.cursor-dot.active{opacity:0!important}

/* ============================================================
   TABLET  810–1199
   ============================================================ */
@media (max-width:1199.98px){
  :root{
    --display:38px; --display-lh:38px; --display-ls:-1px;
    --subhead:22px; --subhead-lh:30.8px; --subhead-ls:-0.44px;
    --heading:34px; --heading-lh:34px;   --heading-ls:-0.8px;
    --body:14px;    --body-lh:21px;      --body-ls:-0.28px;
    --cardtitle:24px; --cardtitle-lh:24px; --cardtitle-ls:-0.96px;
  }
  .hero{padding-top:64px}
  .vsl,.application,.proof,.receipts,.examples,.roadmap,
  .outcomes,.edge,.faq,.cta{padding-top:96px}
  footer{padding:96px 0 60px}
  .graphics{max-width:760px}
  .graphics img{height:205px}
  .receipts-grid{grid-template-columns:repeat(2,1fr);max-width:740px}
  .receipts-grid .r1{height:451px}
  .receipts-grid .r2{height:134px}
  .receipts-grid .r3{height:350px}
  .receipts-grid .r4,.receipts-grid .r5,.receipts-grid .r6,
  .receipts-grid .r7,.receipts-grid .r8{height:782px}
  .form-shell{max-width:660px}
  .video-stack{max-width:390px}
}

/* ============================================================
   PHONE  <=809
   ============================================================ */
@media (max-width:809.98px){
  :root{
    --display:30px; --display-lh:30px; --display-ls:-1px;
    --subhead:18px; --subhead-lh:25.2px; --subhead-ls:-0.36px;
    --heading:27px; --heading-lh:27px;   --heading-ls:-0.8px;
    --body:16px;    --body-lh:24px;      --body-ls:-0.32px;
    --cardtitle:24px; --cardtitle-lh:24px; --cardtitle-ls:-0.96px;
    --gap-section:24px;
    --page-pad:16px;
  }
  .grid-bg{opacity:.5}
  .hero{padding-top:48px;gap:24px}
  .hero-copy{gap:18px}
  .vsl,.application,.proof,.receipts,.examples,.roadmap,
  .outcomes,.edge,.faq,.cta{padding-top:76px}
  footer{padding:72px 0 48px}

  .stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .graphics{grid-template-columns:1fr;max-width:358px}
  .graphics img{height:201px}
  .receipts-grid{grid-template-columns:repeat(2,1fr);gap:10px;max-width:358px}
  .receipts-grid .r1{height:214px}
  .receipts-grid .r2{height:64px}
  .receipts-grid .r3{height:166px}
  .receipts-grid .r4,.receipts-grid .r5,.receipts-grid .r6,
  .receipts-grid .r7,.receipts-grid .r8{height:372px}
  .roadmap-grid{display:flex;flex-direction:column;gap:16px;max-width:100%}
  .phase{padding:24px;gap:14px}
  .phase img{width:56px;height:56px}
  .video-stack{max-width:330px}
  .cta-panel{padding:40px 22px 44px}
  .cta-panel::before{width:100%;height:260px}
  .btn{width:100%;padding:16px 22px;font-size:17px}
  .form-shell iframe{height:640px}
}