/* =========================================================
   STYLE.CSS - Get Privacy Report visual system
   Static dark investigative brand with accessible light mode
   ========================================================= */
@import url('https://api.fontshare.com/v2/css?f[]=plus-jakarta-sans@300,400,500,600,700&f[]=switzer@300,400,500,600&display=swap');

:root,
[data-theme='dark'] {
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 4vw, 3.25rem);
  --text-3xl: clamp(2.7rem, 6vw, 5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --color-bg: #08111F;
  --color-surface: #101B2B;
  --color-surface-2: #0C1726;
  --color-surface-offset: #152337;
  --color-divider: #24334A;
  --color-border: #2B3D56;
  --color-text: #F4F7FB;
  --color-text-muted: #B6C2D2;
  --color-text-faint: #7F8EA3;
  --color-text-inverse: #07101D;
  --color-primary: #7DB7E8;
  --color-primary-hover: #A5D1F5;
  --color-primary-active: #C4E3FA;
  --color-primary-highlight: rgba(125,183,232,0.22);
  --color-primary-light: rgba(125,183,232,0.12);
  --color-accent: #53D3B0;
  --color-accent-light: rgba(83,211,176,0.14);
  --color-success: #7BE0A2;
  --color-success-light: rgba(123,224,162,0.14);
  --color-warning: #F3C969;
  --color-warning-light: rgba(243,201,105,0.14);
  --color-error: #FF8C87;
  --color-error-light: rgba(255,140,135,0.14);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-md: 0 12px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.04);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow: 680px;
  --content-default: 980px;
  --content-wide: 1200px;
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-body: 'Switzer', 'Helvetica Neue', sans-serif;
}

[data-theme='light'] {
  --color-bg: #F4F7FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #EAF0F6;
  --color-surface-offset: #DEE8F2;
  --color-divider: #D4DFEA;
  --color-border: #C4D1DF;
  --color-text: #111B2A;
  --color-text-muted: #526174;
  --color-text-faint: #7D8B9E;
  --color-text-inverse: #F7FBFF;
  --color-primary: #245B86;
  --color-primary-hover: #173F60;
  --color-primary-active: #0C2C45;
  --color-primary-highlight: rgba(36,91,134,0.18);
  --color-primary-light: rgba(36,91,134,0.09);
  --color-accent: #167C68;
  --color-accent-light: rgba(22,124,104,0.1);
  --color-success: #23734D;
  --color-success-light: rgba(35,115,77,0.1);
  --color-warning: #9A6408;
  --color-warning-light: rgba(154,100,8,0.12);
  --color-error: #B83B34;
  --color-error-light: rgba(184,59,52,0.1);
  --shadow-sm: 0 2px 10px rgba(17,27,42,0.06);
  --shadow-md: 0 14px 32px rgba(17,27,42,0.1);
  --shadow-lg: 0 24px 60px rgba(17,27,42,0.14);
}

body {
  background:
    radial-gradient(circle at 16% 0%, rgba(83,211,176,0.11), transparent 31rem),
    radial-gradient(circle at 84% 6%, rgba(125,183,232,0.14), transparent 34rem),
    var(--color-bg);
}

