:root {
      --navy: #07152f;
      --navy-2: #0b2148;
      --blue: #1d4ed8;
      --blue-2: #2563eb;
      --saffron: #f59e0b;
      --gold: #f7c948;
      --emerald: #10b981;
      --green: #16a34a;
      --purple: #7c3aed;
      --red: #ef4444;
      --ink: #0f172a;
      --body: #475569;
      --muted: #64748b;
      --line: rgba(15, 23, 42, .1);
      --soft: #f5f7fb;
      --paper: rgba(255, 255, 255, .86);
      --white: #fff;
      --shadow: 0 18px 50px rgba(7, 21, 47, .12);
      --shadow-soft: 0 10px 30px rgba(15, 23, 42, .08);
      --radius: 8px;
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(900px 520px at 82% -10%, rgba(37, 99, 235, .2), transparent 58%),
        radial-gradient(680px 460px at 8% 3%, rgba(245, 158, 11, .16), transparent 58%),
        linear-gradient(180deg, #f8fbff 0%, #eef4ff 42%, #f7fafc 100%);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
    }

    button, input, select { font: inherit; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, p { margin: 0; }
    svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .page { min-height: 100vh; }
    .wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(20px);
      background: rgba(248, 251, 255, .82);
      border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    .topbar {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      color: var(--navy);
      letter-spacing: -.02em;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: #fff;
      overflow: hidden;
      background: linear-gradient(135deg, var(--navy), var(--blue) 52%, var(--saffron));
      box-shadow: 0 12px 24px rgba(29, 78, 216, .26);
    }
    .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

    .brand span { display: block; font-size: 18px; line-height: 1; }
    .brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

    .landing-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #334155;
      font-size: 14px;
      font-weight: 750;
    }

    .landing-nav a {
      padding: 10px 12px;
      border-radius: var(--radius);
      transition: .2s ease;
    }

    .landing-nav a:hover { color: var(--blue); background: rgba(37, 99, 235, .08); }

    .header-actions { display: flex; align-items: center; gap: 10px; }
    .btn {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      min-height: 42px;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255,255,255,.9);
      color: var(--navy);
      cursor: pointer;
      font-size: 14px;
      font-weight: 850;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(29, 78, 216, .24); }
    .btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 14px 28px rgba(29, 78, 216, .28); }
    .btn.gold { border: 0; color: #201306; background: linear-gradient(135deg, #facc15, var(--saffron)); box-shadow: 0 14px 28px rgba(245, 158, 11, .26); }
    .btn.green { border: 0; color: #fff; background: linear-gradient(135deg, var(--emerald), #0f766e); }
    .btn.battle { border: 0; color: #fff; background: linear-gradient(135deg, var(--purple), var(--red)); box-shadow: 0 14px 28px rgba(124, 58, 237, .24); }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 72px 0 48px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
      gap: 44px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(29, 78, 216, .14);
      box-shadow: var(--shadow-soft);
      color: var(--blue);
      font-size: 13px;
      font-weight: 850;
    }

    .hero h1 {
      margin-top: 20px;
      color: var(--navy);
      font-size: clamp(42px, 6vw, 76px);
      line-height: .95;
      letter-spacing: -.055em;
    }

    .hero h1 span {
      background: linear-gradient(135deg, var(--blue), var(--purple) 50%, var(--saffron));
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-copy {
      margin-top: 22px;
      max-width: 620px;
      color: #334155;
      font-size: 18px;
      line-height: 1.75;
      font-weight: 550;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .hero-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 32px;
      max-width: 620px;
    }
    .proof-tile {
      border: 1px solid rgba(15,23,42,.08);
      border-radius: var(--radius);
      padding: 15px;
      background: rgba(255,255,255,.72);
      box-shadow: var(--shadow-soft);
    }
    .proof-tile strong { display: block; color: var(--navy); font-size: 22px; letter-spacing: -.03em; }
    .proof-tile span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

    .hero-visual {
      position: relative;
      min-height: 610px;
    }

    .dashboard-preview {
      position: absolute;
      inset: 26px 0 auto 0;
      border: 1px solid rgba(255, 255, 255, .66);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,239,255,.86)),
        radial-gradient(520px 300px at 90% 4%, rgba(245,158,11,.24), transparent);
      box-shadow: 0 32px 90px rgba(7, 21, 47, .22);
      overflow: hidden;
      animation: floatIn .7s ease both;
    }

    .preview-top {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid rgba(15, 23, 42, .08);
      background: rgba(255,255,255,.72);
    }
    .window-dots { display: flex; gap: 7px; }
    .window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
    .window-dots i:nth-child(2) { background: #f59e0b; }
    .window-dots i:nth-child(3) { background: #22c55e; }

    .preview-body { display: grid; grid-template-columns: 155px 1fr; min-height: 410px; }
    .preview-side { padding: 18px 12px; background: rgba(7, 21, 47, .94); color: rgba(255,255,255,.78); }
    .side-pill { height: 32px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 10px; border-radius: var(--radius); font-size: 12px; font-weight: 800; }
    .side-pill.active { color: #fff; background: rgba(37,99,235,.72); }
    .preview-main { padding: 18px; }
    .preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .mini-stat { min-height: 78px; border: 1px solid rgba(15,23,42,.08); border-radius: var(--radius); padding: 12px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.06); }
    .mini-stat b { display: block; margin-top: 8px; color: var(--navy); font-size: 20px; letter-spacing: -.03em; }
    .mini-stat span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .preview-panels { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-top: 14px; }
    .chart-panel, .leader-panel, .battle-panel {
      border: 1px solid rgba(15,23,42,.08);
      border-radius: var(--radius);
      background: #fff;
      padding: 14px;
      box-shadow: 0 10px 24px rgba(15,23,42,.06);
    }
    .chart-bars { height: 128px; display: flex; align-items: end; gap: 10px; margin-top: 18px; }
    .chart-bars i { flex: 1; min-width: 15px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--blue), var(--emerald)); animation: growBar .9s ease both; }
    .chart-bars i:nth-child(2) { height: 78%; background: linear-gradient(180deg, var(--saffron), #f97316); }
    .chart-bars i:nth-child(3) { height: 48%; }
    .chart-bars i:nth-child(4) { height: 92%; background: linear-gradient(180deg, var(--purple), var(--blue)); }
    .chart-bars i:nth-child(5) { height: 66%; }
    .chart-bars i:nth-child(6) { height: 82%; background: linear-gradient(180deg, var(--emerald), #0f766e); }
    .chart-bars i:nth-child(1) { height: 58%; }

    .rank-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,.07); font-size: 12px; font-weight: 850; }
    .rank-row:last-child { border-bottom: 0; }
    .medal { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(245, 158, 11, .18); color: #b45309; }
    .hero-phone {
      position: absolute;
      right: 18px;
      bottom: 0;
      width: 210px;
      min-height: 395px;
      border: 10px solid #06142d;
      border-radius: 32px;
      background: linear-gradient(180deg, #07152f, #102a5f);
      box-shadow: 0 24px 60px rgba(7, 21, 47, .34);
      color: #fff;
      padding: 18px 14px;
      animation: floatPhone 3.6s ease-in-out infinite;
    }
    .phone-notch { width: 74px; height: 18px; margin: -10px auto 14px; border-radius: 0 0 12px 12px; background: #06142d; }
    .phone-card { padding: 13px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); margin-bottom: 10px; }
    .phone-meter { height: 9px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; margin-top: 10px; }
    .phone-meter i { display: block; height: 100%; width: 76%; border-radius: inherit; background: linear-gradient(90deg, var(--saffron), var(--emerald)); }
    .phone-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .phone-actions span { min-height: 54px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.12); color: #dbeafe; }

    .section { padding: 78px 0; }
    .section.alt { background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(239,246,255,.8)); border-block: 1px solid rgba(15,23,42,.06); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
    .section-title { max-width: 720px; }
    .section-kicker { color: var(--blue); font-size: 12px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
    .section h2 { margin-top: 10px; color: var(--navy); font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
    .section-desc { margin-top: 13px; color: var(--body); font-size: 16px; line-height: 1.65; font-weight: 550; }

    .grid { display: grid; gap: 16px; }
    .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .feature-card, .exam-card, .price-card, .faq-item, .trust-card {
      position: relative;
      border: 1px solid rgba(15,23,42,.09);
      border-radius: var(--radius);
      background: rgba(255,255,255,.84);
      box-shadow: var(--shadow-soft);
      padding: 22px;
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .feature-card:hover, .exam-card:hover, .price-card:hover, .trust-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
      border-color: rgba(37, 99, 235, .18);
    }
    .feature-card::before, .price-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--saffron), var(--emerald));
    }
    .icon {
      width: 42px;
      height: 42px;
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--purple));
      box-shadow: 0 12px 24px rgba(37,99,235,.22);
      font-size: 20px;
    }
    .icon.gold { background: linear-gradient(135deg, var(--saffron), #ef7d00); }
    .icon.green { background: linear-gradient(135deg, var(--emerald), #047857); }
    .icon.red { background: linear-gradient(135deg, var(--purple), var(--red)); }
    .feature-card h3, .exam-card h3, .trust-card h3 { margin-top: 16px; color: var(--navy); font-size: 18px; letter-spacing: -.02em; }
    .feature-card p, .exam-card p, .trust-card p { margin-top: 9px; color: var(--body); font-size: 14px; line-height: 1.6; font-weight: 530; }

    .exam-card { padding: 18px; }
    .exam-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .progress { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(15, 23, 42, .08); }
    .progress i { display: block; height: 100%; width: var(--value); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--emerald)); animation: fillBar 1s ease both; }

    .split-showcase {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 18px;
      align-items: stretch;
    }
    .mode-panel {
      border-radius: 14px;
      padding: 28px;
      color: #fff;
      min-height: 330px;
      background:
        radial-gradient(420px 260px at 94% 0%, rgba(245,158,11,.35), transparent 62%),
        linear-gradient(135deg, #07152f, #123a7a);
      box-shadow: 0 24px 64px rgba(7, 21, 47, .22);
    }
    .mode-panel.battle {
      background:
        radial-gradient(420px 260px at 90% 0%, rgba(239,68,68,.34), transparent 62%),
        linear-gradient(135deg, #180b39, #541388 55%, #b91c1c);
    }
    .mode-panel h3 { margin-top: 16px; font-size: 30px; letter-spacing: -.04em; }
    .mode-panel p { margin-top: 12px; max-width: 550px; color: rgba(255,255,255,.78); line-height: 1.7; font-weight: 550; }
    .mode-list { display: grid; gap: 10px; margin-top: 22px; }
    .mode-list span { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9); font-size: 14px; font-weight: 800; }

    .leader-preview {
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.86);
      padding: 22px;
      box-shadow: var(--shadow);
    }
    .podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 12px; margin-top: 22px; min-height: 245px; }
    .podium-card { border-radius: var(--radius); padding: 16px 12px; color: #fff; text-align: center; background: linear-gradient(180deg, var(--blue), var(--navy)); box-shadow: var(--shadow-soft); }
    .podium-card:nth-child(1) { min-height: 165px; background: linear-gradient(180deg, #64748b, #1e293b); }
    .podium-card:nth-child(2) { min-height: 220px; background: linear-gradient(180deg, var(--gold), var(--saffron)); color: #241407; }
    .podium-card:nth-child(3) { min-height: 140px; background: linear-gradient(180deg, #a16207, #713f12); }
    .avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: rgba(255,255,255,.28); font-weight: 950; }

    .pricing-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: stretch; }
    .price-card.featured { color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); border-color: transparent; }
    .price { margin-top: 18px; font-size: 48px; font-weight: 950; letter-spacing: -.05em; }
    .price small { font-size: 17px; font-weight: 800; color: inherit; opacity: .72; }
    .check-list { display: grid; gap: 12px; margin-top: 22px; }
    .check-list span { display: flex; gap: 10px; align-items: center; color: inherit; font-weight: 750; }

    .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .faq-item h3 { font-size: 16px; color: var(--navy); }
    .faq-item p { margin-top: 8px; color: var(--body); line-height: 1.6; font-size: 14px; font-weight: 530; }

    .web-shell {
      min-height: 100vh;
      display: none;
      grid-template-columns: 272px minmax(0, 1fr);
      background:
        radial-gradient(900px 520px at 100% 0%, rgba(37,99,235,.16), transparent 55%),
        radial-gradient(700px 460px at 22% -10%, rgba(245,158,11,.15), transparent 56%),
        #f4f7fb;
    }
    body.app-mode .landing-page { display: none; }
    body.app-mode .web-shell { display: grid; }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 20px 16px;
      background: linear-gradient(180deg, #07152f, #0b2148 66%, #102a5f);
      color: #dbeafe;
      overflow-y: auto;
    }
    .side-brand { color: #fff; margin-bottom: 24px; }
    .side-nav { display: grid; gap: 6px; }
    .side-nav button {
      width: 100%;
      min-height: 43px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 0 12px;
      background: transparent;
      color: rgba(255,255,255,.73);
      cursor: pointer;
      font-weight: 800;
      text-align: left;
      transition: .2s ease;
    }
    .side-nav button:hover { color: #fff; background: rgba(255,255,255,.08); }
    .side-nav button.active { color: #fff; background: linear-gradient(135deg, rgba(37,99,235,.85), rgba(16,185,129,.55)); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
    .side-cta { margin-top: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 16px; background: rgba(255,255,255,.08); }
    .side-cta strong { display: block; color: #fff; }
    .side-cta p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; }

    .app-main { min-width: 0; }
    .app-topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      min-height: 72px;
      padding: 0 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      background: rgba(244, 247, 251, .82);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(15, 23, 42, .08);
    }
    .search {
      flex: 1;
      max-width: 500px;
      height: 42px;
      border: 1px solid rgba(15,23,42,.1);
      border-radius: var(--radius);
      padding: 0 14px;
      background: rgba(255,255,255,.86);
      color: var(--body);
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 650;
    }
    .app-actions { display: flex; align-items: center; gap: 10px; }
    .chip {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      color: var(--navy);
      font-size: 13px;
      font-weight: 900;
    }

    .view { display: none; padding: 26px; animation: rise .34s ease both; }
    .view.active { display: block; }
    .view-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
    .view h1 { color: var(--navy); font-size: 32px; letter-spacing: -.04em; }
    .view p.lead { margin-top: 8px; color: var(--body); font-weight: 550; line-height: 1.55; }

    .dash-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; align-items: start; }
    .panel {
      border: 1px solid rgba(15,23,42,.09);
      border-radius: var(--radius);
      background: rgba(255,255,255,.86);
      box-shadow: var(--shadow-soft);
      padding: 20px;
      overflow: hidden;
    }
    .panel.dark {
      color: #fff;
      background:
        radial-gradient(420px 260px at 100% 0%, rgba(245,158,11,.32), transparent),
        linear-gradient(135deg, var(--navy), var(--blue));
      border-color: transparent;
    }
    .panel.battle-bg {
      color: #fff;
      background:
        radial-gradient(420px 260px at 100% 0%, rgba(239,68,68,.34), transparent),
        linear-gradient(135deg, #21094e, #7c3aed 55%, #be123c);
      border-color: transparent;
    }
    .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .panel h2, .panel h3 { color: inherit; letter-spacing: -.03em; }
    .panel h2 { font-size: 22px; }
    .panel h3 { font-size: 18px; }
    .mini-label { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
    .dark .mini-label, .battle-bg .mini-label { color: rgba(255,255,255,.72); }

    .stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
    .stat-card {
      border: 1px solid rgba(15,23,42,.08);
      border-radius: var(--radius);
      background: rgba(255,255,255,.86);
      padding: 16px;
      box-shadow: var(--shadow-soft);
    }
    .stat-card strong { display: block; margin-top: 10px; color: var(--navy); font-size: 24px; letter-spacing: -.04em; }
    .stat-card span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

    .readiness { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; }
    .meter-ring {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--emerald) 0 78%, rgba(255,255,255,.2) 78% 100%);
      box-shadow: inset 0 0 0 12px rgba(255,255,255,.12);
    }
    .meter-ring div { width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,21,47,.82); text-align: center; }
    .meter-ring strong { display: block; font-size: 38px; letter-spacing: -.05em; }
    .plan-list, .data-list { display: grid; gap: 10px; }
    .task-row, .data-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: center;
      min-height: 48px;
      border-bottom: 1px solid rgba(15,23,42,.08);
    }
    .task-row:last-child, .data-row:last-child { border-bottom: 0; }
    .task-row b, .data-row b { color: inherit; font-size: 14px; }
    .task-row span, .data-row span { color: var(--muted); font-size: 12px; font-weight: 800; }
    .task-row div b, .data-row div b,
    .task-row div span, .data-row div span { display: block; }
    .task-row div span, .data-row div span { margin-top: 3px; }
    .dark .task-row span, .dark .data-row span, .battle-bg .data-row span { color: rgba(255,255,255,.7); }

    .learning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
    .test-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
    .question-box { min-height: 430px; display: flex; flex-direction: column; }
    .options { display: grid; gap: 12px; margin-top: 22px; }
    .option {
      border: 1px solid rgba(15,23,42,.1);
      border-radius: var(--radius);
      padding: 15px;
      background: rgba(255,255,255,.78);
      font-weight: 750;
      color: var(--navy);
    }
    .option.selected { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.1); }
    .palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .q-dot {
      aspect-ratio: 1;
      border: 1px solid rgba(15,23,42,.1);
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--navy);
      font-weight: 900;
    }
    .q-dot.done { background: rgba(16,185,129,.14); color: #047857; border-color: rgba(16,185,129,.28); }
    .q-dot.review { background: rgba(124,58,237,.12); color: var(--purple); border-color: rgba(124,58,237,.28); }
    .q-dot.active { background: var(--navy); color: #fff; }

    .arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
    .fighter {
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      padding: 18px;
      background: rgba(255,255,255,.1);
      text-align: center;
    }
    .fighter-avatar { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 28px; font-weight: 950; }
    .vs { align-self: center; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--purple); font-weight: 950; box-shadow: var(--shadow-soft); }

    .leaderboard-table { width: 100%; border-collapse: collapse; overflow: hidden; }
    .leaderboard-table th, .leaderboard-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid rgba(15,23,42,.08); }
    .leaderboard-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
    .leaderboard-table td { color: var(--navy); font-weight: 800; }
    .leaderboard-table tr.me { background: rgba(245,158,11,.12); }
    .tabs, .filters { display: flex; flex-wrap: wrap; gap: 8px; }
    .tab {
      min-height: 38px;
      border: 1px solid rgba(15,23,42,.1);
      border-radius: var(--radius);
      padding: 0 13px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #fff;
      color: var(--body);
      font-weight: 850;
      cursor: pointer;
    }
    .tab.active { color: #fff; background: var(--navy); border-color: var(--navy); }
    .select {
      min-height: 38px;
      border: 1px solid rgba(15,23,42,.1);
      border-radius: var(--radius);
      background: #fff;
      padding: 0 12px;
      color: var(--navy);
      font-weight: 750;
    }

    .profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
    .profile-avatar { width: 88px; height: 88px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--saffron)); font-size: 32px; font-weight: 950; }
    .achievement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .badge-card {
      border: 1px solid rgba(15,23,42,.08);
      border-radius: var(--radius);
      background: rgba(255,255,255,.78);
      padding: 16px;
      text-align: center;
    }
    .badge-card .icon { margin: 0 auto; }

    .login-page {
      display: none;
      min-height: 100vh;
      background:
        radial-gradient(900px 520px at 100% 0%, rgba(37,99,235,.18), transparent 55%),
        radial-gradient(700px 500px at 0% 20%, rgba(245,158,11,.16), transparent 55%),
        #f5f8ff;
    }
    body.login-mode .landing-page, body.login-mode .web-shell { display: none; }
    body.login-mode .login-page { display: block; }
    .onboard-page { display: none; min-height: 100vh; background:
      radial-gradient(900px 520px at 100% 0%, rgba(37,99,235,.18), transparent 55%),
      radial-gradient(700px 500px at 0% 20%, rgba(16,185,129,.16), transparent 55%), #f5f8ff; }
    body.onboard-mode .landing-page, body.onboard-mode .web-shell, body.onboard-mode .login-page { display: none; }
    body.onboard-mode .onboard-page { display: block; }
    .onboard-card { max-width: 520px; margin: 0 auto; padding: 40px 0; }
    .login-grid { min-height: calc(100vh - 74px); display: grid; grid-template-columns: minmax(360px, .86fr) minmax(420px, 1.14fr); gap: 36px; align-items: center; padding: 42px 0; }
    .login-card {
      border: 1px solid rgba(15,23,42,.1);
      border-radius: 16px;
      background: rgba(255,255,255,.9);
      box-shadow: var(--shadow);
      padding: 30px;
    }
    .login-card h1 { color: var(--navy); font-size: 36px; letter-spacing: -.04em; }
    .field { display: grid; gap: 8px; margin-top: 18px; }
    .field label { color: var(--navy); font-size: 13px; font-weight: 900; }
    .field input {
      height: 48px;
      border: 1px solid rgba(15,23,42,.12);
      border-radius: var(--radius);
      padding: 0 14px;
      background: #fff;
      color: var(--navy);
      outline: 0;
    }
    .field input:focus { border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
    .or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
    .or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(15,23,42,.1); }

    footer { padding: 40px 0; color: #cbd5e1; background: var(--navy); }
    .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
    .footer-links strong { display: block; color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
    .footer-links a { display: block; color: #94a3b8; text-decoration: none; font-size: 14px; padding: 4px 0; }
    .footer-links a:hover { color: #fff; }
    /* Learning tree */
    .tree-subject { border-top: 1px solid var(--line); padding: 14px 0; }
    .tree-subject:first-child { border-top: 0; }
    .tree-subject > b { display: block; color: var(--navy); font-size: 15px; margin-bottom: 10px; }
    .topic-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
    .topic-row > div { min-width: 0; }
    .topic-row b { display: block; color: var(--navy); font-size: 14px; font-weight: 800; }
    .topic-row span { color: var(--muted); font-size: 12px; }
    .topic-row .btn { flex-shrink: 0; }
    .topic-row .btn:disabled { opacity: .4; cursor: not-allowed; }
    .learn-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
    .learn-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
    .learn-card h3 { color: var(--navy); }
    .learn-locked { opacity: .65; }
    /* Practice player */
    .prac-progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 4px 0 10px; }
    .prac-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--saffron), var(--gold)); transition: width .3s ease; }
    .prac-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 800; margin-bottom: 16px; }
    .prac-card h2 { font-size: 20px; line-height: 1.4; color: var(--navy); }
    .prac-options { display: grid; gap: 12px; margin: 20px 0; }
    .prac-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font-weight: 700; color: var(--navy); background: #fff; transition: all .15s ease; text-align: left; }
    .prac-opt:hover { border-color: var(--blue); }
    .prac-opt .k { font-weight: 900; color: var(--muted); flex-shrink: 0; width: 22px; }
    .prac-opt.selected { border-color: var(--blue); background: rgba(37,99,235,.06); }
    .prac-opt.correct { border-color: var(--emerald); background: rgba(16,185,129,.1); }
    .prac-opt.correct .k { color: var(--emerald); }
    .prac-opt.wrong { border-color: #dc2626; background: rgba(220,38,38,.08); }
    .prac-opt.wrong .k { color: #dc2626; }
    .prac-opt.locked { cursor: default; }
    .prac-explain { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #065f46; font-size: 14px; font-weight: 600; line-height: 1.6; }
    .prac-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
    .prac-result { text-align: center; padding: 40px 24px; }
    .prac-result .icon { margin: 0 auto 16px; }
    .prac-result h1 { font-size: 44px; letter-spacing: -.04em; color: var(--navy); }
    .prac-result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

    @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes floatIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes floatPhone { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes fillBar { from { width: 0; } to { width: var(--value); } }
    @keyframes growBar { from { transform: scaleY(.2); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }

    @media (max-width: 1100px) {
      .landing-nav { display: none; }
      .hero-grid, .pricing-layout, .split-showcase, .login-grid, .dash-grid, .learning-layout, .test-layout { grid-template-columns: 1fr; }
      .hero-visual { min-height: 560px; }
      .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
      .web-shell { grid-template-columns: 86px minmax(0, 1fr); }
      .side-brand .brand span, .side-brand .brand small, .side-nav span, .side-cta { display: none; }
      .side-nav button { justify-content: center; padding: 0; }
      .stat-grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 760px) {
      .wrap { width: min(100% - 28px, 1180px); }
      .topbar { min-height: 66px; gap: 8px; }
      .brand { gap: 8px; }
      .brand-mark { width: 38px; height: 38px; }
      .brand span { font-size: 15px; }
      .header-actions { gap: 6px; }
      .btn { min-height: 38px; padding: 0 10px; font-size: 13px; }
      .brand small, .header-actions .btn span.optional, .search, .app-actions .chip:nth-child(n+3) { display: none; }
      .hero { padding-top: 44px; }
      .hero h1 { font-size: 44px; }
      .hero-proof, .grid.cols-3, .grid.cols-4, .grid.cols-2, .faq-grid, .stat-grid, .achievement-grid { grid-template-columns: 1fr; }
      .hero-visual { min-height: 500px; }
      .dashboard-preview { inset: 8px 0 auto; }
      .preview-body { grid-template-columns: 1fr; }
      .preview-side { display: none; }
      .preview-stats { grid-template-columns: repeat(2, 1fr); }
      .preview-panels { grid-template-columns: 1fr; }
      .hero-phone { right: 0; width: 172px; min-height: 330px; }
      .section { padding: 54px 0; }
      .section-head, .view-head, .footer-grid { display: block; }
      .footer-links { grid-template-columns: 1fr 1fr; }
      .web-shell { grid-template-columns: 1fr; }
      .sidebar { position: fixed; z-index: 60; inset: auto 0 0; height: 70px; display: flex; align-items: center; padding: 8px; overflow-x: auto; }
      .side-brand { display: none; }
      .side-nav { display: flex; width: 100%; }
      .side-nav button { min-width: 52px; }
      .app-main { padding-bottom: 70px; }
      .app-topbar { padding: 0 14px; }
      .view { padding: 18px 14px; }
      .readiness, .arena, .profile-head { grid-template-columns: 1fr; }
      .meter-ring { margin: 0 auto; }
      .palette { grid-template-columns: repeat(4, 1fr); }
    }