/* front-page.css — all section styles for the MyThrivelytics homepage */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--sky-dark);color:white;font-family:var(--font-ui);font-size:15px;font-weight:700;padding:14px 28px;border-radius:12px;text-decoration:none;transition:all .25s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--sky);transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,117,173,.4)}
.btn-primary svg{flex-shrink:0}
.section-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sky-dark);margin-bottom:16px}
.section-eyebrow::before{content:'';width:24px;height:2px;background:currentColor;flex-shrink:0}
.gap-section{background:var(--slate-dark);position:relative;overflow:hidden;text-align:center;padding:100px 5%}
.gap-section-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(111,168,220,.08),transparent 65%)}
.gap-section-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(111,168,220,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(111,168,220,.03) 1px,transparent 1px);background-size:60px 60px}
.gap-inner{position:relative;z-index:2;max-width:800px;margin:0 auto}
.gap-quote{font-family:var(--font-display);font-size:clamp(36px,5vw,60px);color:var(--white);letter-spacing:-2px;line-height:1.1;margin-bottom:28px}
.gap-quote em{font-style:italic;color:var(--sky-light)}
.gap-body{font-size:17px;color:rgba(245,247,249,.8);font-weight:300;line-height:1.8;margin-bottom:56px;max-width:640px;margin-left:auto;margin-right:auto}
.gap-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.gap-pillar{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:28px 22px;transition:background .3s,border-color .3s}
.gap-pillar:hover{background:rgba(255,255,255,.05);border-color:rgba(111,168,220,.15)}
.gap-pillar-icon{font-size:28px;margin-bottom:16px}
.gap-pillar-title{font-family:var(--font-ui);font-size:15px;font-weight:700;color:rgba(245,247,249,.85);margin-bottom:8px}
.gap-pillar-body{font-size:15px;color:rgba(245,247,249,.75);font-weight:300;line-height:1.7}
.metrics-section{background:var(--slate-dark);position:relative;overflow:hidden;padding:100px 5%}
.metrics-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 10% 50%,rgba(111,168,220,.1),transparent 60%),radial-gradient(ellipse 50% 60% at 90% 30%,rgba(143,175,154,.08),transparent 55%)}
.metrics-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(111,168,220,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(111,168,220,.03) 1px,transparent 1px);background-size:60px 60px}
.metrics-inner{position:relative;z-index:2}
.metrics-header{max-width:600px;margin-bottom:56px}
.metrics-header .section-title{color:var(--white)}
.metrics-header .section-sub{font-size:17px;color:rgba(245,247,249,.8);font-weight:300;line-height:1.7;margin-top:12px}
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.metric-card{background:rgba(111,168,220,.06);border:1px solid rgba(111,168,220,.12);border-radius:20px;padding:24px;position:relative;overflow:hidden}
.metric-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--sage))}
.metric-label{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(245,247,249,.75);margin-bottom:8px}
.metric-value{font-family:var(--font-display);font-size:36px;color:var(--white);letter-spacing:-1px;line-height:1;margin-bottom:12px}
.metric-bar-track{height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-bottom:8px;overflow:hidden}
.metric-bar-fill{height:100%;background:linear-gradient(90deg,var(--sky),var(--sage));border-radius:2px;width:50%;transition:width .6s ease}
.metric-sub{font-size:15px;color:rgba(245,247,249,.75);font-weight:300;margin-bottom:12px}
.metric-link{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--sky-light);text-decoration:none;transition:color .2s;display:block;padding:12px 0}
.metric-link:hover{color:var(--white)}
.metrics-feature-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.metrics-feature-card{background:rgba(111,168,220,.06);border:1px solid rgba(111,168,220,.12);border-radius:20px;padding:32px 28px}
.metrics-feature-title{font-family:var(--font-display);font-size:22px;color:var(--white);letter-spacing:-.5px;margin-bottom:12px}
.metrics-feature-p{font-size:15px;color:rgba(245,247,249,.8);line-height:1.75;font-weight:300}
.metrics-tech-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(111,168,220,.12);border:1px solid rgba(111,168,220,.2);border-radius:100px;padding:6px 14px;margin-top:16px}
.metrics-tech-dot{width:6px;height:6px;border-radius:50%;background:var(--sky);animation:pulse 2s infinite}
.metrics-tech-text{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--sky-light)}
.brand-banner{background:var(--sky-dark);overflow:hidden;padding:14px 0}
.brand-ticker{display:flex;gap:0;animation:ticker 28s linear infinite;width:max-content}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.brand-ticker-item{display:flex;align-items:center;gap:10px;padding:0 36px;font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.95);white-space:nowrap}
.brand-ticker-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.4)}
.about-section{background:var(--cloud);padding:100px 5%}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:center;max-width:1200px;margin:0 auto}
.about-visual{position:relative;overflow:visible}
.founder-card{border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--slate-dark);position:relative;cursor:pointer}
.founder-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(41,51,64,.95) 0%,transparent 100%);padding:32px 24px 24px}
.founder-name{font-family:var(--font-display);font-size:24px;color:white;letter-spacing:-.5px;margin-bottom:4px}
.founder-title{font-size:15px;color:rgba(245,247,249,.8);font-weight:300;margin-bottom:12px}
.founder-certs{display:flex;gap:6px;flex-wrap:wrap}
.founder-cert{font-family:var(--font-ui);font-size:15px;font-weight:600;background:rgba(111,168,220,.2);color:rgba(245,247,249,.9);padding:3px 10px;border-radius:100px}
.about-metric{position:absolute;background:white;border-radius:16px;padding:16px 20px;box-shadow:0 12px 40px rgba(62,74,89,.12);border:1px solid rgba(111,168,220,.08)}
.about-metric-1{bottom:-16px;right:-20px}
.about-metric-2{top:24px;right:-24px}
.about-metric-num{font-family:var(--font-display);font-size:28px;color:var(--slate-dark);letter-spacing:-1px;line-height:1.1}
.about-metric-num span{font-size:22px}
.about-metric-label{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--stone);margin-top:4px}
.about-story{font-size:16px;color:var(--stone);font-weight:300;line-height:1.8;margin-bottom:20px}
.about-story strong{color:var(--slate-dark);font-weight:500}
.about-creds{background:white;border-radius:16px;padding:20px 22px;border:1px solid rgba(111,168,220,.1);margin-bottom:20px}
.about-creds-label{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sky-dark);margin-bottom:12px}
.about-creds-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.about-cred-item{font-size:15px;color:var(--stone);display:flex;align-items:center;gap:8px}
.about-cred-item::before{content:'\2713';color:var(--sky-dark);font-weight:700;font-size:15px;flex-shrink:0}
.about-values{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.about-value{background:white;border-radius:16px;padding:20px;border:1px solid rgba(111,168,220,.08)}
.about-value-icon{font-size:22px;margin-bottom:8px}
.about-value h4{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--slate-dark);margin-bottom:5px}
.about-value p{font-size:15px;color:var(--stone);font-weight:300;line-height:1.7}
.location-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(111,168,220,.06);border:1px solid rgba(111,168,220,.15);border-radius:100px;padding:10px 18px}
.location-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--sky-dark);animation:pulse 2s infinite}
.location-badge-text{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.3px;color:var(--sky-dark)}
.reviews-section{background:var(--white);padding:100px 5%}
.reviews-header{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px;flex-wrap:wrap;max-width:1200px;margin-left:auto;margin-right:auto}
.reviews-aggregate{display:flex;align-items:center;gap:16px;background:var(--cloud);border:1px solid rgba(111,168,220,.1);border-radius:20px;padding:20px 24px}
.reviews-score{font-family:var(--font-display);font-size:52px;color:var(--slate-dark);letter-spacing:-2px;line-height:1}
.reviews-stars{display:flex;gap:2px;color:#f0c14b;font-size:18px;margin-bottom:4px}
.reviews-count{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--stone);margin-bottom:2px}
.reviews-source{font-size:15px;color:var(--sky-dark);font-weight:600;text-decoration:none}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px;max-width:1200px;margin-left:auto;margin-right:auto}
.review-card{background:var(--cloud);border:1px solid rgba(111,168,220,.1);border-radius:20px;padding:26px;transition:transform .3s,box-shadow .3s}
.review-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(62,74,89,.08)}
.review-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.review-meta{display:flex;align-items:center;gap:12px}
.review-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--sage));display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:16px;font-weight:700;color:white;flex-shrink:0}
.review-name{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--slate-dark)}
.review-time{font-size:15px;color:var(--stone);margin-top:2px}
.review-text{font-size:15px;color:var(--stone);font-weight:300;line-height:1.8;font-style:italic;margin-bottom:16px}
.review-source{display:flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--stone)}
.reviews-cta{text-align:center;padding-top:8px}
.reviews-cta a{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--sky-dark);text-decoration:none;border-bottom:1px solid rgba(77,135,191,.3);padding:10px 0 2px;display:inline-block;transition:border-color .2s}
.reviews-cta a:hover{border-color:var(--sky-dark)}
.tools-section{background:var(--slate-dark);position:relative;overflow:hidden;padding:100px 5%}
.tools-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 90% 50%,rgba(111,168,220,.1),transparent 60%)}
.tools-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(111,168,220,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(111,168,220,.03) 1px,transparent 1px);background-size:60px 60px}
.tools-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.tools-header{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.tools-tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tool-tier{border-radius:24px;padding:32px;border:1px solid rgba(255,255,255,.07)}
.tool-tier-free{background:rgba(255,255,255,.04)}
.tool-tier-paid{background:rgba(111,168,220,.06);border-color:rgba(111,168,220,.15)}
.tool-tier-badge{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:4px 12px;margin-bottom:12px}
.free-badge{background:rgba(143,175,154,.15)}
.paid-badge{background:rgba(111,168,220,.15)}
.tool-tier-badge-text{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.free-badge .tool-tier-badge-text{color:var(--sage-light)}
.paid-badge .tool-tier-badge-text{color:var(--sky-light)}
.tool-tier-title{font-family:var(--font-display);font-size:26px;color:var(--white);letter-spacing:-.5px;margin-bottom:6px}
.tool-tier-price{font-size:15px;color:rgba(245,247,249,.75);font-weight:300;margin-bottom:26px;display:block}
.tool-tier-paid .tool-tier-price{color:var(--sky-light);font-weight:600}
.tool-features{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.tool-feature{display:flex;align-items:flex-start;gap:14px}
.tool-feature-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.tool-feature-title{font-family:var(--font-ui);font-size:15px;font-weight:700;color:rgba(245,247,249,.85);margin-bottom:4px}
.tool-feature-body{font-size:15px;color:rgba(245,247,249,.75);font-weight:300;line-height:1.65}
.tool-cta-btn{display:block;text-align:center;font-family:var(--font-ui);font-size:15px;font-weight:700;padding:14px 20px;border-radius:12px;text-decoration:none;transition:all .25s}
.free-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(245,247,249,.8)}
.free-btn:hover{background:rgba(255,255,255,.1);color:white}
.paid-btn{background:var(--sky-dark);color:white;border:1px solid transparent;box-shadow:0 8px 24px rgba(59,117,173,.4)}
.paid-btn:hover{background:var(--sky);transform:translateY(-2px)}
.faq-section{background:var(--cloud);padding:100px 5%}
.faq-section-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.8fr;gap:80px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid rgba(111,168,220,.1)}
.faq-item-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;background:none;border:none;cursor:pointer;font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--slate-dark);text-align:left;gap:16px;transition:color .2s}
.faq-item-q:hover{color:var(--sky-dark)}
.faq-plus{font-size:20px;font-weight:300;color:var(--sky-dark);flex-shrink:0;transition:transform .3s}
.faq-item.open .faq-plus{transform:rotate(45deg)}
.faq-item-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-item-a{max-height:400px}
.faq-item-a p{font-size:15px;color:var(--stone);font-weight:300;line-height:1.85;padding-bottom:20px}
.faq-item-a p a{color:var(--sky-dark);text-decoration:none;font-weight:600;padding:4px 0;display:inline-block}
.faq-item-a p a:hover{text-decoration:underline}
.faq-category{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sky-dark);padding:24px 0 8px;opacity:.6}
.faq-cta-card{background:white;border:1px solid rgba(111,168,220,.12);border-radius:20px;padding:28px;margin-top:32px;text-align:center}
.faq-cta-card-title{font-family:var(--font-display);font-size:20px;color:var(--slate-dark);letter-spacing:-.5px;margin-bottom:8px}
.faq-cta-card-body{font-size:15px;color:var(--stone);font-weight:300;line-height:1.7;margin-bottom:20px}
.hero-card{background:rgba(255,255,255,.05);border:1px solid rgba(111,168,220,.18);border-radius:28px;padding:28px;width:100%;max-width:380px;backdrop-filter:blur(12px);position:relative;z-index:1}
.hero-card-glow{position:absolute;width:360px;height:360px;background:radial-gradient(circle,rgba(111,168,220,.2),transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.hero-badge-float{position:absolute;background:white;border-radius:14px;padding:10px 14px;box-shadow:0 8px 32px rgba(41,51,64,.25);z-index:2}
.book-tab{background:rgba(255,255,255,.03);border:1px solid rgba(111,168,220,.12);border-radius:16px;padding:20px 18px;cursor:pointer;transition:all .2s;text-align:center;position:relative}
.book-tab--active{border-color:rgba(59,117,173,.5);background:rgba(59,117,173,.08)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:960px){.hero-two-col{grid-template-columns:1fr !important}.hero-right-col{display:none !important}}
@media(max-width:1000px){.about-grid,.faq-section-inner{grid-template-columns:1fr}.gap-pillars,.metrics-row,.reviews-grid,.tools-tiers{grid-template-columns:1fr 1fr}.metrics-feature-row{grid-template-columns:1fr}.about-metric-2{display:none}}
@media(max-width:640px){.gap-pillars,.metrics-row,.about-values,.about-creds-grid,.reviews-grid,.tools-tiers{grid-template-columns:1fr}}

/* ── Mobile font sizes ────────────────────────────── */
@media(max-width:768px){
  body{font-size:16px}
  .gap-body{font-size:16px}
  .gap-pillar-body{font-size:15px}
  .about-story{font-size:16px}
  .review-text{font-size:15px}
  .faq-item-a p{font-size:15px}
  .metrics-feature-p{font-size:15px}
  .about-value p{font-size:15px}
  .about-cred-item{font-size:15px}
  .tool-feature-body{font-size:15px}
}


/* ── New grid classes ────────────────────────────── */
.hiw-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-tiers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tools-free-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tools-paid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tools-member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ── Responsive: contact bar ─────────────────────── */
@media(max-width:767px){.top-banner{display:none !important}}
@media(min-width:768px) and (max-width:1060px){
  .top-banner{flex-wrap:nowrap !important;padding:5px 12px !important;justify-content:center}
  .top-banner-item{font-size:11px !important;white-space:nowrap !important}
  .top-banner-sep{font-size:9px}
}

/* ── Responsive: all homepage grids stack at 767px ─ */
@media(max-width:767px){
  .hiw-steps-grid{grid-template-columns:1fr}
  .pricing-tiers-grid{grid-template-columns:1fr}
  .tools-free-grid,.tools-paid-grid,.tools-member-grid{grid-template-columns:1fr}
  .gap-pillars{grid-template-columns:1fr 1fr}
  .metrics-row{grid-template-columns:1fr 1fr}
  .metrics-feature-row{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-values{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr}
  .tools-tiers{grid-template-columns:1fr}
  .faq-section-inner{grid-template-columns:1fr}
  .member-cta-inner{flex-direction:column}
}