:root {
   --red-900: #c7001f;
   --red-800: #c7001f;
   --red-700: #c7001f;
   --red-600: #c7001f;
   --gold-600: #bf9a4a;
   --gold-500: #bf9a4a;
   --gold-400: #bf9a4a;
   --gold-200: #bf9a4a;
   --white-100: #ffffff;
   --white-200: #ffffff;
   --white-300: #ffffff;
   --ink-900: #000000;
   --ink-700: #000000;
   --ink-500: #000000;
   --line-strong: #bf9a4a;
   --line-soft: #bf9a4a;
   --shadow-soft: 0 10px 24px rgba(72, 9, 13, 0.1);
   --shadow-strong: 0 16px 34px rgba(72, 9, 13, 0.18);
   --radius-lg: 20px;
   --radius-md: 14px;
   --radius-sm: 10px;
   --ease-pop: 180ms ease;
}

* {
   box-sizing: border-box;
}

html,
body {
   min-height: 100%;
}

body {
   margin: 0;
   font-family: "Trebuchet MS", "Gill Sans", "Lucida Sans", "Segoe UI", sans-serif;
   color: var(--ink-900);
   line-height: 1.5;
   background:
      radial-gradient(circle at 8% 10%, rgba(191, 154, 74, 0.2) 0%, rgba(191, 154, 74, 0) 34%),
      radial-gradient(circle at 90% -5%, rgba(199, 0, 31, 0.16) 0%, rgba(199, 0, 31, 0) 42%),
      linear-gradient(160deg, #ffffff 0%, #ffffff 100%);
   letter-spacing: 0.01em;
   overflow-x: hidden;
}

a {
   color: inherit;
}

.site-shell {
   width: min(1920px, calc(100vw - 28px));
   max-width: 1920px;
   margin: 0 auto;
   padding: 0 10px 34px;
}

.global-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   padding: 12px 14px;
   margin: 0 calc(50% - 50vw) 14px;
   padding: 12px clamp(14px, 2.8vw, 40px);
   border: 1px solid var(--line-strong);
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-radius: 0;
   background:
      linear-gradient(135deg, rgba(199, 0, 31, 0.98) 0%, rgba(0, 0, 0, 0.98) 74%),
      radial-gradient(circle at 90% 10%, rgba(191, 154, 74, 0.18) 0%, rgba(191, 154, 74, 0) 40%);
   box-shadow: var(--shadow-strong);
}

.brand-link {
   display: inline-flex;
   flex-direction: column;
   gap: 1px;
   text-decoration: none;
   color: var(--white-100);
   padding: 6px 10px;
   border-radius: var(--radius-sm);
   transition: transform var(--ease-pop), box-shadow var(--ease-pop), background-color var(--ease-pop);
}

.brand-link:hover {
   transform: translateY(-2px);
   background: rgba(255, 255, 255, 0.08);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.brand-kicker {
   font-size: 11px;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--gold-200);
   font-weight: 700;
}

.brand-title {
   font-size: 23px;
   line-height: 1;
   color: var(--white-100);
   font-weight: 800;
}

.page-links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0;
}

.page-links a,
.page-links .nav-dropdown-trigger {
   text-decoration: none;
   color: var(--white-100);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.02em;
   border: 1px solid rgba(255, 255, 255, 0.28);
   background: rgba(255, 255, 255, 0.04);
   padding: 9px 14px;
   border-radius: 999px;
   cursor: pointer;
   font-family: inherit;
   line-height: 1;
   transition:
      transform var(--ease-pop),
      box-shadow var(--ease-pop),
      border-color var(--ease-pop),
      background-color var(--ease-pop);
}

