/* roulang page: index */
:root{
      --bg:#080d1b;
      --bg-deep:#050814;
      --panel:#11192d;
      --panel-soft:#151f36;
      --panel-light:#1b2743;
      --text:#f5f7ff;
      --muted:#aeb9d1;
      --dim:#74819e;
      --line:rgba(173,190,231,.15);
      --primary:#7c5cff;
      --primary-light:#a998ff;
      --cyan:#35d8ff;
      --pink:#ff5fa8;
      --lime:#b8f66b;
      --warning:#ffd166;
      --shadow:0 24px 60px rgba(0,0,0,.32);
      --shadow-soft:0 12px 34px rgba(3,7,20,.28);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --sidebar:288px;
      --transition:all .28s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-width:320px;
      color:var(--text);
      background:
        radial-gradient(circle at 84% 8%,rgba(124,92,255,.18),transparent 25rem),
        radial-gradient(circle at 28% 76%,rgba(53,216,255,.08),transparent 28rem),
        var(--bg);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      font-size:16px;
      line-height:1.72;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{border:0}
    ::selection{background:rgba(169,152,255,.48);color:#fff}
    :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
    .site-shell{min-height:100vh}
    .sidebar{
      position:fixed;
      top:0;
      left:0;
      z-index:1030;
      width:var(--sidebar);
      height:100vh;
      display:flex;
      flex-direction:column;
      padding:28px 20px 22px;
      background:rgba(8,13,27,.92);
      border-right:1px solid var(--line);
      backdrop-filter:blur(18px);
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 8px 26px;
      border-bottom:1px solid var(--line);
    }
    .brand-mark{
      position:relative;
      width:42px;
      height:42px;
      flex:0 0 42px;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:18px;
      font-weight:900;
      letter-spacing:-1px;
      background:linear-gradient(135deg,var(--primary),var(--pink));
      border-radius:14px;
      box-shadow:0 10px 28px rgba(124,92,255,.38);
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      width:10px;
      height:10px;
      right:-3px;
      top:-3px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 16px var(--cyan);
    }
    .brand-title{
      display:block;
      max-width:174px;
      color:#fff;
      font-size:14px;
      line-height:1.36;
      font-weight:800;
      letter-spacing:.02em;
    }
    .brand-sub{
      display:block;
      margin-top:2px;
      color:var(--dim);
      font-size:11px;
      line-height:1.4;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .side-label{
      margin:28px 8px 10px;
      color:var(--dim);
      font-size:11px;
      font-weight:700;
      letter-spacing:.15em;
    }
    .side-nav{display:flex;flex-direction:column;gap:8px}
    .side-nav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:13px 14px;
      color:var(--muted);
      font-size:15px;
      font-weight:700;
      border:1px solid transparent;
      border-radius:13px;
    }
    .side-nav a:hover{
      color:#fff;
      background:rgba(169,152,255,.09);
      border-color:rgba(169,152,255,.18);
      transform:translateX(3px);
    }
    .side-nav a.active{
      color:#fff;
      background:linear-gradient(90deg,rgba(124,92,255,.25),rgba(124,92,255,.06));
      border-color:rgba(169,152,255,.26);
      box-shadow:inset 3px 0 0 var(--primary-light);
    }
    .nav-home-icon{
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:8px;
      color:var(--cyan);
      background:rgba(53,216,255,.1);
      font-size:14px;
    }
    .nav-arrow{color:var(--primary-light);font-size:18px;line-height:1}
    .side-bottom{
      margin-top:auto;
      padding:18px 14px;
      overflow:hidden;
      background:linear-gradient(145deg,rgba(53,216,255,.09),rgba(124,92,255,.15));
      border:1px solid rgba(169,152,255,.16);
      border-radius:18px;
    }
    .side-bottom .pulse{
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:var(--lime);
      font-size:12px;
      font-weight:800;
    }
    .pulse i{
      width:7px;
      height:7px;
      display:inline-block;
      border-radius:50%;
      background:var(--lime);
      box-shadow:0 0 0 5px rgba(184,246,107,.1),0 0 14px rgba(184,246,107,.7);
    }
    .side-bottom p{
      margin:9px 0 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.65;
    }
    .main-area{margin-left:var(--sidebar)}
    .mobile-header{display:none}
    .container-custom{width:min(1180px,calc(100% - 56px));margin:0 auto}
    .hero{
      position:relative;
      min-height:680px;
      display:flex;
      align-items:center;
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
    .hero::before{
      content:"";
      position:absolute;
      width:500px;
      height:500px;
      right:-180px;
      top:50%;
      border:1px solid rgba(53,216,255,.17);
      border-radius:50%;
      box-shadow:0 0 0 40px rgba(53,216,255,.025),0 0 0 90px rgba(124,92,255,.025);
      transform:translateY(-50%);
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      align-items:center;
      gap:64px;
      width:100%;
      padding:74px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      color:var(--cyan);
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      border:1px solid rgba(53,216,255,.22);
      border-radius:999px;
      background:rgba(53,216,255,.08);
    }
    .eyebrow span{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}
    .hero h1{
      max-width:760px;
      margin:20px 0 20px;
      color:#fff;
      font-size:clamp(35px,4.25vw,64px);
      font-weight:900;
      line-height:1.15;
      letter-spacing:-.055em;
    }
    .hero h1 em{
      font-style:normal;
      color:var(--primary-light);
      text-shadow:0 0 38px rgba(169,152,255,.32);
    }
    .hero-copy{
      max-width:630px;
      margin:0;
      color:var(--muted);
      font-size:17px;
      line-height:1.9;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
    .btn-neon,.btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:50px;
      padding:0 21px;
      border-radius:13px;
      font-size:15px;
      font-weight:800;
      cursor:pointer;
    }
    .btn-neon{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),#6d75ff);
      box-shadow:0 12px 28px rgba(91,83,230,.34);
    }
    .btn-neon:hover{color:#fff;transform:translateY(-3px);box-shadow:0 18px 36px rgba(91,83,230,.48)}
    .btn-neon:active{transform:translateY(-1px)}
    .btn-ghost{
      color:var(--text);
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
    }
    .btn-ghost:hover{color:var(--cyan);border-color:rgba(53,216,255,.42);background:rgba(53,216,255,.07)}
    .hero-note{display:flex;flex-wrap:wrap;gap:18px;margin-top:27px;color:var(--dim);font-size:12px}
    .hero-note span{display:inline-flex;align-items:center;gap:7px}
    .hero-note b{color:var(--lime);font-weight:800}
    .hero-visual{position:relative;min-height:410px}
    .hero-orbit{
      position:absolute;
      inset:18px;
      border:1px dashed rgba(169,152,255,.23);
      border-radius:50%;
      animation:spin 26s linear infinite;
    }
    .orbit-dot{
      position:absolute;
      top:8%;
      left:18%;
      width:11px;
      height:11px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 16px var(--pink);
    }
    .feature-board{
      position:absolute;
      z-index:2;
      top:58px;
      right:8px;
      width:min(100%,395px);
      padding:23px;
      overflow:hidden;
      background:linear-gradient(145deg,rgba(30,42,73,.96),rgba(14,21,39,.94));
      border:1px solid rgba(169,152,255,.28);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      transform:rotate(2deg);
    }
    .feature-board::before{
      content:"";
      position:absolute;
      width:170px;
      height:170px;
      top:-96px;
      right:-70px;
      border-radius:50%;
      background:rgba(124,92,255,.23);
      filter:blur(12px);
    }
    .board-top{position:relative;display:flex;align-items:center;justify-content:space-between}
    .board-title{font-size:14px;font-weight:800}
    .live-badge{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:4px 8px;
      color:#ffb3d1;
      font-size:10px;
      font-weight:900;
      letter-spacing:.09em;
      border-radius:999px;
      background:rgba(255,95,168,.14);
    }
    .live-badge i{width:6px;height:6px;background:var(--pink);border-radius:50%}
    .board-main{
      position:relative;
      min-height:167px;
      display:flex;
      flex-direction:column;
      justify-content:end;
      margin-top:18px;
      padding:19px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background:
        linear-gradient(135deg,rgba(124,92,255,.65),rgba(22,29,62,.5)),
        radial-gradient(circle at 80% 20%,rgba(53,216,255,.8),transparent 23%),
        #20204b;
    }
    .board-main::after{
      content:"漫";
      position:absolute;
      top:-54px;
      right:7px;
      color:rgba(255,255,255,.13);
      font-size:185px;
      font-weight:900;
      line-height:1;
    }
    .board-main small{position:relative;color:#d6d3ff;font-size:11px;font-weight:700;letter-spacing:.08em}
    .board-main strong{position:relative;margin-top:5px;font-size:24px;line-height:1.25;letter-spacing:-.04em}
    .board-list{display:grid;gap:10px;margin-top:15px}
    .board-line{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
    .board-line i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(53,216,255,.7)}
    .board-line:nth-child(2) i{background:var(--pink);box-shadow:0 0 10px rgba(255,95,168,.7)}
    .board-line:nth-child(3) i{background:var(--lime);box-shadow:0 0 10px rgba(184,246,107,.7)}
    .float-card{
      position:absolute;
      z-index:3;
      left:0;
      bottom:18px;
      display:flex;
      align-items:center;
      gap:12px;
      width:230px;
      padding:13px;
      background:rgba(17,25,45,.92);
      border:1px solid rgba(53,216,255,.24);
      border-radius:16px;
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(12px);
      transform:rotate(-4deg);
    }
    .float-icon{width:36px;height:36px;display:grid;place-items:center;color:var(--cyan);font-size:17px;border-radius:12px;background:rgba(53,216,255,.12)}
    .float-card b{display:block;font-size:12px}
    .float-card small{display:block;margin-top:2px;color:var(--dim);font-size:10px}
    .section{padding:100px 0}
    .section-heading{max-width:700px;margin-bottom:42px}
    .section-kicker{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--primary-light);font-size:12px;font-weight:900;letter-spacing:.12em}
    .section-kicker::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--primary),var(--cyan))}
    .section-title{margin:0;color:#fff;font-size:clamp(27px,3.2vw,43px);font-weight:900;line-height:1.25;letter-spacing:-.045em}
    .section-desc{margin:15px 0 0;color:var(--muted);font-size:16px;line-height:1.9}
    .signal-strip{
      position:relative;
      overflow:hidden;
      padding:26px 0;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.018);
    }
    .signal-strip::before,.signal-strip::after{
      content:"";
      position:absolute;
      top:50%;
      width:200px;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    }
    .signal-strip::before{left:-70px}
    .signal-strip::after{right:-70px}
    .signal-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .signal-item{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;font-weight:700}
    .signal-item b{color:#fff;font-size:19px;letter-spacing:-.04em}
    .signal-item i{width:8px;height:8px;border-radius:50%;background:var(--primary-light);box-shadow:0 0 14px var(--primary-light)}
    .genre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .genre-card{
      position:relative;
      min-height:230px;
      padding:25px;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:var(--panel);
      box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
      transition:var(--transition);
    }
    .genre-card:hover{transform:translateY(-7px);border-color:rgba(169,152,255,.4);box-shadow:var(--shadow-soft)}
    .genre-card::after{
      position:absolute;
      right:-5px;
      bottom:-51px;
      color:rgba(255,255,255,.045);
      font-size:135px;
      font-weight:900;
      line-height:1;
    }
    .genre-card:nth-child(1){background:linear-gradient(145deg,rgba(124,92,255,.18),var(--panel))}
    .genre-card:nth-child(1)::after{content:"热"}
    .genre-card:nth-child(2){background:linear-gradient(145deg,rgba(53,216,255,.14),var(--panel))}
    .genre-card:nth-child(2)::after{content:"幻"}
    .genre-card:nth-child(3){background:linear-gradient(145deg,rgba(255,95,168,.13),var(--panel))}
    .genre-card:nth-child(3)::after{content:"恋"}
    .genre-card:nth-child(4){background:linear-gradient(145deg,rgba(184,246,107,.1),var(--panel))}
    .genre-card:nth-child(4)::after{content:"少"}
    .genre-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:32px;border-radius:15px;color:#fff;font-size:21px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1)}
    .genre-card h3{position:relative;margin:0;color:#fff;font-size:20px;font-weight:900}
    .genre-card p{position:relative;margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.75}
    .card-link{position:relative;display:inline-flex;align-items:center;gap:7px;margin-top:17px;color:var(--primary-light);font-size:13px;font-weight:800}
    .card-link span{font-size:18px;transition:var(--transition)}
    .genre-card:hover .card-link span{transform:translateX(4px)}
    .editorial-wrap{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:24px;
      align-items:stretch;
    }
    .featured-story{
      position:relative;
      min-height:440px;
      padding:38px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-content:end;
      border:1px solid rgba(169,152,255,.26);
      border-radius:var(--radius-xl);
      background:
        linear-gradient(0deg,rgba(7,11,25,.98) 0%,rgba(7,11,25,.4) 67%,rgba(7,11,25,.18) 100%),
        radial-gradient(circle at 74% 24%,rgba(53,216,255,.72),transparent 16%),
        radial-gradient(circle at 45% 31%,rgba(255,95,168,.6),transparent 22%),
        linear-gradient(140deg,#3d256d,#172648 58%,#131b34);
      box-shadow:var(--shadow);
    }
    .featured-story::before{
      content:"YY";
      position:absolute;
      right:30px;
      top:6px;
      color:rgba(255,255,255,.08);
      font-size:160px;
      line-height:1;
      font-weight:900;
      letter-spacing:-.13em;
    }
    .story-tag{position:relative;display:inline-flex;align-self:flex-start;padding:6px 10px;color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;border-radius:999px;background:rgba(255,95,168,.78)}
    .featured-story h3{position:relative;max-width:560px;margin:18px 0 10px;color:#fff;font-size:clamp(25px,3vw,37px);font-weight:900;line-height:1.28;letter-spacing:-.05em}
    .featured-story p{position:relative;max-width:530px;margin:0;color:#d4daec;font-size:14px;line-height:1.85}
    .story-meta{position:relative;display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;color:#aeb9d1;font-size:12px}
    .story-meta b{color:var(--lime)}
    .story-side{display:grid;gap:14px}
    .story-item{
      display:grid;
      grid-template-columns:86px 1fr;
      gap:16px;
      align-items:center;
      padding:15px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(17,25,45,.62);
      transition:var(--transition);
    }
    .story-item:hover{background:var(--panel-soft);border-color:rgba(53,216,255,.3);transform:translateX(4px)}
    .story-thumb{position:relative;width:86px;height:86px;overflow:hidden;border-radius:13px;background:#293457}
    .story-thumb::after{position:absolute;right:6px;bottom:-17px;color:rgba(255,255,255,.22);font-size:72px;font-weight:900}
    .story-thumb.one{background:linear-gradient(135deg,#ff679d,#573b9a)}
    .story-thumb.one::after{content:"星"}
    .story-thumb.two{background:linear-gradient(135deg,#36cfe6,#2654a9)}
    .story-thumb.two::after{content:"界"}
    .story-thumb.three{background:linear-gradient(135deg,#b4e961,#2f895b)}
    .story-thumb.three::after{content:"旅"}
    .story-item small{display:block;color:var(--primary-light);font-size:11px;font-weight:800}
    .story-item h4{margin:4px 0;color:#fff;font-size:16px;font-weight:900}
    .story-item p{margin:0;color:var(--dim);font-size:12px;line-height:1.55}
    .reading-section{background:linear-gradient(180deg,transparent,rgba(124,92,255,.055),transparent)}
    .reading-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;align-items:center}
    .reading-panel{
      padding:29px;
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      background:linear-gradient(150deg,rgba(27,39,67,.85),rgba(13,20,38,.84));
      box-shadow:var(--shadow-soft);
    }
    .panel-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line)}
    .panel-top b{font-size:15px}
    .secure{display:inline-flex;align-items:center;gap:6px;color:var(--lime);font-size:11px;font-weight:800}
    .secure::before{content:"✓";display:grid;place-items:center;width:17px;height:17px;color:#15210a;background:var(--lime);border-radius:50%;font-weight:900}
    .reading-lines{display:grid;gap:15px;margin-top:22px}
    .reading-line{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center}
    .reading-num{display:grid;place-items:center;width:31px;height:31px;color:var(--primary-light);font-size:12px;font-weight:900;border:1px solid rgba(169,152,255,.25);border-radius:10px;background:rgba(124,92,255,.11)}
    .reading-line b{color:#e8ecf8;font-size:13px}
    .reading-line small{color:var(--dim);font-size:11px}
    .bar{height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
    .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--cyan))}
    .reading-copy .section-heading{margin-bottom:25px}
    .check-list{display:grid;gap:14px;margin-top:25px}
    .check-item{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed rgba(174,185,209,.16)}
    .check-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;margin-top:1px;color:#08101e;font-size:13px;font-weight:900;border-radius:9px;background:var(--cyan)}
    .check-item b{display:block;color:#fff;font-size:15px}
    .check-item p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
    .process-box{padding:34px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel)}
    .process-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
    .process-head h2{margin:0;font-size:30px;font-weight:900;letter-spacing:-.04em}
    .process-head p{max-width:410px;margin:0;color:var(--muted);font-size:14px}
    .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .process-step{position:relative;padding:22px;min-height:205px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.022)}
    .process-step:not(:last-child)::after{
      content:"";
      position:absolute;
      width:18px;
      height:18px;
      top:50%;
      right:-19px;
      z-index:2;
      border-top:1px solid var(--primary-light);
      border-right:1px solid var(--primary-light);
      background:var(--panel);
      transform:translateY(-50%) rotate(45deg);
    }
    .step-no{display:block;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.12em}
    .step-icon{display:grid;place-items:center;width:43px;height:43px;margin:20px 0 16px;color:var(--primary-light);font-size:20px;border-radius:14px;background:rgba(124,92,255,.14)}
    .process-step h3{margin:0;color:#fff;font-size:17px;font-weight:900}
    .process-step p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.75}
    .faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:start}
    .faq-intro{position:sticky;top:32px}
    .faq-intro .section-desc{max-width:400px}
    .faq-chip{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:9px 12px;color:#ffd87b;font-size:12px;font-weight:800;border-radius:999px;background:rgba(255,209,102,.09);border:1px solid rgba(255,209,102,.18)}
    .faq-chip b{font-size:17px;line-height:1}
    .accordion{display:grid;gap:12px}
    .accordion-item{overflow:hidden;border:1px solid var(--line)!important;border-radius:15px!important;background:var(--panel)!important}
    .accordion-button{
      padding:19px 21px;
      color:#f4f6ff!important;
      font-size:15px;
      font-weight:800;
      background:var(--panel)!important;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){color:var(--cyan)!important;background:rgba(53,216,255,.045)!important}
    .accordion-button::after{filter:invert(1) brightness(2);opacity:.7}
    .accordion-body{padding:0 21px 20px;color:var(--muted);font-size:14px;line-height:1.85;background:var(--panel)}
    .cta-section{padding:25px 0 100px}
    .cta-box{
      position:relative;
      overflow:hidden;
      padding:56px;
      border:1px solid rgba(169,152,255,.32);
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 85% 30%,rgba(53,216,255,.24),transparent 18rem),
        radial-gradient(circle at 10% 100%,rgba(255,95,168,.19),transparent 18rem),
        linear-gradient(125deg,#1e1950,#161f4a 58%,#10233c);
      box-shadow:var(--shadow);
    }
    .cta-box::after{
      content:"YY";
      position:absolute;
      right:32px;
      bottom:-70px;
      color:rgba(255,255,255,.065);
      font-size:230px;
      font-weight:900;
      letter-spacing:-.14em;
    }
    .cta-content{position:relative;z-index:1;max-width:690px}
    .cta-content .eyebrow{color:#d9d2ff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
    .cta-content .eyebrow span{background:var(--lime);box-shadow:0 0 12px var(--lime)}
    .cta-content h2{margin:18px 0 12px;color:#fff;font-size:clamp(29px,3.7vw,48px);font-weight:900;line-height:1.2;letter-spacing:-.055em}
    .cta-content p{margin:0;color:#d4d9ed;font-size:16px;line-height:1.9}
    .cta-content .hero-actions{margin-top:28px}
    .footer{
      padding:46px 0 28px;
      border-top:1px solid var(--line);
      background:rgba(4,7,16,.48);
    }
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
    .footer-brand{display:flex;align-items:flex-start;gap:12px}
    .footer-brand .brand-mark{width:38px;height:38px;flex-basis:38px;font-size:16px;border-radius:12px}
    .footer-brand b{display:block;max-width:430px;color:#fff;font-size:14px;line-height:1.5;font-weight:900}
    .footer-brand p{margin:7px 0 0;color:var(--dim);font-size:12px;line-height:1.7}
    .footer-side{text-align:right}
    .footer-side p{margin:0;color:var(--dim);font-size:12px}
    .footer-domain{display:inline-block;margin-top:7px;color:var(--primary-light);font-size:12px;font-weight:800}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:35px;padding-top:20px;color:#65718c;font-size:11px;border-top:1px solid var(--line)}
    @keyframes spin{to{transform:rotate(360deg)}}

    @media (max-width:1199px){
      :root{--sidebar:250px}
      .container-custom{width:min(100% - 44px,960px)}
      .hero-grid{gap:34px}
      .genre-grid{grid-template-columns:repeat(2,1fr)}
      .feature-board{right:0}
      .float-card{left:-10px}
    }
    @media (max-width:1024px){
      .sidebar{display:none}
      .main-area{margin-left:0}
      .mobile-header{
        position:sticky;
        top:0;
        z-index:1030;
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:70px;
        padding:10px 22px;
        border-bottom:1px solid var(--line);
        background:rgba(8,13,27,.92);
        backdrop-filter:blur(18px);
      }
      .mobile-brand{display:flex;align-items:center;gap:10px;min-width:0}
      .mobile-brand .brand-mark{width:36px;height:36px;flex:0 0 36px;font-size:15px;border-radius:11px}
      .mobile-brand b{display:block;max-width:430px;overflow:hidden;color:#fff;font-size:13px;font-weight:900;white-space:nowrap;text-overflow:ellipsis}
      .mobile-home{
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:8px 12px;
        color:var(--cyan);
        font-size:12px;
        font-weight:800;
        border:1px solid rgba(53,216,255,.25);
        border-radius:10px;
        background:rgba(53,216,255,.07);
      }
      .hero{min-height:auto}
      .hero-grid{grid-template-columns:1fr .78fr;padding:65px 0}
      .hero h1{font-size:48px}
      .editorial-wrap,.reading-grid,.faq-layout{gap:30px}
      .section{padding:80px 0}
    }
    @media (max-width:768px){
      .container-custom{width:min(100% - 32px,640px)}
      .mobile-header{padding:10px 16px}
      .mobile-brand b{max-width:230px}
      .hero-grid{grid-template-columns:1fr;padding:56px 0 50px}
      .hero h1{font-size:clamp(35px,9vw,49px)}
      .hero-copy{font-size:15px}
      .hero-visual{min-height:365px;max-width:490px;width:100%;margin:0 auto}
      .feature-board{top:25px;right:0}
      .float-card{left:0;bottom:0}
      .signal-list{grid-template-columns:repeat(2,1fr);gap:16px}
      .signal-item{justify-content:flex-start}
      .section{padding:70px 0}
      .section-heading{margin-bottom:30px}
      .editorial-wrap,.reading-grid,.faq-layout{grid-template-columns:1fr}
      .faq-intro{position:static}
      .story-side{grid-template-columns:repeat(3,1fr)}
      .story-item{grid-template-columns:1fr;padding:11px}
      .story-thumb{width:100%;height:72px}
      .story-item h4{font-size:14px}
      .story-item p{display:none}
      .process-grid{gap:12px}
      .process-step{padding:17px}
      .process-step:not(:last-child)::after{display:none}
      .cta-box{padding:42px 32px}
      .footer-grid{grid-template-columns:1fr}
      .footer-side{text-align:left}
      .footer-bottom{flex-direction:column;gap:6px}
    }
    @media (max-width:520px){
      .mobile-brand b{max-width:160px;font-size:12px}
      .mobile-home{padding:8px;font-size:0}
      .mobile-home::before{content:"⌂";font-size:17px;line-height:1}
      .hero-grid{padding:45px 0}
      .eyebrow{font-size:10px}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .btn-neon,.btn-ghost{width:100%}
      .hero-note{display:grid;gap:7px}
      .hero-visual{min-height:330px}
      .feature-board{width:calc(100% - 8px);padding:18px}
      .board-main{min-height:140px}
      .float-card{width:205px}
      .signal-list{grid-template-columns:1fr}
      .signal-item{justify-content:center}
      .genre-grid{grid-template-columns:1fr}
      .genre-card{min-height:205px}
      .featured-story{min-height:405px;padding:25px}
      .story-side{grid-template-columns:1fr}
      .story-item{grid-template-columns:72px 1fr}
      .story-thumb{width:72px;height:72px}
      .story-item p{display:block}
      .reading-panel{padding:20px}
      .process-box{padding:22px}
      .process-head{display:block}
      .process-head h2{font-size:26px}
      .process-head p{margin-top:10px}
      .process-grid{grid-template-columns:1fr}
      .process-step{min-height:auto}
      .cta-section{padding-bottom:70px}
      .cta-box{padding:32px 22px}
      .cta-box::after{right:10px;font-size:160px}
      .footer{padding-top:35px}
    }