/* roulang page: index */
:root{
      --bg:#f6f0e7;
      --bg-soft:#fbf7ef;
      --panel:#fffaf2;
      --panel-strong:#2b2924;
      --text:#211f1a;
      --muted:#756f63;
      --weak:#9a9284;
      --line:#e4d7c4;
      --line-dark:rgba(255,255,255,.14);
      --amber:#c9872b;
      --amber-2:#f0b45a;
      --copper:#9d5f2b;
      --moss:#5f8a63;
      --moss-soft:#e8f1e3;
      --sand:#eadcc7;
      --danger:#a84c35;
      --white:#ffffff;
      --shadow-sm:0 8px 24px rgba(54,43,29,.08);
      --shadow-md:0 18px 48px rgba(54,43,29,.13);
      --shadow-warm:0 18px 54px rgba(183,112,30,.16);
      --radius-sm:12px;
      --radius:18px;
      --radius-lg:26px;
      --radius-xl:34px;
      --container:1240px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 5%, rgba(240,180,90,.22), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(95,138,99,.14), transparent 28%),
        linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 48%,#f3eadc 100%);
      line-height:1.72;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.26;
      background-image:
        linear-gradient(rgba(43,41,36,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,41,36,.035) 1px, transparent 1px);
      background-size:28px 28px;
      mask-image:linear-gradient(180deg, #000 0%, transparent 76%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{border:0;cursor:pointer}
    ::selection{background:rgba(201,135,43,.24)}
    .container{width:min(var(--container), calc(100% - 40px));margin:0 auto}
    .section{padding:86px 0}
    .section-tight{padding:58px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid rgba(201,135,43,.28);
      background:rgba(255,250,242,.72);border-radius:999px;
      color:var(--copper);font-size:13px;font-weight:700;
      box-shadow:0 8px 20px rgba(157,95,43,.06);
    }
    .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 5px rgba(95,138,99,.12)}
    h1,h2,h3{letter-spacing:-.03em;line-height:1.16}
    h1{font-size:clamp(32px,5vw,56px);font-weight:900}
    h2{font-size:clamp(28px,3.2vw,38px);font-weight:880}
    h3{font-size:22px;font-weight:820}
    p{color:var(--muted)}
    .section-head{
      display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
      margin-bottom:30px;
    }
    .section-head .lead{max-width:620px;margin-top:12px;font-size:16px}
    .kicker{color:var(--copper);font-weight:800;font-size:14px;margin-bottom:10px}

    .site-header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:saturate(130%) blur(18px);
      background:rgba(251,247,239,.84);
      border-bottom:1px solid rgba(228,215,196,.82);
      box-shadow:0 10px 28px rgba(43,41,36,.04);
    }
    .nav{
      height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .brand{
      display:flex;align-items:center;gap:12px;min-width:max-content;
      font-weight:900;letter-spacing:-.04em;
    }
    .brand-mark{
      width:42px;height:42px;border-radius:14px;
      background:linear-gradient(135deg,#2b2924 0%,#5c4730 58%,#c9872b 100%);
      display:grid;place-items:center;color:#fff4df;
      box-shadow:0 10px 28px rgba(157,95,43,.22);
      position:relative;overflow:hidden;
    }
    .brand-mark::after{
      content:"";position:absolute;width:24px;height:64px;background:rgba(255,255,255,.18);
      transform:rotate(34deg);right:2px;top:-14px;
    }
    .brand-mark span{position:relative;font-size:17px}
    .brand-text{display:flex;flex-direction:column;line-height:1.1}
    .brand-text strong{font-size:16px}
    .brand-text small{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em;margin-top:4px}
    .nav-links{
      display:flex;align-items:center;gap:6px;
      padding:6px;border:1px solid rgba(228,215,196,.88);
      border-radius:999px;background:rgba(255,250,242,.68);
    }
    .nav-links a{
      padding:9px 14px;border-radius:999px;font-size:14px;font-weight:750;color:#514b41;
      transition:all .22s var(--ease);
      white-space:nowrap;
    }
    .nav-links a:hover{background:#f0e4d3;color:var(--text)}
    .nav-links a.active{
      color:#fff8ea;
      background:linear-gradient(135deg,#2b2924,#6b4d2d);
      box-shadow:0 10px 20px rgba(43,41,36,.14);
    }
    .nav-actions{display:flex;align-items:center;gap:10px}
    .command-search{
      width:252px;height:42px;border:1px solid rgba(201,135,43,.22);
      border-radius:14px;background:rgba(255,250,242,.82);
      display:flex;align-items:center;gap:9px;padding:0 10px;color:var(--muted);
      transition:all .22s var(--ease);
    }
    .command-search:focus-within{border-color:rgba(201,135,43,.58);box-shadow:0 0 0 4px rgba(201,135,43,.13);background:#fff}
    .command-search svg{width:17px;flex:0 0 auto}
    .command-search input{
      width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:14px;
    }
    .command-search input::placeholder{color:var(--weak)}
    .kbd{
      padding:2px 6px;border-radius:7px;background:#eee1cc;color:#817261;
      font-size:12px;font-weight:800;border:1px solid #dfcfb8;
    }
    .quick{
      width:42px;height:42px;border-radius:14px;border:1px solid rgba(228,215,196,.9);
      background:rgba(255,250,242,.72);display:grid;place-items:center;
      color:var(--copper);transition:all .22s var(--ease);
    }
    .quick:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);background:#fff}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:46px;padding:0 18px;border-radius:15px;
      font-size:15px;font-weight:850;line-height:1;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
      white-space:nowrap;
    }
    .btn-primary{
      color:#fff7e9;background:linear-gradient(135deg,var(--copper),var(--amber));
      box-shadow:0 16px 34px rgba(157,95,43,.22);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(157,95,43,.28)}
    .btn-secondary{
      color:var(--text);background:rgba(255,250,242,.78);
      border:1px solid rgba(201,135,43,.25);
    }
    .btn-secondary:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--shadow-sm)}
    .btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:3px solid rgba(201,135,43,.32);outline-offset:3px;
    }
    .mobile-toggle{display:none}

    .hero{padding:72px 0 38px}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
    .hero-copy .brand-line{margin-bottom:18px}
    .hero h1{max-width:720px}
    .hero h1 .accent{
      background:linear-gradient(90deg,#2b2924 0%,#8a592b 58%,#c9872b 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero-sub{font-size:18px;margin-top:20px;max-width:650px;color:#61594e}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .trust-note{
      margin-top:18px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;
    }
    .trust-note span{
      display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--moss-soft);color:#4e7651;font-weight:800;
    }
    .visual-card{
      position:relative;border-radius:var(--radius-xl);padding:22px;
      background:
        linear-gradient(145deg,rgba(255,250,242,.92),rgba(237,222,199,.92)),
        radial-gradient(circle at 20% 10%, rgba(240,180,90,.28), transparent 28%);
      border:1px solid rgba(228,215,196,.95);
      box-shadow:var(--shadow-md);
      overflow:hidden;
    }
    .visual-card::before{
      content:"";position:absolute;inset:16px;border-radius:26px;
      border:1px dashed rgba(157,95,43,.22);pointer-events:none;
    }
    .dash-top{
      position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
    }
    .dash-title strong{display:block;font-size:18px;line-height:1.2}
    .dash-title small{color:var(--muted);font-weight:700}
    .status-pill{
      display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;
      background:rgba(95,138,99,.12);color:#4d734f;font-weight:850;font-size:13px;
    }
    .status-pill i{width:8px;height:8px;border-radius:50%;background:var(--moss)}
    .preview-wall{
      position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:14px;
    }
    .cover-main{
      min-height:278px;border-radius:24px;padding:18px;
      background:
        linear-gradient(180deg,rgba(43,41,36,.08),rgba(43,41,36,.64)),
        linear-gradient(135deg,#caa06a,#4a3c2d);
      display:flex;flex-direction:column;justify-content:space-between;color:#fff8ec;
      overflow:hidden;position:relative;
    }
    .cover-main::after{
      content:"";position:absolute;width:170px;height:170px;border-radius:50%;
      background:rgba(255,255,255,.12);right:-55px;top:-55px;
    }
    .cover-main .tag-row{display:flex;gap:7px;flex-wrap:wrap;position:relative}
    .media-tag{
      display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;
      background:rgba(255,250,242,.16);border:1px solid rgba(255,255,255,.2);
      font-size:12px;font-weight:800;backdrop-filter:blur(8px);
    }
    .cover-main h3{position:relative;color:#fff8ec;font-size:25px;margin-bottom:8px}
    .cover-main p{position:relative;color:rgba(255,248,236,.78);font-size:14px}
    .mini-stack{display:grid;gap:14px}
    .mini-card{
      border-radius:20px;padding:15px;background:rgba(255,250,242,.72);
      border:1px solid rgba(228,215,196,.9);
      min-height:132px;display:flex;flex-direction:column;justify-content:space-between;
      transition:all .22s var(--ease);
    }
    .mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);background:#fff}
    .mini-card strong{font-size:17px;line-height:1.25}
    .mini-card small{color:var(--muted);font-weight:700}
    .progress{height:8px;border-radius:999px;background:#eadcc7;overflow:hidden;margin-top:14px}
    .progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--amber),var(--moss))}
    .metrics{padding:28px 0 22px}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .metric-card{
      padding:20px;border-radius:22px;background:rgba(255,250,242,.78);
      border:1px solid rgba(228,215,196,.92);box-shadow:var(--shadow-sm);
      transition:all .22s var(--ease);
    }
    .metric-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
    .metric-num{font-size:34px;line-height:1;font-weight:950;letter-spacing:-.04em;color:#2b2924}
    .metric-num em{font-style:normal;color:var(--amber);font-size:22px}
    .metric-label{margin-top:9px;color:var(--muted);font-weight:720}
    .metric-line{margin-top:16px;height:6px;border-radius:999px;background:#eadcc7;overflow:hidden}
    .metric-line span{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,var(--copper),var(--amber-2))}
    .category-strip{
      display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
    }
    .category-entry{
      position:relative;overflow:hidden;min-height:210px;padding:26px;border-radius:28px;
      background:linear-gradient(135deg,#fffaf2,#efe0ca);
      border:1px solid rgba(228,215,196,.95);
      box-shadow:var(--shadow-sm);
      transition:all .24s var(--ease);
    }
    .category-entry:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
    .category-entry::after{
      content:"";position:absolute;right:-34px;bottom:-48px;width:170px;height:170px;border-radius:50%;
      background:radial-gradient(circle,rgba(201,135,43,.2),transparent 68%);
    }
    .category-entry .index{font-size:13px;font-weight:900;color:var(--copper);margin-bottom:14px}
    .category-entry h3{font-size:27px;margin-bottom:12px}
    .category-entry p{max-width:520px}
    .entry-action{margin-top:22px;color:var(--copper);font-weight:900;display:inline-flex;align-items:center;gap:8px}
    .service-matrix{
      display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-template-rows:auto auto;gap:18px;
    }
    .service-card{
      border:1px solid rgba(228,215,196,.94);background:rgba(255,250,242,.76);
      border-radius:26px;padding:24px;box-shadow:var(--shadow-sm);
      transition:all .24s var(--ease);position:relative;overflow:hidden;
    }
    .service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:#fffaf2}
    .service-card.featured{
      grid-row:span 2;min-height:430px;background:
        linear-gradient(160deg,#2b2924 0%,#5d432a 64%,#8d5b2c 100%);
      color:#fff8ec;border-color:rgba(255,255,255,.12);
    }
    .service-card.featured p,.service-card.featured li{color:rgba(255,248,236,.74)}
    .service-card.featured::after{
      content:"";position:absolute;width:260px;height:260px;border-radius:50%;
      right:-80px;top:-70px;background:rgba(240,180,90,.16);
    }
    .iconbox{
      width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
      background:#f0e2cf;color:var(--copper);font-weight:900;margin-bottom:18px;
    }
    .featured .iconbox{background:rgba(255,250,242,.14);color:#ffd28a;border:1px solid rgba(255,255,255,.14)}
    .service-card h3{margin-bottom:10px;position:relative}
    .service-card ul{margin-top:22px;display:grid;gap:12px;list-style:none;position:relative}
    .service-card li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
    .service-card li::before{
      content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);margin-top:10px;flex:0 0 auto;
    }
    .service-card .more{margin-top:20px;color:var(--copper);font-weight:900;display:inline-flex;gap:8px;align-items:center}
    .featured .more{color:#ffd28a}
    .compare-wrap{
      display:grid;grid-template-columns:.88fr 1.12fr;gap:22px;align-items:stretch;
    }
    .compare-panel{
      border-radius:30px;padding:28px;border:1px solid rgba(228,215,196,.95);
      background:rgba(255,250,242,.76);box-shadow:var(--shadow-sm);
    }
    .compare-panel.dark{
      background:linear-gradient(145deg,#302d27,#4c3928);
      color:#fff8ec;border-color:rgba(255,255,255,.12);
    }
    .compare-panel.dark p{color:rgba(255,248,236,.72)}
    .before-after{display:grid;gap:14px;margin-top:24px}
    .ba-row{
      display:grid;grid-template-columns:96px 1fr 62px;align-items:center;gap:12px;
      padding:13px;border-radius:16px;background:rgba(255,250,242,.72);border:1px solid rgba(228,215,196,.82);
    }
    .ba-row strong{font-size:14px}
    .ba-bar{height:10px;border-radius:999px;background:#eadcc7;overflow:hidden}
    .ba-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--copper),var(--amber-2))}
    .ba-row b{color:var(--copper);font-size:14px}
    .result-list{display:grid;gap:14px;margin-top:22px}
    .result-item{
      display:flex;gap:14px;padding:16px;border-radius:18px;background:rgba(255,250,242,.1);
      border:1px solid rgba(255,255,255,.12);
    }
    .result-item .check{
      width:28px;height:28px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
      background:rgba(95,138,99,.22);color:#c8edc9;font-weight:900;
    }
    .workflow{
      display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    }
    .step-card{
      padding:22px;border-radius:24px;background:rgba(255,250,242,.74);
      border:1px solid rgba(228,215,196,.95);position:relative;overflow:hidden;
      transition:all .22s var(--ease);
    }
    .step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
    .step-no{
      width:38px;height:38px;border-radius:14px;background:#2b2924;color:#fff4df;
      display:grid;place-items:center;font-weight:950;margin-bottom:16px;
    }
    .step-card h3{font-size:20px;margin-bottom:9px}
    .insight-band{
      border-radius:34px;padding:28px;background:
        linear-gradient(135deg,#fffaf2 0%,#eadbc4 100%);
      border:1px solid rgba(228,215,196,.96);
      box-shadow:var(--shadow-sm);
      display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;
    }
    .insight{
      padding:20px;border-radius:22px;background:rgba(255,255,255,.38);
      border:1px solid rgba(255,250,242,.58);
    }
    .insight strong{display:block;font-size:22px;margin-bottom:8px}
    .insight span{color:var(--muted);font-size:14px}
    .faq-grid{
      display:grid;grid-template-columns:.78fr 1.22fr;gap:28px;align-items:start;
    }
    .faq-note{
      border-radius:28px;padding:26px;background:#2b2924;color:#fff7e8;position:sticky;top:104px;
      box-shadow:var(--shadow-md);
    }
    .faq-note p{color:rgba(255,247,232,.72);margin-top:12px}
    .faq-list{display:grid;gap:12px}
    .faq-item{
      border:1px solid rgba(228,215,196,.95);border-radius:20px;background:rgba(255,250,242,.78);
      overflow:hidden;box-shadow:0 8px 22px rgba(54,43,29,.05);
    }
    .faq-q{
      width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
      padding:19px 20px;background:transparent;color:var(--text);font-weight:850;text-align:left;
    }
    .faq-q span:first-child{font-size:16px}
    .faq-q .plus{
      width:28px;height:28px;border-radius:10px;background:#efe1cf;color:var(--copper);
      display:grid;place-items:center;transition:all .22s var(--ease);flex:0 0 auto;
    }
    .faq-item.active .plus{transform:rotate(45deg);background:var(--amber);color:#fff}
    .faq-a{display:none;padding:0 20px 20px}
    .faq-item.active .faq-a{display:block}
    .faq-a p{font-size:15px}
    .cta{
      padding:0 0 88px;
    }
    .cta-card{
      display:grid;grid-template-columns:1fr .86fr;gap:28px;align-items:center;
      border-radius:36px;padding:34px;background:
        radial-gradient(circle at 8% 12%, rgba(240,180,90,.25), transparent 30%),
        linear-gradient(135deg,#2b2924,#4b3829 72%,#8a5626);
      color:#fff8ec;box-shadow:var(--shadow-md);overflow:hidden;position:relative;
    }
    .cta-card::after{
      content:"";position:absolute;right:-80px;bottom:-110px;width:310px;height:310px;border-radius:50%;
      background:rgba(255,250,242,.08);
    }
    .cta-card h2{color:#fff8ec}
    .cta-card p{color:rgba(255,248,236,.72);margin-top:12px;max-width:640px}
    .cta-benefits{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .cta-benefits span{
      padding:8px 11px;border-radius:999px;background:rgba(255,250,242,.1);
      border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:800;color:#ffe7bd;
    }
    .contact-form{
      position:relative;z-index:1;padding:20px;border-radius:26px;background:rgba(255,250,242,.12);
      border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
      display:grid;gap:12px;
    }
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .field label{display:block;font-size:13px;font-weight:800;color:#ffe7bd;margin-bottom:7px}
    .field input,.field select,.field textarea{
      width:100%;border:1px solid rgba(255,255,255,.18);border-radius:14px;
      background:rgba(255,250,242,.12);color:#fff8ec;padding:12px 13px;outline:0;
      transition:all .22s var(--ease);
    }
    .field input::placeholder,.field textarea::placeholder{color:rgba(255,248,236,.48)}
    .field select option{color:var(--text)}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:rgba(240,180,90,.68);box-shadow:0 0 0 4px rgba(240,180,90,.13);background:rgba(255,250,242,.18);
    }
    .field textarea{min-height:92px;resize:vertical}
    .form-submit{
      width:100%;height:48px;border-radius:15px;background:linear-gradient(135deg,#f0b45a,#c9872b);
      color:#2b2924;font-weight:950;box-shadow:0 14px 28px rgba(0,0,0,.18);
      transition:all .22s var(--ease);
    }
    .form-submit:hover{transform:translateY(-2px);filter:saturate(1.08)}
    .form-tip{font-size:12px;color:rgba(255,248,236,.58);text-align:center}

    .site-footer{
      background:#27241f;color:#fff7e8;padding:54px 0 26px;border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:34px}
    .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
    .footer-brand .brand-mark{box-shadow:none}
    .footer-brand strong{font-size:18px;line-height:1.25}
    .site-footer p{color:rgba(255,247,232,.65);max-width:520px}
    .footer-col h3{font-size:16px;margin-bottom:14px;color:#ffe0ad}
    .footer-links{display:grid;gap:10px}
    .footer-links a,.footer-links span{color:rgba(255,247,232,.68);font-size:14px;transition:color .2s var(--ease)}
    .footer-links a:hover{color:#f0b45a}
    .footer-bottom{
      margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
      display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
      color:rgba(255,247,232,.48);font-size:13px;
    }

    @media (max-width: 1120px){
      .command-search{width:190px}
      .hero-grid,.compare-wrap,.cta-card{grid-template-columns:1fr}
      .service-matrix{grid-template-columns:1fr 1fr}
      .service-card.featured{grid-row:auto;grid-column:span 2;min-height:auto}
      .workflow{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 920px){
      .nav{height:auto;min-height:74px;flex-wrap:wrap;padding:12px 0}
      .nav-links{order:3;width:100%;overflow-x:auto;justify-content:flex-start;border-radius:18px}
      .nav-links::-webkit-scrollbar{display:none}
      .nav-actions{margin-left:auto}
      .command-search{width:210px}
      .metric-grid{grid-template-columns:repeat(2,1fr)}
      .faq-grid{grid-template-columns:1fr}
      .faq-note{position:relative;top:auto}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-grid>div:first-child{grid-column:span 2}
    }
    @media (max-width: 720px){
      .container{width:min(100% - 28px, var(--container))}
      .section{padding:64px 0}
      .section-head{display:block}
      .hero{padding:42px 0 24px}
      .hero-actions .btn{width:100%}
      .trust-note{align-items:flex-start;flex-direction:column}
      .preview-wall{grid-template-columns:1fr}
      .cover-main{min-height:230px}
      .category-strip,.service-matrix,.insight-band{grid-template-columns:1fr}
      .service-card.featured{grid-column:auto}
      .workflow{grid-template-columns:1fr}
      .cta-card{padding:24px;border-radius:28px}
      .form-row{grid-template-columns:1fr}
      .nav-actions .quick{display:none}
      .command-search{width:160px}
      .brand-text small{display:none}
    }
    @media (max-width: 520px){
      .nav{gap:10px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-text strong{font-size:14px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .nav-actions{width:100%;justify-content:space-between}
      .command-search{flex:1;width:auto}
      .nav-actions .btn{height:42px;min-height:42px;padding:0 13px;font-size:14px}
      .metric-grid{grid-template-columns:1fr}
      .ba-row{grid-template-columns:1fr;gap:8px}
      .footer-grid,.footer-grid>div:first-child{grid-template-columns:1fr;grid-column:auto}
      .footer-bottom{display:grid}
    }

/* roulang page: category2 */
:root{
  --bg:#f4efe6;
  --bg-soft:#fbf7f1;
  --surface:#fffaf3;
  --surface-2:#f8f1e7;
  --card:#fffdf9;
  --text:#1f1a17;
  --muted:#6f6258;
  --line:#e6d8c7;
  --line-strong:#d3c1ab;
  --accent:#c67b2f;
  --accent-2:#d89a41;
  --accent-3:#8c5a2c;
  --success:#3f7f63;
  --shadow:0 18px 50px rgba(77,53,30,.08);
  --shadow-soft:0 10px 26px rgba(77,53,30,.06);
  --radius-xl:24px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --container:1280px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:28px;
  --space-6:36px;
  --space-7:48px;
  --space-8:72px;
  --space-9:96px;
  --transition:180ms ease;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(214,152,65,.16), transparent 58%),
    radial-gradient(900px 700px at 100% 0%, rgba(63,127,99,.10), transparent 50%),
    linear-gradient(180deg, #fcf8f1 0%, var(--bg) 100%);
  line-height:1.72;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
::selection{background:rgba(198,123,47,.18)}
.container{
  width:min(calc(100% - 32px), var(--container));
  margin:0 auto;
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background:rgba(251,247,241,.86);
  border-bottom:1px solid rgba(214,200,181,.72);
}
.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg, var(--accent) 0%, #a95f1d 100%);
  box-shadow:0 12px 24px rgba(198,123,47,.22);
  font-weight:800;
  letter-spacing:.04em;
}
.brand-mark span{transform:translateY(-1px)}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-text strong{
  font-size:15px;
  letter-spacing:.01em;
}
.brand-text small{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:6px;
  border:1px solid rgba(214,200,181,.65);
  background:rgba(255,255,255,.55);
  border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.nav-links a{
  position:relative;
  padding:10px 15px;
  border-radius:999px;
  color:#4f443b;
  font-size:14px;
  transition:transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.nav-links a:hover,
.nav-links a:focus-visible{
  background:rgba(198,123,47,.10);
  color:#2b2119;
  transform:translateY(-1px);
  outline:none;
}
.nav-links a.active{
  color:#fff;
  background:linear-gradient(145deg, var(--accent) 0%, #a85d1b 100%);
  box-shadow:0 10px 18px rgba(198,123,47,.18);
}
.nav-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.command-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:320px;
  padding:11px 14px;
  border:1px solid rgba(214,200,181,.8);
  background:#fffdf9;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.command-search:focus-within{
  border-color:rgba(198,123,47,.7);
  box-shadow:0 0 0 4px rgba(198,123,47,.10), var(--shadow-soft);
}
.command-search svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color:var(--accent-3);
}
.command-search input{
  border:0;
  outline:none;
  flex:1;
  min-width:0;
  background:transparent;
  color:var(--text);
}
.command-search input::placeholder{color:#9b8d81}
.kbd{
  color:#7b6c5d;
  font-size:12px;
  padding:4px 8px;
  border-radius:8px;
  background:#f4e9dd;
  border:1px solid #e2d2c0;
}
.quick{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(214,200,181,.82);
  background:linear-gradient(180deg,#fff 0%, #fbf5ec 100%);
  box-shadow:var(--shadow-soft);
  color:var(--accent-3);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.quick:hover,
.quick:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(198,123,47,.55);
  box-shadow:0 14px 28px rgba(77,53,30,.10);
  outline:none;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:14px;
  padding:12px 18px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space:nowrap;
}
.btn:hover,
.btn:focus-visible{
  transform:translateY(-1px);
  outline:none;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(145deg, var(--accent) 0%, #a85d1b 100%);
  box-shadow:0 14px 22px rgba(198,123,47,.22);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  box-shadow:0 18px 30px rgba(198,123,47,.28);
}
.btn-secondary{
  color:#4d3f35;
  background:#fff;
  border-color:rgba(214,200,181,.9);
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  background:#fff8ef;
  border-color:rgba(198,123,47,.42);
}
.btn-ghost{
  color:#5b4c41;
  background:rgba(255,255,255,.68);
  border-color:rgba(214,200,181,.78);
}
main{padding-bottom:var(--space-9)}
.hero{
  padding:72px 0 34px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:28px;
  align-items:stretch;
}
.hero-copy{
  padding:18px 0;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(198,123,47,.12);
  color:var(--accent-3);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}
.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(198,123,47,.15);
}
.hero h1{
  margin:18px 0 14px;
  font-size:clamp(32px, 4vw, 54px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.hero p.lead{
  margin:0;
  max-width:46rem;
  font-size:17px;
  color:var(--muted);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.hero-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
  color:#75675c;
  font-size:13px;
}
.hero-note span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(214,200,181,.78);
}
.hero-panel{
  position:relative;
  overflow:hidden;
  padding:22px;
  border:1px solid rgba(214,200,181,.84);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,241,231,.9) 100%);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(198,123,47,.18) 0%, rgba(198,123,47,0) 70%);
  pointer-events:none;
}
.panel-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.panel-top strong{
  font-size:18px;
}
.panel-top small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.panel-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f5eee4;
  border:1px solid #e2d2c0;
  color:#6f5a49;
  font-size:12px;
  font-weight:700;
}
.panel-status i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(63,127,99,.12);
}
.story-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, #fff 0%, #fff7ec 100%);
  border:1px solid rgba(214,200,181,.8);
  box-shadow:0 10px 24px rgba(77,53,30,.06);
}
.story-card h3{
  margin:0 0 12px;
  font-size:16px;
}
.story-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.story-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#5a4c40;
  font-size:14px;
}
.story-list li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--accent) 0%, #a85d1b 100%);
  box-shadow:0 0 0 4px rgba(198,123,47,.12);
  flex:0 0 auto;
}
.panel-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.mini-stat{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(214,200,181,.82);
}
.mini-stat b{
  display:block;
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.mini-stat span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.chip{
  padding:8px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e4d7c7;
  color:#5d4f44;
  font-size:13px;
}
.section{
  padding:var(--space-8) 0 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}
.section-head h2{
  margin:0;
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.section-head p{
  margin:0;
  max-width:44rem;
  color:var(--muted);
}
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.metric-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,241,231,.92) 100%);
  border:1px solid rgba(214,200,181,.82);
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.metric-card:hover{
  transform:translateY(-2px);
  border-color:rgba(198,123,47,.36);
  box-shadow:0 18px 34px rgba(77,53,30,.10);
}
.metric-value{
  font-size:30px;
  font-weight:800;
  letter-spacing:-.03em;
}
.metric-label{
  margin-top:4px;
  color:#51463d;
  font-size:14px;
  font-weight:700;
}
.metric-desc{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}
.metric-bar{
  height:8px;
  margin-top:16px;
  border-radius:999px;
  background:#efe3d5;
  overflow:hidden;
}
.metric-bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 65%, #9ba06f 100%);
}
.muted-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.muted-strip span{
  font-size:12px;
  color:#77695d;
  padding:6px 10px;
  border-radius:999px;
  background:#f6eee4;
  border:1px solid #e4d6c5;
}
.layout-balance{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:18px;
}
.feature-card,
.side-card,
.compare-card,
.timeline-card,
.form-card,
.faq-card,
.list-card{
  border-radius:var(--radius-xl);
  border:1px solid rgba(214,200,181,.82);
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(251,247,241,.92) 100%);
  box-shadow:var(--shadow-soft);
}
.feature-card{
  padding:24px;
}
.feature-card h3,
.side-card h3,
.compare-card h3,
.timeline-card h3,
.form-card h3,
.faq-card h3,
.list-card h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.18;
}
.feature-card p,
.side-card p,
.compare-card p,
.timeline-card p,
.form-card p,
.faq-card p,
.list-card p{
  margin:0;
  color:var(--muted);
}
.feature-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
}
.feature-main{
  padding:20px;
  border-radius:20px;
  background:linear-gradient(145deg, #fff 0%, #fff6e9 100%);
  border:1px solid rgba(214,200,181,.8);
}
.feature-main .title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.title-row strong{
  font-size:16px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f6ebde;
  color:#7a5730;
  font-size:12px;
  font-weight:700;
}
.feature-main ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.feature-main li{
  display:flex;
  gap:10px;
  color:#594c41;
  font-size:14px;
}
.feature-main li .dot{
  width:9px;
  height:9px;
  margin-top:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(63,127,99,.12);
  flex:0 0 auto;
}
.feature-side{
  display:grid;
  gap:16px;
}
.tiny-card{
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e3d4c2;
}
.tiny-card b{
  display:block;
  margin-bottom:8px;
  font-size:15px;
}
.tiny-card span{
  color:var(--muted);
  font-size:13px;
}
.icon-badge{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--accent-3);
  background:linear-gradient(180deg, #fff 0%, #f7ecdd 100%);
  border:1px solid #e2d1bf;
  margin-bottom:12px;
}
.icon-badge svg{
  width:20px;
  height:20px;
}
.side-card{
  padding:22px;
}
.side-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.side-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px dashed #e5d7c7;
  color:#5c4e43;
  font-size:14px;
}
.side-list li:last-child{border-bottom:0;padding-bottom:0}
.side-list strong{
  color:var(--text);
}
.section-split{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:18px;
}
.timeline-card{
  padding:24px;
}
.timeline{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:14px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, rgba(198,123,47,.55), rgba(152,165,99,.4));
}
.timeline li{
  position:relative;
  padding-left:42px;
  margin-bottom:18px;
}
.timeline li:last-child{margin-bottom:0}
.timeline li::before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:4px solid rgba(198,123,47,.95);
  box-shadow:0 0 0 4px rgba(198,123,47,.12);
}
.timeline li strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
}
.timeline li p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.compare-card{
  padding:24px;
}
.compare-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.compare-box{
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e4d6c6;
}
.compare-box h4{
  margin:0 0 10px;
  font-size:15px;
}
.compare-box ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.compare-box li{
  display:flex;
  gap:8px;
  font-size:13px;
  color:#5c4e43;
}
.compare-box li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:6px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
}
.compare-box.alt{
  background:linear-gradient(180deg, #fffdfb 0%, #fff5e7 100%);
}
.list-card{
  padding:24px;
}
.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.tag-cloud .tag{
  background:#fff;
  border:1px solid #e3d5c3;
  color:#645145;
}
.rank-list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.rank-list li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #eadccc;
}
.rank-list li:last-child{border-bottom:0;padding-bottom:0}
.rank-no{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
  background:rgba(198,123,47,.12);
  color:var(--accent-3);
}
.rank-list b{
  display:block;
  font-size:14px;
}
.rank-list span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.faq-card{
  padding:24px;
}
.faq-list{
  margin-top:16px;
  display:grid;
  gap:12px;
}
details.faq-item{
  border-radius:18px;
  border:1px solid #e3d5c4;
  background:#fff;
  overflow:hidden;
}
details.faq-item[open]{
  border-color:rgba(198,123,47,.42);
  box-shadow:0 10px 24px rgba(77,53,30,.06);
}
details.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:700;
  color:#3b3129;
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary span{
  color:var(--accent-3);
  flex:1;
}
details.faq-item summary::after{
  content:"+";
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f6e9d8;
  color:#7f5b33;
  transition:transform var(--transition), background var(--transition);
  flex:0 0 auto;
}
details.faq-item[open] summary::after{
  content:"–";
  background:#edd3b7;
}
.faq-answer{
  padding:0 18px 18px;
  color:var(--muted);
  font-size:14px;
}
.cta{
  padding:var(--space-8) 0 0;
}
.cta-panel{
  padding:28px;
  border-radius:calc(var(--radius-xl) + 4px);
  border:1px solid rgba(205,186,164,.95);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(251,242,231,.95) 52%, rgba(247,231,211,.96) 100%);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.cta-panel::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-60px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(198,123,47,.18) 0%, rgba(198,123,47,0) 68%);
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr .92fr;
  gap:22px;
  position:relative;
  z-index:1;
}
.cta-copy h2{
  margin:0 0 10px;
  font-size:clamp(26px, 2.5vw, 36px);
  line-height:1.14;
}
.cta-copy p{
  margin:0;
  color:var(--muted);
  max-width:44rem;
}
.cta-points{
  margin-top:18px;
  display:grid;
  gap:10px;
}
.cta-point{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#55483d;
  font-size:14px;
}
.cta-point i{
  width:18px;
  height:18px;
  margin-top:3px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(63,127,99,.12);
  flex:0 0 auto;
}
.form-card{
  padding:20px;
}
.form-grid{
  display:grid;
  gap:12px;
}
.field{
  display:grid;
  gap:7px;
}
.field label{
  font-size:13px;
  font-weight:700;
  color:#4a3f36;
}
.field input,
.field select,
.field textarea{
  width:100%;
  border-radius:14px;
  border:1px solid #e1d2c1;
  background:#fff;
  color:var(--text);
  padding:12px 14px;
  outline:none;
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.field textarea{
  min-height:110px;
  resize:vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(198,123,47,.72);
  box-shadow:0 0 0 4px rgba(198,123,47,.10);
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:4px;
}
.small-note{
  margin-top:12px;
  color:#7b6c5d;
  font-size:12px;
}
.site-footer{
  margin-top:var(--space-9);
  padding:42px 0 24px;
  background:linear-gradient(180deg, rgba(38,30,24,.96) 0%, rgba(28,22,18,.98) 100%);
  color:#efe6d8;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:24px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.site-footer .brand-mark{
  width:40px;
  height:40px;
  box-shadow:none;
}
.footer-brand strong{
  font-size:15px;
  line-height:1.35;
}
.site-footer p{
  margin:0;
  color:#d7c9b8;
  max-width:36rem;
}
.footer-col h3{
  margin:0 0 14px;
  font-size:16px;
}
.footer-links{
  display:grid;
  gap:10px;
}
.footer-links a,
.footer-links span{
  color:#d8cab8;
  font-size:14px;
}
.footer-links a{
  transition:color var(--transition), transform var(--transition);
}
.footer-links a:hover,
.footer-links a:focus-visible{
  color:#fff;
  transform:translateX(2px);
  outline:none;
}
.footer-bottom{
  margin-top:28px;
  padding-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(233,216,194,.14);
  color:#bdaa96;
  font-size:13px;
}
.focus-ring:focus-visible{
  outline:3px solid rgba(198,123,47,.22);
  outline-offset:2px;
}
@media (max-width: 1180px){
  .command-search{min-width:260px}
  .hero-grid,
  .layout-balance,
  .section-split,
  .cta-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 980px){
  .nav{
    flex-wrap:wrap;
    padding:12px 0;
  }
  .nav-links{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow:auto;
    padding-bottom:8px;
  }
  .nav-actions{
    margin-left:auto;
  }
  .hero{
    padding-top:40px;
  }
  .feature-grid{
    grid-template-columns:1fr;
  }
  .compare-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .container{width:min(calc(100% - 24px), var(--container))}
  .nav-actions{
    width:100%;
    justify-content:space-between;
  }
  .command-search{
    flex:1;
    min-width:0;
  }
  .kbd{display:none}
  .metrics-grid{
    grid-template-columns:1fr;
  }
  .panel-grid{
    grid-template-columns:1fr;
  }
  .section{
    padding-top:64px;
  }
  .hero h1{
    font-size:clamp(30px, 8vw, 42px);
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-actions,
  .form-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .btn{
    width:100%;
  }
}
@media (max-width: 520px){
  .brand-text strong{font-size:14px}
  .brand-text small{font-size:11px}
  .nav-links a{
    padding:9px 12px;
    font-size:13px;
  }
  .hero-panel,
  .feature-card,
  .side-card,
  .compare-card,
  .timeline-card,
  .form-card,
  .faq-card,
  .list-card,
  .cta-panel{
    padding:18px;
    border-radius:18px;
  }
  .story-card,
  .metric-card,
  .tiny-card,
  .compare-box{
    border-radius:16px;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* roulang page: category1 */
:root{
  --bg:#f4efe6;
  --bg-soft:#fbf8f2;
  --panel:#fffaf3;
  --panel-2:#f7f1e7;
  --panel-3:#ece3d4;
  --text:#1f1c17;
  --muted:#6f675c;
  --line:#e4d8c7;
  --line-strong:#d4c2ab;
  --accent:#b77927;
  --accent-2:#d69a3e;
  --accent-3:#8a5e2a;
  --success:#4d8a64;
  --shadow:0 18px 50px rgba(86, 63, 28, .10);
  --shadow-soft:0 10px 24px rgba(86, 63, 28, .08);
  --radius-xl:24px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
  --container:1280px;
  --gap:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(215, 160, 75, .14), transparent 26%),
    radial-gradient(circle at top right, rgba(77, 138, 100, .08), transparent 22%),
    linear-gradient(180deg, #f7f2ea 0%, #f4efe6 42%, #f2ebdf 100%);
  line-height:1.72;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.22;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.04) 45%, rgba(0,0,0,0));
}

a{color:inherit;text-decoration:none;transition:.24s ease}
img{max-width:100%;display:block}
button,input,select,textarea{
  font:inherit;
}
button{
  cursor:pointer;
  border:0;
  background:none;
}
::selection{background:rgba(183,121,39,.18);color:var(--text)}
:focus-visible{
  outline:3px solid rgba(183,121,39,.28);
  outline-offset:2px;
}

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

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(248,243,235,.82);
  border-bottom:1px solid rgba(224,210,190,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.nav{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand-mark{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:
    linear-gradient(145deg, #f1c05f, #b77927 72%),
    linear-gradient(180deg, #d69a3e, #9a6221);
  box-shadow:0 12px 24px rgba(183,121,39,.24);
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.26);
}
.brand-mark span{
  position:relative;
  z-index:1;
  font-weight:800;
  font-size:18px;
  letter-spacing:.08em;
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.brand-text strong{
  font-size:15px;
  line-height:1.2;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-text small{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.05em;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid rgba(223,210,191,.8);
  border-radius:999px;
  background:rgba(255,255,255,.5);
  box-shadow:var(--shadow-soft);
}
.nav-links a{
  padding:10px 16px;
  border-radius:999px;
  color:var(--muted);
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}
.nav-links a:hover{
  background:rgba(183,121,39,.09);
  color:var(--text);
}
.nav-links a.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #cf8d2e 60%, #a96c20);
  box-shadow:0 10px 22px rgba(183,121,39,.24);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.command-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:310px;
  padding:11px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--shadow-soft);
  transition:.24s ease;
}
.command-search:hover{
  border-color:var(--line-strong);
  transform:translateY(-1px);
}
.command-search:focus-within{
  border-color:rgba(183,121,39,.55);
  box-shadow:0 0 0 4px rgba(183,121,39,.12), var(--shadow-soft);
}
.command-search svg{
  width:18px;
  height:18px;
  color:var(--accent);
  flex:0 0 auto;
}
.command-search input{
  border:0;
  outline:none;
  width:100%;
  background:transparent;
  color:var(--text);
  min-width:0;
}
.command-search input::placeholder{
  color:#938877;
}
.kbd{
  padding:5px 8px;
  border-radius:8px;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  line-height:1;
  flex:0 0 auto;
}
.quick{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  color:var(--accent-3);
  box-shadow:var(--shadow-soft);
}
.quick:hover{
  transform:translateY(-1px);
  border-color:rgba(183,121,39,.45);
  color:var(--accent);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 18px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.01em;
  transition:.24s ease;
  border:1px solid transparent;
}
.btn:hover{
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #cf8d2e 64%, #9f6420);
  box-shadow:0 14px 24px rgba(183,121,39,.22);
}
.btn-primary:hover{
  box-shadow:0 16px 28px rgba(183,121,39,.28);
}
.btn-secondary{
  background:rgba(255,255,255,.78);
  border-color:var(--line);
  color:var(--text);
}
.btn-secondary:hover{
  border-color:rgba(183,121,39,.35);
  background:#fff;
}

.page{
  padding:28px 0 0;
}
.hero{
  padding:36px 0 24px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:28px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(183,121,39,.10);
  border:1px solid rgba(183,121,39,.16);
  color:var(--accent-3);
  font-size:13px;
  font-weight:700;
  margin-bottom:16px;
}
.eyebrow .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(77,138,100,.14);
}
.hero h1{
  margin:0;
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.hero p{
  margin:18px 0 0;
  max-width:58ch;
  color:var(--muted);
  font-size:16px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.hero-note{
  margin-top:14px;
  color:#7d7262;
  font-size:13px;
}
.hero-visual{
  position:relative;
  padding:18px;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,248,242,.92)),
    linear-gradient(135deg, rgba(215,160,75,.10), rgba(77,138,100,.06));
  border:1px solid rgba(223,210,191,.82);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:auto -10% -30% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,154,62,.22), rgba(214,154,62,0) 68%);
}
.hero-stack{
  display:grid;
  gap:14px;
}
.preview-panel{
  border-radius:22px;
  border:1px solid rgba(223,210,191,.9);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,241,232,.95));
  padding:16px;
  position:relative;
  overflow:hidden;
}
.preview-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.preview-title strong{
  font-size:15px;
}
.preview-title span{
  color:var(--muted);
  font-size:12px;
}
.visual-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12px;
}
.visual-card{
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(183,121,39,.95), rgba(214,154,62,.92));
  color:#fff;
  padding:18px;
  min-height:168px;
  box-shadow:0 18px 28px rgba(183,121,39,.20);
}
.visual-card h3{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.visual-card p{
  margin:10px 0 0;
  color:rgba(255,255,255,.88);
  font-size:13px;
}
.visual-mini{
  display:grid;
  gap:12px;
}
.mini-box{
  border-radius:18px;
  padding:14px;
  background:var(--panel);
  border:1px solid rgba(223,210,191,.9);
  min-height:78px;
  box-shadow:0 10px 18px rgba(86, 63, 28, .05);
}
.mini-box .label{
  color:var(--muted);
  font-size:12px;
}
.mini-box strong{
  display:block;
  margin-top:8px;
  font-size:22px;
  color:var(--text);
}
.mini-box em{
  display:block;
  margin-top:6px;
  color:var(--success);
  font-style:normal;
  font-size:12px;
}
.progress{
  margin-top:10px;
  height:7px;
  border-radius:999px;
  background:#eadfcd;
  overflow:hidden;
}
.progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), #d89d42, #8cb08d);
}
.visual-flow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.flow-chip{
  padding:12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(223,210,191,.92);
  text-align:center;
}
.flow-chip strong{
  display:block;
  font-size:17px;
}
.flow-chip span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.section{
  padding:72px 0 0;
  position:relative;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.section-head h2{
  margin:0;
  font-size:clamp(26px, 3vw, 34px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.section-head p{
  margin:0;
  max-width:60ch;
  color:var(--muted);
  font-size:14px;
}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.metric-card{
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,236,.92));
  border:1px solid rgba(223,210,191,.92);
  box-shadow:var(--shadow-soft);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.metric-card::after{
  content:"";
  position:absolute;
  right:-24px;
  top:-24px;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(183,121,39,.12), rgba(183,121,39,0) 68%);
}
.metric-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.metric-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(183,121,39,.10);
  color:var(--accent);
}
.metric-value{
  display:block;
  margin-top:18px;
  font-size:34px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
}
.metric-label{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
}
.metric-foot{
  margin-top:10px;
  color:var(--success);
  font-size:12px;
  font-weight:700;
}

