/* ============================================
   CORÉAL MEDIA — Construction Audit LP
   Premium Conversion Design System v1
   ============================================ */

:root{
  --bg:        #FAFAF7;
  --bg-alt:    #F5F1EA;
  --bg-dark:   #050000;
  --bg-card:   #FFFFFF;
  --text:      #0F0F0F;
  --text-muted:#6B6B6B;
  --text-light:#FAFAF7;
  /* Cinematic red — deep ember on black */
  --cta:       #8B0000;
  --cta-hover: #B30000;
  --cta-glow:  #FF1A0F;
  --cta-deep:  #1A0000;
  --gold:      #D4A574;
  --success:   #10B981;
  --border:    #E5E2DA;
  --border-dark:#2A0000;
  --maxw:      1180px;
  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 1px 3px rgba(15,15,15,.06), 0 8px 24px rgba(15,15,15,.04);
  /* Signature gradient — use sparingly for dramatic moments */
  --grad-ember: radial-gradient(circle at 68% 65%, #FF1A0F 0%, #8B0000 30%, #1A0000 60%, #050000 100%);
  --grad-ember-soft: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,26,15,.55) 0%, rgba(139,0,0,.35) 30%, rgba(26,0,0,.85) 65%, #050000 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size:17px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.center{text-align:center}

/* ---------- BRAND WORDMARK (topbar text logo) ---------- */
.brand-wordmark{
  font-weight:900;letter-spacing:-.02em;font-size:18px;
  color:var(--text);display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;
}

/* ---------- TOP BAR ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px}
.topbar-left{display:flex;align-items:center}
.topbar-right{display:flex;align-items:center;gap:18px}
.topbar-phone{
  font-size:14px;font-weight:600;color:var(--text);
  letter-spacing:-.01em;
}
.topbar-phone:hover{color:#8B0000}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announcement{
  background:#0a0000;color:var(--text-light);
  padding:11px 0;font-size:13px;font-weight:500;letter-spacing:.01em;
  border-bottom:1px solid #1A0000;
  position:relative;overflow:hidden;
}
.announcement::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 200% at 50% 50%, rgba(255,26,15,.08) 0%, transparent 70%);
  pointer-events:none;
}
.ann-inner{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;position:relative;z-index:1}
.announcement span{opacity:.92}

/* ---------- HERO ---------- */
.hero{padding:80px 0 88px;text-align:center;position:relative;overflow:hidden;background:#050000;color:var(--text-light)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 320px at 50% 38%, rgba(255,80,60,.32) 0%, transparent 70%),
    radial-gradient(ellipse 110% 75% at 50% 105%, rgba(255,26,15,.65) 0%, rgba(139,0,0,.42) 28%, rgba(26,0,0,.92) 62%, #050000 100%);
  z-index:0;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 500px at 12% 8%, rgba(212,165,116,.06), transparent 55%),
    radial-gradient(900px 400px at 90% 5%, rgba(255,107,92,.05), transparent 55%);
  z-index:0;pointer-events:none;
  mix-blend-mode:screen;
}
.hero > .container{position:relative;z-index:1}
/* film grain overlay for cinematic texture */
.hero::after{box-shadow:inset 0 -160px 200px -40px rgba(0,0,0,.5)}
.hero .hero-h1{color:var(--text-light)}
.hero .hero-sub{color:#d8d4cb}
.hero .hero-sub strong{color:#fff}
.scarcity{
  display:inline-block;
  background:rgba(255,26,15,.12);color:#FFB3AD;
  border:1px solid rgba(255,26,15,.4);border-radius:999px;
  padding:9px 20px;font-size:13px;font-weight:600;margin-bottom:28px;
  letter-spacing:.01em;
  backdrop-filter:blur(8px);
  animation:pulse 2.4s ease-in-out infinite;
  box-shadow:0 0 24px rgba(255,26,15,.15);
}
.scarcity::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF1A0F;margin-right:9px;vertical-align:middle;box-shadow:0 0 8px #FF1A0F;animation:dotPulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-h1{
  font-size:clamp(38px,5.4vw,68px);font-weight:800;line-height:1.04;
  letter-spacing:-.035em;margin:0 auto 22px;max-width:920px;
}
.hero-h1 em{font-style:italic;color:#FF6B5C;font-weight:800;background:linear-gradient(180deg,#FF6B5C 0%,#FF1A0F 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(255,26,15,.4)}
.hero-sub{
  font-size:clamp(17px,1.4vw,20px);color:var(--text-muted);
  max-width:720px;margin:0 auto 36px;line-height:1.55;
}
.hero-sub strong{color:var(--text);font-weight:600}

.hero-video{
  max-width:380px;margin:0 auto 40px;
  aspect-ratio:9/16;
  background:var(--bg-dark);
  border-radius:var(--radius);
  position:relative;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(15,15,15,.35);
  border:1px solid rgba(0,0,0,.06);
}

.hero-cta-block{margin-bottom:0}
.micro-trust{margin-top:16px;font-size:13px;color:var(--text-muted);max-width:560px;margin-left:auto;margin-right:auto;line-height:1.5}
.video-embed{
  width:100%;height:100%;
}
.video-embed iframe{
  width:100%;height:100%;border:none;
  display:block;
}
.video-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:#fff;gap:14px;
  background:linear-gradient(135deg,#1a1a1a,#0a0a0a);
}
.play-btn{
  width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.96);color:var(--cta);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;padding-left:6px;cursor:pointer;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.play-btn:hover{transform:scale(1.06)}
.video-caption{font-size:14px;opacity:.85;font-weight:500}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;font-weight:600;letter-spacing:-.005em;
  border-radius:var(--radius-sm);
  text-align:center;cursor:pointer;border:none;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
  font-family:inherit;position:relative;overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 100% 80% at 50% 110%, rgba(255,26,15,.45) 0%, rgba(139,0,0,.7) 40%, #1A0000 80%);
  opacity:0;transition:opacity .35s ease;
}
.btn:hover::before{opacity:1}
.btn-cta-sm{
  background:#CC1A00;
  color:#fff;padding:11px 20px;font-size:14px;
  box-shadow:0 4px 18px -2px rgba(180,0,0,.65), 0 0 0 1px rgba(255,40,15,.3);
}
.btn-cta-sm:hover{
  background:#E82000;
  box-shadow:0 8px 28px -4px rgba(220,30,0,.75), 0 0 0 1px rgba(255,60,15,.4);
}
.btn-cta-lg{
  background:linear-gradient(135deg,#0D0000 0%,#8B0000 45%,#CC1A00 80%,#FF2A0F 100%);
  background-size:200% 200%;background-position:0% 50%;
  color:#fff;padding:19px 38px;font-size:17px;font-weight:700;
  box-shadow:0 8px 28px -4px rgba(180,0,0,.65), 0 0 0 1px rgba(255,26,15,.25);
}
.btn-cta-xl{
  background:linear-gradient(135deg,#0D0000 0%,#8B0000 45%,#CC1A00 80%,#FF2A0F 100%);
  background-size:200% 200%;background-position:0% 50%;
  color:#fff;padding:23px 50px;font-size:19px;font-weight:700;letter-spacing:.005em;
  box-shadow:0 12px 40px -6px rgba(180,0,0,.75), 0 0 0 1px rgba(255,26,15,.3);
}
.btn-cta-lg:hover,.btn-cta-xl:hover{
  transform:translateY(-2px);background-position:100% 50%;
  box-shadow:0 20px 50px -6px rgba(255,26,15,.7), 0 0 0 1px rgba(255,80,40,.5);
}
.btn-outline{
  background:transparent;color:var(--text);
  border:2px solid var(--text);padding:14px 28px;font-size:15px;
}
.btn-outline::before{display:none}
.btn-outline:hover{background:var(--text);color:#fff}
.btn-tier{
  background:#0F0F0F;color:#fff;
  padding:15px 24px;font-size:15px;width:100%;margin-top:auto;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,26,15,.0);transition:all .25s ease;
}
.btn-tier:hover{background:#1A0000;box-shadow:inset 0 0 0 1px rgba(255,26,15,.3), 0 8px 24px -4px rgba(139,0,0,.4)}
.btn-tier-pop{
  background:linear-gradient(135deg,#0D0000 0%,#8B0000 45%,#CC1A00 80%,#FF2A0F 100%);
  box-shadow:0 8px 24px -4px rgba(180,0,0,.6), 0 0 0 1px rgba(255,26,15,.25);
}
.btn-tier-pop:hover{background:linear-gradient(135deg,#1A0000 0%,#AA0000 45%,#DD2000 80%,#FF3A0F 100%);box-shadow:0 14px 36px -4px rgba(255,26,15,.65)}

/* ---------- TRUSTED BY ---------- */
.trusted{padding:48px 0;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trusted-label{
  text-align:center;font-size:12px;letter-spacing:.2em;
  color:var(--text-muted);font-weight:700;margin-bottom:28px;
}
.trusted-logos{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:24px 52px;
}
.trusted-logos span{
  font-weight:800;font-size:13px;letter-spacing:.16em;
  color:var(--text-muted);opacity:.65;
  transition:opacity .2s,color .2s;
  white-space:nowrap;
}
.trusted-logos span:hover{opacity:1;color:var(--text)}

/* ---------- STATS BAR ---------- */
.stats{
  background:#050000;color:var(--text-light);padding:96px 0;
  position:relative;overflow:hidden;
}
.stats::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 240px at 50% 50%, rgba(255,80,60,.18) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 105%, rgba(255,26,15,.45) 0%, rgba(139,0,0,.22) 35%, transparent 75%);
  pointer-events:none;
}
.stats::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.6);
  pointer-events:none;
}
.stats > .container{position:relative;z-index:1}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat{padding:8px 0}
.stat-num{
  font-size:clamp(46px,5vw,72px);font-weight:900;
  background:linear-gradient(180deg,#FF6B5C 0%,#FF1A0F 50%,#8B0000 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  letter-spacing:-.04em;line-height:1;margin-bottom:14px;
  text-shadow:0 0 60px rgba(255,26,15,.35);
}
.stat-lbl{font-size:15px;color:#d8d4cb;line-height:1.5;font-weight:500}
.stat-lbl .was{color:#888;font-size:12px;display:block;margin-top:4px}

/* ---------- SECTION SHARED ---------- */
section{padding:96px 0}
.section-h2{
  font-size:clamp(30px,3.5vw,46px);font-weight:800;letter-spacing:-.025em;
  text-align:center;line-height:1.1;margin-bottom:14px;
}
.section-sub{
  text-align:center;color:var(--text-muted);font-size:17px;
  max-width:680px;margin:0 auto 56px;line-height:1.55;
}

/* ---------- PAIN ---------- */
.pain{background:var(--bg-alt)}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:48px}
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(15,15,15,.08), 0 14px 40px rgba(15,15,15,.06)}
.pain-card .pain-icon{font-size:28px;margin-bottom:14px}
.pain-card h3{font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.pain-card p{font-size:15px;color:var(--text-muted);line-height:1.55}

/* ---------- HOW IT WORKS ---------- */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step{position:relative;padding-top:14px}
.step-num{
  font-size:14px;font-weight:800;letter-spacing:.06em;
  color:#8B0000;margin-bottom:10px;
}
.step h3{font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.step p{font-size:15px;color:var(--text-muted);line-height:1.55}

/* ---------- OFFER LADDER ---------- */
.offer{background:var(--bg)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:34px 28px;
  display:flex;flex-direction:column;
  position:relative;box-shadow:var(--shadow);
}
.tier-popular{
  border-color:rgba(139,0,0,.5);
  box-shadow:0 12px 40px rgba(139,0,0,.18), var(--shadow);
  transform:translateY(-6px);
  background:linear-gradient(180deg,#fff 0%,#FFFAF8 100%);
}
.tier-tag{
  font-size:11px;font-weight:800;letter-spacing:.18em;
  color:var(--text-muted);margin-bottom:10px;
}
.tier-popular .tier-tag{color:#8B0000}
.popular-badge{
  position:absolute;top:-12px;right:24px;
  background:#1A0000;color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  padding:6px 14px;border-radius:999px;
  box-shadow:0 4px 12px -2px rgba(139,0,0,.5), inset 0 0 0 1px rgba(255,26,15,.25);
}
.popular-dark{background:var(--text)}
.tier-fit{font-size:14px;color:var(--text-muted);margin-bottom:22px;line-height:1.5}
.tier-list{list-style:none;padding:0;margin:0 0 24px;flex-grow:1}
.tier-list li{font-size:14px;padding:7px 0;line-height:1.5;color:var(--text)}
.tier-out{font-size:14px;color:var(--text);margin-bottom:22px;padding-top:18px;border-top:1px solid var(--border);line-height:1.5}

/* ---------- CASES ---------- */
.cases{
  background:#050000;
  position:relative;overflow:hidden;
}
.cases::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(139,0,0,.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(255,26,15,.25) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(180,0,0,.15) 0%, transparent 70%);
  pointer-events:none;z-index:0;
}
.cases > .container{position:relative;z-index:1}
.cases .section-h2{color:#FAFAF7}
.cases .section-sub{color:#c8c4bb}
.cases .case-mini{color:#a09c98}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:36px}
.case{
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius);padding:28px;
  box-shadow:0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  display:flex;flex-direction:column;gap:16px;
  backdrop-filter:blur(4px);
}
.case-head{display:flex;flex-direction:column;gap:4px}
.case-head strong{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#0F0F0F}
.case-head span{font-size:13px;color:#6B6B6B}
.case-quote{font-size:15px;line-height:1.55;color:#1a1a1a;font-style:italic}
.case-stats{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#0F0F0F;padding:14px 0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1)}
.case-attr{font-size:13px;color:#6B6B6B;font-weight:500}
.case-mini{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:#a09c98;margin-top:14px}

/* ---------- INDUSTRY ---------- */
.industry{background:var(--bg)}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ind-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;text-align:center;
  box-shadow:var(--shadow);
}
.ind-icon{font-size:34px;margin-bottom:14px}
.ind-card h4{font-size:16px;font-weight:700;margin-bottom:6px}
.ind-card p{font-size:13px;color:var(--text-muted)}

/* ---------- FOUNDER ---------- */
.founder{background:var(--bg-alt);padding:90px 0}
.founder-inner{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center}
.founder-img img{
  width:100%;border-radius:var(--radius);
  box-shadow:0 20px 60px -10px rgba(15,15,15,.25);
  aspect-ratio:4/5;object-fit:cover;
}
.founder-eyebrow{font-size:12px;letter-spacing:.18em;color:#8B0000;font-weight:700;margin-bottom:14px}
.founder-text .section-h2{text-align:left;margin-bottom:20px}
.founder-text p{font-size:17px;color:var(--text);margin-bottom:18px;line-height:1.6}
.founder-text p em{color:#8B0000;font-style:italic;font-weight:600}
.founder-sig{font-weight:700;font-style:italic;color:var(--text)!important;margin-bottom:30px!important}

/* ---------- FAQ ---------- */
.faq{background:var(--bg)}
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
}
.faq-item summary{
  cursor:pointer;padding:22px 26px;font-weight:600;
  font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;font-weight:300;color:#8B0000;transition:transform .2s}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 26px 22px;color:var(--text-muted);font-size:15px;line-height:1.6}

/* ---------- FINAL CTA ---------- */
.final-cta{
  background:#050000;color:var(--text-light);text-align:center;padding:130px 0;
  position:relative;overflow:hidden;
}
.final-cta::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 360px at 50% 45%, rgba(255,80,60,.28) 0%, transparent 70%),
    radial-gradient(ellipse 110% 75% at 50% 105%, rgba(255,26,15,.6) 0%, rgba(139,0,0,.38) 30%, rgba(26,0,0,.92) 65%, #050000 100%);
  pointer-events:none;
}
.final-cta::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 -160px 200px -40px rgba(0,0,0,.5);
  pointer-events:none;
}
.final-cta > .container{position:relative;z-index:1}
.final-h{
  font-size:clamp(32px,4vw,56px);font-weight:800;
  letter-spacing:-.025em;line-height:1.05;
  max-width:880px;margin:0 auto 22px;color:var(--text-light);
}
.final-sub{
  font-size:18px;color:#d8d4cb;
  max-width:620px;margin:0 auto 40px;line-height:1.55;
}
.final-trust{margin-top:26px;font-size:13px;color:#a8a4a0;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}

/* ---------- FOOTER ---------- */
.footer{background:#050000;color:var(--text-light);padding:70px 0 28px;border-top:1px solid #1A0000}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--border-dark)}
.footer-brand p{font-size:14px;color:#aaa;margin-top:14px;line-height:1.55}
.footer-col h5{font-size:12px;letter-spacing:.16em;color:#aaa;font-weight:700;margin-bottom:18px}
.footer-col a{display:block;font-size:14px;color:#fff;padding:6px 0;opacity:.85;transition:opacity .2s}
.footer-col a:hover{opacity:1;color:#FF6B5C}
.footer-locations{font-size:12px;color:#888;margin-top:14px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;color:#777;flex-wrap:wrap;gap:12px}
.footer-bottom a{color:#aaa}
.footer-bottom a:hover{color:#fff}

/* ---------- MOBILE STICKY CTA ---------- */
.mobile-cta{
  display:none;
  position:fixed;bottom:14px;left:14px;right:14px;
  background:linear-gradient(135deg,#0D0000 0%,#8B0000 45%,#CC1A00 80%,#FF2A0F 100%);
  color:#fff;text-align:center;
  padding:17px;border-radius:var(--radius-sm);font-weight:700;
  box-shadow:0 12px 40px rgba(180,0,0,.7), 0 0 0 1px rgba(255,26,15,.3);
  z-index:60;
  animation:mobilePulse 2.5s ease-in-out infinite;
}
@keyframes mobilePulse{
  0%,100%{box-shadow:0 12px 40px rgba(180,0,0,.7), 0 0 0 1px rgba(255,26,15,.3)}
  50%{box-shadow:0 14px 50px rgba(255,26,15,.85), 0 0 20px rgba(255,26,15,.3)}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .stats-grid,.cards-grid,.how-grid,.tiers,.case-grid,.industry-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .founder-inner{grid-template-columns:1fr;gap:36px}
  .founder-img{max-width:380px;margin:0 auto}
  .topbar-right .topbar-phone{display:none}
  .ann-inner{gap:18px;font-size:12px}
}
@media (max-width:680px){
  body{font-size:16px}
  section{padding:64px 0}
  .hero{padding:40px 0 56px}
  .hero-video{max-width:100%;border-radius:10px}
  .play-btn{width:64px;height:64px;font-size:24px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 16px}
  .stats{padding:48px 0}
  .stat-num{font-size:40px;margin-bottom:8px}
  .cards-grid,.how-grid,.tiers,.case-grid,.industry-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .topbar-inner{padding:12px 16px}
  .btn-cta-sm{padding:9px 14px;font-size:13px}
  .btn-cta-lg,.btn-cta-xl{padding:16px 28px;font-size:16px}
  .container{padding:0 18px}
  .tier-popular{transform:none}
  .mobile-cta{display:block}
  .footer{padding-bottom:88px}
  .ann-inner{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:0 16px;gap:24px}
  .ann-inner span{flex-shrink:0;font-size:12px}
  .trusted-logos{gap:14px 24px}
  .trusted-logos span{font-size:11px;letter-spacing:.12em}
  .topbar-right{gap:10px}
  .case-quote{font-size:14px}
}

/* =============================================
   MOTION + DYNAMIC ELEMENTS (v3 - engagement)
   ============================================= */

/* Marquee — announcement bar */
.marquee{overflow:hidden;width:100%;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:inline-flex;gap:32px;align-items:center;white-space:nowrap;animation:marquee 50s linear infinite;will-change:transform;padding-left:0}
.marquee-track span{display:inline-block;font-size:13px;font-weight:500;color:#e8e4dd;letter-spacing:.01em}
.marquee-track .sep{color:#FF6B5C;opacity:.6;font-size:10px}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.marquee:hover .marquee-track{animation-play-state:paused}

/* Logo marquee — trusted by */
.logo-marquee{overflow:hidden;width:100%;position:relative;margin-top:8px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:inline-flex;gap:48px;align-items:center;animation:logoMarquee 45s linear infinite;will-change:transform;padding:8px 0}
@keyframes logoMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-card{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px;background:#fff;
  border:1px solid var(--border);border-radius:10px;
  flex-shrink:0;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -8px rgba(139,0,0,.25);
  border-color:rgba(139,0,0,.3);
}
/* Real client logo cards — hold real logo images */
.logo-card.real-logo{
  background:#fff;padding:14px 22px;
  display:inline-flex;align-items:center;justify-content:center;
  height:72px;min-width:160px;
}
.logo-card.real-logo img{
  max-height:44px;max-width:160px;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
  filter:none;
  transition:transform .25s ease;
}
.logo-card.real-logo:hover img{transform:scale(1.04)}
/* Brava is a tiny dark-bg square — give it a transparent-ish frame */
.logo-card.brava-card{background:#0a0000;padding:10px 18px}
.logo-card.brava-card img{max-height:50px;max-width:50px}

/* Legacy monogram badge (kept in case anything still references) */
.logo-mono{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#1A0000,#050000);
  color:#FF6B5C;font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.02em;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,26,15,.25), 0 2px 8px rgba(0,0,0,.1);
}

/* Reveal-on-scroll — only when JS marks body */
body.has-js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);will-change:opacity,transform}
body.has-js .reveal-in{opacity:1;transform:translateY(0)}
body.has-js .reveal .case,body.has-js .reveal .ind-card,body.has-js .reveal .card,body.has-js .reveal .tier,body.has-js .reveal .how-step,body.has-js .reveal .stat{
  opacity:0;transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1);
}
body.has-js .reveal-in .case,body.has-js .reveal-in .ind-card,body.has-js .reveal-in .card,body.has-js .reveal-in .tier,body.has-js .reveal-in .how-step,body.has-js .reveal-in .stat{
  opacity:1;transform:translateY(0);
}

/* Case study avatars + improved head */
.case-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.case-avatar{
  width:54px;height:54px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(139,0,0,.15), 0 4px 12px -2px rgba(0,0,0,.1);
}
.case-head-text{display:flex;flex-direction:column;gap:2px}
.case-head-text strong{font-size:16px;font-weight:700;color:#0F0F0F;letter-spacing:-.01em}
.case-head-text span{font-size:13px;color:var(--text-muted);font-weight:500}
.case-quote em{
  font-style:italic;font-weight:600;
  background:linear-gradient(180deg,#8B0000 0%,#FF1A0F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Industry tags */
.ind-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ind-tags span{
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;
  background:rgba(139,0,0,.06);color:#8B0000;
  border:1px solid rgba(139,0,0,.15);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ind-card:hover .ind-tags span{
  background:rgba(139,0,0,.1);
  border-color:rgba(139,0,0,.25);
}

/* Gradient CTA button (for founder section, etc.) */
.btn-gradient{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#0D0000 0%,#8B0000 45%,#CC1A00 80%,#FF2A0F 100%);
  background-size:200% 200%;
  color:#fff;font-weight:700;
  border-radius:var(--radius-sm);
  border:none;cursor:pointer;
  transition:background-position .5s ease, transform .2s ease, box-shadow .25s ease;
  box-shadow:0 10px 28px -6px rgba(139,0,0,.55), inset 0 0 0 1px rgba(255,26,15,.25);
  position:relative;overflow:hidden;isolation:isolate;
  font-family:inherit;text-decoration:none;
}
.btn-gradient::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 80% 80% at 50% 110%, rgba(255,80,60,.6) 0%, transparent 70%);
  opacity:0;transition:opacity .35s ease;
}
.btn-gradient:hover{
  background-position:100% 50%;
  transform:translateY(-1px);
  box-shadow:0 16px 44px -6px rgba(255,26,15,.6), inset 0 0 0 1px rgba(255,26,15,.45);
}
.btn-gradient:hover::before{opacity:1}
.btn-gradient .arrow{display:inline-block;transition:transform .25s ease}
.btn-gradient:hover .arrow{transform:translateX(4px)}
.btn-gradient-lg{padding:19px 36px;font-size:17px;letter-spacing:-.005em}

/* Subtle hover lift on cards */
.card,.tier,.case,.ind-card{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.card:hover,.tier:hover,.ind-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px -8px rgba(15,15,15,.12)}
.case:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 20px rgba(139,0,0,.15);border-color:rgba(139,0,0,.3)}

/* =============================================
   ICON / EMOJI MOTION
   ============================================= */

/* Pain section icons — float */
.pain-icon{
  display:inline-block;
  animation:iconFloat 3.5s ease-in-out infinite;
  transform-origin:center;
}
.pain-card:nth-child(2) .pain-icon{animation-delay:.6s}
.pain-card:nth-child(3) .pain-icon{animation-delay:1.2s}
.pain-card:nth-child(4) .pain-icon{animation-delay:1.8s}
.pain-card:nth-child(5) .pain-icon{animation-delay:2.4s}
.pain-card:nth-child(6) .pain-icon{animation-delay:3s}
@keyframes iconFloat{
  0%,100%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-6px) scale(1.08)}
  70%{transform:translateY(-3px) scale(1.04)}
}

/* Industry icons — spin-bob on hover + idle pulse */
.ind-icon{
  display:inline-block;
  animation:iconPulse 4s ease-in-out infinite;
  transition:transform .3s ease;
}
.ind-card:nth-child(2) .ind-icon{animation-delay:1s}
.ind-card:nth-child(3) .ind-icon{animation-delay:2s}
.ind-card:nth-child(4) .ind-icon{animation-delay:3s}
.ind-card:hover .ind-icon{animation:none;transform:scale(1.25) rotate(8deg)}
@keyframes iconPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* How-it-works step numbers — shimmer glow */
.step-num{
  position:relative;
  animation:stepGlow 3s ease-in-out infinite;
}
@keyframes stepGlow{
  0%,100%{opacity:1;text-shadow:none}
  50%{opacity:.7;text-shadow:0 0 12px rgba(139,0,0,.6)}
}

/* Case stats emojis — pop on card hover */
.case:hover .case-stats span{
  animation:emojiPop .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes emojiPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.2)}
  70%{transform:scale(.95)}
  100%{transform:scale(1)}
}

/* Scarcity dot — already animated; also add subtle badge shake */
.scarcity{
  animation:pulse 2.4s ease-in-out infinite, badgeShake 8s ease-in-out infinite;
}
@keyframes badgeShake{
  0%,90%,100%{transform:scale(1)}
  92%{transform:scale(1.03) rotate(-1deg)}
  94%{transform:scale(1.03) rotate(1deg)}
  96%{transform:scale(1.01) rotate(0)}
}

/* Mobile motion adjustments */
@media (max-width:680px){
  .marquee-track{animation-duration:35s}
  .logo-track{animation-duration:32s;gap:28px}
  .logo-card{padding:8px 14px;gap:10px}
  .logo-mono{width:32px;height:32px;font-size:10px}
  .logo-card.real-logo{height:60px;min-width:130px;padding:10px 16px}
  .logo-card.real-logo img{max-height:36px;max-width:120px}
  .logo-card.brava-card img{max-height:40px;max-width:40px}
  .logo-card span{font-size:13px}
  .case-avatar{width:48px;height:48px}
  .reveal{transform:translateY(20px)}
  .ind-tags span{font-size:10px;padding:4px 8px}
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-track,.logo-track{animation:none}
  .reveal,.reveal .case,.reveal .ind-card,.reveal .card,.reveal .tier,.reveal .how-step,.reveal .stat{
    opacity:1;transform:none;transition:none;
  }
  .scarcity{animation:none}
  .scarcity::before{animation:none}
  .btn-gradient{background:#1A0000}
  .btn-gradient:hover{background:#2A0000;background-position:initial}
}

/* ---------- VERIFIED REVIEWS ---------- */
.verified-reviews{padding:60px 0;background:var(--bg-off);}
.vr-header{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:40px;text-align:center;}
.upwork-badges{height:40px;width:auto;object-fit:contain;}
.vr-label{font-size:13px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.vr-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto;}
.vr-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;}
.vr-stars{color:#f5a623;font-size:18px;margin-bottom:14px;letter-spacing:2px;}
.vr-quote{font-size:15px;line-height:1.7;color:var(--text-body);font-style:italic;margin-bottom:16px;}
.vr-attr{font-size:13px;color:var(--text-muted);font-weight:600;}
@media(max-width:680px){
  .vr-grid{grid-template-columns:1fr;}
  .vr-card{padding:20px;}
}