/* ============================================================
   RAIO-X FUNNEL · Bilhon / Thiago Finch
   Design system + lander + shared components
   Breakpoints: Widescreen >=1441 · Desktop 1025-1440 · iPad 641-1024 · Mobile <=640
   ============================================================ */

/* ---------- SELF-HOSTED SF PRO DISPLAY ---------- */
@font-face{font-family:"SF Pro Display";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/SFProDisplay-Regular.otf") format("opentype");}
@font-face{font-family:"SF Pro Display";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/SFProDisplay-Medium.otf") format("opentype");}
@font-face{font-family:"SF Pro Display";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/SFProDisplay-Bold.otf") format("opentype");}

/* ---------- TOKENS ---------- */
:root{
  --bg:#101010;
  --surface:#161514;
  --surface-2:#1B1A18;
  --ink:#FFFFFF;
  --ink-soft:#E0E0E0;
  --mute:#A6A6A6;
  --mute-2:#9C9C9C;
  --hair:rgba(255,255,255,0.08);
  --hair-2:rgba(255,255,255,0.07);
  --amber:#FF8A1F;
  --amber-lite:#FF9A4D;
  --amber-glow:rgba(255,138,31,0.6);

  --display:"SF Pro Display",system-ui,sans-serif;
  --font:"Inter",system-ui,sans-serif;
  --script:"Caveat",cursive;
  --money:"Plus Jakarta Sans",system-ui,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* money gradient (matches Paper oklab diagonal) */
  --gold:linear-gradient(112deg,#FFD9A0 4%,#FF9A2D 52%,#ED6E12 98%);

  /* responsive scale — desktop defaults, overridden per breakpoint */
  --pad-x:64px;
  --max:1280px;
  --sec-y:112px;
  --h1:55px; --h1-lh:104%;
  --h2:38px; --h2-lh:114%;
  --h3:20px;
  --body:17.5px;
  --helper:16px;
  --scribble:32px;
  --money-size:84px;
  --col:1040px;       /* centered content column on stacked breakpoints */
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--bg);}
body{
  color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis:none;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,p,figure{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--amber);color:#1a1206;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* ---------- PAGE SHELL ---------- */
.page{position:relative;width:100%;overflow:clip;background:var(--bg);}
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
  background:url("/assets/img/grain.png") repeat;background-size:256px 256px;}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x);}

/* section divider + vertical rhythm */
.section{position:relative;padding-block:var(--sec-y);}
.section .div{width:min(600px,86%);height:1px;margin:0 auto var(--sec-y);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.09) 22%,rgba(255,154,77,.18) 50%,rgba(255,255,255,.09) 78%,transparent 100%);}

/* ---------- SCROLL REVEAL (the elegant delayed open) ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--d,0s);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}}

/* ---------- TYPE HELPERS ---------- */
.scribble{font-family:var(--script);font-weight:600;color:var(--amber-lite);
  font-size:var(--scribble);line-height:100%;transform:rotate(-2.5deg);display:inline-block;}
.h1{font-family:var(--display);font-weight:700;font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:-.025em;color:var(--ink);}
.h2{font-family:var(--display);font-weight:700;font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:-.022em;color:var(--ink);}
.lead{font-family:var(--display);font-weight:400;color:var(--mute);font-size:var(--body);line-height:152%;}
.amber{color:var(--amber);}
.money{font-family:var(--money);font-weight:700;letter-spacing:-.03em;line-height:96%;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

/* ---------- MOLTEN CTA BUTTON ---------- */
.cta{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px;border-radius:20px;
  background:#FFFFFF1A;box-shadow:#CFCFCF1F 0px 2px 29px inset;cursor:pointer;isolation:isolate;
  transition:transform .25s var(--ease);}
.cta::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:300%;translate:-50% -50%;
  border-radius:999px;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s var(--ease);filter:blur(8px);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,228,55,.62) 0%,rgba(255,178,28,.26) 42%,transparent 70%);}