.browse-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.filter-panel{
  position:sticky;
  top:102px;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,234,.96));
  border:1px solid rgba(223,210,191,.95);
  box-shadow:var(--shadow-soft);
  padding:18px;
}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.panel-title strong{
  font-size:18px;
}
.panel-title span{
  color:var(--muted);
  font-size:12px;
}
.filter-group + .filter-group{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(225,214,197,.95);
}
.filter-group h3{
  margin:0 0 12px;
  font-size:15px;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
.chip:hover{
  border-color:rgba(183,121,39,.4);
  color:var(--text);
  transform:translateY(-1px);
}
.chip.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #d89d42);
  border-color:transparent;
}
.checklist{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:14px;
}
.checklist li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(77,138,100,.10);
  flex:0 0 auto;
}
.side-note{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:rgba(183,121,39,.08);
  border:1px solid rgba(183,121,39,.14);
  color:#7b5b28;
  font-size:13px;
}

.content-feed{
  display:grid;
  gap:16px;
}
.featured-card{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:18px;
  padding:20px;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,242,234,.96));
  border:1px solid rgba(223,210,191,.95);
  box-shadow:var(--shadow);
}
.featured-copy h3{
  margin:10px 0 10px;
  font-size:28px;
  line-height:1.16;
}
.featured-copy p{
  margin:0;
  color:var(--muted);
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.tag{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(183,121,39,.08);
  border:1px solid rgba(183,121,39,.15);
  color:#8a5e2a;
  font-size:12px;
  font-weight:700;
}
.featured-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.preview-wall{
  border-radius:22px;
  background:
    linear-gradient(160deg, rgba(31,28,23,.96), rgba(70,52,26,.96));
  color:#fff;
  padding:18px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.preview-wall::before,
.preview-wall::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,154,62,.28), rgba(214,154,62,0) 66%);
}
.preview-wall::before{
  width:180px;height:180px;right:-54px;top:-58px;
}
.preview-wall::after{
  width:220px;height:220px;left:-84px;bottom:-90px;
}
.preview-lines{
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
}
.preview-line{
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.preview-line.wide{width:92%}
.preview-line.mid{width:76%}
.preview-line.small{width:60%}
.preview-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  position:relative;
  z-index:1;
  margin-top:18px;
}
.preview-stat{
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:12px 10px;
}
.preview-stat strong{
  display:block;
  font-size:20px;
}
.preview-stat span{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.72);
  font-size:12px;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.content-card{
  border-radius:var(--radius-lg);
  border:1px solid rgba(223,210,191,.92);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,244,236,.95));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:.24s ease;
}
.content-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(183,121,39,.32);
}
.content-card .thumb{
  height:172px;
  background:
    linear-gradient(135deg, rgba(31,28,23,.92), rgba(183,121,39,.70)),
    radial-gradient(circle at top right, rgba(214,154,62,.66), transparent 55%);
  position:relative;
  overflow:hidden;
}
.content-card .thumb::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
}
.content-card .thumb::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:18px;
  width:72%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:
    0 -18px 0 rgba(255,255,255,.12),
    0 -36px 0 rgba(255,255,255,.08),
    0 -54px 0 rgba(255,255,255,.06);
}
.content-card .body{
  padding:18px;
}
.content-card h4{
  margin:10px 0 8px;
  font-size:19px;
  line-height:1.25;
}
.content-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:14px;
  color:#7b6f5f;
  font-size:12px;
}
.card-meta .dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b6a18b;
}
.card-action{
  margin-top:14px;
  color:var(--accent);
  font-weight:700;
  font-size:13px;
}

