/* ============================================================
   HERO
============================================================ */
#hero{
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:130px;
  padding-bottom:90px;
  position:relative;
}
.hero-inner{ max-width:920px; text-align:center; margin:0 auto; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--soft-violet); font-weight:600;
}
.hero-eyebrow .pip{
  width:6px; height:6px; border-radius:50%;
  background:var(--soft-violet);
  box-shadow:0 0 12px 2px rgba(155,122,232,.7);
  animation:pip-pulse 2.2s ease-in-out infinite;
}
@keyframes pip-pulse{
  0%,100%{ opacity:.45; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){ .hero-eyebrow .pip{ animation:none; } }

.hero-title{
  font-size:clamp(54px, 9.4vw, 132px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.025em;
  margin:20px 0 22px;
  color:var(--text-main);
  text-shadow:0 6px 40px rgba(0,0,0,.45);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title{
    background:linear-gradient(180deg, #ffffff 10%, var(--lavender) 130%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    text-shadow:none;
  }
}
.hero-sub{
  font-size:clamp(16px, 2vw, 19px);
  line-height:1.6;
  color:var(--text-secondary);
  max-width:620px;
  margin:0 auto 40px;
}
.notify-form-lg{ margin:0 auto; }
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  margin:26px 0 46px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.16em; font-weight:700;
  color:var(--text-muted);
}
.hero-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--soft-violet);
  box-shadow:0 0 12px 2px rgba(155,122,232,.7);
}

.scroll-hint{
  position:absolute;
  left:50%; bottom:8px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--text-muted);
  font-size:11px; letter-spacing:.22em; font-weight:700;
}
.scroll-hint svg{ animation:hint-bounce 2.2s ease-in-out infinite; }
@keyframes hint-bounce{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(8px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .scroll-hint svg{ animation:none; } }
@media (max-width:720px){ .scroll-hint{ display:none; } }

/* ============================================================
   MARQUEE TICKER
============================================================ */
.marquee{
  overflow:hidden;
  border-top:1px solid rgba(168,162,179,.14);
  border-bottom:1px solid rgba(168,162,179,.14);
  padding:26px 0;
  position:relative; z-index:2;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
.marquee-track span{
  display:inline-flex; align-items:center;
  font-size:15px; font-weight:700; letter-spacing:.05em;
  color:var(--text-muted);
  white-space:nowrap;
  padding:0 26px;
}
.marquee-track span::after{
  content:'◆';
  margin-left:26px;
  font-size:8px;
  color:var(--soft-violet);
  opacity:.7;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================================
   SECTION HEADERS
============================================================ */
.section-pad{ padding:150px 0; }
@media (max-width:720px){ .section-pad{ padding:100px 0; } }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-title{
  font-size:clamp(34px,5vw,56px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.05;
  margin:18px 0 14px;
  color:var(--text-main);
}
.section-sub{
  font-size:16px;
  color:var(--text-secondary);
  line-height:1.6;
  max-width:520px;
}

/* ============================================================
   FEATURE GRID
============================================================ */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:960px){ .feature-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
  position:relative;
  padding:38px 32px 40px;
  border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(36,18,56,.55), rgba(15,10,23,.4));
  border:1px solid rgba(155,122,232,.14);
  overflow:hidden;
  transition:transform .5s var(--ease-soft), border-color .5s var(--ease-out), background .5s var(--ease-out);
}
.feature-card::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(155,122,232,.16), transparent 65%);
  opacity:0;
  transition:opacity .4s var(--ease-out);
  pointer-events:none;
}
.feature-card:hover{ transform:translateY(-8px); border-color:rgba(155,122,232,.4); }
.feature-card:hover::after{ opacity:1; }
.feature-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(109,63,214,.16);
  border:1px solid rgba(155,122,232,.28);
  color:var(--lavender);
  margin-bottom:24px;
}
.feature-icon svg{ width:25px; height:25px; }
.feature-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:-.005em;
}
.feature-desc{
  font-size:14.5px;
  color:var(--text-secondary);
  line-height:1.6;
}

/* ============================================================
   CREATORS / STATS
============================================================ */
#creators .about-body{
  font-size:clamp(19px,2.2vw,25px);
  line-height:1.55;
  font-weight:500;
  color:var(--text-main);
  max-width:820px;
  margin-bottom:70px;
}
.stat-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  border-top:1px solid rgba(168,162,179,.14);
  padding-top:48px;
}
@media (max-width:720px){
  .stat-row{ grid-template-columns:1fr; gap:34px; }
}
.stat-value{
  font-size:clamp(42px,6vw,68px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--lavender);
}
.stat-label{
  margin-top:12px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
}