.container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-5), 4vw, var(--space-12)); }
.container--narrow { max-width: var(--content-narrow); }
.container--default { max-width: var(--content-default); }
.section-pad { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.section-pad--lg { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }

.nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-bg) 88%, transparent); border-bottom: 1px solid var(--color-divider); backdrop-filter: blur(18px); }
.nav--scrolled { box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-4); }
.nav__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); font-family: var(--font-display); font-weight: 800; flex-shrink: 0; }
.nav__logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; flex-shrink: 0; box-shadow: 0 12px 26px rgba(0,0,0,0.22); }
.nav__logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav__logo-name { font-size: var(--text-sm); color: var(--color-text); letter-spacing: 0; }
.nav__logo-tagline { font-size: 10px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; }
.nav__links { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.nav__link { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-sm); font-weight: 650; color: var(--color-text-muted); white-space: nowrap; }
.nav__link:hover, .nav__link--active { color: var(--color-text); background: var(--color-primary-light); }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.nav__menu-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); color: var(--color-text); border: 1px solid var(--color-border); }
.nav__menu-toggle:hover { background: var(--color-surface-offset); }
.nav__mobile { display: none; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--color-divider); }
.nav__mobile.is-open { display: flex; }
.nav__mobile-link { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-muted); font-weight: 650; }
.nav__mobile-link:hover { background: var(--color-primary-light); color: var(--color-text); }
@media (max-width: 980px) { .nav__links { display: none; } .nav__menu-toggle { display: flex; } }
@media (max-width: 640px) { .nav__actions .btn { display: none; } .nav__inner { height: 66px; } .nav__logo-tagline { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 42px; max-width: 100%; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent; box-shadow: none; transition: transform var(--transition-interactive), border-color var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive), box-shadow var(--transition-interactive); }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.btn--primary { background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); color: #06111D; border-color: transparent; box-shadow: 0 12px 28px rgba(83,211,176,0.18); }
.btn--primary:hover { color: #06111D; box-shadow: 0 16px 34px rgba(125,183,232,0.22); }
.btn--outline, .btn--ghost { background: rgba(255,255,255,0.02); color: var(--color-text); border-color: var(--color-border); }
.btn--outline:hover, .btn--ghost:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

.hero { position: relative; text-align: center; background: linear-gradient(180deg, rgba(125,183,232,0.07), transparent 70%); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 78%); pointer-events: none; }
.hero > .container { position: relative; }
.hero__eyebrow, .section-label, .page-header__eyebrow { display: inline-flex; align-items: center; color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: var(--space-4); }
.hero__headline { font-size: var(--text-3xl); max-width: 14ch; margin: 0 auto var(--space-5); color: var(--color-text); letter-spacing: 0; }
.hero__headline em { color: var(--color-primary); font-style: normal; }
.hero__sub, .section-sub, .page-header__sub, .cta-banner__sub { color: var(--color-text-muted); line-height: 1.7; }
.hero__sub { font-size: var(--text-lg); max-width: 58ch; margin: 0 auto var(--space-8); }
.hero__actions, .hero__trust-bar, .flex { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.hero__trust-bar { margin-top: var(--space-10); color: var(--color-text); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.hero__trust-item { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: rgba(255,255,255,0.035); }

.page-header { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); background: linear-gradient(155deg, var(--color-surface-2), var(--color-bg)); border-bottom: 1px solid var(--color-divider); }
.page-header__title, .section-title, .cta-banner__title { font-size: var(--text-2xl); color: var(--color-text); margin-bottom: var(--space-4); letter-spacing: 0; }
.section-header { margin-bottom: var(--space-10); }
.section-header--centered, .text-center { text-align: center; }
.section-title--centered, .section-sub--centered { text-align: center; margin-inline: auto; }
.section-sub--centered { max-width: 58ch; }
.grid-2, .grid-3, .grid-4, .two-col { display: grid; gap: var(--space-6); }
.grid-2, .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .btn { width: 100%; white-space: normal; overflow-wrap: anywhere; } }

.card, .pricing-card, .testimonial-card, .report-wrap { background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, white 8%), var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.card { position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--color-accent), transparent); opacity: 0.7; }
.card__title, .pricing-card__name, .step__title { color: var(--color-text); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.card__body, .step__body, .pricing-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }
.trust-section { background: color-mix(in srgb, var(--color-surface-2) 92%, black 8%); border-block: 1px solid var(--color-divider); }

