/* ---------- Base & Variables ---------- */
:root {
  --navbar-bg: #262F40; /* navbar bg */
  --hero-bg:   #1E283A; /* home hero bg */
}

body {
  background-color: #0f1522; /* subtle dark base */
  margin: 0;
}

/* ---------- Navbar Theme ---------- */
.hp-navbar { background: var(--navbar-bg) !important; }
.hp-navbar .hp-brand-name { color:#fff; font-weight:600; letter-spacing:.2px; }
.hp-navbar .navbar-brand img { display:block; }
.hp-navbar .nav-link { color:rgba(255,255,255,.85) !important; }
.hp-navbar .nav-link:hover, .hp-navbar .nav-link:focus { color:#fff !important; }
.btn-appstore { color:#111; background:#fff; border:1px solid rgba(255,255,255,.2); border-radius:.75rem; box-shadow:0 4px 14px rgba(0,0,0,.12); text-decoration:none; }
.btn-appstore:hover { filter:brightness(.97); }
.hp-navbar .navbar-toggler { border-color:rgba(255,255,255,.25); }
.hp-navbar .navbar-toggler:focus { box-shadow:0 0 0 .15rem rgba(255,255,255,.25); }

/* ---------- Home Hero Section ---------- */
.hero-home { background:var(--hero-bg); color:#fff; padding:clamp(64px,10vw,112px) 0; }
.hero-logo { width:112px; height:112px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.hero-title { font-size:clamp(28px,4.5vw,48px); font-weight:800; line-height:1.1; margin:.5rem 0 .5rem; }

/* Gradient text + animation */
.gradient-text { background:linear-gradient(90deg,#35458A,#594BAA); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-fill-color:transparent; }
.gradient-animated { background-size:200% 100%; animation:hpGradientMove 8s linear infinite; }
@keyframes hpGradientMove { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.hero-lead { max-width:820px; font-size:clamp(16px,2.2vw,18px); color:#d5d9e3; }

/* Big App Store button in hero */
.btn-appstore-hero {
  display:inline-flex; align-items:center; gap:10px;
  background:#000; color:#fff; padding:12px 18px; border-radius:14px;
  text-decoration:none; border:1px solid rgba(255,255,255,.15);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.btn-appstore-hero:hover, .btn-appstore-hero:focus {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25);
  filter:brightness(1.03); color:#fff;
}
.btn-appstore-hero:active { transform:translateY(0) scale(.99); }

/* Availability text */
.hero-availability { color:#c9cfdb; font-size:.95rem; }

/* Apple icon */
.apple-icon { width:20px; height:20px; display:inline-block; flex-shrink:0; vertical-align:middle; fill:currentColor; }

/* ---------- Experience Section ---------- */
.section-experience { background:#262F40; color:#fff; padding:clamp(56px,8vw,96px) 0; }
.section-title { font-size:clamp(22px,3.2vw,36px); font-weight:800; letter-spacing:.2px; margin-bottom:.5rem; }
.section-lead { color:#cfd6e6; max-width:820px; margin:0 auto 2rem; font-size:clamp(15px,2vw,18px); }
.shots-row { --gap:18px; row-gap:var(--gap); }
.shot-wrap { padding:3px; border-radius:16px; background:linear-gradient(135deg,#35458A,#594BAA); transition:transform .18s, box-shadow .18s; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.shot-wrap:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.25); }
.gradient-1{background:linear-gradient(135deg,#00C6FF,#0072FF)} .gradient-2{background:linear-gradient(135deg,#00C6FF,#0072FF)} .gradient-3{background:linear-gradient(135deg,#00C6FF,#0072FF)} .gradient-4{background:linear-gradient(135deg,#00C6FF,#0072FF)}
.shot-img { display:block; width:100%; height:auto; border-radius:14px; background:#0f1625; }

/* ---------- Powerful Features Section ---------- */
.section-features { background:#151E31; color:#fff; padding:clamp(56px,8vw,96px) 0; }
.features-title { font-size:clamp(22px,3.2vw,34px); font-weight:800; letter-spacing:.2px; margin-bottom:.5rem; }
.features-lead { color:#cfd6e6; max-width:820px; margin:0 auto 2rem; font-size:clamp(15px,2vw,18px); }
.features-row { row-gap:22px; }

.feature-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:24px; height:100%; text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.feature-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.35); border-color:rgba(255,255,255,.16); }

.icon-badge {
  width:56px; height:56px; border-radius:14px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.25);
}
.icon-badge i { font-size:24px; }

/* Icon accent colors */
.icon-blue{color:#4AA3FF} .icon-purple{color:#B574FF} .icon-green{color:#43D187} .icon-yellow{color:#FFD04D}
.feature-card h3 { font-size:1.1rem; font-weight:700; margin:0 0 6px; }
.feature-card p  { color:#cbd3df; margin:0; font-size:.95rem; }

/* ---------- CTA Section (smaller text) ---------- */
.section-cta {
  background: linear-gradient(180deg, #1E283A 0%, #1B2537 100%);
  color:#fff; text-align:center;
  padding: clamp(36px, 8vw, 72px) 0 24px;
}
.section-cta .cta-title {
  font-size: clamp(24px, 4vw, 44px);  /* smaller */
  font-weight: 800; letter-spacing: .2px;
  margin: 0 0 16px;
}
.btn-cta-grad {
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 22px; border-radius: 14px; font-weight: 700; font-size: 1rem;
  color:#fff; text-decoration:none;
  background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
  box-shadow: 0 8px 18px rgba(79,70,229,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-cta-grad i { font-size:18px; }
.btn-cta-grad:hover, .btn-cta-grad:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(79,70,229,.55);
  filter: brightness(1.03);
}

/* ---------- Footer (compact & clean) ---------- */
.site-footer {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 0 18px;
}
.footer-text {
  margin: 0;
  font-size: .875rem;
  color: #9aa4b2;
}
.footer-links { display:flex; align-items:center; gap:12px; }
.footer-links a { color:#9aa4b2; text-decoration:none; font-size:.875rem; }
.footer-links a:hover { color:#ffffff; }
.footer-sep { color:#9aa4b2; opacity:.35; }

/* keep legacy anchors tidy */
footer a { text-decoration: none; }
footer a:hover { text-decoration: none; }


/* ===== Support page ===== */
.support-hero {
  background:#1E283A;
  color:#fff;
  text-align:center;
  padding: clamp(56px, 10vw, 100px) 0;
}
.support-hero h1 {
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 10px;
}
.support-hero p {
  color:#cfd6e6;
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(15px, 2vw, 18px);
}

.section-support {
  background:#262F40;
  color:#fff;
  padding: clamp(40px, 6vw, 72px) 0;
}

.support-cards { row-gap:22px; }
.support-cards .card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px;
  color: #fff;
  text-align: center;
  height: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.support-cards .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.16);
}
.support-cards > [class*="col-"] { display: flex; }              /* stretch columns */
.support-cards .card { display: flex; flex-direction: column; }  /* vertical stack */
.support-cards .card .btn { margin-top: auto; }  
.support-icon {
  width: 56px; height: 56px; border-radius: 14px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.25);
}
.support-icon i { font-size: 24px; }
.icon-wa   { color:#25D366; }   /* WhatsApp */
.icon-mail { color:#9ec5ff; }
.icon-faq  { color:#FFD04D; }
.icon-bug  { color:#FF7E5F; }

.btn-whatsapp {
  background:#25D366; color:#112; border:none;
  border-radius: 12px; padding: 10px 16px; font-weight: 700;
}
.btn-whatsapp:hover { filter: brightness(1.05); color:#112; }

.btn-soft {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff; border-radius: 12px; padding: 10px 16px; font-weight: 700;
}
.btn-soft:hover { background: rgba(255,255,255,.12); }

.support-faq .accordion-item {
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; overflow: hidden;
}
.support-faq .accordion-button {
  background: rgba(255,255,255,.04);
  color:#fff;
}
.support-faq .accordion-button:not(.collapsed) {
  background: rgba(255,255,255,.06);
  color:#fff;
}
.support-faq .accordion-body { color:#cbd3df; }

/* ===== Privacy / Legal page ===== */
.legal-hero{
  background:linear-gradient(180deg,#1E283A 0%,#1B2537 100%);
  color:#fff;text-align:center;
  padding:clamp(56px,8vw,96px) 0;
}
.legal-icon{
  width:64px;height:64px;border-radius:16px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.25);
}
.legal-icon i{font-size:28px;color:#7D87FF;}
.legal-title{font-weight:800;font-size:clamp(26px,4.5vw,44px);margin:0;}
.legal-title.gradient-legal{
  background:linear-gradient(90deg,#6A7BEA,#8B5CF6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.legal-meta{color:#A8B1C7;margin-top:6px}

.legal-card{
  max-width:900px;margin:24px auto 0;text-align:left;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:clamp(18px,3vw,28px);color:#E8EEF9;
  box-shadow:0 8px 30px rgba(0,0,0,.20);
}
.legal-card p,.legal-card li{color:#CFD6E6}
.legal-callout{
  background:rgba(56,86,165,.25);
  border:1px solid rgba(101,131,205,.4);
  border-radius:12px;padding:16px;margin:18px 0 6px;
}
.legal-card h3{color:#C9D3FF;font-weight:700;font-size:1.15rem;margin-top:1.5rem}
.legal-card hr{border-color:rgba(255,255,255,.1)}
.legal-list{padding-left:1.1rem}
.legal-list li{margin:.4rem 0}
/* ===== Terms (extra bits reusing legal styles) ===== */
.legal-hero.terms { /* lets you vary the icon/color later if you want */
  background: linear-gradient(180deg, #1E283A 0%, #1B2537 100%);
}

.legal-card a { color:#9fb3ff; text-decoration: underline; }
.legal-card a:hover { color:#ffffff; }

.legal-subtitle { color:#A8B1C7; margin-top:6px; }

.legal-ol { padding-left: 1.15rem; }
.legal-ol > li { margin: .45rem 0; }

.legal-subhead { font-weight:700; margin:.75rem 0 .25rem; color:#C9D3FF; }


/* ===== Soft reveal animation (Home) ===== */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity: 1;
  transform: none;
}
/* subtle scale for cards/shots */
.reveal-zoom{ transform: translateY(16px) scale(.98); }
.reveal.in-view.reveal-zoom{ transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* --- Fallback: if JS is off or fails, show content --- */
.no-js .reveal { opacity: 1 !important; transform: none !important; }


/* ===== Slide-up reveal (robust) ===== */
@keyframes hpFadeUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Use together with .reveal */
.reveal.fade-up { opacity: 0; transform: translate3d(0, 28px, 0); }
.reveal.fade-up.in-view {
  animation: hpFadeUp .7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Reduced motion: show immediately */
@media (prefers-reduced-motion: reduce){
  .reveal.fade-up { opacity:1 !important; transform:none !important; animation:none !important; }
}
/* Slide-up: keep items hidden until *actually* visible */
.reveal.fade-up { opacity:0; transform:translate3d(0,28px,0); }
.reveal.fade-up.in-view {
  animation: hpFadeUp .7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--reveal-delay, 0s);
}

/* If JS is missing, just show the content (accessibility) */
.no-js .reveal { opacity:1 !important; transform:none !important; animation:none !important; }

/* ===== Typography (Google Fonts) ===== */
:root{
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Base */
body{
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings / key titles */
h1,h2,h3,h4,h5,h6,
.hero-title,
.section-title,
.features-title,
.cta-title{
  font-family: var(--font-display);
  font-weight: 800; /* matches your existing look */
  letter-spacing: .2px;
}

/* Navbar brand + nav links */
.hp-navbar .hp-brand-name{ font-family: var(--font-display); font-weight:700; }
.hp-navbar .nav-link{ font-family: var(--font-body); font-weight:600; }

/* Buttons & badges */
.btn-appstore-hero span,
.btn-cta-grad,
.icon-badge,
.btn-soft,
.btn-whatsapp{
  font-family: var(--font-display);
}

/* Paragraphs in hero/sections for crisp legibility */
.hero-lead,
.section-lead,
.feature-card p{
  font-family: var(--font-body);
  font-weight: 500;
}

/* ===== Google Fonts (vars) ===== */
:root{
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Base text */
body{
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- HERO ----- */
/* App name: "Hashtag Provider" */
.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .2px;
}
/* Lead paragraph under title */
.hero-lead{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .1px;
}
/* App Store button text */
.btn-appstore-hero span{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .2px;
}
/* "Available for iPhone and iPad" */
.hero-availability{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .15px;
}

/* ----- EXPERIENCE SECTION ----- */
/* "Experience the App" */
.section-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .2px;
}
/* "See how Hashtag Provider..." */
.section-lead{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .1px;
}

/* ----- FEATURES SECTION ----- */
/* "Powerful Features" */
.features-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .2px;
}
/* "Everything you need..." */
.features-lead{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .1px;
}
/* Card titles (e.g., AI-Powered Generation) */
.feature-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .15px;
}
/* Card body copy */
.feature-card p{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .1px;
}

/* ----- CTA ----- */
/* "Ready to Boost Your Content?" */
.cta-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .2px;
}
/* CTA button text */
.btn-cta-grad{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .2px;
}