.strip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.strip-card{
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,234,.94));
  border:1px solid rgba(223,210,191,.92);
  box-shadow:var(--shadow-soft);
  padding:18px;
}
.strip-card h3{
  margin:0 0 10px;
  font-size:18px;
}
.strip-card .mini-list{
  display:grid;
  gap:10px;
}
.mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.mini-row strong{
  font-size:13px;
}
.mini-row span{
  color:var(--muted);
}
.trend-bars{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.trend-bars .bar{
  display:flex;
  align-items:center;
  gap:10px;
}
.trend-bars .bar label{
  width:72px;
  color:var(--muted);
  font-size:12px;
  flex:0 0 auto;
}
.trend-bars .track{
  flex:1;
  height:10px;
  border-radius:999px;
  background:#e8dece;
  overflow:hidden;
}
.trend-bars .track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), #dca554, #8cb08d);
}
.trend-bars .bar em{
  width:40px;
  text-align:right;
  font-style:normal;
  font-size:12px;
  color:var(--muted);
}

.compare-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.compare-panel{
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,234,.95));
  border:1px solid rgba(223,210,191,.94);
  box-shadow:var(--shadow-soft);
  padding:20px;
}
.compare-panel h3{
  margin:0 0 12px;
  font-size:20px;
}
.compare-panel.good{
  border-color:rgba(77,138,100,.22);
}
.compare-panel.bad{
  border-color:rgba(183,121,39,.15);
}
.compare-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.compare-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:14px;
}
.compare-list li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:7px;
  border-radius:50%;
  flex:0 0 auto;
}
.compare-panel.good li::before{
  background:var(--success);
  box-shadow:0 0 0 4px rgba(77,138,100,.10);
}
.compare-panel.bad li::before{
  background:#c28a34;
  box-shadow:0 0 0 4px rgba(194,138,52,.10);
}
.compare-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(183,121,39,.09);
  color:#82561f;
  font-size:12px;
  font-weight:700;
  margin-bottom:12px;
}

