/* ============================================================
   RAINFLOWER — homepage styles (standalone)
   See BRAND_GUIDE.md. Tokens here are the single source of truth
   for the RAINFLOWER landing page (served at "/").
   ============================================================ */

:root{
  --pond-900:#0A0A0B;
  --pond-700:#161618;
  --pond-600:#2A2A2E;
  --aqua:#6FA8FF;
  --aqua-soft:#A7C8FF;
  --gold:#F4C95D;
  --gold-deep:#E0A93B;
  --cta:#3DDC97;
  --cta-deep:#22C07E;
  --cta-ink:#04241A;
  --petal:#8FAEE0;
  --mist:#F2F3F5;
  --mist-dim:#9A9AA2;

  --maxw:1200px;
  --pad:clamp(1.25rem,5vw,4rem);
  --section:clamp(4.5rem,10vw,8rem);
  --radius:20px;

  --shadow:0 20px 50px -20px rgba(0,0,0,.55);
  --glow:0 0 60px -10px rgba(111,168,255,.22);

  /* translucent surfaces — derived from the black canvas */
  --nav-bg:rgba(10,10,11,.78);
  --nav-border:rgba(60,60,68,.6);
  --scrim:rgba(8,8,9,.97);
  --glass:rgba(20,20,22,.6);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  color:var(--mist);
  background:var(--pond-900);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient pond gradient over the whole page */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(111,168,255,.12), transparent 60%),
    radial-gradient(90% 70% at 10% 110%, rgba(111,168,255,.08), transparent 55%),
    linear-gradient(180deg,#040405 0%, var(--pond-900) 40%, #060608 100%);
  z-index:-2;
}

img{max-width:100%;display:block}
a{color:var(--aqua);text-decoration:none}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--aqua);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--aqua);opacity:.6}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans);font-weight:600;font-size:1rem;
  border:none;cursor:pointer;border-radius:999px;
  padding:.95rem 1.9rem;display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;
}
.btn--primary{background:var(--cta);color:var(--cta-ink)}
.btn--primary:hover{background:var(--cta-deep);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(61,220,151,.45)}
.btn--ghost{background:transparent;color:var(--mist);border:1.5px solid var(--pond-600)}
.btn--ghost:hover{border-color:var(--aqua);color:var(--aqua-soft);transform:translateY(-2px)}
.btn--lg{padding:1.1rem 2.4rem;font-size:1.05rem}

:focus-visible{outline:2.5px solid var(--aqua);outline-offset:3px;border-radius:6px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nav-border);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand svg{width:38px;height:38px;flex:none}
.brand__word{font-family:var(--serif);font-size:1.35rem;letter-spacing:.04em;color:var(--mist)}
.nav__links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav__links a{color:var(--mist-dim);font-weight:500;font-size:.98rem;transition:color .2s}
.nav__links a:hover{color:var(--mist)}
.nav__cta{margin-left:.5rem}

.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  width:44px;height:44px;border-radius:12px;position:relative;
}
.hamburger span{
  position:absolute;left:11px;right:11px;height:2px;background:var(--mist);
  border-radius:2px;transition:transform .3s,opacity .3s,top .3s;
}
.hamburger span:nth-child(1){top:15px}
.hamburger span:nth-child(2){top:21px}
.hamburger span:nth-child(3){top:27px}
.hamburger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

.mobile-panel{
  display:none;
  position:fixed;inset:0 0 0 0;top:0;z-index:49;
  background:var(--scrim);backdrop-filter:blur(8px);
  flex-direction:column;justify-content:center;align-items:center;gap:.5rem;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.mobile-panel.open{opacity:1;pointer-events:auto}
.mobile-panel a{
  font-family:var(--serif);font-size:1.9rem;color:var(--mist);padding:.6rem 1rem;
}
.mobile-panel a:hover{color:var(--aqua)}
.mobile-panel .btn{margin-top:1.2rem}

@media (max-width:880px){
  .nav__links,.nav__cta{display:none}
  .hamburger{display:block}
  .mobile-panel{display:flex}
}

/* ============================================================
   HERO + ripple field
   ============================================================ */
.hero{position:relative;padding:clamp(4rem,9vw,7rem) 0 var(--section);overflow:hidden}
.ripple-field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ripple-field .ring{
  position:absolute;left:50%;top:42%;border:1px solid var(--aqua);
  border-radius:50%;opacity:0;transform:translate(-50%,-50%);
  animation:ripple 14s ease-out infinite;
}
.ripple-field .ring:nth-child(2){animation-delay:4.6s}
.ripple-field .ring:nth-child(3){animation-delay:9.2s}
.ripple-field .ring:nth-child(4){animation-delay:13.8s}
@keyframes ripple{
  0%{width:40px;height:40px;opacity:.18}
  100%{width:760px;height:760px;opacity:0}
}


.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-size:clamp(2.75rem,6vw,5rem)}
.hero h1 em{font-style:italic;color:var(--aqua)}
.hero__lead{font-size:1.15rem;color:var(--mist-dim);max-width:46ch;margin:1.4rem 0 2rem}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}

/* floating lily video card */
.media-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow),var(--glow);
  border:1px solid rgba(111,168,255,.25);
  background:var(--pond-700);
}
.media-card::after{
  content:"";position:absolute;inset:auto 0 -40px 0;height:80px;
  background:radial-gradient(60% 100% at 50% 0,rgba(111,168,255,.4),transparent 70%);
  filter:blur(20px);z-index:-1;
}
.video-frame{position:relative;aspect-ratio:16/9}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-card__tag{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);
  padding:.8rem 1.1rem;display:flex;align-items:center;gap:.5rem;
}
.media-card__tag .dot{width:8px;height:8px;border-radius:50%;background:var(--petal)}

