/*
  New dark theme, improved accessibility, updated animations, and dual-class support
  - Introduces muted dark palette (less bright)
  - Switch default font to Google Fonts family (to be linked in HTML): 'Manrope'
  - Keeps backward compatibility by mapping old classes to new unique ones
  - Adds better focus styles and reduced motion support
*/

/* Typography: switch to Manrope (Google Fonts). Fallbacks provided until <link> is added in HTML */
:root {
  /* Base colors (muted dark theme) */
  --color-light: #e5e7eb;            /* near-white text for titles */
  --color-dark: #0b0f19;             /* page background */
  --color-title: #e8edf7;            /* headings */
  --color-text: #9aa4b2;             /* body text */

  /* Accents (muted, less saturated) */
  --color-primary: #f5c76e;          /* soft amber */
  --color-accent: #89b4fa;           /* calm blue */
  --color-blue: #7aa2f7;             /* secondary info */
  --color-green: #58d6a5;            /* success */
  --color-pink: #f2a6b3;             /* subtle pink */
  --color-warning: #ef6461;          /* alerts */

  /* Surfaces and borders */
  --surface-1: #121a2a;              /* cards / panels */
  --surface-2: #0f1627;              /* elevated surface */
  --surface-3: #0a1222;              /* header/footer */
  --color-border: rgba(132, 160, 201, 0.18);
  --color-btn: #1f2b45;              /* button base */

  /* Gradients (toned down) */
  --gradient: linear-gradient(135deg, #f0b450 0%, #f5c76e 100%);
  --gradient-accent: linear-gradient(135deg, #6b92e6 0%, #89b4fa 100%);
  --gradint-primary: linear-gradient(135deg, #1b2a4a 0%, #24365d 100%);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; }

html { color-scheme: dark; }

body {
  font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.lock { overflow: hidden; }

a { color: var(--color-accent); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--color-dark); }

a, button, input, textarea, select { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

img { display: block; max-width: 100%; width: 100%; height: auto; object-fit: cover; }

ul, ol { list-style: none; }

/* Layout helpers (old and new names mapped) */
.container, .layout-wrap { max-width: 1280px; width: 100%; padding: 0 20px; margin: 0 auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; border-radius: 12px; font-weight: 700; border: 0; }

.main__btn, .action-button {
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-btn);
  color: var(--color-light);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(137,180,250,0);
  transition: background-color .25s ease, transform .2s ease, box-shadow .3s ease;
}
.main__btn::before, .action-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 60px at var(--x, -40%) 50%, rgba(137,180,250,.18), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.main__btn:hover, .action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px rgba(137,180,250,.35);
}
.main__btn:hover::before, .action-button:hover::before { opacity: 1; }

/* Section titles */
.section__title, .block-title {
  max-width: 760px;
  font-size: 2.5rem;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--color-title);
  line-height: 1.2;
}
@media (max-width: 1200.98px) { .section__title, .block-title { font-size: 2rem; } }
@media (max-width: 768.98px) { .section__title, .block-title { font-size: 1.6rem; } }

.section__subtitle, .block-subtitle {
  color: var(--color-text);
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 48rem;
  width: 100%;
  margin: 0 auto 2.5rem;
}

/* Skip link (will be added in HTML) */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; padding: .5rem .75rem; background: var(--surface-2); color: var(--color-light); border-radius: .5rem; z-index: 10000; }

/* Header */
.header, .site-header {
  position: absolute; top: 0; left: 0; right: 0; padding: 10px 0; height: 70px; background: transparent;
}
.header__inner, .site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
}
.header__logo, .site-brand { max-width: 74px; width: 100%; display: block; }

.wrapper {
  background-image: linear-gradient(rgba(7, 12, 24, 0.78), rgba(7, 12, 24, 0.78)), url(../img/wrapper.webp);
  background-size: cover; background-repeat: no-repeat; background-position: center;
}

/* Hero / Showcase */
.hero, .showcase {
  padding: calc(5rem + 70px) 0 1rem;
  color: var(--color-light);
}
@media (max-width: 768.98px) { .hero, .showcase { padding: calc(1.875rem + 70px) 0 1.875rem; } }

