/* LoopCall site-wide look (2026-11 redesign) + light/dark theme.
   Loaded on every page right after style.css, so it only restyles —
   no page content lives here. The theme is set on <html data-theme>
   by the early script in header.php (dark unless the visitor picked light). */

:root {
  --bg:        #05060f;
  --surface:   #0a0c1c;
  --card:      rgba(255,255,255,.04);
  --card-hi:   rgba(255,255,255,.07);
  --border:    rgba(255,255,255,.09);
  --border-hi: rgba(255,255,255,.16);
  --primary:   #2ec5ff;
  --pri-dark:  #0ea5e9;
  --pri-glow:  rgba(124,92,255,.42);
  --accent:    #2ec5ff;
  --acc-glow:  rgba(46,197,255,.32);
  --c1:        #7c5cff;
  --c2:        #2ec5ff;
  --gradient:  linear-gradient(120deg, #7c5cff 0%, #2ec5ff 55%, #2ee59d 100%);
  --warm:      linear-gradient(120deg, #ff4d8d, #ffb547);
  --text:      #f5f7ff;
  --sub:       #a3abc8;
  --dim:       #8b93b4; /* ≥4.5:1 on --bg for small text */
  --glass:     rgba(20,22,45,.55);
  --shadow:    0 30px 80px rgba(0,0,0,.55);
  --aurora-op: .5;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg:        #f6f7fc;
  --surface:   #eceffa;
  --card:      #ffffff;
  --card-hi:   #f3f5fc;
  --border:    rgba(20,24,60,.10);
  --border-hi: rgba(20,24,60,.18);
  --primary:   #0a7cc4;
  --pri-dark:  #075f97;
  --pri-glow:  rgba(124,92,255,.25);
  --accent:    #0a7cc4;
  --acc-glow:  rgba(10,124,196,.2);
  --text:      #0c0f2a;
  --sub:       #4a5275;
  --dim:       #5c6486;
  --glass:     rgba(255,255,255,.72);
  --shadow:    0 24px 60px rgba(60,60,140,.16);
  --aurora-op: .22;
  color-scheme: light;
}

body { background: var(--bg); color: var(--text); overflow-x: hidden; transition: background-color .3s, color .3s; }
/* anchor jumps (#features, #how, #download) land below the sticky header */
[id] { scroll-margin-top: 90px; }
h1, h2, h3, h4 { font-family: Sora, Inter, system-ui, sans-serif; letter-spacing: -.03em; }

/* Eyebrow labels */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  -webkit-text-fill-color: currentColor; background: none; color: var(--sub);
  font-size: .78rem; letter-spacing: .12em;
}
.section-label::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gradient); }

/* ── Header: floating glass pill ───────────────────────────────── */
.site-header { position: sticky; top: 12px; margin-top: 12px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header .nav-inner {
  height: 60px; padding: 0 10px 0 18px; border-radius: 999px; gap: 12px;
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.nav-logo img { height: 34px; }
.nav-cta { border-radius: 999px; box-shadow: 0 10px 30px var(--pri-glow); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-mobile { background: var(--bg); }
.nav-mobile .nav-mobile-cta { border-radius: 999px; }
@media (max-width: 560px) { .site-header { top: 8px; margin-top: 8px; } }

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border-hi); color: var(--text);
  transition: transform .2s, background .2s;
}
.theme-toggle:hover { transform: rotate(-15deg); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: block; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }

/* ── Page backdrop (inner pages): soft aurora behind the top ───── */
body:not(.home) main { position: relative; isolation: isolate; }
body:not(.home) main::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -160px; left: 50%; transform: translateX(-50%);
  width: min(1200px, 120vw); height: 620px; opacity: var(--aurora-op);
  background:
    radial-gradient(closest-side at 25% 45%, rgba(124,92,255,.7), transparent),
    radial-gradient(closest-side at 75% 35%, rgba(46,197,255,.6), transparent),
    radial-gradient(closest-side at 50% 85%, rgba(46,229,157,.35), transparent);
  filter: blur(60px);
}
.hero-orb-1 { background: radial-gradient(circle, rgba(124,92,255,.35) 0%, transparent 68%); }
.hero-orb-2 { background: radial-gradient(circle, rgba(46,197,255,.28) 0%, transparent 68%); }
html[data-theme="light"] .hero-orb { opacity: .35; }