/* ── Nav Icons ── */
.page-links a[href="/"]::before { content: "\2302\00a0"; }
.page-links a[href*="ranker"]::before { content: "\2630\00a0"; }
.page-links a[href*="start-sit"]::before { content: "\26A1\00a0"; }
.page-links a[href*="my-team"]::before { content: "\2605\00a0"; }
.page-links a[href*="trade-calculator"]::before { content: "\21C4\00a0"; }
.page-links a[href*="settings"]::before { content: "\2699\00a0"; }
.page-links .nav-dropdown-trigger::before { content: "\25B2\00a0"; font-size: 10px; }
.page-links a[href*="about"]::before { content: "\2139\00a0"; }
.page-links a[href*="pricing"]::before { content: "\2606\00a0"; }

.page-links a:hover,
.page-links .nav-dropdown-trigger:hover,
.page-links .nav-dropdown:focus-within .nav-dropdown-trigger {
   transform: none;
   border-color: rgba(199, 0, 31, 0.95);
   background: #c7001f;
   color: #ffffff;
   box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

.page-links a[aria-current="page"],
.page-links .nav-dropdown:has(.nav-dropdown-menu a[aria-current="page"]) .nav-dropdown-trigger {
   background: #bf9a4a;
   border-color: rgba(255, 255, 255, 0.55);
   color: #000000;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.page-links a.active:not([aria-current="page"]) {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.28);
   color: var(--white-100);
   box-shadow: none;
}

.page-links .nav-dropdown.active:not(:has(.nav-dropdown-menu a[aria-current="page"])) .nav-dropdown-trigger {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.28);
   color: var(--white-100);
   box-shadow: none;
}

.nav-dropdown {
   position: relative;
   display: inline-flex;
}

.nav-dropdown-trigger::after {
   content: "\25BE";
   margin-left: 8px;
   font-size: 10px;
   opacity: 0.92;
}

.nav-dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 190px;
   padding: 12px 8px 8px;
   border-radius: 12px;
   border: 1px solid rgba(191, 154, 74, 0.76);
   background: linear-gradient(165deg, rgba(199, 0, 31, 0.96) 0%, rgba(0, 0, 0, 0.96) 100%);
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(6px);
   transition: opacity var(--ease-pop), transform var(--ease-pop), visibility var(--ease-pop);
   display: flex;
   flex-direction: column;
   gap: 6px;
   z-index: 70;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(0);
}

.nav-dropdown-menu a {
   border-radius: 9px;
   padding: 8px 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.04);
   transform: none;
   box-shadow: none;
   white-space: nowrap;
}

.nav-dropdown-menu a:hover {
   transform: none;
   border-color: rgba(199, 0, 31, 0.95);
   background: rgba(199, 0, 31, 0.22);
   color: #ffffff;
   box-shadow: none;
}

.nav-dropdown-menu a[aria-current="page"] {
   background: #bf9a4a;
   border-color: rgba(255, 255, 255, 0.52);
   color: #000000;
}

.site-header {
   background: #ffffff;
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 14px;
   box-shadow: var(--shadow-soft);
}

.site-header h1 {
   margin: 0;
   font-size: clamp(26px, 3.4vw, 40px);
   line-height: 1.1;
   color: var(--red-700);
}

.site-header p {
   margin: 9px 0 0;
   color: var(--ink-700);
   font-size: 15px;
   max-width: 70ch;
}

.link-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
   gap: 14px;
}

.link-card {
   display: block;
   text-decoration: none;
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   background: #ffffff;
   padding: 16px;
   color: inherit;
   transition:
      transform var(--ease-pop),
      box-shadow var(--ease-pop),
      border-color var(--ease-pop);
   box-shadow: 0 8px 16px rgba(95, 15, 21, 0.08);
}

.link-card:hover {
   transform: translateY(-4px);
   border-color: var(--line-strong);
   box-shadow: 0 16px 28px rgba(95, 15, 21, 0.18);
}

.link-card h2 {
   margin: 0;
   font-size: 20px;
   color: var(--red-700);
}

.link-card p {
   margin: 8px 0 0;
   font-size: 14px;
   color: var(--ink-700);
}

.content-card {
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   background: #ffffff;
   padding: 18px;
   box-shadow: var(--shadow-soft);
}

.content-card h2 {
   margin-top: 0;
   color: var(--red-700);
}

