/* roulang page: index */
:root{
      --ink:#160d18;
      --night:#21121f;
      --wine:#35152d;
      --berry:#c62d68;
      --rose:#f05a7e;
      --orange:#ff9b63;
      --gold:#f7c879;
      --text:#f8eaf1;
      --muted:#c6aab8;
      --soft:#9b7c8d;
      --line:rgba(255,190,214,.16);
      --line-strong:rgba(240,90,126,.46);
      --panel:#2b1828;
      --panel-deep:#261423;
      --radius:20px;
      --shadow:0 22px 60px rgba(8,3,10,.34);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      color:var(--text);
      background:
        radial-gradient(circle at 78% 8%,rgba(178,35,91,.18),transparent 28rem),
        radial-gradient(circle at 12% 42%,rgba(108,35,91,.13),transparent 27rem),
        var(--ink);
      font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body:before{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:-1;
      background-image:radial-gradient(rgba(255,255,255,.5) .7px,transparent .7px);
      background-size:5px 5px;
    }
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    :focus-visible{outline:3px solid var(--orange);outline-offset:4px}
    .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
    .topline{
      background:#351527;border-bottom:1px solid rgba(240,90,126,.28);
      color:#f5dce6;font-size:13px;
    }
    .topline-inner{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .topline strong{color:var(--gold);font-weight:700}
    .mini-link{color:#ffd5e2;text-decoration:underline;text-underline-offset:3px}
    .site-header{
      position:sticky;top:0;z-index:20;background:rgba(22,13,24,.9);
      backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    }
    .nav{height:78px;display:flex;align-items:center;gap:30px}
    .logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.04em;font-size:19px;white-space:nowrap}
    .logo-mark{width:30px;height:30px;border-radius:9px 14px 9px 14px;background:linear-gradient(135deg,var(--rose),var(--berry));box-shadow:0 0 24px rgba(240,90,126,.4);position:relative}
    .logo-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);right:6px;top:6px}
    .nav-links{display:flex;align-items:center;gap:8px;margin-left:auto}
    .nav-links a{color:var(--muted);font-size:14px;padding:9px 13px;border-radius:10px;transition:.25s}
    .nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(198,45,104,.14)}
    .nav-cta,.btn-primary{
      min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:0 20px;border-radius:12px;background:var(--berry);border:1px solid #ee6c91;
      color:#fff;font-weight:800;box-shadow:0 10px 28px rgba(198,45,104,.25);transition:.25s
    }
    .nav-cta:hover,.btn-primary:hover{background:#e3477a;transform:translateY(-2px);box-shadow:0 14px 34px rgba(240,90,126,.34)}
    .menu-btn{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:10px;padding:9px 12px}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-weight:800;font-size:13px;letter-spacing:.08em}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--orange);box-shadow:0 0 10px var(--orange)}
    .hero{padding:90px 0 100px;position:relative}
    .hero:after{content:"";position:absolute;right:-15%;top:5%;width:52vw;height:32vw;background:radial-gradient(ellipse,rgba(198,45,104,.2),transparent 68%);pointer-events:none}
    .hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:72px;align-items:center;position:relative;z-index:1}
    h1{font-size:clamp(42px,6vw,76px);line-height:1.08;letter-spacing:-.065em;margin:20px 0 24px;font-weight:950}
    h1 em{font-style:normal;color:var(--rose);text-shadow:0 0 28px rgba(240,90,126,.26)}
    .hero-copy{color:var(--muted);font-size:17px;max-width:620px;line-height:1.9}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
    .btn-secondary{min-height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:12px;color:#f8dbe6;font-weight:750;transition:.25s}
    .btn-secondary:hover{background:rgba(198,45,104,.13);border-color:var(--rose);transform:translateY(-2px)}
    .age-note{display:flex;gap:10px;align-items:flex-start;color:var(--soft);font-size:12px;margin-top:22px}
    .age-note b{color:var(--gold);white-space:nowrap}
    .matrix{display:grid;grid-template-columns:1fr 1fr;gap:14px;transform:rotate(2deg)}
    .matrix-card{min-height:162px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#3c1d35,#261424);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.3s}
    .matrix-card:hover{transform:translateY(-5px) rotate(-1deg);border-color:var(--line-strong)}
    .matrix-card:nth-child(2){margin-top:30px;background:linear-gradient(145deg,#452132,#251522)}
    .matrix-card:nth-child(3){margin-top:-22px;background:linear-gradient(145deg,#30224a,#251424)}
    .matrix-card:nth-child(4){background:linear-gradient(145deg,#4b2530,#281721)}
    .matrix-card:after{content:"";position:absolute;right:-25px;bottom:-35px;width:130px;height:130px;border-radius:50%;background:var(--rose);opacity:.13;filter:blur(18px)}
    .matrix-num{font-size:12px;color:var(--orange);font-weight:900}
    .matrix-card h3{font-size:20px;margin:18px 0 5px}
    .matrix-card p{font-size:13px;color:var(--muted)}
    .section{padding:96px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
    h2{font-size:clamp(29px,4vw,47px);line-height:1.15;letter-spacing:-.045em}
    .section-intro{color:var(--muted);max-width:540px;font-size:15px}
    .pain-band{border-block:1px solid var(--line);background:#271321}
    .pain-grid{display:grid;grid-template-columns:1.2fr 2fr;gap:30px;align-items:center}
    .pain-title{font-size:30px;line-height:1.3;font-weight:900}
    .pain-title span{color:var(--rose)}
    .problem-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .problem{padding:18px 18px 17px;border-left:3px solid var(--berry);background:var(--panel-deep);border-radius:0 14px 14px 0}
    .problem h3{font-size:16px;margin-bottom:4px}.problem p{font-size:13px;color:var(--muted)}
    .solution{background:linear-gradient(180deg,transparent,#281424 50%,transparent)}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
    .step{background:var(--panel);padding:26px 22px;min-height:210px;position:relative}
    .step:not(:last-child):after{content:"→";position:absolute;right:-12px;top:35px;color:var(--orange);font-size:22px;z-index:2}
    .step-num{font-size:32px;font-weight:950;color:var(--rose);line-height:1}
    .step h3{font-size:19px;margin:22px 0 8px}.step p{font-size:13px;color:var(--muted)}
    .tag{display:inline-flex;color:var(--gold);font-size:11px;border:1px solid rgba(247,200,121,.4);padding:3px 8px;border-radius:999px;margin-top:14px}
    .poster-grid{display:grid;grid-template-columns:1.5fr .82fr .82fr;grid-template-rows:230px 170px;gap:16px}
    .poster{border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;min-height:170px;background:#3a1d35;transition:.3s}
    .poster:hover{transform:translateY(-5px);border-color:var(--rose);box-shadow:0 15px 38px rgba(198,45,104,.18)}
    .poster:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#602542,#251525 55%,#d05768);opacity:.9}
    .poster:nth-child(2):before{background:linear-gradient(145deg,#4b3158,#25172d 50%,#d77d68)}
    .poster:nth-child(3):before{background:linear-gradient(145deg,#8d4050,#271525 62%,#482b75)}
    .poster:nth-child(4):before{background:linear-gradient(145deg,#342b5b,#241425 50%,#9e315c)}
    .poster:nth-child(5):before{background:linear-gradient(145deg,#65352b,#261421 55%,#bd3867)}
    .poster:first-child{grid-row:span 2}
    .poster-content{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(transparent 28%,rgba(17,8,18,.84))}
    .poster-label{font-size:11px;color:var(--gold);font-weight:800}.poster h3{font-size:22px;margin-top:5px}.poster p{color:#e5cbd5;font-size:13px}
    .poster-line{width:38px;height:3px;background:var(--orange);margin-bottom:auto}
    .result-strip{display:grid;grid-template-columns:1.2fr 2fr;gap:45px;align-items:center}
    .result-copy p{color:var(--muted);margin-top:14px}
    .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .metric{padding:25px 18px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
    .metric strong{display:block;font-size:38px;color:var(--rose);line-height:1}.metric span{display:block;color:var(--muted);font-size:13px;margin-top:9px}
    .quote-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
    .quote{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px;position:relative}
    .quote:before{content:"“";font-size:90px;line-height:.8;color:var(--berry);position:absolute;top:23px;right:27px;opacity:.55}
    .quote p{font-size:21px;line-height:1.65;max-width:680px}.quote small{display:block;color:var(--soft);margin-top:25px}
    .quote-side{display:grid;gap:18px}.quote-mini{padding:23px;border-left:3px solid var(--orange);background:#2a1726;border-radius:0 15px 15px 0;color:#ead3dc;font-size:14px}
    .faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;color:#fff;background:none;border:0;padding:22px 4px;font-weight:800}
    .faq-q .plus{color:var(--orange);font-size:25px;transition:.25s}.faq-q[aria-expanded=true] .plus{transform:rotate(45deg)}
    .faq-a{display:none;color:var(--muted);font-size:14px;padding:0 45px 22px 4px}.faq-a.open{display:block}
    .cta-panel{padding:55px clamp(25px,6vw,80px);border:1px solid var(--line-strong);border-radius:24px;background:linear-gradient(110deg,#5b203e,#2b172e 60%,#211226);position:relative;overflow:hidden}
    .cta-panel:after{content:"18+";position:absolute;right:6%;top:15%;font-size:130px;font-weight:950;color:#fff;opacity:.045}
    .cta-panel p{color:#e3c7d2;max-width:700px;margin:14px 0 25px}
    footer{border-top:1px solid var(--line);padding:55px 0 25px;background:#170c18}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
    footer h3{font-size:18px;margin-bottom:14px}footer p,footer a{color:var(--soft);font-size:13px}footer a{display:block;margin:7px 0;transition:.2s}footer a:hover{color:var(--rose)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:var(--soft);font-size:12px}
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(11,4,12,.78);z-index:50;padding:20px}.modal.show{display:flex}
    .modal-box{max-width:460px;background:#2b1728;border:1px solid var(--line-strong);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
    .modal-box h2{font-size:28px}.modal-box p{color:var(--muted);font-size:14px;margin:15px 0 24px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
    @media(max-width:1024px){.hero-grid{gap:38px}.nav{gap:15px}.poster-grid{grid-template-columns:1.2fr 1fr;grid-template-rows:220px 190px 190px}.poster:first-child{grid-row:span 2}.poster:nth-child(4){grid-column:2}.steps{grid-template-columns:repeat(2,1fr)}.step:nth-child(2):after{display:none}}
    @media(max-width:768px){.container{width:min(100% - 30px,600px)}.topline-inner{padding:8px 0;align-items:flex-start}.nav{height:68px}.nav-links,.nav-cta{display:none}.menu-btn{display:block;margin-left:auto}.nav.mobile-open{height:auto;flex-wrap:wrap;padding:12px 0}.nav.mobile-open .nav-links{display:flex;order:4;width:100%;flex-direction:column;align-items:stretch}.nav.mobile-open .nav-links a{padding:12px}.nav.mobile-open .nav-cta{display:inline-flex;order:3;margin-left:auto}.hero{padding:65px 0 72px}.hero-grid{grid-template-columns:1fr}.hero:after{width:100vw}.matrix{transform:none}.section{padding:70px 0}.section-head{display:block}.section-intro{margin-top:14px}.pain-grid,.result-strip,.quote-wrap{grid-template-columns:1fr}.pain-grid{gap:24px}.metrics{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){h1{font-size:43px}.hero-copy{font-size:15px}.matrix{gap:9px}.matrix-card{min-height:145px;padding:17px}.matrix-card h3{font-size:17px;margin-top:15px}.problem-list,.steps{grid-template-columns:1fr}.step:after{display:none!important}.poster-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:210px 170px 170px}.poster:first-child{grid-column:span 2;grid-row:auto}.poster h3{font-size:18px}.poster p{font-size:12px}.metrics{gap:7px}.metric{padding:18px 10px}.metric strong{font-size:28px}.metric span{font-size:11px}.quote{padding:25px}.quote p{font-size:17px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.hero-actions a{width:100%}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root {
      --ink: #120d16;
      --surface: #1c111c;
      --surface-2: #251525;
      --surface-3: #30192d;
      --line: rgba(255, 135, 191, .2);
      --line-strong: rgba(255, 135, 191, .55);
      --text: #fff7fb;
      --muted: #c9b3c2;
      --soft: #967e91;
      --pink: #ee4d91;
      --coral: #ff806e;
      --gold: #ffc36b;
      --shadow: 0 22px 60px rgba(0, 0, 0, .34);
      --radius-lg: 22px;
      --radius-md: 16px;
      --container: 1220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
        var(--ink);
      background-size: 44px 44px;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
    }
    body:before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 72% 11%, rgba(177, 30, 100, .18), transparent 28%), radial-gradient(circle at 15% 48%, rgba(119, 25, 82, .12), transparent 25%);
      z-index: -1;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    :focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
    .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(18, 13, 22, .94);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(14px);
    }
    .nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 800;
      font-size: 18px;
      white-space: nowrap;
    }
    .logo-mark {
      width: 17px;
      height: 25px;
      display: inline-block;
      background: var(--pink);
      clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%);
      box-shadow: 0 0 18px rgba(238, 77, 145, .7);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }
    .nav-links a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      transition: .25s ease;
    }
    .nav-links a:hover, .nav-links a.active {
      color: var(--text);
      border-bottom-color: var(--pink);
    }
    .nav-cta, .primary-btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 11px 20px;
      color: #210d18;
      background: linear-gradient(135deg, var(--coral), var(--pink));
      border: 1px solid rgba(255, 195, 107, .5);
      border-radius: 10px;
      font-weight: 800;
      box-shadow: 0 8px 28px rgba(238, 77, 145, .22);
      transition: .25s ease;
    }
    .nav-cta:hover, .primary-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
      box-shadow: 0 12px 32px rgba(238, 77, 145, .38);
    }
    .menu-btn {
      display: none;
      min-height: 44px;
      padding: 8px 13px;
      color: var(--text);
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 9px;
    }
    .notice-strip {
      border-bottom: 1px solid rgba(255, 128, 110, .2);
      background: #2a1425;
      color: #ead6df;
      font-size: 13px;
    }
    .notice-inner {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .notice-inner span:first-child { color: #ffd9e7; }
    .notice-link { color: var(--gold); white-space: nowrap; }
    .hero {
      padding: 82px 0 72px;
      overflow: hidden;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      align-items: center;
      gap: 70px;
    }
    .eyebrow, .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--gold);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .eyebrow:before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--pink);
      box-shadow: 0 0 12px var(--pink);
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      margin: 18px 0;
      max-width: 620px;
      font-size: clamp(42px, 6vw, 76px);
      line-height: 1.08;
      letter-spacing: 0;
      font-weight: 900;
    }
    h2 {
      margin-bottom: 16px;
      font-size: clamp(28px, 4vw, 45px);
      line-height: 1.2;
      font-weight: 850;
    }
    h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.35; }
    .hero-copy {
      max-width: 570px;
      color: var(--muted);
      font-size: 17px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
    .secondary-btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 19px;
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      transition: .25s ease;
    }
    .secondary-btn:hover { background: var(--surface-2); border-color: var(--coral); transform: translateY(-2px); }
    .age-note { color: var(--soft); font-size: 13px; }
    .stage {
      position: relative;
      min-height: 470px;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #1b111b;
      box-shadow: var(--shadow);
      transform: rotate(1deg);
    }
    .stage:before {
      content: "MD / 018";
      position: absolute;
      top: 17px;
      right: 22px;
      color: rgba(255, 195, 107, .72);
      font-size: 11px;
      letter-spacing: .15em;
    }
    .stage-screen {
      min-height: 405px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 14px;
      background: linear-gradient(145deg, #5d1d4c, #281429 52%, #120d16);
      overflow: hidden;
      position: relative;
    }
    .stage-screen:after {
      content: "";
      position: absolute;
      width: 220px;
      height: 520px;
      right: 70px;
      top: -80px;
      background: linear-gradient(135deg, transparent 0 40%, rgba(255, 128, 110, .22) 41% 44%, transparent 45%);
      transform: rotate(12deg);
    }
    .stage-title { position: relative; z-index: 1; max-width: 350px; font-size: 30px; line-height: 1.2; font-weight: 850; }
    .stage-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .stage-tile {
      min-height: 88px;
      padding: 13px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(14, 9, 18, .68);
      border-radius: 10px;
    }
    .stage-tile strong { display: block; color: #fff; font-size: 14px; }
    .stage-tile small { color: #c6a7bb; font-size: 11px; }
    .section { padding: 82px 0; }
    .section-head { max-width: 720px; margin-bottom: 34px; }
    .section-head p { color: var(--muted); font-size: 16px; }
    .problem-band {
      display: grid;
      grid-template-columns: 1fr 1.7fr;
      gap: 32px;
      padding: 34px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .problem-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .problem-item, .step-item, .poster-card, .faq-item {
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: var(--radius-md);
      transition: .25s ease;
    }
    .problem-item { padding: 21px; position: relative; }
    .problem-item:hover, .step-item:hover, .poster-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 15px 35px rgba(0,0,0,.24); }
    .problem-item:before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--pink); }
    .problem-item p, .step-item p, .poster-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      position: relative;
    }
    .steps:before { content: ""; position: absolute; top: 45px; left: 9%; right: 9%; height: 1px; background: var(--line-strong); }
    .step-item { position: relative; z-index: 1; padding: 22px; min-height: 190px; }
    .step-number { display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--ink); background: var(--gold); border-radius: 50%; font-weight: 900; }
    .poster-layout { display: grid; grid-template-columns: 1.45fr .8fr .8fr; grid-template-rows: 220px 180px; gap: 16px; }
    .poster-card { min-height: 180px; padding: 22px; overflow: hidden; position: relative; background: #261527; }
    .poster-card:before { content: ""; position: absolute; inset: 0; opacity: .72; background: linear-gradient(135deg, #7c244d, transparent 47%, #1a0e21); }
    .poster-card:nth-child(2):before { background: linear-gradient(145deg, #562650, transparent 55%, #b64c59); }
    .poster-card:nth-child(3):before { background: linear-gradient(145deg, #73482b, transparent 55%, #321833); }
    .poster-card:nth-child(4):before { background: linear-gradient(145deg, #3b4e59, transparent 50%, #411735); }
    .poster-card:nth-child(5):before { background: linear-gradient(145deg, #8b365d, transparent 55%, #1f172d); }
    .poster-card > * { position: relative; z-index: 1; }
    .poster-card:first-child { grid-row: span 2; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
    .poster-card:first-child h3 { font-size: 28px; }
    .poster-card:nth-child(2) { grid-column: 2; }
    .poster-card:nth-child(3) { grid-column: 3; }
    .poster-card:nth-child(4) { grid-column: 2 / 3; }
    .poster-card:nth-child(5) { grid-column: 3; }
    .poster-card .tag { color: #ffe0a4; font-size: 11px; }
    .poster-card .card-action { display: inline-block; margin-top: 13px; color: var(--gold); font-size: 13px; font-weight: 800; }
    .result-panel {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 20px;
      padding: 26px;
      border-left: 4px solid var(--coral);
      background: var(--surface-2);
      border-radius: var(--radius-md);
    }
    .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .metric { padding: 15px; border-top: 1px solid var(--line-strong); }
    .metric strong { display: block; color: var(--gold); font-size: 29px; line-height: 1.1; }
    .metric span { color: var(--muted); font-size: 13px; }
    .quote-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 16px; }
    .quote { padding: 28px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .quote:first-child { min-height: 210px; }
    .quote-mark { color: var(--pink); font-size: 54px; line-height: .8; }
    .quote p { color: #f4dce8; font-size: 17px; }
    .quote small { color: var(--soft); }
    .faq-list { display: grid; gap: 10px; max-width: 900px; }
    .faq-item { overflow: hidden; }
    .faq-question { width: 100%; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); background: transparent; border: 0; text-align: left; font-weight: 750; }
    .faq-question span:last-child { color: var(--gold); font-size: 22px; transition: .25s ease; }
    .faq-answer { display: none; padding: 0 22px 20px; color: var(--muted); font-size: 14px; }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }
    .cta {
      padding: 46px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background: linear-gradient(112deg, #451a38, #241324 54%, #17101b);
      position: relative;
      overflow: hidden;
    }
    .cta:after { content: ""; position: absolute; width: 3px; height: 170%; right: 22%; top: -30%; background: var(--coral); transform: rotate(24deg); opacity: .58; box-shadow: 0 0 30px var(--coral); }
    .cta-content { position: relative; z-index: 1; max-width: 700px; }
    footer { padding: 62px 0 24px; border-top: 1px solid var(--line); background: #170e18; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
    footer p { color: var(--muted); font-size: 13px; }
    footer h3 { color: #fff; font-size: 14px; }
    footer .footer-grid a:not(.logo) { display: block; width: fit-content; margin: 8px 0; color: var(--muted); font-size: 13px; transition: .2s ease; }
    footer .footer-grid a:not(.logo):hover { color: var(--gold); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; }
    .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 38px; }
    .filter-chip { min-height: 42px; padding: 8px 15px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: .2s ease; }
    .filter-chip:hover, .filter-chip.selected { color: #210d18; background: var(--gold); border-color: var(--gold); }
    .empty-state { margin-top: 24px; padding: 26px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: rgba(37, 21, 37, .65); }
    .feedback-box { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .field { display: grid; gap: 7px; margin-bottom: 14px; }
    .field label { color: #f5dce8; font-size: 13px; }
    .field input, .field select, .field textarea { width: 100%; color: var(--text); background: #120d16; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
    .field textarea { min-height: 112px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); outline: 2px solid rgba(255,128,110,.22); }
    .check { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 12px; }
    @media (max-width: 1024px) {
      .hero-grid { gap: 35px; }
      .poster-layout { grid-template-columns: 1.2fr 1fr; grid-template-rows: 220px 180px 180px; }
      .poster-card:first-child { grid-row: span 2; }
      .poster-card:nth-child(3) { grid-column: 2; grid-row: 2; }
      .poster-card:nth-child(4) { grid-column: 1; grid-row: 3; }
      .poster-card:nth-child(5) { grid-column: 2; grid-row: 3; }
      .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 20px; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 28px)); }
      .nav { gap: 12px; }
      .nav-links { display: none; position: absolute; top: 78px; left: 14px; right: 14px; padding: 12px; flex-direction: column; align-items: stretch; background: #211321; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
      .nav-links.open { display: flex; }
      .nav-links a { justify-content: center; }
      .nav-cta { margin-left: auto; padding: 9px 13px; font-size: 13px; }
      .menu-btn { display: inline-flex; align-items: center; }
      .notice-inner { align-items: flex-start; padding: 9px 0; }
      .hero { padding: 55px 0 45px; }
      .hero-grid, .problem-band, .result-panel, .feedback-box { grid-template-columns: 1fr; }
      .stage { min-height: 390px; padding: 18px; transform: none; }
      .stage-screen { min-height: 350px; }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .steps:before { display: none; }
      .quote-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 42px; }
      .hero-actions > * { width: 100%; }
      .problem-list, .steps, .metric-row { grid-template-columns: 1fr; }
      .poster-layout { display: flex; flex-direction: column; }
      .poster-card, .poster-card:first-child { min-height: 190px; }
      .section { padding: 58px 0; }
      .cta { padding: 28px 20px; }
      .footer-bottom { flex-direction: column; }
      .logo { font-size: 15px; }
      .nav-cta { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
    }