.title.hero__title, .display-title.showcase__heading {
  margin-bottom: 1.6rem; text-align: center; font-size: 3.75rem; line-height: 1.05; font-weight: 800;
}
.title.hero__title span, .display-title.showcase__heading span { display: block; }
.title.hero__title span:nth-child(1), .display-title.showcase__heading span:nth-child(1) {
  background-clip: text; -webkit-background-clip: text; color: transparent; background-image: var(--gradient);
}
.title.hero__title span:nth-child(2), .display-title.showcase__heading span:nth-child(2) { color: var(--color-accent); }
@media (max-width: 992.98px) { .title.hero__title, .display-title.showcase__heading { font-size: 2.75rem; } }
@media (max-width: 768.98px) { .title.hero__title, .display-title.showcase__heading { font-size: 2rem; margin-bottom: 1rem; } }

.hero__list, .showcase__highlights { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 0 auto 1.5rem; }
@media (max-width: 768.98px) { .hero__list, .showcase__highlights { flex-direction: column; gap: .5rem; } }
.hero__item, .showcase__point { display: flex; align-items: center; gap: .5rem; color: var(--color-text); }
.hero__item svg, .showcase__point svg { color: var(--color-primary); width: 1.25rem; height: 1.25rem; }
.hero__item p, .showcase__point p { font-size: 1rem; }
@media (max-width: 480.98px) { .hero__item p, .showcase__point p { font-size: .875rem; } }

.hero__intro, .showcase__intro {
  padding: 1.5rem; background: var(--surface-3); text-align: center; border-radius: 1rem; max-width: 900px; width: 100%; margin: 0 auto; backdrop-filter: blur(4px);
}
.hero__intro-title, .showcase__intro-title {
  font-size: 1.625rem; margin-bottom: .75rem; color: var(--color-primary); display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 800;
}
.hero__intro-subtitle, .showcase__intro-subtitle { font-size: 1.25rem; margin-bottom: .5rem; color: var(--color-accent); font-weight: 700; }
.hero__intro-text, .showcase__intro-text { color: var(--color-text); }

/* providers / Providers */
.providers, .providers { padding: 2.5rem 0; }

.company, .providers__card, .deck-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 1.25rem; color: var(--color-light);
  padding: 1.25rem; position: relative; background: linear-gradient(135deg, #111827, #0f172a); border: 1px solid rgba(132,160,201,0.18);
}
@media (max-width: 992.98px) { .company, .providers__card, .deck-card { flex-direction: column; align-items: flex-start; max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem; } }

