:root{
    /* Apple-inspired palette */
    --blue:#0071e3;
    --blue-d:#0058b0;
    --red:#ff3b30;
    --pink:#ff2d55;
    --pink-l:#ff6482;
    --ink:#1d1d1f;
    --ink-2:#6e6e73;
    --bg:#fbfbfd;
    --bg-2:#f5f5f7;
    --card:#ffffff;
    --line:rgba(0,0,0,.09);
    --gold:#ff9f0a;
    /* brand aliases (kept so inline styles still resolve) */
    --dy-red:var(--red);
    --dy-cyan:var(--blue);
    --xhs-red:var(--pink);
    --xhs-pink:var(--pink-l);
    --bg-0:var(--bg);
    --bg-1:var(--bg-2);
    --txt:var(--ink);
    --txt-dim:var(--ink-2);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    background:
      radial-gradient(900px 600px at 88% -8%, rgba(0,113,227,.06), transparent 60%),
      radial-gradient(800px 560px at -8% 18%, rgba(255,45,85,.05), transparent 55%),
      linear-gradient(180deg,var(--bg),var(--bg-2) 70%,var(--bg));
    color:var(--ink);
    overflow-x:hidden;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    letter-spacing:.2px;
  }
  /* faint depth blobs (very subtle, Apple-clean) */
  .blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:.10;z-index:0;pointer-events:none}
  .blob.a{width:420px;height:420px;background:var(--blue);top:-120px;right:-80px;animation:drift 18s ease-in-out infinite}
  .blob.b{width:380px;height:380px;background:var(--pink);bottom:6%;left:-120px;animation:drift 22s ease-in-out infinite reverse}
  .blob.c{width:300px;height:300px;background:var(--blue);top:40%;right:10%;opacity:.06;animation:drift 26s ease-in-out infinite}
  @keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}

  .wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px}

  /* HERO */
  header.hero{padding:84px 0 40px;text-align:center}
  .badge{display:inline-flex;gap:8px;align-items:center;padding:7px 16px;border:1px solid var(--line);
    border-radius:999px;font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
  .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,59,48,.15);animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  h1.title{font-size:clamp(30px,5.2vw,56px);font-weight:700;margin:22px 0 16px;letter-spacing:-.5px;line-height:1.12}
  h1.title .grad{background:linear-gradient(100deg,var(--blue),var(--pink) 65%,var(--red));
    -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 7s linear infinite}
  @keyframes shine{to{background-position:200% center}}
  .subtitle{color:var(--ink-2);font-size:clamp(15px,2vw,18px);max-width:680px;margin:0 auto}

  /* section label */
  .section-label{display:flex;align-items:center;gap:12px;margin:64px 0 26px}
  .section-label h2{font-size:22px;font-weight:600;white-space:nowrap;letter-spacing:-.3px}
  .section-label .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
  .section-label .tag{font-size:12px;color:var(--blue);border:1px solid rgba(0,113,227,.25);padding:4px 11px;border-radius:8px;background:rgba(0,113,227,.05)}

  /* pipeline */
  .pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
  @media(max-width:880px){.pipeline{grid-template-columns:1fr}}
  @media(min-width:881px){.stage{margin:0 7px}}
  .stage{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 20px;overflow:hidden;
    box-shadow:0 4px 22px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s,border-color .3s;
    animation:fadeUp .6s ease both}
  .stage:nth-child(1){animation-delay:.05s}
  .stage:nth-child(2){animation-delay:.15s}
  .stage:nth-child(3){animation-delay:.25s}
  .stage:nth-child(4){animation-delay:.35s}
  .stage:nth-child(5){animation-delay:.45s}
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .stage::before{content:"";position:absolute;inset:0;background:radial-gradient(140px 90px at 50% -10%,rgba(0,113,227,.08),transparent 70%);opacity:0;transition:.4s}
  .stage:hover::before{opacity:1}
  .stage:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(0,0,0,.09);border-color:rgba(0,113,227,.3)}
  .stage .num{font-size:12px;color:var(--blue);letter-spacing:2px;font-weight:600}
  .stage .ico{width:46px;height:46px;margin:14px 0;border-radius:13px;display:grid;place-items:center;font-size:22px;
    background:linear-gradient(135deg,rgba(0,113,227,.12),rgba(255,45,85,.10));border:1px solid var(--line)}
  .stage h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.2px}
  .stage p{font-size:13px;color:var(--ink-2);line-height:1.6}

  /* PHONE DEMO */
  .demo-grid{display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:center;margin-top:10px}
  @media(max-width:880px){.demo-grid{grid-template-columns:1fr;justify-items:center}}
  .phone{width:320px;height:640px;border-radius:44px;padding:12px;position:relative;
    background:linear-gradient(180deg,#ffffff,#ecedf0);border:1px solid rgba(0,0,0,.1);
    box-shadow:0 24px 60px rgba(0,0,0,.16), inset 0 0 0 2px rgba(255,255,255,.7);
    overflow:hidden;flex:none}
  .phone .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:22px;
    background:#1d1d1f;border-radius:0 0 16px 16px;z-index:5}
  .screen{width:100%;height:100%;border-radius:32px;background:var(--bg);position:relative;overflow:hidden}
  .screen .statusbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 4px;
    font-size:11px;color:var(--ink-2);position:absolute;top:0;left:0;right:0;z-index:4;font-weight:600}

  /* layers cycle entirely via CSS (no JS) */
  .layer{position:absolute;inset:0;padding:44px 18px 18px;opacity:0;transform:translateX(24px);
    animation:layerCycle 15s infinite}
  .layer[data-layer="0"]{animation-delay:0s}
  .layer[data-layer="1"]{animation-delay:3s}
  .layer[data-layer="2"]{animation-delay:6s}
  .layer[data-layer="3"]{animation-delay:9s}
  .layer[data-layer="4"]{animation-delay:12s}
  @keyframes layerCycle{
    0%{opacity:1;transform:none}
    18%{opacity:1;transform:none}
    20%{opacity:0;transform:translateX(24px)}
    100%{opacity:0;transform:translateX(24px)}
  }
  /* search layer */
  .searchbar{display:flex;align-items:center;gap:8px;background:var(--bg-2);border-radius:20px;padding:11px 14px;border:1px solid var(--line)}
  .searchbar .mag{width:16px;height:16px;border:2px solid var(--red);border-radius:50%;position:relative;flex:none}
  .searchbar .mag::after{content:"";position:absolute;width:7px;height:2px;background:var(--red);bottom:-3px;right:-4px;transform:rotate(45deg)}
  .searchbar .kw{color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;font-weight:500}
  .caret{display:inline-block;width:2px;height:15px;background:var(--red);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite}
  @keyframes blink{50%{opacity:0}}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:#fff}
  .chip.hot{color:var(--red);border-color:rgba(255,59,48,.35);background:rgba(255,59,48,.05)}
  /* feed / video cards */
  .vcard{background:#fff;border-radius:16px;padding:12px;margin-top:14px;border:1px solid var(--line);position:relative;box-shadow:0 2px 10px rgba(0,0,0,.04)}
  .vcard .cover{height:120px;border-radius:12px;background:linear-gradient(135deg,#dfeaff,#ffe3ec);position:relative;overflow:hidden}
  .vcard .play{position:absolute;inset:0;display:grid;place-items:center}
  .vcard .play::before{content:"";width:0;height:0;border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px;opacity:.55}
  .vcard .meta{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:var(--ink-2)}
  .vcard .new{position:absolute;top:8px;left:8px;font-size:10px;background:var(--red);color:#fff;padding:2px 8px;border-radius:6px;font-weight:700}
  .vcard .trend{position:absolute;top:8px;right:8px;font-size:10px;background:rgba(0,113,227,.12);color:var(--blue);padding:2px 8px;border-radius:6px;font-weight:700}
  /* comments */
  .cmt{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.05)}
  .cmt .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#c7c7cc,#e5e5ea);flex:none}
  .cmt .body{font-size:13px}
  .cmt .body .name{color:var(--blue);font-size:11px;font-weight:600}
  .cmt.intent{position:relative;border-radius:12px;padding:10px;margin:6px 0;background:rgba(255,45,85,.05);border:1px solid rgba(255,45,85,.3)}
  .cmt.intent .ai-tag{position:absolute;top:-9px;right:10px;font-size:10px;background:var(--gold);color:#1d1d1f;padding:2px 8px;border-radius:999px;font-weight:800;animation:pulse 1.4s infinite}
  .radar{position:absolute;inset:0;border-radius:12px;pointer-events:none}
  .radar::before{content:"";position:absolute;inset:0;border-radius:12px;border:1px solid rgba(255,45,85,.5);animation:radar 1.6s ease-out infinite}
  @keyframes radar{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.05);opacity:0}}
  /* profile */
  .profile .banner{height:90px;border-radius:14px;background:linear-gradient(135deg,#e3efff,#ffe6ef)}
  .profile .pinfo{display:flex;gap:12px;align-items:center;margin-top:-40px;padding:0 6px}
  .profile .pav{width:56px;height:56px;border-radius:50%;border:3px solid var(--bg);background:linear-gradient(135deg,#ff8fb0,#9a7bff)}
  .profile .pname{font-weight:600;font-size:15px;letter-spacing:-.2px}
  .profile .pdesc{font-size:11px;color:var(--ink-2)}
  .post{margin-top:14px;background:#fff;border-radius:14px;padding:12px;border:1px solid var(--line);position:relative;box-shadow:0 2px 10px rgba(0,0,0,.04)}
  .post .pc{height:90px;border-radius:10px;background:linear-gradient(135deg,#dfeaff,#ffe3ec)}
  .heart{position:absolute;top:40px;right:18px;font-size:30px;opacity:0;transform:scale(.2);
    animation:heartCycle 15s infinite}
  @keyframes heartCycle{
    0%,59%{opacity:0;transform:scale(.2)}
    62%{opacity:1;transform:scale(1.3)}
    70%,78%{opacity:1;transform:scale(1.1)}
    82%,100%{opacity:0;transform:scale(1.1)}
  }
  .me-cmt{margin-top:10px;font-size:12px;background:rgba(0,113,227,.06);border:1px solid rgba(0,113,227,.3);
    border-radius:12px;padding:10px;color:var(--ink);opacity:0;
    animation:cmtCycle 15s infinite}
  @keyframes cmtCycle{
    0%,63%{opacity:0;transform:translateY(8px)}
    66%,78%{opacity:1;transform:none}
    82%,100%{opacity:0;transform:none}
  }
  /* revisit */
  .revisit .note{margin-top:34px;text-align:center;font-size:13px;color:var(--ink-2)}
  .revisit .back{display:inline-block;margin-top:8px;color:var(--red);font-weight:600}
  .product{margin-top:18px;background:linear-gradient(135deg,rgba(0,113,227,.07),rgba(255,45,85,.06));
    border:1px solid rgba(0,113,227,.3);border-radius:18px;padding:18px;text-align:center}
  .product .pname{font-weight:700;font-size:18px;background:linear-gradient(100deg,var(--blue),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
  .product .pprice{margin-top:6px;color:var(--red);font-weight:700}
  .product .pbtn{margin-top:12px;display:inline-block;background:var(--blue);color:#fff;padding:8px 22px;border-radius:999px;font-weight:600;font-size:13px}

  /* caption beside phone */
  .demo-caption h3{font-size:20px;font-weight:600;margin-bottom:6px;letter-spacing:-.3px}
  .demo-caption .step-no{color:var(--blue);font-weight:700;letter-spacing:1px;font-size:13px}
  .demo-caption p{color:var(--ink-2);max-width:520px}
  .demo-caption .progress{display:flex;gap:8px;margin-top:20px}
  .demo-caption .progress span{width:34px;height:4px;border-radius:4px;background:rgba(0,0,0,.1)}
  .demo-caption .progress span.on{background:linear-gradient(90deg,var(--blue),var(--pink));animation:progGlow 15s infinite}
  @keyframes progGlow{0%,18%{opacity:1}20%,100%{opacity:.4}}

  /* LOOP diagram */
  .loop-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:8px}
  @media(max-width:880px){.loop-wrap{grid-template-columns:1fr}}
  .loop-svg{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1}
  .loop-svg svg{width:100%;height:100%;overflow:visible}
  #orbiter{offset-path:circle(150px at 200px 200px);offset-rotate:0deg;animation:travel 6s linear infinite}
  @keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
  #orbit{stroke-dasharray:24 16;animation:march 2s linear infinite}
  @keyframes march{to{stroke-dashoffset:-40}}
  .loop-points{display:flex;flex-direction:column;gap:14px}
  .lp{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
    border-radius:14px;padding:14px;transition:.3s;box-shadow:0 2px 12px rgba(0,0,0,.04)}
  .lp:hover{border-color:rgba(0,113,227,.35);transform:translateX(4px)}
  .lp .k{font-size:12px;color:var(--gold);font-weight:800;white-space:nowrap;background:rgba(255,159,10,.12);padding:2px 8px;border-radius:6px}
  .lp .t{font-size:13px;color:var(--ink-2)}
  .lp .t b{color:var(--ink)}

  /* HOOKS */
  .hooks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px}
  .hook{background:var(--card);border:1px solid rgba(255,45,85,.22);
    border-radius:16px;padding:18px;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)}
  .hook .q{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
  .hook .why{margin-top:8px;font-size:12px;color:var(--ink-2)}
  .hook .typing{position:absolute;bottom:10px;right:12px;font-size:11px;color:var(--blue);opacity:0;animation:typing 2.4s steps(20) infinite;font-weight:600}
  .hook:nth-child(2) .typing{animation-delay:.6s}
  .hook:nth-child(3) .typing{animation-delay:1.2s}
  .hook:nth-child(4) .typing{animation-delay:1.8s}
  @keyframes typing{0%,100%{opacity:.2}50%{opacity:.9}}

  /* principle */
  .principle{margin-top:56px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,.05)}
  .principle h2{font-size:24px;font-weight:700;margin-bottom:12px;letter-spacing:-.4px}
  .principle p{color:var(--ink-2);max-width:760px;margin:0 auto}
  .principle .hl{color:var(--blue);font-weight:700}
  .stats{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px}
  .stat{min-width:140px;padding:14px 18px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line)}
  .stat .n{font-size:30px;font-weight:700;background:linear-gradient(100deg,var(--blue),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.5px}
  .stat .l{font-size:12px;color:var(--ink-2);margin-top:2px}

  footer{text-align:center;color:var(--ink-2);font-size:12px;padding:54px 0 30px;margin-top:54px}
  .scroll-hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink-2);
    z-index:6;background:rgba(255,255,255,.7);padding:6px 14px;border-radius:999px;border:1px solid var(--line);animation:pulse 2s infinite;backdrop-filter:blur(8px)}