.cta .core{position:relative;display:flex;align-items:center;justify-content:center;height:62px;padding-inline:40px;
  border-radius:12px;overflow:clip;
  background-image:radial-gradient(ellipse 80% 130% at 50% -8%,#FF9A2E 0%,#F0680C 58%,#CC540A 100%);
  box-shadow:rgba(255,225,180,.55) 0px 1.5px .5px inset,rgba(180,80,10,.5) 0px -2px 2px -1px inset,rgba(255,150,40,.6) 0px -8px 14px -7px inset,rgba(255,255,255,.18) 0px 1px 2.8px inset,rgba(0,0,0,.4) 0px 4px 14px,rgba(255,140,40,.16) 0px 0px 0px 1px;
  transition:background-image .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);}
.cta .label{position:relative;z-index:2;font-family:var(--font);font-size:16px;font-weight:500;letter-spacing:.04em;line-height:20px;color:#fff;text-shadow:#4A1C068C 0px 1px 1px;white-space:nowrap;}
.cta .dots{position:absolute;inset:0;opacity:.1;pointer-events:none;background:url("/assets/img/dots.svg") repeat;background-size:16.5px 16.5px;}
.cta .chip{display:flex;align-items:center;justify-content:center;width:56px;height:62px;flex-shrink:0;border-radius:12px;
  background:#00000029;box-shadow:#00000059 0px 1px 2px inset,#FFFFFF0A 0px 0px 0px 1px inset;transition:background .3s var(--ease);}
.cta .chip svg{width:22px;height:22px;flex-shrink:0;}
.cta:hover{transform:translateY(-2px);}
.cta:hover::before{opacity:1;}
.cta:hover .core{
  background-image:radial-gradient(ellipse 80% 140% at 50% -8%,#FFE85A 0%,#FFBE24 50%,#F5960F 100%);
  filter:brightness(1.03) saturate(1.05);
  box-shadow:rgba(255,255,255,.8) 0px 1.5px 0px inset,rgba(190,110,0,.4) 0px -2px 2px -1px inset,rgba(255,228,40,.9) 0px -12px 20px -7px inset,rgba(255,210,30,.55) 0px -28px 30px -12px inset,rgba(255,255,255,.2) 0px 1px 3px inset,rgba(255,224,40,.5) 0px 0px 0px 1px,rgba(255,200,30,.55) 0px 8px 30px,rgba(255,214,40,.35) 0px 0px 60px;}
.cta:hover .label{color:#4a1f00;text-shadow:rgba(255,255,255,.28) 0px 1px 0px;}
.cta:hover .chip{background:#241803;}
.cta:active{transform:translateY(0);}
.cta.sm .core{height:56px;padding-inline:30px;border-radius:11px;}
.cta.sm .chip{width:52px;height:56px;border-radius:11px;}
.cta.sm .label{font-size:15px;}

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;
  width:100%;height:60px;background:#120F0DCC;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 0 #FFB4781A;}
.hdr-in{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max);padding-inline:var(--pad-x);}
.logo{display:flex;align-items:center;gap:9px;}
.logo .mark{width:19px;height:21px;filter:invert(100%);background:url("/assets/img/raiox-logo.png") center/contain no-repeat;}
.logo .wm{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;}
.hdr-right{display:flex;align-items:center;gap:8px;}
.hdr-right .t{font-family:var(--font);font-size:13px;color:#FFB777;letter-spacing:.01em;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;}
.hero-glow{position:absolute;left:50%;top:-120px;width:min(1300px,120%);height:680px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 56% 100% at 50% 6%,rgba(255,138,31,.15) 0%,rgba(16,16,16,0) 66%);}
.hero-in{position:relative;display:flex;align-items:center;gap:40px;
  width:100%;max-width:var(--max);margin:0 auto;padding:72px var(--pad-x) 96px;min-height:680px;}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:620px;}
.pill{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 16px 0 13px;border-radius:999px;
  background:#1B1917;box-shadow:inset 0 0 0 1px #FFFFFF1A;}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px var(--amber);}
.pill .t{font-family:var(--display);font-weight:500;color:var(--ink-soft);font-size:13px;letter-spacing:-.01em;}
.hero-h1{display:flex;flex-direction:column;gap:2px;}
.hero-h1 .l1{font-family:var(--display);font-weight:700;font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:-.025em;color:#fff;}
.hero-h1 .l2{font-family:var(--money);font-weight:700;font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:-.025em;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hero-sub{font-family:var(--display);font-weight:400;font-size:var(--body);line-height:152%;color:var(--mute);max-width:520px;}
.hero-proof{display:flex;align-items:center;gap:9px;}
.hero-proof .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);}
.hero-proof .t{font-family:var(--font);font-size:13px;color:#FFFFFF73;letter-spacing:.02em;}
/* desktop split photo */
.hero-photo{position:absolute;right:0;top:0;width:54%;height:100%;
  background:url("/assets/img/raiox-thiago.jpg") 52% 18%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 42%,#000 100%);}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 24%);}
/* contained centered photo (iPad/mobile) — hidden on desktop */
.hero-photo-card{display:none;}

/* ============================================================
   VAZAMENTOS
   ============================================================ */
.vz-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:680px;margin:0 auto;}
.vz-head .arrow{display:flex;flex-direction:column;align-items:center;transform:rotate(-2.5deg);}
.vz-cards{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:44px auto 0;}
.vz-card{display:flex;flex-direction:column;gap:13px;padding:34px 36px;border-radius:18px;background:var(--surface);
  box-shadow:inset 0 0 0 1px #FFFFFF14,0 18px 40px #00000059;}
.vz-card .n{font-family:var(--font);font-weight:700;color:var(--amber);font-size:13px;letter-spacing:.14em;}
.vz-card .t{font-family:var(--display);font-weight:700;color:#fff;font-size:22px;line-height:126%;letter-spacing:-.01em;}
.vz-card .d{font-family:var(--display);color:var(--mute);font-size:16px;line-height:160%;}
.vz-card .ln{height:1px;width:100%;background:#FFFFFF12;margin-top:4px;}
.vz-card .lbl{font-family:var(--font);font-weight:600;color:#FFFFFF66;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.vz-foot{font-family:var(--display);font-weight:500;color:#AEAEAE;font-size:20px;line-height:155%;text-align:center;max-width:760px;margin:48px auto 0;}

/* ============================================================
   OUTPUT (dashboard + list)
   ============================================================ */
.out-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:760px;margin:0 auto;}
.dash{display:flex;flex-direction:column;width:430px;max-width:100%;border-radius:18px;padding:26px;gap:22px;
  background:var(--surface);box-shadow:inset 0 0 0 1px #FFFFFF12,0 24px 50px #00000073;margin:48px auto 0;}
.dash-top{display:flex;align-items:center;justify-content:space-between;}
.dash-brand{display:flex;align-items:center;gap:8px;}
.dash-brand .mk{width:15px;height:17px;filter:invert(100%);opacity:.85;background:url("/assets/img/raiox-logo.png") center/contain no-repeat;}
.dash-brand .nm{font-family:var(--display);font-weight:700;color:#fff;font-size:13px;letter-spacing:-.01em;}
.dash-tag{padding:5px 10px;border-radius:999px;background:#FF8A1F1A;box-shadow:inset 0 0 0 1px #FF8A1F38;
  font-family:var(--font);font-weight:600;color:var(--amber);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.dash-score{display:flex;align-items:center;gap:20px;}
.ring{position:relative;width:116px;height:116px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ring .v{position:absolute;display:flex;align-items:baseline;gap:1px;}
.ring .v .num{font-family:var(--display);font-weight:700;color:#fff;font-size:34px;line-height:100%;letter-spacing:-.02em;}
.ring .v .den{font-family:var(--display);font-weight:500;color:#FFFFFF66;font-size:13px;}
.dash-score .meta{display:flex;flex-direction:column;gap:5px;}
.dash-score .meta .k{font-family:var(--font);font-weight:600;color:var(--amber);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.dash-score .meta .s{font-family:var(--display);font-weight:700;color:#fff;font-size:17px;line-height:128%;letter-spacing:-.01em;}
.dash .ln{height:1px;width:100%;background:#FFFFFF12;}
.dash-rows{display:flex;flex-direction:column;gap:13px;}
.dash-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.dash-row .k{font-family:var(--display);color:var(--mute);font-size:14px;}
.dash-row .amber{font-family:var(--font);font-weight:600;color:var(--amber);font-size:13px;}
.dash-row .vw{font-family:var(--display);font-weight:700;color:#fff;font-size:15px;}
.dash-row .vmoney{font-family:var(--money);font-weight:700;font-size:18px;letter-spacing:-.04em;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.dash-note{font-family:var(--font);color:#FFFFFF59;font-size:11px;line-height:150%;text-align:center;}
.out-list-h{font-family:var(--display);font-weight:700;color:#fff;font-size:22px;line-height:120%;letter-spacing:-.01em;text-align:center;margin:48px 0 0;}
.out-list{display:flex;flex-direction:column;gap:24px;max-width:760px;margin:24px auto 0;}
.out-item{display:flex;align-items:flex-start;gap:16px;}
.out-item .n{width:30px;flex-shrink:0;font-family:var(--font);font-weight:700;color:var(--amber);font-size:14px;letter-spacing:.1em;line-height:150%;}
.out-item .b{display:flex;flex-direction:column;gap:5px;}
.out-item .t{font-family:var(--display);font-weight:700;color:#fff;font-size:17px;line-height:130%;letter-spacing:-.01em;}
.out-item .d{font-family:var(--display);color:var(--mute);font-size:14.5px;line-height:160%;}

/* ============================================================
   PROCESSO
   ============================================================ */
.proc-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:680px;margin:0 auto;}
.proc-grid{display:flex;gap:36px;max-width:1000px;margin:56px auto 0;position:relative;}
.proc-grid .dash-line{position:absolute;top:30px;left:9%;right:9%;height:0;border-top:1px dashed #FF8A1F4D;}
.proc-step{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;}
.proc-step .n{align-self:flex-start;padding-right:16px;background:var(--bg);font-family:var(--display);font-weight:700;color:var(--amber);font-size:52px;line-height:100%;letter-spacing:-.03em;}
.proc-step .t{font-family:var(--display);font-weight:700;color:#fff;font-size:18px;line-height:124%;letter-spacing:-.01em;margin:18px 0 12px;}
.proc-step .d{font-family:var(--display);color:var(--mute);font-size:14.5px;line-height:160%;max-width:300px;}

/* ============================================================
   BIO
   ============================================================ */
.bio-in{display:flex;align-items:center;gap:64px;max-width:1080px;margin:0 auto;}
.bio-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px;flex:1.15;min-width:0;}
.bio-h{display:flex;flex-direction:column;gap:6px;}
.bio-h .nm{font-family:var(--display);font-weight:700;color:#fff;font-size:52px;line-height:104%;letter-spacing:-.025em;}
.bio-paras{display:flex;flex-direction:column;gap:15px;max-width:600px;}
.bio-paras p{font-family:var(--display);color:#EDEDED;font-size:16px;line-height:165%;}
.bio-photo{flex:1;min-width:0;max-width:420px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px #FF8A1F26;background:url("/assets/img/raiox-stage.webp") 74% 26%/cover no-repeat;}
.bio-photo .scrim{position:absolute;left:0;bottom:0;width:100%;height:120px;background:linear-gradient(0deg,rgba(20,18,17,.85) 0%,rgba(20,18,17,0) 100%);}
.bio-photo .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--font);font-weight:500;color:#fff;font-size:11px;letter-spacing:.34em;text-shadow:0 1px 8px rgba(0,0,0,.6);}
.bio-cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:34px var(--pad-x) 44px;box-shadow:inset 0 1px 0 0 #FFFFFF0F;}
.foot-in{display:flex;flex-direction:column;align-items:center;max-width:var(--max);margin:0 auto;}
.foot-top{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1080px;}
.foot .cp{font-family:var(--font);color:#6E6E6E;font-size:12.5px;}
.foot .disc{font-family:var(--font);color:#5E5E5E;font-size:12px;line-height:170%;text-align:center;max-width:900px;margin-top:22px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* WIDESCREEN — content centered, a touch larger */
@media (min-width:1441px){
  :root{--max:1320px;--money-size:96px;}
}

/* DESKTOP default already set (1025-1440) */

/* iPad and below — CENTER everything, contained portrait hero */
@media (max-width:1024px){
  :root{
    --pad-x:40px;--sec-y:72px;
    --h1:34px;--h1-lh:110%;
    --h2:30px;--h2-lh:116%;
    --body:16px;--helper:16px;--scribble:28px;--money-size:60px;
  }
  .hdr-in{padding-inline:40px;}
  /* hero stacks + centers */
  .hero-in{flex-direction:column;align-items:center;padding:0 40px 72px;min-height:0;gap:0;}
  .hero-photo{display:none;}
  .hero-glow{top:-30px;height:640px;width:min(820px,140%);
    background:radial-gradient(ellipse 56% 58% at 50% 44%,rgba(255,140,46,.16) 0%,rgba(243,116,26,.06) 46%,rgba(16,16,16,0) 76%);}
  .hero-photo-card{display:block;position:relative;width:min(640px,100%);height:520px;margin:10px auto 0;
    background:url("/assets/img/raiox-thiago.jpg") center 16%/cover no-repeat;mix-blend-mode:screen;}
  .hero-photo-card .scrim{display:none;}
  .hero-copy{align-items:center;text-align:center;max-width:620px;gap:18px;margin-top:32px;}
  .hero-h1{align-items:center;}
  .hero-h1 .l1,.hero-h1 .l2{text-align:center;}
  .hero-sub{text-align:center;max-width:520px;}
  /* processo stacks */
  .proc-grid{flex-direction:column;align-items:center;gap:40px;max-width:560px;}
  .proc-grid .dash-line{display:none;}
  .proc-step{align-items:center;text-align:center;}
  .proc-step .n{align-self:center;padding-right:0;}
  .proc-step .t,.proc-step .d{text-align:center;}
  .proc-step .d{max-width:460px;}
  /* bio stacks + centers */
  .bio-in{flex-direction:column;align-items:center;gap:32px;max-width:620px;}
  .bio-copy{align-items:center;text-align:center;}
  .bio-h{align-items:center;}
  .bio-paras{align-items:center;}
  .bio-paras p{text-align:center;}
  .bio-cta{align-items:center;}
  .bio-photo{order:-1;max-width:400px;width:100%;}
  .foot-top{max-width:688px;}
}

/* MOBILE */
@media (max-width:640px){
  :root{
    --pad-x:24px;--sec-y:56px;
    --h1:26px;--h1-lh:112%;
    --h2:24px;--h2-lh:118%;
    --body:15px;--helper:14.5px;--scribble:24px;--money-size:44px;
  }
  .hdr{height:46px;}
  .hdr-in{padding-inline:24px;}
  .hero-in{padding-left:20px;padding-right:20px;}
  .hero-glow{top:-20px;height:600px;width:min(720px,150%);background:radial-gradient(ellipse 58% 58% at 50% 44%,rgba(255,140,46,.16) 0%,rgba(243,116,26,.06) 46%,rgba(16,16,16,0) 76%);}
  .hero-photo-card{height:460px;margin-top:2px;background-position:center 14%;}
  .vz-card{padding:22px 20px;border-radius:15px;align-items:center;text-align:center;}
  .vz-card .t{font-size:18px;}
  .vz-card .d{font-size:14px;}
  .vz-foot{font-size:16px;}
  .dash{width:100%;padding:22px;}
  .out-item{flex-direction:column;align-items:center;text-align:center;gap:6px;}
  .out-item .n{width:auto;}
  .vz-cards,.out-list{gap:12px;}
  .out-list{gap:26px;}
  .bio-photo{max-width:100%;}
}

/* ---------- page blur when quiz is open ---------- */
.page.blurred{pointer-events:none;}