.company__label, .deck-card__label {
  position: absolute; color: #111827; font-weight: 800; font-size: .875rem; top: -13px; left: 20px; border-radius: 100px; padding: .25rem .75rem; background: var(--gradient);
}
.company__heading, .deck-card__heading { display: flex; align-items: center; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.company__heading img, .deck-card__heading img { max-width: 140px; }
.company__heading-rating, .deck-card__rating { display: flex; align-items: center; }
.company__heading-rating svg, .deck-card__rating svg { width: 1rem; height: 1rem; color: var(--color-primary); }
.company__heading-score, .deck-card__score { font-weight: 800; color: var(--color-green); margin-left: .75rem; }
.company__heading-vote, .deck-card__votes { color: var(--color-text); font-size: .875rem; line-height: 1.25rem; }

.company__bonus, .deck-card__bonus {
  background: linear-gradient(135deg, #0f1a2e, #142139);
  border-radius: .75rem; padding: .75rem; border: 1px solid var(--color-border); margin-bottom: .75rem;
}
.company__bonus-title, .deck-card__bonus-title { font-size: .875rem; line-height: 1.25rem; font-weight: 800; margin-bottom: .25rem; color: var(--color-blue); }
.company__bonus-text, .deck-card__bonus-text { font-weight: 800; color: var(--color-green); }

.company__list, .deck-card__list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; color: var(--color-text); padding-left: 20px; }
.company__item, .deck-card__item { list-style-type: disc; font-size: .95rem; }
.company__item::marker, .deck-card__item::marker { color: var(--color-primary); }

.company__btn, .deck-card__btn { display: inline-flex; align-items: center; gap: .5rem; text-align: center; flex-shrink: 0; border-radius: .75rem; background: var(--gradient); color: #1a1f2b; padding: .75rem 1rem; }
@media (max-width: 768.98px) { .company__btn, .deck-card__btn { width: 100%; justify-content: center; text-align: center; } }

/* Trust / Credibility */
.choose-use, .credibility { padding: 2.5rem 0; background-color: var(--surface-3); color: var(--color-text); }
.choose-use__title, .credibility__title { font-size: 1.75rem; line-height: 2.25rem; font-weight: 800; text-align: center; margin-bottom: 2rem; color: var(--color-title); }
.choose-use__list, .credibility__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; }
@media (max-width: 768.98px) { .choose-use__list, .credibility__list { grid-template-columns: 1fr; } }
.choose-use__item, .credibility__item { border-radius: .75rem; background: linear-gradient(135deg, #0f1a2e, #142139); border: 1px solid var(--color-border); text-align: center; padding: 1.25rem; }
.choose-use__media, .credibility__media {
  display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 100%; background: rgba(255,255,255,.06); margin: 0 auto 1rem;
}
.choose-use__media svg, .credibility__media svg { width: 2rem; height: 2rem; color: var(--color-primary); }
.choose-use__item-title, .credibility__item-title { color: var(--color-title); margin-bottom: .25rem; font-size: 1.1rem; line-height: 1.65; font-weight: 700; }
.choose-use__percent, .credibility__text { color: var(--color-text); font-size: .95rem; }

/* How / Methodology */
.how, .methodology { padding: 2.5rem 0; color: var(--color-light); background: #0c1425; }
.how__inner, .methodology__inner { padding: 2rem; border-radius: 1rem; border: 1px solid var(--color-border); background: linear-gradient(135deg, #111827, #0f172a); margin-bottom: 2.5rem; }
.how__title, .methodology__title { margin-bottom: 1.75rem; font-size: 1.75rem; }
.how__list, .methodology__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 768.98px) { .how__list, .methodology__list { grid-template-columns: 1fr; } }
.how__item, .methodology__item { background: linear-gradient(135deg, #0f1a2e, #142139); border: 1px solid var(--color-border); border-radius: .75rem; padding: 1.25rem; display: flex; gap: 1rem; }
.how__item svg, .methodology__item svg { flex-shrink: 0; }
.how__item:nth-child(1) svg, .how__item:nth-child(1) h3,
.methodology__item:nth-child(1) svg, .methodology__item:nth-child(1) h3 { color: var(--color-accent); }
.how__item:nth-child(2) svg, .how__item:nth-child(2) h3,
.methodology__item:nth-child(2) svg, .methodology__item:nth-child(2) h3 { color: var(--color-primary); }
.how__item:nth-child(3) svg, .how__item:nth-child(3) h3,
.methodology__item:nth-child(3) svg, .methodology__item:nth-child(3) h3 { color: var(--color-blue); }
.how__item:nth-child(4) svg, .how__item:nth-child(4) h3,
.methodology__item:nth-child(4) svg, .methodology__item:nth-child(4) h3 { color: var(--color-green); }
.how__item-title, .methodology__item-title { font-size: 1.15rem; line-height: 1.6; margin-bottom: .75rem; }
.how__item-text, .methodology__item-text { color: var(--color-text); line-height: 1.65; }

/* statistic / Metrics */
.statistic, .metrics { padding: 2.5rem 0; color: var(--color-light); background: #0c1425; }
.statistic__title, .metrics__title { margin-bottom: 1.75rem; font-size: 1.75rem; }
.statistic__list, .metrics__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 56rem; margin: 0 auto; }
.statistic__item, .metrics__item { padding: 1.25rem; border-radius: .75rem; background: linear-gradient(135deg, #0f1a2e, #142139); border: 1px solid var(--color-border); text-align: center; }
.statistic__item:nth-child(1) .statistic__num, .metrics__item:nth-child(1) .metrics__num { color: var(--color-blue); }
.statistic__item:nth-child(2) .statistic__num, .metrics__item:nth-child(2) .metrics__num { color: var(--color-primary); }
.statistic__item:nth-child(3) .statistic__num, .metrics__item:nth-child(3) .metrics__num { color: var(--color-green); }
.statistic__num, .metrics__num { font-size: 2rem; line-height: 2.25rem; margin-bottom: .5rem; font-weight: 800; }
.statistic__text, .metrics__text { font-size: .95rem; line-height: 1.35rem; color: var(--color-text); }
@media (max-width: 992.98px) { .statistic__list { grid-template-columns: 1fr; } }

/* guide / Lexicon */
.guide, .lexicon { padding: 2.5rem 0; color: var(--color-light); background-color: var(--surface-3); }
.guide__title, .lexicon__title { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: 1.75rem; margin-bottom: 1.75rem; text-align: center; }
.guide__title svg, .lexicon__title svg { color: var(--color-accent); }
.guide__list, .lexicon__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 56rem; margin: 0 auto; }
.guide__item, .lexicon__item { background: linear-gradient(135deg, #0f1a2e, #142139); border: 1px solid var(--color-border); border-radius: .75rem; padding: 1.25rem; }
.guide__item-title, .lexicon__item-title { font-size: 1.1rem; line-height: 1.65rem; margin-bottom: .5rem; font-weight: 800; color: var(--color-accent); }
.guide__text, .lexicon__text { color: var(--color-text); }
@media (max-width: 768.98px) { .guide__title svg { display: none; } .guide__list { grid-template-columns: 1fr; } }

/* Footer */
.footer, .site-footer { background: var(--surface-3); color: var(--color-text); padding: 2.5rem 0; }
.footer__list, .site-footer__nav { margin-bottom: 1.25rem; display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.footer a, .site-footer a { color: var(--color-primary); }
.footer a:hover, .site-footer a:hover { color: var(--color-blue); }
.footer__help, .site-footer__badges { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.footer__help-link, .site-footer__badge { padding: .625rem; max-width: 150px; }
.footer__help-img, .site-footer__badge-img { max-height: 50px; }
.footer__description, .site-footer__description { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer__description p, .site-footer__description p { font-size: .95rem; line-height: 1.45rem; }
@media (max-width: 1200.98px) { .footer__description, .site-footer__description { grid-template-columns: 1fr; gap: 1rem; } }
.footer__copy, .site-footer__copy { margin-top: 1rem; padding-top: 2rem; text-align: center; border-top: 1px solid #2a3b52; }

/* Cookies banner (keep ids for JS) */
.cookies-banner, .consent-banner {
  position: fixed; bottom: 0; width: 100%; background: #0a1222; color: var(--color-light); padding: 1rem; z-index: 1000; display: none;
  justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--color-border);
}
.cookies-banner__btns, .consent-banner__actions { display: flex; justify-content: center; align-items: center; max-width: 240px; width: 100%; gap: .75rem; }
.cookies-banner button, .consent-banner button { margin: 0 5px; padding: .5rem 1rem; border: none; cursor: pointer; border-radius: .5rem; max-width: 120px; width: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
#accept-cookies { background-color: var(--color-green); color: #0b0f19; transition: transform .15s ease, box-shadow .3s ease; }
#accept-cookies:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(88,214,165,0.45); }
#reject-cookies { background-color: var(--color-warning); color: #0b0f19; transition: transform .15s ease, box-shadow .3s ease; }
#reject-cookies:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(239,100,97,0.45); }
@media (max-width: 768.98px) { .cookies-banner__btns { flex-direction: column; } }

/* Legal pages */
.legal-page, .legal-section { padding: calc(70px + 3rem) 0 3rem; color: var(--color-text); background: #0a1222; }
.legal-page h1, .legal-section h1 { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: var(--gradient); }
.legal-page h3, .legal-section h3 { color: var(--color-light); }
.legal-page p, .legal-section p { margin-bottom: 1rem; }
.legal-page p.service-page__subtitle, .legal-section p.service-page__subtitle { margin-bottom: 2.5rem; }
.legal-page ul, .legal-section ul { margin-bottom: 1rem; padding-left: 20px; }
.legal-page li, .legal-section li { list-style-type: disc; }
.legal-page li::marker, .legal-section li::marker { color: var(--color-blue); }
.legal-page a, .legal-section a { color: var(--color-primary); }
.legal-page a:hover, .legal-section a:hover { color: var(--color-blue); }
.legal-page__title, .legal-section__title { margin-bottom: 1.5rem; font-size: 2.5rem; line-height: 1.3; text-align: center; color: var(--color-title); }
.legal-page__subtitle, .legal-section__subtitle { text-align: center; }
.legal-page__content, .legal-section__content { padding: 1.5rem; border-radius: .75rem; background: linear-gradient(135deg, #0f1a2e, #142139); border: 1px solid var(--color-border); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