.faq-list{
  display:grid;
  gap:12px;
}
details.faq{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,234,.96));
  border:1px solid rgba(223,210,191,.92);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
details.faq[open]{
  border-color:rgba(183,121,39,.24);
}
details.faq summary{
  list-style:none;
  cursor:pointer;
  padding:18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:700;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary span{
  color:var(--text);
  font-size:16px;
}
details.faq summary em{
  font-style:normal;
  color:var(--accent);
  font-size:18px;
  transition:.24s ease;
}
details.faq[open] summary em{
  transform:rotate(45deg);
}
.faq-body{
  padding:0 18px 18px;
  color:var(--muted);
  font-size:14px;
}
.faq-body p{
  margin:0 0 10px;
}
.faq-body p:last-child{
  margin-bottom:0;
}

.cta-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:16px;
  align-items:start;
}
.cta-panel{
  border-radius:var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(31,28,23,.96), rgba(74,52,22,.96));
  color:#fff;
  padding:24px;
  box-shadow:0 20px 48px rgba(34, 24, 11, .22);
  overflow:hidden;
  position:relative;
}
.cta-panel::before{
  content:"";
  position:absolute;
  inset:auto -70px -90px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,154,62,.24), rgba(214,154,62,0) 68%);
}
.cta-panel h2{
  margin:0;
  font-size:32px;
  line-height:1.15;
}
.cta-panel p{
  margin:12px 0 0;
  max-width:58ch;
  color:rgba(255,255,255,.80);
}
.cta-points{
  margin-top:18px;
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
}
.cta-point{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.88);
  font-size:14px;
}
.cta-point i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f0c56c;
  box-shadow:0 0 0 4px rgba(240,197,108,.14);
  flex:0 0 auto;
}
.form-card{
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,234,.96));
  border:1px solid rgba(223,210,191,.95);
  box-shadow:var(--shadow-soft);
  padding:20px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.field{
  display:grid;
  gap:7px;
}
.field.full{
  grid-column:1 / -1;
}
label{
  font-size:13px;
  color:var(--muted);
}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  color:var(--text);
  transition:.22s ease;
}
input::placeholder,textarea::placeholder{
  color:#a09180;
}
input:hover,select:hover,textarea:hover{
  border-color:var(--line-strong);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(183,121,39,.55);
  box-shadow:0 0 0 4px rgba(183,121,39,.10);
}
textarea{
  min-height:110px;
  resize:vertical;
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.form-note{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
}

.site-footer{
  margin-top:80px;
  padding:36px 0 20px;
  background:
    linear-gradient(180deg, rgba(31,28,23,.98), rgba(41,34,25,.98));
  color:rgba(255,255,255,.88);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .7fr .9fr;
  gap:24px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.site-footer .brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  box-shadow:none;
}
.site-footer .brand-text strong,
.footer-brand strong{
  font-size:15px;
  line-height:1.35;
}
.site-footer p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:14px;
}
.footer-col h3{
  margin:0 0 12px;
  font-size:16px;
}
.footer-links{
  display:grid;
  gap:10px;
}
.footer-links a,
.footer-links span{
  color:rgba(255,255,255,.72);
  font-size:14px;
}
.footer-links a:hover{
  color:#fff;
}
.footer-bottom{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.58);
  font-size:12px;
}