@media (max-width:820px){
  .hero__grid{grid-template-columns:1fr}
  .hero__lead{max-width:none}
}

/* ============================================================
   STATS strip
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem;
  padding:2rem 0;border-block:1px solid var(--pond-600)}
.stat__num{font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);color:var(--aqua);line-height:1}
.stat__label{font-size:.92rem;color:var(--mist-dim);margin-top:.4rem}

/* ============================================================
   SECTION + cards
   ============================================================ */
.section{padding-block:var(--section)}
.section__head{max-width:60ch;margin-bottom:3rem}
.section__head h2{font-size:clamp(2rem,4vw,3.25rem)}
.section__head p{color:var(--mist-dim);font-size:1.1rem;margin-top:1rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.card{
  background:var(--pond-700);border:1px solid var(--pond-600);
  border-radius:var(--radius);padding:2rem;transition:transform .3s,border-color .3s;
}
.card:hover{transform:translateY(-3px);border-color:rgba(111,168,255,.5)}
.card__icon{width:48px;height:48px;margin-bottom:1.2rem;color:var(--aqua)}
.card h3{font-size:1.4rem;margin-bottom:.6rem}
.card p{color:var(--mist-dim)}

/* ============================================================
   SLIDESHOW (presentation slides)
   ============================================================ */
.slideshow{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(111,168,255,.25);box-shadow:var(--shadow);background:var(--pond-700)}
.slides{position:relative;aspect-ratio:16/9}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
/* generated placeholder slides use a gradient + caption */
.slide--ph{flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;gap:1rem}
.slide__kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua)}
.slide__title{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.6rem)}
.slide__body{color:var(--mist-dim);max-width:50ch}

.slide-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(234,247,244,.3);
  background:var(--glass);backdrop-filter:blur(6px);color:var(--mist);
  cursor:pointer;display:grid;place-items:center;font-size:1.3rem;transition:background .2s,transform .2s;
}
.slide-btn:hover{background:rgba(20,20,22,.9);transform:translateY(-50%) scale(1.06)}
.slide-btn--prev{left:14px}
.slide-btn--next{right:14px}
.slide-dots{display:flex;gap:.6rem;justify-content:center;padding:1.1rem;background:var(--pond-700)}
.slide-dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;
  background:var(--pond-600);transition:background .2s,transform .2s;padding:0}
.slide-dots button[aria-current="true"]{background:var(--aqua);transform:scale(1.25)}

/* ============================================================
   SIGN-UP (floating lily card)
   ============================================================ */
.signup{position:relative}
.signup__card{
  background:linear-gradient(160deg,var(--pond-700),#0e0e10);
  border:1px solid rgba(111,168,255,.3);border-radius:28px;
  padding:clamp(2rem,5vw,3.5rem);box-shadow:var(--shadow),var(--glow);
  max-width:760px;margin-inline:auto;
}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}
.role{position:relative;display:block;cursor:pointer;height:100%}
.role input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.role__box{
  height:100%;border:1.5px solid var(--pond-600);border-radius:16px;
  padding:1.1rem 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  transition:border-color .2s,background .2s;
}
.role__box strong{font-family:var(--serif);font-size:1.15rem}
.role__box span{font-size:.82rem;color:var(--mist-dim)}
.role input:checked + .role__box{border-color:var(--aqua);background:rgba(111,168,255,.12)}
.role input:focus-visible + .role__box{outline:2.5px solid var(--aqua);outline-offset:3px}

.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;color:var(--mist-dim);margin-bottom:.4rem;letter-spacing:.02em}
.field input{
  width:100%;padding:.95rem 1.1rem;border-radius:14px;font-size:1rem;font-family:var(--sans);
  background:var(--glass);border:1.5px solid var(--pond-600);color:var(--mist);
}
.field input::placeholder{color:#6a6a72}
.field input:focus{border-color:var(--aqua);outline:none}
/* selects + textareas match the text inputs (signup form) */
.field select,.field textarea{
  width:100%;padding:.95rem 1.1rem;border-radius:14px;font-size:1rem;font-family:var(--sans);
  background:var(--glass);border:1.5px solid var(--pond-600);color:var(--mist);
}
.field textarea{min-height:120px;resize:vertical}
.field select:focus,.field textarea:focus{border-color:var(--aqua);outline:none}
.cb-row{display:flex;align-items:center;gap:.5rem;color:var(--mist-dim);font-size:.92rem;cursor:pointer}
.cb-row input{width:auto;accent-color:var(--cta)}
.cb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.signup .btn--primary{width:100%;justify-content:center;margin-top:.5rem}
.form-note{font-size:.85rem;color:var(--mist-dim);text-align:center;margin-top:1rem}
.form-success{
  display:none;text-align:center;padding:2rem 0;
}
.form-success.show{display:block}
.form-success h3{color:var(--aqua);font-size:1.8rem;margin-bottom:.5rem}

@media (max-width:560px){.roles{grid-template-columns:1fr}}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.to-top{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid var(--pond-600);background:var(--glass);backdrop-filter:blur(10px);
  color:var(--mist);display:grid;place-items:center;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,border-color .2s,background .2s;
  box-shadow:var(--shadow);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--aqua);color:var(--aqua);background:rgba(20,20,22,.85)}
.to-top svg{width:20px;height:20px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--pond-600);padding-block:3rem;margin-top:var(--section)}
.footer__inner{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center}
.footer p{color:var(--mist-dim);font-size:.9rem}
.footer__links{display:flex;gap:1.5rem;list-style:none}
.footer__links a{color:var(--mist-dim);font-size:.9rem}
.footer__links a:hover{color:var(--aqua)}

/* ============================================================
   REVEAL on scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .slide{transition:none}
}