.content-card p,
.content-card li {
   color: var(--ink-700);
}

.premium-ranking-card {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.premium-ranking-status {
   margin: 0;
   color: #000000;
   font-size: 13px;
   font-weight: 700;
}

.premium-ranking-meta {
   margin: 0;
   color: #000000;
   font-size: 12px;
   font-weight: 600;
}

.premium-ranking-summary {
   margin: 0;
   color: #000000;
   font-size: 14px;
}

.premium-ranking-content {
   margin: 0;
   padding: 12px;
   border-radius: 10px;
   border: 1px solid #bf9a4a;
   background: #ffffff;
   color: #000000;
   font-family: "Consolas", "Courier New", monospace;
   font-size: 13px;
   line-height: 1.45;
   white-space: pre-wrap;
   word-break: break-word;
   max-height: 70vh;
   overflow: auto;
}

.premium-ranking-lock-note {
   margin: 0;
   color: #c7001f;
   font-size: 13px;
   font-weight: 700;
}

.premium-ranking-list {
   margin-top: 4px;
}

.premium-ranking-list .ranking-item {
   cursor: default;
}

.premium-tier-divider .tier-drag-handle {
   cursor: default;
}

.premium-tier-divider .tier-drag-handle:hover {
   cursor: default;
   background: transparent;
}

.premium-tier-divider .tier-label-input {
   cursor: default;
   pointer-events: none;
}

/* ── Nav auth pill ── */
.nav-auth-pill {
   display: inline-block;
   font-size: 11px;
   font-weight: 700;
   color: #000000;
   background: #bf9a4a;
   padding: 4px 10px;
   border-radius: 999px;
   letter-spacing: 0.02em;
   white-space: nowrap;
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.nav-auth-pill[hidden] {
   display: none;
}

/* ── Hamburger toggle ── */
.nav-hamburger {
   display: none;
   background: none;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   padding: 7px 9px;
   cursor: pointer;
   color: #ffffff;
   font-size: 22px;
   line-height: 1;
   transition: background var(--ease-pop);
}

.nav-hamburger:hover {
   background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
   .site-shell {
      width: calc(100vw - 16px);
      padding: 0 4px 24px;
   }

   .global-nav {
      border-radius: 0;
      padding: 12px;
   }

   .brand-title {
      font-size: 20px;
   }

   .nav-hamburger {
      display: inline-flex;
   }

   .page-links {
      display: none;
      flex-direction: column;
      width: 100%;
      gap: 8px;
      padding-top: 10px;
   }

   .page-links.open {
      display: flex;
   }

   .page-links a,
   .page-links .nav-dropdown-trigger {
      padding: 10px 14px;
      font-size: 14px;
      border-radius: 10px;
      text-align: left;
   }

   .nav-dropdown {
      flex-direction: column;
   }

   .nav-dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      min-width: 0;
      border-radius: 10px;
      margin-top: 6px;
   }

   .premium-ranking-content {
      max-height: 58vh;
   }
}


:root[data-theme="dark"] {
   --red-900: #000000;
   --red-800: #000000;
   --red-700: #c7001f;
   --red-600: #c7001f;
   --gold-600: #bf9a4a;
   --gold-500: #bf9a4a;
   --gold-400: #bf9a4a;
   --gold-200: #bf9a4a;
   --white-100: #ffffff;
   --white-200: #f6f6f6;
   --white-300: #ececec;
   --ink-900: #ffffff;
   --ink-700: #ffffff;
   --ink-500: #bf9a4a;
   --line-strong: #bf9a4a;
   --line-soft: #bf9a4a;
   --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.64);
   --shadow-strong: 0 16px 36px rgba(0, 0, 0, 0.78);
}

