:root{
    --ink:#17262E; --teal:#1F7A72; --teal-deep:#155A54;
    --purple:#6C4FE0; --purple-deep:#5539C4; --grape:#2A1E5C;
    --sun:#FFC53D; --pop:#FF7A1A; --pink:#FF9DBB; --mint:#7ADB9B; --sky:#7FE7FF;
    --paper:#FDFBF7; --card:#FFFFFF; --line:#EFE9DC; --slate:#5E6B74;
    --disp:'Bricolage Grotesque',sans-serif; --body:'Inter',sans-serif;
    --r:26px;
  }
  *{margin:0; padding:0; box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  img{display:block; max-width:100%;}
  :focus-visible{outline:3px solid var(--purple); outline-offset:3px; border-radius:8px;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

  /* floating doodads */
  .doodad{position:absolute; pointer-events:none; z-index:0; animation:floaty 5.5s ease-in-out infinite;}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-14px) rotate(6deg);}}

  /* ------- header ------- */
  header{position:sticky; top:0; z-index:60; background:rgba(253,251,247,.9); backdrop-filter:blur(10px); border-bottom:2px solid var(--line);}
  .bar{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
  .brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
  .brand img{height:32px;}
  .brand b{font:800 21px var(--disp); color:var(--ink); letter-spacing:-.02em;}
  .brand b span{color:var(--teal);}
  nav{display:flex; align-items:center; gap:24px;}
  nav a{font:700 15px var(--body); color:var(--ink); text-decoration:none;}
  nav a:hover{color:var(--purple);}
  .btn{display:inline-block; font:800 16px var(--body); text-decoration:none; border-radius:999px; padding:13px 26px; transition:transform .15s cubic-bezier(.2,1.6,.4,1), box-shadow .15s;}
  .btn:hover{transform:translateY(-2px) rotate(-1deg);}
  .btn-purple{background:var(--purple); color:#fff; box-shadow:0 6px 0 var(--purple-deep);}
  .btn-purple:hover{box-shadow:0 8px 0 var(--purple-deep);}
  .btn-teal{background:var(--teal); color:#fff; box-shadow:0 6px 0 var(--teal-deep);}
  .btn-navy{background:var(--ink); color:#fff; box-shadow:0 6px 0 #0A1319;}
  .btn-white{background:#fff; color:var(--purple); box-shadow:0 6px 0 rgba(0,0,0,.18);}
  .btn-big{font-size:18px; padding:16px 32px;}
  @media (max-width:640px){ nav a.navlink{display:none;} }

  /* ------- hero ------- */
  .hero{position:relative; padding:78px 0 24px; text-align:left;}
  .hero h1{font:800 clamp(40px,7vw,74px)/1.02 var(--disp); letter-spacing:-.035em; max-width:15ch; position:relative; z-index:1;}
  .hero h1 .silly{display:inline-block; color:var(--purple); transform:rotate(-2.5deg);
    background:linear-gradient(100deg,var(--purple),#9B7DF0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .hero p.lede{margin:22px 0 30px; font-size:19px; color:var(--slate); max-width:52ch; position:relative; z-index:1;}
  .cta-row{display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:1;}
  .chips{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; position:relative; z-index:1;}
  .chip{font:700 14px var(--body); background:#fff; border:2px solid var(--line); border-radius:999px; padding:9px 16px; box-shadow:0 3px 0 var(--line);}

  /* the pip riding the no-hitter line */
  .flatline{position:relative; margin:54px 0 6px; height:110px;}
  .flatline svg.track{position:absolute; left:0; right:0; bottom:18px; width:100%; height:64px;}
  .fl-track{fill:none; stroke:var(--ink); stroke-width:26; stroke-linecap:round; opacity:.07;}
  .fl-line{fill:none; stroke:var(--teal); stroke-width:9; stroke-linecap:round; stroke-dasharray:2000; stroke-dashoffset:2000; animation:drawline 3s ease-in-out .4s forwards;}
  .rider{position:absolute; bottom:44px; left:0; width:74px; animation:ride 3s ease-in-out .4s forwards;}
  .rider svg{animation:bob .5s ease-in-out infinite alternate; transform-origin:50% 100%;}
  .fl-spark{position:absolute; right:1.5%; bottom:62px; font-size:26px; opacity:0; animation:sparkin .5s ease-out 3.45s forwards;}
  .fl-caption{font:700 13px var(--body); color:var(--slate); letter-spacing:.05em; text-transform:uppercase;}
  @keyframes drawline{to{stroke-dashoffset:0;}}
  @keyframes ride{from{left:0;} to{left:calc(93% - 74px);}}
  @keyframes bob{from{transform:scaleY(1);} to{transform:scaleY(.94) translateY(2px);}}
  @keyframes sparkin{0%{opacity:0; transform:scale(.2) rotate(-40deg);} 60%{opacity:1; transform:scale(1.3);} 100%{opacity:1; transform:scale(1);}}
  @media (prefers-reduced-motion: reduce){
    .fl-line{animation:none; stroke-dashoffset:0;}
    .rider{animation:none; left:calc(93% - 74px);} .rider svg{animation:none;}
    .fl-spark{animation:none; opacity:1;}
    .doodad{animation:none;} .btn:hover{transform:none;}
    .rarword{animation:none !important; opacity:.16 !important;}
  }

  /* ------- section scaffolding ------- */
  section{padding:72px 0; position:relative;}
  .eyebrow{display:inline-block; font:800 13px var(--body); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--ink); border-radius:999px; padding:6px 14px; transform:rotate(-1.5deg); margin-bottom:16px;}
  h2{font:800 clamp(30px,4.6vw,46px)/1.06 var(--disp); letter-spacing:-.03em; margin-bottom:14px;}
  .sub{color:var(--slate); max-width:58ch; font-size:17.5px;}

  /* ------- BRAVE hype section ------- */
  .brave-sec{background:linear-gradient(160deg, #241B52, #3A2A7E 55%, #2A1E5C); color:#fff; overflow:hidden; border-radius:0;}
  .brave-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:1;}
  .brave-sec .eyebrow{background:var(--sun); color:var(--grape); transform:rotate(-2deg);}
  .brave-sec h2{color:#fff; font-size:clamp(36px,5.4vw,56px);}
  .brave-sec h2 .grad{background:linear-gradient(100deg,var(--sky),var(--sun),#C0A5F5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .brave-sec p{color:#CFC6F2; margin:14px 0 22px; max-width:48ch;}
  .stickers{display:flex; flex-wrap:wrap; gap:11px; margin:0 0 28px;}
  .sticker{font:800 14px var(--body); background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.22); color:#fff; border-radius:14px; padding:9px 14px; transform:rotate(var(--tilt,0deg));}
  .rarwords{position:absolute; inset:0; pointer-events:none; z-index:0;}
  .rarword{position:absolute; font:800 64px var(--disp); letter-spacing:-.02em; opacity:0; animation:rarpulse 6s ease-in-out infinite;}
  @keyframes rarpulse{0%,100%{opacity:.07; transform:translateY(0) rotate(var(--rot));} 50%{opacity:.16; transform:translateY(-10px) rotate(var(--rot));}}
  /* the trading card */
  .cardwrap{position:relative; display:flex; justify-content:center;}
  .tcard-frame{width:min(78vw,300px); aspect-ratio:330/450; border:0; border-radius:26px; overflow:hidden;
    transform:rotate(3deg); box-shadow:0 24px 60px rgba(0,0,0,.45); animation:cardfloat 5s ease-in-out infinite; pointer-events:none; background:transparent;}
  .tcard{width:min(78vw,300px); aspect-ratio:3/4.1; border-radius:26px; position:relative; transform:rotate(3deg);
    background:linear-gradient(180deg,#2A1E5C,#0E0A24); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45);
    animation:cardfloat 5s ease-in-out infinite;}
  @keyframes cardfloat{0%,100%{transform:rotate(3deg) translateY(0);} 50%{transform:rotate(2deg) translateY(-10px);}}
  .tcard::before{content:''; position:absolute; inset:0; border-radius:26px; padding:5px;
    background:linear-gradient(120deg,var(--sky),var(--purple),var(--sun),#38D6FF,var(--sky)); background-size:300% 300%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude;
    animation:foil 3s linear infinite; z-index:4;}
  @keyframes foil{to{background-position:300% 0;}}
  .tcard .sheen{position:absolute; inset:0; z-index:5; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%); background-size:260% 260%; animation:sheenMove 3.8s ease-in-out infinite;}
  @keyframes sheenMove{0%{background-position:130% 0;} 60%,100%{background-position:-60% 0;}}
  .tcard svg{width:100%; height:100%;}
  .tcard .nm{position:absolute; top:14px; left:16px; font:800 26px var(--disp); z-index:3;
    background:linear-gradient(100deg,var(--sky),var(--sun),#C0A5F5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .tcard .no{position:absolute; top:20px; right:16px; font:800 11px var(--body); color:#C9B8FF; z-index:3;}
  .tcard .rb{position:absolute; bottom:14px; left:14px; font:800 10.5px var(--body); letter-spacing:.06em; color:var(--grape); background:linear-gradient(100deg,var(--sky),var(--sun)); border-radius:999px; padding:5px 11px; z-index:3;}
  .oneof{position:absolute; top:-14px; right:-8px; z-index:6; background:var(--sun); color:var(--grape); font:800 13px var(--body); border-radius:999px; padding:8px 14px; transform:rotate(8deg); box-shadow:0 5px 0 #C99418;}
  @media (max-width:860px){ .brave-grid{grid-template-columns:1fr;} .cardwrap{margin-top:8px;} }

  /* ------- ROTATE section ------- */
  .rot-sec{overflow:hidden;}
  .rot-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center;}
  .rot-sec .eyebrow{background:var(--teal); transform:rotate(1.5deg);}
  .rot-art{position:relative; background:#E9F6F3; border:3px solid #CBE8E1; border-radius:34px; padding:30px; display:flex; justify-content:center; transform:rotate(-1.4deg);}
  .rot-art svg{width:100%; max-width:300px;}
  .wip{position:absolute; top:-14px; left:22px; background:var(--pop); color:#fff; font:800 12.5px var(--body); border-radius:999px; padding:7px 13px; transform:rotate(-5deg); box-shadow:0 4px 0 #C55A0D;}
  @media (max-width:860px){ .rot-grid{grid-template-columns:1fr;} .rot-art{order:-1;} }
  .funfeats{list-style:none; margin:20px 0 28px;}
  .funfeats li{display:flex; gap:12px; align-items:flex-start; margin-bottom:13px; font-size:16px;}
  .funfeats .fico{flex:0 0 auto; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:15px; background:#E9F6F3; border:2px solid #CBE8E1;}
  .brave-sec .funfeats .fico{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2);}

  /* ------- lab ------- */
  .lab-sec{padding-top:56px;}
  .lab{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px;}
  .labcard{background:var(--card); border:3px dashed #E3D9C4; border-radius:var(--r); padding:26px; display:flex; gap:18px; align-items:center; transform:rotate(var(--tilt)); transition:transform .2s;}
  .labcard:hover{transform:rotate(0) scale(1.02);}
  .labcard .emoji{font-size:38px;}
  .labcard b{font:800 19px var(--disp);}
  .labcard span{display:block; font-size:14.5px; color:var(--slate); margin-top:3px;}
  .soon{display:inline-block; font:800 10.5px var(--body); letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--pop); border-radius:999px; padding:3px 10px; margin-left:8px; transform:rotate(-2deg);}
  @media (max-width:900px){ .lab{grid-template-columns:1fr 1fr !important;} }
  @media (max-width:640px){ .lab{grid-template-columns:1fr !important;} }
  .lab .labcard{align-items:flex-start;} .lab .emoji{font-size:30px; margin-top:2px;}

  /* ------- promises ------- */
  .prom-sec{background:#fff; border-top:3px solid var(--line); border-bottom:3px solid var(--line);}
  .promgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px;}
  .prom{background:var(--paper); border:2px solid var(--line); border-radius:20px; padding:22px; transform:rotate(var(--tilt,0));}
  .prom .pico{font-size:26px; margin-bottom:8px;}
  .prom b{font:800 16px var(--disp); display:block; margin-bottom:4px;}
  .prom span{font-size:14px; color:var(--slate);}
  @media (max-width:820px){ .promgrid{grid-template-columns:1fr;} .prom{transform:none;} }

  /* ------- join ------- */
  .join{padding:80px 0 96px;}
  .join-panel{background:linear-gradient(150deg,var(--ink), #23404A 70%, #1C4A44); color:#fff; border-radius:32px; padding:56px 52px; position:relative; overflow:hidden;}
  .join-panel h2{color:#fff;}
  .join-panel .eyebrow{background:var(--sun); color:var(--ink); transform:rotate(2deg);}
  .join-panel p{color:#AEC3CB; margin:12px 0 28px; max-width:52ch;}
  .jgem{position:absolute; font-size:34px; opacity:.9;}
  .join-note{font-size:13.5px; color:#8FA6AF; margin-top:16px;}
  @media (max-width:840px){ .join-panel{padding:42px 28px;} }

  footer{padding:36px 0 48px;}
  .foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
  .disclaim{font-size:12.5px; color:var(--slate); max-width:70ch; margin-top:16px;}

  /* ---- shared multipage additions ---- */
  nav a.on{color:var(--purple); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:3px;}
  @media (max-width:760px){ nav{gap:14px;} nav a{font-size:13.5px;} }
  @media (max-width:640px){ nav a.navlink{display:inline;} .bar{flex-wrap:wrap; gap:8px;} }
  .page-hero{padding:64px 0 40px;}
  .page-hero h1{font:800 clamp(36px,6vw,60px)/1.05 var(--disp); letter-spacing:-.03em;}
  .page-hero p{margin-top:16px; font-size:18px; color:var(--slate); max-width:58ch;}
  .page-hero.cosmic{background:linear-gradient(160deg,#241B52,#3A2A7E 60%,#2A1E5C); color:#fff;}
  .page-hero.cosmic h1{color:#fff;}
  .page-hero.cosmic p{color:#CFC6F2;}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px;}
  .step{background:#fff; border:2px solid var(--line); border-radius:20px; padding:24px; position:relative;}
  .step .num{position:absolute; top:-16px; left:20px; width:34px; height:34px; border-radius:50%; background:var(--purple); color:#fff; font:800 16px var(--body); display:grid; place-items:center; transform:rotate(-6deg);}
  .step b{font:800 17px var(--disp); display:block; margin-bottom:6px;}
  .step span{font-size:14.5px; color:var(--slate);}
  @media (max-width:760px){ .steps{grid-template-columns:1fr;} }
  details.faq{background:#fff; border:2px solid var(--line); border-radius:18px; padding:20px 24px; margin-bottom:14px;}
  details.faq summary{font:800 17px var(--disp); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
  details.faq summary::after{content:'+'; font:800 22px var(--body); color:var(--purple); transition:transform .2s;}
  details.faq[open] summary::after{transform:rotate(45deg);}
  details.faq p{margin-top:12px; color:var(--slate); font-size:15.5px;}
  .cform{display:grid; gap:16px; max-width:560px;}
  .cform label{font:800 14px var(--body);}
  .cform input, .cform textarea{width:100%; margin-top:6px; border:2px solid var(--line); border-radius:14px; padding:13px 16px; font:600 15px var(--body); background:#fff;}
  .cform input:focus, .cform textarea:focus{outline:none; border-color:var(--purple);}
  .cta-strip{background:linear-gradient(150deg,var(--ink),#23404A 70%,#1C4A44); border-radius:28px; padding:44px 40px; color:#fff; text-align:center; margin:20px 0 40px;}
  .cta-strip h2{color:#fff;}
  .cta-strip p{color:#AEC3CB; margin:10px auto 24px; max-width:52ch;}