/* roulang page: index */
:root {
      --navy: #12253f;
      --navy-deep: #09182c;
      --blue: #2878d7;
      --blue-dark: #1c5fae;
      --cyan: #42b5c9;
      --sky: #eaf4ff;
      --ink: #162238;
      --muted: #6e7d91;
      --soft: #f6f9fc;
      --white: #ffffff;
      --line: #dce6f0;
      --gold: #e4a83c;
      --danger: #d85d65;
      --radius: 18px;
      --radius-sm: 11px;
      --shadow: 0 14px 40px rgba(24, 59, 99, .10);
      --shadow-hover: 0 20px 46px rgba(24, 59, 99, .18);
      --container: 1180px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      color: var(--ink);
      background: var(--white);
      font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; object-fit: cover; }
    button, input { font: inherit; }
    button { cursor: pointer; border: 0; }
    ul { list-style: none; }
    :focus-visible { outline: 3px solid rgba(40, 120, 215, .35); outline-offset: 3px; }

    .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 22px;
      height: 2px;
      background: var(--cyan);
      border-radius: 2px;
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
    }
    .section-head h2 {
      margin-top: 7px;
      font-size: clamp(25px, 3vw, 36px);
      line-height: 1.25;
      letter-spacing: 0;
    }
    .section-head p {
      max-width: 610px;
      color: var(--muted);
      font-size: 14px;
    }
    .section-link {
      flex: none;
      color: var(--blue);
      font-weight: 700;
      font-size: 13px;
      transition: color .2s ease;
    }
    .section-link:hover { color: var(--blue-dark); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid rgba(220,230,240,.9);
      backdrop-filter: blur(16px);
    }
    .nav-wrap {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 218px;
      font-weight: 800;
      color: var(--navy);
      white-space: nowrap;
    }
    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--white);
      background: var(--navy);
      border-radius: 10px;
      box-shadow: 0 7px 16px rgba(18,37,63,.18);
      font-size: 16px;
    }
    .brand-text { font-size: 17px; letter-spacing: .2px; }
    .nav-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .nav-menu a {
      padding: 10px 13px;
      border-radius: 9px;
      color: #637187;
      font-size: 14px;
      font-weight: 600;
      transition: color .2s ease, background .2s ease;
    }
    .nav-menu a:hover,
    .nav-menu a.active {
      color: var(--blue);
      background: var(--sky);
    }
    .nav-action {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 16px;
      color: var(--white);
      background: var(--blue);
      border-radius: 9px;
      font-size: 13px;
      font-weight: 700;
      transition: background .2s ease, transform .2s ease;
    }
    .nav-action:hover { background: var(--blue-dark); transform: translateY(-1px); }
    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      color: var(--navy);
      background: var(--sky);
      border-radius: 9px;
      font-size: 20px;
    }

    .hero {
      position: relative;
      min-height: 610px;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: var(--white);
      background: var(--navy-deep);
    }
    .hero-media {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(8,24,45,.96) 0%, rgba(8,24,45,.82) 40%, rgba(8,24,45,.32) 77%, rgba(8,24,45,.55) 100%),
        url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1900&q=88") center/cover;
    }
    .hero-content {
      position: relative;
      z-index: 1;
      width: min(760px, 100%);
      padding: 86px 0 98px;
    }
    .hero .eyebrow { color: #9ddce7; }
    .hero h1 {
      max-width: 730px;
      margin: 18px 0 21px;
      font-size: clamp(38px, 6vw, 68px);
      line-height: 1.16;
      letter-spacing: 0;
    }
    .hero h1 strong { color: #7ed3e0; font-weight: 800; }
    .hero-lead {
      max-width: 680px;
      color: rgba(255,255,255,.83);
      font-size: 16px;
      line-height: 2;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      margin-top: 31px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 21px;
      border-radius: 9px;
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: var(--white);
      background: var(--blue);
      box-shadow: 0 8px 20px rgba(40,120,215,.3);
    }
    .btn-primary:hover { background: var(--blue-dark); }
    .btn-light {
      color: var(--navy);
      background: var(--white);
    }
    .btn-light:hover { background: #eef7ff; }
    .btn-outline {
      color: var(--blue);
      background: transparent;
      border: 1px solid var(--line);
    }
    .btn-outline:hover { border-color: var(--blue); background: var(--sky); }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 34px;
      color: rgba(255,255,255,.68);
      font-size: 12px;
    }
    .hero-note span {
      width: 8px;
      height: 8px;
      background: #68d4b2;
      border-radius: 50%;
      box-shadow: 0 0 0 5px rgba(104,212,178,.13);
    }
    .hero-panel {
      position: absolute;
      z-index: 1;
      right: max(40px, calc((100vw - var(--container)) / 2));
      bottom: 76px;
      width: 258px;
      padding: 20px;
      background: rgba(13,37,66,.78);
      border: 1px solid rgba(255,255,255,.19);
      border-radius: 14px;
      backdrop-filter: blur(12px);
    }
    .hero-panel-label { color: #9ddce7; font-size: 12px; font-weight: 700; }
    .hero-panel-title { margin: 8px 0 17px; font-size: 18px; font-weight: 700; }
    .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .hero-stat {
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.17);
    }
    .hero-stat strong { display: block; font-size: 21px; color: #fff; }
    .hero-stat span { color: rgba(255,255,255,.62); font-size: 11px; }

    section { padding: 88px 0; }
    .section-soft { background: var(--soft); }
    .section-blue { color: var(--white); background: var(--navy); }
    .section-blue .section-head p { color: rgba(255,255,255,.66); }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .feature {
      padding: 27px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 7px 23px rgba(39,72,108,.05);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
    .feature-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      color: var(--blue);
      background: var(--sky);
      border-radius: 12px;
      font-size: 19px;
      font-weight: 800;
    }
    .feature h3 { margin-bottom: 9px; font-size: 18px; }
    .feature p { color: var(--muted); font-size: 13px; line-height: 1.85; }

    .countdown-band {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 40px;
      align-items: center;
    }
    .countdown-copy h2 { margin: 12px 0; font-size: 32px; line-height: 1.35; }
    .countdown-copy p { max-width: 620px; color: rgba(255,255,255,.7); }
    .countdown-clock {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
    }
    .time-box {
      padding: 18px 8px;
      text-align: center;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 12px;
    }
    .time-box strong { display: block; font-size: 31px; line-height: 1.2; }
    .time-box span { color: rgba(255,255,255,.62); font-size: 11px; }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .content-card {
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: 0 6px 18px rgba(39,72,108,.05);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .content-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .card-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #dfe9f2;
    }
    .card-image img { height: 100%; transition: transform .45s ease; }
    .content-card:hover .card-image img { transform: scale(1.05); }
    .card-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 54%, rgba(10,29,52,.55));
      pointer-events: none;
    }
    .badge {
      position: absolute;
      z-index: 1;
      top: 11px;
      left: 11px;
      padding: 3px 8px;
      color: var(--white);
      background: var(--blue);
      border-radius: 5px;
      font-size: 10px;
      font-weight: 800;
    }
    .badge.gold { background: var(--gold); }
    .badge.dark { background: rgba(9,24,44,.78); }
    .card-body { padding: 15px 16px 17px; }
    .card-title {
      min-height: 52px;
      margin-bottom: 11px;
      font-size: 15px;
      line-height: 1.65;
      font-weight: 700;
    }
    .card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
    }
    .rating { color: var(--gold); font-weight: 800; }
    .rating span { color: var(--muted); font-weight: 500; }

    .offer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .offer {
      position: relative;
      padding: 29px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .offer.featured { border: 2px solid var(--blue); box-shadow: var(--shadow); }
    .offer-label {
      position: absolute;
      top: -12px;
      right: 19px;
      padding: 3px 10px;
      color: var(--white);
      background: var(--blue);
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }
    .offer h3 { margin-bottom: 8px; font-size: 20px; }
    .offer p { min-height: 51px; color: var(--muted); font-size: 13px; }
    .offer-list { margin: 20px 0 24px; border-top: 1px solid var(--line); }
    .offer-list li {
      padding: 9px 0;
      border-bottom: 1px solid var(--line);
      color: #506075;
      font-size: 13px;
    }
    .offer-list li::before { content: "✓"; margin-right: 8px; color: var(--blue); font-weight: 800; }

    .limited-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 28px;
      align-items: stretch;
    }
    .limited-intro {
      padding: 34px;
      color: var(--white);
      background: var(--blue);
      border-radius: var(--radius);
    }
    .limited-intro h2 { margin: 12px 0; font-size: 30px; line-height: 1.35; }
    .limited-intro p { color: rgba(255,255,255,.78); font-size: 14px; }
    .limited-intro .btn { margin-top: 24px; }
    .limited-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .limited-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 12px;
    }
    .limited-item img { width: 84px; height: 68px; border-radius: 8px; }
    .limited-item h3 { margin-bottom: 3px; font-size: 14px; }
    .limited-item p { color: var(--muted); font-size: 11px; }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 13px;
    }
    .category {
      min-height: 164px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
      color: var(--white);
      overflow: hidden;
      border-radius: var(--radius-sm);
      background-position: center;
      background-size: cover;
      position: relative;
    }
    .category::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8,24,45,.04), rgba(8,24,45,.9));
    }
    .category > * { position: relative; }
    .category h3 { margin-bottom: 5px; font-size: 16px; }
    .category p { color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.6; }

    .ranking-layout {
      display: grid;
      grid-template-columns: 1fr .75fr;
      gap: 28px;
    }
    .rank-list {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .rank-item {
      display: grid;
      grid-template-columns: 45px 1fr 80px 54px;
      align-items: center;
      gap: 13px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line);
      transition: background .2s ease;
    }
    .rank-item:last-child { border-bottom: 0; }
    .rank-item:hover { background: var(--sky); }
    .rank-no { color: #9aabba; font-size: 20px; font-weight: 800; }
    .rank-item:nth-child(-n+3) .rank-no { color: var(--blue); }
    .rank-name { font-weight: 700; font-size: 14px; }
    .rank-tag {
      width: max-content;
      padding: 2px 7px;
      color: var(--blue);
      background: var(--sky);
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
    }
    .rank-hot { color: var(--danger); font-size: 12px; }
    .rank-score { color: var(--gold); font-size: 12px; font-weight: 800; }
    .rank-aside {
      padding: 30px;
      color: var(--white);
      background: var(--navy);
      border-radius: var(--radius);
    }
    .rank-aside h3 { margin: 13px 0; font-size: 24px; line-height: 1.4; }
    .rank-aside p { color: rgba(255,255,255,.67); font-size: 13px; }
    .rank-numbers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 17px;
      margin-top: 28px;
    }
    .rank-numbers strong { display: block; font-size: 26px; color: #7ed3e0; }
    .rank-numbers span { color: rgba(255,255,255,.55); font-size: 11px; }

    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .news-card {
      display: grid;
      grid-template-columns: 126px 1fr;
      gap: 16px;
      padding: 14px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 13px;
      transition: box-shadow .2s ease, transform .2s ease;
    }
    .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .news-card img { height: 100px; border-radius: 8px; }
    .news-card time { color: var(--blue); font-size: 11px; font-weight: 700; }
    .news-card h3 { margin: 6px 0 4px; font-size: 14px; line-height: 1.55; }
    .news-card p { color: var(--muted); font-size: 11px; line-height: 1.6; }

    .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .review {
      padding: 25px;
      background: var(--white);
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
    }
    .review-stars { color: var(--gold); letter-spacing: 2px; }
    .review p { min-height: 77px; margin: 14px 0 18px; color: #526277; font-size: 13px; line-height: 1.9; }
    .review-user { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
    .avatar {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      color: var(--blue);
      background: var(--sky);
      border-radius: 50%;
    }

    .trust-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      padding: 24px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .trust-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 10px 16px;
      border-right: 1px solid var(--line);
    }
    .trust-item:last-child { border-right: 0; }
    .trust-icon { color: var(--blue); font-size: 23px; font-weight: 800; }
    .trust-item strong { display: block; font-size: 13px; }
    .trust-item span { display: block; color: var(--muted); font-size: 11px; }

    .faq-layout {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 70px;
      align-items: start;
    }
    .faq-intro h2 { margin: 13px 0; font-size: 31px; line-height: 1.35; }
    .faq-intro p { color: var(--muted); font-size: 14px; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 0;
      color: var(--ink);
      background: none;
      text-align: left;
      font-size: 15px;
      font-weight: 700;
    }
    .faq-question span:last-child { color: var(--blue); font-size: 20px; transition: transform .2s ease; }
    .faq-answer {
      display: none;
      padding: 0 30px 19px 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.9;
    }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }

    .closing {
      padding: 67px 0;
      color: var(--white);
      background: var(--blue);
    }
    .closing-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }
    .closing h2 { margin: 10px 0 8px; font-size: 31px; }
    .closing p { max-width: 670px; color: rgba(255,255,255,.78); font-size: 14px; }
    .closing .btn { flex: none; }

    footer {
      padding: 57px 0 25px;
      color: #aebdce;
      background: var(--navy-deep);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 42px;
    }
    .footer-brand { color: var(--white); }
    .footer-brand p { max-width: 280px; margin-top: 16px; color: #8d9caf; font-size: 12px; line-height: 1.9; }
    footer h3 { margin-bottom: 15px; color: var(--white); font-size: 14px; }
    .footer-links a { display: block; margin: 7px 0; color: #9aaabd; font-size: 12px; transition: color .2s ease; }
    .footer-links a:hover { color: #7ed3e0; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.12);
      color: #748599;
      font-size: 11px;
    }
    .age-note { color: #d4a85d; }

    @media (max-width: 1024px) {
      .container { width: min(var(--container), calc(100% - 32px)); }
      .nav-menu { gap: 0; }
      .nav-menu a { padding: 9px 9px; font-size: 13px; }
      .hero-panel { right: 28px; }
      .content-grid { grid-template-columns: repeat(3, 1fr); }
      .category-grid { grid-template-columns: repeat(3, 1fr); }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      section { padding: 65px 0; }
      .nav-wrap { min-height: 68px; }
      .brand { min-width: auto; }
      .nav-action { display: none; }
      .menu-toggle { display: block; }
      .nav-menu {
        position: absolute;
        top: 68px;
        left: 16px;
        right: 16px;
        display: none;
        padding: 10px;
        flex-direction: column;
        align-items: stretch;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
      }
      .nav-menu.open { display: flex; }
      .nav-menu a { padding: 12px 14px; }
      .hero { min-height: 660px; }
      .hero-content { padding: 77px 0 200px; }
      .hero-panel { right: 20px; bottom: 28px; left: 20px; width: auto; }
      .feature-grid, .offer-grid { grid-template-columns: 1fr; }
      .countdown-band, .limited-layout, .ranking-layout, .faq-layout { grid-template-columns: 1fr; gap: 30px; }
      .content-grid { grid-template-columns: repeat(2, 1fr); }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .rank-aside { padding: 25px; }
      .review-grid { grid-template-columns: 1fr; }
      .review p { min-height: auto; }
      .trust-bar { grid-template-columns: repeat(2, 1fr); }
      .trust-item:nth-child(2) { border-right: 0; }
      .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .closing-wrap { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 520px) {
      .container { width: min(100% - 26px, var(--container)); }
      .brand-text { font-size: 14px; }
      .brand-mark { width: 34px; height: 34px; }
      .hero h1 { font-size: 39px; }
      .hero-lead { font-size: 14px; line-height: 1.85; }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .hero-actions .btn { width: 100%; }
      .section-head { display: block; }
      .section-head p { margin-top: 14px; }
      .content-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .card-body { padding: 12px; }
      .card-title { min-height: 58px; font-size: 13px; }
      .card-meta { font-size: 10px; }
      .limited-list { grid-template-columns: 1fr; }
      .category-grid { gap: 10px; }
      .category { min-height: 145px; padding: 15px; }
      .rank-item { grid-template-columns: 31px 1fr 45px; gap: 8px; padding: 13px 12px; }
      .rank-hot { display: none; }
      .rank-name { font-size: 12px; }
      .news-grid { grid-template-columns: 1fr; }
      .news-card { grid-template-columns: 110px 1fr; }
      .trust-item { justify-content: flex-start; padding: 10px 6px; }
      .trust-icon { font-size: 19px; }
      .trust-item strong { font-size: 11px; }
      .trust-item span { font-size: 10px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-top: 6px; }
    }

/* roulang page: category1 */
:root{--navy:#12253f;--navy-deep:#09182c;--blue:#2878d7;--blue-dark:#1c5fae;--cyan:#42b5c9;--sky:#eaf4ff;--ink:#162238;--muted:#6e7d91;--soft:#f6f9fc;--white:#fff;--line:#dce6f0;--gold:#e4a83c;--danger:#d85d65;--radius:18px;--radius-sm:11px;--shadow:0 14px 40px rgba(24,59,99,.1);--shadow-hover:0 20px 46px rgba(24,59,99,.18);--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--white);font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}button,input{font:inherit}button{cursor:pointer;border:0}.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:1.5px}.eyebrow:before{content:"";width:22px;height:2px;background:var(--cyan);border-radius:2px}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(220,230,240,.9);backdrop-filter:blur(16px)}.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:11px;min-width:218px;font-weight:800;color:var(--navy);white-space:nowrap}.brand-mark{width:38px;height:38px;display:grid;place-items:center;color:#fff;background:var(--navy);border-radius:10px;box-shadow:0 7px 16px rgba(18,37,63,.18);font-size:16px}.brand-text{font-size:17px;letter-spacing:.2px}.nav-menu{display:flex;align-items:center;justify-content:center;gap:6px}.nav-menu a{padding:10px 13px;border-radius:9px;color:#637187;font-size:14px;font-weight:600;transition:.2s}.nav-menu a:hover,.nav-menu a.active{color:var(--blue);background:var(--sky)}.nav-action{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;color:#fff;background:var(--blue);border-radius:9px;font-size:13px;font-weight:700;transition:.2s}.nav-action:hover{background:var(--blue-dark);transform:translateY(-1px)}.menu-toggle{display:none;width:42px;height:42px;color:var(--navy);background:var(--sky);border-radius:9px;font-size:20px}.hero{position:relative;overflow:hidden;color:#fff;background:var(--navy-deep)}.hero-media{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,45,.96),rgba(8,24,45,.78) 48%,rgba(8,24,45,.4)),url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1900&q=88") center/cover}.hero-content{position:relative;z-index:1;padding:82px 0 88px;max-width:760px}.hero .eyebrow{color:#9ddce7}.hero h1{margin:18px 0 20px;font-size:clamp(38px,6vw,66px);line-height:1.16}.hero h1 strong{color:#7ed3e0}.hero-lead{max-width:670px;color:rgba(255,255,255,.83);font-size:16px;line-height:2}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 21px;border-radius:9px;font-size:14px;font-weight:700;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;background:var(--blue);box-shadow:0 8px 20px rgba(40,120,215,.3)}.btn-primary:hover{background:var(--blue-dark)}.btn-light{color:var(--navy);background:#fff}.btn-light:hover{background:#eef7ff}.hero-note{display:flex;align-items:center;gap:11px;margin-top:31px;color:rgba(255,255,255,.7);font-size:12px}.hero-note span{width:8px;height:8px;background:#68d4b2;border-radius:50%;box-shadow:0 0 0 5px rgba(104,212,178,.13)}.hero-panel{position:absolute;right:max(40px,calc((100vw - var(--container))/2));bottom:62px;width:260px;padding:21px;background:rgba(13,37,66,.8);border:1px solid rgba(255,255,255,.18);border-radius:14px;backdrop-filter:blur(12px)}.hero-panel small{color:#a9c4df}.hero-panel strong{display:block;margin:8px 0 3px;font-size:28px}.hero-panel p{margin:0;color:rgba(255,255,255,.72);font-size:12px}.section{padding:78px 0}.section-soft{background:var(--soft)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.section-head h2{margin:7px 0 0;font-size:clamp(25px,3vw,36px);line-height:1.25}.section-head p{max-width:610px;color:var(--muted);font-size:14px}.section-link{color:var(--blue);font-weight:700;font-size:13px}.section-link:hover{color:var(--blue-dark)}.feature-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}.feature-main{position:relative;min-height:340px;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--navy)}.feature-main img{height:100%;min-height:340px}.feature-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,38,.85),transparent 65%)}.feature-copy{position:absolute;z-index:1;left:28px;right:28px;bottom:25px;color:#fff}.feature-copy h3{margin:8px 0;font-size:27px}.feature-copy p{margin:0;color:rgba(255,255,255,.76);font-size:13px}.choice-list{display:grid;gap:13px}.choice{display:flex;align-items:center;gap:16px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:.2s}.choice:hover{border-color:#a9ccec;box-shadow:var(--shadow);transform:translateX(3px)}.choice img{width:78px;height:78px;border-radius:10px}.choice h3{margin:0 0 5px;font-size:16px}.choice p{margin:0;color:var(--muted);font-size:12px}.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:20px;color:var(--blue);background:var(--sky);font-size:11px;font-weight:700}.badge.gold{color:#956b17;background:#fff5da}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.theme{padding:23px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(24,59,99,.05)}.theme strong{display:block;margin-bottom:9px;color:var(--navy);font-size:18px}.theme p{margin:0;color:var(--muted);font-size:13px}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.content-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 9px 25px rgba(24,59,99,.06);transition:.25s}.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.content-card img{height:178px}.content-body{padding:16px}.content-body h3{margin:7px 0 5px;font-size:16px}.content-body p{margin:0;color:var(--muted);font-size:12px}.meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.rating{color:var(--gold);font-weight:800}.ranking{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rank-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:15px 17px;background:#fff;border-bottom:1px solid var(--line)}.rank-item:first-child,.rank-item:nth-child(2){border-radius:12px 12px 0 0}.rank-no{color:var(--blue);font-size:20px;font-weight:800}.rank-item h3{margin:0;font-size:14px}.rank-item p{margin:2px 0 0;color:var(--muted);font-size:11px}.heat{color:var(--danger);font-size:12px;font-weight:700}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-item{display:flex;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px}.news-item img{width:92px;height:75px;border-radius:8px}.news-item h3{margin:2px 0 5px;font-size:14px;line-height:1.5}.news-item time{color:var(--muted);font-size:11px}.notice{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:30px 34px;color:#fff;background:var(--navy);border-radius:var(--radius);box-shadow:var(--shadow)}.notice h2{margin:0 0 6px;font-size:24px}.notice p{margin:0;color:rgba(255,255,255,.7);font-size:13px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:12px}.faq h3{margin:0 0 8px;font-size:15px}.faq p{margin:0;color:var(--muted);font-size:13px}.footer{color:#c2d0df;background:var(--navy-deep);padding:58px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}.footer .brand{color:#fff}.footer-brand p{max-width:280px;color:#8fa4bc;font-size:13px}.footer h3{margin:4px 0 15px;color:#fff;font-size:14px}.footer-links{display:grid;gap:8px}.footer-links a{color:#8fa4bc;font-size:13px}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:19px;border-top:1px solid rgba(255,255,255,.12);color:#7990a9;font-size:12px}.age-note{color:#9fc9d5}a:focus-visible,button:focus-visible{outline:3px solid rgba(66,181,201,.45);outline-offset:3px}
@media(max-width:1024px){.hero-panel{right:20px}.theme-grid{grid-template-columns:repeat(2,1fr)}.nav-action{display:none}.content-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{width:min(var(--container),calc(100% - 28px))}.nav-wrap{min-height:68px}.brand{min-width:0}.brand-text{font-size:15px}.menu-toggle{display:block}.nav-menu{display:none;position:absolute;top:68px;left:14px;right:14px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-menu.open{display:flex}.nav-menu a{padding:11px 14px}.hero-content{padding:65px 0 70px}.hero-panel{position:relative;right:auto;bottom:auto;margin:-34px 14px 28px;width:auto}.feature-layout{grid-template-columns:1fr}.ranking{grid-template-columns:1fr}.news-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.notice{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:10px}.hero h1{font-size:40px}.hero-actions .btn{width:100%}.theme-grid,.content-grid,.news-grid,.faq-grid{grid-template-columns:1fr}.content-card img{height:205px}.feature-main,.feature-main img{min-height:300px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom .age-note{display:block;margin-top:8px}}