/* =========================================================
   ViralLoop — viralloop.net
   Viral-content discovery / curation platform landing page
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ===================== TOKENS ===================== */
:root{
  --void:#0E0A12;
  --void-soft:#17111D;
  --void-soft-2:#1F1826;
  --loop-pink:#FF3E82;
  --loop-orange:#FF8A3D;
  --electric-cyan:#3DE8FF;
  --cloud:#F7F5FA;
  --cloud-deep:#ECE6F2;
  --ink:#17111D;
  --ink-soft:#5C5468;
  --line-dark:rgba(247,245,250,0.14);
  --line-light:rgba(23,17,29,0.12);
  --shadow-card:0 26px 60px -20px rgba(14,10,18,0.5);
  --shadow-soft:0 14px 32px -16px rgba(14,10,18,0.25);
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --font-display:'Unbounded', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-tech:'DM Mono', monospace;
  --maxw:1180px;
}

/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);color:var(--ink);background:var(--cloud);line-height:1.6;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-0.01em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:104px 0;position:relative;}
@media (max-width:860px){.section{padding:70px 0;}}
:focus-visible{outline:3px solid var(--loop-pink);outline-offset:3px;}

.eyebrow{
  font-family:var(--font-tech);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--loop-pink);display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:500;
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--loop-pink);display:inline-block;}
.on-dark .eyebrow{color:var(--loop-orange);}
.on-dark .eyebrow::before{background:var(--loop-orange);}

