:root{
  --navy:#071A2F;
  --orange:#FF6900;
  --white:#FFFFFF;
  --muted:#596673;
  --soft:#A7AFB7;
  --display:"Bricolage Grotesque",Inter,Arial,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;
  --ease:cubic-bezier(.20,.78,.20,1);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--white);
}

body{
  min-height:100vh;
  color:var(--navy);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.locked{overflow:hidden}

img{
  display:block;
  max-width:100%;
}

button,input{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.trap{
  position:absolute;
  left:-9999px;
}


/* =========================================================
   ENTRY
   ========================================================= */

.entry{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity 650ms var(--ease),visibility 0s linear 650ms;
}

.entry.gone{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.entry-stack{
  width:min(920px,94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(-1vh);
}

.entry-logo-stage{
  position:relative;
  width:min(650px,56vw);
  isolation:isolate;
}

.entry-wordmark{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

.entry-tagline{
  margin:14px 0 0;
  color:var(--navy);
  font-size:clamp(11px,.95vw,15px);
  font-weight:800;
  letter-spacing:.20em;
}

.enter-button{
  margin-top:78px;
  padding:10px 6px;
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  letter-spacing:.24em;
}

.enter-arrow{
  color:var(--orange);
  font-size:16px;
  transform:translateY(-1px);
  transition:transform 180ms var(--ease);
}

.enter-button:hover .enter-arrow{
  transform:translate(3px,-4px);
}

.enter-button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:7px;
  border-radius:4px;
}

.entry.running .enter-button{
  pointer-events:none;
  opacity:.15;
}


/* =========================================================
   CRUNCH TYPOGRAPHY MOTION
   ========================================================= */

.crunch-strips{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
}

.crunch-strips img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:1;
  will-change:transform;
}

.strip-1{clip-path:inset(0 83.3% 0 0)}
.strip-2{clip-path:inset(0 66.6% 0 16.7%)}
.strip-3{clip-path:inset(0 49.9% 0 33.4%)}
.strip-4{clip-path:inset(0 33.2% 0 50.1%)}
.strip-5{clip-path:inset(0 16.5% 0 66.8%)}
.strip-6{clip-path:inset(0 0 0 83.5%)}

.entry.running .crunch-strips{
  opacity:1;
}

.entry.running .strip-1{animation:letterCrunch 170ms var(--ease) 30ms both}
.entry.running .strip-2{animation:letterCrunch 170ms var(--ease) 145ms both}
.entry.running .strip-3{animation:letterCrunch 170ms var(--ease) 260ms both}
.entry.running .strip-4{animation:letterCrunch 170ms var(--ease) 375ms both}
.entry.running .strip-5{animation:letterCrunch 170ms var(--ease) 490ms both}
.entry.running .strip-6{animation:iqCrunch 250ms var(--ease) 635ms both}

@keyframes letterCrunch{
  0%{transform:translateY(0) scaleY(1)}
  36%{transform:translateY(3px) scaleY(.965)}
  70%{transform:translateY(-1px) scaleY(1.014)}
  100%{transform:translateY(0) scaleY(1)}
}

@keyframes iqCrunch{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(.965) rotate(-.4deg)}
  62%{transform:scale(1.018) rotate(.25deg)}
  100%{transform:scale(1) rotate(0)}
}

.travelling-crumbs{
  position:absolute;
  z-index:4;
  left:-1%;
  top:31%;
  width:13%;
  height:auto;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,0,0) scale(.46) rotate(-12deg);
  transform-origin:center;
  will-change:transform,opacity;
}

.entry.running .travelling-crumbs{
  animation:crumbWalk 880ms cubic-bezier(.22,.65,.22,1) both;
}

@keyframes crumbWalk{
  0%{
    left:-1%;
    top:37%;
    opacity:0;
    transform:scale(.34) rotate(-16deg);
  }
  8%{opacity:.88}
  18%{
    left:13%;
    top:34%;
    transform:scale(.38) rotate(-9deg);
  }
  34%{
    left:29%;
    top:38%;
    transform:scale(.43) rotate(2deg);
  }
  50%{
    left:46%;
    top:32%;
    transform:scale(.40) rotate(-4deg);
  }
  67%{
    left:62%;
    top:35%;
    transform:scale(.47) rotate(7deg);
  }
  82%{
    left:76%;
    top:29%;
    opacity:.92;
    transform:scale(.52) rotate(10deg);
  }
  100%{
    left:86%;
    top:20%;
    opacity:0;
    transform:scale(.62) rotate(16deg);
  }
}

.entry.running .entry-logo-stage{
  animation:finalSettle 190ms var(--ease) 710ms both;
}

@keyframes finalSettle{
  0%{transform:scale(1)}
  42%{transform:scale(.991)}
  100%{transform:scale(1)}
}


/* =========================================================
   LANDING
   ========================================================= */

.site{
  min-height:100svh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  opacity:0;
  transform:translateY(7px);
  pointer-events:none;
  transition:opacity 700ms var(--ease),transform 760ms var(--ease);
}

.site.visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.landing{
  min-height:0;
  display:grid;
  place-items:center;
  padding:
    max(34px,env(safe-area-inset-top))
    24px
    28px;
}

.landing-content{
  width:min(760px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(-1.5vh);
}

.landing-logo{
  width:clamp(170px,18vw,300px);
  height:auto;
  opacity:0;
  transform:translateY(-4px);
}

.site.visible .landing-logo{
  animation:softReveal 620ms var(--ease) 80ms forwards;
}

.audience-line{
  margin:clamp(42px,5vh,66px) 0 0;
  color:var(--orange);
  font-family:var(--hand);
  font-size:clamp(24px,2.15vw,34px);
  font-weight:700;
  line-height:1;
  opacity:0;
  transform:translateY(5px) rotate(-.6deg);
}

.site.visible .audience-line{
  animation:handReveal 620ms var(--ease) 200ms forwards;
}

.landing h1{
  margin:15px 0 0;
  max-width:690px;
  color:var(--navy);
  font-size:clamp(24px,2vw,36px);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:760;
  opacity:0;
  transform:translateY(5px);
}

.site.visible h1{
  animation:softReveal 620ms var(--ease) 290ms forwards;
}

.signup{
  width:min(640px,100%);
  margin-top:36px;
  opacity:0;
  transform:translateY(5px);
}

.site.visible .signup{
  animation:softReveal 620ms var(--ease) 390ms forwards;
}

.signup h2{
  margin:0;
  font-size:15px;
  font-weight:800;
  letter-spacing:.10em;
}

.squiggle{
  display:block;
  width:148px;
  height:auto;
  margin:5px auto 0;
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
}

.site.visible .squiggle{
  animation:drawSquiggle 1.4s cubic-bezier(0.85, 0, 0.15, 1) 600ms forwards;
}

@keyframes drawSquiggle{
  to{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.signup-note{
  margin:17px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}

.waitlist-form{
  margin-top:18px;
}

.email-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border-bottom:2px solid var(--navy);
}

.email-row input{
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  padding:14px 0;
  color:var(--navy);
  font-size:20px;
  font-weight:500;
}

.email-row input::placeholder{
  color:var(--soft);
}

.email-row button{
  border:0;
  background:var(--navy);
  color:#fff;
  cursor:pointer;
  padding:12px 28px;
  border-radius:40px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  margin:4px 0;
  box-shadow:0 4px 12px rgba(13,29,50,0.15);
  transition:all 200ms ease;
}

.email-row button:hover{
  background:var(--orange);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,105,0,0.25);
}

.email-row button:active{
  transform:translateY(1px);
  box-shadow:0 2px 8px rgba(255,105,0,0.2);
}

.form-message{
  min-height:20px;
  margin:7px 0 0;
  text-align:left;
  color:var(--orange);
  font-family:var(--hand);
  font-size:20px;
}

@keyframes softReveal{
  0%{
    opacity:0;
    transform:translateY(14px);
    filter:blur(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0px);
  }
}

@keyframes handReveal{
  0%{
    opacity:0;
    transform:translateY(14px) rotate(-.6deg);
    filter:blur(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0) rotate(-.6deg);
    filter:blur(0px);
  }
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  min-height:58px;
  padding:
    0 max(34px,calc((100vw - 1180px)/2))
    env(safe-area-inset-bottom);
  background:var(--navy);
  color:#fff;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  font-size:11px;
  font-weight:650;
}

.copyright{
  grid-column:2;
  white-space:nowrap;
}

.socials{
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:34px;
}

.socials a{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1;
  transition:color 160ms ease;
}

.socials a .social-icon{
  flex-shrink:0;
  display:block;
  margin-top:-1px;
}

.socials a span{
  display:block;
}

.socials a:hover{
  color:var(--orange);
}


/* =========================================================
   ORANGE DESKTOP CURSOR
   ========================================================= */

.orange-cursor{
  display:none;
}

@media (hover:hover) and (pointer:fine){
  body.cursor-on,
  body.cursor-on button,
  body.cursor-on a{
    cursor:none;
  }

  body.cursor-on input{
    cursor:text;
  }

  .orange-cursor{
    display:block;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--orange);
    pointer-events:none;
    opacity:0;
    transform:translate3d(-100px,-100px,0);
    transition:
      opacity 90ms ease,
      width 150ms var(--ease),
      height 150ms var(--ease),
      box-shadow 150ms ease;
    will-change:transform;
  }

  .orange-cursor.visible{opacity:1}

  .orange-cursor.interactive{
    width:23px;
    height:23px;
    box-shadow:0 0 0 7px rgba(255,105,0,.10);
  }

  .orange-cursor.down{
    width:9px;
    height:9px;
  }

  .orange-cursor.over-input{
    opacity:0;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media(min-width:768px) and (max-width:1100px){
  .entry-logo-stage{
    width:min(620px,72vw);
  }

  .entry-tagline{
    margin-top:12px;
    font-size:12px;
  }

  .enter-button{
    margin-top:64px;
  }

  .landing-content{
    width:min(700px,100%);
  }

  .landing-logo{
    width:clamp(190px,27vw,270px);
  }

  .audience-line{
    margin-top:46px;
    font-size:30px;
  }

  .landing h1{
    max-width:620px;
    font-size:31px;
  }

  .footer{
    padding-left:28px;
    padding-right:28px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){
  .entry-stack{
    width:100%;
    padding:0 18px;
    transform:translateY(-2vh);
  }

  .entry-logo-stage{
    width:min(560px,92vw);
  }

  .entry-tagline{
    margin-top:9px;
    font-size:11px;
    letter-spacing:.17em;
  }

  .enter-button{
    margin-top:58px;
    min-height:48px;
    padding:12px 10px;
    font-size:12px;
  }

  .site{
    min-height:100svh;
  }

  .landing{
    place-items:center;
    padding:
      max(28px,env(safe-area-inset-top))
      20px
      28px;
  }

  .landing-content{
    width:100%;
    max-width:100%;
    transform:none;
  }

  .landing-logo{
    width:min(220px,58vw);
  }

  .audience-line{
    margin-top:32px;
    font-size:clamp(22px,7vw,32px);
  }

  .landing h1{
    margin-top:12px;
    max-width:100%;
    font-size:clamp(22px,6.8vw,32px);
    line-height:1.15;
    letter-spacing:-.02em;
  }

  .signup{
    margin-top:28px;
    width:100%;
  }

  .signup h2{
    font-size:13px;
    letter-spacing:.08em;
  }

  .signup-note{
    margin-top:12px;
    font-size:15px;
  }

  .waitlist-form{
    margin-top:14px;
  }

  .email-row{
    border-bottom-width:2px;
  }

  .email-row input{
    font-size:17px;
    padding:16px 0;
    /* Prevent iOS zoom on focus (needs >= 16px) */
  }

  .email-row button{
    min-height:48px;
    padding:0 24px;
    font-size:13px;
    white-space:nowrap;
  }

  .form-message{
    font-size:18px;
  }

  .footer{
    min-height:88px;
    padding:
      16px 20px
      max(16px,env(safe-area-inset-bottom));
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:10px;
    justify-items:center;
  }

  .copyright{
    grid-column:1;
    grid-row:2;
    font-size:10px;
  }

  .socials{
    grid-column:1;
    grid-row:1;
    justify-self:center;
    gap:28px;
  }

  .socials a{
    padding:10px 4px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    font-size:11px;
  }
}

@media(max-width:390px){
  .landing{
    align-items:start;
  }

  .landing-content{
    padding-top:16px;
  }

  .landing-logo{
    width:64vw;
  }

  .audience-line{
    margin-top:28px;
    font-size:clamp(20px,7.5vw,26px);
  }

  .landing h1{
    font-size:clamp(20px,7vw,26px);
    margin-top:10px;
  }

  .email-row input{
    /* 16px prevents iOS auto-zoom */
    font-size:16px;
  }

  .signup h2{
    font-size:12px;
  }
}


/* SHORT LAPTOP */
@media(min-width:768px) and (max-height:760px){
  .entry-logo-stage{
    width:min(560px,48vw);
  }

  .enter-button{
    margin-top:46px;
  }

  .landing{
    padding-top:20px;
    padding-bottom:20px;
  }

  .landing-content{
    transform:none;
  }

  .landing-logo{
    width:190px;
  }

  .audience-line{
    margin-top:29px;
  }

  .signup{
    margin-top:25px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* =========================================================
   PREMIUM UPGRADES
   ========================================================= */

/* Grain overlay for depth */
.site::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
}

/* Glowing pulse on the JOIN button */
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,105,0,0)}
  50%{box-shadow:0 0 28px 6px rgba(255,105,0,.18)}
}

.email-row button{
  animation:ctaPulse 3.2s ease-in-out infinite;
}

/* Shimmer on the h2 heading */
@keyframes shimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}

.signup h2{
  background:linear-gradient(90deg,var(--navy) 0%,var(--orange) 48%,var(--navy) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 5s linear infinite;
}

/* Scroll-reveal utility – elements start hidden */
.reveal{
  opacity:0;
  transform:translateY(22px);
  filter:blur(8px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease),filter 700ms var(--ease);
}

.reveal.in-view{
  opacity:1;
  transform:none;
  filter:blur(0px);
}

/* Stagger children */
.reveal-group > *{
  opacity:0;
  transform:translateY(18px);
  filter:blur(8px);
  transition:opacity 600ms var(--ease),transform 600ms var(--ease),filter 600ms var(--ease);
}

.reveal-group.in-view > *:nth-child(1){transition-delay:0ms}
.reveal-group.in-view > *:nth-child(2){transition-delay:90ms}
.reveal-group.in-view > *:nth-child(3){transition-delay:180ms}
.reveal-group.in-view > *:nth-child(4){transition-delay:270ms}

.reveal-group.in-view > *{
  opacity:1;
  transform:none;
  filter:blur(0px);
}

/* Parallax logo — subtle float */
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.site.visible .landing-logo{
  animation:softReveal 620ms var(--ease) 80ms forwards,
            logoFloat 5s ease-in-out 800ms infinite;
}

/* Orange accent line under footer socials on hover */
.socials a{
  position:relative;
}

.socials a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:1px;
  background:var(--orange);
  transition:width 240ms var(--ease);
}

.socials a:hover::after{
  width:100%;
}

/* Glowing ring around email input on focus */
.email-row:focus-within{
  border-bottom-color:var(--orange);
  transition:border-color 250ms ease;
}

/* Smooth colour on JOIN hover */
.email-row button{
  position:relative;
  overflow:hidden;
  transition:color 200ms ease;
}

/* Background gradient sweep on button hover */
.email-row button::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:translateX(-100%);
  transition:transform 400ms ease;
}

.email-row button:hover::before{
  transform:translateX(100%);
}

/* Footer dark gradient fade */
.footer{
  background:linear-gradient(175deg,#071a2f 0%,#0a2240 100%);
}

/* Audience line subtle pulse */
@keyframes handGlow{
  0%,100%{text-shadow:none}
  50%{text-shadow:0 0 32px rgba(255,105,0,.35)}
}

.site.visible .audience-line{
  animation:handReveal 620ms var(--ease) 200ms forwards,
            handGlow 4s ease-in-out 900ms infinite;
}