:root[data-theme="dark"] body {
   color: var(--ink-900);
   background:
      radial-gradient(circle at 8% 10%, rgba(191, 154, 74, 0.14) 0%, rgba(191, 154, 74, 0) 28%),
      radial-gradient(circle at 88% 0%, rgba(199, 0, 31, 0.22) 0%, rgba(199, 0, 31, 0) 34%),
      linear-gradient(170deg, #000000 0%, #030303 62%, #080808 100%);
}

:root[data-theme="dark"] .global-nav {
   border-color: #bf9a4a;
   background:
      linear-gradient(135deg, #000000 0%, #050505 72%),
      radial-gradient(circle at 92% 10%, rgba(191, 154, 74, 0.16) 0%, rgba(191, 154, 74, 0) 40%);
}

:root[data-theme="dark"] .page-links a,
:root[data-theme="dark"] .page-links .nav-dropdown-trigger {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .page-links a:hover,
:root[data-theme="dark"] .page-links .nav-dropdown-trigger:hover,
:root[data-theme="dark"] .page-links .nav-dropdown:focus-within .nav-dropdown-trigger {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

:root[data-theme="dark"] .page-links a[aria-current="page"],
:root[data-theme="dark"] .page-links .nav-dropdown:has(.nav-dropdown-menu a[aria-current="page"]) .nav-dropdown-trigger {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .page-links a.active:not([aria-current="page"]) {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
   box-shadow: none;
}

:root[data-theme="dark"] .page-links .nav-dropdown.active:not(:has(.nav-dropdown-menu a[aria-current="page"])) .nav-dropdown-trigger {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
   box-shadow: none;
}

:root[data-theme="dark"] .nav-dropdown-menu {
   border-color: #bf9a4a;
   background: linear-gradient(165deg, #020202 0%, #0a0a0a 100%);
}

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .link-card {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #070707 100%);
   box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .site-header h1,
:root[data-theme="dark"] .content-card h2,
:root[data-theme="dark"] .link-card h2 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .site-header p,
:root[data-theme="dark"] .content-card p,
:root[data-theme="dark"] .content-card li,
:root[data-theme="dark"] .link-card p {
   color: #ffffff;
}

:root[data-theme="dark"] .premium-ranking-content {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .premium-ranking-status,
:root[data-theme="dark"] .premium-ranking-meta,
:root[data-theme="dark"] .premium-ranking-summary {
   color: #ffffff;
}

:root[data-theme="dark"] .premium-ranking-lock-note {
   color: #bf9a4a;
}

/* ── Hero ── */
.hero {
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-lg);
   background:
      linear-gradient(135deg, rgba(199, 0, 31, 0.95) 0%, rgba(0, 0, 0, 0.97) 70%),
      radial-gradient(circle at 80% 20%, rgba(191, 154, 74, 0.22) 0%, transparent 50%);
   padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
   margin-bottom: 14px;
   box-shadow: var(--shadow-strong);
   color: #ffffff;
}

.hero-title {
   margin: 0;
   font-size: clamp(28px, 4.5vw, 52px);
   line-height: 1.1;
   font-weight: 800;
   color: #ffffff;
}

.hero-subtitle {
   margin: 14px 0 0;
   font-size: clamp(14px, 1.6vw, 18px);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.82);
   max-width: 56ch;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 24px;
}

.hero-btn {
   display: inline-block;
   text-decoration: none;
   font-family: inherit;
   font-weight: 700;
   font-size: 15px;
   padding: 12px 28px;
   border-radius: 999px;
   cursor: pointer;
   transition: transform var(--ease-pop), box-shadow var(--ease-pop);
}

.hero-btn:hover {
   transform: translateY(-2px);
}

.hero-btn--primary {
   background: #bf9a4a;
   color: #000000;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.hero-btn--primary:hover {
   box-shadow: 0 12px 28px rgba(191, 154, 74, 0.35);
}

.hero-btn--secondary {
   background: rgba(255, 255, 255, 0.08);
   color: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.35);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.hero-btn--secondary:hover {
   background: rgba(255, 255, 255, 0.14);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* ── Feature grid ── */
.feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 14px;
   margin-bottom: 14px;
}

.feature-card {
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   background: #ffffff;
   padding: 22px 20px;
   box-shadow: var(--shadow-soft);
   transition: transform var(--ease-pop), box-shadow var(--ease-pop);
}

.feature-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 28px rgba(95, 15, 21, 0.16);
}

.feature-icon {
   font-size: 28px;
   margin-bottom: 10px;
}

.feature-card h3 {
   margin: 0 0 6px;
   font-size: 17px;
   color: var(--red-700);
}

.feature-card p {
   margin: 0;
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--ink-700);
}

/* ── Footer ── */
.site-footer {
   margin-top: 28px;
   border-top: 1px solid var(--line-strong);
   background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.97) 0%, rgba(199, 0, 31, 0.92) 100%);
   color: #ffffff;
   padding: 32px clamp(14px, 3vw, 48px) 20px;
}

.footer-inner {
   max-width: 1920px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 20px;
}

.footer-brand {
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1 1 200px;
}

.footer-logo {
   font-size: 20px;
   font-weight: 800;
   color: #bf9a4a;
}

.footer-tagline {
   font-size: 12.5px;
   color: rgba(255, 255, 255, 0.65);
}

.footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 18px;
   flex: 2 1 300px;
}

.footer-links a {
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.78);
   transition: color 120ms;
}

