/* roulang page: index */
:root{
      --bg:#120b1b;
      --bg-2:#1a1026;
      --panel:#22172f;
      --panel-2:#2b1b3a;
      --panel-3:#362048;
      --text:#fff7ff;
      --muted:#cdbbd6;
      --weak:#9d8aa9;
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(232,62,140,.42);
      --pink:#e83e8c;
      --pink-2:#ff4fa3;
      --cyan:#20e3d2;
      --amber:#ffb347;
      --green:#66f2a8;
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --shadow:0 24px 70px rgba(0,0,0,.42);
      --glow-pink:0 0 34px rgba(232,62,140,.32);
      --glow-cyan:0 0 28px rgba(32,227,210,.22);
      --container:1220px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.75;
      background:
        radial-gradient(circle at 15% 8%, rgba(232,62,140,.26), transparent 32%),
        radial-gradient(circle at 85% 16%, rgba(32,227,210,.16), transparent 28%),
        radial-gradient(circle at 50% 90%, rgba(255,179,71,.10), transparent 30%),
        linear-gradient(145deg, #120b1b 0%, #1a1026 46%, #08060d 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.28;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35));
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img,svg{display:block;max-width:100%}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(232,62,140,.45);color:#fff}
    .site-container{width:min(var(--container), calc(100% - 36px));margin-inline:auto}
    .section{padding:84px 0}
    .section-tight{padding:58px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid rgba(32,227,210,.26);
      border-radius:999px;background:rgba(32,227,210,.08);
      color:#dffefa;font-size:13px;font-weight:800;letter-spacing:.02em;
    }
    .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
    .section-title{font-size:clamp(28px,4vw,42px);line-height:1.14;font-weight:900;letter-spacing:-.04em;margin:14px 0 12px}
    .section-desc{max-width:760px;color:var(--muted);font-size:16px}
    .panel{
      background:linear-gradient(160deg, rgba(43,27,58,.92), rgba(26,16,38,.78));
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .panel::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%, rgba(232,62,140,.06));
      pointer-events:none;
    }
    .card{
      background:rgba(34,23,47,.78);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
    }
    .card:hover{
      transform:translateY(-5px);
      border-color:rgba(32,227,210,.36);
      background:rgba(48,31,63,.88);
      box-shadow:var(--glow-cyan);
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:48px;padding:0 20px;border-radius:999px;
      border:1px solid transparent;
      font-weight:900;line-height:1;white-space:nowrap;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease,background .22s ease;
    }
    .btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
      outline:none;box-shadow:0 0 0 4px rgba(32,227,210,.18),0 0 0 1px rgba(32,227,210,.75);
    }
    .btn-primary{background:linear-gradient(135deg,var(--pink),var(--amber));color:#fff;box-shadow:0 15px 36px rgba(232,62,140,.28)}
    .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 46px rgba(232,62,140,.42)}
    .btn-secondary{background:rgba(255,255,255,.06);border-color:var(--line);color:#fff}
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(32,227,210,.42);background:rgba(32,227,210,.08)}
    .tag{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.06);
      color:#eadff0;font-size:13px;font-weight:800;
    }
    .tag.hot{border-color:rgba(232,62,140,.36);background:rgba(232,62,140,.12);color:#ffd7e8}
    .tag.cyan{border-color:rgba(32,227,210,.32);background:rgba(32,227,210,.10);color:#d9fffb}
    .grad-text{
      background:linear-gradient(135deg,#fff 8%,#ff7fbd 44%,#20e3d2 92%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

    .site-header{
      position:sticky;top:14px;z-index:50;padding:12px 0;
    }
    .nav-shell{
      display:flex;align-items:center;gap:14px;justify-content:space-between;
      padding:12px;border:1px solid rgba(255,255,255,.12);
      border-radius:26px;background:rgba(26,16,38,.78);
      backdrop-filter:blur(18px);
      box-shadow:0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .brand{
      display:flex;align-items:center;gap:10px;min-width:0;
      padding:8px 10px;border-radius:18px;
    }
    .brand-mark{
      width:38px;height:38px;border-radius:16px;flex:0 0 auto;
      background:radial-gradient(circle at 30% 20%,#fff 0 9%,transparent 10%),linear-gradient(135deg,var(--pink),#7437ff 52%,var(--cyan));
      box-shadow:var(--glow-pink);
    }
    .brand-text{font-weight:950;letter-spacing:-.04em;font-size:15px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nav-links{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;min-width:0}
    .nav-link{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 13px;border-radius:16px;
      color:var(--muted);font-weight:850;font-size:14px;
      border:1px solid transparent;background:rgba(255,255,255,.035);
      transition:.22s ease;
      white-space:nowrap;
    }
    .nav-link:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13);transform:translateY(-1px)}
    .nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(232,62,140,.25),rgba(32,227,210,.13));border-color:rgba(232,62,140,.34)}
    .nav-cta{padding-inline:18px;min-height:42px;font-size:14px}

    .hero{padding:58px 0 74px}
    .hero-stage{
      min-height:610px;
      padding:clamp(22px,4vw,42px);
      display:grid;grid-template-columns:1.02fr .98fr;gap:24px;
      align-items:stretch;
    }
    .hero-copy{
      position:relative;z-index:2;
      display:flex;flex-direction:column;justify-content:space-between;gap:34px;
    }
    .hero h1{
      font-size:clamp(34px,6.4vw,66px);
      line-height:1.06;font-weight:950;letter-spacing:-.07em;
      margin:16px 0 18px;
    }
    .hero-intro{font-size:clamp(16px,2vw,18px);color:#eadcec;max-width:680px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
    .hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
    .hero-point{padding:15px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
    .hero-point strong{display:block;font-size:20px;line-height:1;color:#fff}
    .hero-point span{display:block;margin-top:8px;color:var(--weak);font-size:13px;line-height:1.45}
    .age-note{
      display:flex;gap:10px;align-items:flex-start;
      padding:14px 16px;border-radius:22px;
      border:1px solid rgba(255,179,71,.28);
      background:rgba(255,179,71,.08);
      color:#ffe9c8;font-size:14px;
    }
    .demo-board{
      position:relative;z-index:2;
      display:grid;grid-template-rows:auto 1fr auto;gap:14px;
      border-radius:28px;padding:18px;
      background:linear-gradient(145deg,rgba(18,11,27,.75),rgba(54,32,72,.76));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
    }
    .demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .demo-dots{display:flex;gap:7px}.demo-dots i{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px rgba(232,62,140,.5)}.demo-dots i:nth-child(2){background:var(--amber)}.demo-dots i:nth-child(3){background:var(--cyan)}
    .entry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .entry-card{
      min-height:118px;padding:16px;border-radius:22px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
      display:flex;flex-direction:column;justify-content:space-between;
      transition:.24s ease;
    }
    .entry-card:hover{transform:translateY(-3px);border-color:rgba(232,62,140,.44);background:rgba(232,62,140,.10)}
    .entry-icon{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(232,62,140,.35),rgba(32,227,210,.14));font-weight:950}
    .entry-card h3{font-size:17px;font-weight:900;line-height:1.3;margin-top:10px}
    .entry-card p{color:var(--weak);font-size:13px;line-height:1.55;margin-top:4px}
    .filter-row{display:flex;flex-wrap:wrap;gap:8px}
    .signal{
      display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
      padding:16px;border-radius:24px;background:rgba(32,227,210,.08);
      border:1px solid rgba(32,227,210,.22);
    }
    .signal strong{font-size:34px;line-height:1;font-weight:950;color:var(--cyan)}
    .signal p{font-size:13px;color:#d9fffb;line-height:1.55;margin:0}

    .vertical-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:center}
    .poster-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .poster{
      min-height:330px;border-radius:28px;padding:16px;
      background:
        linear-gradient(to top,rgba(0,0,0,.62),transparent 58%),
        radial-gradient(circle at 30% 20%,rgba(232,62,140,.42),transparent 35%),
        linear-gradient(160deg,#38204b,#150d20);
      border:1px solid rgba(255,255,255,.12);
      display:flex;flex-direction:column;justify-content:flex-end;
      box-shadow:0 20px 48px rgba(0,0,0,.25);
    }
    .poster:nth-child(2){transform:translateY(-22px);background:linear-gradient(to top,rgba(0,0,0,.62),transparent 58%),radial-gradient(circle at 70% 20%,rgba(32,227,210,.30),transparent 35%),linear-gradient(160deg,#4a1c54,#140b20)}
    .poster:nth-child(3){background:linear-gradient(to top,rgba(0,0,0,.62),transparent 58%),radial-gradient(circle at 50% 15%,rgba(255,179,71,.30),transparent 35%),linear-gradient(160deg,#2b1b3a,#160c1f)}
    .poster h3{font-weight:950;font-size:18px;line-height:1.28}
    .poster p{font-size:13px;color:#dacbdd;line-height:1.55;margin-top:8px}
    .feature-list{display:grid;gap:12px}
    .feature-item{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:16px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
    .feature-num{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;background:rgba(232,62,140,.16);color:#ffd5e7;font-weight:950}

    .hot-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
    .rank-list{display:grid;gap:12px}
    .rank-item{
      display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
      padding:16px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid var(--line);
      transition:.24s ease;
    }
    .rank-item:hover{transform:translateX(5px);border-color:rgba(232,62,140,.38);background:rgba(232,62,140,.085)}
    .rank-no{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),#6c38ff);font-weight:950}
    .rank-item h3{font-size:17px;font-weight:950}
    .rank-item p{font-size:13px;color:var(--weak);line-height:1.45;margin-top:3px}
    .data-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .data-card{padding:20px;border-radius:26px;background:linear-gradient(145deg,rgba(32,227,210,.09),rgba(232,62,140,.08));border:1px solid rgba(255,255,255,.11)}
    .data-card b{display:block;font-size:38px;line-height:1;font-weight:950}
    .data-card span{display:block;color:var(--muted);font-size:13px;margin-top:10px}

    .review-wall{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
    .bubble-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .bubble{padding:18px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
    .bubble p{font-size:14px;color:#eadfec;line-height:1.7}
    .bubble footer{margin-top:14px;color:var(--weak);font-size:13px}
    .timeline{padding:22px}
    .step{position:relative;padding-left:30px;padding-bottom:24px;border-left:1px solid rgba(255,255,255,.12)}
    .step:last-child{padding-bottom:0}
    .step::before{content:"";position:absolute;left:-7px;top:0;width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(32,227,210,.55)}
    .step h3{font-size:17px;font-weight:950}
    .step p{color:var(--muted);font-size:14px;line-height:1.65;margin-top:5px}

    .news-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .news-list{display:grid;gap:12px}
    .news-link{
      display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
      padding:17px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid var(--line);
      transition:.24s ease;
    }
    .news-link:hover{border-color:rgba(32,227,210,.38);background:rgba(32,227,210,.08);transform:translateY(-2px)}
    .news-link h3{font-size:17px;font-weight:950}
    .news-link p{color:var(--weak);font-size:13px;line-height:1.5;margin-top:4px}
    .news-time{color:#dffefa;font-size:13px;font-weight:900}
    .topic-box{padding:20px}
    .topic-list{display:grid;gap:10px;margin-top:14px}
    .topic-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 13px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--muted);font-size:14px;transition:.22s ease}
    .topic-list a:hover{color:#fff;border-color:rgba(232,62,140,.34);background:rgba(232,62,140,.10)}

    .plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .plan{padding:22px;border-radius:28px;background:rgba(255,255,255,.055);border:1px solid var(--line);position:relative;transition:.24s ease}
    .plan:hover{transform:translateY(-5px);border-color:rgba(32,227,210,.36);box-shadow:var(--glow-cyan)}
    .plan.recommend{background:linear-gradient(155deg,rgba(232,62,140,.20),rgba(32,227,210,.08));border-color:rgba(232,62,140,.45);box-shadow:var(--glow-pink)}
    .plan h3{font-size:22px;font-weight:950;margin:14px 0 8px}
    .plan p{color:var(--muted);font-size:14px;line-height:1.65}
    .plan ul{display:grid;gap:9px;margin:18px 0;color:#eadfec;font-size:14px}
    .plan li{display:flex;gap:9px}.plan li::before{content:"✓";color:var(--cyan);font-weight:950}
    .price-note{display:block;color:var(--amber);font-size:13px;font-weight:900;margin-top:10px}

    .faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px;align-items:start}
    .faq-list{display:grid;gap:12px}
    details{border-radius:22px;background:rgba(255,255,255,.055);border:1px solid var(--line);overflow:hidden;transition:.22s ease}
    details[open]{border-color:rgba(32,227,210,.34);background:rgba(32,227,210,.075)}
    summary{list-style:none;cursor:pointer;padding:17px 18px;font-weight:950;display:flex;align-items:center;justify-content:space-between;gap:14px}
    summary::-webkit-details-marker{display:none}
    summary::after{content:"+";width:28px;height:28px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--cyan);font-weight:950;flex:0 0 auto}
    details[open] summary::after{content:"−";background:rgba(32,227,210,.16)}
    details p{padding:0 18px 18px;color:var(--muted);font-size:14px;line-height:1.75}

    .contact-panel{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px;padding:24px}
    .contact-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative;z-index:2}
    .field{display:grid;gap:7px}
    .field.full{grid-column:1/-1}
    .field label{font-size:13px;color:#eadfec;font-weight:850}
    input,textarea,select{
      width:100%;border:1px solid var(--line);border-radius:17px;
      background:rgba(12,8,18,.62);color:#fff;
      padding:13px 14px;transition:.22s ease;
    }
    textarea{min-height:118px;resize:vertical}
    input::placeholder,textarea::placeholder{color:#7f6f8d}
    .form-note{color:var(--weak);font-size:13px;line-height:1.6}

    .site-footer{padding:30px 0 40px}
    .footer-shell{
      border-radius:30px;border:1px solid var(--line);
      background:linear-gradient(145deg,rgba(26,16,38,.92),rgba(12,8,18,.88));
      overflow:hidden;box-shadow:var(--shadow);
    }
    .footer-line{height:2px;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--amber))}
    .footer-content{padding:26px;display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:22px}
    .footer-title{font-weight:950;font-size:18px;margin-bottom:10px}
    .footer-text,.footer-links a,.copyright{color:var(--weak);font-size:14px;line-height:1.7}
    .footer-links{display:grid;gap:9px}
    .footer-links a:hover{color:#fff}
    .copyright{border-top:1px solid var(--line);padding:16px 26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

    @media (max-width:1024px){
      .nav-shell{align-items:flex-start;flex-wrap:wrap}
      .nav-links{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
      .hero-stage,.vertical-wrap,.hot-layout,.review-wall,.news-layout,.faq-grid,.contact-panel{grid-template-columns:1fr}
      .hero-points,.plan-grid{grid-template-columns:repeat(2,1fr)}
      .poster-rail{max-width:720px}
      .footer-content{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .section{padding:62px 0}.hero{padding:32px 0 54px}
      .site-container{width:min(100% - 24px,var(--container))}
      .hero-stage{min-height:auto;border-radius:24px}
      .hero-points,.entry-grid,.data-wall,.bubble-grid,.plan-grid,.contact-form{grid-template-columns:1fr}
      .poster-rail{display:flex;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
      .poster{min-width:230px;scroll-snap-align:start}.poster:nth-child(2){transform:none}
      .rank-item,.news-link{grid-template-columns:auto 1fr}
      .rank-item .tag,.news-time{grid-column:2}
      .footer-content{grid-template-columns:1fr}
      .brand-text{max-width:180px}
    }
    @media (max-width:520px){
      .nav-shell{border-radius:22px;padding:10px}
      .brand{padding-left:4px}.brand-mark{width:34px;height:34px;border-radius:14px}
      .nav-cta{width:100%}
      .hero-actions .btn{width:100%}
      .hero-stage{padding:18px}
      .section-title{letter-spacing:-.05em}
      .contact-panel{padding:16px}
      .copyright{display:block}
    }

/* roulang page: category1 */
:root {
      --bg: #120b1b;
      --bg-2: #1a1026;
      --panel: rgba(34, 23, 47, .78);
      --panel-strong: #2b1b3a;
      --panel-soft: rgba(255, 255, 255, .055);
      --text: #fff7fb;
      --muted: rgba(255, 247, 251, .72);
      --faint: rgba(255, 247, 251, .52);
      --line: rgba(255, 255, 255, .1);
      --line-strong: rgba(255, 255, 255, .18);
      --magenta: #e83e8c;
      --cyan: #20e3d2;
      --amber: #ffb347;
      --purple: #3b164f;
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --shadow: 0 24px 70px rgba(0, 0, 0, .38);
      --glow-pink: 0 0 34px rgba(232, 62, 140, .24);
      --glow-cyan: 0 0 34px rgba(32, 227, 210, .18);
      --container: 1220px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(232, 62, 140, .24), transparent 34%),
        radial-gradient(circle at 86% 20%, rgba(32, 227, 210, .15), transparent 30%),
        radial-gradient(circle at 50% 92%, rgba(255, 179, 71, .11), transparent 28%),
        linear-gradient(135deg, #100917 0%, #1a1026 42%, #140b1d 100%);
      min-height: 100vh;
      line-height: 1.75;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
      opacity: .55;
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    img,
    svg {
      max-width: 100%;
      display: block;
    }

    ::selection {
      background: rgba(232, 62, 140, .42);
      color: #fff;
    }

    .site-container {
      width: min(var(--container), calc(100% - 36px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 16px;
      z-index: 50;
      padding: 16px 0 8px;
    }

    .nav-shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(26, 16, 38, .82);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(18px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 8px 10px;
      border-radius: 18px;
      transition: transform .22s ease, background .22s ease;
    }

    .brand:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.055);
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      border-radius: 14px;
      background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), transparent 16%),
        linear-gradient(135deg, var(--magenta), var(--amber) 55%, var(--cyan));
      box-shadow: 0 0 26px rgba(232, 62, 140, .38);
    }

    .brand-text {
      font-weight: 900;
      letter-spacing: -.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 360px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      border-radius: 16px;
      border: 1px solid transparent;
      background: rgba(255,255,255,.045);
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: #fff;
      transform: translateY(-2px);
      border-color: rgba(32, 227, 210, .34);
      background: rgba(32, 227, 210, .075);
      box-shadow: var(--glow-cyan);
      outline: none;
    }

    .nav-link.active {
      color: #fff;
      border-color: rgba(232, 62, 140, .5);
      background: linear-gradient(135deg, rgba(232, 62, 140, .25), rgba(32, 227, 210, .1));
      box-shadow: var(--glow-pink);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 12px 18px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      transition: transform .22s ease, filter .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--magenta), #f06b75 48%, var(--amber));
      box-shadow: 0 14px 34px rgba(232, 62, 140, .24);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      transform: translateY(-3px);
      filter: brightness(1.08);
      box-shadow: 0 18px 46px rgba(232, 62, 140, .34);
      outline: none;
    }

    .btn-secondary {
      color: #fff;
      border-color: var(--line-strong);
      background: rgba(255,255,255,.06);
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(32, 227, 210, .45);
      background: rgba(32, 227, 210, .08);
      box-shadow: var(--glow-cyan);
      outline: none;
    }

    .btn:active,
    .nav-link:active,
    .card:active {
      transform: translateY(0) scale(.99);
    }

    .section {
      padding: 80px 0;
    }

    .hero {
      padding: 72px 0 48px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding: 8px 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.82);
      font-size: 13px;
      font-weight: 800;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 16px rgba(32, 227, 210, .9);
    }

    .hero-title {
      max-width: 920px;
      font-size: clamp(34px, 6vw, 66px);
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: -.055em;
      margin: 0;
    }

    .gradient-text {
      background: linear-gradient(135deg, #fff, #ffd7eb 36%, var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-desc,
    .section-desc {
      color: var(--muted);
      font-size: 16px;
      max-width: 780px;
      margin-top: 18px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(360px, .72fr);
      gap: 24px;
      align-items: stretch;
      margin-top: 34px;
    }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        var(--panel);
      box-shadow: var(--shadow);
      transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-5px);
      border-color: rgba(232, 62, 140, .38);
      box-shadow: var(--shadow), var(--glow-pink);
    }

    .apply-card {
      padding: 26px;
      position: relative;
    }

    .apply-card::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(232,62,140,.22), transparent 62%);
      pointer-events: none;
    }

    .rights-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 22px 0;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.84);
      font-size: 13px;
      font-weight: 800;
    }

    .badge.hot {
      border-color: rgba(232, 62, 140, .45);
      background: rgba(232, 62, 140, .13);
    }

    .badge.cyan {
      border-color: rgba(32, 227, 210, .38);
      background: rgba(32, 227, 210, .09);
    }

    .notice {
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,179,71,.22);
      background: rgba(255,179,71,.08);
      color: rgba(255, 245, 225, .86);
      font-size: 14px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    .console-card {
      padding: 18px;
      min-height: 100%;
      background:
        radial-gradient(circle at 20% 0%, rgba(32,227,210,.14), transparent 34%),
        radial-gradient(circle at 100% 20%, rgba(232,62,140,.18), transparent 38%),
        rgba(43, 27, 58, .72);
    }

    .console-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .console-title {
      font-size: 15px;
      font-weight: 900;
    }

    .status-dot {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--cyan);
      font-size: 12px;
      font-weight: 800;
    }

    .status-dot::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: currentColor;
      box-shadow: 0 0 14px currentColor;
    }

    .entry-matrix {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .entry {
      min-height: 96px;
      padding: 14px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.055);
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .entry:hover {
      transform: translateY(-3px);
      border-color: rgba(32, 227, 210, .36);
      background: rgba(32, 227, 210, .075);
    }

    .entry span {
      display: block;
      font-size: 22px;
      margin-bottom: 8px;
    }

    .entry strong {
      display: block;
      font-size: 14px;
      line-height: 1.35;
    }

    .entry small {
      display: block;
      margin-top: 5px;
      color: var(--faint);
      line-height: 1.45;
    }

    .filter-panel {
      margin-top: 16px;
      padding: 14px;
      border-radius: 20px;
      background: rgba(0,0,0,.16);
      border: 1px solid rgba(255,255,255,.08);
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 10px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.75);
      font-size: 13px;
      font-weight: 800;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }

    .chip:hover,
    .chip.active {
      color: #fff;
      transform: translateY(-2px);
      border-color: rgba(232, 62, 140, .45);
      background: linear-gradient(135deg, rgba(232,62,140,.2), rgba(32,227,210,.09));
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(260px, .36fr);
      gap: 24px;
      align-items: end;
      margin-bottom: 28px;
    }

    .section-title {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.14;
      font-weight: 950;
      letter-spacing: -.04em;
    }

    .section-kicker {
      color: var(--cyan);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .06em;
      margin-bottom: 8px;
    }

    .mini-panel {
      padding: 16px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.052);
      color: var(--muted);
      font-size: 14px;
    }

    .filter-strip {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 14px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      scrollbar-width: none;
    }

    .filter-strip::-webkit-scrollbar {
      display: none;
    }

    .filter-btn {
      flex: 0 0 auto;
      padding: 12px 15px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(26,16,38,.78);
      color: rgba(255,255,255,.78);
      font-weight: 900;
      font-size: 14px;
      transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
    }

    .filter-btn:hover,
    .filter-btn.active {
      transform: translateY(-2px);
      color: #fff;
      border-color: rgba(32, 227, 210, .42);
      background: linear-gradient(135deg, rgba(232,62,140,.2), rgba(32,227,210,.11));
    }

    .bento {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 16px;
    }

    .bento .wide {
      grid-row: span 2;
      padding: 28px;
      min-height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .feature-card {
      padding: 22px;
      min-height: 172px;
    }

    .icon-pill {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(232,62,140,.22), rgba(32,227,210,.12));
      border: 1px solid rgba(255,255,255,.1);
      margin-bottom: 14px;
      box-shadow: var(--glow-pink);
    }

    .card h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.35;
      font-weight: 900;
    }

    .card p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
    }

    .data-band {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      padding: 18px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 8% 40%, rgba(232,62,140,.16), transparent 28%),
        radial-gradient(circle at 88% 35%, rgba(32,227,210,.13), transparent 24%),
        rgba(43,27,58,.68);
      box-shadow: var(--shadow);
    }

    .data-item {
      padding: 20px;
      border-radius: 24px;
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.08);
    }

    .data-num {
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.04em;
      background: linear-gradient(135deg, #fff, var(--amber), var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .data-label {
      display: block;
      margin-top: 10px;
      color: rgba(255,255,255,.82);
      font-weight: 900;
    }

    .data-item p {
      margin: 6px 0 0;
      color: var(--faint);
      font-size: 13px;
      line-height: 1.6;
    }

    .scenario-grid {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 18px;
      align-items: start;
    }

    .timeline {
      padding: 22px;
    }

    .step {
      position: relative;
      padding-left: 34px;
      padding-bottom: 22px;
      border-left: 1px solid rgba(255,255,255,.12);
      margin-left: 10px;
    }

    .step:last-child {
      padding-bottom: 0;
    }

    .step::before {
      content: attr(data-step);
      position: absolute;
      left: -14px;
      top: 0;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--magenta), var(--cyan));
      color: #fff;
      font-size: 12px;
      font-weight: 950;
      box-shadow: var(--glow-pink);
    }

    .step strong {
      display: block;
      font-weight: 900;
    }

    .step span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 14px;
    }

    .scenario-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .scene-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      padding: 22px;
    }

    .scene-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .progress {
      width: 116px;
      min-height: 100%;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.14);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 12px;
    }

    .progress strong {
      color: var(--cyan);
      font-size: 26px;
      line-height: 1;
      font-weight: 950;
    }

    .progress small {
      color: var(--faint);
      font-size: 12px;
      line-height: 1.35;
      display: block;
      margin-top: 6px;
    }

    .plans {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .plan {
      padding: 24px;
      position: relative;
    }

    .plan.recommended {
      border-color: rgba(232,62,140,.48);
      background:
        linear-gradient(145deg, rgba(232,62,140,.16), rgba(32,227,210,.06)),
        rgba(43,27,58,.78);
    }

    .recommend-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      color: #fff;
      background: linear-gradient(135deg, var(--magenta), var(--amber));
      border: 0;
    }

    .plan ul {
      list-style: none;
      padding: 0;
      margin: 18px 0 22px;
      display: grid;
      gap: 11px;
    }

    .plan li {
      position: relative;
      padding-left: 22px;
      color: var(--muted);
      font-size: 14px;
    }

    .plan li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .68em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 12px rgba(32,227,210,.65);
    }

    .faq-wrap {
      display: grid;
      grid-template-columns: .42fr .58fr;
      gap: 18px;
      align-items: start;
    }

    details {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255,255,255,.045);
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease;
    }

    details + details {
      margin-top: 12px;
    }

    details[open] {
      border-color: rgba(32,227,210,.35);
      background: rgba(32,227,210,.065);
      box-shadow: var(--glow-cyan);
    }

    summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      cursor: pointer;
      font-weight: 900;
      line-height: 1.45;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255,255,255,.07);
      color: var(--cyan);
      font-weight: 950;
      transition: transform .2s ease;
    }

    details[open] summary::after {
      content: "−";
      transform: rotate(180deg);
    }

    .faq-answer {
      padding: 0 20px 18px;
      color: var(--muted);
      font-size: 15px;
    }

    .contact-panel {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 18px;
      padding: 18px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 0% 0%, rgba(232,62,140,.2), transparent 30%),
        radial-gradient(circle at 100% 35%, rgba(32,227,210,.15), transparent 24%),
        rgba(43,27,58,.72);
      box-shadow: var(--shadow);
    }

    .contact-copy {
      padding: 18px;
    }

    .contact-form {
      padding: 20px;
      border-radius: 26px;
      background: rgba(0,0,0,.16);
      border: 1px solid rgba(255,255,255,.09);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label {
      color: rgba(255,255,255,.8);
      font-size: 13px;
      font-weight: 900;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.06);
      color: #fff;
      padding: 13px 14px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    select option {
      color: #1a1026;
    }

    textarea {
      min-height: 118px;
      resize: vertical;
    }

    input::placeholder,
    textarea::placeholder {
      color: rgba(255,255,255,.38);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(32,227,210,.55);
      box-shadow: 0 0 0 4px rgba(32,227,210,.12);
      background: rgba(255,255,255,.08);
    }

    .site-footer {
      margin-top: 48px;
      padding: 0 0 28px;
    }

    .footer-shell {
      border-radius: 28px;
      border: 1px solid var(--line);
      background: rgba(18, 11, 27, .86);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
      overflow: hidden;
    }

    .footer-line {
      height: 2px;
      background: linear-gradient(90deg, var(--magenta), var(--amber), var(--cyan));
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 22px;
      padding: 28px;
    }

    .footer-title {
      font-weight: 950;
      font-size: 18px;
      margin-bottom: 8px;
    }

    .footer-text,
    .footer-link,
    .footer-bottom {
      color: var(--muted);
      font-size: 14px;
    }

    .footer-links {
      display: grid;
      gap: 9px;
    }

    .footer-link {
      transition: color .2s ease, transform .2s ease;
    }

    .footer-link:hover {
      color: #fff;
      transform: translateX(3px);
    }

    .footer-bottom {
      padding: 16px 28px;
      border-top: 1px solid rgba(255,255,255,.08);
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    @media (max-width: 1024px) {
      .brand-text {
        max-width: 260px;
      }

      .hero-grid,
      .section-head,
      .scenario-grid,
      .faq-wrap,
      .contact-panel {
        grid-template-columns: 1fr;
      }

      .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .bento .wide {
        grid-column: 1 / -1;
        min-height: 280px;
      }

      .data-band,
      .plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-main {
        grid-template-columns: 1fr 1fr;
      }

      .footer-main > div:first-child {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {
      .site-container {
        width: min(100% - 24px, var(--container));
      }

      .site-header {
        top: 8px;
        padding-top: 8px;
      }

      .nav-shell {
        align-items: stretch;
        flex-wrap: wrap;
        border-radius: 22px;
      }

      .brand {
        flex: 1 1 calc(100% - 150px);
      }

      .brand-text {
        max-width: 100%;
        font-size: 14px;
      }

      .nav-cta {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 10px 13px;
        font-size: 13px;
      }

      .nav-links {
        order: 3;
        flex: 1 0 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-link {
        padding: 9px 12px;
      }

      .hero {
        padding-top: 46px;
      }

      .section {
        padding: 56px 0;
      }

      .entry-matrix,
      .bento,
      .data-band,
      .plans,
      .form-grid,
      .footer-main {
        grid-template-columns: 1fr;
      }

      .footer-main > div:first-child {
        grid-column: auto;
      }

      .scene-card {
        grid-template-columns: 1fr;
      }

      .progress {
        width: 100%;
        min-height: 82px;
      }
    }

    @media (max-width: 520px) {
      .hero-title {
        font-size: 34px;
      }

      .apply-card,
      .console-card,
      .contact-form,
      .contact-copy {
        padding: 18px;
      }

      .rights-row,
      .hero-actions {
        flex-direction: column;
      }

      .btn {
        width: 100%;
      }

      .section-title {
        font-size: 28px;
      }

      .data-item,
      .feature-card,
      .plan {
        padding: 18px;
      }

      .footer-bottom {
        display: block;
      }

      .footer-bottom span {
        display: block;
        margin-top: 6px;
      }
    }