/* roulang page: index */
:root {
      --ink: #10243f;
      --navy: #163b68;
      --cyan: #0ea5b7;
      --cyan-dark: #087f92;
      --coral: #f47c6c;
      --mist: #f3f8fb;
      --paper: #ffffff;
      --muted: #64758b;
      --line: #dce9f0;
      --radius-lg: 28px;
      --radius-md: 18px;
      --shadow-soft: 0 18px 50px rgba(20, 67, 102, .10);
      --shadow-card: 0 10px 30px rgba(20, 67, 102, .08);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fbfdfe;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    .site-header {
      position: relative;
      z-index: 20;
      background: rgba(251,253,254,.88);
      border-bottom: 1px solid rgba(220,233,240,.9);
      backdrop-filter: blur(16px);
    }
    .nav-shell { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; color: var(--navy); letter-spacing: -.04em; }
    .brand-mark {
      width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
      color: white; background: var(--navy); box-shadow: 5px 5px 0 #bde8ed;
      font-size: 15px;
    }
    .brand-text { font-size: 17px; white-space: nowrap; }
    .nav-links { display: flex; align-items: center; gap: 7px; margin-left: auto; }
    .nav-links a {
      color: #52677f; font-size: 14px; font-weight: 700; padding: 9px 14px;
      border-radius: 10px; transition: .25s ease;
    }
    .nav-links a:hover, .nav-links a:focus, .nav-links a.active { color: var(--navy); background: #e8f5f7; }
    .nav-action {
      display: inline-flex; align-items: center; gap: 8px; color: white; background: var(--navy);
      padding: 11px 17px; border-radius: 12px; font-size: 13px; font-weight: 800;
      transition: transform .25s, background .25s, box-shadow .25s;
    }
    .nav-action:hover { transform: translateY(-2px); background: var(--cyan-dark); box-shadow: 0 8px 20px rgba(14,165,183,.22); }
    .menu-button { display: none; border: 0; background: transparent; color: var(--navy); font-size: 25px; }
    .hero {
      overflow: hidden;
      background:
        radial-gradient(circle at 78% 22%, rgba(14,165,183,.18), transparent 31%),
        linear-gradient(110deg, #eff9fa 0%, #f9fcfd 52%, #edf5fb 100%);
      border-bottom: 1px solid var(--line);
    }
    .hero-grid { min-height: 575px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 70px; padding: 72px 0 76px; }
    .eyebrow, .section-kicker { color: var(--cyan-dark); font-size: 12px; letter-spacing: .16em; font-weight: 900; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 650px; margin-bottom: 23px; font-size: clamp(42px, 5.3vw, 70px); line-height: 1.12; letter-spacing: -.065em; color: var(--ink); }
    .hero-copy { max-width: 610px; color: #5b6e83; font-size: 17px; margin-bottom: 29px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .btn-primary, .btn-secondary {
      display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 48px;
      padding: 0 20px; border-radius: 13px; font-weight: 800; font-size: 14px; transition: .25s ease;
    }
    .btn-primary { color: white; background: var(--navy); box-shadow: 0 10px 20px rgba(22,59,104,.16); }
    .btn-primary:hover { background: var(--cyan-dark); transform: translateY(-2px); }
    .btn-secondary { color: var(--navy); border: 1px solid #cbdfe8; background: rgba(255,255,255,.68); }
    .btn-secondary:hover { background: white; border-color: var(--cyan); transform: translateY(-2px); }
    .hero-note { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 29px; color: #6f8193; font-size: 13px; }
    .hero-note strong { display: block; color: var(--navy); font-size: 20px; line-height: 1.2; }
    .invite-panel {
      position: relative; overflow: hidden; padding: 30px; border-radius: var(--radius-lg);
      background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-soft);
    }
    .invite-panel::after { content: ""; position: absolute; width: 180px; height: 180px; right: -65px; top: -70px; border-radius: 50%; background: #d5f2f3; }
    .panel-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: start; gap: 15px; }
    .panel-top h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.04em; margin-bottom: 7px; }
    .panel-top p { color: var(--muted); font-size: 13px; margin: 0; }
    .status-badge { white-space: nowrap; color: #087f68; background: #e1f7ed; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; }
    .reward-box { position: relative; z-index: 1; margin: 28px 0 23px; padding: 20px; border-radius: 17px; background: var(--navy); color: white; }
    .reward-box small { color: #b9d3e7; font-size: 12px; }
    .reward-line { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 6px; }
    .reward-line strong { font-size: 34px; line-height: 1; letter-spacing: -.06em; }
    .reward-line span { color: #d8f3f2; font-size: 12px; }
    .progress-label { display: flex; justify-content: space-between; color: #6b7d90; font-size: 12px; margin-bottom: 8px; }
    .progress-track { height: 9px; border-radius: 99px; background: #e3eef2; overflow: hidden; }
    .progress-value { width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #72d5c4); }
    .invite-button { width: 100%; margin-top: 24px; border: 0; }
    .panel-foot { margin: 16px 0 0; color: #8090a0; text-align: center; font-size: 12px; }
    .section { padding: 92px 0; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 35px; }
    .section-head h2 { max-width: 580px; margin: 8px 0 0; color: var(--ink); font-size: clamp(29px, 4vw, 45px); line-height: 1.2; letter-spacing: -.055em; }
    .section-head p { max-width: 470px; margin: 0; color: var(--muted); font-size: 15px; }
    .matrix-grid { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 17px; }
    .matrix-card { min-height: 210px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: end; padding: 25px; border-radius: 21px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: .3s ease; }
    .matrix-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: #b5dfe5; }
    .matrix-card.large { min-height: 290px; background: linear-gradient(145deg, #123761, #205b82); color: white; }
    .matrix-card.large::before { content: "亚洲"; position: absolute; right: -16px; top: -48px; color: rgba(255,255,255,.1); font-size: 150px; font-weight: 900; letter-spacing: -.15em; }
    .matrix-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: auto; border-radius: 14px; color: var(--cyan-dark); background: #e7f7f7; font-size: 20px; font-weight: 900; }
    .large .matrix-icon { color: white; background: rgba(255,255,255,.16); }
    .matrix-card h3 { position: relative; margin-bottom: 7px; font-size: 21px; letter-spacing: -.04em; }
    .matrix-card p { position: relative; margin: 0; color: #6f8091; font-size: 13px; line-height: 1.65; }
    .large p { color: #c5d8e7; }
    .milestone { background: var(--mist); border-top: 1px solid #e4f0f3; border-bottom: 1px solid #e4f0f3; }
    .milestone-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
    .milestone-intro h2 { margin: 8px 0 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.16; letter-spacing: -.06em; }
    .milestone-intro p { color: var(--muted); font-size: 15px; }
    .timeline { position: relative; padding-left: 28px; }
    .timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #bfe2e5; }
    .timeline-item { position: relative; padding: 0 0 25px 25px; }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-item::before { content: ""; position: absolute; left: -28px; top: 7px; width: 14px; height: 14px; border: 3px solid var(--mist); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 2px #a9d9df; }
    .timeline-item strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
    .timeline-item p { margin: 0; color: var(--muted); font-size: 13px; }
    .news-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 23px; }
    .news-feature { min-height: 310px; display: flex; flex-direction: column; justify-content: end; padding: 29px; color: white; border-radius: var(--radius-lg); background: linear-gradient(140deg, rgba(16,45,78,.95), rgba(17,111,125,.88)), radial-gradient(circle at 80% 20%, #8de0d1, transparent 30%); }
    .news-feature .tag { color: #d2f6ef; }
    .news-feature h3 { max-width: 600px; margin: 12px 0 9px; font-size: 29px; line-height: 1.28; letter-spacing: -.045em; }
    .news-feature p { max-width: 570px; margin: 0; color: #c8dbe5; font-size: 14px; }
    .tag { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
    .news-list { padding: 7px 0; }
    .news-item { display: flex; justify-content: space-between; gap: 18px; padding: 19px 0; border-bottom: 1px solid var(--line); }
    .news-item:first-child { padding-top: 0; }
    .news-item h4 { margin: 0 0 5px; color: var(--navy); font-size: 15px; line-height: 1.5; transition: color .2s; }
    .news-item a:hover h4 { color: var(--cyan-dark); }
    .news-item p { margin: 0; color: #7c8b9a; font-size: 12px; }
    .news-date { color: #9aa8b4; font-size: 11px; white-space: nowrap; padding-top: 2px; }
    .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .trust-card { padding: 25px 21px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 8px 22px rgba(20,67,102,.045); }
    .trust-card strong { display: block; margin-bottom: 8px; color: var(--navy); font-size: 17px; }
    .trust-card p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.7; }
    .app-section { padding-top: 35px; }
    .app-box { display: grid; grid-template-columns: 1fr .9fr; gap: 50px; align-items: center; padding: 48px 55px; border-radius: var(--radius-lg); color: white; background: var(--navy); overflow: hidden; }
    .app-box h2 { max-width: 560px; margin: 8px 0 14px; font-size: clamp(29px, 4vw, 43px); line-height: 1.2; letter-spacing: -.06em; }
    .app-box p { max-width: 540px; margin-bottom: 23px; color: #c6d8e6; font-size: 15px; }
    .app-button { color: var(--navy); background: white; }
    .app-button:hover { color: white; background: var(--cyan); }
    .app-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
    .app-point { padding: 19px; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(255,255,255,.08); }
    .app-point strong { display: block; margin-bottom: 3px; font-size: 24px; }
    .app-point span { color: #b9d2e1; font-size: 12px; }
    .site-footer { padding: 52px 0 95px; background: #f0f6f8; border-top: 1px solid var(--line); }
    .footer-grid { display: flex; justify-content: space-between; gap: 40px; }
    .footer-brand p { max-width: 360px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
    .footer-links { display: flex; gap: 60px; }
    .footer-links h4 { margin: 0 0 10px; color: var(--navy); font-size: 13px; }
    .footer-links a { display: block; margin: 6px 0; color: #6d8092; font-size: 13px; }
    .footer-links a:hover { color: var(--cyan-dark); }
    .copyright { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); color: #8b9aa7; font-size: 12px; }
    .floating-cta { position: fixed; z-index: 30; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border: 1px solid #cfe5e8; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); }
    .floating-cta span { color: var(--navy); font-size: 12px; font-weight: 800; }
    .floating-cta a { padding: 8px 14px; border-radius: 999px; color: white; background: var(--cyan-dark); font-size: 12px; font-weight: 800; }
    :focus-visible { outline: 3px solid rgba(14,165,183,.4); outline-offset: 3px; }
    @media (max-width: 1024px) {
      .hero-grid { gap: 35px; }
      .milestone-grid { gap: 45px; }
      .app-box { padding: 40px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 30px, 600px); }
      .nav-shell { height: 68px; }
      .menu-button { display: block; }
      .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 15px 18px; background: white; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
      .nav-links.open { display: block; }
      .nav-links a { display: block; padding: 11px 13px; }
      .nav-action { display: none; }
      .hero-grid, .milestone-grid, .news-layout, .app-box { grid-template-columns: 1fr; }
      .hero-grid { padding: 56px 0 60px; }
      .hero-copy { font-size: 15px; }
      .section { padding: 68px 0; }
      .section-head { display: block; margin-bottom: 26px; }
      .section-head p { margin-top: 14px; }
      .matrix-grid { grid-template-columns: repeat(2, 1fr); }
      .matrix-card.large { grid-column: span 2; }
      .trust-grid { grid-template-columns: repeat(2, 1fr); }
      .app-box { gap: 30px; padding: 32px 25px; }
      .footer-grid { display: block; }
      .footer-links { margin-top: 30px; gap: 45px; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 42px; }
      .brand-text { font-size: 15px; }
      .hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; }
      .invite-panel { padding: 23px; }
      .matrix-grid, .trust-grid { grid-template-columns: 1fr; }
      .matrix-card.large { grid-column: auto; }
      .news-feature { min-height: 280px; padding: 23px; }
      .news-feature h3 { font-size: 24px; }
      .app-points { grid-template-columns: 1fr 1fr; }
      .footer-links { gap: 28px; }
      .floating-cta { right: 12px; left: 12px; justify-content: space-between; }
    }

/* roulang page: category1 */
:root {
      --ink:#10243f;--navy:#163b68;--cyan:#0ea5b7;--cyan-dark:#087f92;--coral:#f47c6c;
      --mist:#f3f8fb;--paper:#fff;--muted:#64758b;--line:#dce9f0;--radius-lg:28px;
      --radius-md:18px;--shadow-soft:0 18px 50px rgba(20,67,102,.10);--shadow-card:0 10px 30px rgba(20,67,102,.08)
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:#fbfdfe;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{position:relative;z-index:20;background:rgba(251,253,254,.9);border-bottom:1px solid rgba(220,233,240,.9);backdrop-filter:blur(16px)}
    .nav-shell{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;color:var(--navy);letter-spacing:-.04em}
    .brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--navy);box-shadow:5px 5px 0 #bde8ed;font-size:15px}
    .brand-text{font-size:17px;white-space:nowrap}
    .nav-links{display:flex;align-items:center;gap:7px;margin-left:auto}
    .nav-links a{color:#52677f;font-size:14px;font-weight:700;padding:9px 14px;border-radius:10px;transition:.25s ease}
    .nav-links a:hover,.nav-links a:focus,.nav-links a.active{color:var(--navy);background:#e8f5f7}
    .nav-action{display:inline-flex;align-items:center;gap:8px;color:#fff;background:var(--navy);padding:11px 17px;border-radius:12px;font-size:13px;font-weight:800;transition:.25s ease}
    .nav-action:hover{transform:translateY(-2px);background:var(--cyan-dark);box-shadow:0 8px 20px rgba(14,165,183,.22)}
    .menu-button{display:none;border:0;background:transparent;color:var(--navy);font-size:25px}
    .hero{overflow:hidden;background:radial-gradient(circle at 78% 22%,rgba(14,165,183,.18),transparent 31%),linear-gradient(110deg,#eff9fa 0%,#f9fcfd 52%,#edf5fb 100%);border-bottom:1px solid var(--line)}
    .hero-grid{min-height:530px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;padding:68px 0 74px}
    .eyebrow,.section-kicker{color:var(--cyan-dark);font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
    h1{font-size:clamp(39px,5.4vw,68px);line-height:1.1;letter-spacing:-.07em;margin:14px 0 22px;color:var(--ink)}
    .hero-copy{max-width:610px;color:#5b6e83;font-size:17px;margin:0 0 28px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
    .btn-primary,.btn-secondary{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:0 20px;border-radius:13px;font-weight:800;font-size:14px;transition:.25s ease}
    .btn-primary{color:#fff;background:var(--navy);box-shadow:0 10px 20px rgba(22,59,104,.16);border:0}
    .btn-primary:hover{background:var(--cyan-dark);transform:translateY(-2px)}
    .btn-secondary{color:var(--navy);border:1px solid #cbdfe8;background:rgba(255,255,255,.68)}
    .btn-secondary:hover{background:#fff;border-color:var(--cyan);transform:translateY(-2px)}
    .hero-note{display:flex;gap:22px;flex-wrap:wrap;margin-top:29px;color:#6f8193;font-size:13px}
    .hero-note strong{display:block;color:var(--navy);font-size:20px;line-height:1.2}
    .status-badge{white-space:nowrap;color:#087f68;background:#e1f7ed;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800}
    .deal-card{position:relative;overflow:hidden;padding:28px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
    .deal-card:after{content:"";position:absolute;right:-48px;top:-58px;width:180px;height:180px;border-radius:50%;background:#d9f3f2}
    .deal-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}
    .deal-label{color:#fff;background:var(--coral);padding:6px 11px;border-radius:999px;font-size:11px;font-weight:900}
    .countdown{color:var(--navy);font-size:13px;font-weight:800}
    .deal-visual{position:relative;z-index:1;min-height:180px;padding:25px;border-radius:20px;background:linear-gradient(140deg,#163b68,#147d8c);color:#fff;overflow:hidden}
    .deal-visual:before{content:"亚洲";position:absolute;right:-16px;bottom:-46px;font-size:125px;font-weight:900;color:rgba(255,255,255,.12);letter-spacing:-.15em}
    .deal-visual small{color:#bcebed;font-weight:800;letter-spacing:.12em}
    .deal-visual h2{max-width:280px;margin:12px 0 4px;font-size:26px;line-height:1.3;letter-spacing:-.05em}
    .deal-visual p{position:relative;max-width:270px;margin:0;color:#d6f1f2;font-size:13px}
    .deal-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;align-items:end;margin-top:22px}
    .deal-bottom p{margin:0;color:var(--muted);font-size:13px}
    .deal-bottom strong{display:block;color:var(--navy);font-size:20px}
    .section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}
    .section-head h2{max-width:580px;margin:8px 0 0;color:var(--ink);font-size:clamp(29px,4vw,45px);line-height:1.2;letter-spacing:-.055em}
    .section-head p{max-width:470px;margin:0;color:var(--muted);font-size:15px}
    .metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .metric{padding:23px 20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
    .metric strong{display:block;color:var(--navy);font-size:31px;line-height:1.2;letter-spacing:-.06em}
    .metric span{color:var(--muted);font-size:13px}
    .matrix-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:17px}
    .matrix-card{min-height:210px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:end;padding:25px;border-radius:21px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);transition:.3s ease}
    .matrix-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:#b5dfe5}
    .matrix-card.large{min-height:290px;background:linear-gradient(145deg,#123761,#205b82);color:#fff}
    .matrix-card.large:before{content:"亚洲";position:absolute;right:-16px;top:-48px;color:rgba(255,255,255,.1);font-size:150px;font-weight:900;letter-spacing:-.15em}
    .matrix-card h3{position:relative;margin:0 0 7px;font-size:21px;letter-spacing:-.04em}
    .matrix-card p{position:relative;margin:0;color:#6f8091;font-size:13px;line-height:1.65}
    .matrix-card.large p{color:#d4e8ef}
    .tag{display:inline-flex;width:max-content;color:var(--cyan-dark);background:#e8f7f8;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:900;margin-bottom:12px}
    .result-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:stretch}
    .result-panel{padding:30px;border-radius:var(--radius-lg);background:var(--navy);color:#fff;box-shadow:var(--shadow-soft)}
    .result-panel h3{font-size:28px;line-height:1.25;margin:7px 0 12px;letter-spacing:-.05em}
    .result-panel p{color:#c7d8e7;font-size:14px;margin:0}
    .result-list{margin:27px 0 0;padding:0;list-style:none}
    .result-list li{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-top:1px solid rgba(255,255,255,.16);font-size:14px}
    .result-list b{color:#8fe0dc;font-size:18px;line-height:1}
    .compare{display:grid;gap:13px;align-content:center}
    .compare-item{padding:20px 22px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow-card)}
    .compare-item header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:8px}
    .compare-item strong{color:var(--navy);font-size:15px}.compare-item span{color:var(--cyan-dark);font-size:12px;font-weight:900}
    .compare-item p{margin:0;color:var(--muted);font-size:13px}
    .faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}
    .faq-grid h2{font-size:clamp(29px,4vw,44px);line-height:1.2;letter-spacing:-.055em;margin:9px 0 14px}
    .faq-grid>div>p{color:var(--muted);font-size:15px}
    .faq-list{display:grid;gap:11px}
    details{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px 20px;box-shadow:0 5px 20px rgba(20,67,102,.045)}
    summary{cursor:pointer;color:var(--navy);font-size:15px;font-weight:800;list-style:none}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"＋";float:right;color:var(--cyan);font-size:21px;line-height:1}
    details[open] summary:after{content:"－"}
    details p{margin:12px 25px 0 0;color:var(--muted);font-size:14px}
    .cta{padding:54px 0;background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:35px 40px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
    .cta-box h2{margin:7px 0 8px;font-size:32px;line-height:1.25;letter-spacing:-.05em}.cta-box p{margin:0;color:var(--muted);font-size:14px}
    .site-footer{padding:52px 0 25px;background:#10243f;color:#d7e6ef}
    .footer-grid{display:flex;justify-content:space-between;gap:50px;padding-bottom:38px}
    .site-footer .brand{color:#fff}.site-footer .brand-mark{background:#fff;color:var(--navy);box-shadow:5px 5px 0 rgba(14,165,183,.55)}
    .footer-brand p{max-width:300px;margin:18px 0 0;color:#a9bdcd;font-size:13px}
    .footer-links{display:flex;gap:80px}.footer-links h4{margin:0 0 13px;color:#fff;font-size:13px}.footer-links a{display:block;color:#a9bdcd;font-size:13px;margin:7px 0;transition:.2s}.footer-links a:hover{color:#8fe0dc}
    .copyright{padding-top:21px;border-top:1px solid rgba(255,255,255,.14);color:#8ea7ba;font-size:12px}
    :focus-visible{outline:3px solid rgba(14,165,183,.4);outline-offset:3px}
    @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy{max-width:700px}.matrix-grid{grid-template-columns:1fr 1fr}.matrix-card.large{grid-column:span 2}.result-grid,.faq-grid{grid-template-columns:1fr;gap:35px}.metric-strip{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:700px){.container{width:min(100% - 28px,560px)}.nav-shell{height:68px}.nav-links{display:none;position:absolute;left:14px;right:14px;top:76px;padding:10px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft)}.nav-links.open{display:flex}.nav-links a{padding:12px 14px}.nav-action{display:none}.menu-button{display:block}.hero-grid{padding:53px 0 58px;min-height:auto}h1{font-size:43px}.hero-copy{font-size:15px}.section{padding:65px 0}.section-head{display:block;margin-bottom:25px}.section-head p{margin-top:14px}.matrix-grid{grid-template-columns:1fr}.matrix-card.large{grid-column:auto}.matrix-card,.matrix-card.large{min-height:220px}.cta-box{display:block;padding:28px 24px}.cta-box .btn-primary{margin-top:22px}.footer-grid{display:block}.footer-links{gap:45px;margin-top:30px}}
    @media(max-width:520px){.brand-text{font-size:15px}.metric-strip{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:17px 13px}.metric strong{font-size:25px}.deal-card{padding:19px}.deal-bottom{display:block}.deal-bottom .btn-primary{width:100%;margin-top:16px}.hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%}.footer-links{gap:25px}.copyright{line-height:1.6}}