/* ============================================================
   Creatorflood — creatorflood.net
   ============================================================ */

:root{
  color-scheme:dark;
  --bg:#07142e;
  --surface:#0d1c3a;
  --text:#ffffff;
  --muted:#9296a1;
  --muted-2:rgba(255,255,255,.75);

  --blue:#0055ff;
  --blue-bright:#0080ff;
  --blue-light:#0099ff;
  --blue-glow:rgba(0,102,255,.41);

  --hair:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.03);

  --maxw:1064px;
  --pad:24px;

  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

button,a,summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,102,255,.18);
}

.skip-link{
  position:absolute;
  left:16px;top:-64px;
  z-index:100;
  padding:12px 18px;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  font-weight:500;
  text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:16px}
main:focus{outline:none}

:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- background glows + grain ---------- */

.bg-glows{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.glow{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(90px);
}
.glow-1{ top:1%;   right:-16%; width:52vw; height:52vw; max-width:820px; max-height:820px;
  background:radial-gradient(circle,rgba(22,78,196,.26) 0%,rgba(22,78,196,0) 62%); }
.glow-2{ top:14%;  right:-12%;  width:44vw; height:44vw; max-width:700px; max-height:700px;
  background:radial-gradient(circle,rgba(0,110,200,.20) 0%,rgba(0,110,200,0) 62%); }
.glow-3{ top:36%;  left:-14%;  width:52vw; height:52vw; max-width:820px; max-height:820px;
  background:radial-gradient(circle,rgba(20,72,190,.20) 0%,rgba(20,72,190,0) 62%); }
.glow-4{ top:56%;  left:20%;   width:58vw; height:58vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle,rgba(18,70,185,.19) 0%,rgba(18,70,185,0) 62%); }
.glow-5{ bottom:0; left:8%;    width:56vw; height:44vw; max-width:900px; max-height:700px;
  background:radial-gradient(circle,rgba(0,105,198,.20) 0%,rgba(0,105,198,0) 62%); }

.grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:url('assets/noise.png');
  background-repeat:repeat;
  background-size:220px 220px;
  opacity:.05;
  mix-blend-mode:overlay;
}

main,.footer{position:relative;z-index:2}

/* ---------- shared layout ---------- */

section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  text-align:center;
}