/* ============================================================
   CREATORS
============================================================ */
.creator-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:960px){ .creator-grid{ grid-template-columns:1fr; } }
.creator-card{
  padding:26px 26px 24px;
  border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(36,18,56,.5), rgba(15,10,23,.38));
  border:1px solid rgba(155,122,232,.14);
  display:flex; align-items:center; gap:16px;
  color:inherit;
  text-decoration:none;
  transition:transform .5s var(--ease-soft), border-color .5s var(--ease-out);
}
.creator-card:hover{ transform:translateY(-6px); border-color:rgba(155,122,232,.36); }
.creator-avatar{
  position:relative; overflow:hidden;
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:21px; font-weight:800;
  color:#fff;
  background:linear-gradient(145deg, var(--primary-purple), var(--secondary-purple));
  box-shadow:0 6px 18px rgba(124,58,237,.32);
}
.creator-initial{ line-height:1; }
.creator-avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.creator-avatar.is-fallback img{ display:none; }
.creator-meta{ display:flex; flex-direction:column; min-width:0; }
.creator-name{ font-size:15px; font-weight:700; }
.creator-handle{
  font-size:13px; color:var(--soft-violet); font-weight:600; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.creator-yt{
  margin-left:auto;
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--soft-violet);
  flex:0 0 auto;
}
.creator-yt-icon{ width:17px; height:17px; color:#ff3d3d; }
@media (max-width:520px){
  .creator-yt span{ display:none; }
}

/* ============================================================
   FAQ
============================================================ */
.faq-list{ border-top:1px solid rgba(168,162,179,.14); }
.faq-item{ border-bottom:1px solid rgba(168,162,179,.14); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:none; border:0;
  text-align:left;
  padding:28px 4px;
  font-size:clamp(16px,2vw,19px);
  font-weight:700;
  color:var(--text-main);
  cursor:pointer;
  transition:color .4s var(--ease-out);
}
.faq-q:hover{ color:var(--lavender); }
.faq-icon{
  position:relative;
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(168,162,179,.24);
  transition:background .4s var(--ease-out), border-color .4s var(--ease-out), transform .5s var(--ease-out);
}
.faq-icon::before, .faq-icon::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:12px; height:1.5px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.open .faq-q{ color:var(--lavender); }
.faq-item.open .faq-icon{ background:rgba(155,122,232,.2); border-color:rgba(199,183,255,.55); transform:rotate(90deg); }
.faq-item.open .faq-icon::after{ opacity:0; }

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .6s var(--ease-soft);
}
.faq-item.open .faq-a{ max-height:420px; }
.faq-a p{
  padding:0 4px 30px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--text-secondary);
  max-width:660px;
}

/* ============================================================
   CTA
============================================================ */
.cta-section{
  padding:150px 0 170px;
  text-align:center;
  position:relative; z-index:2;
}
@media (max-width:720px){ .cta-section{ padding:100px 0 120px; } }
.cta-inner{ max-width:760px; margin:0 auto; }
.cta-title{
  font-size:clamp(34px,5.4vw,60px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  margin:20px 0 16px;
  color:var(--text-main);
}
.cta-sub{ margin:0 auto 40px; }
.cta-inner .notify-form{ margin:0 auto; }
.form-fine{
  margin-top:20px;
  font-size:12.5px;
  color:var(--text-muted);
  letter-spacing:.02em;
}

/* ============================================================
   FOOTER
============================================================ */
footer{
  padding:60px 0 40px;
  border-top:1px solid rgba(168,162,179,.12);
  position:relative; z-index:2;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;
}
.footer-brand .logo{ margin-bottom:6px; }
.footer-role{ font-size:13px; color:var(--text-muted); }
.footer-links{ display:flex; gap:26px; font-size:13px; color:var(--text-secondary); }
.footer-links a:hover{ color:var(--lavender); }
/* Contacts get their own column rather than joining the nav links, so the
   addresses are scannable and do not look like page sections. */
.footer-contact{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.footer-contact-label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted);
}
.footer-contact a{
  color:var(--text-secondary); text-decoration:none; width:fit-content;
  transition:color .25s var(--ease-soft);
}
.footer-contact a:hover{ color:var(--lavender); }
.footer-copy{ font-size:12px; color:var(--text-muted); width:100%; margin-top:34px; text-align:center; }
.footer-copy p{ margin:0; }
/* The credit sits under the legal line so the two never crowd each other, and
   keeps the muted tone of the rest of the footer rather than pulling attention
   to itself. */
.footer-credit{ margin-top:8px !important; }
.footer-credit a{
  color:var(--text-secondary); text-decoration:none;
  border-bottom:1px solid rgba(168,162,179,.28);
  transition:color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.footer-credit a:hover{ color:var(--lavender); border-color:rgba(199,183,255,.5); }