/* Gradient text accents */
.about-hero h1 em, .about-cta h2 em, .download-cta h2 em { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Shared cards ──────────────────────────────────────────────── */
.pricing-card, .about-mv-card, .about-tech-card, .about-value-card, .about-stat-card,
.privacy-card, .contact-box, .off-card, .step3-card, .feature-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 26px;
  backdrop-filter: none;
}
html[data-theme="light"] .pricing-card, html[data-theme="light"] .about-mv-card, html[data-theme="light"] .about-tech-card,
html[data-theme="light"] .about-value-card, html[data-theme="light"] .about-stat-card, html[data-theme="light"] .contact-box,
html[data-theme="light"] .off-card, html[data-theme="light"] details.faq-item, html[data-theme="light"] .compare-wrap { box-shadow: 0 10px 30px rgba(60,60,140,.07); }
.about-value-card:hover, .about-tech-card:hover, .pricing-card:hover { border-color: rgba(124,92,255,.45); }
.about-value-icon, .privacy-card-icon {
  background: var(--gradient); border: 0; color: #fff; border-radius: 15px;
  box-shadow: 0 10px 26px rgba(124,92,255,.3);
}
.about-tech-featured, .about-mv-mission {
  background: radial-gradient(90% 70% at 100% 0%, rgba(124,92,255,.16), transparent 60%), var(--card);
  border-color: rgba(124,92,255,.35);
}
.about-mv-vision {
  background: radial-gradient(90% 70% at 0% 0%, rgba(46,197,255,.14), transparent 60%), var(--card);
  border-color: rgba(46,197,255,.3);
}
.about-stat-num, .phb-stat-num { background: var(--warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: Sora, Inter, sans-serif; }
.about-mv-label { color: var(--accent); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn { border-radius: 999px; }
.btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 30px var(--pri-glow); }
.btn-primary:hover { color: #fff; box-shadow: 0 14px 40px var(--pri-glow); }
.btn-outline { border-color: var(--border-hi); }
.btn-outline:hover { border-color: var(--c1); }
.store-btn { background: var(--text); color: var(--bg); border: 0; border-radius: 16px; box-shadow: var(--shadow); }
.store-btn:hover { background: var(--text); color: var(--bg); }
.store-btn-text small { color: var(--bg); opacity: .65; }

/* ── Pricing page ──────────────────────────────────────────────── */
.pricing-hero-banner {
  background: radial-gradient(70% 90% at 0% 0%, rgba(124,92,255,.18), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(46,197,255,.14), transparent 60%), var(--card);
  border: 1px solid var(--border); border-radius: 32px;
}
.pricing-card.featured {
  border: 1.5px solid rgba(124,92,255,.6);
  background: radial-gradient(100% 60% at 50% 0%, rgba(124,92,255,.18), transparent 70%), var(--card);
  box-shadow: 0 20px 60px rgba(124,92,255,.22); animation: none;
}
.featured-badge { background: var(--gradient); }
.price { font-family: Sora, Inter, sans-serif; letter-spacing: -.03em; }
.pricing-callout { border-radius: 18px; }

/* ── Comparison tables ─────────────────────────────────────────── */
.compare-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 26px; overflow-x: auto; max-width: 860px; margin: 0 auto; }
.compare-table { max-width: none; }
.compare-table thead tr { border-bottom: 1px solid var(--border); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-col-us { background: linear-gradient(180deg, rgba(124,92,255,.14), rgba(46,197,255,.08)); border-left: 0; border-right: 0; }
.compare-table thead .compare-col-us { background: linear-gradient(180deg, rgba(124,92,255,.22), rgba(124,92,255,.14)); border-radius: 0; font-family: Sora, Inter, sans-serif; }
.chk { color: var(--green); }
.crs { color: var(--dim); }

/* ── FAQ ───────────────────────────────────────────────────────── */
details.faq-item, details.faq-item:first-child {
  border: 1px solid var(--border); border-radius: 18px; background: var(--card);
  margin-bottom: 10px; padding: 0 20px; transition: border-color .2s;
}
details.faq-item[open] { border-color: rgba(124,92,255,.45); }
summary.faq-q { font-family: Sora, Inter, sans-serif; letter-spacing: -.01em; }
summary.faq-q:hover { color: var(--accent); }

/* ── Legal pages ───────────────────────────────────────────────── */
.legal-header h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.legal-content h2 { font-size: 1.35rem; }
.contact-box { border-radius: 20px; }

/* ── Turn-off page ─────────────────────────────────────────────── */
.off-step span { background: var(--gradient); color: #fff; }
.off-code { color: var(--text); background: rgba(124,92,255,.1); border-color: rgba(124,92,255,.35); }
.off-btn { border-radius: 999px; }

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer { background: var(--surface); }
.site-footer::before { opacity: .6; }

/* Old front-page radar classes, should any page still use them */
.radar-legend li, .tname { color: var(--text); }

/* Screen-reader-only text */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Footer column titles are h2 (heading order) styled like the old h4 */
.footer-col .footer-h { font-family:Inter, system-ui, sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }

/* ── Guide pages (page.php: AI call screening, robocall blocker, phone scams) ── */
.guide { padding:40px 0 110px; }
.guide .container { max-width:860px; }
.guide-hero { text-align:center; padding:50px 0 34px; }
.guide-hero h1 { font-size:clamp(34px,6vw,58px); line-height:1.04; margin:14px 0 18px; }
.guide-hero h1 em { font-style:normal; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.guide-hero p { color:var(--sub); font-size:1.12rem; line-height:1.65; max-width:640px; margin:0 auto; }
.guide-body { color:var(--sub); font-size:1.02rem; line-height:1.75; }
.guide-body h2 { color:var(--text); font-size:clamp(24px,3.4vw,32px); line-height:1.15; margin:56px 0 14px; }
.guide-body h3 { color:var(--text); font-size:1.15rem; margin:0 0 6px; }
.guide-body p { margin:0 0 16px; }
.guide-body strong { color:var(--text); }
.guide-body a { color:var(--accent); }
.guide-body ul { padding-left:22px; margin:0 0 18px; }
.guide-body li { margin-bottom:8px; }
.g-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:20px 0 10px; }
.g-card { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:22px; }
.g-card p { margin:0; font-size:.95rem; }
.g-card .tip { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:.92rem; }
.g-card .tip b { color:var(--text); }
.g-steps { list-style:none; counter-reset:g; padding:0 !important; margin:20px 0; display:grid; gap:12px; }
.g-steps li { counter-increment:g; position:relative; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:18px 20px 18px 66px; margin:0; }
.g-steps li::before { content:counter(g); position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:50%; background:var(--gradient); color:#fff; font-weight:800; display:grid; place-items:center; font-family:Sora, Inter, sans-serif; }
.g-steps li b { color:var(--text); display:block; margin-bottom:2px; }
.g-note { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--c2); border-radius:16px; padding:16px 18px; margin:20px 0; }
.guide-body details { border:1px solid var(--border); border-radius:18px; background:var(--card); margin-bottom:10px; padding:0 20px; }
.guide-body summary { cursor:pointer; padding:18px 0; font-weight:600; color:var(--text); font-family:Sora, Inter, sans-serif; list-style:none; }
.guide-body summary::-webkit-details-marker { display:none; }
.guide-body details p { padding-bottom:6px; }
.guide-cta { margin-top:60px; text-align:center; border-radius:32px; padding:46px 24px; color:#fff; background:radial-gradient(60% 80% at 20% 0%, rgba(124,92,255,.55), transparent 60%), radial-gradient(60% 80% at 90% 100%, rgba(46,197,255,.45), transparent 60%), #0d0b24; }
.guide-cta h2 { font-size:clamp(26px,4vw,38px); margin:0 0 10px; color:#fff; }
.guide-cta p { color:rgba(255,255,255,.78); margin:0 0 24px; }
.guide-cta .store-btns { justify-content:center; }
.guide-cta .store-btn { background:#fff; color:#0c0f2a; }
.guide-cta .store-btn-text small { color:#0c0f2a; }
.guide-more { margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.guide-more a { padding:9px 16px; border-radius:999px; border:1px solid var(--border-hi); color:var(--text); font-size:.92rem; font-weight:600; }
.guide-more a:hover { border-color:var(--c1); text-decoration:none; }