.section-head{max-width:660px;margin-bottom:52px;}
.section-head h2{font-size:clamp(28px,4vw,42px);}
.section-head .lede{margin-top:16px;font-size:17.5px;color:var(--ink-soft);max-width:56ch;}
.on-dark .section-head .lede{color:#B8AFC4;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:14.5px;
  padding:15px 27px;border-radius:999px;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(120deg, var(--loop-pink), var(--loop-orange));color:#1A0A10;box-shadow:var(--shadow-soft);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(255,62,130,0.5);}
.btn-ghost{border:1.5px solid var(--line-light);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost.on-dark{border-color:var(--line-dark);color:var(--cloud);}
.btn-ghost.on-dark:hover{border-color:var(--cloud);}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ===================== CONTENT CARD (signature component) ===================== */
.content-card{
  background:var(--void-soft);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);
  width:220px;border:1px solid var(--line-dark);
}
.card-thumb{
  height:150px;position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:12px;
}
.thumb-a{background:linear-gradient(150deg,#3D8FFF,#9A3DFF 75%);}
.thumb-b{background:linear-gradient(150deg,var(--loop-pink),var(--loop-orange) 80%);}
.thumb-c{background:linear-gradient(150deg,#2FD68C,#3DE8FF 80%);}
.loop-badge{
  width:30px;height:30px;border-radius:50%;background:rgba(14,10,18,0.4);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.loop-badge svg{width:15px;height:15px;color:#fff;}
.cat-tag{
  font-family:var(--font-tech);font-size:10px;color:#fff;background:rgba(14,10,18,0.4);backdrop-filter:blur(4px);
  padding:5px 10px;border-radius:999px;
}
.content-card .caption{padding:16px 16px 0;font-size:15px;font-weight:600;color:var(--cloud);line-height:1.3;}
.content-card .stats{padding:10px 16px 0;display:flex;gap:12px;font-family:var(--font-tech);font-size:11px;color:#B8AFC4;}
.content-card .via{padding:8px 16px 16px;font-family:var(--font-tech);font-size:11px;color:var(--electric-cyan);}

/* ===================== NAV ===================== */
.nav{position:sticky;top:0;z-index:70;background:rgba(14,10,18,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--maxw);margin:0 auto;}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--cloud);}
.logo svg{width:22px;height:22px;color:var(--loop-pink);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a:not(.btn){font-family:var(--font-body);font-size:14px;font-weight:600;color:#B8AFC4;transition:color .15s ease;}
.nav-links a:hover:not(.btn){color:var(--cloud);}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;}
.nav-toggle svg{width:22px;height:22px;color:var(--cloud);}
.nav-toggle .icon-close{display:none;}
.nav.open .nav-toggle .icon-menu{display:none;}
.nav.open .nav-toggle .icon-close{display:block;}
.nav-links-cta{display:none;}
.header-cta{display:inline-flex;}
@media (max-width:940px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
  .nav.open .nav-links{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--void);padding:20px 28px 28px;gap:18px;border-bottom:1px solid var(--line-dark);
  }
  .nav-links-cta{display:block;margin-top:6px;padding-top:18px;border-top:1px solid var(--line-dark);}
  .nav-links-cta .btn{display:flex;width:100%;}
}

/* ===================== HERO ===================== */
.hero{background:var(--void);color:var(--cloud);position:relative;overflow:hidden;padding:84px 0 0;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 700px 500px at 78% 15%, rgba(255,62,130,0.18), transparent 60%),
             radial-gradient(ellipse 600px 400px at 88% 55%, rgba(61,232,255,0.10), transparent 60%);
}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 0.95fr;gap:56px;align-items:center;}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr;gap:56px;}}
.hero-copy h1{font-size:clamp(32px,5vw,56px);color:var(--cloud);}
.hero-copy h1 em{font-style:normal;background:linear-gradient(120deg, var(--loop-pink), var(--loop-orange));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-copy .lede{margin-top:22px;font-size:18px;color:#B8AFC4;max-width:46ch;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px;}

.card-cluster{position:relative;width:100%;max-width:420px;margin:0 auto;height:380px;}
.card-cluster .content-card{position:absolute;}
.cc-back{top:0;left:10px;transform:rotate(-7deg);z-index:1;}
.cc-front{top:60px;left:150px;transform:rotate(5deg);z-index:2;}
@media (prefers-reduced-motion: no-preference){
  .loop-badge svg{animation:spin 3.5s linear infinite;}
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================== TICKER ===================== */
.ticker-wrap{background:var(--void-soft);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);overflow:hidden;padding:15px 0;margin-top:60px;}
.ticker-track{display:flex;width:max-content;}
.ticker-chip{
  display:flex;align-items:center;gap:8px;padding:0 24px;white-space:nowrap;
  font-family:var(--font-tech);font-size:13px;color:var(--loop-pink);border-right:1px solid var(--line-dark);
}
@media (prefers-reduced-motion: no-preference){
  .ticker-track{animation:ticker 30s linear infinite;}
  .ticker-wrap:hover .ticker-track{animation-play-state:paused;}
}
@media (prefers-reduced-motion: reduce){.ticker-wrap{overflow-x:auto;}}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* trust strip */
.trust-strip{background:var(--void);}
.trust-inner{max-width:var(--maxw);margin:0 auto;padding:28px 28px 68px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;}
.trust-tag{display:flex;align-items:baseline;gap:9px;font-family:var(--font-tech);color:#B8AFC4;border-left:2px solid var(--loop-pink);padding-left:12px;}
.trust-tag strong{font-size:21px;color:var(--cloud);font-weight:500;}
.trust-tag span{font-size:12.5px;}

/* ===================== HOW IT WORKS ===================== */
.how{background:var(--cloud);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.steps{grid-template-columns:1fr;}}
.step{background:var(--cloud-deep);border-radius:var(--radius-md);padding:26px 22px;}
.step .num{font-family:var(--font-tech);font-size:12.5px;color:var(--loop-pink);font-weight:500;letter-spacing:0.04em;}
.step h3{font-size:19px;margin-top:12px;}
.step .desc{margin-top:10px;font-size:14.5px;color:var(--ink-soft);}

/* ===================== WHY (value pillars) ===================== */
.why{background:var(--void);color:var(--cloud);}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:860px){.pillars{grid-template-columns:1fr;}}
.pillar{border-top:2px solid var(--line-dark);padding-top:22px;}
.pillar svg{width:26px;height:26px;color:var(--electric-cyan);}
.pillar h3{font-size:20px;margin-top:16px;}
.pillar p{margin-top:10px;font-size:15px;color:#B8AFC4;max-width:34ch;}

/* ===================== CATEGORIES ===================== */
.categories{background:var(--cloud);}
.chip-field{display:flex;flex-wrap:wrap;gap:12px;}
.chip{
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink);
  border:1.5px solid var(--line-light);padding:11px 19px;border-radius:999px;
  display:flex;align-items:center;gap:8px;transition:border-color .15s ease;background:#fff;
}
.chip:hover{border-color:var(--loop-pink);}
.chip.more{color:var(--loop-pink);border-color:var(--loop-pink);background:transparent;}

/* ===================== TRENDING SHOWCASE ===================== */
.trending{background:var(--void);color:var(--cloud);}
.trend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:940px){.trend-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.trend-grid{grid-template-columns:1fr;}}
.trend-grid .content-card{width:100%;}

/* ===================== TESTIMONIALS ===================== */
.stories{background:var(--cloud);}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;}}
.story-card{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-md);padding:28px 26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;height:100%;}
.story-card .quote{font-size:16px;line-height:1.55;flex-grow:1;}
.story-card .who{margin-top:20px;font-family:var(--font-tech);font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line-light);padding-top:14px;}