.footer-links a:hover {
   color: #bf9a4a;
}

.footer-copy {
   width: 100%;
   margin: 12px 0 0;
   font-size: 11.5px;
   color: rgba(255, 255, 255, 0.4);
}

/* ── Dark-mode hero / feature / footer ── */
:root[data-theme="dark"] .hero {
   background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(10, 10, 10, 0.98) 70%),
      radial-gradient(circle at 80% 20%, rgba(191, 154, 74, 0.14) 0%, transparent 50%);
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .hero-title {
   color: #bf9a4a;
}

:root[data-theme="dark"] .feature-card {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #070707 100%);
}

:root[data-theme="dark"] .feature-card h3 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .feature-card p {
   color: #ffffff;
}

/* ── Social proof row ── */
.social-proof {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 28px 48px;
   padding: 20px 14px;
   margin-bottom: 14px;
}

.proof-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.proof-number {
   font-size: clamp(22px, 3vw, 32px);
   font-weight: 800;
   color: var(--red-700);
}

.proof-label {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--ink-700);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

:root[data-theme="dark"] .proof-number {
   color: #bf9a4a;
}

:root[data-theme="dark"] .proof-label {
   color: rgba(255, 255, 255, 0.7);
}

/* ── Pricing page ── */
.pricing-hero {
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-lg);
   background:
      linear-gradient(135deg, rgba(199, 0, 31, 0.95) 0%, rgba(0, 0, 0, 0.97) 70%),
      radial-gradient(circle at 80% 20%, rgba(191, 154, 74, 0.22) 0%, transparent 50%);
   padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px);
   margin-bottom: 24px;
   box-shadow: var(--shadow-strong);
   color: #ffffff;
   text-align: center;
}

.pricing-hero-title {
   margin: 0;
   font-size: clamp(26px, 4vw, 48px);
   line-height: 1.1;
   font-weight: 800;
   color: #ffffff;
}

.pricing-hero-subtitle {
   margin: 12px auto 0;
   font-size: clamp(14px, 1.5vw, 17px);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.8);
   max-width: 52ch;
}

.pricing-tiers {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   margin-bottom: 28px;
   max-width: 760px;
   margin-left: auto;
   margin-right: auto;
}

.pricing-card {
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-lg);
   background: #ffffff;
   padding: 28px 24px 24px;
   box-shadow: var(--shadow-soft);
   display: flex;
   flex-direction: column;
   position: relative;
}

.pricing-card--featured {
   border-color: #bf9a4a;
   border-width: 2px;
   box-shadow: 0 16px 36px rgba(191, 154, 74, 0.18);
}

.pricing-badge {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: #bf9a4a;
   color: #000000;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 5px 16px;
   border-radius: 999px;
}

.pricing-card-header {
   text-align: center;
   margin-bottom: 12px;
}

