/* roulang page: index */
:root {
      --ink: #17233c;
      --navy: #203a70;
      --blue: #3767d6;
      --blue-dark: #264fae;
      --mist: #f7f9fc;
      --white: #ffffff;
      --muted: #68758d;
      --line: #e4eaf3;
      --gold: #e5a94b;
      --radius-lg: 26px;
      --radius-md: 18px;
      --shadow-soft: 0 18px 50px rgba(31, 57, 104, .10);
      --shadow-card: 0 10px 30px rgba(31, 57, 104, .08);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--mist);
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    ::selection { color: #fff; background: var(--blue); }
    :focus-visible {
      outline: 3px solid rgba(55, 103, 214, .35);
      outline-offset: 4px;
    }

    .site-shell { min-height: 100vh; }
    .side-nav {
      position: fixed;
      z-index: 30;
      inset: 0 auto 0 0;
      width: 248px;
      padding: 30px 22px;
      background: rgba(255,255,255,.92);
      border-right: 1px solid var(--line);
      backdrop-filter: blur(18px);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 55px;
      color: var(--navy);
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1.25;
    }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      color: white;
      background: var(--blue);
      border-radius: 13px;
      box-shadow: 0 9px 20px rgba(55,103,214,.25);
      font-size: 18px;
    }
    .brand-text { font-size: 15px; }
    .nav-label {
      margin: 0 0 12px 12px;
      color: #9aa5b8;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .nav-list { display: grid; gap: 8px; }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      padding: 0 14px;
      color: var(--muted);
      border: 1px solid transparent;
      border-radius: 14px;
      transition: .25s ease;
    }
    .nav-link:hover {
      color: var(--navy);
      background: #f2f6ff;
      transform: translateX(3px);
    }
    .nav-link.active {
      color: var(--blue);
      background: #edf3ff;
      border-color: #dce7ff;
      font-weight: 700;
    }
    .nav-icon {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      color: currentColor;
      font-size: 14px;
      background: rgba(55,103,214,.09);
      border-radius: 8px;
    }
    .nav-note {
      position: absolute;
      right: 22px;
      bottom: 30px;
      left: 22px;
      padding: 16px;
      color: var(--muted);
      background: #f7f9fc;
      border: 1px solid var(--line);
      border-radius: 16px;
      font-size: 12px;
      line-height: 1.65;
    }
    .main-area { margin-left: 248px; }
    .mobile-bar {
      display: none;
      position: sticky;
      top: 0;
      z-index: 25;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px);
    }
    .mobile-toggle {
      width: 42px;
      height: 42px;
      color: var(--navy);
      background: #f1f5fd;
      border: 0;
      border-radius: 12px;
    }

    .container {
      width: min(1160px, calc(100% - 64px));
      margin: 0 auto;
    }
    .section { padding: 100px 0; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
    }
    .eyebrow::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--gold);
      border-radius: 99px;
    }
    .section-heading {
      max-width: 680px;
      margin-bottom: 42px;
    }
    .section-heading h2 {
      margin: 0 0 14px;
      color: var(--navy);
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.2;
      letter-spacing: -.055em;
    }
    .section-heading p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 690px;
      padding: 90px 0 80px;
      background:
        radial-gradient(circle at 84% 18%, rgba(117,157,255,.2), transparent 28%),
        linear-gradient(135deg, #f7f9fc 0%, #edf3ff 100%);
    }
    .hero::after {
      content: "";
      position: absolute;
      right: -150px;
      bottom: -190px;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(55,103,214,.12);
      border-radius: 50%;
      box-shadow: 0 0 0 35px rgba(55,103,214,.035), 0 0 0 70px rgba(55,103,214,.025);
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.06fr .94fr;
      gap: 70px;
      align-items: center;
    }
    .hero h1 {
      max-width: 700px;
      margin: 0 0 24px;
      color: var(--navy);
      font-size: clamp(42px, 6vw, 72px);
      line-height: 1.1;
      letter-spacing: -.075em;
    }
    .hero-copy {
      max-width: 630px;
      margin: 0 0 30px;
      color: #59677f;
      font-size: 18px;
    }
    .button-row { display: flex; flex-wrap: wrap; gap: 13px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 50px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: 13px;
      font-weight: 700;
      transition: .25s ease;
    }
    .btn-primary {
      color: #fff;
      background: var(--blue);
      box-shadow: 0 12px 24px rgba(55,103,214,.2);
    }
    .btn-primary:hover {
      background: var(--blue-dark);
      box-shadow: 0 15px 30px rgba(55,103,214,.28);
      transform: translateY(-2px);
    }
    .btn-secondary {
      color: var(--navy);
      background: rgba(255,255,255,.65);
      border-color: #d6e0f0;
    }
    .btn-secondary:hover { background: #fff; border-color: var(--blue); transform: translateY(-2px); }
    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 620px;
      margin-top: 48px;
    }
    .point {
      padding: 16px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(214,224,240,.8);
      border-radius: 15px;
    }
    .point strong { display: block; color: var(--navy); font-size: 21px; }
    .point span { color: var(--muted); font-size: 12px; }
    .hero-panel {
      position: relative;
      padding: 28px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(255,255,255,.95);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
    }
    .panel-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 26px;
    }
    .panel-title { color: var(--navy); font-weight: 800; }
    .status {
      padding: 5px 10px;
      color: #217350;
      background: #e9f8f0;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 700;
    }
    .topic-preview {
      display: grid;
      gap: 12px;
      margin-bottom: 20px;
    }
    .topic-row {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 15px;
      transition: .25s ease;
    }
    .topic-row:hover { border-color: #bfcff1; background: #f8faff; transform: translateX(4px); }
    .topic-num {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      color: var(--blue);
      background: #edf3ff;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 800;
    }
    .topic-row strong { display: block; color: var(--navy); font-size: 14px; }
    .topic-row small { color: var(--muted); font-size: 11px; }
    .panel-foot {
      padding-top: 18px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      font-size: 12px;
    }

    .app-section { background: #fff; }
    .app-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 70px;
      align-items: center;
    }
    .app-art {
      position: relative;
      min-height: 330px;
      padding: 28px;
      background: var(--navy);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }
    .app-art::before, .app-art::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
    }
    .app-art::before { width: 280px; height: 280px; right: -80px; top: -100px; }
    .app-art::after { width: 420px; height: 420px; left: -220px; bottom: -270px; }
    .art-caption { position: relative; z-index: 1; color: #b9c8eb; font-size: 13px; }
    .art-title {
      position: relative;
      z-index: 1;
      max-width: 310px;
      margin-top: 60px;
      color: #fff;
      font-size: 32px;
      line-height: 1.25;
      letter-spacing: -.05em;
    }
    .app-copy h2 { margin: 0 0 16px; color: var(--navy); font-size: 40px; line-height: 1.2; letter-spacing: -.06em; }
    .app-copy p { color: var(--muted); }
    .feature-list { display: grid; gap: 14px; margin: 28px 0; }
    .feature-item { display: flex; gap: 12px; align-items: flex-start; }
    .check {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      color: var(--blue);
      background: #edf3ff;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
    }
    .feature-item span { color: #4f5e76; font-size: 14px; }

    .service-section { background: var(--mist); }
    .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .service-card {
      min-height: 220px;
      padding: 26px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      transition: .25s ease;
    }
    .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
    .service-icon {
      display: grid;
      place-items: center;
      width: 45px;
      height: 45px;
      margin-bottom: 24px;
      color: var(--blue);
      background: #edf3ff;
      border-radius: 14px;
      font-size: 20px;
    }
    .service-card h3 { margin: 0 0 10px; color: var(--navy); font-size: 20px; }
    .service-card p { margin: 0; color: var(--muted); font-size: 14px; }

    .about-section { background: #fff; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
    .about-copy h2 { margin: 0 0 18px; color: var(--navy); font-size: 40px; line-height: 1.2; letter-spacing: -.06em; }
    .about-copy p { color: var(--muted); }
    .trust-box {
      padding: 28px;
      background: #f7f9fc;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .trust-box h3 { margin: 0 0 18px; color: var(--navy); font-size: 19px; }
    .trust-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }
    .trust-row:last-child { border-bottom: 0; }
    .trust-row span:first-child { color: var(--muted); }
    .trust-row strong { color: #2f7a58; }

    .info-section { background: var(--mist); }
    .info-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; }
    .info-list, .calendar-box {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
    }
    .info-list { overflow: hidden; }
    .info-item {
      display: grid;
      grid-template-columns: 92px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 21px 24px;
      border-bottom: 1px solid var(--line);
      transition: .2s ease;
    }
    .info-item:last-child { border-bottom: 0; }
    .info-item:hover { background: #f8faff; }
    .info-date { color: var(--blue); font-size: 12px; font-weight: 800; }
    .info-item h3 { margin: 0 0 3px; color: var(--navy); font-size: 15px; }
    .info-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .arrow { color: #9aa5b8; font-size: 20px; transition: .2s ease; }
    .info-item:hover .arrow { color: var(--blue); transform: translateX(4px); }
    .calendar-box { padding: 25px; }
    .calendar-box h3 { margin: 0 0 17px; color: var(--navy); font-size: 19px; }
    .calendar-entry { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); }
    .calendar-entry:last-child { border-bottom: 0; }
    .day {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      color: #fff;
      background: var(--blue);
      border-radius: 12px;
      font-weight: 800;
      line-height: 1.1;
    }
    .day small { display: block; font-size: 9px; font-weight: 500; }
    .calendar-entry strong { display: block; color: var(--navy); font-size: 13px; }
    .calendar-entry span { color: var(--muted); font-size: 11px; }

    .compare-section { background: #fff; }
    .compare-wrap {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
    }
    .compare-row {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      border-bottom: 1px solid var(--line);
    }
    .compare-row:last-child { border-bottom: 0; }
    .compare-row > div { padding: 17px 21px; font-size: 14px; }
    .compare-row > div:not(:last-child) { border-right: 1px solid var(--line); }
    .compare-head { color: var(--navy); background: #f4f7fc; font-weight: 800; }
    .compare-head > div:nth-child(2) { color: var(--blue); background: #edf3ff; }
    .compare-row:not(.compare-head) > div:first-child { color: var(--navy); font-weight: 700; }
    .compare-row:not(.compare-head) > div:nth-child(2) { color: #287653; font-weight: 700; }
    .compare-row:not(.compare-head) > div:nth-child(3) { color: var(--muted); }

    .faq-section { background: var(--mist); }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .faq-item {
      padding: 23px 25px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      transition: .25s ease;
    }
    .faq-item:hover { border-color: #bbcaf0; box-shadow: var(--shadow-card); }
    .faq-item summary {
      position: relative;
      padding-right: 28px;
      color: var(--navy);
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      list-style: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      position: absolute;
      right: 0;
      color: var(--blue);
      font-size: 22px;
      font-weight: 400;
      line-height: 1;
    }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item p { margin: 15px 0 0; color: var(--muted); font-size: 14px; }

    .cta-section { padding: 75px 0; background: var(--navy); }
    .cta-box { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
    .cta-box h2 { margin: 0 0 10px; color: #fff; font-size: 36px; line-height: 1.25; letter-spacing: -.06em; }
    .cta-box p { max-width: 650px; margin: 0; color: #b9c8eb; }
    .btn-light { color: var(--navy); background: #fff; }
    .btn-light:hover { color: var(--blue); background: #edf3ff; transform: translateY(-2px); }

    footer { padding: 38px 0 26px; background: #14213b; color: #aebbd4; }
    .footer-top { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .footer-brand { color: #fff; font-weight: 800; }
    .footer-copy { max-width: 420px; margin-top: 10px; font-size: 12px; line-height: 1.8; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 22px; align-content: flex-start; }
    .footer-links a { font-size: 13px; transition: .2s ease; }
    .footer-links a:hover { color: #fff; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; font-size: 11px; }

    @media (max-width: 1024px) {
      .side-nav { width: 220px; }
      .main-area { margin-left: 220px; }
      .hero-grid { gap: 35px; }
      .container { width: min(100% - 42px, 920px); }
    }
    @media (max-width: 768px) {
      .side-nav { display: none; }
      .main-area { margin-left: 0; }
      .mobile-bar { display: flex; }
      .container { width: min(100% - 36px, 680px); }
      .section { padding: 72px 0; }
      .hero { min-height: auto; padding: 70px 0; }
      .hero-grid, .app-grid, .about-grid, .info-layout { grid-template-columns: 1fr; }
      .hero-panel { max-width: 620px; }
      .service-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-points { margin-top: 34px; }
      .app-grid { gap: 35px; }
      .cta-box { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      .container { width: min(100% - 28px, 470px); }
      .hero h1 { font-size: 43px; }
      .hero-copy { font-size: 16px; }
      .hero-points, .service-grid, .faq-grid { grid-template-columns: 1fr; }
      .hero-panel, .service-card, .trust-box, .calendar-box { padding: 21px; }
      .app-copy h2, .about-copy h2 { font-size: 32px; }
      .info-item { grid-template-columns: 1fr auto; gap: 5px 12px; padding: 18px; }
      .info-date { grid-column: 1 / -1; }
      .info-item h3 { font-size: 14px; }
      .compare-wrap { overflow-x: auto; }
      .compare-row { min-width: 560px; }
      .cta-box h2 { font-size: 30px; }
      .footer-top, .footer-bottom { flex-direction: column; }
    }

/* roulang page: category1 */
:root{--ink:#17233c;--navy:#203a70;--blue:#3767d6;--blue-dark:#264fae;--mist:#f7f9fc;--white:#fff;--muted:#68758d;--line:#e4eaf3;--gold:#e5a94b;--radius-lg:26px;--radius-md:18px;--shadow-soft:0 18px 50px rgba(31,57,104,.10);--shadow-card:0 10px 30px rgba(31,57,104,.08)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--mist);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}
    .side-nav{position:fixed;z-index:30;inset:0 auto 0 0;width:248px;padding:30px 22px;background:rgba(255,255,255,.92);border-right:1px solid var(--line);backdrop-filter:blur(18px)}
    .brand{display:flex;align-items:center;gap:12px;margin-bottom:55px;color:var(--navy);font-weight:800;letter-spacing:-.04em;line-height:1.25}.brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;color:#fff;background:var(--blue);border-radius:13px;box-shadow:0 9px 20px rgba(55,103,214,.25);font-size:18px}.brand-text{font-size:15px}
    .nav-label{margin:0 0 12px 12px;color:#9aa5b8;font-size:11px;letter-spacing:.16em;text-transform:uppercase}.nav-list{display:grid;gap:8px}.nav-link{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;color:var(--muted);border:1px solid transparent;border-radius:14px;transition:.25s ease}.nav-link:hover{color:var(--navy);background:#f2f6ff;transform:translateX(3px)}.nav-link.active{color:var(--blue);background:#edf3ff;border-color:#dce7ff;font-weight:700}.nav-icon{display:grid;place-items:center;width:25px;height:25px;color:currentColor;font-size:14px;background:rgba(55,103,214,.09);border-radius:8px}
    .nav-note{position:absolute;right:22px;bottom:30px;left:22px;padding:16px;color:var(--muted);background:#f7f9fc;border:1px solid var(--line);border-radius:16px;font-size:12px;line-height:1.65}.main-area{margin-left:248px}.mobile-bar{display:none;position:sticky;top:0;z-index:25;align-items:center;justify-content:space-between;padding:14px 18px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.mobile-toggle{width:42px;height:42px;color:var(--navy);background:#f1f5fd;border:0;border-radius:12px}
    .container{width:min(1160px,calc(100% - 64px));margin:0 auto}.section{padding:94px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.14em}.eyebrow:before{content:"";width:28px;height:2px;background:var(--gold);border-radius:99px}.section-heading{max-width:700px;margin-bottom:40px}.section-heading h2{margin:0 0 14px;color:var(--navy);font-size:clamp(29px,4vw,46px);line-height:1.2;letter-spacing:-.055em}.section-heading p{margin:0;color:var(--muted)}
    .guide-hero{padding:86px 0 76px;background:linear-gradient(135deg,#f7f9fc,#edf3ff);border-bottom:1px solid var(--line)}.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:68px;align-items:center}.guide-hero h1{max-width:720px;margin:0 0 22px;color:var(--navy);font-size:clamp(40px,5.6vw,68px);line-height:1.1;letter-spacing:-.075em}.hero-copy{max-width:650px;margin:0 0 29px;color:#59677f;font-size:18px}.button-row{display:flex;flex-wrap:wrap;gap:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:13px;font-weight:700;transition:.25s ease}.btn-primary{color:#fff;background:var(--blue);box-shadow:0 12px 24px rgba(55,103,214,.2)}.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 15px 30px rgba(55,103,214,.28)}.btn-secondary{color:var(--navy);background:#fff;border-color:#d6e0f0}.btn-secondary:hover{border-color:var(--blue);transform:translateY(-2px)}
    .voucher{position:relative;padding:30px;background:#fff;border:1px solid #dce6f5;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden}.voucher:before{content:"";position:absolute;top:0;right:0;width:110px;height:110px;background:#edf3ff;border-radius:0 0 0 100%}.voucher-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;color:var(--muted);font-size:13px}.voucher-badge{padding:6px 10px;color:#946523;background:#fff6e7;border-radius:99px;font-weight:700}.voucher h3{position:relative;margin:0 0 12px;color:var(--navy);font-size:30px;line-height:1.3}.voucher p{margin:0 0 24px;color:var(--muted)}.voucher-rule{height:1px;margin:22px 0;background:repeating-linear-gradient(90deg,#dce5f2 0 8px,transparent 8px 14px)}.voucher-list{display:grid;gap:12px;margin:0 0 26px;padding:0;list-style:none}.voucher-list li{display:flex;gap:10px;color:#53627a;font-size:14px}.voucher-list li:before{content:"✓";color:var(--blue);font-weight:800}
    .split{display:grid;grid-template-columns:.8fr 1.2fr;gap:58px;align-items:start}.info-panel{padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.info-panel h3{margin:0 0 12px;color:var(--navy);font-size:24px}.info-panel p{margin:0;color:var(--muted)}.check-list{display:grid;gap:17px;margin:0;padding:0;list-style:none}.check-list li{display:grid;grid-template-columns:34px 1fr;gap:15px;padding:19px 0;border-bottom:1px solid var(--line)}.check-list li:last-child{border-bottom:0}.check-icon{display:grid;place-items:center;width:34px;height:34px;color:var(--blue);background:#edf3ff;border-radius:11px;font-weight:800}.check-list strong{display:block;margin-bottom:3px;color:var(--navy)}.check-list span{color:var(--muted);font-size:14px}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);transition:.25s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}.feature-number{color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.1em}.feature-card h3{margin:18px 0 9px;color:var(--navy);font-size:20px}.feature-card p{margin:0;color:var(--muted);font-size:14px}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.step{position:relative;padding:10px 25px;border-right:1px solid var(--line)}.step:last-child{border-right:0}.step b{display:block;margin-bottom:8px;color:var(--blue);font-size:13px}.step h3{margin:0 0 7px;color:var(--navy);font-size:18px}.step p{margin:0;color:var(--muted);font-size:14px}
    .faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}.faq-list{display:grid;gap:12px}.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.faq-item summary{padding:19px 22px;color:var(--navy);font-weight:700;cursor:pointer;list-style:none}.faq-item summary:after{content:"＋";float:right;color:var(--blue);font-size:20px}.faq-item p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:14px}.cta{padding:58px 0;background:var(--navy);color:#fff}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{margin:0 0 10px;font-size:clamp(27px,4vw,42px);line-height:1.2}.cta p{max-width:650px;margin:0;color:#cbd7ee}.cta .btn-secondary{background:#fff;border-color:#fff}
    footer{padding:48px 0 28px;background:#fff;border-top:1px solid var(--line)}.footer-top{display:flex;justify-content:space-between;gap:35px}.footer-brand{margin-bottom:10px;color:var(--navy);font-size:19px;font-weight:800}.footer-copy{max-width:620px;color:var(--muted);font-size:13px}.footer-links{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;gap:12px 22px;color:var(--muted);font-size:13px}.footer-links a:hover{color:var(--blue)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:30px;padding-top:20px;color:#9aa5b8;border-top:1px solid var(--line);font-size:12px}
    :focus-visible{outline:3px solid rgba(55,103,214,.35);outline-offset:3px}
    @media(max-width:1024px){.side-nav{width:220px}.main-area{margin-left:220px}.hero-layout{gap:35px}.container{width:min(100% - 44px,900px)}}
    @media(max-width:768px){.side-nav{display:none}.main-area{margin-left:0}.mobile-bar{display:flex}.container{width:min(100% - 36px,620px)}.hero-layout,.split,.faq{grid-template-columns:1fr;gap:35px}.guide-hero{padding:62px 0}.feature-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr;gap:22px}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:22px}.cta-inner{align-items:flex-start;flex-direction:column}.footer-top{flex-direction:column}.footer-links{justify-content:flex-start}}
    @media(max-width:520px){.section{padding:68px 0}.container{width:calc(100% - 30px)}.guide-hero h1{font-size:40px}.hero-copy{font-size:16px}.feature-grid,.steps{grid-template-columns:1fr}.step,.step:nth-child(2){border-right:0;border-bottom:1px solid var(--line);padding:15px 0 20px}.step:last-child{border-bottom:0}.footer-bottom{align-items:flex-start;flex-direction:column}.voucher{padding:23px}}