.banner{
  margin-top:6px;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(31,28,23,.95), rgba(89,61,27,.95));
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 44px rgba(39, 28, 14, .20);
  overflow:hidden;
}
.banner-inner{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px;
  align-items:center;
}
.banner-copy strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}
.banner-copy span{
  color:rgba(255,255,255,.76);
  font-size:14px;
}
.banner-kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.banner-kpi{
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.banner-kpi strong{
  display:block;
  font-size:18px;
}
.banner-kpi span{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.70);
  font-size:12px;
}

@media (max-width: 1200px){
  .command-search{min-width:250px}
  .hero-grid,
  .featured-card,
  .cta-layout{
    grid-template-columns:1fr;
  }
  .browse-layout{
    grid-template-columns:1fr;
  }
  .filter-panel{
    position:static;
  }
}

@media (max-width: 1024px){
  .nav{
    flex-wrap:wrap;
    padding:14px 0;
  }
  .nav-links{
    order:3;
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:2px;
  }
  .nav-actions{
    margin-left:auto;
  }
  .metrics-grid,
  .strip-grid,
  .compare-layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .card-grid{
    grid-template-columns:1fr;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-grid > div:first-child{
    grid-column:1 / -1;
  }
}

@media (max-width: 768px){
  .container{
    width:min(var(--container), calc(100% - 24px));
  }
  .site-header{
    position:sticky;
  }
  .nav-actions{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .command-search{
    min-width:0;
    width:100%;
    order:1;
  }
  .quick{
    order:2;
  }
  .btn{
    height:40px;
    padding:0 14px;
  }
  .hero{
    padding-top:22px;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .banner-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .metrics-grid,
  .strip-grid,
  .compare-layout,
  .form-grid,
  .footer-grid,
  .visual-grid{
    grid-template-columns:1fr;
  }
  .visual-flow,
  .preview-stats{
    grid-template-columns:1fr;
  }
  .section{
    padding-top:56px;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 520px){
  .nav{
    gap:12px;
  }
  .brand-text strong{
    font-size:14px;
  }
  .nav-links a{
    padding:9px 12px;
    font-size:13px;
  }
  .hero h1{
    font-size:clamp(30px, 10vw, 38px);
  }
  .hero p,
  .section-head p{
    font-size:14px;
  }
  .hero-visual,
  .feature-card,
  .metric-card,
  .strip-card,
  .compare-panel,
  .form-card,
  .filter-panel{
    border-radius:18px;
  }
  .featured-copy h3{
    font-size:24px;
  }
  .content-card .thumb{
    height:148px;
  }
  .content-card h4{
    font-size:17px;
  }
  .banner-inner,
  .preview-panel,
  .filter-panel,
  .cta-panel,
  .form-card,
  .compare-panel{
    padding:16px;
  }
  details.faq summary{
    padding:16px;
  }
  .faq-body{
    padding:0 16px 16px;
  }
}