.pricing-plan-name {
   margin: 0;
   font-size: 22px;
   color: var(--red-700);
   font-weight: 800;
}

.pricing-price {
   margin-top: 8px;
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: 4px;
}

.pricing-amount {
   font-size: 40px;
   font-weight: 800;
   color: var(--ink-900);
   line-height: 1;
}

.pricing-period {
   font-size: 14px;
   color: var(--ink-700);
   font-weight: 600;
}

.pricing-plan-tagline {
   text-align: center;
   font-size: 13.5px;
   color: var(--ink-700);
   margin: 0 0 16px;
}

.pricing-features {
   list-style: none;
   padding: 0;
   margin: 0 0 20px;
   flex: 1;
}

.pricing-feature {
   padding: 8px 0 8px 28px;
   position: relative;
   font-size: 14px;
   color: var(--ink-700);
   border-bottom: 1px solid rgba(191, 154, 74, 0.15);
}

.pricing-feature:last-child {
   border-bottom: none;
}

.pricing-feature::before {
   position: absolute;
   left: 0;
   top: 8px;
   font-size: 15px;
   font-weight: 700;
}

.pricing-feature.included::before {
   content: "✓";
   color: #2e7d32;
}

.pricing-feature.excluded::before {
   content: "—";
   color: rgba(0, 0, 0, 0.25);
}

.pricing-feature.excluded {
   opacity: 0.5;
}

.pricing-cta {
   display: block;
   text-align: center;
   text-decoration: none;
   font-family: inherit;
   font-weight: 700;
   font-size: 15px;
   padding: 12px 24px;
   border-radius: 999px;
   cursor: pointer;
   border: none;
   transition: transform var(--ease-pop), box-shadow var(--ease-pop);
}

.pricing-cta:hover {
   transform: translateY(-2px);
}

.pricing-cta--primary {
   background: #bf9a4a;
   color: #000000;
   box-shadow: 0 8px 20px rgba(191, 154, 74, 0.3);
}

.pricing-cta--primary:hover {
   box-shadow: 0 12px 28px rgba(191, 154, 74, 0.4);
}

.pricing-cta--primary:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

.pricing-cta--secondary {
   background: rgba(0, 0, 0, 0.06);
   color: var(--ink-900);
   border: 1px solid var(--line-soft);
}

.pricing-cta--secondary:hover {
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* ── Pricing FAQ ── */
.pricing-faq {
   max-width: 680px;
   margin: 0 auto 20px;
}

.pricing-faq-title {
   font-size: 22px;
   color: var(--red-700);
   margin: 0 0 16px;
   text-align: center;
}

.faq-item {
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   margin-bottom: 10px;
   background: #ffffff;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
   overflow: hidden;
}

.faq-item summary {
   padding: 14px 18px;
   font-weight: 700;
   font-size: 14.5px;
   cursor: pointer;
   color: var(--ink-900);
   list-style: none;
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item summary::before {
   content: "+";
   display: inline-block;
   width: 20px;
   font-size: 18px;
   font-weight: 800;
   color: var(--red-700);
   margin-right: 8px;
}

.faq-item[open] summary::before {
   content: "−";
}

.faq-item p {
   margin: 0;
   padding: 0 18px 14px;
   font-size: 13.5px;
   line-height: 1.6;
   color: var(--ink-700);
}

/* ── Pricing dark mode ── */
:root[data-theme="dark"] .pricing-hero {
   background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(10, 10, 10, 0.98) 70%),
      radial-gradient(circle at 80% 20%, rgba(191, 154, 74, 0.14) 0%, transparent 50%);
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .pricing-hero-title {
   color: #bf9a4a;
}

:root[data-theme="dark"] .pricing-card {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #070707 100%);
}

:root[data-theme="dark"] .pricing-plan-name {
   color: #bf9a4a;
}

:root[data-theme="dark"] .pricing-feature.included::before {
   color: #4caf50;
}

:root[data-theme="dark"] .pricing-feature.excluded::before {
   color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .pricing-cta--secondary {
   background: rgba(255, 255, 255, 0.06);
   color: #ffffff;
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .pricing-faq-title {
   color: #bf9a4a;
}

:root[data-theme="dark"] .faq-item {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #070707 100%);
}

:root[data-theme="dark"] .faq-item summary {
   color: #ffffff;
}

:root[data-theme="dark"] .faq-item summary::before {
   color: #bf9a4a;
}

:root[data-theme="dark"] .faq-item p {
   color: rgba(255, 255, 255, 0.8);
}

/* ── About page ── */
.about-hero {
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-lg);
   background:
      linear-gradient(135deg, rgba(199, 0, 31, 0.95) 0%, rgba(0, 0, 0, 0.97) 70%),
      radial-gradient(circle at 80% 20%, rgba(191, 154, 74, 0.22) 0%, transparent 50%);
   padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px);
   margin-bottom: 20px;
   box-shadow: var(--shadow-strong);
   color: #ffffff;
   text-align: center;
}

.about-hero-title {
   margin: 0;
   font-size: clamp(26px, 4vw, 44px);
   font-weight: 800;
   line-height: 1.1;
   color: #ffffff;
}

.about-hero-subtitle {
   margin: 12px auto 0;
   font-size: clamp(14px, 1.5vw, 17px);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.8);
   max-width: 52ch;
}

.about-section {
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   background: #ffffff;
   padding: 24px 22px;
   margin-bottom: 14px;
   box-shadow: var(--shadow-soft);
}

.about-section h2 {
   margin: 0 0 10px;
   font-size: 20px;
   color: var(--red-700);
}

.about-section p {
   margin: 0 0 10px;
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--ink-700);
   max-width: 68ch;
}