.pricing-card { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); position: relative; }
.pricing-card--featured { background: linear-gradient(145deg, #10243A, #123F55 55%, #126655); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); color: white; box-shadow: var(--shadow-lg); }
.pricing-card--featured .pricing-card__name, .pricing-card--featured .pricing-card__amount { color: white; }
.pricing-card--featured .pricing-card__desc, .pricing-card--featured .pricing-card__period, .pricing-card--featured .pricing-card__feature, .pricing-card--featured .pricing-card__category { color: rgba(255,255,255,0.84); }
.pricing-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: #06111D; border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); font-size: var(--text-xs); font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.pricing-card__amount { font-size: var(--text-2xl); font-weight: 900; }
.pricing-card__features { list-style: none; display: grid; gap: var(--space-3); }
.pricing-card__feature::before { content: '?'; color: var(--color-accent); font-weight: 900; margin-right: var(--space-2); }

.step__number, .card__icon, .recommendation__icon { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #06111D; display: flex; align-items: center; justify-content: center; font-weight: 900; margin-bottom: var(--space-3); }
.card__icon--accent { background: linear-gradient(135deg, var(--color-accent), #A9F3D4); }
.include-list, .feature-list, .footer__links { list-style: none; display: grid; gap: var(--space-3); }
.include-list__item, .feature-list__item { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65; }

.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-item:first-child { border-top: 1px solid var(--color-divider); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) 0; font-weight: 800; color: var(--color-text); text-align: left; }
.faq-question:hover { color: var(--color-primary); }
.faq-question__icon { width: 22px; height: 22px; transition: transform var(--transition-interactive); color: var(--color-accent); }
.faq-item.open .faq-question__icon { transform: rotate(45deg); }
.faq-answer { display: none; padding-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }
.faq-item.open .faq-answer { display: block; }

.form-grid { display: grid; gap: var(--space-5); }
.form-group { display: grid; gap: var(--space-2); }
.form-label { font-size: var(--text-sm); font-weight: 800; color: var(--color-text); }
.form-label--optional::after { content: ' (optional)'; color: var(--color-text-muted); font-weight: 500; }
.form-input, .form-textarea { width: 100%; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 82%, black 18%); color: var(--color-text); }
[data-theme='light'] .form-input, [data-theme='light'] .form-textarea { background: #fff; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-hint, .disclaimer { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-checkbox-group { display: flex; gap: var(--space-3); align-items: flex-start; }
.form-checkbox { margin-top: 4px; accent-color: var(--color-accent); }
.form-checkbox-label { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }

.report-wrap { padding: 0; overflow: hidden; }
.report-header { background: linear-gradient(135deg, #0F2A42, #126655); color: white; padding: var(--space-8); }
.report-body { padding: var(--space-8); }
.report-section-title { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-3); margin-bottom: var(--space-5); }
.report-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
@media (max-width: 700px) { .report-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.report-stat, .report-finding, .recommendation, .disclaimer { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.report-stat__value { display: block; font-size: var(--text-xl); font-weight: 900; color: var(--color-primary); }
.report-finding { margin-bottom: var(--space-4); }
.report-finding__header { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.report-finding__body, .recommendation__text { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }
.badge { display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 900; border: 1px solid currentColor; }
.badge--warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge--primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge--success { background: var(--color-success-light); color: var(--color-success); }
.badge--error { background: var(--color-error-light); color: var(--color-error); }

.cta-banner { background: linear-gradient(135deg, #0E2438, #123F55 55%, #126655); color: white; padding: clamp(var(--space-12), 7vw, var(--space-20)); text-align: center; border-block: 1px solid var(--color-border); }
.cta-banner__title { color: white; }
.cta-banner__sub { color: rgba(255,255,255,0.82); max-width: 48ch; margin: 0 auto var(--space-8); }
.cta-banner .btn--primary { background: white; color: #0B1B2C; border-color: white; }

.footer { background: #060D18; border-top: 1px solid var(--color-divider); padding-block: var(--space-12) var(--space-8); }
[data-theme='light'] .footer { background: #0C1726; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-10); margin-bottom: var(--space-8); }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand-desc, .footer__link, .footer__legal { color: #B6C2D2; font-size: var(--text-sm); }
.footer__link { text-decoration: none; }
.footer__link:hover { color: var(--color-accent); }
.footer__col-title { color: #F4F7FB; font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-6); }
.footer .nav__logo-name { color: #fff; }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); color: var(--color-text-muted); border: 1px solid var(--color-border); background: rgba(255,255,255,0.03); }
.theme-toggle:hover { color: var(--color-text); background: var(--color-primary-light); }
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.gap-4 { gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }