/* roulang page: index */
:root{
      --color-bg:#11130f;
      --color-bg-2:#171913;
      --color-surface:#1f241b;
      --color-surface-2:#272b22;
      --color-surface-3:#151710;
      --color-primary:#6f8562;
      --color-primary-2:#506346;
      --color-accent:#b58a55;
      --color-accent-2:#d0aa72;
      --color-text:#f3efe3;
      --color-muted:#bbb2a0;
      --color-soft:#8f8878;
      --color-border:rgba(232,220,195,.16);
      --color-border-strong:rgba(181,138,85,.36);
      --shadow-soft:0 22px 70px rgba(0,0,0,.34);
      --shadow-card:0 16px 46px rgba(0,0,0,.28);
      --radius-xl:38px;
      --radius-lg:28px;
      --radius-md:20px;
      --radius-sm:14px;
      --container:1200px;
      --nav-h:84px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-width:320px;
      color:var(--color-text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      line-height:1.75;
      background:
        radial-gradient(circle at 12% 4%, rgba(111,133,98,.22), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(181,138,85,.14), transparent 28%),
        linear-gradient(180deg,var(--color-bg),#0d0f0b 54%,#11120d);
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      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:56px 56px;
      mask-image:radial-gradient(circle at 50% 10%,#000,transparent 72%);
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.12;
      background:
        repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 14px);
      mix-blend-mode:screen;
    }
    a{color:inherit;text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
    a:hover{color:var(--color-accent-2)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(181,138,85,.35);color:#fff}
    .container-rou{
      width:min(100% - 40px,var(--container));
      margin-inline:auto;
    }
    .section{
      padding:112px 0;
      position:relative;
    }
    .section-tight{padding:84px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid var(--color-border);
      border-radius:999px;
      color:var(--color-accent-2);
      background:rgba(255,255,255,.035);
      font-size:13px;
      letter-spacing:.04em;
    }
    .eyebrow::before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:var(--color-primary);
      box-shadow:0 0 0 5px rgba(111,133,98,.14);
    }
    h1,h2,h3,h4{margin:0;color:var(--color-text);font-weight:800;letter-spacing:-.03em;line-height:1.16}
    h1{font-size:clamp(36px,5.6vw,66px)}
    h2{font-size:clamp(30px,4vw,44px)}
    h3{font-size:clamp(20px,2.2vw,26px)}
    p{margin:0;color:var(--color-muted)}
    .lead{
      font-size:clamp(16px,1.6vw,19px);
      color:#d1c8b7;
      max-width:680px;
    }
    .text-soft{color:var(--color-soft)}
    .split-title{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:28px;
      margin-bottom:44px;
    }
    .split-title p{max-width:520px}

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      height:var(--nav-h);
      backdrop-filter:blur(18px);
      background:linear-gradient(180deg,rgba(22,24,18,.88),rgba(18,19,14,.72));
      border-bottom:1px solid var(--color-border);
    }
    .navbar{
      height:var(--nav-h);
      padding:0;
    }
    .navbar .container-rou{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:24px;
    }
    .nav-side{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .nav-left{justify-content:flex-end}
    .nav-right{justify-content:flex-start}
    .nav-link{
      color:#d9d0be;
      font-size:14px;
      font-weight:650;
      padding:10px 14px!important;
      border-radius:999px;
      position:relative;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.055);
    }
    .nav-link.active{
      color:var(--color-accent-2)!important;
      background:rgba(181,138,85,.09);
      border:1px solid rgba(181,138,85,.22);
    }
    .brand{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-width:260px;
      padding:10px 18px;
      border-radius:22px;
      border:1px solid rgba(232,220,195,.14);
      background:
        radial-gradient(circle at 50% 0,rgba(181,138,85,.16),transparent 60%),
        rgba(255,255,255,.035);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .brand strong{
      max-width:360px;
      font-size:15px;
      line-height:1.2;
      font-weight:900;
      letter-spacing:-.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand span{
      margin-top:2px;
      color:var(--color-soft);
      font-size:11px;
      letter-spacing:.12em;
    }
    .navbar-toggler{
      border:1px solid var(--color-border);
      border-radius:14px;
      padding:10px 12px;
      color:var(--color-text);
      background:rgba(255,255,255,.04);
    }
    .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(181,138,85,.2)}
    .toggle-line{
      display:block;
      width:22px;height:2px;
      margin:4px 0;
      background:var(--color-text);
      border-radius:4px;
    }
    .mobile-brand{display:none}

    .btn{
      border:0;
      border-radius:999px;
      padding:13px 22px;
      font-weight:800;
      letter-spacing:.01em;
      transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
    }
    .btn:focus-visible,.nav-link:focus-visible,.form-control:focus,.accordion-button:focus{
      outline:3px solid rgba(208,170,114,.38);
      outline-offset:3px;
      box-shadow:none;
    }
    .btn-primary-rou{
      color:#fff;
      background:linear-gradient(135deg,var(--color-primary-2),var(--color-primary) 58%,#8f744a);
      box-shadow:0 14px 34px rgba(83,104,72,.28),inset 0 1px 0 rgba(255,255,255,.18);
    }
    .btn-primary-rou:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 48px rgba(111,133,98,.34);
    }
    .btn-ghost-rou{
      color:var(--color-text);
      border:1px solid var(--color-border);
      background:rgba(255,255,255,.035);
    }
    .btn-ghost-rou:hover{
      color:#fff;
      transform:translateY(-2px);
      border-color:rgba(208,170,114,.48);
      background:radial-gradient(circle at 50% 0,rgba(181,138,85,.16),rgba(255,255,255,.045));
    }
    .badge-rou{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 11px;
      color:#e4dac7;
      font-size:12px;
      font-weight:750;
      border:1px solid var(--color-border);
      border-radius:999px;
      background:rgba(255,255,255,.045);
    }
    .badge-rou.dark{
      color:var(--color-accent-2);
      border-color:rgba(181,138,85,.24);
      background:rgba(181,138,85,.08);
    }

    .hero{
      min-height:720px;
      display:flex;
      align-items:center;
      padding:86px 0 38px;
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      width:620px;height:620px;
      right:-180px;top:70px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(111,133,98,.26),transparent 64%);
      filter:blur(6px);
      animation:drift 9s ease-in-out infinite alternate;
    }
    .hero-content{
      position:relative;
      z-index:2;
    }
    .hero h1{
      max-width:730px;
      margin:22px 0 22px;
    }
    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:34px;
    }
    .hero-note{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:26px;
    }
    .visual-panel{
      min-height:520px;
      border-radius:var(--radius-xl);
      border:1px solid var(--color-border);
      background:
        radial-gradient(circle at 28% 22%,rgba(208,170,114,.2),transparent 24%),
        radial-gradient(circle at 78% 72%,rgba(111,133,98,.26),transparent 30%),
        linear-gradient(145deg,#22261d,#12140f 62%,#272116);
      box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.1);
      position:relative;
      overflow:hidden;
    }
    .visual-panel::before{
      content:"";
      position:absolute;
      inset:22px;
      border-radius:30px;
      border:1px solid rgba(232,220,195,.12);
      background:
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:34px 34px;
      mask-image:linear-gradient(135deg,#000,transparent 78%);
    }
    .visual-panel::after{
      content:"";
      position:absolute;
      inset:-30%;
      background:conic-gradient(from 120deg,transparent,rgba(181,138,85,.12),transparent,rgba(111,133,98,.18),transparent);
      animation:slowRotate 18s linear infinite;
    }
    .privacy-card{
      position:absolute;
      z-index:2;
      left:34px;
      bottom:34px;
      width:min(320px,calc(100% - 68px));
      padding:24px;
      border-radius:26px;
      border:1px solid rgba(232,220,195,.16);
      background:rgba(18,20,14,.76);
      backdrop-filter:blur(18px);
      box-shadow:0 18px 50px rgba(0,0,0,.32);
    }
    .privacy-icon{
      width:54px;height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:24px;
      background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
      margin-bottom:16px;
    }
    .privacy-card h3{font-size:22px;margin-bottom:8px}
    .privacy-card p{font-size:14px}
    .age-stamp{
      position:absolute;
      z-index:2;
      top:34px;
      right:34px;
      width:116px;height:116px;
      border-radius:50%;
      display:grid;
      place-items:center;
      text-align:center;
      color:#efe4ce;
      font-weight:900;
      line-height:1.15;
      border:1px solid rgba(208,170,114,.5);
      background:rgba(181,138,85,.12);
      box-shadow:inset 0 0 28px rgba(181,138,85,.14);
    }
    .trust-strip{
      margin-top:-28px;
      position:relative;
      z-index:5;
    }
    .trust-box{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      border:1px solid var(--color-border);
      border-radius:28px;
      overflow:hidden;
      background:rgba(24,27,19,.88);
      backdrop-filter:blur(16px);
      box-shadow:var(--shadow-card);
    }
    .trust-item{
      padding:22px 24px;
      border-right:1px solid var(--color-border);
    }
    .trust-item:last-child{border-right:0}
    .trust-item strong{
      display:block;
      color:#fff;
      font-size:18px;
      margin-bottom:2px;
    }
    .trust-item span{
      color:var(--color-soft);
      font-size:13px;
    }

    .steps-layout{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:44px;
      align-items:start;
    }
    .number-title{
      position:sticky;
      top:118px;
      padding:34px;
      border-radius:var(--radius-xl);
      border:1px solid var(--color-border);
      background:
        radial-gradient(circle at 20% 10%,rgba(111,133,98,.18),transparent 34%),
        rgba(255,255,255,.035);
    }
    .big-num{
      display:block;
      color:rgba(208,170,114,.2);
      font-size:94px;
      line-height:1;
      font-weight:900;
      font-variant-numeric:tabular-nums;
      margin-bottom:20px;
    }
    .stagger-list{
      display:grid;
      gap:18px;
    }
    .rule-card{
      padding:26px;
      border-radius:var(--radius-lg);
      border:1px solid var(--color-border);
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
    }
    .rule-card:nth-child(2){transform:translateX(32px)}
    .rule-card:nth-child(3){transform:translateX(10px)}
    .rule-card:nth-child(4){transform:translateX(46px)}
    .rule-card:hover{
      transform:translateY(-4px);
      border-color:rgba(181,138,85,.42);
      background:linear-gradient(180deg,rgba(111,133,98,.12),rgba(255,255,255,.035));
    }
    .rule-card:nth-child(2):hover,.rule-card:nth-child(3):hover,.rule-card:nth-child(4):hover{transform:translateY(-4px)}
    .rule-kicker{
      color:var(--color-accent-2);
      font-size:13px;
      font-weight:850;
      margin-bottom:8px;
      font-variant-numeric:tabular-nums;
    }
    .rule-card h3{margin-bottom:8px}

    .metrics{
      border-radius:var(--radius-xl);
      padding:34px;
      border:1px solid var(--color-border);
      background:
        linear-gradient(135deg,rgba(19,22,16,.96),rgba(38,42,32,.86)),
        radial-gradient(circle at 84% 16%,rgba(181,138,85,.2),transparent 32%);
      box-shadow:var(--shadow-soft);
    }
    .metric-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr 1fr .9fr;
      gap:14px;
    }
    .metric{
      padding:28px;
      min-height:154px;
      border-radius:26px;
      border:1px solid rgba(232,220,195,.13);
      background:rgba(255,255,255,.035);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .metric strong{
      font-size:clamp(34px,4vw,52px);
      line-height:1;
      font-weight:900;
      color:#fff;
      font-variant-numeric:tabular-nums;
    }
    .metric span{color:var(--color-muted);font-size:14px}
    .metric.wide{
      grid-column:span 2;
      background:
        radial-gradient(circle at 82% 12%,rgba(181,138,85,.18),transparent 34%),
        rgba(255,255,255,.045);
    }

    .scene-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:18px;
    }
    .scene-side{
      display:grid;
      gap:18px;
    }
    .scene-card{
      min-height:250px;
      padding:30px;
      border-radius:var(--radius-lg);
      border:1px solid var(--color-border);
      background:
        radial-gradient(circle at 18% 18%,rgba(111,133,98,.18),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
      position:relative;
      overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      transition:transform .22s var(--ease),border-color .22s var(--ease);
    }
    .scene-card.large{min-height:520px}
    .scene-card:hover{
      transform:translateY(-4px);
      border-color:rgba(208,170,114,.38);
    }
    .scene-icon{
      width:58px;height:58px;
      border-radius:20px;
      display:grid;
      place-items:center;
      margin-bottom:22px;
      color:#fff;
      background:linear-gradient(135deg,rgba(111,133,98,.95),rgba(181,138,85,.72));
      box-shadow:0 14px 32px rgba(0,0,0,.24);
    }
    .scene-card h3{margin-bottom:10px}
    .scene-pattern{
      position:absolute;
      right:-60px;bottom:-80px;
      width:260px;height:260px;
      border-radius:50%;
      border:1px solid rgba(208,170,114,.22);
      background:repeating-radial-gradient(circle,rgba(255,255,255,.055) 0 1px,transparent 1px 13px);
      opacity:.7;
    }

    .process{
      padding:38px;
      border-radius:var(--radius-xl);
      border:1px solid var(--color-border);
      background:rgba(255,255,255,.035);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .process-line{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      position:relative;
    }
    .process-step{
      position:relative;
      padding:28px 22px;
      border-radius:24px;
      background:rgba(18,20,15,.76);
      border:1px solid rgba(232,220,195,.12);
    }
    .step-dot{
      width:42px;height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin-bottom:18px;
      color:#fff;
      font-weight:900;
      background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
      font-variant-numeric:tabular-nums;
    }
    .process-step h3{font-size:21px;margin-bottom:8px}
    .process-step p{font-size:14px}

    .category-highlight{
      display:grid;
      grid-template-columns:1fr .86fr;
      gap:28px;
      align-items:center;
      border-radius:var(--radius-xl);
      border:1px solid var(--color-border-strong);
      padding:38px;
      background:
        radial-gradient(circle at 88% 14%,rgba(181,138,85,.2),transparent 34%),
        linear-gradient(135deg,rgba(39,43,34,.95),rgba(20,22,16,.94));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .ticket-card{
      border-radius:28px;
      min-height:280px;
      border:1px dashed rgba(208,170,114,.5);
      background:
        linear-gradient(90deg,rgba(255,255,255,.06) 50%,transparent 50%) 0 0/18px 1px repeat-x,
        radial-gradient(circle at 18% 22%,rgba(111,133,98,.24),transparent 34%),
        rgba(255,255,255,.04);
      padding:30px;
      position:relative;
    }
    .ticket-card::before,.ticket-card::after{
      content:"";
      position:absolute;
      top:50%;
      width:34px;height:34px;
      border-radius:50%;
      background:#151710;
      transform:translateY(-50%);
      border:1px solid rgba(208,170,114,.22);
    }
    .ticket-card::before{left:-17px}
    .ticket-card::after{right:-17px}
    .ticket-card h3{margin:16px 0 10px}

    .accordion{
      --bs-accordion-bg:transparent;
      --bs-accordion-border-color:transparent;
      display:grid;
      gap:14px;
    }
    .accordion-item{
      overflow:hidden;
      border:1px solid var(--color-border)!important;
      border-radius:22px!important;
      background:rgba(255,255,255,.035)!important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .accordion-button{
      color:var(--color-text)!important;
      background:transparent!important;
      padding:22px 24px;
      font-weight:850;
      border:0;
      box-shadow:none!important;
    }
    .accordion-button::after{
      width:18px;height:18px;
      background-image:none;
      content:"+";
      display:grid;
      place-items:center;
      color:var(--color-accent-2);
      font-size:24px;
      font-weight:500;
      transform:none;
    }
    .accordion-button:not(.collapsed)::after{content:"−"}
    .accordion-button:not(.collapsed){
      color:var(--color-accent-2)!important;
      background:rgba(111,133,98,.08)!important;
    }
    .accordion-body{
      padding:0 24px 24px;
      color:var(--color-muted);
      font-size:15px;
    }

    .cta-panel{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:32px;
      padding:42px;
      border-radius:var(--radius-xl);
      border:1px solid var(--color-border);
      background:
        radial-gradient(circle at 10% 0,rgba(111,133,98,.22),transparent 28%),
        radial-gradient(circle at 92% 88%,rgba(181,138,85,.18),transparent 30%),
        linear-gradient(145deg,#20251b,#12140f);
      box-shadow:var(--shadow-soft);
    }
    .form-card{
      padding:24px;
      border-radius:28px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(232,220,195,.13);
    }
    .form-label{
      color:#e9deca;
      font-size:13px;
      font-weight:750;
      margin-bottom:8px;
    }
    .form-control,.form-select{
      color:var(--color-text);
      border:1px solid rgba(232,220,195,.16);
      border-radius:16px;
      background:rgba(10,11,8,.48);
      padding:12px 14px;
    }
    .form-control::placeholder{color:#746f63}
    .form-control:focus,.form-select:focus{
      color:var(--color-text);
      border-color:rgba(208,170,114,.62);
      background:rgba(10,11,8,.62);
      box-shadow:0 0 0 4px rgba(181,138,85,.12);
    }
    .form-select option{background:#171913;color:#fff}

    .site-footer{
      position:relative;
      padding:70px 0 28px;
      background:#0b0d09;
      border-top:1px solid rgba(232,220,195,.12);
    }
    .site-footer::before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(181,138,85,.6),transparent);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .8fr 1fr 1fr;
      gap:34px;
      margin-bottom:42px;
    }
    .footer-brand strong{
      display:block;
      font-size:20px;
      line-height:1.25;
      margin-bottom:12px;
    }
    .footer-col h4{
      font-size:15px;
      margin-bottom:14px;
      color:#fff;
    }
    .footer-col a,.footer-col p{
      display:block;
      color:var(--color-soft);
      font-size:14px;
      margin-bottom:9px;
    }
    .footer-col a:hover{color:var(--color-accent-2);transform:translateX(2px)}
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:18px;
      padding-top:24px;
      border-top:1px solid rgba(232,220,195,.1);
      color:#7d776b;
      font-size:13px;
    }

    @keyframes drift{
      from{transform:translate(0,0) scale(1)}
      to{transform:translate(-30px,24px) scale(1.05)}
    }
    @keyframes slowRotate{
      to{transform:rotate(360deg)}
    }
    .fade-up{
      animation:fadeUp .7s var(--ease) both;
    }
    @keyframes fadeUp{
      from{opacity:0;transform:translateY(18px)}
      to{opacity:1;transform:none}
    }

    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition:none!important;
      }
    }
    @media (max-width:991.98px){
      :root{--nav-h:74px}
      .site-header{height:auto}
      .navbar{height:auto;min-height:var(--nav-h);padding:12px 0}
      .navbar .container-rou{
        display:flex;
        justify-content:space-between;
      }
      .brand{display:none}
      .mobile-brand{
        display:flex;
        flex-direction:column;
        max-width:220px;
      }
      .mobile-brand strong{
        font-size:14px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .mobile-brand span{font-size:11px;color:var(--color-soft)}
      .navbar-collapse{
        margin-top:14px;
        padding:14px;
        border:1px solid var(--color-border);
        border-radius:22px;
        background:rgba(17,19,14,.96);
      }
      .navbar .container-rou{flex-wrap:wrap}
      .navbar-collapse{width:100%}
      .nav-side{
        flex-direction:column;
        align-items:stretch;
        gap:6px;
      }
      .nav-link{width:100%;padding:12px 14px!important}
      .hero{min-height:auto;padding:62px 0 34px}
      .visual-panel{min-height:420px;margin-top:34px}
      .trust-box{grid-template-columns:repeat(2,1fr)}
      .trust-item:nth-child(2){border-right:0}
      .trust-item:nth-child(-n+2){border-bottom:1px solid var(--color-border)}
      .steps-layout,.category-highlight,.cta-panel{grid-template-columns:1fr}
      .number-title{position:relative;top:auto}
      .rule-card:nth-child(n){transform:none}
      .metric-grid{grid-template-columns:1fr 1fr}
      .metric.wide{grid-column:span 1}
      .scene-grid{grid-template-columns:1fr}
      .scene-card.large{min-height:360px}
      .process-line{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:575.98px){
      .container-rou{width:min(100% - 28px,var(--container))}
      .section{padding:76px 0}
      .section-tight{padding:62px 0}
      .split-title{display:block;margin-bottom:30px}
      .split-title p{margin-top:14px}
      .hero-cta .btn{width:100%;justify-content:center}
      .visual-panel{min-height:360px;border-radius:28px}
      .age-stamp{width:90px;height:90px;right:20px;top:20px;font-size:13px}
      .privacy-card{left:20px;bottom:20px;width:calc(100% - 40px);padding:20px}
      .trust-box,.metric-grid,.process-line,.footer-grid{grid-template-columns:1fr}
      .trust-item{border-right:0;border-bottom:1px solid var(--color-border)}
      .trust-item:last-child{border-bottom:0}
      .metrics,.process,.category-highlight,.cta-panel{padding:22px;border-radius:28px}
      .rule-card,.scene-card{padding:22px}
      .big-num{font-size:70px}
      .copyright{flex-direction:column}
    }

/* roulang page: category1 */
:root{
  --color-bg:#0e1210;
  --color-bg-2:#141915;
  --color-surface:#171d1a;
  --color-surface-2:#1d2520;
  --color-surface-3:#232b25;
  --color-primary:#49654d;
  --color-primary-2:#5d7a60;
  --color-accent:#b58a57;
  --color-accent-2:#d0a36e;
  --color-text:#f4efe5;
  --color-muted:#b8b1a7;
  --color-border:rgba(226,214,196,.13);
  --color-border-strong:rgba(190,167,129,.24);
  --shadow-lg:0 24px 60px rgba(0,0,0,.34);
  --shadow-md:0 14px 32px rgba(0,0,0,.24);
  --shadow-sm:0 10px 24px rgba(0,0,0,.16);
  --radius-sm:14px;
  --radius-md:20px;
  --radius-lg:28px;
  --radius-xl:40px;
  --container:1240px;
  --gap:24px;
  --transition:.22s ease;
  --font-cn: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-cn);
  color:var(--color-text);
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(89,116,93,.20), transparent 48%),
    radial-gradient(900px 640px at 82% 18%, rgba(181,138,87,.12), transparent 44%),
    linear-gradient(180deg, #0b0e0c 0%, #0f1310 42%, #111613 100%);
  line-height:1.75;
  min-height:100vh;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

body::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 100%),
    linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 100%);
  background-size: 34px 34px, 34px 34px;
  opacity:.22;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.2));
}

body::after{
  background:
    radial-gradient(circle at 18% 78%, rgba(181,138,87,.08), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(93,122,96,.12), transparent 30%);
  filter:blur(8px);
  opacity:.8;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color var(--transition), transform var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);
}

a:hover{color:#fff}

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

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

:focus-visible{
  outline:2px solid rgba(208,163,110,.86);
  outline-offset:3px;
}

.container-rou{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(14,18,16,.92), rgba(14,18,16,.78));
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

.site-header .navbar{
  min-height:84px;
  padding:0;
}

.site-header .container-rou{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.mobile-brand{
  display:none;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:12px 0;
}

.mobile-brand strong,
.brand strong{
  font-size:1.04rem;
  letter-spacing:.02em;
  font-weight:800;
  color:var(--color-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mobile-brand span,
.brand span{
  color:var(--color-muted);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:none;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:3px;
  min-width:240px;
  padding:16px 0;
}

.navbar-collapse{
  flex:1 1 0;
}

.nav-side{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-left{justify-content:flex-start}
.nav-right{justify-content:flex-end}

.site-header .nav-link{
  position:relative;
  color:rgba(244,239,229,.82);
  padding:10px 14px;
  border-radius:999px;
  font-size:.96rem;
  letter-spacing:.02em;
  border:1px solid transparent;
}

.site-header .nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

.site-header .nav-link.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(93,122,96,.22), rgba(181,138,87,.08));
  border-color:rgba(185,167,129,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.site-header .nav-link.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:18px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--color-primary-2), var(--color-accent));
  transform:translateX(-50%);
}

.navbar-toggler{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:var(--color-text);
  box-shadow:none;
  border-radius:16px;
  width:54px;
  height:46px;
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  padding:0;
  transition:var(--transition);
}

.navbar-toggler:hover{
  transform:translateY(-1px);
  border-color:rgba(208,163,110,.35);
  background:rgba(255,255,255,.04);
}

.toggle-line{
  width:18px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg, rgba(244,239,229,.88), rgba(208,163,110,.92));
  display:block;
}

.hero-compact{
  position:relative;
  padding:56px 0 34px;
}

.hero-shell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg, rgba(26,32,28,.92), rgba(17,21,18,.94)),
    radial-gradient(800px 440px at 84% 22%, rgba(181,138,87,.16), transparent 42%),
    radial-gradient(700px 380px at 18% 18%, rgba(93,122,96,.16), transparent 38%);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-shell::before,
.hero-shell::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}

.hero-shell::before{
  inset:auto -80px 40px auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(208,163,110,.18), transparent 64%);
  animation:floatGlow 14s ease-in-out infinite;
}

.hero-shell::after{
  inset:32px auto auto -60px;
  width:180px;
  height:180px;
  background:radial-gradient(circle, rgba(93,122,96,.18), transparent 68%);
  animation:floatGlow 18s ease-in-out infinite reverse;
}

.hero-grid{
  position:relative;
  z-index:1;
  padding:28px;
  display:grid;
  grid-template-columns:1.45fr .95fr;
  gap:26px;
  align-items:stretch;
  min-height:520px;
}

.breadcrumb-rou{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
  color:rgba(244,239,229,.58);
  font-size:.86rem;
  margin-bottom:18px;
}

.breadcrumb-rou::-webkit-scrollbar{display:none}

.breadcrumb-rou a{
  color:rgba(244,239,229,.72);
  white-space:nowrap;
}

.breadcrumb-rou span.sep{
  color:rgba(244,239,229,.26);
}

.page-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  margin-bottom:18px;
  border-radius:999px;
  border:1px solid rgba(185,167,129,.16);
  background:rgba(255,255,255,.03);
  color:var(--color-accent-2);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.page-title{
  margin:0;
  font-size:clamp(2.3rem, 4vw, 4.35rem);
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.03em;
  max-width:12ch;
}

.page-subtitle{
  margin:18px 0 0;
  max-width:40rem;
  color:rgba(244,239,229,.82);
  font-size:1.02rem;
  line-height:1.86;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.btn{
  border:0;
  border-radius:999px;
  padding:12px 20px;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn:active{
  transform:translateY(0);
}

.btn-rou-primary{
  color:#f7f3eb;
  background:linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  box-shadow:0 14px 30px rgba(58,81,62,.32), inset 0 1px 0 rgba(255,255,255,.10);
}

.btn-rou-primary:hover{
  color:#fff;
  box-shadow:0 18px 34px rgba(58,81,62,.40), 0 0 0 1px rgba(208,163,110,.12);
}

.btn-rou-secondary{
  color:var(--color-text);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.btn-rou-secondary:hover{
  color:#fff;
  border-color:rgba(208,163,110,.28);
  background:rgba(208,163,110,.08);
}

.btn-rou-ghost{
  color:rgba(244,239,229,.88);
  background:transparent;
  border:1px solid rgba(255,255,255,.09);
}

.btn-rou-ghost:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.16);
}

.hero-note-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.note-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(244,239,229,.82);
  font-size:.88rem;
}

.note-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--color-accent), var(--color-primary-2));
  box-shadow:0 0 0 4px rgba(181,138,87,.12);
}

.hero-visual{
  position:relative;
  min-height:100%;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(33,39,35,.96), rgba(16,20,18,.98)),
    radial-gradient(circle at 20% 18%, rgba(93,122,96,.20), transparent 30%),
    radial-gradient(circle at 78% 28%, rgba(181,138,87,.18), transparent 28%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-md);
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.04), transparent 20%, transparent 80%, rgba(255,255,255,.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px);
  opacity:.26;
  mix-blend-mode:screen;
}

.hero-visual::after{
  content:"";
  position:absolute;
  inset:auto -20% -14% auto;
  width:240px;
  height:240px;
  background:radial-gradient(circle, rgba(208,163,110,.18), transparent 64%);
  filter:blur(6px);
}

.visual-panel{
  position:relative;
  z-index:1;
  padding:26px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
}

.visual-topline{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.visual-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(185,167,129,.18);
  background:rgba(255,255,255,.03);
  color:#f7efe1;
  font-size:.86rem;
}

.visual-ring{
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle, var(--color-accent-2), var(--color-accent) 60%, transparent 62%);
  box-shadow:0 0 0 7px rgba(208,163,110,.08);
}

.floating-card{
  border-radius:24px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.floating-card + .floating-card{
  margin-top:12px;
}

.floating-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color:#fff;
  font-weight:800;
  margin-bottom:8px;
}

.floating-desc{
  margin:0;
  color:rgba(244,239,229,.76);
  font-size:.92rem;
  line-height:1.72;
}

.floating-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  font-size:.82rem;
  border-radius:999px;
  color:rgba(244,239,229,.88);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,12,11,.24);
}

.chip small{
  color:var(--color-accent-2);
}

.stat-strip{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}

.stat-item{
  padding:18px 18px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(24,30,26,.92), rgba(18,22,19,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.stat-num{
  font-size:1.55rem;
  line-height:1.1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.stat-label{
  display:block;
  margin-top:8px;
  color:var(--color-muted);
  font-size:.88rem;
}

.section-block{
  padding:88px 0;
  position:relative;
}

.section-block.tight{
  padding-top:54px;
}

.section-heading{
  margin-bottom:28px;
  max-width:760px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--color-accent-2);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.section-title{
  margin:0;
  font-size:clamp(1.8rem, 2.8vw, 3.15rem);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.03em;
}

.section-desc{
  margin:14px 0 0;
  color:rgba(244,239,229,.76);
  font-size:1rem;
  line-height:1.88;
  max-width:62rem;
}

.number-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:20px;
  align-items:start;
}

.number-block{
  border-radius:var(--radius-lg);
  padding:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(27,33,29,.95), rgba(20,25,22,.95));
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:104px;
}

.number-block .big-no{
  display:block;
  font-size:clamp(3rem, 7vw, 5.5rem);
  line-height:.92;
  font-weight:900;
  color:rgba(244,239,229,.92);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.05em;
  margin-bottom:8px;
}

.number-block h3{
  margin:0;
  font-size:1.9rem;
  line-height:1.18;
  font-weight:900;
}

.number-block p{
  margin:14px 0 0;
  color:rgba(244,239,229,.76);
}

.stagger-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.stagger-card{
  position:relative;
  overflow:hidden;
  padding:22px 22px 20px;
  min-height:168px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(160deg, rgba(28,35,31,.95), rgba(18,22,19,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.stagger-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(208,163,110,.72), rgba(93,122,96,.45), transparent);
  opacity:.9;
}

.stagger-card:hover{
  transform:translateY(-3px);
  border-color:rgba(208,163,110,.22);
  box-shadow:var(--shadow-sm);
}

.stagger-card:nth-child(2n){
  transform:translateY(14px);
}
.stagger-card:nth-child(2n):hover{
  transform:translateY(10px);
}

.stagger-card .idx{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--color-accent-2);
  font-weight:800;
  font-size:.84rem;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.stagger-card h4{
  margin:0;
  font-size:1.16rem;
  line-height:1.35;
  font-weight:800;
}

.stagger-card p{
  margin:10px 0 0;
  color:rgba(244,239,229,.72);
  font-size:.95rem;
  line-height:1.76;
}

.metrics-band{
  padding:16px 0 0;
}

.metrics-shell{
  padding:14px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(22,27,24,.92), rgba(17,21,19,.92));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-sm);
}

.metrics-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr .9fr;
  gap:12px;
}

.metric{
  border-radius:22px;
  padding:20px 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
}

.metric strong{
  display:block;
  font-size:1.5rem;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.metric span{
  display:block;
  margin-top:8px;
  color:var(--color-muted);
  font-size:.88rem;
}

.scene-grid{
  display:grid;
  grid-template-columns:1.24fr .76fr;
  gap:20px;
}

.scene-main,
.scene-side{
  display:grid;
  gap:20px;
}

.scene-card{
  overflow:hidden;
  position:relative;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(26,31,28,.95), rgba(18,22,19,.96));
  box-shadow:var(--shadow-sm);
  padding:24px;
  min-height:240px;
}

.scene-card::before{
  content:"";
  position:absolute;
  inset:-30% auto auto -14%;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(93,122,96,.16), transparent 64%);
  filter:blur(8px);
}

.scene-card.alt::before{
  inset:auto -18% -28% auto;
  background:radial-gradient(circle, rgba(208,163,110,.15), transparent 64%);
}

.scene-card h4{
  margin:0;
  font-size:1.45rem;
  font-weight:900;
  line-height:1.28;
}

.scene-card p{
  margin:12px 0 0;
  color:rgba(244,239,229,.76);
  max-width:32rem;
}

.scene-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.scene-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(244,239,229,.85);
  background:rgba(255,255,255,.03);
  font-size:.82rem;
}

.flow-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  counter-reset:step;
}

.flow-item{
  position:relative;
  padding:24px 20px 22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(24,29,26,.95), rgba(18,22,19,.95));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-sm);
}

.flow-item::before{
  counter-increment:step;
  content:"0" counter(step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(93,122,96,.24), rgba(181,138,87,.12));
  border:1px solid rgba(208,163,110,.18);
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
}

.flow-item h5{
  margin:0;
  font-size:1.08rem;
  font-weight:800;
}

.flow-item p{
  margin:10px 0 0;
  color:rgba(244,239,229,.72);
  font-size:.93rem;
  line-height:1.74;
}

.content-layout{
  display:grid;
  grid-template-columns:1.8fr .9fr;
  gap:22px;
  align-items:start;
}

.featured-entry{
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(27,33,29,.94), rgba(17,20,18,.96));
  box-shadow:var(--shadow-md);
  margin-bottom:18px;
}

.featured-thumb{
  min-height:220px;
  background:
    radial-gradient(circle at 18% 22%, rgba(93,122,96,.28), transparent 26%),
    radial-gradient(circle at 78% 22%, rgba(208,163,110,.20), transparent 24%),
    linear-gradient(135deg, #1d251f, #121613 50%, #181e1a);
  position:relative;
  overflow:hidden;
}

.featured-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 100%);
  background-size:32px 32px;
  opacity:.3;
}

.featured-body{
  padding:24px;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.tag-soft{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border-radius:999px;
  font-size:.8rem;
  color:rgba(244,239,229,.88);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.entry-title{
  margin:0;
  font-size:1.55rem;
  line-height:1.35;
  font-weight:900;
}

.entry-text{
  margin:12px 0 0;
  color:rgba(244,239,229,.74);
  line-height:1.8;
}

.entry-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  color:rgba(244,239,229,.56);
  font-size:.84rem;
}

.entry-list{
  display:grid;
  gap:14px;
}

.entry-card{
  display:grid;
  grid-template-columns:32% 68%;
  gap:0;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(24,29,26,.96), rgba(17,21,18,.96));
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.entry-card:hover{
  transform:translateY(-2px);
  border-color:rgba(208,163,110,.20);
  box-shadow:var(--shadow-md);
}

.entry-media{
  min-height:162px;
  background:
    radial-gradient(circle at 22% 20%, rgba(208,163,110,.18), transparent 26%),
    radial-gradient(circle at 75% 30%, rgba(93,122,96,.26), transparent 30%),
    linear-gradient(135deg, #1b221d, #111513 60%, #151b17);
  position:relative;
}

.entry-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px);
  opacity:.35;
}

.entry-copy{
  padding:18px 18px 18px 20px;
}

.entry-copy h4{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
  font-weight:850;
}

.entry-copy p{
  margin:10px 0 0;
  color:rgba(244,239,229,.74);
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.entry-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  font-size:.82rem;
  color:rgba(244,239,229,.56);
}

.sidebar{
  position:sticky;
  top:104px;
  display:grid;
  gap:16px;
}

.side-card{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(24,30,26,.96), rgba(17,20,18,.96));
  box-shadow:var(--shadow-sm);
  padding:22px;
}

.side-card h5{
  margin:0;
  font-size:1.06rem;
  font-weight:850;
  line-height:1.3;
}

.side-card p{
  margin:10px 0 0;
  color:rgba(244,239,229,.74);
  line-height:1.76;
  font-size:.95rem;
}

.side-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.side-list a,
.side-list span{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(244,239,229,.82);
}

.side-list a::before,
.side-list span::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:.6rem;
  border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary-2), var(--color-accent));
  flex:0 0 auto;
}

.side-nav{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.side-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:rgba(244,239,229,.84);
}

.side-nav a:hover{
  border-color:rgba(208,163,110,.22);
  background:rgba(208,163,110,.06);
}

.side-nav a.active{
  background:linear-gradient(135deg, rgba(93,122,96,.22), rgba(181,138,87,.08));
  border-color:rgba(208,163,110,.20);
  color:#fff;
}