.about-section p:last-child {
   margin-bottom: 0;
}

.about-values {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 14px;
   margin-bottom: 14px;
}

.about-value-card {
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   background: #ffffff;
   padding: 20px;
   box-shadow: var(--shadow-soft);
   text-align: center;
}

.about-value-icon {
   font-size: 28px;
   margin-bottom: 8px;
}

.about-value-card h3 {
   margin: 0 0 6px;
   font-size: 16px;
   color: var(--red-700);
}

.about-value-card p {
   margin: 0;
   font-size: 13px;
   line-height: 1.5;
   color: var(--ink-700);
}

:root[data-theme="dark"] .about-hero {
   background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(10, 10, 10, 0.98) 70%),
      radial-gradient(circle at 80% 20%, rgba(191, 154, 74, 0.14) 0%, transparent 50%);
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .about-hero-title {
   color: #bf9a4a;
}

:root[data-theme="dark"] .about-section {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #070707 100%);
}

:root[data-theme="dark"] .about-section h2 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .about-section p {
   color: #ffffff;
}

:root[data-theme="dark"] .about-value-card {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #070707 100%);
}

:root[data-theme="dark"] .about-value-card h3 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .about-value-card p {
   color: #ffffff;
}

:root[data-theme="dark"] .site-footer {
   border-color: #bf9a4a;
   background:
      linear-gradient(135deg, #000000 0%, #080808 100%);
}

/* ── Loading Skeletons ── */
@keyframes skeleton-shimmer {
   0%   { background-position: -300px 0; }
   100% { background-position: 300px 0; }
}

.skeleton-row {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.skeleton-bar {
   height: 14px;
   border-radius: 6px;
   background: linear-gradient(90deg, #e8e3da 25%, #f5f0e6 50%, #e8e3da 75%);
   background-size: 600px 100%;
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-circle {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   flex-shrink: 0;
   background: linear-gradient(90deg, #e8e3da 25%, #f5f0e6 50%, #e8e3da 75%);
   background-size: 600px 100%;
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

:root[data-theme="dark"] .skeleton-row {
   border-color: rgba(191, 154, 74, 0.12);
}

:root[data-theme="dark"] .skeleton-bar,
:root[data-theme="dark"] .skeleton-circle {
   background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
   background-size: 600px 100%;
}