.section-title{
  text-wrap:balance;
  font-size:clamp(1.9rem,4.2vw,2.8125rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.03em;
  margin:0 0 8px;
  background:linear-gradient(100deg,#5b9bff 0%,#ffffff 26%,#ffffff 62%,#7fa9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-sub{
  font-size:1rem;
  line-height:1.4;
  color:var(--muted-2);
  margin:0 auto 56px;
  max-width:590px;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-size:clamp(1rem,1.5vw,1.1875rem);
  font-weight:500;
  line-height:1;
  padding:17px 32px;
  border:1px solid transparent;   /* keeps primary and ghost the exact same box */
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(180deg,var(--blue-bright) 0%,var(--blue) 100%);
  color:#fff;
  box-shadow:0 0 44px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{
  box-shadow:0 0 60px rgba(0,102,255,.55),inset 0 1px 0 rgba(255,255,255,.32);
}

.btn-ghost{
  background:rgba(13,28,58,.72);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 44px rgba(0,102,255,.16);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 60px rgba(0,102,255,.3);
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(16px,2.6svh,40px);
  padding-bottom:clamp(20px,3.2svh,52px);
}
.hero .btn{align-self:center}

.hero-logo{
  width:clamp(46px,6.4svh,70px);
  height:auto;
  aspect-ratio:1;
  margin:0 auto clamp(10px,1.8svh,22px);
  object-fit:contain;
}

.hero-title{
  text-wrap:balance;
  font-size:clamp(2.125rem,min(4.1vw,6svh),3.5rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.03em;
  margin:0 auto clamp(10px,1.8svh,20px);
  max-width:935px;
}

.hero-sub{
  font-size:clamp(.9375rem,min(1.5vw,2.1svh),1.25rem);
  color:var(--muted-2);
  margin:0 auto clamp(14px,2.6svh,32px);
  max-width:683px;
  line-height:1.4;
}
.point{display:inline-block}

.vsl{width:100%;max-width:640px;margin:0 auto clamp(16px,2.8svh,36px)}
.vsl-frame{
  position:relative;
  width:min(640px,100%,calc(clamp(150px,38svh,360px) * 16 / 9));
  aspect-ratio:16/9;
  margin-inline:auto;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:#111;
  box-shadow:0 0 80px rgba(0,102,255,.14);
}
.vsl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   PROOF / TRUSTED BY
   ============================================================ */

.proof{padding-top:clamp(64px,10svh,140px);padding-bottom:140px}

.stat{
  font-size:clamp(1.6rem,4.2vw,2.8125rem);
  font-weight:400;
  line-height:1.35;
  margin:0 0 4px;
  letter-spacing:-.02em;
}
.stat-dim{color:#a9aec6}
.stat-strong{color:#fff;font-weight:700}
.counter{font-variant-numeric:tabular-nums}

.stat-sub{
  font-size:clamp(1.4rem,4.2vw,2.8125rem);
  color:#a9aec6;
  font-weight:400;
  line-height:1.6;
  margin:0 0 12px;
  letter-spacing:-.02em;
}

.arrow-down{
  width:40px;height:40px;
  margin:0 auto 28px;
  color:#c9cbe4;
}
.arrow-down svg{width:100%;height:100%}

.trusted-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:660px;
  margin:40px auto 0;
}
.trusted-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:8px;
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
}
.trusted-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px 12px;
  background:var(--surface);
  border-radius:var(--r-md);
  text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.trusted-card:hover{background:#16274d;transform:translateY(-3px)}
.trusted-photo{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  border-radius:10px;
  overflow:hidden;
  background:#000;
}
.trusted-photo img{width:100%;height:100%;object-fit:contain}
.trusted-name{
  font-size:clamp(1.1875rem,2.1vw,1.375rem);
  font-weight:700;
  letter-spacing:-.02em;
  background:linear-gradient(100deg,#6aa0ff 0%,#ffffff 45%,#ffffff 70%,#8fb2ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============================================================
   MORE RESULTS (carousel)
   ============================================================ */

.results{padding-bottom:150px}

.carousel{
  position:relative;
  max-width:508px;
  margin:36px auto 0;
  padding:16px 0 44px;
  background:#132345;
  border-radius:var(--r-sm);
  overflow:hidden;
}
.carousel-viewport{overflow:hidden;margin:0 20px}
.carousel-track{
  display:flex;
  margin:0;padding:0;
  list-style:none;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.carousel-slide{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
}
.carousel-slide img{
  width:100%;
  max-height:620px;
  object-fit:contain;
  border-radius:4px;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;height:34px;
  display:grid;place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease;
}
.carousel-btn:hover{background:rgba(0,0,0,.6)}
.carousel-btn svg{width:22px;height:22px}
.carousel-prev{left:2px}
.carousel-next{right:2px}

.carousel-dots{
  position:absolute;
  left:0;right:0;bottom:18px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.carousel-dots button{
  width:8px;height:8px;
  padding:0;border:0;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition:background .2s ease;
}
.carousel-dots button[aria-current="true"]{background:#fff}

/* ============================================================
   WHAT WE DO
   ============================================================ */

.services{padding-bottom:150px}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  text-align:left;
}

.svc{
  padding:24px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 60%),
    rgba(255,255,255,.012);
  transition:border-color .25s ease,transform .25s ease;
}
.svc:hover{border-color:rgba(255,255,255,.16);transform:translateY(-3px)}

.svc-icon{
  display:grid;place-items:center;
  width:38px;height:38px;
  margin-bottom:26px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}
.svc-icon svg{width:20px;height:20px}

.svc h3{
  font-size:1.25rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.04em;
  margin:0 0 12px;
  background:linear-gradient(100deg,#6aa0ff 0%,#ffffff 40%,#ffffff 68%,#8fb2ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.svc p{
  font-size:.875rem;
  font-weight:500;
  line-height:1.4;
  color:var(--muted-2);
  margin:0;
}

/* ============================================================
   BOOK / CALENDLY
   ============================================================ */

.book{padding-bottom:150px;scroll-margin-top:40px}
.book .section-title{margin-bottom:36px}

.calendly-wrap{
  max-width:480px;
  margin:0 auto;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 80px rgba(0,102,255,.14);
}
.calendly-inline-widget{min-width:320px;height:700px}

/* ============================================================
   DIFFERENT
   ============================================================ */

.different{padding-bottom:150px}
.different .section-title{
  font-weight:400;
  line-height:1.31;
  letter-spacing:-.02em;
  background:linear-gradient(100deg,#8f9ac4 0%,#ffffff 30%,#e7e9f5 55%,#9aa3cc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:48px;
}

.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  text-align:left;
  margin-bottom:0;
}
/* one shared rule so every section CTA sits the same distance below its block */
.different > .btn{margin-top:64px}
.compare-col{display:flex;flex-direction:column}
.compare-head{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  margin-bottom:14px;
}
.compare-head img{width:48px;height:48px;object-fit:contain}
.others-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.375rem;
  font-weight:500;
  color:#fff;
}

.compare-card{
  list-style:none;
  margin:0;padding:0;
  border-radius:var(--r-md);
  overflow:hidden;
  flex:1;
}
.compare-card li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 22px;
}
.compare-card li + li{border-top:1px solid rgba(255,255,255,.12)}
.compare-card p{margin:0;font-size:1.25rem;line-height:1.6;letter-spacing:-.02em;color:rgba(255,255,255,.72)}
.compare-card strong{font-weight:400;color:#fff}

.compare-us{
  background:linear-gradient(150deg,#1372e8 0%,#0d5bbd 32%,#0b3f7d 62%,#0b2b45 100%);
  box-shadow:0 0 70px rgba(0,102,255,.25);
}
.compare-them{
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(150,20,30,.32) 0%,rgba(150,20,30,0) 62%),
    radial-gradient(90% 70% at 0% 100%,rgba(150,20,30,.26) 0%,rgba(150,20,30,0) 62%),
    #0a1428;
  border:1px solid rgba(255,255,255,.08);
}

.tick,.cross{
  flex:0 0 auto;
  font-size:.9375rem;
  line-height:1.6;
  color:rgba(255,255,255,.6);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq{padding-bottom:150px;text-align:left}

.faq-title{
  font-size:clamp(1.9rem,4.2vw,2.8125rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.016em;
  margin:0 0 44px;
  background:linear-gradient(100deg,#8f9ac4 0%,#ffffff 34%,#e7e9f5 60%,#9aa3cc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.faq-list{margin-bottom:64px}
.faq > .btn{display:block;width:max-content;margin:0 auto}   /* faq-list already gives 64px */

.faq-item{border-bottom:1px solid rgba(255,255,255,.07)}

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 4px;
  cursor:pointer;
  list-style:none;
  font-size:clamp(1.05rem,2vw,1.5rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.021em;
  background:linear-gradient(100deg,#2f8dff 0%,#7fb6ff 55%,#a8c9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.faq-item summary::-webkit-details-marker{display:none}

.chev{
  flex:0 0 auto;
  width:11px;height:11px;
  border-right:2px solid rgba(255,255,255,.65);
  border-bottom:2px solid rgba(255,255,255,.65);
  transform:rotate(-45deg);
  transition:transform .25s ease;
}
.faq-item[open] .chev{transform:rotate(45deg)}

.faq-body{padding:0 4px 26px;max-width:78ch}
.faq-body p{
  margin:0 0 12px;
  font-size:1rem;
  line-height:1.6;
  color:var(--muted-2);
}
.faq-body p:last-child{margin-bottom:0}

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

.footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad) 72px;
  text-align:center;
}

.who{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 22px 10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:1.25rem;
  font-weight:500;
  margin-bottom:14px;
}
.who-avatar{
  display:grid;place-items:center;
  width:30px;height:30px;
  border-radius:50%;
  background:linear-gradient(180deg,#2f8dff,#0b57d0);
  color:#fff;
}
.who-avatar svg{width:17px;height:17px}

.footer-email{
  font-size:1rem;
  color:var(--muted-2);
  margin:0 0 26px;
}
.footer-email a{text-decoration:none}
.footer-email a:hover{text-decoration:underline}

.yt{margin:0 auto 26px;max-width:520px}
.yt-frame{
  position:relative;
  padding-top:56.25%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:#111;
}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.ig{display:inline-block;margin-bottom:56px}
.ig img{width:46px;height:46px;object-fit:contain;transition:transform .2s ease}
.ig:hover img{transform:scale(1.08)}

.copyright{
  font-size:.875rem;
  color:var(--muted);
  margin:0;
  text-align:center;
}

/* ============================================================
   REVEAL
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  :root{--pad:20px}

  .vsl-frame{width:min(640px,100%,calc(clamp(124px,29svh,360px) * 16 / 9))}
  .hero-title{
    max-width:none;
    /* vw is far too weak at phone widths to drive this, so mobile gets its own scale */
    font-size:clamp(1.625rem,min(7.1vw,4.3svh),2.25rem);
  }
  .proof,.results,.services,.book,.different,.faq{padding-bottom:96px}

  .services-grid{grid-template-columns:1fr}

  .trusted-row{grid-template-columns:1fr;gap:12px}
  .trusted-photo{aspect-ratio:4/5;max-width:280px;margin-inline:auto}

  .compare{grid-template-columns:1fr;gap:32px}

  .btn{padding:16px 30px}

  .carousel{max-width:100%}
  .carousel-slide img{max-height:520px}

}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

@media (forced-colors:active){
  .section-title,.faq-title,.faq-item summary,.svc h3,.trusted-name{
    background:none;
    color:CanvasText;
    -webkit-text-fill-color:CanvasText;
  }
  .bg-glows,.grain{display:none}
}

/* very short viewports (small phones, landscape) — keep the hero CTA on screen */
@media (max-height:620px){
  .hero-title{font-size:clamp(1.6rem,5.2vw,2.125rem);margin-bottom:8px}
  .hero-sub{font-size:.875rem;line-height:1.35;margin-bottom:14px}
  .hero-logo{width:clamp(38px,5.6svh,52px);margin-bottom:10px}
  .hero .btn{padding:14px 30px;font-size:1rem}
}

/* phone landscape — stack won't fit, so put the video beside the copy */
@media (orientation:landscape) and (max-height:520px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:32px;
    align-content:center;
    text-align:left;
    padding-top:16px;
    padding-bottom:20px;
  }
  .hero-logo{grid-column:1;grid-row:1;margin:0 0 8px}
  .hero-title{grid-column:1;grid-row:2;margin:0 0 8px;text-wrap:pretty}
  .hero-sub{grid-column:1;grid-row:3;margin:0;max-width:none}
  .vsl{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0}
  .vsl-frame{width:min(100%,calc(52svh * 16 / 9))}
  .hero .btn{grid-column:1 / -1;grid-row:4;justify-self:center;margin-top:16px}
}

@media (orientation:landscape) and (max-height:400px){
  .hero-logo{width:30px;margin-bottom:6px}
  .hero-title{font-size:1.05rem;line-height:1.2}
  .hero-sub{font-size:.8125rem;line-height:1.3}
  .vsl-frame{width:min(100%,calc(48svh * 16 / 9))}
  .hero .btn{padding:11px 24px;font-size:.9375rem;margin-top:10px}
}

/* ============================================================
   LEGAL PAGES (privacy, terms)
   ============================================================ */

.legal{
  max-width:820px;
  margin:0 auto;
  padding:clamp(48px,8svh,88px) var(--pad) 96px;
  text-align:left;
}

.legal-header{text-align:center;margin-bottom:44px}
.legal-header h1{margin-bottom:10px}

.legal-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9375rem;
  color:var(--muted-2);
  text-decoration:none;
  margin-bottom:28px;
}
.legal-back:hover{color:#fff}

.legal h1{
  font-size:clamp(2rem,4.2vw,2.8125rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.03em;
  margin:0 0 10px;
  background:linear-gradient(100deg,#5b9bff 0%,#ffffff 26%,#ffffff 62%,#7fa9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.legal .updated{
  font-size:.9375rem;
  color:var(--muted);
  margin:0;
}

.legal h2{
  text-align:center;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.02em;
  margin:40px 0 12px;
  color:#fff;
}
.legal p,.legal li{
  font-size:1rem;
  line-height:1.65;
  color:var(--muted-2);
  margin:0 0 14px;
}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:#5b9bff}
.legal strong{color:#fff;font-weight:500}

.legal-note{
  text-align:center;
  margin-top:48px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  font-size:.875rem;
  color:var(--muted);
}

/* footer legal links (all pages) */
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 18px;
  margin:0 0 14px;
  font-size:.875rem;
}
.footer-legal a{color:var(--muted);text-decoration:none}
.footer-legal a:hover{color:#fff;text-decoration:underline}
.footer-legal span[aria-hidden]{color:rgba(255,255,255,.22)}