.side-form{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.form-control,
.form-select{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color:var(--color-text);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:none;
  transition:var(--transition);
}

.form-control::placeholder{
  color:rgba(244,239,229,.40);
}

.form-control:focus,
.form-select:focus{
  background:rgba(255,255,255,.04);
  color:#fff;
  border-color:rgba(208,163,110,.42);
  box-shadow:0 0 0 .22rem rgba(208,163,110,.12);
}

textarea.form-control{
  min-height:100px;
  resize:vertical;
}

.small-hint{
  font-size:.84rem;
  color:rgba(244,239,229,.56);
  line-height:1.6;
}

.pagination{
  gap:8px;
  margin:26px 0 0;
  flex-wrap:wrap;
}

.pagination .page-item .page-link{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:rgba(244,239,229,.82);
  padding:10px 14px;
  min-width:44px;
  text-align:center;
  box-shadow:none;
}

.pagination .page-item .page-link:hover{
  color:#fff;
  border-color:rgba(208,163,110,.24);
  background:rgba(208,163,110,.08);
}

.pagination .page-item.active .page-link{
  background:linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  color:#fff;
  border-color:rgba(255,255,255,.06);
}

.pagination .page-item.disabled .page-link{
  opacity:.46;
  background:rgba(255,255,255,.02);
}

.faq-wrap{
  border-radius:var(--radius-xl);
  padding:28px;
  background:linear-gradient(180deg, rgba(24,29,26,.94), rgba(18,22,19,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-sm);
}

.accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-color:transparent;
  --bs-accordion-color:var(--color-text);
  --bs-accordion-btn-color:var(--color-text);
  --bs-accordion-btn-bg:transparent;
  --bs-accordion-active-color:#fff;
  --bs-accordion-active-bg:rgba(255,255,255,.03);
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-btn-icon-width:1rem;
}

.accordion-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px !important;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  margin-bottom:12px;
}

.accordion-button{
  padding:18px 18px;
  font-weight:800;
  color:var(--color-text);
  background:transparent;
  box-shadow:none !important;
}

.accordion-button:not(.collapsed){
  color:#fff;
  background:rgba(255,255,255,.035);
}

.accordion-button::after{
  background-image:none;
  content:"+";
  width:1.1rem;
  height:1.1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-accent-2);
  font-size:1.15rem;
  font-weight:700;
  transform:none;
  transition:transform var(--transition);
}

.accordion-button:not(.collapsed)::after{
  content:"–";
  transform:rotate(180deg);
}

.accordion-body{
  padding:0 18px 18px;
  color:rgba(244,239,229,.76);
  line-height:1.82;
}

.cta-panel{
  border-radius:40px;
  padding:32px;
  background:
    linear-gradient(145deg, rgba(28,35,31,.98), rgba(18,22,19,.98));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--shadow-lg);
}

.cta-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:center;
}

.cta-panel h3{
  margin:0;
  font-size:clamp(1.5rem, 2.4vw, 2.4rem);
  line-height:1.2;
  font-weight:900;
}

.cta-panel p{
  margin:14px 0 0;
  color:rgba(244,239,229,.78);
  line-height:1.84;
  max-width:46rem;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px;
}

.site-footer{
  margin-top:90px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(12,15,13,.96), rgba(9,11,10,.99));
}

.site-footer .container-rou{
  padding:34px 0 18px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr .65fr .85fr;
  gap:22px;
  padding-bottom:22px;
}

.footer-col strong{
  display:block;
  margin-bottom:10px;
  font-size:1.04rem;
  font-weight:850;
}

.footer-col h4{
  margin:0 0 12px;
  font-size:.95rem;
  color:#fff;
  font-weight:800;
}

.footer-col p,
.footer-col a{
  display:block;
  color:rgba(244,239,229,.68);
  font-size:.92rem;
  line-height:1.8;
  margin:0 0 6px;
}

.footer-col a:hover{
  color:#fff;
}

.footer-brand p{
  max-width:28rem;
}

.copyright{
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  color:rgba(244,239,229,.48);
  font-size:.82rem;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes floatGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-10px,12px,0) scale(1.05)}
}

@media (max-width: 1199.98px){
  .hero-grid{grid-template-columns:1.18fr .82fr}
  .metrics-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .scene-grid,
  .content-layout,
  .cta-grid{
    grid-template-columns:1fr;
  }
  .sidebar{position:static}
}

@media (max-width: 991.98px){
  .site-header .container-rou{
    justify-content:space-between;
  }
  .brand{
    display:none;
  }
  .mobile-brand{
    display:flex;
  }
  .navbar-toggler{
    display:inline-flex;
  }
  .navbar-collapse{
    display:none !important;
  }
  .navbar-collapse.show{
    display:block !important;
  }
  .site-header .container-rou{
    flex-wrap:wrap;
    padding:12px 0;
  }
  .nav-side{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding:10px 0 14px;
  }
  .site-header .nav-link{
    width:100%;
    text-align:left;
    padding:12px 14px;
  }
  .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .page-title{max-width:100%}
  .hero-visual{min-height:360px}
  .number-grid{
    grid-template-columns:1fr;
  }
  .number-block{
    position:relative;
    top:auto;
  }
  .flow-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 767.98px){
  .hero-compact{padding:32px 0 22px}
  .hero-grid{padding:20px}
  .page-title{font-size:clamp(2rem, 9vw, 3rem)}
  .section-block{padding:64px 0}
  .stagger-list,
  .metrics-grid,
  .flow-row,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .entry-card{
    grid-template-columns:1fr;
  }
  .entry-media{
    min-height:180px;
  }
  .cta-actions{
    justify-content:flex-start;
  }
  .faq-wrap,
  .cta-panel{
    padding:22px;
    border-radius:28px;
  }
  .copyright{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 575.98px){
  .container-rou{width:min(var(--container), calc(100% - 22px))}
  .hero-grid,
  .visual-panel,
  .featured-body,
  .entry-copy{
    padding-left:16px;
    padding-right:16px;
  }
  .hero-grid{padding:16px}
  .hero-actions{
    flex-direction:column;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  .note-pill{
    width:100%;
    justify-content:flex-start;
  }
  .stat-strip{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .page-subtitle,
  .section-desc,
  .scene-card p,
  .floating-desc,
  .entry-copy p,
  .cta-panel p{
    font-size:.94rem;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}