/* roulang page: index */
:root {
      --c-primary: #0f766e;
      --c-primary-deep: #115e59;
      --c-primary-soft: #99f6e4;
      --c-accent: #ea580c;
      --c-gold: #d4a017;
      --c-ink: #102826;
      --c-muted: #5a706c;
      --c-bg: #f4fbf8;
      --c-bg-alt: #e8f6f1;
      --c-card: #ffffff;
      --c-line: rgba(15, 118, 110, .14);
      --c-dark: #07332f;
      --grad-brand: linear-gradient(135deg, #115e59 0%, #0d9488 48%, #f59e0b 140%);
      --grad-warm: linear-gradient(120deg, #0f766e 0%, #14b8a6 55%, #fb923c 120%);
      --shadow-card: 0 18px 50px rgba(7, 51, 47, .12);
      --shadow-soft: 0 10px 28px rgba(15, 118, 110, .08);
      --radius-xl: 32px;
      --radius-lg: 22px;
      --radius-md: 14px;
      --header-h: 78px;
      --space: 88px;
      --container: 1180px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--c-ink);
      background: var(--c-bg);
      line-height: 1.75;
      font-size: 16px;
      min-width: 320px;
    }
    img { max-width: 100%; display: block; height: auto; }
    a { color: var(--c-primary-deep); text-decoration: none; transition: .22s ease; }
    a:hover { color: var(--c-accent); }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid #5eead4;
      outline-offset: 2px;
    }
    button, input, select, textarea { font-family: inherit; }
    button { cursor: pointer; }
    ul { list-style: none; }
    .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
    .skip {
      position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 100;
    }
    .skip:focus { left: 8px; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      height: var(--header-h);
      display: flex; align-items: center;
      background: rgba(244, 251, 248, .86);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--c-line);
    }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 900; color: var(--c-primary-deep); letter-spacing: .02em;
    }
    .logo:hover { color: var(--c-primary); transform: translateY(-1px); }
    .logo-mark {
      width: 42px; height: 42px; border-radius: 14px;
      background: var(--grad-brand); color: #fff;
      display: grid; place-items: center; font-size: 18px;
      box-shadow: 0 8px 18px rgba(13, 148, 136, .35);
    }
    .logo-text { font-size: 18px; line-height: 1.2; }
    .logo-text small { display: block; font-size: 11px; font-weight: 500; color: var(--c-muted); letter-spacing: .18em; }
    .nav { display: flex; align-items: center; gap: 6px; }
    .nav a {
      padding: 8px 12px; border-radius: 999px; color: var(--c-ink); font-size: 14px; font-weight: 500;
    }
    .nav a:hover, .nav a.active {
      background: #d1fae5; color: var(--c-primary-deep);
    }
    .nav-cta {
      margin-left: 8px;
      background: var(--c-primary) !important; color: #fff !important;
      padding: 10px 16px !important;
      box-shadow: 0 8px 18px rgba(15, 118, 110, .28);
    }
    .nav-cta:hover { background: var(--c-primary-deep) !important; transform: translateY(-1px); }
    .menu-btn {
      display: none; width: 44px; height: 44px; border: 1px solid var(--c-line);
      border-radius: 12px; background: #fff; color: var(--c-ink); font-size: 18px;
    }
    .hero {
      position: relative; overflow: hidden;
      padding: 36px 0 70px;
      background: #07332f;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background: url("/assets/images/4de692579c628f5e.webp") center/cover no-repeat;
      transform: scale(1.04);
      filter: saturate(1.05);
    }
    .hero-bg::after {
      content: ""; position: absolute; inset: 0;
      background:
        linear-gradient(120deg, rgba(7, 31, 29, .82) 8%, rgba(15, 118, 110, .55) 48%, rgba(234, 88, 12, .28) 100%),
        linear-gradient(to top, rgba(7, 51, 47, .55), transparent 45%);
    }
    .hero-grid {
      position: relative; z-index: 1;
      display: grid;
      grid-template-columns: 1.35fr .82fr;
      grid-template-rows: auto auto;
      gap: 18px;
      align-items: stretch;
    }
    .hero-main, .hero-side {
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.2);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(10px);
      color: #f8fffc;
    }
    .hero-main {
      grid-row: span 2;
      padding: 42px 42px 36px;
      background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(15,118,110,.18));
    }
    .hero-side { padding: 22px; overflow: hidden; }
    .hero-side-a { margin-top: 28px; transform: rotate(-1.2deg); }
    .hero-side-b { margin-left: -8px; transform: rotate(1.4deg) translateY(-6px); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
      color: #ccfbf1; font-size: 12px; letter-spacing: .12em;
      padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
    }
    h1 {
      font-family: "Noto Serif SC", serif;
      font-size: clamp(30px, 4.2vw, 46px);
      line-height: 1.28; font-weight: 700; margin-bottom: 18px; color: #fff;
    }
    .hero-lead { font-size: 16px; line-height: 1.9; color: rgba(248,255,252,.9); max-width: 640px; margin-bottom: 26px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0;
      font-weight: 700; font-size: 15px; transition: .22s ease;
    }
    .btn-primary { background: linear-gradient(90deg, #f97316, #ea580c); color: #fff; box-shadow: 0 10px 24px rgba(234,88,12,.35); }
    .btn-primary:hover { transform: translateY(-2px); color: #fff; }
    .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
    .btn-ghost:hover { background: #fff; color: var(--c-primary-deep); }
    .btn-solid { background: var(--c-primary); color: #fff; }
    .btn-solid:hover { background: var(--c-primary-deep); color: #fff; transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    .badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
    .data-badge {
      min-width: 118px; padding: 10px 14px; border-radius: 16px;
      background: rgba(7,51,47,.28); border: 1px solid rgba(255,255,255,.14);
    }
    .data-badge strong { display: block; font-size: 20px; color: #fde68a; }
    .data-badge span { font-size: 12px; color: #d1fae5; }
    .hero-side img { width: 100%; height: 118px; object-fit: cover; border-radius: 16px; margin-bottom: 12px; }
    .hero-side h3 { font-size: 18px; margin-bottom: 6px; }
    .hero-side p { font-size: 13px; color: rgba(255,255,255,.84); }
    .chip { display: inline-block; margin-top: 10px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #fde68a; color: #7c2d12; font-weight: 700; }
    .section { padding: var(--space) 0; }
    .section h2 {
      font-family: "Noto Serif SC", serif;
      font-size: clamp(26px, 3.4vw, 36px); line-height: 1.3; margin-bottom: 14px;
    }
    .section-lead { color: var(--c-muted); max-width: 720px; margin-bottom: 32px; font-size: 15px; }
    .kicker { color: var(--c-accent); font-size: 13px; font-weight: 700; letter-spacing: .16em; margin-bottom: 8px; }
    .pain { background: #fff; }
    .pain-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
    .pain-photo { position: relative; }
    .pain-photo img { width: 100%; height: 460px; object-fit: cover; border-radius: 30px; box-shadow: var(--shadow-card); }
    .float-note {
      position: absolute; left: 18px; bottom: 18px; right: 18px;
      background: rgba(255,255,255,.94); border-radius: 18px; padding: 14px 16px;
      box-shadow: var(--shadow-soft);
    }
    .pain-list { display: flex; flex-direction: column; gap: 14px; }
    .pain-item {
      display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 18px;
      border: 1px solid var(--c-line); border-radius: 20px; background: var(--c-bg);
      transition: .22s ease;
    }
    .pain-item:hover { transform: translateX(6px); border-color: #99f6e4; box-shadow: var(--shadow-soft); }
    .pain-ico {
      width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
      background: var(--grad-brand); color: #fff; font-size: 18px;
    }
    .pain-item h3 { font-size: 18px; margin-bottom: 4px; }
    .pain-item p { color: var(--c-muted); font-size: 14px; }
    .solve { background: linear-gradient(180deg, #e7f7f2, #f4fbf8); }
    .bento {
      display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: auto auto; gap: 18px;
    }
    .bento-card {
      background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-soft);
      border: 1px solid var(--c-line);
    }
    .bento-wide { grid-column: 1 / 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: center; }
    .bento-wide img, .bento-tall img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; border-radius: 18px; }
    .bento-tall { grid-row: span 2; background: var(--c-dark); color: #ecfdf5; }
    .bento-tall h3, .bento-card h3 { font-size: 22px; margin: 8px 0 10px; }
    .vs { display: grid; gap: 10px; margin-top: 12px; }
    .vs li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 14px; }
    .ladder { background: #fff; }
    .ladder-track {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative;
    }
    .ladder-track::before {
      content: ""; position: absolute; top: 38px; left: 12%; right: 12%; height: 4px;
      background: var(--grad-warm); border-radius: 99px;
    }
    .ladder-card {
      position: relative; background: #f0fdfa; border: 1px solid var(--c-line);
      border-radius: 24px; padding: 28px 22px 22px; margin: 0 10px; text-align: left;
      box-shadow: var(--shadow-soft); transition: .22s ease;
    }
    .ladder-card:nth-child(2) { transform: translateY(-18px); background: #fff; border-color: #99f6e4; }
    .ladder-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-card); }
    .ladder-card:nth-child(2):hover { transform: translateY(-26px); }
    .step-no {
      width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
      background: var(--grad-brand); color: #fff; font-weight: 900; margin-bottom: 16px;
      position: relative; z-index: 1;
    }
    .price { font-size: 28px; font-weight: 900; color: var(--c-primary-deep); margin: 8px 0; }
    .price em { font-style: normal; font-size: 14px; color: var(--c-muted); font-weight: 500; }
    .plans { background: radial-gradient(circle at 10% 20%, #ccfbf1, transparent 28%), #f7faf9; }
    .plan-row { display: grid; grid-template-columns: .9fr 1.15fr .9fr; gap: 16px; align-items: stretch; }
    .plan {
      background: #fff; border-radius: 26px; padding: 26px; border: 1px solid var(--c-line);
      box-shadow: var(--shadow-soft);
    }
    .plan.featured {
      background: var(--grad-brand); color: #fff; transform: scale(1.04);
      box-shadow: 0 24px 50px rgba(15,118,110,.28);
    }
    .plan h3 { font-size: 22px; margin-bottom: 8px; }
    .plan p, .plan li { font-size: 14px; }
    .plan ul { margin: 16px 0 0; display: grid; gap: 8px; }
    .plan li { display: flex; gap: 8px; align-items: flex-start; }
    .plan.featured .price, .plan.featured p { color: #fff; }
    .tag {
      display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 999px;
      background: #ffedd5; color: #9a3412; font-weight: 700; margin-bottom: 10px;
    }
    .plan.featured .tag { background: #fde68a; color: #7c2d12; }
    .limited {
      position: relative; overflow: hidden; color: #fff;
      padding: 72px 0;
    }
    .limited-bg {
      position: absolute; inset: 0;
      background: url("/assets/images/18fbe3dbeb8dbadb.webp") center/cover no-repeat;
    }
    .limited-bg::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(7,51,47,.88), rgba(15,118,110,.55) 70%, rgba(234,88,12,.35));
    }
    .limited-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; align-items: center; }
    .countdown { display: flex; gap: 10px; margin: 20px 0 8px; }
    .count-box {
      min-width: 72px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      border-radius: 16px; text-align: center; padding: 12px 8px;
    }
    .count-box b { display: block; font-size: 28px; }
    .count-box span { font-size: 12px; color: #ccfbf1; }
    .quota {
      background: rgba(255,255,255,.1); border-radius: 24px; padding: 24px; border: 1px solid rgba(255,255,255,.18);
    }
    .quota strong { font-size: 42px; color: #fde68a; display: block; }
    .steps { background: #fff; }
    .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .time-card {
      padding: 22px 18px; border-radius: 22px; background: var(--c-bg-alt); border: 1px dashed #99f6e4;
      min-height: 210px; position: relative;
    }
    .time-card:nth-child(even) { margin-top: 28px; background: #fff; border-style: solid; }
    .time-card .num { font-size: 34px; font-weight: 900; color: #99f6e4; line-height: 1; }
    .time-card h3 { margin: 10px 0 8px; font-size: 18px; }
    .time-card p { font-size: 14px; color: var(--c-muted); }
    .hot { background: #07332f; color: #ecfdf5; }
    .hot .section-lead { color: #99f6e4; }
    .hot-list { display: grid; gap: 14px; }
    .hot-item {
      display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px; padding: 12px 16px; transition: .22s ease;
    }
    .hot-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
    .hot-item img { width: 88px; height: 68px; object-fit: cover; border-radius: 14px; }
    .hot-item h3 { font-size: 18px; margin-bottom: 4px; color: #fff; }
    .hot-item p { font-size: 13px; color: #99f6e4; }
    .hot-rank { font-weight: 900; color: #fbbf24; font-size: 20px; }
    .results { background: #fff; }
    .result-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; }
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .stat {
      padding: 22px; border-radius: 22px; background: var(--c-bg-alt); border: 1px solid var(--c-line);
    }
    .stat b { display: block; font-size: 32px; color: var(--c-primary-deep); }
    .stat span { color: var(--c-muted); font-size: 14px; }
    .result-copy { padding: 8px 0 0; }
    .reviews { background: linear-gradient(180deg, #ecfdf5, #fff 60%); }
    .wall {
      display: grid; grid-template-columns: 1.15fr .85fr 1fr; grid-auto-rows: minmax(140px, auto); gap: 16px;
    }
    .quote {
      background: #fff; border-radius: 24px; padding: 22px; box-shadow: var(--shadow-soft); border: 1px solid var(--c-line);
    }
    .quote:nth-child(1) { grid-row: span 2; background: var(--c-dark); color: #fff; }
    .quote:nth-child(4) { grid-column: span 2; }
    .quote p { font-size: 15px; margin-bottom: 14px; }
    .quote .who { font-size: 13px; color: var(--c-muted); font-weight: 700; }
    .quote:nth-child(1) .who { color: #99f6e4; }
    .stars { color: #f59e0b; margin-bottom: 8px; letter-spacing: 2px; }
    .audience {
      position: relative; overflow: hidden; color: #fff;
    }
    .audience-bg {
      position: absolute; inset: 0;
      background: url("/assets/images/cfe3c9219d777d0d.webp") center/cover no-repeat;
    }
    .audience-bg::after { content: ""; position: absolute; inset: 0; background: rgba(7,51,47,.78); }
    .audience .container { position: relative; z-index: 1; }
    .matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .person {
      min-height: 180px; border-radius: 22px; padding: 18px;
      background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    }
    .person h3 { font-size: 16px; margin: 10px 0 8px; }
    .person p { font-size: 13px; color: #ccfbf1; }
    .guarantee { background: #fff; padding-top: 48px; padding-bottom: 48px; }
    .icon-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
    .icon-item {
      text-align: center; padding: 18px 10px; border-radius: 18px; background: var(--c-bg);
      border: 1px solid var(--c-line); font-size: 13px; font-weight: 700;
      transition: .2s ease;
    }
    .icon-item i { display: block; font-size: 22px; color: var(--c-primary); margin-bottom: 8px; }
    .icon-item:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-soft); }
    .partner {
      background: url("/assets/images/4001709beacd8730.webp") center/cover no-repeat;
      position: relative;
    }
    .partner::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.92); }
    .partner .container { position: relative; z-index: 1; }
    .partner-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
    .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mini {
      background: #fff; border-radius: 18px; padding: 18px; border: 1px solid var(--c-line); box-shadow: var(--shadow-soft);
    }
    .mini h3 { font-size: 16px; margin-bottom: 6px; }
    .mini p { font-size: 13px; color: var(--c-muted); }
    .join-box {
      background: var(--c-dark); color: #fff; border-radius: 24px; padding: 28px;
    }
    .join-box a { color: #fde68a; font-weight: 700; }
    .news { background: #f4fbf8; }
    .news-list { display: grid; gap: 16px; }
    .news-item {
      display: grid; grid-template-columns: 220px 1fr; gap: 18px; background: #fff;
      border-radius: 22px; overflow: hidden; border: 1px solid var(--c-line);
      box-shadow: var(--shadow-soft);
    }
    .news-item img { width: 100%; height: 150px; object-fit: cover; }
    .news-body { padding: 18px 18px 18px 0; }
    .news-body h3 { font-size: 20px; margin-bottom: 8px; }
    .news-body p { color: var(--c-muted); font-size: 14px; }
    .news-meta { font-size: 12px; color: var(--c-accent); font-weight: 700; margin-bottom: 6px; }
    .metrics { background: var(--c-dark); color: #ecfdf5; }
    .metric-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .metric { border-left: 3px solid #f59e0b; padding-left: 16px; }
    .metric b { font-size: 36px; display: block; color: #fde68a; }
    .cta {
      position: relative; overflow: hidden;
    }
    .cta-bg {
      position: absolute; inset: 0;
      background: url("/assets/images/fe53c7f5f4f3f395.webp") center/cover no-repeat;
    }
    .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(236,253,245,.88)); }
    .cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
    .addon { display: grid; gap: 10px; margin-top: 16px; }
    .addon label {
      display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--c-line);
      border-radius: 14px; padding: 12px; font-size: 14px;
    }
    .ask-form {
      background: #fff; border-radius: 24px; padding: 24px; box-shadow: var(--shadow-card); border: 1px solid var(--c-line);
      display: grid; gap: 12px;
    }
    .ask-form label { font-size: 13px; font-weight: 700; }
    .ask-form input, .ask-form select, .ask-form textarea {
      width: 100%; border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; background: #f8fffc;
    }
    .form-msg { display: none; padding: 12px; border-radius: 12px; background: #d1fae5; color: #065f46; font-size: 14px; }
    .site-footer {
      background: #062824; color: #d1fae5; padding: 48px 0 24px;
    }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; margin-bottom: 28px; }
    .site-footer h3 { color: #fff; margin-bottom: 12px; font-size: 18px; }
    .site-footer p, .site-footer li { font-size: 14px; color: #99f6e4; margin-bottom: 6px; }
    .site-footer a { color: #fde68a; }
    .copy { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; font-size: 12px; color: #5eead4; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    @media (max-width: 1024px) {
      .hero-grid, .pain-grid, .bento, .bento-wide, .plan-row, .limited-inner, .result-split, .partner-grid, .cta-grid, .footer-grid { grid-template-columns: 1fr; }
      .bento-tall { grid-row: auto; }
      .matrix, .icon-bar, .metric-line, .timeline { grid-template-columns: repeat(2, 1fr); }
      .wall { grid-template-columns: 1fr 1fr; }
      .quote:nth-child(4) { grid-column: auto; }
      .hero-side-a, .hero-side-b { margin: 0; transform: none; }
      .plan.featured { transform: none; }
    }
    @media (max-width: 768px) {
      :root { --space: 64px; --header-h: 68px; }
      .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; flex-direction: column; padding: 12px; border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-card); }
      .nav.open { display: flex; }
      .menu-btn { display: grid; place-items: center; }
      .logo-text { font-size: 15px; }
      .hero-main { padding: 28px 22px; }
      .ladder-track { grid-template-columns: 1fr; }
      .ladder-track::before { display: none; }
      .ladder-card, .ladder-card:nth-child(2) { transform: none; margin: 0 0 12px; }
      .hot-item, .news-item { grid-template-columns: 1fr; }
      .news-body { padding: 0 16px 16px; }
      .pain-photo img { height: 280px; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 28px); }
      .matrix, .icon-bar, .metric-line, .timeline, .mini-grid, .wall { grid-template-columns: 1fr; }
      .hero-actions, .badge-row { flex-direction: column; align-items: stretch; }
      h1 { font-size: 28px; }
      .copy { flex-direction: column; }
    }