:root {
      --bg: #070e19;
      --bg-soft: #0a1422;
      --band: #0d1727;
      --panel: #0f1b2d;
      --line: rgba(255, 255, 255, 0.08);
      --line-soft: rgba(255, 255, 255, 0.06);
      --text: #f3f7fb;
      --text-soft: #c7d2e1;
      --muted: #93a4ba;
      --muted-2: #74869e;
      --accent: #2ee6a6;
      --accent-strong: #12c98c;
      --accent-ink: #04251b;
      --container: 1680px;
      --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
      --font-body: "Inter", system-ui, -apple-system, sans-serif;
      --radius: 16px;
      --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    *,
    *::before,
    *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    img, svg { display: block; }
    .svg-defs { position: absolute; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }
    ::selection { background: rgba(46, 230, 166, 0.28); color: #fff; }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .container {
      width: min(100% - 80px, var(--container));
      margin-inline: auto;
    }

    .eyebrow {
      margin: 0 0 16px;
      color: var(--accent);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    /* ===== Header ===== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(8, 15, 27, 0.82);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      display: flex;
      align-items: center;
      gap: 40px;
      height: 78px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex: none;
    }

    .brand-mark {
      width: 33px;
      height: 29px;
      flex: none;
    }

    .brand-name {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: #fff;
      line-height: 1;
      white-space: nowrap;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 34px;
      height: 100%;
    }

    .main-nav a {
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
      color: #b7c4d5;
      font-size: 13.5px;
      font-weight: 500;
      transition: color 0.2s var(--ease);
    }

    .main-nav a:hover { color: #fff; }

    .main-nav a.is-active { color: #fff; }

    .main-nav a.is-active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      border-radius: 2px;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(46, 230, 166, 0.55);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 21px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.005em;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
                  color 0.2s var(--ease), box-shadow 0.25s var(--ease),
                  transform 0.2s var(--ease);
    }

    .btn:active { transform: translateY(1px); }

    .btn-ghost {
      color: #e6edf5;
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.015);
    }

    .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.05);
    }

    .btn-primary {
      color: var(--accent-ink);
      background: var(--accent);
      box-shadow: 0 8px 24px -10px rgba(46, 230, 166, 0.65);
    }

    .btn-primary:hover {
      background: #4af0b8;
      box-shadow: 0 10px 30px -8px rgba(46, 230, 166, 0.72);
    }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 40px;
      padding: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      cursor: pointer;
    }

    .menu-toggle span {
      width: 18px;
      height: 1.5px;
      background: #dbe4ef;
      border-radius: 2px;
      transition: transform 0.25s var(--ease), opacity 0.2s;
    }

    .site-header.is-open .menu-toggle span:first-child {
      transform: translateY(3.25px) rotate(45deg);
    }

    .site-header.is-open .menu-toggle span:last-child {
      transform: translateY(-3.25px) rotate(-45deg);
    }

    .mobile-menu {
      border-top: 1px solid var(--line-soft);
      padding: 10px 0 22px;
      background: rgba(8, 15, 27, 0.98);
    }

    .mobile-menu[hidden] { display: none; }

    .mobile-menu a:not(.btn) {
      display: block;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: #c6d2e1;
      font-size: 14.5px;
      font-weight: 500;
    }

    .mobile-menu a.is-active { color: var(--accent); }

    .mobile-menu-actions {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

    .mobile-menu-actions .btn { flex: 1; }

    /* ===== Hero ===== */
    .hero {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      min-height: 510px;
      overflow: hidden;
      background: var(--bg);
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: -3;
    }

    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 47%;
      filter: saturate(0.55) brightness(0.92) contrast(1.03);
      transform: translateX(10%) scale(1.26);
      transform-origin: 50% 50%;
    }

    .hero-media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, #08111e 2%, #08111e 17%, rgba(8, 17, 30, 0.95) 31%, rgba(8, 17, 30, 0.58) 53%, rgba(8, 17, 30, 0.1) 74%, rgba(8, 17, 30, 0.38) 100%),
        radial-gradient(ellipse 38% 75% at 98% 50%, rgba(4, 10, 20, 0.78), rgba(4, 10, 20, 0.28) 58%, transparent 76%),
        linear-gradient(180deg, rgba(6, 18, 26, 0.72) 0%, rgba(8, 17, 30, 0.14) 24%, rgba(8, 17, 30, 0.02) 40%, rgba(8, 17, 30, 0.52) 100%),
        radial-gradient(ellipse 90% 110% at 52% 38%, transparent 42%, rgba(7, 14, 25, 0.5) 100%),
        linear-gradient(0deg, rgba(5, 33, 29, 0.24), rgba(5, 33, 29, 0.24));
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        radial-gradient(ellipse 46% 80% at 80% 2%, rgba(46, 230, 166, 0.14), transparent 62%),
        radial-gradient(ellipse 40% 60% at 96% 88%, rgba(46, 230, 166, 0.08), transparent 70%);
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 150px;
      z-index: 0;
      background: linear-gradient(180deg, rgba(13, 23, 39, 0) 0%, #0d1727 92%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      padding-top: 78px;
      padding-bottom: 96px;
    }

    .hero-copy {
      max-width: 760px;
      animation: hero-rise 0.8s var(--ease) both;
    }

    .hero-copy .eyebrow { margin-bottom: 20px; }

    .hero h1 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(2.9rem, 4.25vw, 4.05rem);
      font-weight: 700;
      line-height: 1.01;
      letter-spacing: -0.045em;
      color: #f6f9fc;
      text-wrap: balance;
    }

    .hero h1 .accent-line {
      display: block;
      width: fit-content;
      background: linear-gradient(100deg, #52f2bd 0%, #2ee6a6 48%, #16cd92 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-lead {
      max-width: 555px;
      margin: 24px 0 0;
      color: #aebccd;
      font-size: 16.5px;
      line-height: 1.66;
      letter-spacing: 0.002em;
    }

    .hero-note {
      position: absolute;
      right: 1.2%;
      bottom: 23%;
      z-index: 1;
      width: 200px;
      transform: rotate(-7deg);
      text-align: right;
      pointer-events: none;
      filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
    }

    .hero-note .script {
      display: block;
      font-family: "Caveat", cursive;
      font-size: clamp(27px, 2.25vw, 37px);
      font-weight: 600;
      line-height: 0.94;
      color: #f4f8fc;
      letter-spacing: 0.015em;
    }

    .hero-note svg {
      position: absolute;
      right: -6px;
      bottom: -12px;
      width: 155px;
      height: auto;
      overflow: visible;
    }

    .hero-note svg path {
      stroke: var(--accent);
      filter: drop-shadow(0 0 8px rgba(46, 230, 166, 0.35));
    }

    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== How it works ===== */
    main > section { scroll-margin-top: 78px; }

    .how {
      position: relative;
      padding: 56px 0 50px;
      background: var(--band);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .how-grid {
      display: grid;
      grid-template-columns: 330px minmax(0, 1fr);
      gap: 64px;
      align-items: start;
    }

    .how-intro h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 2.15rem;
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: #f3f7fb;
    }

    .how-intro p:not(.eyebrow) {
      max-width: 310px;
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      color: var(--accent);
      font-size: 13.5px;
      font-weight: 600;
      transition: color 0.2s var(--ease);
    }

    .text-link svg {
      width: 16px;
      height: 16px;
      transition: transform 0.25s var(--ease);
    }

    .text-link:hover { color: #67f5c8; }
    .text-link:hover svg { transform: translateX(4px); }

    .steps {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      padding-top: 7px;
    }

    .step-top {
      display: flex;
      align-items: center;
      gap: 17px;
      min-height: 46px;
    }

    .step-num {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      flex: none;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.055);
      background: #17253a;
      color: #dbe5f1;
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 500;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .step-icon {
      display: grid;
      place-items: center;
      color: var(--accent);
    }

    .step-icon svg {
      width: 29px;
      height: 29px;
      filter: drop-shadow(0 0 10px rgba(46, 230, 166, 0.18));
    }

    .step h3 {
      margin: 21px 0 7px 63px;
      font-family: var(--font-head);
      font-size: 1.02rem;
      font-weight: 600;
      letter-spacing: -0.012em;
      color: #f0f5fa;
    }

    .step p {
      max-width: 265px;
      margin: 0 0 0 63px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.62;
    }

    .step-sep {
      display: grid;
      place-items: center;
      padding-top: 16px;
      color: rgba(255, 255, 255, 0.3);
    }

    .step-sep svg { width: 32px; height: 16px; }

    /* ===== Match dashboard ===== */
    .dashboard {
      position: relative;
      isolation: isolate;
      padding: 10px 0 68px;
      background: linear-gradient(180deg, var(--band) 0%, #0b1524 34%, #091321 100%);
      overflow: hidden;
    }

    .pitch-backdrop {
      position: absolute;
      inset: 0 0 0 auto;
      z-index: -2;
      width: min(62%, 1120px);
      background: url("../assets/pitch.jpg") 55% 98% / cover no-repeat;
      filter: brightness(0.38) saturate(0.52);
      opacity: 0.78;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 24%, rgba(0, 0, 0, 0.85) 58%, #000 100%);
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 24%, rgba(0, 0, 0, 0.85) 58%, #000 100%);
    }

    .pitch-backdrop::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(13, 23, 39, 0.97) 0%, rgba(11, 21, 36, 0.5) 30%, rgba(9, 19, 33, 0.25) 55%, rgba(8, 15, 26, 0.85) 100%),
        radial-gradient(ellipse 70% 65% at 78% 30%, rgba(46, 230, 166, 0.1), transparent 68%);
    }

    .dashboard-glow {
      position: absolute;
      z-index: -1;
      right: -8%;
      top: 8%;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(46, 230, 166, 0.09), transparent 65%);
      filter: blur(20px);
      pointer-events: none;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
      max-width: 1340px;
    }

    /* Match card */
    .match-card {
      position: relative;
      padding: 0 22px 22px;
      border: 1px solid rgba(255, 255, 255, 0.085);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(17, 31, 52, 0.97) 0%, rgba(10, 20, 35, 0.98) 100%);
      box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9),
                  inset 0 1px 0 rgba(255, 255, 255, 0.035);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .match-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 17px 2px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--muted-2);
      font-size: 12px;
      line-height: 1;
    }

    .sport {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .sport svg { width: 16px; height: 16px; }

    .head-divider {
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, 0.12);
      flex: none;
    }

    .league { color: #a9b8ca; }

    .kickoff {
      margin-left: auto;
      color: #8799b0;
      font-size: 11.5px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.015em;
      white-space: nowrap;
    }

    .teams {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      padding: 25px 7px 23px;
    }

    .team {
      display: flex;
      align-items: center;
      gap: 15px;
      min-width: 0;
      font-family: var(--font-head);
      font-size: 1.3rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #f2f7fb;
    }

    .team-away { justify-content: flex-end; }

    .team-name { white-space: nowrap; }

    .badge {
      width: 47px;
      height: 47px;
      flex: none;
      filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
    }

    .vs {
      color: #74879f;
      font-family: var(--font-head);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      padding-left: 0.2em;
    }

    .tabs {
      display: flex;
      gap: 29px;
      margin: 0 -22px;
      padding: 0 22px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar { display: none; }

    .tab {
      position: relative;
      flex: none;
      padding: 0 0 13px;
      border: 0;
      background: none;
      color: #8fa1b8;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.2s var(--ease);
    }

    .tab:hover { color: #eef4fa; }

    .tab[aria-selected="true"] { color: #fff; }

    .tab[aria-selected="true"]::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(46, 230, 166, 0.5);
    }

    .tab-panel { padding-top: 17px; }
    .tab-panel[hidden] { display: none; }

    .pick {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 17px;
      border: 1px solid rgba(46, 230, 166, 0.19);
      border-radius: 12px;
      background:
        linear-gradient(100deg, rgba(46, 230, 166, 0.075) 0%, rgba(46, 230, 166, 0.018) 52%, rgba(46, 230, 166, 0.045) 100%);
      box-shadow: inset 0 1px 0 rgba(46, 230, 166, 0.05);
    }

    .pick-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      flex: none;
      border-radius: 50%;
      border: 1px solid rgba(46, 230, 166, 0.32);
      background: rgba(46, 230, 166, 0.085);
      color: var(--accent);
      box-shadow: 0 0 28px rgba(46, 230, 166, 0.1);
    }

    .pick-icon svg { width: 21px; height: 21px; }

    .pick-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .pick-label {
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.055em;
      line-height: 1.25;
    }

    .pick-text strong {
      font-family: var(--font-head);
      font-size: 1.16rem;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.015em;
      color: #f4f8fc;
    }

    .odds {
      min-width: 92px;
      margin-left: auto;
      flex: none;
      padding: 9px 12px 8px;
      border: 1px solid rgba(46, 230, 166, 0.24);
      border-radius: 10px;
      background: rgba(4, 12, 22, 0.65);
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .odds strong {
      display: block;
      color: #69f5c6;
      font-family: var(--font-head);
      font-size: 1.34rem;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
    }

    .odds span {
      color: #7d9a91;
      font-size: 9.5px;
      font-weight: 500;
      letter-spacing: 0.045em;
    }

    /* Tab panels: stats, form, news */
    .stat-list { display: grid; gap: 13px; padding: 1px 1px 0; }

    .stat-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 6px;
      color: #a7b6c9;
      font-size: 11.5px;
    }

    .stat-top b {
      color: #e9f0f7;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .stat-top b em {
      color: #7f91a8;
      font-style: normal;
      font-weight: 500;
    }

    .stat-track {
      height: 4px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.055);
      overflow: hidden;
    }

    .stat-track i {
      display: block;
      width: var(--fill, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #16c98d, #4cf2ba);
      box-shadow: 0 0 10px rgba(46, 230, 166, 0.35);
    }

    .form-list { display: grid; gap: 12px; padding: 1px; }

    .form-team {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .form-team > span {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #e9f0f7;
      font-size: 12.5px;
      font-weight: 600;
    }

    .form-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex: none;
    }

    .form-dot.ars { background: #ef4b57; }
    .form-dot.che { background: #3d7bff; }

    .form-chips { display: flex; gap: 5px; }

    .chip {
      display: grid;
      place-items: center;
      width: 23px;
      height: 23px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(255, 255, 255, 0.035);
      color: #aab9ca;
      font-size: 10px;
      font-weight: 600;
      line-height: 1;
    }

    .chip.win {
      border-color: rgba(46, 230, 166, 0.3);
      background: rgba(46, 230, 166, 0.12);
      color: #5cf2bd;
    }

    .chip.loss {
      border-color: rgba(255, 111, 119, 0.24);
      background: rgba(255, 111, 119, 0.08);
      color: #ff979d;
    }

    .panel-note {
      margin: 12px 0 0;
      color: #6f819a;
      font-size: 10.5px;
      line-height: 1.5;
    }

    .news-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 1px;
      list-style: none;
    }

    .news-list li {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      gap: 12px;
      color: #a7b6c8;
      font-size: 12px;
      line-height: 1.5;
    }

    .news-list time {
      color: #6f819a;
      font-size: 10.5px;
      font-variant-numeric: tabular-nums;
      padding-top: 1px;
    }

    /* Features */
    .features {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .feature {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding: 17px 18px;
      border: 1px solid rgba(255, 255, 255, 0.075);
      border-radius: 13px;
      background: linear-gradient(110deg, rgba(16, 30, 51, 0.92) 0%, rgba(10, 20, 34, 0.93) 100%);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
                  background 0.25s var(--ease);
    }

    .feature:hover {
      transform: translateY(-2px);
      border-color: rgba(46, 230, 166, 0.22);
      background: linear-gradient(110deg, rgba(18, 35, 58, 0.96) 0%, rgba(11, 23, 39, 0.96) 100%);
    }

    .feature-icon {
      display: grid;
      place-items: center;
      width: 43px;
      height: 43px;
      flex: none;
      border-radius: 10px;
      border: 1px solid rgba(46, 230, 166, 0.17);
      background: linear-gradient(160deg, rgba(46, 230, 166, 0.17), rgba(46, 230, 166, 0.05));
      color: var(--accent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .feature-icon svg { width: 21px; height: 21px; }

    .feature h3 {
      margin: 0 0 3px;
      font-family: var(--font-head);
      font-size: 0.96rem;
      font-weight: 600;
      letter-spacing: -0.012em;
      color: #eef5fb;
    }

    .feature p {
      margin: 0;
      color: #91a3b9;
      font-size: 12.25px;
      line-height: 1.55;
    }

    /* ===== Footer ===== */
    .site-footer {
      padding: 25px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      background: #070d17;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      gap: 26px;
      flex-wrap: wrap;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 20px;
      min-width: 0;
    }

    .footer-brand .brand-mark { width: 26px; height: 23px; }
    .footer-brand .brand-name { font-size: 17px; }

    .footer-brand p {
      margin: 0;
      color: #7d8fa6;
      font-size: 11.5px;
      white-space: nowrap;
    }

    .age-badge {
      flex: none;
      padding: 2px 6px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 4px;
      color: #b3c1d1;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.03em;
      line-height: 1.4;
    }

    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 26px;
      margin-left: auto;
      color: #98a9bd;
      font-size: 11.5px;
      font-weight: 500;
    }

    .footer-nav a { transition: color 0.2s var(--ease); }
    .footer-nav a:hover { color: #fff; }

    .socials { display: flex; align-items: center; gap: 8px; }

    .socials a {
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
      color: #93a5ba;
      transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
                  background 0.2s var(--ease);
    }

    .socials a:hover {
      color: var(--accent);
      border-color: rgba(46, 230, 166, 0.32);
      background: rgba(46, 230, 166, 0.06);
    }

    .socials svg { width: 15px; height: 15px; }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 18px;
      padding-top: 15px;
      border-top: 1px solid rgba(255, 255, 255, 0.055);
      color: #61738a;
      font-size: 10.5px;
      flex-wrap: wrap;
    }

    .footer-bottom a {
      color: var(--accent);
      transition: color 0.2s var(--ease);
    }

    .footer-bottom a:hover { color: #67f5c8; }

    /* ===== Auth pages ===== */
    .header-actions .logout-form { display: contents; }
    .mobile-menu-actions .logout-form { flex: 1; display: flex; }
    .mobile-menu-actions .logout-form .btn { width: 100%; }

    .auth-body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background:
        radial-gradient(ellipse 55% 55% at 10% 0%, rgba(46, 230, 166, 0.085), transparent 65%),
        radial-gradient(ellipse 45% 60% at 95% 100%, rgba(46, 230, 166, 0.055), transparent 65%),
        #070e19;
    }

    .auth-topbar { position: relative; z-index: 5; }

    .auth-topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 86px;
    }

    .auth-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #95a7bb;
      font-size: 12.5px;
      font-weight: 500;
      transition: color 0.2s var(--ease);
    }

    .auth-back:hover { color: #fff; }
    .auth-back svg { width: 16px; height: 16px; }

    .auth-main {
      flex: 1;
      display: flex;
      align-items: flex-start;
      padding: 26px 0 58px;
    }

    .auth-main > .container {
      margin-top: auto;
      margin-bottom: auto;
    }

    .auth-shell {
      display: grid;
      grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
      width: 100%;
      max-width: 1180px;
      min-height: 620px;
      margin: 0 auto;
      border: 1px solid rgba(255, 255, 255, 0.085);
      border-radius: 22px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(15, 27, 45, 0.98), rgba(8, 16, 28, 0.99));
      box-shadow: 0 45px 120px -60px rgba(0, 0, 0, 0.95),
                  inset 0 1px 0 rgba(255, 255, 255, 0.03);
      animation: auth-rise 0.7s var(--ease) both;
    }

    @keyframes auth-rise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .auth-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 46px 46px 36px;
    }

    .auth-card .eyebrow { margin-bottom: 14px; }

    .auth-card h1 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(2.1rem, 2.8vw, 2.75rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.045em;
      color: #f4f8fc;
    }

    .auth-lead {
      max-width: 400px;
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.65;
    }

    .auth-form {
      display: grid;
      gap: 15px;
      margin-top: 28px;
    }

    .field { display: grid; gap: 7px; }

    .field > label:not(.checkbox-row) {
      color: #c6d2e1;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.015em;
    }

    .field-control {
      position: relative;
      display: flex;
      align-items: center;
    }

    .field-icon {
      position: absolute;
      left: 14px;
      z-index: 1;
      display: grid;
      place-items: center;
      color: #6d8097;
      pointer-events: none;
    }

    .field-icon svg { width: 17px; height: 17px; }

    .field-control input {
      width: 100%;
      height: 48px;
      padding: 0 46px 0 42px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      background: rgba(5, 12, 22, 0.64);
      color: #f2f7fc;
      font-family: var(--font-body);
      font-size: 13.5px;
      line-height: 1;
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
                  background 0.2s var(--ease);
    }

    .field-control input::placeholder { color: #596d83; opacity: 1; }
    .field-control input:hover { border-color: rgba(255, 255, 255, 0.18); }

    .field-control input:focus {
      outline: none;
      border-color: rgba(46, 230, 166, 0.65);
      background: rgba(5, 12, 22, 0.86);
      box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.1);
    }

    .field-control input[aria-invalid="true"] {
      border-color: rgba(255, 111, 119, 0.55);
      box-shadow: 0 0 0 3px rgba(255, 111, 119, 0.07);
    }

    .field-control input:-webkit-autofill {
      -webkit-text-fill-color: #f2f7fc;
      box-shadow: 0 0 0 1000px #081423 inset;
      transition: background-color 9999s ease-out;
    }

    .field-hint {
      margin: 0;
      color: #667a91;
      font-size: 10.5px;
      line-height: 1.5;
    }

    .field-error {
      margin: 0;
      color: #ff9ba1;
      font-size: 11px;
      line-height: 1.45;
    }

    .password-toggle {
      position: absolute;
      right: 7px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #7d91a8;
      cursor: pointer;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
    }

    .password-toggle:hover {
      color: #e6eef6;
      background: rgba(255, 255, 255, 0.045);
    }

    .password-toggle svg { width: 18px; height: 18px; }
    .password-eye-off { display: none; }
    .password-toggle.is-visible .password-eye { display: none; }
    .password-toggle.is-visible .password-eye-off { display: block; }

    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: #93a5ba;
      font-size: 11.5px;
      line-height: 1.55;
      cursor: pointer;
    }

    .checkbox-row input {
      width: 16px;
      height: 16px;
      margin: 1px 0 0;
      flex: none;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .checkbox-row input[aria-invalid="true"] {
      outline: 1px solid rgba(255, 111, 119, 0.5);
      outline-offset: 2px;
      border-radius: 3px;
    }

    .auth-submit {
      width: 100%;
      height: 47px;
      margin-top: 3px;
      border-radius: 9px;
      font-size: 12.5px;
      letter-spacing: 0.015em;
    }

    .auth-alert {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 18px;
      padding: 11px 13px;
      border: 1px solid transparent;
      border-radius: 9px;
      font-size: 11.5px;
      line-height: 1.5;
    }

    .auth-alert svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
    .auth-alert--error { border-color: rgba(255, 111, 119, 0.25); background: rgba(255, 111, 119, 0.07); color: #ffb0b5; }
    .auth-alert--success { border-color: rgba(46, 230, 166, 0.23); background: rgba(46, 230, 166, 0.06); color: #8df6d5; }
    .auth-alert--info { border-color: rgba(127, 161, 199, 0.22); background: rgba(127, 161, 199, 0.06); color: #b9c8db; }

    .auth-switch {
      margin: 20px 0 22px;
      text-align: center;
      color: #7c8fa6;
      font-size: 11.5px;
    }

    .checkbox-row a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
    .checkbox-row a:hover { color: #69f5c8; }

    .auth-switch a { color: var(--accent); font-weight: 600; transition: color 0.2s var(--ease); }
    .auth-switch a:hover { color: #69f5c8; }

    .auth-forgot {
      margin-top: -4px;
      text-align: right;
    }

    .auth-forgot a {
      color: #8fa1b8;
      font-size: 11px;
      font-weight: 500;
      transition: color 0.2s var(--ease);
    }

    .auth-forgot a:hover { color: var(--accent); }

    .auth-alert a {
      color: var(--accent);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .auth-alert code {
      color: #d9e4ef;
      font-size: 10px;
    }

    .auth-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 22px 0 0;
      padding-top: 17px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      color: #63768d;
      font-size: 10px;
      line-height: 1.55;
    }

    .auth-card .auth-note { margin-top: auto; }

    .auth-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--accent); }

    .auth-visual {
      position: relative;
      min-height: 100%;
      overflow: hidden;
      isolation: isolate;
      background: #08111e;
    }

    .auth-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 42%;
      filter: saturate(0.52) brightness(0.7) contrast(1.03);
    }

    .auth-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(7, 14, 25, 0.08) 0%, rgba(7, 14, 25, 0.34) 40%, rgba(7, 14, 25, 0.92) 100%),
        linear-gradient(90deg, rgba(7, 14, 25, 0.72), transparent 55%),
        radial-gradient(ellipse 45% 55% at 85% 15%, rgba(46, 230, 166, 0.12), transparent 70%);
    }

    .auth-visual-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
      padding: 42px;
    }

    .auth-visual-content .eyebrow { margin-bottom: 14px; }

    .auth-visual h2 {
      max-width: 380px;
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.8rem, 2.5vw, 2.35rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.035em;
      color: #f3f8fc;
    }

    .auth-visual-content > p:not(.eyebrow) {
      max-width: 340px;
      margin: 13px 0 0;
      color: #a7b7c9;
      font-size: 12.5px;
      line-height: 1.65;
    }

    .auth-visual-list {
      display: grid;
      gap: 9px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
      color: #d3deea;
      font-size: 11.5px;
    }

    .auth-visual-list li { display: flex; align-items: center; gap: 9px; }
    .auth-visual-list svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

    .auth-visual-script {
      position: absolute;
      top: 30px;
      right: 32px;
      transform: rotate(-6deg);
      text-align: right;
      pointer-events: none;
    }

    .auth-visual-script .script {
      display: block;
      font-family: "Caveat", cursive;
      font-size: 27px;
      font-weight: 600;
      line-height: 0.95;
      color: #f4f8fc;
    }

    .auth-visual-script svg {
      position: absolute;
      right: 0;
      bottom: -9px;
      width: 94px;
      height: auto;
    }

    .auth-visual-script svg path {
      stroke: var(--accent);
      filter: drop-shadow(0 0 8px rgba(46, 230, 166, 0.35));
    }

    .auth-shell--account { min-height: 560px; }
    .auth-card--account { padding-bottom: 32px; }

    .account-head {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 18px;
    }

    .account-avatar {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      flex: none;
      border: 1px solid rgba(46, 230, 166, 0.28);
      border-radius: 50%;
      background: linear-gradient(160deg, rgba(46, 230, 166, 0.2), rgba(46, 230, 166, 0.05));
      color: var(--accent);
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.02em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .account-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .account-eyebrow::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(46, 230, 166, 0.7);
    }

    .account-head h1 {
      margin: 3px 0 0;
      font-size: clamp(1.7rem, 2.3vw, 2.2rem);
    }

    .account-details {
      margin: 25px 0 0;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.075);
      border-radius: 12px;
      background: rgba(4, 12, 22, 0.38);
      overflow: hidden;
    }

    .account-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    }

    .account-row:last-child { border-bottom: 0; }
    .account-row dt { color: #7e91a8; font-size: 11px; }

    .account-row dd {
      margin: 0;
      color: #e8f0f7;
      font-size: 12px;
      font-weight: 500;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .account-active {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
    }

    .account-active::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 7px rgba(46, 230, 166, 0.7);
    }

    .account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 23px;
    }

    .account-actions .btn { height: 43px; padding: 0 17px; gap: 8px; font-size: 12px; }
    .account-actions .btn svg { width: 15px; height: 15px; }
    .account-logout { display: inline-flex; }
    .account-logout .btn { display: inline-flex; }

    .auth-footer {
      padding: 17px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(5, 11, 20, 0.55);
    }

    .auth-footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      color: #5f7188;
      font-size: 10px;
    }

    .auth-footer a { color: var(--accent); transition: color 0.2s var(--ease); }
    .auth-footer a:hover { color: #67f5c8; }

    /* ===== Content pages (DUK / About) ===== */
    .page-hero {
      position: relative;
      overflow: hidden;
      padding: 84px 0 66px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.055);
      background:
        radial-gradient(ellipse 55% 95% at 86% 0%, rgba(46, 230, 166, 0.09), transparent 65%),
        radial-gradient(ellipse 40% 70% at 10% 100%, rgba(46, 230, 166, 0.04), transparent 70%),
        #0a1422;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../assets/pitch.jpg") 70% 68% / cover no-repeat;
      opacity: 0.12;
      filter: saturate(0.45) brightness(0.55);
      -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, 0.5) 52%, #000 100%);
      mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, 0.5) 52%, #000 100%);
    }

    .page-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(7, 14, 25, 0.38), rgba(10, 20, 34, 0.84));
      pointer-events: none;
    }

    .page-hero .container {
      position: relative;
      z-index: 1;
    }

    .page-hero .eyebrow { margin-bottom: 18px; }

    .page-hero h1 {
      max-width: 880px;
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(2.5rem, 4.2vw, 3.95rem);
      font-weight: 600;
      line-height: 1.04;
      letter-spacing: -0.045em;
      color: #f4f8fc;
    }

    .page-hero h1 .accent-line {
      display: block;
      width: fit-content;
      background: linear-gradient(100deg, #52f2bd 0%, #2ee6a6 48%, #16cd92 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .page-hero-lead {
      max-width: 620px;
      margin: 20px 0 0;
      color: #a9b8ca;
      font-size: 15.5px;
      line-height: 1.65;
    }

    .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .page-hero-actions .btn { height: 43px; padding: 0 20px; font-size: 12.5px; }

    .page-section { padding: 64px 0; }

    .page-section--alt {
      padding: 64px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.045);
      border-bottom: 1px solid rgba(255, 255, 255, 0.045);
      background: linear-gradient(180deg, #0b1524, #0d1727);
    }

    .page-section > .container { max-width: 1240px; }

    .section-heading {
      max-width: 640px;
      margin-bottom: 28px;
    }

    .section-heading .eyebrow { margin-bottom: 13px; }

    .section-heading h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.8rem, 2.8vw, 2.4rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.035em;
      color: #f1f6fb;
    }

    .section-heading p:not(.eyebrow) {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.65;
    }

    /* FAQ */
    .faq-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 328px;
      gap: 34px;
      align-items: start;
      max-width: 1120px;
      margin: 0 auto;
    }

    .faq-list { display: grid; gap: 10px; }

    .faq-item {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(16, 30, 51, 0.82), rgba(10, 20, 34, 0.82));
      transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    }

    .faq-item:hover { border-color: rgba(255, 255, 255, 0.14); }

    .faq-item[open] {
      border-color: rgba(46, 230, 166, 0.22);
      background: linear-gradient(180deg, rgba(18, 34, 56, 0.9), rgba(10, 21, 35, 0.9));
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 17px 19px;
      list-style: none;
      cursor: pointer;
      font-family: var(--font-head);
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.4;
      color: #eaf1f8;
    }

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

    .faq-marker {
      position: relative;
      width: 26px;
      height: 26px;
      flex: none;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 50%;
      transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    }

    .faq-marker::before,
    .faq-marker::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 1.5px;
      border-radius: 2px;
      background: #9fb0c3;
      transform: translate(-50%, -50%);
    }

    .faq-marker::after {
      transform: translate(-50%, -50%) rotate(90deg);
      transition: transform 0.2s var(--ease), opacity 0.2s;
    }

    .faq-item[open] .faq-marker {
      border-color: rgba(46, 230, 166, 0.35);
      background: rgba(46, 230, 166, 0.08);
    }

    .faq-item[open] .faq-marker::before,
    .faq-item[open] .faq-marker::after { background: var(--accent); }

    .faq-item[open] .faq-marker::after {
      transform: translate(-50%, -50%) rotate(0deg);
      opacity: 0;
    }

    .faq-body {
      padding: 0 19px 17px;
      color: #93a4ba;
      font-size: 13px;
      line-height: 1.7;
    }

    .faq-body p { max-width: 95%; margin: 0; }

    .faq-side {
      position: sticky;
      top: 102px;
      display: grid;
      gap: 14px;
    }

    .help-card {
      padding: 24px;
      border: 1px solid rgba(46, 230, 166, 0.18);
      border-radius: 16px;
      background: linear-gradient(160deg, rgba(17, 33, 55, 0.96), rgba(8, 18, 31, 0.96));
      box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
    }

    .help-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
      border: 1px solid rgba(46, 230, 166, 0.18);
      border-radius: 11px;
      background: rgba(46, 230, 166, 0.08);
      color: var(--accent);
    }

    .help-icon svg { width: 20px; height: 20px; }
    .help-card .eyebrow { margin-bottom: 10px; }

    .help-card h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.4rem;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.025em;
      color: #f1f7fb;
    }

    .help-card > p:not(.eyebrow) {
      margin: 10px 0 18px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.6;
    }

    .help-card .btn { width: 100%; height: 42px; font-size: 12px; }
    .help-card .text-link { margin-top: 16px; font-size: 12px; }

    .help-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 0 4px;
      color: #6b7e94;
      font-size: 10.5px;
      line-height: 1.55;
    }

    .help-note svg {
      width: 14px;
      height: 14px;
      flex: none;
      margin-top: 1px;
      color: var(--accent);
    }

    .duk-note {
      margin: 22px 0 0;
      color: #667a90;
      font-size: 10.5px;
      line-height: 1.6;
    }

    /* About */
    .about-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 56px;
      align-items: center;
      max-width: 1120px;
      margin: 0 auto;
    }

    .about-copy .eyebrow { margin-bottom: 14px; }

    .about-copy h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.9rem, 3vw, 2.6rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.04em;
      color: #f1f6fb;
    }

    .about-copy p:not(.eyebrow) {
      max-width: 560px;
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
    }

    .about-facts { display: grid; gap: 10px; }

    .fact {
      display: flex;
      align-items: baseline;
      gap: 14px;
      padding: 20px 22px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: linear-gradient(110deg, rgba(16, 30, 51, 0.86), rgba(10, 20, 34, 0.86));
    }

    .fact strong {
      min-width: 60px;
      font-family: var(--font-head);
      font-size: 2.15rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--accent);
    }

    .fact span { color: #93a4ba; font-size: 12px; }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
    }

    .value-card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(160deg, rgba(16, 30, 51, 0.92), rgba(10, 20, 34, 0.92));
      transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
    }

    .value-card:hover {
      transform: translateY(-2px);
      border-color: rgba(46, 230, 166, 0.2);
    }

    .value-card h3 {
      margin: 18px 0 8px;
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: #eef5fb;
    }

    .value-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.65;
    }

    .cta-panel {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      overflow: hidden;
      padding: 38px 40px;
      border: 1px solid rgba(46, 230, 166, 0.18);
      border-radius: 18px;
      background: linear-gradient(120deg, rgba(46, 230, 166, 0.12), rgba(15, 29, 49, 0.95) 45%, rgba(10, 20, 34, 0.98));
      box-shadow: 0 30px 70px -50px rgba(0, 0, 0, 0.9);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      top: -100px;
      right: -80px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(46, 230, 166, 0.16), transparent 65%);
      pointer-events: none;
    }

    .cta-copy { position: relative; z-index: 1; }
    .cta-copy .eyebrow { margin-bottom: 12px; }

    .cta-copy h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.035em;
      color: #f3f8fc;
    }

    .cta-copy p:not(.eyebrow) {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .cta-actions {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      flex: none;
    }

    .cta-actions .btn { height: 43px; padding: 0 19px; font-size: 12px; }

    .contact-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 30px 32px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(120deg, rgba(15, 28, 47, 0.9), rgba(9, 19, 33, 0.9));
    }

    .contact-panel .eyebrow { margin-bottom: 10px; }

    .contact-panel h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.5rem, 2.3vw, 2rem);
      font-weight: 600;
      letter-spacing: -0.03em;
      color: #f1f6fb;
    }

    .contact-panel p:not(.eyebrow) {
      max-width: 580px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.65;
    }

    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      flex: none;
    }

    .contact-mail {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #c7d6e5;
      font-size: 12px;
      font-weight: 500;
      transition: color 0.2s var(--ease);
    }

    .contact-mail:hover { color: var(--accent); }
    .contact-mail svg { width: 16px; height: 16px; color: var(--accent); }
    .contact-actions .btn { height: 42px; font-size: 12px; }

    .contact-note {
      margin: 16px 0 0;
      color: #607389;
      font-size: 10.5px;
      line-height: 1.55;
    }

    /* ===== User dashboard / analysis ===== */
    .app-page {
      min-height: 70vh;
      background: linear-gradient(180deg, #0a1422 0%, #091321 55%, #08111e 100%);
    }

    .app-hero {
      padding: 58px 0 34px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      background:
        radial-gradient(ellipse 52% 90% at 84% 0%, rgba(46, 230, 166, 0.08), transparent 68%),
        transparent;
    }

    .app-hero .container,
    .app-section > .container { max-width: 1240px; }
    .app-hero .eyebrow { margin-bottom: 14px; }

    .app-hero h1 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(2.05rem, 3.5vw, 3rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.04em;
      color: #f3f8fc;
    }

    .app-hero-lead {
      max-width: 650px;
      margin: 13px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .app-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .app-hero-actions .btn { height: 42px; padding: 0 18px; font-size: 12px; }

    .app-section { padding: 28px 0 64px; }

    .auth-alert--page { margin: 0 0 20px; }

    .dash-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 13px;
      margin-bottom: 22px;
    }

    .dash-stat {
      padding: 19px 20px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: linear-gradient(160deg, rgba(16, 30, 51, 0.9), rgba(10, 20, 34, 0.9));
    }

    .dash-stat > span {
      display: block;
      color: #7e91a8;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .dash-stat strong {
      display: block;
      margin-top: 8px;
      color: var(--accent);
      font-family: var(--font-head);
      font-size: 1.9rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.035em;
    }

    .dash-stat small {
      display: block;
      margin-top: 6px;
      color: #6c8097;
      font-size: 9.5px;
    }

    .dash-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .dash-card {
      min-width: 0;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: linear-gradient(160deg, rgba(15, 29, 49, 0.93), rgba(9, 19, 33, 0.95));
      box-shadow: 0 30px 60px -50px rgba(0, 0, 0, 0.9);
      scroll-margin-top: 100px;
    }

    .dash-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 17px;
    }

    .dash-card-head .eyebrow { margin-bottom: 5px; }

    .dash-card-head h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.18rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #eef5fb;
    }

    .dash-card-head .text-link { margin-top: 2px; flex: none; font-size: 11px; }

    .history-list { display: grid; gap: 8px; }

    .history-item {
      padding: 13px 14px;
      border: 1px solid rgba(255, 255, 255, 0.065);
      border-radius: 10px;
      background: rgba(4, 12, 22, 0.35);
    }

    .history-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .history-match {
      display: block;
      color: #e9f1f8;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.4;
    }

    .history-league {
      display: block;
      margin-top: 3px;
      color: #6f8299;
      font-size: 9.5px;
      line-height: 1.4;
    }

    .history-bottom {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 9px;
    }

    .history-pick {
      flex: 1 1 180px;
      color: #c3d2e2;
      font-size: 11px;
      line-height: 1.45;
    }

    .history-odds {
      color: var(--accent);
      font-family: var(--font-head);
      font-size: 12.5px;
      font-weight: 600;
    }

    .history-confidence { color: #8ea1b7; font-size: 10px; }

    .source-badge {
      flex: none;
      padding: 3px 7px;
      border: 1px solid rgba(127, 161, 199, 0.25);
      border-radius: 5px;
      background: rgba(127, 161, 199, 0.08);
      color: #b9c8db;
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .risk-pill {
      flex: none;
      padding: 3px 7px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 600;
      white-space: nowrap;
    }

    .risk-low { color: #7bf4c9; background: rgba(46, 230, 166, 0.1); border-color: rgba(46, 230, 166, 0.22); }
    .risk-medium { color: #f7d58a; background: rgba(240, 196, 88, 0.08); border-color: rgba(240, 196, 88, 0.2); }
    .risk-high { color: #ff9ba1; background: rgba(255, 111, 119, 0.08); border-color: rgba(255, 111, 119, 0.2); }

    .history-empty {
      padding: 28px 20px;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 11px;
      text-align: center;
    }

    .history-empty > svg {
      width: 30px;
      height: 30px;
      margin: 0 auto 12px;
      color: var(--accent);
      opacity: 0.8;
    }

    .history-empty h3 {
      margin: 0 0 6px;
      font-family: var(--font-head);
      font-size: 1rem;
      font-weight: 600;
      color: #edf4fa;
    }

    .history-empty p {
      max-width: 320px;
      margin: 0 auto 15px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.55;
    }

    .history-empty .btn { height: 39px; padding: 0 16px; font-size: 11px; }

    .dash-side { display: grid; gap: 14px; min-width: 0; }
    .dash-side .dash-card { padding: 20px; }
    .dash-side .eyebrow { margin-bottom: 6px; }

    .dash-side h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.08rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #eef5fb;
    }

    .dash-sub {
      margin: 6px 0 15px;
      color: #71859c;
      font-size: 10.5px;
      line-height: 1.55;
    }

    .dashboard-form { display: grid; gap: 12px; }
    .dashboard-form .field { gap: 6px; }
    .dashboard-form .field > label:not(.checkbox-row) { font-size: 10.5px; }
    .dashboard-form .field-icon svg { width: 15px; height: 15px; }
    .dashboard-form .field-icon { left: 12px; }
    .dashboard-form .field-control input {
      height: 42px;
      padding: 0 42px 0 38px;
      font-size: 12.5px;
      border-radius: 9px;
    }
    .dashboard-form .password-toggle { width: 32px; height: 32px; right: 5px; }
    .dashboard-form .password-toggle svg { width: 16px; height: 16px; }
    .dashboard-form .btn { height: 40px; font-size: 11px; margin-top: 2px; }
    .dashboard-submit { width: 100%; }

    .account-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 14px 0 0;
      color: #60748b;
      font-size: 9.5px;
      line-height: 1.5;
    }

    .account-meta svg { width: 12px; height: 12px; color: var(--accent); flex: none; }

    .danger-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 28px;
      align-items: start;
      margin-top: 18px;
      border-color: rgba(255, 111, 119, 0.16);
      background: linear-gradient(160deg, rgba(33, 21, 31, 0.55), rgba(10, 20, 34, 0.95));
      scroll-margin-top: 100px;
    }

    .danger-copy .eyebrow { color: #ff9ba1; }

    .danger-copy h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.12rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #f3e9ea;
    }

    .danger-copy p:not(.eyebrow) {
      max-width: 620px;
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.65;
    }

    .danger-form { align-self: center; }

    .danger-form .field-control input { border-color: rgba(255, 111, 119, 0.18); }

    .danger-form .field-control input:focus {
      border-color: rgba(255, 111, 119, 0.55);
      box-shadow: 0 0 0 3px rgba(255, 111, 119, 0.07);
    }

    .danger-check { color: #a9b6c7; font-size: 10.5px; }
    .danger-form .btn-danger { width: 100%; height: 42px; margin-top: 2px; font-size: 11.5px; }

    .btn-danger {
      border-color: rgba(255, 111, 119, 0.3);
      background: rgba(255, 111, 119, 0.1);
      color: #ffb0b5;
    }

    .btn-danger:hover {
      border-color: rgba(255, 111, 119, 0.45);
      background: rgba(255, 111, 119, 0.16);
    }

    /* Analysis */
    .analysis-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: 18px;
      align-items: start;
    }

    .analysis-card {
      min-width: 0;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: linear-gradient(160deg, rgba(15, 29, 49, 0.93), rgba(9, 19, 33, 0.95));
      box-shadow: 0 30px 60px -50px rgba(0, 0, 0, 0.9);
    }

    .analysis-card > .eyebrow { margin-bottom: 6px; }

    .analysis-card > h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: #eef5fb;
    }

    .analysis-card .dash-sub { margin-top: 6px; }

    .analysis-form { display: grid; gap: 14px; margin-top: 18px; }

    .field-control select {
      width: 100%;
      height: 48px;
      padding: 0 42px;
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      background: rgba(5, 12, 22, 0.64);
      color: #f2f7fc;
      font-family: var(--font-body);
      font-size: 13px;
      cursor: pointer;
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }

    .field-control select:hover { border-color: rgba(255, 255, 255, 0.18); }

    .field-control select:focus {
      outline: none;
      border-color: rgba(46, 230, 166, 0.65);
      box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.1);
    }

    .field-control select option { background: #0a1422; color: #eef5fb; }

    .select-chevron {
      position: absolute;
      right: 14px;
      display: grid;
      place-items: center;
      color: #7d91a8;
      pointer-events: none;
    }

    .select-chevron svg { width: 15px; height: 15px; }

    .analysis-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
    .analysis-actions .btn { flex: 1 1 140px; height: 44px; font-size: 12px; }

    .api-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 15px;
      padding: 11px 12px;
      border: 1px solid rgba(127, 161, 199, 0.2);
      border-radius: 9px;
      background: rgba(127, 161, 199, 0.06);
      color: #aebed3;
      font-size: 10.5px;
      line-height: 1.55;
    }

    .api-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); }
    .api-note strong { color: #dfe9f4; font-weight: 600; }

    .analysis-help {
      margin: 15px 0 0;
      color: #667a91;
      font-size: 9.5px;
      line-height: 1.55;
    }

    .analysis-card .text-link { margin-top: 14px; font-size: 11px; }

    .analysis-result-card { scroll-margin-top: 100px; }

    .analysis-result-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }

    .analysis-result-head .eyebrow { margin-bottom: 5px; }
    .analysis-result-head h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.18rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #eef5fb;
    }

    .analysis-result-card .auth-alert { margin-top: 0; }

    .analysis-result-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      padding: 28px 20px;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      text-align: center;
    }

    .analysis-result-empty > svg {
      width: 34px;
      height: 34px;
      margin-bottom: 13px;
      color: var(--accent);
      opacity: 0.8;
    }

    .analysis-result-empty h3 {
      margin: 0 0 6px;
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 600;
      color: #edf4fa;
    }

    .analysis-result-empty p {
      max-width: 330px;
      margin: 0;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.6;
    }

    .analysis-result-card .auth-alert + .analysis-result-empty { margin-top: 14px; }

    .result-match-block { margin-top: 4px; }

    .result-match-block h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.35rem, 2.2vw, 1.75rem);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: #f2f7fb;
    }

    .result-meta {
      margin: 6px 0 0;
      color: #71859c;
      font-size: 10.5px;
      line-height: 1.5;
    }

    .analysis-result .pick { margin-top: 18px; }

    .result-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 13px;
    }

    .result-metric {
      padding: 10px 11px;
      border: 1px solid rgba(255, 255, 255, 0.065);
      border-radius: 9px;
      background: rgba(4, 12, 22, 0.35);
    }

    .result-metric span {
      display: block;
      color: #71859c;
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .result-metric strong {
      display: block;
      margin-top: 4px;
      color: #dfeaf4;
      font-family: var(--font-head);
      font-size: 1rem;
      font-weight: 600;
    }

    .result-demo-note {
      margin: 13px 0 0;
      padding: 9px 11px;
      border: 1px solid rgba(127, 161, 199, 0.18);
      border-radius: 8px;
      background: rgba(127, 161, 199, 0.05);
      color: #8fa3b9;
      font-size: 9.5px;
      line-height: 1.5;
    }

    .result-save-note {
      margin: 13px 0 0;
      color: #7d91a8;
      font-size: 10px;
      line-height: 1.5;
    }

    .result-save-note a { color: var(--accent); font-weight: 600; }
    .result-save-note--error { color: #ff9ba1; }

    .result-disclaimer {
      margin: 13px 0 0;
      padding-top: 11px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      color: #60748b;
      font-size: 9px;
      line-height: 1.55;
    }

    /* ===== Account control panel ===== */
    .account-layout {
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .account-sidebar {
      position: sticky;
      top: 100px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }

    .account-nav {
      display: grid;
      gap: 3px;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(10, 20, 34, 0.78);
    }

    .account-nav a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 11px;
      border-radius: 8px;
      color: #8fa1b8;
      font-size: 11.5px;
      font-weight: 500;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
    }

    .account-nav a svg {
      width: 16px;
      height: 16px;
      flex: none;
      opacity: 0.8;
    }

    .account-nav a:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.04);
    }

    .account-nav a.is-active {
      color: var(--accent);
      background: rgba(46, 230, 166, 0.08);
    }

    .account-sidebar-foot {
      display: grid;
      gap: 3px;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(8, 17, 29, 0.6);
    }

    .account-side-link {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 9px 10px;
      border: 0;
      border-radius: 7px;
      background: none;
      color: #7e91a8;
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 500;
      text-align: left;
      cursor: pointer;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
    }

    .account-side-link:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.04);
    }

    .account-side-link svg { width: 15px; height: 15px; flex: none; }
    .account-logout-form { margin: 0; }

    .account-content { min-width: 0; }

    .account-content > .auth-alert {
      position: sticky;
      top: 92px;
      z-index: 20;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.9);
    }

    .account-panel { scroll-margin-top: 100px; }
    .account-panel + .account-panel { margin-top: 32px; }

    .account-panel-head { margin-bottom: 15px; }
    .account-panel-head .eyebrow { margin-bottom: 5px; }

    .account-panel-head h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: #eef5fb;
    }

    .account-panel-head--row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
    }

    .account-panel-head--row .text-link { margin-top: 0; flex: none; font-size: 11px; }

    .overview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .overview-card { padding: 20px; }
    .overview-card .eyebrow { margin-bottom: 6px; }

    .overview-card h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.3rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: #f0f6fb;
    }

    .overview-card p:not(.eyebrow) {
      margin: 8px 0 14px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.6;
    }

    .overview-card .text-link { margin-top: 0; font-size: 11px; }
    .overview-cta { height: 38px; padding: 0 15px; font-size: 11px; }

    .settings-card {
      max-width: 760px;
      padding: 22px;
    }

    .settings-card .dashboard-form { margin-top: 14px; }
    .settings-card .account-meta { margin-top: 15px; }

    .account-panel .danger-card { margin-top: 14px; }

    /* ===== Membership ===== */
    .plan-pill {
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      padding: 2px 7px;
      border: 1px solid rgba(46, 230, 166, 0.3);
      border-radius: 999px;
      background: rgba(46, 230, 166, 0.08);
      color: var(--accent);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: none;
      vertical-align: middle;
    }

    .membership-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      gap: 18px;
      align-items: start;
    }

    .plan-card {
      position: relative;
      overflow: hidden;
      padding: 30px;
      border: 1px solid rgba(46, 230, 166, 0.18);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(19, 38, 61, 0.96), rgba(8, 18, 31, 0.97));
      box-shadow: 0 35px 80px -55px rgba(0, 0, 0, 0.95);
    }

    .plan-card::after {
      content: "";
      position: absolute;
      top: -130px;
      right: -110px;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(46, 230, 166, 0.15), transparent 65%);
      pointer-events: none;
    }

    .plan-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .plan-head .eyebrow { margin-bottom: 7px; }

    .plan-head h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.55rem;
      font-weight: 600;
      letter-spacing: -0.035em;
      color: #f2f8fc;
    }

    .plan-badge {
      flex: none;
      padding: 5px 9px;
      border: 1px solid rgba(46, 230, 166, 0.28);
      border-radius: 6px;
      background: rgba(46, 230, 166, 0.08);
      color: var(--accent);
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .plan-price {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 22px;
    }

    .plan-price strong {
      font-family: var(--font-head);
      font-size: 2.8rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.045em;
      color: #f4f9fd;
    }

    .plan-price span { color: #7e91a8; font-size: 11px; }

    .plan-trial {
      margin: 10px 0 0;
      color: #8fa3b9;
      font-size: 10.5px;
      line-height: 1.5;
    }

    .plan-benefits {
      display: grid;
      gap: 9px;
      margin: 22px 0 0;
      padding: 18px 0 0;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      list-style: none;
    }

    .plan-benefits li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: #c9d6e4;
      font-size: 11.5px;
      line-height: 1.5;
    }

    .plan-benefits svg {
      width: 15px;
      height: 15px;
      flex: none;
      margin-top: 1px;
      color: var(--accent);
    }

    .plan-cta { position: relative; z-index: 1; margin-top: 24px; }
    .plan-cta form { margin: 0; }
    .plan-button { width: 100%; height: 45px; font-size: 12.5px; }
    .plan-sync-form { margin-top: 9px !important; }
    .plan-sync-form .plan-button { height: 39px; color: #b8c9d7; font-size: 11px; }

    .plan-fineprint {
      margin: 10px 0 0;
      color: #667a91;
      font-size: 9px;
      line-height: 1.5;
      text-align: center;
    }

    .plan-active-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font-size: 11.5px;
      font-weight: 600;
    }

    .plan-active-label svg { width: 16px; height: 16px; }
    .dev-form { margin-top: 10px; }

    .dev-form .btn {
      width: 100%;
      height: 39px;
      font-size: 10.5px;
    }

    .dev-note {
      margin: 8px 0 0;
      color: #5f7289;
      font-size: 8.5px;
      line-height: 1.45;
      text-align: center;
    }

    .btn[disabled] {
      opacity: 0.48;
      cursor: not-allowed;
      pointer-events: none;
      box-shadow: none;
    }

    .membership-status-card { padding: 24px; }
    .membership-status-card .eyebrow { margin-bottom: 7px; }

    .membership-status-card > h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.55rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      color: #eef5fb;
    }

    .plan-state {
      display: inline-flex;
      margin-top: 8px;
      padding: 3px 8px;
      border: 1px solid rgba(127, 161, 199, 0.2);
      border-radius: 999px;
      background: rgba(127, 161, 199, 0.06);
      color: #aebed3;
      font-size: 9px;
      font-weight: 600;
    }

    .membership-status-card .status-list {
      margin: 20px 0 0;
      padding: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .membership-status-card .status-row {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.055);
      font-size: 10.5px;
    }

    .membership-status-card .status-row dt { color: #7e91a8; }

    .membership-status-card .status-row dd {
      margin: 0;
      color: #dbe6f1;
      font-weight: 500;
      text-align: right;
    }

    .membership-status-card form { margin-top: 16px; }
    .membership-manage { width: 100%; height: 40px; font-size: 10.5px; }

    .membership-help {
      margin: 13px 0 0;
      color: #6c8097;
      font-size: 9.5px;
      line-height: 1.5;
    }

    .membership-benefits-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      color: #60748b;
      font-size: 9px;
      line-height: 1.5;
    }

    .membership-benefits-note svg {
      width: 14px;
      height: 14px;
      flex: none;
      margin-top: 1px;
      color: var(--accent);
    }

    .premium-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 14px;
      padding: 11px 12px;
      border: 1px solid rgba(46, 230, 166, 0.18);
      border-radius: 9px;
      background: rgba(46, 230, 166, 0.055);
      color: #a8cfc1;
      font-size: 10.5px;
      line-height: 1.55;
    }

    .premium-note svg {
      width: 15px;
      height: 15px;
      flex: none;
      margin-top: 1px;
      color: var(--accent);
    }

    .premium-note a {
      color: var(--accent);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ===== Responsive ===== */
    @media (max-width: 1280px) {
      .container { width: min(100% - 64px, var(--container)); }
      .header-inner { gap: 28px; }
      .main-nav { gap: 25px; }
      .how-grid { grid-template-columns: 290px minmax(0, 1fr); gap: 42px; }
      .steps { gap: 13px; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); }
      .step-sep svg { width: 24px; }
      .hero-note { right: 1%; }
    }

    @media (max-width: 1080px) {
      .hero-note {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        width: max-content;
        margin: 24px 0 6px auto;
        transform: rotate(-6deg);
        text-align: right;
      }

      .hero-note .script { font-size: clamp(25px, 3.4vw, 31px); }
      .hero-note svg { right: -4px; bottom: -10px; width: 135px; }

      .hero h1 { font-size: clamp(2.8rem, 5vw, 3.7rem); }
      .how-grid { grid-template-columns: 1fr; gap: 34px; }
      .how-intro p:not(.eyebrow) { max-width: 480px; }
      .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
      .step-sep { display: none; }
      .step-top { gap: 12px; }
      .step-num { width: 40px; height: 40px; font-size: 14px; }
      .step-icon svg { width: 25px; height: 25px; }
      .step p { max-width: 100%; font-size: 12.5px; margin-left: 52px; }
      .step h3 { margin-left: 52px; }
      .dashboard-grid { max-width: none; }
      .team { font-size: 1.15rem; }
      .badge { width: 43px; height: 43px; }
    }

    @media (max-width: 960px) {
      .header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
      }
      .main-nav { gap: 8px; justify-content: center; }
      .main-nav a { font-size: 12px; }
      .header-actions { gap: 6px; margin-left: 0; }
      .header-actions .btn { padding: 0 10px; font-size: 11.5px; }
      .header-actions .btn-ghost { min-width: 78px; }
      .header-actions .btn-primary { min-width: 89px; }
    }

    @media (max-width: 920px) {
      .header-inner { height: 70px; }
      .how { padding-top: 50px; }
      .hero { min-height: 490px; }
      .hero-media img { filter: saturate(0.54) brightness(0.72) contrast(1.03); }
      .dashboard { padding-bottom: 60px; }
      .dashboard-grid { grid-template-columns: 1fr; gap: 18px; }
      .pitch-backdrop { width: 100%; opacity: 0.55; }
      .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .feature { flex-direction: column; gap: 12px; }
      .footer-brand p { white-space: normal; }
    }

    @media (max-width: 760px) {
      .header-inner { display: flex; }
      .main-nav { display: none; }
      .header-actions { margin-left: auto; }
      .header-actions .btn-ghost,
      .header-actions .btn-primary { min-width: 0; }
      .menu-toggle { display: flex; }
    }

    @media (max-width: 720px) {
      .container { width: calc(100% - 40px); }
      .header-inner { gap: 14px; }
      .header-actions .btn-login { display: none; }
      .header-actions .btn-primary { height: 37px; padding: 0 15px; font-size: 12px; }
      .brand-name { font-size: 20px; }
      .brand-mark { width: 29px; height: 26px; }
      .brand { gap: 11px; }
      .hero { min-height: 460px; }
      .hero-media img { object-position: 58% 48%; }
      .hero-inner { padding-top: 54px; padding-bottom: 72px; }
      .hero h1 { font-size: clamp(2.35rem, 9.5vw, 3rem); letter-spacing: -0.04em; }
      .hero-lead { margin-top: 18px; font-size: 14.5px; line-height: 1.62; max-width: 94%; }
      .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; margin-bottom: 14px; }
      .hero-copy .eyebrow { margin-bottom: 16px; }
      .how-intro h2 { font-size: 1.85rem; }
      .steps { grid-template-columns: 1fr; gap: 26px; padding-top: 2px; }
      .step { padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
      .step:last-child { padding-bottom: 0; border-bottom: 0; }
      .step h3 { margin: 15px 0 7px; }
      .step p { margin-left: 0; font-size: 13px; }
      .match-card { padding: 0 16px 16px; border-radius: 15px; }
      .match-head { gap: 10px; font-size: 10.5px; padding: 14px 1px; flex-wrap: wrap; }
      .league { max-width: 100%; }
      .kickoff { margin-left: 0; width: 100%; padding-top: 2px; font-size: 10.5px; }
      .sport svg { width: 14px; height: 14px; }
      .teams { gap: 8px; padding: 20px 0 18px; }
      .team { flex-direction: column-reverse; gap: 7px; font-size: 0.97rem; text-align: center; }
      .team-away { flex-direction: column; }
      .badge { width: 40px; height: 40px; }
      .vs { font-size: 0.62rem; }
      .tabs { margin: 0 -16px; padding: 0 16px; gap: 22px; }
      .pick { flex-wrap: wrap; padding: 14px; gap: 12px; }
      .pick-icon { width: 40px; height: 40px; }
      .pick-icon svg { width: 18px; height: 18px; }
      .pick-text strong { font-size: 1.04rem; }
      .odds { margin-left: 0; flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; }
      .odds strong { font-size: 1.1rem; }
      .features { grid-template-columns: 1fr; }
      .feature { flex-direction: row; padding: 15px 16px; }
      .feature h3 { font-size: 0.93rem; }
      .feature p { font-size: 12px; }
      .footer-inner { gap: 18px; }
      .footer-brand { width: 100%; justify-content: space-between; gap: 12px; }
      .footer-brand > div { display: flex; align-items: center; gap: 12px; }
      .footer-nav { margin-left: 0; width: 100%; gap: 20px; flex-wrap: wrap; }
      .socials { width: 100%; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 5px; }
    }

    @media (max-width: 380px) {
      .header-actions .btn-primary { display: none; }
      .hero h1 { font-size: 2.15rem; }
    }

    @media (max-width: 1000px) {
      .auth-shell { grid-template-columns: 1fr; max-width: 640px; min-height: 0; }
      .auth-visual { order: -1; min-height: 230px; }
      .auth-visual-content { padding: 28px; }
      .auth-visual h2 { font-size: 1.5rem; max-width: 440px; }
      .auth-visual-content > p:not(.eyebrow),
      .auth-visual-list { display: none; }
      .auth-visual-script { display: none; }
      .auth-main { align-items: flex-start; padding-top: 14px; }
      .auth-card { padding: 36px 34px 32px; }
    }

    @media (max-width: 620px) {
      .auth-topbar-inner { min-height: 70px; gap: 12px; }
      .auth-back { font-size: 11.5px; }
      .auth-back svg { width: 15px; height: 15px; }
      .auth-main { padding: 4px 0 30px; }
      .auth-shell { border-radius: 16px; }
      .auth-visual { min-height: 168px; }
      .auth-visual-content { padding: 20px; }
      .auth-visual-content .eyebrow { margin-bottom: 8px; font-size: 9.5px; }
      .auth-visual h2 { font-size: 1.2rem; max-width: 320px; }
      .auth-card { padding: 28px 22px 26px; }
      .auth-card h1 { font-size: 2rem; }
      .auth-lead { font-size: 12.5px; }
      .auth-form { margin-top: 23px; gap: 14px; }
      .field-control input { height: 47px; font-size: 16px; }
      .auth-submit { height: 46px; }
      .account-head { align-items: flex-start; gap: 12px; }
      .account-avatar { width: 46px; height: 46px; font-size: 16px; }
      .account-head h1 { font-size: 1.6rem; }
      .account-details { margin-top: 20px; }
      .account-row { padding: 12px 13px; flex-wrap: wrap; gap: 4px; }
      .account-row dd { text-align: left; }
      .account-actions { display: grid; grid-template-columns: 1fr; }
      .account-actions .btn,
      .account-logout,
      .account-logout .btn { width: 100%; }
      .auth-footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
    }

    @media (max-width: 1000px) {
      .page-hero { padding: 64px 0 52px; }
      .page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
      .page-section { padding: 50px 0; }
      .page-section--alt { padding: 50px 0; }
      .faq-layout { grid-template-columns: 1fr; gap: 26px; max-width: 760px; }
      .faq-side { position: static; grid-template-columns: 1fr; }
      .about-intro { grid-template-columns: 1fr; gap: 32px; }
      .about-facts { grid-template-columns: repeat(3, 1fr); }
      .value-grid { grid-template-columns: repeat(2, 1fr); }
      .value-grid .value-card:last-child { grid-column: 1 / -1; }
      .cta-panel { flex-direction: column; align-items: flex-start; }
      .contact-panel { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 720px) {
      .page-hero { padding: 48px 0 42px; }
      .page-hero-lead { margin-top: 16px; font-size: 13.5px; }
      .page-hero-actions { margin-top: 22px; }
      .page-section { padding: 42px 0; }
      .page-section--alt { padding: 42px 0; }
      .section-heading { margin-bottom: 22px; }
      .faq-item summary { gap: 12px; padding: 15px 16px; font-size: 13.5px; }
      .faq-body { padding: 0 16px 15px; font-size: 12.5px; }
      .faq-body p { max-width: 100%; }
      .faq-marker { width: 24px; height: 24px; }
      .help-card { padding: 22px; }
      .about-intro { gap: 26px; }
      .about-copy p:not(.eyebrow) { font-size: 13.5px; }
      .about-facts { grid-template-columns: 1fr; }
      .fact { padding: 16px 18px; }
      .fact strong { min-width: 54px; font-size: 1.9rem; }
      .value-grid { grid-template-columns: 1fr; }
      .value-grid .value-card:last-child { grid-column: auto; }
      .cta-panel { gap: 22px; padding: 26px 22px; border-radius: 14px; }
      .cta-actions { width: 100%; }
      .cta-actions .btn { flex: 1; }
      .contact-panel { padding: 24px 22px; border-radius: 14px; }
      .contact-actions { width: 100%; flex-direction: column; align-items: stretch; }
      .contact-actions .btn { width: 100%; }
    }

    @media (max-width: 1000px) {
      .dash-grid { grid-template-columns: 1fr; }
      .dash-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .danger-card { grid-template-columns: 1fr; }
      .danger-form { max-width: 440px; }
      .membership-grid { grid-template-columns: 1fr; }
      .account-layout { grid-template-columns: 1fr; gap: 20px; }
      .account-sidebar { position: static; }
      .account-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: auto;
        scrollbar-width: none;
      }
      .account-nav::-webkit-scrollbar { display: none; }
      .account-nav a {
        justify-content: center;
        padding: 9px 8px;
        font-size: 10.5px;
        white-space: nowrap;
      }
      .account-nav a svg { width: 14px; height: 14px; }
      .account-sidebar-foot {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .account-sidebar-foot .account-side-link { width: auto; }
      .analysis-grid { grid-template-columns: 1fr; }
      .analysis-result-empty { min-height: 220px; }
    }

    @media (max-width: 720px) {
      .app-hero { padding: 40px 0 28px; }
      .app-section { padding: 22px 0 48px; }
      .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dash-stat:last-child { grid-column: 1 / -1; }
      .dash-side { grid-template-columns: 1fr; }
      .dash-card,
      .analysis-card { padding: 18px; }
      .danger-form { max-width: none; }
      .plan-card { padding: 22px; }
      .plan-price strong { font-size: 2.3rem; }
      .membership-status-card { padding: 18px; }
      .account-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
      }
      .account-nav a { justify-content: center; white-space: nowrap; }
      .account-content > .auth-alert { position: static; }
      .overview-grid { grid-template-columns: 1fr; }
      .account-panel-head--row { flex-direction: column; align-items: flex-start; gap: 8px; }
      .settings-card { max-width: none; }
      .dash-card-head { flex-direction: column; gap: 9px; }
      .history-pick { flex-basis: 100%; }
      .history-bottom { gap: 8px; }
      .dashboard-form .field-control input { font-size: 16px; }
      .field-control select { height: 47px; font-size: 16px; }
      .analysis-actions .btn { flex: 1 1 100%; }
      .result-metrics { gap: 6px; }
      .result-metric { padding: 9px 9px; }
      .analysis-result-empty { min-height: 200px; padding: 24px 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    /* ===== Result status pills ===== */
    .status-pill {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 9px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      color: #c7d2e1;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .status-won {
      border-color: rgba(46, 230, 166, 0.25);
      background: rgba(46, 230, 166, 0.08);
      color: #8df6d5;
    }

    .status-lost {
      border-color: rgba(255, 111, 119, 0.25);
      background: rgba(255, 111, 119, 0.07);
      color: #ffb0b5;
    }

    .status-void,
    .status-pending {
      border-color: rgba(127, 161, 199, 0.22);
      background: rgba(127, 161, 199, 0.06);
      color: #b9c8db;
    }

    .status-needs_review {
      border-color: rgba(255, 205, 120, 0.25);
      background: rgba(255, 205, 120, 0.07);
      color: #ffd59a;
    }

    .history-badges {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: none;
    }

    /* ===== Language switch ===== */
    .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin-right: 4px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.02);
    }

    .lang-switch a {
      display: grid;
      place-items: center;
      min-width: 30px;
      height: 24px;
      padding: 0 7px;
      border-radius: 999px;
      color: #8ea1b7;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
    }

    .lang-switch a.is-active {
      background: rgba(46, 230, 166, 0.12);
      color: var(--accent);
    }

    .auth-topbar-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    /* ===== Analysis page additions ===== */
    .analysis-limit {
      margin: 7px 0 0;
      color: #7e91a8;
      font-size: 10px;
    }

    .analysis-limit strong { color: var(--accent); }

    .analysis-comment {
      margin-top: 14px;
      padding: 14px 15px;
      border: 1px solid rgba(46, 230, 166, 0.18);
      border-radius: 11px;
      background: rgba(46, 230, 166, 0.05);
    }

    .analysis-comment-label {
      display: block;
      margin-bottom: 6px;
      color: var(--accent);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .analysis-comment p {
      margin: 0;
      color: #c7d2e1;
      font-size: 12px;
      line-height: 1.7;
    }

    .job-spinner {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(46, 230, 166, 0.18);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: job-spin 0.9s linear infinite;
    }

    @keyframes job-spin {
      to { transform: rotate(360deg); }
    }

    .match-suggestions {
      position: relative;
      z-index: 20;
      margin-top: 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #0a1422;
      overflow: hidden;
    }

    .match-suggestion {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      background: transparent;
      color: #eef5fb;
      font-size: 12px;
      text-align: left;
      cursor: pointer;
    }

    .match-suggestion:last-child { border-bottom: 0; }
    .match-suggestion strong { font-weight: 600; }
    .match-suggestion span { flex: none; color: #7e91a8; font-size: 10px; }
    .match-suggestion:hover,
    .match-suggestion.is-active { background: rgba(46, 230, 166, 0.08); }

    /* ===== Upcoming matches ===== */
    .upcoming { padding: 34px 0 6px; }

    .upcoming-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 16px;
    }

    .upcoming-head h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.35rem, 2.2vw, 1.75rem);
      font-weight: 600;
      letter-spacing: -0.03em;
      color: #f3f8fc;
    }

    .upcoming-head > p {
      max-width: 430px;
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.6;
    }

    .upcoming-list { display: grid; gap: 8px; }

    .upcoming-item {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: linear-gradient(160deg, rgba(15, 29, 49, 0.82), rgba(9, 19, 33, 0.88));
    }

    .upcoming-teams {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .upcoming-teams strong {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 600;
      color: #eef5fb;
    }

    .upcoming-teams span { color: #667a91; }

    .upcoming-meta {
      display: flex;
      flex: none;
      gap: 12px;
      color: #7e91a8;
      font-size: 10.5px;
    }

    .upcoming-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: none;
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
    }

    .upcoming-link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
    .upcoming-link:hover svg { transform: translateX(3px); }

    /* ===== Stats page ===== */
    .stats-winrate { margin-bottom: 22px; }

    .stats-winrate-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .stats-winrate-label {
      color: #7e91a8;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .stats-winrate-value {
      display: block;
      margin-top: 6px;
      color: var(--accent);
      font-family: var(--font-head);
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .stats-winrate-head small {
      display: block;
      margin-top: 6px;
      color: #6c8097;
      font-size: 10px;
    }

    .stats-winrate-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid rgba(46, 230, 166, 0.2);
      border-radius: 999px;
      color: var(--accent);
      font-size: 10px;
      white-space: nowrap;
    }

    .stats-winrate-tag svg { width: 13px; height: 13px; }

    .stats-bar {
      margin-top: 14px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .stats-bar div {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(46, 230, 166, 0.65), var(--accent));
    }

    /* ===== Daily analysis ===== */
    .daily-card { display: grid; gap: 14px; }

    .daily-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line-soft);
      color: #7e91a8;
      font-size: 10.5px;
    }

    .daily-text {
      color: #c7d2e1;
      font-size: 13px;
      line-height: 1.75;
    }

    .daily-card form { margin-top: 6px; }

    /* ===== Landing record band ===== */
    .record {
      padding: 26px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      background: linear-gradient(180deg, rgba(13, 23, 39, 0.55), transparent);
    }

    .record-inner {
      display: flex;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    .record-cell { display: flex; flex-direction: column; gap: 2px; }

    .record-cell strong {
      font-family: var(--font-head);
      font-size: 1.55rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.035em;
      color: var(--accent);
    }

    .record-cell span {
      color: #7e91a8;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .record-note {
      margin: 0 0 0 auto;
      max-width: 380px;
      color: #667a91;
      font-size: 10.5px;
      line-height: 1.6;
      text-align: right;
    }

    @media (max-width: 720px) {
      .record-inner { gap: 22px 30px; }
      .record-note { margin-left: 0; text-align: left; }
    }

    /* ===== Legal & help pages ===== */
    .legal-content { max-width: 900px; }

    .legal-content h2 {
      margin: 26px 0 8px;
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: #eef5fb;
    }

    .legal-content h2:first-child { margin-top: 0; }

    .legal-content p,
    .legal-content li {
      color: #a9b8ca;
      font-size: 13px;
      line-height: 1.75;
    }

    .legal-content ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; }
    .legal-content a { color: var(--accent); }

    .legal-updated { margin-top: 26px; color: #61748a; font-size: 10px; }

    .help-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .help-contact h2 {
      margin: 0 0 8px;
      font-family: var(--font-head);
      font-size: 1.15rem;
      letter-spacing: -0.02em;
      color: #eef5fb;
      word-break: break-word;
    }

    .help-contact p { color: #9fb0c4; font-size: 12px; line-height: 1.65; }

    .help-contact .contact-mail {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
    }

    .help-contact .contact-mail svg { width: 15px; height: 15px; }
    .help-note { margin-top: 14px; color: #61748a; font-size: 10px; }

    @media (max-width: 900px) {
      .help-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .upcoming-head { flex-direction: column; align-items: flex-start; gap: 8px; }
      .upcoming-item { flex-wrap: wrap; gap: 8px 14px; }
      .upcoming-teams { flex-basis: 100%; }
      .upcoming-meta { flex: 1; }
    }
/* Clearly identify the sample match shown on the public homepage. */
.demo-banner { display: flex; align-items: center; gap: 9px; padding: 15px 2px 0; color: #a8b9c8; font-size: 11px; font-weight: 600; }
.demo-badge { padding: 4px 7px; border: 1px solid rgba(46,230,166,.3); border-radius: 5px; color: #65e8ba; background: rgba(46,230,166,.09); font-size: 9px; letter-spacing: .1em; }
.demo-disclaimer { margin: -8px 0 16px; color: #91a5b7; font-size: 11px; line-height: 1.5; }
.demo-news-label { flex: none; color: #8da2b6; font-size: 11px; }
@media (max-width: 520px) { .match-head { flex-wrap: wrap; gap: 9px; } .match-head .kickoff { margin-left: auto; font-size: 10px; } }
/* Homepage call-to-action */
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.home-hero-actions .btn { min-height: 48px; font-size: 14px; }
.home-hero-actions .home-demo-link { margin-left: 6px; }
@media (max-width: 720px) {
  .home-page .header-inner { height: 64px; }
  .home-page .header-actions { gap: 10px; }
  .home-page .menu-toggle { width: 44px; height: 44px; }
  .home-page .mobile-menu { max-height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 24px; }
  .home-page .mobile-menu a:not(.btn) { min-height: 48px; }
  .home-page .mobile-menu-actions .btn { min-height: 46px; }
  .home-page .hero { min-height: 0; }
  .home-page .hero-inner { padding-top: 52px; padding-bottom: 54px; }
  .home-page .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.08; }
  .home-page .hero-lead { max-width: 38rem; font-size: 15px; }
  .home-page .hero-note { display: none; }
  .home-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; }
  .home-hero-actions .btn { min-height: 48px; font-size: 14px; }
  .home-hero-actions .btn-ghost { border-color: rgba(255,255,255,.18); background: rgba(8,17,29,.46); }
  .home-hero-actions .home-demo-link { margin-left: 0; }
  .home-demo-link { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; color: #b9ccda; font-size: 13px; font-weight: 600; }
  .home-demo-link span { color: var(--accent); font-size: 16px; }
  .home-page .how { padding: 46px 0; }
  .home-page .how-grid { gap: 26px; }
  .home-page .steps { gap: 12px; }
  .home-page .step { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(15, 30, 47, .6); }
  .home-page .step-top { grid-row: 1 / span 2; }
  .home-page .step-icon { display: none; }
  .home-page .step-num { width: 40px; height: 40px; }
  .home-page .step h3 { margin: 1px 0 6px; font-size: 15px; }
  .home-page .step p { margin: 0; font-size: 13px; line-height: 1.55; }
  .home-page .dashboard { padding: 0 0 48px; }
  .home-page .match-card { overflow: hidden; }
  .home-page .match-head { flex-wrap: wrap; }
  .home-page .kickoff { width: auto; margin-left: auto; padding: 0; }
  .home-page .teams { padding: 20px 0 22px; }
  .home-page .tabs { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .home-page .tabs::-webkit-scrollbar { display: none; }
  .home-page .tab { flex: 1 0 auto; min-height: 46px; padding: 0 12px; font-size: 12px; }
  .home-page .demo-disclaimer { font-size: 12px; }
  .home-page .features { gap: 10px; }
  .home-page .feature { align-items: flex-start; }
  .home-page .feature p { font-size: 13px; line-height: 1.5; }
  .home-page .footer-nav a { min-height: 36px; display: inline-flex; align-items: center; }
  .home-page a:focus-visible, .home-page button:focus-visible { outline: 2px solid #65f8ca; outline-offset: 3px; }
}
@media (max-width: 380px) {
  .home-page .container { width: calc(100% - 32px); }
  .home-page .brand { gap: 8px; }
  .home-page .brand-name { font-size: 18px; }
  .home-page .hero h1 { font-size: 2.15rem; }
  .home-page .tabs { margin: 0 -16px; }
}
.home-mobile-nav { display: none; }
@media (max-width: 720px) {
  .home-page .home-mobile-nav { display: block; border-top: 1px solid rgba(255,255,255,.06); background: #0a1522; }
  .home-mobile-nav-inner { display: flex; gap: 4px; width: calc(100% - 24px); margin: 0 auto; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .home-mobile-nav-inner::-webkit-scrollbar { display: none; }
  .home-mobile-nav a { display: flex; flex: 1 0 auto; justify-content: center; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #c1d0db; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .home-mobile-nav a:active { background: rgba(46,230,166,.1); color: #65e8ba; }
  .home-page .mobile-menu { max-height: calc(100dvh - 108px); }
  .home-page #rungtynes, .home-page #kaip-veikia { scroll-margin-top: 120px; }
}
@media (max-width: 380px) {
  .home-mobile-nav-inner { width: calc(100% - 12px); }
  .home-mobile-nav a { padding: 0 10px; }
}
.mobile-menu-heading { display: none; }
@media (max-width: 720px) {
  .home-page .mobile-menu { width: calc(100% - 32px); max-height: calc(100dvh - 76px); margin: 0 auto 12px; padding: 16px; border: 1px solid rgba(151,183,199,.15); border-radius: 14px; background: #101e2d; box-shadow: 0 20px 45px rgba(0,0,0,.35); }
  .home-page .mobile-menu-heading { display: block; margin: 0 8px 8px; color: #8297a7; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .home-page .mobile-menu nav { display: grid; gap: 2px; }
  .home-page .mobile-menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; color: #e4edf1; }
  .home-page .mobile-menu a:not(.btn)::after { content: '›'; color: #6f8796; font-size: 22px; font-weight: 400; }
  .home-page .mobile-menu a.is-active { color: #65e8ba; background: rgba(46,230,166,.08); }
  .home-page .mobile-menu-actions { margin-top: 14px; }
  .home-page #rungtynes, .home-page #kaip-veikia { scroll-margin-top: 78px; }
}
.mobile-menu-art, .mobile-menu-top { display: none; }
@media (max-width: 720px) {
  .home-page.home-menu-open { overflow: hidden; }
  .home-page .site-header.is-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .home-page .mobile-menu:not([hidden]) { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; width: 100%; height: 100dvh; max-height: none; margin: 0; padding: max(22px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 0; background: radial-gradient(circle at 100% 12%, #174336, transparent 45%), #081521; animation: menu-reveal .55s cubic-bezier(.2,.7,.2,1) both; }
  .home-page .mobile-menu-art { position: absolute; display: block; top: -115px; right: -130px; width: min(88vw, 480px); color: #55edb9; opacity: .12; pointer-events: none; animation: menu-ball .8s cubic-bezier(.2,.7,.2,1) both; }
  .home-page .mobile-menu-art svg { width: 100%; height: auto; }
  .home-page .mobile-menu-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(35px, 8vh, 76px); }
  .home-page .mobile-menu-brand { color: white; font-family: var(--font-head); font-size: 20px; font-weight: 700; }
  .home-page .mobile-menu-close { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.06); color: white; font-size: 30px; line-height: 1; cursor: pointer; }
  .home-page .mobile-menu-heading { position: relative; margin: 0 0 12px; color: #74e8bf; }
  .home-page .mobile-menu nav { position: relative; gap: 0; }
  .home-page .mobile-menu a:not(.btn) { min-height: 62px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0; font-family: var(--font-head); font-size: clamp(20px, 5vw, 25px); }
  .home-page .mobile-menu a.is-active { background: transparent; }
  .home-page .mobile-menu-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 30px; }
  .home-page .mobile-menu-actions .btn { min-height: 50px; }
  @keyframes menu-reveal { from { clip-path: circle(0% at calc(100% - 40px) 32px); } to { clip-path: circle(150% at calc(100% - 40px) 32px); } }
  @keyframes menu-ball { from { opacity: 0; transform: scale(.25) rotate(-100deg); } to { opacity: .12; transform: scale(1) rotate(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .mobile-menu:not([hidden]), .home-page .mobile-menu-art { animation: none; }
}
@media (max-width: 720px) { .home-page .mobile-menu:not([hidden]) { overflow-x: hidden; } }

@media (max-width: 720px) { .home-page .mobile-menu-art { filter: blur(3px); } }
/* Full-page opening animation on the homepage. */
.home-loading { display: none; }
.home-is-loading { overflow: hidden; }
.home-is-loading .home-loading, .home-loading.is-finished { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(circle at center, #123b32, #081521 60%); transition: opacity .35s ease, visibility .35s ease; }
.home-loading.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.home-loading-ball { display: block; width: clamp(110px, 24vw, 190px); color: #55edb9; filter: drop-shadow(0 0 26px rgba(46,230,166,.3)); animation: home-loading-spin 1.1s cubic-bezier(.2,.65,.3,1) both; }
.home-loading-ball svg { width: 100%; height: auto; }
@keyframes home-loading-spin { from { opacity: 0; transform: scale(.5) rotate(-100deg); } 25% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(220deg); } }
@media (prefers-reduced-motion: reduce) { .home-loading-ball { animation: none; } }
.home-loading-mark { display: flex; align-items: center; justify-content: center; gap: 16px; }
.home-loading-ball { width: clamp(52px, 12vw, 76px); animation: home-ball-roll 1s cubic-bezier(.22,.7,.25,1) both; }
.home-loading-name { color: #f3faf7; font-family: var(--font-head); font-size: clamp(1.75rem, 7vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; animation: home-name-reveal .65s .75s ease both; }
@keyframes home-ball-roll { from { opacity: 0; transform: translateX(-90px) rotate(-300deg); } 15% { opacity: 1; } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes home-name-reveal { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .home-loading-ball, .home-loading-name { animation: none; } }
.footer-mobile-links { display: none; }
@media (max-width: 720px) {
  .home-page .site-footer { padding-top: 24px; padding-bottom: 24px; }
  .home-page .footer-inner { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .home-page .footer-brand { justify-content: flex-start; gap: 12px; }
  .home-page .footer-brand > div { display: none; }
  .home-page .footer-brand .age-badge { margin-left: auto; }
  .home-page .footer-nav { display: none; }
  .home-page .footer-mobile-links { display: block; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
  .home-page .footer-mobile-links summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: #c5d3df; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
  .home-page .footer-mobile-links summary::-webkit-details-marker { display: none; }
  .home-page .footer-mobile-links summary::after { content: '+'; color: #62e2b5; font-size: 20px; font-weight: 400; }
  .home-page .footer-mobile-links[open] summary::after { content: '−'; }
  .home-page .footer-mobile-links nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 0 0 12px; }
  .home-page .footer-mobile-links nav a { display: flex; align-items: center; min-height: 38px; color: #a9bbcb; font-size: 12px; }
  .home-page .socials { width: auto; }
  .home-page .footer-bottom { margin-top: 16px; padding-top: 14px; }
}
.brand-mark { width: 36px; height: 36px; object-fit: contain; }
@media (max-width: 720px) { .brand-mark { width: 32px; height: 32px; } }

.home-loading-ball img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .home-page .hero-media img { object-position: 78% center; } }
/* Desktop public-site header */
@media (min-width: 761px) {
  .site-header { background: rgba(7, 17, 29, .94); border-bottom: 1px solid rgba(168, 203, 211, .1); box-shadow: 0 12px 35px rgba(0, 0, 0, .12); }
  .site-header .header-inner { display: flex; gap: 24px; height: 76px; }
  .site-header .brand { gap: 10px; }
  .site-header .brand-mark { width: 38px; height: 38px; }
  .site-header .brand-name { font-size: 21px; }
  .site-header .main-nav { display: flex; justify-content: center; flex: 1; gap: 3px; height: auto; margin: 0 auto; }
  .site-header .main-nav a { height: 42px; padding: 0 15px; border-radius: 9px; color: #a8bac8; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .site-header .main-nav a:hover { color: #f4fbf8; background: rgba(255,255,255,.055); }
  .site-header .main-nav a.is-active { color: #78eec5; background: rgba(46,230,166,.09); }
  .site-header .main-nav a.is-active::after { display: none; }
  .site-header .header-actions { flex: none; gap: 9px; }
  .site-header .header-actions .lang-switch { margin-right: 8px; }
  .site-header .header-actions .btn { height: 42px; padding-inline: 18px; border-radius: 9px; font-size: 12.5px; }
  .site-header .header-actions .btn-ghost { border-color: transparent; background: transparent; color: #d5e3e8; }
  .site-header .header-actions .btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
  .site-header .header-actions .btn-primary { box-shadow: none; }
  .site-header .header-actions .btn-primary:hover { box-shadow: 0 8px 25px rgba(46,230,166,.18); }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .site-header .header-inner { width: calc(100% - 40px); gap: 12px; }
  .site-header .brand-name { font-size: 18px; }
  .site-header .brand-mark { width: 32px; height: 32px; }
  .site-header .main-nav a { padding-inline: 8px; font-size: 12px; }
  .site-header .header-actions { gap: 4px; }
  .site-header .header-actions .lang-switch { margin-right: 2px; }
  .site-header .header-actions .btn { padding-inline: 10px; font-size: 12px; }
}