/* ===================== FAQ ===================== */
.faq{background:var(--cloud-deep);}
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line-light);}
.faq-item:first-child{border-top:1px solid var(--line-light);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-align:left;}
.faq-q .txt{font-size:17px;font-weight:700;font-family:var(--font-body);}
.faq-q svg{width:18px;height:18px;color:var(--loop-pink);flex-shrink:0;transition:transform .3s ease;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
.faq-item.open .faq-panel{grid-template-rows:1fr;}
.faq-panel-inner{overflow:hidden;}
.faq-panel .ans{padding:0 4px 24px;max-width:66ch;color:var(--ink-soft);font-size:15px;}

/* ===================== FINAL CTA ===================== */
.final-cta{background:var(--void);color:var(--cloud);text-align:center;padding:104px 0;position:relative;overflow:hidden;}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(255,62,130,0.18), transparent 60%);}
.final-cta-inner{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:0 28px;}
.final-cta h2{font-size:clamp(28px,4.4vw,44px);}
.final-cta .lede{margin-top:16px;font-size:17px;color:#B8AFC4;}
.final-cta .btn{margin-top:30px;}

/* ===================== FOOTER ===================== */
.footer{background:var(--void-soft);color:#B8AFC4;padding:64px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--line-dark);}
@media (max-width:760px){.footer-top{grid-template-columns:1fr 1fr;}}
.footer .logo{color:var(--cloud);}
.footer-about p{margin-top:14px;font-size:14px;max-width:32ch;color:#8B839A;}
.footer h5{font-family:var(--font-tech);font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--loop-orange);margin-bottom:16px;}
.footer ul{display:flex;flex-direction:column;gap:11px;}
.footer .col-links a{font-size:14px;color:#B8AFC4;transition:color .15s ease;}
.footer .col-links a:hover{color:var(--cloud);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-family:var(--font-tech);font-size:12px;color:#71697F;}

/* ===================== SCROLL REVEAL (motion-safe only) ===================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .card-cluster .content-card{opacity:0;animation:cardIn .7s cubic-bezier(.2,1,.4,1) forwards;}
  .cc-back{animation-delay:.1s;--rot:-7deg;}
  .cc-front{animation-delay:.3s;--rot:5deg;}
  @keyframes cardIn{from{opacity:0;transform:translateY(24px) rotate(var(--rot,0deg));}to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));}}
}