:root{
      --bg:#f8ecd9;--paper:#fffdf8;--ink:#241b12;--muted:#786954;--line:#ead4b5;
      --o:#ea7d1f;--d:#b95a00;--t:#007f72;--b:#325ecf;--max:1240px;--sh:0 18px 36px rgba(98,58,14,.16);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);
      background:
        radial-gradient(circle at 8% -10%, rgba(234,125,31,.26), transparent 35%),
        radial-gradient(circle at 100% 10%, rgba(0,127,114,.2), transparent 30%),
        linear-gradient(180deg,#fffdf8 0%,var(--bg) 58%,#f7e5cc 100%);
      min-height:100vh;overflow-x:hidden;
    }
    .top-progress{position:fixed;top:0;left:0;width:0;height:3px;z-index:2000;background:linear-gradient(90deg,var(--o),#f2b66f,var(--t),var(--b));box-shadow:0 0 12px rgba(234,125,31,.45)}
    .cursor{position:fixed;width:170px;height:170px;border-radius:50%;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(circle,rgba(234,125,31,.25),rgba(234,125,31,0) 70%);transform:translate(-50%,-50%);opacity:0;z-index:1}
    .container{width:min(var(--max),calc(100% - 32px));margin:0 auto;position:relative;z-index:2}
    .header{position:sticky;top:0;z-index:1200;backdrop-filter:blur(10px);background:rgba(255,249,239,.84);border-bottom:1px solid rgba(234,125,31,.2)}
    .header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
    .brand img{width:46px;height:46px;border-radius:14px;box-shadow:0 10px 18px rgba(185,90,0,.25)}
    .brand strong{display:block;font-size:20px;line-height:1}
    .brand span{display:block;margin-top:2px;font-size:11px;color:var(--muted);letter-spacing:1px}
    .nav{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:999px;background:rgba(255,243,227,.8);padding:7px 14px}
    .nav a{position:relative;text-decoration:none;color:#695848;font-size:13px;font-weight:700;padding:4px 2px}
    .nav a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);transition:transform .25s;background:linear-gradient(90deg,var(--o),#f2be81)}
    .nav a.active:after,.nav a:hover:after{transform:scaleX(1)}
    .menu{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#745339;font-size:18px}

    .hero{padding:92px 0 46px}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
    .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
    .chip{border:1px solid #edd6b7;border-radius:999px;background:#fff1dd;color:#8e561d;font-size:12px;font-weight:800;padding:6px 10px;animation:chip 2.8s ease-in-out infinite}
    .chip:nth-child(2){animation-delay:-.8s}.chip:nth-child(3){animation-delay:-1.5s}
    @keyframes chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
    .hero h1{font-size:clamp(44px,6.8vw,106px);line-height:.9;letter-spacing:-1.2px;margin-bottom:12px;color:#3f2b16}
    .hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--d),var(--o),#f1b66a,var(--t));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .hero p{color:#7d6c56;max-width:620px;line-height:1.9;font-size:16px;margin-bottom:20px}
    .actions{display:flex;flex-wrap:wrap;gap:12px}
    .btn{min-height:46px;padding:0 20px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
    .btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(108,64,16,.2)}
    .btn.main{background:linear-gradient(120deg,var(--o),#f3ac52);color:#fff}
    .btn.alt{background:#fff;border:1px solid #efd8b8;color:#88531a}
    .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);animation:ripple .56s linear}
    @keyframes ripple{to{transform:scale(4);opacity:0}}

    .collage{position:relative;min-height:500px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(155deg,#fff,#fff7eb);overflow:hidden;box-shadow:var(--sh)}
    .blob{position:absolute;border-radius:50%;filter:blur(24px);opacity:.34;animation:blob 10s ease-in-out infinite}
    .blob.a{width:220px;height:220px;left:-40px;top:-34px;background:rgba(234,125,31,.58)}
    .blob.b{width:230px;height:230px;right:-45px;bottom:-40px;background:rgba(0,127,114,.44);animation-delay:-3s}
    @keyframes blob{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-20px)}}
    .note{position:absolute;border:1px solid #f1dfc8;border-radius:18px;background:#fff;padding:12px;box-shadow:0 12px 24px rgba(102,60,16,.14);transform:rotate(var(--r));transition:transform .3s}
    .note:hover{transform:rotate(0) translateY(-4px)}
    .note h3{font-size:15px;color:#5f3d17;margin-bottom:6px}
    .note p{font-size:12px;color:#7d6d58;line-height:1.66}
    .note.a{--r:-5deg;left:7%;top:12%;width:48%}
    .note.b{--r:4deg;right:6%;top:35%;width:44%}
    .note.c{--r:-2deg;left:23%;bottom:7%;width:53%}

    .strip{margin-top:8px;border-top:1px dashed #edd7bb;border-bottom:1px dashed #edd7bb;background:#fff3e3;overflow:hidden}
    .strip-track{display:flex;gap:32px;width:max-content;padding:11px 0;animation:strip 23s linear infinite;color:#835221;font-size:13px;font-weight:800}
    @keyframes strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    section{padding:76px 0}
    .head{text-align:center;margin-bottom:24px}
    .head h2{font-size:clamp(32px,4vw,52px);color:#4c3417;margin-bottom:8px}
    .head p{max-width:740px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.84}

    .lab{display:grid;grid-template-columns:270px 1fr;gap:16px}
    .console{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 24px rgba(96,60,18,.1);padding:15px;display:grid;align-content:start;gap:10px}
    .console h3{font-size:18px;color:#5f3d17}.console p{font-size:13px;color:#7f6f5b;line-height:1.72}
    .sw{border:1px solid #f0ddc4;border-radius:12px;background:#fffaf3;color:#6f5a45;font-size:13px;font-weight:700;text-align:left;padding:10px 12px;cursor:pointer;transition:.2s}
    .sw:hover{transform:translateX(3px);border-color:#e7ad6e;background:#fff1e0}
    .sw.active{border-color:#e6a463;background:linear-gradient(110deg,#fff2e0,#ffe9cb);color:#854d13}

    .stage{position:relative;min-height:540px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(155deg,#fff,#fff7eb);overflow:hidden;box-shadow:var(--sh)}
    .pv{position:absolute;inset:36px 26px;border-radius:17px;overflow:hidden;border:1px solid #f0dcc1;background:#fff;box-shadow:0 14px 28px rgba(102,60,16,.16);transition:transform .58s cubic-bezier(.2,.8,.2,1),opacity .58s,filter .58s;opacity:.56;filter:saturate(.75);pointer-events:none}
    .pv[data-pos="0"]{transform:translate(0,0) rotate(-2deg) scale(.9)}
    .pv[data-pos="1"]{transform:translate(16px,18px) rotate(2.5deg) scale(.93)}
    .pv[data-pos="2"]{transform:translate(-12px,28px) rotate(-1deg) scale(.89)}
    .pv.active{transform:translate(0,0) rotate(0) scale(1);opacity:1;filter:saturate(1);z-index:6;pointer-events:auto}
    .pv-top{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #f1dfcb;background:#fff9f1;color:#725d47;font-size:13px;font-weight:700}
    .pv-top b{border-radius:999px;color:#fff;font-size:11px;padding:4px 8px}
    .ta{background:var(--o)}.tb{background:var(--b)}.tc{background:var(--t)}
    .pv-body{position:relative;height:calc(100% - 44px);background:#fdf7eb}
    .load{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#846b51;font-size:13px;background:linear-gradient(150deg,rgba(255,239,218,.8),rgba(255,248,236,.92))}
    .load:after{content:"";position:absolute;width:44px;height:44px;border-radius:50%;border:4px solid #efcfaa;border-top-color:#d97f28;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    .frame{width:1200px;height:760px;transform:scale(.41);transform-origin:top left;border:0;pointer-events:none;display:block}

    .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;grid-template-areas:"a a a a a b b b c c c c" "d d e e e b b b f f g g"}
    .tile{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;box-shadow:0 10px 20px rgba(95,58,16,.08);transition:.24s;will-change:transform}
    .tile:hover{transform:translateY(-4px) rotate(.3deg);box-shadow:0 16px 28px rgba(95,58,16,.14)}
    .tile h3{font-size:18px;color:#5f3c17;margin-bottom:8px}.tile p{font-size:13px;color:#7d6d59;line-height:1.74;min-height:44px}
    .tile a{display:inline-flex;margin-top:9px;text-decoration:none;font-size:12px;font-weight:700;color:#8b541a;border:1px solid #f1dbbc;background:#fff1e0;border-radius:999px;padding:6px 10px}
    .a{grid-area:a}.b{grid-area:b;background:linear-gradient(150deg,#fff3e1,#fff)}.c{grid-area:c}.d{grid-area:d}.e{grid-area:e}.f{grid-area:f}.g{grid-area:g}

    .flow{display:grid;grid-template-columns:300px 1fr;gap:14px}
    .side{position:sticky;top:98px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 22px rgba(94,58,17,.09);padding:16px}
    .side h3{font-size:21px;color:#5b3814;margin-bottom:8px}.side p{font-size:13px;color:#7e6d58;line-height:1.72;margin-bottom:10px}
    .meter{height:8px;border-radius:999px;background:#f7e6d2;overflow:hidden}.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--o),#f2bc7d);transition:width .25s}
    .list{display:grid;gap:12px}
    .item{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;box-shadow:0 10px 20px rgba(95,58,16,.08);transition:.24s}
    .item.active{transform:translateX(6px);border-color:#e8b173;box-shadow:0 16px 28px rgba(95,58,16,.14)}
    .item h4{font-size:17px;color:#5f3e17;margin-bottom:6px}.item p{font-size:13px;color:#7e6d57;line-height:1.74}

    .cta{margin-top:24px;border:1px solid #efd7ba;border-radius:22px;background:radial-gradient(circle at 100% 0,rgba(255,219,172,.45),transparent 42%),linear-gradient(145deg,#fff7eb,#fffefb 72%);box-shadow:var(--sh);padding:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;transform:rotate(-1deg);transition:transform .3s}
    .cta:hover{transform:rotate(0)}
    .cta h3{font-size:30px;color:#4d3314;margin-bottom:6px}.cta p{font-size:14px;color:#7f6d58;line-height:1.72;max-width:680px}

    .footer{margin-top:54px;border-top:1px solid #efd7bb;background:#fff7ec;padding:20px 0}
    .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:#7d6b56;font-size:13px}
    [data-reveal]{opacity:0;transform:translateY(20px) scale(.98);transition:opacity .56s,transform .56s}
    [data-reveal].show{opacity:1;transform:translateY(0) scale(1)}

    @media (max-width:1100px){
      .frame{transform:scale(.35)}
      .bento{grid-template-areas:"a a a a a a b b b b b b" "c c c c d d d d e e e e" "f f f f g g g g . . . ."}
    }
    @media (max-width:900px){
      .menu{display:inline-grid;place-items:center}
      .nav{display:none;position:absolute;top:78px;left:16px;right:16px;border-radius:13px;background:rgba(255,249,241,.97);border:1px solid var(--line);box-shadow:var(--sh);padding:12px;flex-direction:column;align-items:flex-start;gap:8px}
      .nav.open{display:flex}
      .hero-grid,.lab,.flow{grid-template-columns:1fr}
      .hero{padding:60px 0 40px}
      .collage{min-height:390px}
      .note.a{width:60%}.note.b{width:54%}.note.c{width:64%;left:18%}
      .bento{grid-template-columns:1fr;grid-template-areas:none}
      .tile{grid-area:auto!important}
      .frame{transform:scale(.28)}
      .stage{min-height:440px}
      .pv{inset:20px 12px}
      section{padding:56px 0}
      .cta h3{font-size:24px}
    }