18307996893
/
openclaw-voc-skill


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>VOC.market 南昌社媒 VOC 工作坊｜5月28日安装环境，5月29日全天分析实战</title>
  <meta name="description" content="VOC.market 南昌本地社媒 VOC 工作坊：聚焦小红书和抖音，5月28日下午安装 OpenClaw（龙虾）并配置技能，5月29日全天做 VOC 分析实战。">
  <script>
    (() => {
      const isMobile = window.matchMedia("(max-width: 720px), (hover: none), (pointer: coarse)").matches;
      if (!isMobile) return;

      try {
        const key = "socialVocWorkshopLoadMarks";
        const now = Date.now();
        const marks = JSON.parse(sessionStorage.getItem(key) || "[]")
          .filter((time) => now - time < 12000);
        marks.push(now);
        sessionStorage.setItem(key, JSON.stringify(marks.slice(-5)));
        if (marks.length >= 3) {
          document.documentElement.classList.add("mobile-safe-mode");
        }
      } catch (error) {
        document.documentElement.classList.add("mobile-safe-mode");
      }
    })();
  </script>
  <style>
    :root {
      --black: #050505;
      --deep: #0b0d10;
      --panel: rgba(255, 255, 255, 0.075);
      --panel-strong: rgba(255, 255, 255, 0.12);
      --line: rgba(255, 255, 255, 0.16);
      --line-strong: rgba(255, 255, 255, 0.28);
      --white: #ffffff;
      --muted: #a8b0ba;
      --dim: #66707b;
      --cyan: #00f0ff;
      --rose: #ff5252;
      --amber: #f59e0b;
      --green: #3ee084;
      --blue: #6388ff;
      --platinum: #e7edf3;
      --smoke: #101419;
      --radius: 8px;
      --max: 1180px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--black);
    }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      color: var(--white);
      background:
        linear-gradient(180deg, rgba(0, 240, 255, 0.075), transparent 22rem),
        linear-gradient(90deg, rgba(255, 82, 82, 0.055), transparent 30rem),
        linear-gradient(130deg, rgba(255, 255, 255, 0.04), transparent 18%, rgba(255, 255, 255, 0.015) 28%, transparent 45%),
        var(--black);
      font-family: Inter, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 72%);
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0, rgba(255, 255, 255, 0.028) 1px, transparent 1px, transparent 5px);
      opacity: 0.18;
    }

    .intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 1;
      visibility: visible;
      background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent),
        #050505;
      transform: translateZ(0);
      backface-visibility: hidden;
      contain: paint;
      will-change: opacity;
      transition: opacity 0.42s var(--ease), visibility 0.42s var(--ease);
    }

    .intro-overlay.is-hiding {
      opacity: 0;
      visibility: hidden;
    }

    .intro-overlay.is-gone {
      display: none;
    }

    .intro-lockup {
      position: relative;
      display: grid;
      gap: 10px;
      text-align: center;
      transform: translate3d(0, 10px, 0);
      backface-visibility: hidden;
      will-change: opacity, transform;
      animation: introLockup 0.86s var(--ease) forwards;
    }

    .intro-lockup strong {
      font-size: 1.7rem;
      line-height: 1;
      font-weight: 850;
    }

    .intro-lockup span {
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 650;
    }

    .intro-rule {
      width: 220px;
      height: 1px;
      margin: 6px auto 0;
      background: linear-gradient(90deg, transparent, var(--cyan), var(--rose), transparent);
      transform-origin: center;
      animation: introRule 1.1s var(--ease) forwards;
    }

    @keyframes introLockup {
      from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes introRule {
      from { transform: scaleX(0); opacity: 0; }
      to { transform: scaleX(1); opacity: 1; }
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    textarea {
      font: inherit;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

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

    #networkCanvas {
      position: fixed;
      inset: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      opacity: 0.52;
      pointer-events: none;
      transform: translateZ(0);
    }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 80;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--cyan), var(--rose), var(--amber));
      box-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 70;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(180deg, rgba(5, 5, 5, 0.86), rgba(5, 5, 5, 0.62));
      backdrop-filter: blur(22px) saturate(1.35);
      transition: background 0.34s var(--ease), border-color 0.34s ease, box-shadow 0.34s ease;
    }

    .nav.is-scrolled {
      border-color: rgba(255, 255, 255, 0.15);
      background: linear-gradient(180deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.76));
      box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: var(--max);
      min-height: 64px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 750;
    }

    .brand-mark {
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--cyan), var(--rose));
      color: #050505;
      font-weight: 900;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      inset: -40% -80%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
      transform: translateX(-80%) rotate(18deg);
      animation: markSheen 5.4s ease-in-out infinite;
    }

    @keyframes markSheen {
      0%, 65% { transform: translateX(-80%) rotate(18deg); }
      82%, 100% { transform: translateX(90%) rotate(18deg); }
    }

    .brand-name {
      line-height: 1.1;
    }

    .brand-name small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 500;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 20px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .nav-links a {
      transition: color 0.25s ease;
    }

    .nav-links a:hover {
      color: var(--cyan);
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 14px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--cyan), var(--rose));
      color: #050505;
      font-weight: 800;
      box-shadow: 0 0 28px rgba(0, 240, 255, 0.14);
    }

    .hero {
      position: relative;
      display: grid;
      align-items: center;
      min-height: calc(92svh - 64px);
      padding: 58px 20px 48px;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, rgba(5, 5, 5, 0.14), rgba(5, 5, 5, 0.98)),
        url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1800&q=82") center/cover no-repeat;
      opacity: 0.34;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
      opacity: 0.8;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.8fr);
      gap: 54px;
      align-items: center;
      width: min(100%, var(--max));
      margin: 0 auto;
    }

    .hero-copy {
      position: relative;
    }

    .hero-copy::before {
      content: "SOCIAL VOC";
      position: absolute;
      left: -4px;
      top: -58px;
      color: rgba(255, 255, 255, 0.055);
      font-size: 5.8rem;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
      pointer-events: none;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 32px;
      margin-bottom: 18px;
      padding: 5px 10px;
      border: 1px solid rgba(0, 240, 255, 0.38);
      border-radius: var(--radius);
      background: linear-gradient(90deg, rgba(0, 240, 255, 0.13), rgba(255, 255, 255, 0.035));
      color: var(--cyan);
      font-size: 0.86rem;
      font-weight: 750;
    }

    h1 {
      max-width: 780px;
      font-size: 4.55rem;
      line-height: 1.03;
      letter-spacing: 0;
      text-wrap: balance;
      font-weight: 850;
    }

    .gradient-text {
      background: linear-gradient(120deg, var(--cyan), var(--platinum), var(--rose), var(--cyan));
      background-size: 220% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientDrift 7s ease-in-out infinite;
    }

    @keyframes gradientDrift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .hero-lead {
      max-width: 700px;
      margin-top: 20px;
      color: #d2d7de;
      font-size: 1.18rem;
      text-wrap: pretty;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .button {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 11px 16px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      border-radius: var(--radius);
      color: var(--white);
      font-weight: 780;
      cursor: pointer;
      transition: transform 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

    .button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
      transform: translateX(-110%);
      transition: transform 0.58s var(--ease);
    }

    .button:hover::before {
      transform: translateX(110%);
    }

    .button.primary {
      border: 0;
      background: linear-gradient(135deg, var(--cyan), var(--rose));
      color: #050505;
      box-shadow: 0 16px 40px rgba(0, 240, 255, 0.16);
    }

    .button:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 240, 255, 0.56);
      background: rgba(255, 255, 255, 0.09);
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    }

    .button.primary:hover {
      background: linear-gradient(135deg, #72f8ff, #ff7474);
    }

    .hero-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-width: 650px;
      margin-top: 32px;
    }

    .proof-pill {
      position: relative;
      overflow: hidden;
      min-height: 76px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));
      backdrop-filter: blur(14px);
    }

    .proof-pill::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
    }

    .proof-pill strong {
      display: block;
      color: var(--white);
      font-size: 1.12rem;
      line-height: 1.2;
    }

    .proof-pill span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .requirement-strip {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      max-width: 650px;
      margin-top: 16px;
      padding: 14px;
      border: 1px solid rgba(245, 158, 11, 0.36);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.06));
      backdrop-filter: blur(16px);
    }

    .requirement-strip b {
      display: block;
      color: var(--amber);
      font-size: 0.9rem;
    }

    .requirement-strip span {
      display: block;
      color: #dce2e8;
      font-size: 0.92rem;
    }

    .requirement-badge {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(245, 158, 11, 0.4);
      border-radius: var(--radius);
      color: #050505;
      background: var(--amber);
      font-weight: 950;
    }

    .hero-media {
      position: relative;
      isolation: isolate;
      min-height: 520px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: var(--radius);
      overflow: hidden;
      background: #080a0d;
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
      transform-style: preserve-3d;
    }

    .hero-media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) 0 0 / 180% 1px no-repeat,
        linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.16), transparent) 0 0 / 1px 180% no-repeat;
      animation: edgeTrace 7s ease-in-out infinite;
    }

    @keyframes edgeTrace {
      0%, 100% { background-position: -120% 0, 0 -120%; opacity: 0.45; }
      50% { background-position: 120% 0, 0 120%; opacity: 1; }
    }

    .hero-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.28;
      filter: saturate(0.9) contrast(1.1);
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.92)),
        linear-gradient(90deg, rgba(0, 240, 255, 0.16), transparent 46%, rgba(255, 82, 82, 0.16));
      pointer-events: none;
      z-index: 1;
    }

    .signal-console {
      position: absolute;
      inset: 22px;
      z-index: 2;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 14px;
    }

    .console-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 0.82rem;
    }

    .console-dots {
      display: inline-flex;
      gap: 6px;
    }

    .console-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 16px rgba(0, 240, 255, 0.7);
    }

    .console-dots span:nth-child(2) {
      background: var(--rose);
      box-shadow: 0 0 16px rgba(255, 82, 82, 0.7);
    }

    .console-dots span:nth-child(3) {
      background: var(--amber);
      box-shadow: 0 0 16px rgba(245, 158, 11, 0.7);
    }

    .radar {
      position: relative;
      min-height: 310px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: var(--radius);
      overflow: hidden;
      background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.03), rgba(255, 82, 82, 0.08)),
        rgba(255, 255, 255, 0.055);
      background-size: 28px 28px;
    }

    .radar-line {
      position: absolute;
      left: 8%;
      right: 8%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      box-shadow: 0 0 18px rgba(0, 240, 255, 0.8);
      animation: scan 4.6s ease-in-out infinite;
    }

    @keyframes scan {
      0% { top: 12%; opacity: 0; }
      12% { opacity: 1; }
      76% { opacity: 1; }
      100% { top: 86%; opacity: 0; }
    }

    .signal-node {
      position: absolute;
      display: grid;
      place-items: center;
      min-width: 86px;
      min-height: 42px;
      padding: 6px 9px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius);
      background: rgba(5, 5, 5, 0.6);
      color: var(--white);
      font-size: 0.82rem;
      font-weight: 750;
      backdrop-filter: blur(10px);
      animation: floatCard 5.8s ease-in-out infinite;
    }

    .signal-node small {
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 500;
    }

    .signal-node:nth-child(2) {
      top: 15%;
      left: 8%;
      border-color: rgba(0, 240, 255, 0.38);
    }

    .signal-node:nth-child(3) {
      top: 24%;
      right: 10%;
      border-color: rgba(255, 82, 82, 0.42);
      animation-delay: 0.5s;
    }

    .signal-node:nth-child(4) {
      top: 50%;
      left: 22%;
      border-color: rgba(245, 158, 11, 0.42);
      animation-delay: 1.1s;
    }

    .signal-node:nth-child(5) {
      right: 8%;
      bottom: 18%;
      border-color: rgba(62, 224, 132, 0.4);
      animation-delay: 1.8s;
    }

    @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-9px); }
    }

    .console-bottom {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .meter {
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.07);
    }

    .meter span {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 0.72rem;
    }

    .bar {
      height: 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.11);
      overflow: hidden;
    }

    .bar i {
      display: block;
      width: 72%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--rose));
      animation: barPulse 4s ease-in-out infinite;
    }

    .meter:nth-child(2) .bar i {
      width: 86%;
      background: linear-gradient(90deg, var(--amber), var(--cyan));
      animation-delay: 0.7s;
    }

    .meter:nth-child(3) .bar i {
      width: 64%;
      background: linear-gradient(90deg, var(--green), var(--cyan));
      animation-delay: 1.2s;
    }

    @keyframes barPulse {
      0%, 100% { transform: translateX(-8%); opacity: 0.75; }
      50% { transform: translateX(8%); opacity: 1; }
    }

    .ticker {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.045);
      overflow: hidden;
    }

    .ticker-track {
      display: flex;
      width: max-content;
      animation: marquee 34s linear infinite;
    }

    .ticker-group {
      display: flex;
      gap: 12px;
      padding: 16px 6px;
    }

    .ticker span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 6px 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius);
      color: #dce5ef;
      white-space: nowrap;
      background: rgba(5, 5, 5, 0.45);
      font-size: 0.9rem;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .signal-spine {
      position: relative;
      overflow: hidden;
      padding: 72px 20px 78px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 18%, rgba(255, 255, 255, 0.025) 56%, transparent),
        rgba(255, 255, 255, 0.018);
    }

    .signal-spine::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.35), rgba(255, 82, 82, 0.32), transparent);
    }

    .spine-inner {
      position: relative;
      width: min(100%, var(--max));
      margin: 0 auto;
    }

    .spine-word {
      position: absolute;
      top: -44px;
      right: 0;
      color: rgba(255, 255, 255, 0.045);
      font-size: 7rem;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
      pointer-events: none;
    }

    .spine-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .spine-cell {
      position: relative;
      min-height: 210px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
      backdrop-filter: blur(18px);
      overflow: hidden;
      transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
    }

    .spine-cell::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--rose));
      opacity: 0.68;
    }

    .spine-cell:hover {
      transform: translateY(-6px);
      border-color: rgba(0, 240, 255, 0.38);
    }

    .spine-cell em {
      display: block;
      color: var(--dim);
      font-style: normal;
      font-size: 0.74rem;
      font-weight: 800;
    }

    .spine-cell strong {
      display: block;
      margin-top: 36px;
      color: var(--white);
      font-size: 1.2rem;
      line-height: 1.25;
    }

    .spine-cell span {
      display: block;
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .spine-cell b {
      position: absolute;
      right: 16px;
      bottom: 10px;
      color: rgba(255, 255, 255, 0.065);
      font-size: 4rem;
      line-height: 1;
      font-weight: 900;
    }

    .section {
      position: relative;
      padding: 86px 20px;
    }

    .section::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.35), rgba(255, 82, 82, 0.28), transparent);
      opacity: 0;
      transform: scaleX(0.46);
      transform-origin: center;
      transition: opacity 1s var(--ease), transform 1s var(--ease);
    }

    .section.section-active::before {
      opacity: 1;
      transform: scaleX(1);
    }

    .section.alt {
      background: rgba(255, 255, 255, 0.035);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wrap {
      width: min(100%, var(--max));
      margin: 0 auto;
    }

    .section-head {
      display: grid;
      gap: 12px;
      max-width: 760px;
      margin-bottom: 32px;
    }

    .section-head.center {
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }

    .section-kicker {
      color: var(--cyan);
      font-size: 0.92rem;
      font-weight: 800;
    }

    h2 {
      font-size: 2.8rem;
      line-height: 1.13;
      letter-spacing: 0;
    }

    .sub {
      color: var(--muted);
      font-size: 1.05rem;
    }

    .grid {
      display: grid;
      gap: 14px;
    }

    .grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid.four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .card,
    .slice,
    .timeline-row,
    .deliverable,
    .share-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
        var(--panel);
      backdrop-filter: blur(18px);
      transform: translateZ(0);
    }

    .card::after,
    .timeline-row::after,
    .deliverable::after,
    .share-panel::after {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
      pointer-events: none;
    }

    .card {
      min-height: 100%;
      padding: 20px;
      transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 240, 255, 0.35);
      background: rgba(255, 255, 255, 0.095);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }

    .index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-bottom: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius);
      color: #050505;
      background: var(--cyan);
      font-weight: 900;
    }

    .index.rose {
      background: var(--rose);
    }

    .index.amber {
      background: var(--amber);
    }

    .index.green {
      background: var(--green);
    }

    .card h3 {
      margin-bottom: 8px;
      font-size: 1.16rem;
      line-height: 1.36;
      letter-spacing: 0;
    }

    .card p,
    .card li {
      color: var(--muted);
      font-size: 0.94rem;
    }

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

    .list li {
      position: relative;
      padding-left: 18px;
    }

    .list li::before {
      content: "";
      position: absolute;
      top: 0.72em;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    }

    .skill-wall {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 16px;
      align-items: stretch;
    }

    .slice {
      position: relative;
      overflow: hidden;
      min-height: 360px;
      padding: 24px;
    }

    .slice h3 {
      max-width: 360px;
      font-size: 1.9rem;
      line-height: 1.18;
      letter-spacing: 0;
    }

    .slice p {
      max-width: 380px;
      margin-top: 14px;
      color: var(--muted);
    }

    .skill-rings {
      position: absolute;
      right: 22px;
      bottom: 22px;
      width: 260px;
      height: 260px;
      border: 1px solid rgba(0, 240, 255, 0.32);
      border-radius: 50%;
      animation: rotateSlow 28s linear infinite;
    }

    .skill-rings::before,
    .skill-rings::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 50%;
    }

    .skill-rings::before {
      inset: 38px;
    }

    .skill-rings::after {
      inset: 84px;
      border-color: rgba(255, 82, 82, 0.34);
    }

    .ring-label {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius);
      background: rgba(5, 5, 5, 0.72);
      color: var(--white);
      font-size: 0.82rem;
      animation: rotateBack 28s linear infinite;
    }

    .ring-label.a { top: -15px; left: 82px; }
    .ring-label.b { top: 108px; right: -34px; }
    .ring-label.c { left: -24px; bottom: 52px; }
    .ring-label.d { right: 72px; bottom: -15px; }

    @keyframes rotateSlow {
      to { transform: rotate(360deg); }
    }

    @keyframes rotateBack {
      to { transform: rotate(-360deg); }
    }

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

    .capability {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.055);
      transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
    }

    .capability:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 240, 255, 0.34);
      background: rgba(255, 255, 255, 0.085);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    }

    .capability strong {
      display: block;
      margin-bottom: 8px;
      font-size: 1.02rem;
    }

    .capability span {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .daily-lab {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
      gap: 18px;
      align-items: stretch;
    }

    .daily-copy {
      display: grid;
      align-content: center;
      gap: 18px;
      min-height: 100%;
    }

    .daily-copy .section-head {
      margin-bottom: 0;
    }

    .daily-points {
      display: grid;
      gap: 10px;
    }

    .daily-point {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.06);
    }

    .daily-point b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: var(--radius);
      background: rgba(0, 240, 255, 0.16);
      color: var(--cyan);
      font-size: 0.84rem;
    }

    .daily-point strong {
      display: block;
      margin-bottom: 4px;
      color: var(--white);
    }

    .daily-point span {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .daily-board {
      position: relative;
      overflow: hidden;
      min-height: 560px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent 32%),
        linear-gradient(135deg, rgba(255, 82, 82, 0.09), transparent 42%),
        rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(18px);
      box-shadow: 0 26px 90px rgba(0, 0, 0, 0.42);
    }

    .daily-board::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), transparent 92%);
      pointer-events: none;
    }

    .board-inner {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .board-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .board-title {
      display: grid;
      gap: 4px;
    }

    .board-title strong {
      font-size: 1.08rem;
    }

    .board-title span,
    .board-status {
      color: var(--muted);
      font-size: 0.82rem;
    }

    .board-status {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 9px;
      border: 1px solid rgba(62, 224, 132, 0.34);
      border-radius: var(--radius);
      color: var(--green);
      background: rgba(62, 224, 132, 0.08);
      white-space: nowrap;
    }

    .pipeline {
      display: grid;
      gap: 10px;
    }

    .pipeline-step {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: var(--radius);
      background: rgba(5, 5, 5, 0.42);
      animation: stepGlow 6s ease-in-out infinite;
    }

    .pipeline-step:nth-child(2) { animation-delay: 0.45s; }
    .pipeline-step:nth-child(3) { animation-delay: 0.9s; }
    .pipeline-step:nth-child(4) { animation-delay: 1.35s; }
    .pipeline-step:nth-child(5) { animation-delay: 1.8s; }

    @keyframes stepGlow {
      0%, 100% { border-color: rgba(255, 255, 255, 0.13); }
      50% { border-color: rgba(0, 240, 255, 0.34); }
    }

    .pipeline-step code {
      color: var(--cyan);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.78rem;
    }

    .pipeline-step strong {
      display: block;
      margin-bottom: 2px;
      font-size: 0.95rem;
    }

    .pipeline-step span {
      color: var(--muted);
      font-size: 0.82rem;
    }

    .pipeline-step i {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: #050505;
      background: linear-gradient(135deg, var(--cyan), var(--rose));
      font-style: normal;
      font-weight: 900;
    }

    .topic-stack {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .topic-card {
      min-height: 118px;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.07);
    }

    .topic-card small {
      color: var(--dim);
      font-size: 0.72rem;
    }

    .topic-card strong {
      display: block;
      margin: 8px 0;
      line-height: 1.28;
      font-size: 0.92rem;
    }

    .topic-card span {
      color: var(--muted);
      font-size: 0.78rem;
    }

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

    .need-chip {
      min-height: 116px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.052);
      transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease;
    }

    .need-chip:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 240, 255, 0.32);
      background: rgba(255, 255, 255, 0.08);
    }

    .need-chip strong {
      display: block;
      margin-bottom: 6px;
      color: var(--white);
    }

    .need-chip span {
      color: var(--muted);
      font-size: 0.86rem;
    }

    .platform-map {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .platform {
      min-height: 132px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.06);
      transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
    }

    .platform:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 82, 82, 0.4);
      background: rgba(255, 255, 255, 0.09);
      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
    }

    .platform b {
      display: block;
      margin-bottom: 6px;
      color: var(--white);
      font-size: 1rem;
    }

    .platform span {
      color: var(--muted);
      font-size: 0.84rem;
    }

    .timeline {
      display: grid;
      gap: 12px;
    }

    .timeline-row {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 20px;
      padding: 20px;
      transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    }

    .timeline-row.visible {
      border-color: rgba(0, 240, 255, 0.26);
      box-shadow: 0 18px 58px rgba(0, 0, 0, 0.24);
    }

    .time {
      color: var(--cyan);
      font-weight: 850;
    }

    .timeline-row h3 {
      margin-bottom: 8px;
      font-size: 1.25rem;
      letter-spacing: 0;
    }

    .timeline-row p {
      color: var(--muted);
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .tags span {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 9px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.07);
      color: #d8dee6;
      font-size: 0.84rem;
      font-weight: 700;
    }

    .deliverables {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .deliverable {
      min-height: 190px;
      padding: 18px;
      transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
    }

    .deliverable:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 240, 255, 0.32);
      background: rgba(255, 255, 255, 0.085);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
    }

    .deliverable strong {
      display: block;
      margin: 18px 0 8px;
      font-size: 1.02rem;
    }

    .deliverable span {
      color: var(--muted);
      font-size: 0.88rem;
    }

    .deliverable .mark {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: var(--radius);
      color: #050505;
      background: linear-gradient(135deg, var(--cyan), var(--rose));
      font-weight: 900;
    }

    .split {
      display: grid;
      grid-template-columns: 0.88fr 1.12fr;
      gap: 18px;
      align-items: start;
    }

    .quote {
      position: sticky;
      top: 88px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.055));
    }

    .quote p {
      font-size: 1.5rem;
      line-height: 1.32;
      font-weight: 760;
    }

    .quote span {
      display: block;
      margin-top: 14px;
      color: var(--muted);
    }

    .share-panel {
      display: grid;
      gap: 12px;
      padding: 18px;
    }

    textarea {
      width: 100%;
      min-height: 360px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      outline: none;
      padding: 16px;
      background: rgba(0, 0, 0, 0.34);
      color: #f4f8fb;
      line-height: 1.72;
    }

    .copy-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }

    .copy-row small {
      color: var(--dim);
    }

    .bottom-cta {
      position: sticky;
      bottom: 0;
      z-index: 60;
      display: none;
      gap: 10px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(5, 5, 5, 0.84);
      backdrop-filter: blur(18px);
    }

    .bottom-cta a {
      flex: 1;
      min-height: 44px;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 86px;
      z-index: 90;
      padding: 9px 12px;
      border-radius: var(--radius);
      background: var(--white);
      color: var(--black);
      font-size: 0.9rem;
      font-weight: 800;
      transform: translate(-50%, 12px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    footer {
      padding: 34px 20px 44px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--dim);
      background: #050505;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: min(100%, var(--max));
      margin: 0 auto;
    }

    [data-reveal] {
      opacity: 0;
      transform: translate3d(0, 34px, 0) scale(0.985);
      will-change: opacity, transform;
      transition:
        opacity 0.82s var(--ease),
        transform 0.82s var(--ease),
        border-color 0.34s ease,
        background 0.34s ease,
        box-shadow 0.34s ease;
    }

    [data-reveal="fade-left"] {
      transform: translate3d(-30px, 0, 0) scale(0.992);
    }

    [data-reveal="fade-right"] {
      transform: translate3d(30px, 0, 0) scale(0.992);
    }

    [data-reveal="scale"] {
      transform: translate3d(0, 24px, 0) scale(0.955);
    }

    [data-reveal].visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    [data-reveal].visible.card:hover,
    [data-reveal].visible.spine-cell:hover,
    [data-reveal].visible.need-chip:hover,
    [data-reveal].visible.capability:hover,
    [data-reveal].visible.platform:hover,
    [data-reveal].visible.deliverable:hover {
      transform: translate3d(0, -6px, 0) scale(1.01);
    }

    [data-delay="1"] { transition-delay: 0.08s; }
    [data-delay="2"] { transition-delay: 0.16s; }
    [data-delay="3"] { transition-delay: 0.24s; }
    [data-delay="4"] { transition-delay: 0.32s; }

    .mobile-safe-mode *,
    .mobile-safe-mode *::before,
    .mobile-safe-mode *::after {
      animation: none !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .mobile-safe-mode #networkCanvas,
    .mobile-safe-mode .intro-overlay {
      display: none !important;
    }

    .mobile-safe-mode [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
    }

    @media (max-width: 980px) {
      h1 {
        font-size: 3.1rem;
      }

      h2 {
        font-size: 2.15rem;
      }

      .hero-inner,
      .skill-wall,
      .daily-lab,
      .split {
        grid-template-columns: 1fr;
      }

      .hero-media {
        min-height: 440px;
      }

      .grid.three,
      .grid.four,
      .platform-map,
      .spine-grid,
      .deliverables,
      .need-finder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .quote {
        position: static;
      }
    }

    @media (max-width: 720px) {
      #networkCanvas {
        display: none;
      }

      .intro-overlay {
        background: #050505;
      }

      .intro-lockup {
        animation-duration: 0.56s;
      }

      body::after {
        display: none;
      }

      .ticker-track {
        width: max-content;
        animation: mobileMarquee 46s linear infinite;
        will-change: transform;
      }

      .ticker-group {
        flex-wrap: nowrap;
      }

      .brand-mark::after {
        animation: markSheen 7.2s ease-in-out infinite;
      }

      .gradient-text {
        animation: gradientDrift 9s ease-in-out infinite;
      }

      .hero-media::before {
        opacity: 0.72;
        animation: edgeTrace 9s ease-in-out infinite;
      }

      .radar-line {
        top: 12%;
        animation: mobileScan 6.2s var(--ease) infinite;
        will-change: transform, opacity;
      }

      .signal-node {
        animation: mobileFloat 7.2s ease-in-out infinite;
        will-change: transform;
      }

      .signal-node:nth-child(3) { animation-delay: 0.7s; }
      .signal-node:nth-child(4) { animation-delay: 1.4s; }
      .signal-node:nth-child(5) { animation-delay: 2.1s; }

      .bar i {
        animation: mobileBarPulse 5.8s ease-in-out infinite;
        will-change: transform, opacity;
      }

      .skill-rings {
        animation: mobileRingBreathe 8.5s ease-in-out infinite;
      }

      .ring-label {
        animation: mobileLabelFloat 7.6s ease-in-out infinite;
      }

      .ring-label.b { animation-delay: 0.8s; }
      .ring-label.c { animation-delay: 1.6s; }
      .ring-label.d { animation-delay: 2.4s; }

      .pipeline-step {
        animation: mobileStepGlow 7.8s ease-in-out infinite;
      }

      .pipeline-step:nth-child(2) { animation-delay: 0.5s; }
      .pipeline-step:nth-child(3) { animation-delay: 1s; }
      .pipeline-step:nth-child(4) { animation-delay: 1.5s; }
      .pipeline-step:nth-child(5) { animation-delay: 2s; }

      @keyframes mobileScan {
        0% { opacity: 0; transform: translate3d(0, 0, 0); }
        15% { opacity: 0.9; }
        78% { opacity: 0.9; }
        100% { opacity: 0; transform: translate3d(0, 230px, 0); }
      }

      @keyframes mobileFloat {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -6px, 0); }
      }

      @keyframes mobileBarPulse {
        0%, 100% { transform: translate3d(-6%, 0, 0); opacity: 0.78; }
        50% { transform: translate3d(6%, 0, 0); opacity: 1; }
      }

      @keyframes mobileMarquee {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(-50%, 0, 0); }
      }

      @keyframes mobileRingBreathe {
        0%, 100% { box-shadow: 0 0 0 rgba(0, 240, 255, 0); border-color: rgba(0, 240, 255, 0.25); }
        50% { box-shadow: 0 0 34px rgba(0, 240, 255, 0.16); border-color: rgba(255, 82, 82, 0.34); }
      }

      @keyframes mobileLabelFloat {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -4px, 0); }
      }

      @keyframes mobileStepGlow {
        0%, 100% { border-color: rgba(255, 255, 255, 0.13); background: rgba(5, 5, 5, 0.42); }
        50% { border-color: rgba(0, 240, 255, 0.3); background: rgba(0, 240, 255, 0.055); }
      }

      .nav,
      .proof-pill,
      .requirement-strip,
      .signal-node,
      .spine-cell,
      .card,
      .slice,
      .timeline-row,
      .deliverable,
      .share-panel,
      .daily-board,
      .bottom-cta {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      [data-reveal] {
        transform: translate3d(0, 16px, 0);
        will-change: auto;
        transition-duration: 0.46s;
      }

      [data-reveal="fade-left"],
      [data-reveal="fade-right"],
      [data-reveal="scale"] {
        transform: translate3d(0, 16px, 0);
      }

      .nav-links {
        display: none;
      }

      .nav-inner {
        min-height: 58px;
        padding: 0 14px;
      }

      .brand-name small {
        display: none;
      }

      .hero {
        min-height: auto;
        padding: 40px 16px 22px;
      }

      h1 {
        font-size: 2.38rem;
      }

      h2 {
        font-size: 1.82rem;
      }

      .hero-lead {
        font-size: 1rem;
      }

      .hero-proof,
      .grid.two,
      .grid.three,
      .grid.four,
      .capability-grid,
      .platform-map,
      .spine-grid,
      .deliverables,
      .need-finder,
      .topic-stack {
        grid-template-columns: 1fr;
      }

      .signal-spine {
        padding: 48px 16px 52px;
      }

      .spine-word {
        top: -28px;
        left: 0;
        right: auto;
        font-size: 3.4rem;
      }

      .spine-cell {
        min-height: 170px;
      }

      .requirement-strip {
        grid-template-columns: 1fr;
      }

      .daily-board {
        min-height: auto;
      }

      .pipeline-step {
        grid-template-columns: 1fr;
      }

      .hero-media {
        min-height: 410px;
      }

      .console-bottom {
        grid-template-columns: 1fr;
      }

      .meter {
        padding: 10px;
      }

      .section {
        padding: 58px 16px;
      }

      .timeline-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .skill-rings {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 32px auto 0;
        width: 230px;
        height: 230px;
      }

      .copy-row {
        align-items: stretch;
        flex-direction: column;
      }

      .button {
        width: 100%;
      }

      .bottom-cta {
        display: flex;
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 390px) {
      h1 {
        font-size: 2.08rem;
      }

      .hero-media {
        min-height: 370px;
      }

      .signal-console {
        inset: 14px;
      }

      .signal-node {
        min-width: 74px;
        font-size: 0.74rem;
      }

      .ticker span {
        font-size: 0.82rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body>
  <canvas id="networkCanvas" aria-hidden="true"></canvas>
  <div class="progress" id="progress"></div>
  <div class="intro-overlay" aria-hidden="true">
    <div class="intro-lockup">
      <strong>VOC.market</strong>
      <span>Social Voice Intelligence Workshop</span>
      <div class="intro-rule"></div>
    </div>
  </div>

  <header class="nav">
    <div class="nav-inner">
      <a class="brand" href="#top" aria-label="VOC.market">
        <span class="brand-mark">V</span>
        <span class="brand-name">VOC.market<small>小红书 x 抖音需求洞察</small></span>
      </a>
      <nav class="nav-links" aria-label="页面导航">
        <a href="#capability">课程能力</a>
        <a href="#daily">口播日报</a>
        <a href="#schedule">课程安排</a>
        <a href="#deliverables">现场交付</a>
      </nav>
    </div>
  </header>

  <main id="top">
    <section class="hero">
      <div class="hero-inner">
        <div class="hero-copy" data-reveal>
          <div class="eyebrow">南昌本地 · 小红书 + 抖音 · 社媒 VOC 线下工作坊</div>
          <h1>1天学会从评论里找用户需求，<span class="gradient-text">再做成选题和报告</span></h1>
          <p class="hero-lead">VOC 就是“用户真实声音”。这堂课聚焦小红书和抖音：看大家怎么搜、怎么问、怎么吐槽、怎么夸，再把这些评论变成产品卖点、内容选题和一份可汇报的需求洞察。</p>
          <div class="hero-actions">
            <a class="button primary" href="#schedule">看这一天学什么</a>
            <a class="button" href="#daily">看抖音选题日报</a>
          </div>
          <div class="hero-proof" aria-label="课程关键信息">
            <div class="proof-pill">
              <strong>2个平台</strong>
              <span>小红书 + 抖音重点实操</span>
            </div>
            <div class="proof-pill">
              <strong>5月28日下午</strong>
              <span>安装环境，配好龙虾技能</span>
            </div>
            <div class="proof-pill">
              <strong>5月29日全天</strong>
              <span>做 VOC 分析、选题和报告</span>
            </div>
          </div>
          <div class="requirement-strip" data-reveal data-delay="1">
            <div class="requirement-badge">REQ</div>
            <div>
              <b>参会要求：请提前下载并安装好龙虾</b>
              <span>5月28日下午会帮你把小红书/抖音采集技能配置好，确保 5月29日全天实战能跟着老师一起跑。</span>
            </div>
          </div>
        </div>

        <div class="hero-media" data-reveal data-delay="2" data-tilt>
          <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=82" alt="社媒数据分析工作台">
          <div class="signal-console">
            <div class="console-top">
              <span class="console-dots" aria-hidden="true"><span></span><span></span><span></span></span>
              <span>VOC.market / 小红书 x 抖音需求雷达</span>
            </div>
            <div class="radar" aria-label="社媒信号雷达">
              <div class="radar-line"></div>
              <div class="signal-node">抖音<small>视频 / 评论 / 回复</small></div>
              <div class="signal-node">小红书<small>笔记 / 评论 / 搜索词</small></div>
              <div class="signal-node">用户需求<small>痛点 / 阻碍 / 场景</small></div>
              <div class="signal-node">选题报告<small>内容 / 卖点 / 动作</small></div>
            </div>
            <div class="console-bottom">
              <div class="meter"><span>内容信号</span><div class="bar"><i></i></div></div>
              <div class="meter"><span>用户情绪</span><div class="bar"><i></i></div></div>
              <div class="meter"><span>行动优先级</span><div class="bar"><i></i></div></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="ticker" aria-label="支持平台与能力">
      <div class="ticker-track">
        <div class="ticker-group">
          <span>小红书笔记 / 评论 / 搜索词</span>
          <span>抖音视频 / 评论 / 热评回复</span>
          <span>从评论里找真实需求</span>
          <span>把需求变成内容选题</span>
          <span>生成可汇报的 VOC 报告</span>
          <span>douyin-speaking-daily 每日选题雷达</span>
          <span>口播逐字稿 / 爆款结构拆解</span>
          <span>HTML VOC 报告 / 交付审计</span>
        </div>
        <div class="ticker-group" aria-hidden="true">
          <span>小红书笔记 / 评论 / 搜索词</span>
          <span>抖音视频 / 评论 / 热评回复</span>
          <span>从评论里找真实需求</span>
          <span>把需求变成内容选题</span>
          <span>生成可汇报的 VOC 报告</span>
          <span>douyin-speaking-daily 每日选题雷达</span>
          <span>口播逐字稿 / 爆款结构拆解</span>
          <span>HTML VOC 报告 / 交付审计</span>
        </div>
      </div>
    </section>

    <section class="signal-spine" aria-label="社媒 VOC 工作流">
      <div class="spine-inner">
        <div class="spine-word">COMMENT TO INSIGHT</div>
        <div class="spine-grid">
          <div class="spine-cell" data-reveal>
            <em>01 / 搜内容</em>
            <strong>先找到相关笔记和视频</strong>
            <span>围绕你的产品、品类和竞品，在小红书、抖音里找到用户正在看的内容。</span>
            <b>01</b>
          </div>
          <div class="spine-cell" data-reveal data-delay="1">
            <em>02 / 看评论</em>
            <strong>再看大家到底在问什么</strong>
            <span>高赞评论、追问、吐槽和回复，往往比标题更接近真实需求。</span>
            <b>02</b>
          </div>
          <div class="spine-cell" data-reveal data-delay="2">
            <em>03 / 找需求</em>
            <strong>把评论整理成需求清单</strong>
            <span>用户为什么想买、为什么犹豫、在什么场景使用，现场一步步拆出来。</span>
            <b>03</b>
          </div>
          <div class="spine-cell" data-reveal data-delay="3">
            <em>04 / 做结果</em>
            <strong>变成选题、卖点和报告</strong>
            <span>最后输出内容选题、口播方向、产品卖点和一份可汇报的 VOC 报告。</span>
            <b>04</b>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="wrap">
        <div class="section-head center" data-reveal>
          <div class="section-kicker">这堂课到底解决什么</div>
          <h2>看懂小红书和抖音评论，你就能更快知道用户想要什么。</h2>
          <p class="sub">很多团队每天刷内容，却没有把评论区里的问题整理成需求。这堂课会用龙虾帮你把“刷到的内容”变成“能指导产品和内容的证据”。</p>
        </div>
        <div class="grid four">
          <article class="card" data-reveal>
            <span class="index">01</span>
            <h3>内容很多，看不过来</h3>
            <p>同一个品类每天都有大量笔记和视频，靠人工刷很容易漏掉重要信号。</p>
          </article>
          <article class="card" data-reveal data-delay="1">
            <span class="index rose">02</span>
            <h3>评论里才有真实问题</h3>
            <p>用户会在评论里问价格、效果、适不适合自己，也会说出不买的原因。</p>
          </article>
          <article class="card" data-reveal data-delay="2">
            <span class="index amber">03</span>
            <h3>爆款不能只靠照抄</h3>
            <p>要知道它为什么能火：开头怎么抓人、哪里解决顾虑、评论为什么愿意互动。</p>
          </article>
          <article class="card" data-reveal data-delay="3">
            <span class="index green">04</span>
            <h3>结论要有证据</h3>
            <p>每个需求、卖点和选题都要能回到原始评论，不做拍脑袋的判断。</p>
          </article>
        </div>
        <div class="need-finder" aria-label="社媒 VOC 需求发现路径">
          <div class="need-chip" data-reveal>
            <strong>评论找需求</strong>
            <span>把“想要、担心、不会用、太贵、有没有替代品”转成需求和购买阻碍。</span>
          </div>
          <div class="need-chip" data-reveal data-delay="1">
            <strong>回复找证据</strong>
            <span>热评下的追问和反驳，是判断需求强弱和人群分层的关键证据。</span>
          </div>
          <div class="need-chip" data-reveal data-delay="2">
            <strong>账号找节奏</strong>
            <span>监听竞品、达人和标杆账号，看到内容节奏、选题方向和转化动作。</span>
          </div>
          <div class="need-chip" data-reveal data-delay="3">
            <strong>爆款找结构</strong>
            <span>从逐字稿拆钩子、冲突、证明点和评论触发点，迁移成自己的口播框架。</span>
          </div>
        </div>
      </div>
    </section>

    <section class="section alt" id="capability">
      <div class="wrap">
        <div class="skill-wall">
          <div class="slice" data-reveal>
            <div class="section-kicker">Capability Stack</div>
            <h3>我们现场讲的不是一个工具，而是一条已经技能化的社媒 VOC 生产线。</h3>
            <p>从技能配置、采集、归一化、洞察、口播日报到 HTML 报告，课程会把可交付的能力拆成学员能看懂、能复制、能回公司继续用的流程。</p>
            <div class="skill-rings" aria-hidden="true">
              <span class="ring-label a">采集</span>
              <span class="ring-label b">理解</span>
              <span class="ring-label c">报告</span>
              <span class="ring-label d">行动</span>
            </div>
          </div>

          <div class="capability-grid">
            <div class="capability" data-reveal data-delay="1">
              <strong>小红书/抖音采集</strong>
              <span>正课优先跑通小红书和抖音：关键词搜索、笔记/视频详情、评论、热评回复、账号内容。</span>
            </div>
            <div class="capability" data-reveal data-delay="2">
              <strong>账号与话题监听</strong>
              <span>围绕关键词、竞品账号、达人内容和话题讨论持续观察，沉淀内容节奏、互动表现和需求变化。</span>
            </div>
            <div class="capability" data-reveal data-delay="3">
              <strong>douyin-speaking-daily</strong>
              <span>关键词监听、账号作品监听、评论采集、可选逐字稿补跑、每日选题日报、脚本共创和偏好沉淀。</span>
            </div>
            <div class="capability" data-reveal data-delay="4">
              <strong>报告与审计</strong>
              <span>VOC 数据归一化、mini report、HTML v2 报告生成、证据卡、行动建议和交付前审计。</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="daily">
      <div class="wrap daily-lab">
        <div class="daily-copy" data-reveal>
          <div class="section-head">
            <div class="section-kicker">douyin-speaking-daily</div>
            <h2>把抖音变成每天可刷新的口播选题雷达。</h2>
            <p class="sub">这条能力适合讲给内容团队和老板听：不是“我今天想发什么”，而是“今天用户和竞品正在把什么问题推到台前”。</p>
          </div>
          <div class="daily-points">
            <div class="daily-point">
              <b>01</b>
              <div>
                <strong>先建立账号 profile</strong>
                <span>行业、人群、账号定位、转化目标、禁忌表达和历史偏好先沉淀，后续选题不跑偏。</span>
              </div>
            </div>
            <div class="daily-point">
              <b>02</b>
              <div>
                <strong>再跑关键词与账号监听</strong>
                <span>关键词视频、确认账号近期作品、评论和回复一起看，找到需求和内容机会。</span>
              </div>
            </div>
            <div class="daily-point">
              <b>03</b>
              <div>
                <strong>最后进入脚本共创</strong>
                <span>选题 N、改稿、定稿都能续接同一次日报，把爆款结构迁移成自己的口播稿。</span>
              </div>
            </div>
          </div>
        </div>

        <div class="daily-board" data-reveal data-delay="2" data-tilt>
          <div class="board-inner">
            <div class="board-header">
              <div class="board-title">
                <strong>Daily Speaking Radar</strong>
                <span>runner -> report -> script co-creation</span>
              </div>
              <span class="board-status">P0 closed loop</span>
            </div>

            <div class="pipeline">
              <div class="pipeline-step">
                <code>profile</code>
                <div>
                  <strong>账号定位与转化目标</strong>
                  <span>读取行业、人群、话术边界和脚本偏好。</span>
                </div>
                <i>1</i>
              </div>
              <div class="pipeline-step">
                <code>monitor</code>
                <div>
                  <strong>关键词 + 账号作品监听</strong>
                  <span>抓取爆款视频、竞品账号近期作品和互动证据。</span>
                </div>
                <i>2</i>
              </div>
              <div class="pipeline-step">
                <code>comments</code>
                <div>
                  <strong>评论 / 回复需求信号</strong>
                  <span>从高赞评论、追问和反驳里识别痛点、阻碍和场景。</span>
                </div>
                <i>3</i>
              </div>
              <div class="pipeline-step">
                <code>transcript</code>
                <div>
                  <strong>可选补跑逐字稿</strong>
                  <span>拆开头、冲突、证明点、结尾动作和评论触发点。</span>
                </div>
                <i>4</i>
              </div>
              <div class="pipeline-step">
                <code>daily report</code>
                <div>
                  <strong>今日选题池与共创稿</strong>
                  <span>输出选题置信度、可讲方向、60 秒稿和定稿沉淀。</span>
                </div>
                <i>5</i>
              </div>
            </div>

            <div class="topic-stack">
              <div class="topic-card">
                <small>TOPIC 01 / 高置信</small>
                <strong>用户不是不买，是不确定它适不适合自己</strong>
                <span>评论证据：反复询问场景、预算和替代方案。</span>
              </div>
              <div class="topic-card">
                <small>TOPIC 02 / 可转化</small>
                <strong>把专家术语翻译成真实使用场景</strong>
                <span>逐字稿证据：爆款用冲突开场，再用案例证明。</span>
              </div>
              <div class="topic-card">
                <small>TOPIC 03 / 明日监听</small>
                <strong>竞品新内容评论区出现同类追问</strong>
                <span>账号证据：近期作品互动集中在购买阻碍。</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="wrap">
        <div class="section-head" data-reveal>
          <div class="section-kicker">Platform Map</div>
          <h2>聚焦小红书和抖音，把“内容”和“评论”整理成需求证据。</h2>
          <p class="sub">学员不用背 API 名称，只需要理解：搜什么内容、看哪些评论、怎么判断需求、最后怎么变成选题和报告。</p>
        </div>
        <div class="platform-map">
          <div class="platform" data-reveal>
            <b>抖音</b>
            <span>关键词视频、话题、视频详情、评论、回复、账号主页、近期作品、逐字稿和口播结构。</span>
          </div>
          <div class="platform" data-reveal data-delay="1">
            <b>小红书</b>
            <span>关键词笔记、笔记详情、评论、作者信息，适合测评、种草、痛点和生活方式洞察。</span>
          </div>
          <div class="platform" data-reveal data-delay="2">
            <b>热评回复</b>
            <span>重点看高赞评论下面的追问、反驳和补充，判断需求是不是足够真实。</span>
          </div>
          <div class="platform" data-reveal data-delay="3">
            <b>竞品账号</b>
            <span>观察竞品和达人近期内容，找出他们正在解决的问题和评论区的新机会。</span>
          </div>
          <div class="platform" data-reveal>
            <b>话题与关键词</b>
            <span>把平台热词、搜索词、评论词和用户原话统一到采集矩阵，避免只看单一爆款。</span>
          </div>
          <div class="platform" data-reveal data-delay="1">
            <b>评论与回复</b>
            <span>把高赞评论、追问、反驳、复购表达转成需求、阻碍、证据和内容钩子。</span>
          </div>
          <div class="platform" data-reveal data-delay="2">
            <b>账号监听</b>
            <span>确认竞品/达人账号，持续观察近期作品和评论变化，形成每日选题雷达。</span>
          </div>
          <div class="platform" data-reveal data-delay="3">
            <b>报告工厂</b>
            <span>把小红书和抖音样本合并到同一 VOC 结构里，输出 HTML 报告、审计结果和行动清单。</span>
          </div>
        </div>
      </div>
    </section>

    <section class="section alt" id="schedule">
      <div class="wrap">
        <div class="section-head" data-reveal>
          <div class="section-kicker">Workshop Flow</div>
          <h2>5月28日下午安装环境，5月29日全天做 VOC 分析实战。</h2>
          <p class="sub">南昌本地线下工作坊。5月29日全程用真实业务问题操作，建议每位学员带一个自己的品牌、品类、竞品账号或口播账号方向。</p>
        </div>
        <div class="timeline">
          <article class="timeline-row" data-reveal>
            <div class="time">5月28日下午<br>安装环境</div>
            <div>
              <h3>下载并安装 OpenClaw（龙虾），现场配置社媒 VOC 技能</h3>
              <p>这半天重点不是讲理论，而是把 VOC Token、社媒采集技能、douyin-speaking-daily、工作区和样例项目配置到能跑，为第二天全天实战做好准备。</p>
              <div class="tags">
                <span>参会前下载 OpenClaw</span>
                <span>配置 VOC Token</span>
                <span>配置社媒技能包</span>
                <span>跑通 douyin-speaking-daily Demo</span>
              </div>
            </div>
          </article>

          <article class="timeline-row" data-reveal data-delay="1">
            <div class="time">5月29日上午<br>VOC 需求发现</div>
            <div>
              <h3>从业务问题出发，用社媒找真实 VOC 需求</h3>
              <p>现场跑抖音/小红书主线，并讲清社媒采集的同构方法：如何找关键词、如何选样本、如何从评论/回复里判断需求强度。</p>
              <div class="tags">
                <span>小红书/抖音采集思路</span>
                <span>抖音视频与评论</span>
                <span>小红书笔记与评论</span>
                <span>需求 / 阻碍 / 场景证据</span>
              </div>
            </div>
          </article>

          <article class="timeline-row" data-reveal data-delay="2">
            <div class="time">5月29日下午<br>口播日报与报告</div>
            <div>
              <h3>用 douyin-speaking-daily 生成选题雷达，再输出 VOC 报告</h3>
              <p>用评论证据生成 VOC 洞察，用逐字稿和爆款结构拆出可复用口播框架，再把结论落到产品、内容、投放和销售动作。</p>
              <div class="tags">
                <span>每日选题日报</span>
                <span>VOC 数据归一化</span>
                <span>痛点/场景/阻碍聚类</span>
                <span>HTML 报告与审计</span>
              </div>
            </div>
          </article>

          <article class="timeline-row" data-reveal data-delay="3">
            <div class="time">5月29日收尾<br>现场交付</div>
            <div>
              <h3>每组交付一套自己的社媒 VOC 工作样板</h3>
              <p>不是听完就散，而是现场验收技能配置、采集矩阵、证据包、洞察报告、口播选题和下一步行动清单。</p>
              <div class="tags">
                <span>技能配置完成</span>
                <span>采集矩阵</span>
                <span>证据卡</span>
                <span>洞察报告</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="deliverables">
      <div class="wrap">
        <div class="section-head center" data-reveal>
          <div class="section-kicker">Deliverables</div>
          <h2>现场带走 6 份能继续工作的资产。</h2>
          <p class="sub">我们把交付物设计成企业内部可复盘、可协作、可继续迭代的格式。</p>
        </div>
        <div class="deliverables">
          <div class="deliverable" data-reveal>
            <span class="mark">1</span>
            <strong>技能配置完成</strong>
            <span>龙虾、VOC Token、社媒采集技能和 douyin-speaking-daily 跑通。</span>
          </div>
          <div class="deliverable" data-reveal data-delay="1">
            <span class="mark">2</span>
            <strong>社媒采集矩阵</strong>
            <span>平台、关键词、账号、话题、样本量、采集目的和风险边界。</span>
          </div>
          <div class="deliverable" data-reveal data-delay="2">
            <span class="mark">3</span>
            <strong>用户原声证据包</strong>
            <span>视频/笔记/评论/回复来源清晰，能回溯，不靠拍脑袋。</span>
          </div>
          <div class="deliverable" data-reveal data-delay="3">
            <span class="mark">4</span>
            <strong>社媒 VOC 报告</strong>
            <span>痛点、场景、阻碍、卖点、内容机会和行动建议。</span>
          </div>
          <div class="deliverable" data-reveal data-delay="4">
            <span class="mark">5</span>
            <strong>口播日报与选题池</strong>
            <span>每日趋势判断、选题置信度、60 秒稿和可复用结构框架。</span>
          </div>
          <div class="deliverable" data-reveal data-delay="4">
            <span class="mark">6</span>
            <strong>行动优先级清单</strong>
            <span>产品优化、内容选题、投放测试、账号监听的下一步。</span>
          </div>
        </div>
      </div>
    </section>

    <section class="section alt">
      <div class="wrap split">
        <div class="quote" data-reveal>
          <p>适合真正想把社媒数据变成增长动作的人。</p>
          <span>企业主、品牌负责人、产品负责人、内容/运营/增长团队，都能带着自己的业务问题来。</span>
        </div>
        <div class="grid two">
          <article class="card" data-reveal data-delay="1">
            <span class="index">A</span>
            <h3>推荐参加</h3>
            <ul class="list">
              <li>正在做小红书、抖音的品牌和内容团队。</li>
              <li>想从评论区、竞品账号和爆款视频中提炼产品/内容机会的人。</li>
              <li>需要把 AI 工作流变成团队 SOP 和客户交付能力的顾问/服务商。</li>
              <li>希望从“会用 AI”升级为“能用 AI 交付报告和策略”的业务负责人。</li>
            </ul>
          </article>
          <article class="card" data-reveal data-delay="2">
            <span class="index rose">B</span>
            <h3>报名准备</h3>
            <ul class="list">
              <li>参会前请提前下载并安装好 OpenClaw（龙虾）。</li>
              <li>请务必带电脑，全程实操。</li>
              <li>建议提前准备一个品类、品牌、竞品、达人或口播账号方向。</li>
              <li>5月28日下午统一安装环境、配置 VOC Token 和社媒 VOC 技能。</li>
              <li>真实项目涉及敏感数据时，课堂可用脱敏关键词和公开样本。</li>
            </ul>
          </article>
          <article class="card" data-reveal data-delay="3">
            <span class="index amber">C</span>
            <h3>活动信息</h3>
            <ul class="list">
              <li>形式：南昌本地线下工作坊。</li>
              <li>时间：5月28日下午安装环境，5月29日全天 VOC 分析实战。</li>
              <li>人数：建议 30 人以内，方便现场辅导。</li>
              <li>地点：南昌本地场地，具体位置另行同步。</li>
              <li>费用：以最终通知为准。</li>
            </ul>
          </article>
          <article class="card" data-reveal data-delay="4">
            <span class="index green">D</span>
            <h3>品牌背书</h3>
            <ul class="list">
              <li>VOC.market 企业级 VOC 智能工厂方法论。</li>
              <li>OpenClaw 龙虾技能包驱动，覆盖采集、分析、报告和审计。</li>
              <li>小红书/抖音内容、用户评论和热评回复可组合成可追溯洞察。</li>
              <li>目标不是一次性报告，而是训练团队拥有持续情报能力。</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

  </main>

  <nav class="bottom-cta" aria-label="底部导航">
    <a class="button" href="#schedule">课程安排</a>
    <a class="button primary" href="#deliverables">现场交付</a>
  </nav>

  <footer>
    <div class="footer-inner">
      <div class="brand">
        <span class="brand-mark">V</span>
        <span class="brand-name">VOC.market<small>VOC 为先 · 内容为王 · 增长为果</small></span>
      </div>
      <span>社媒 VOC 龙虾工作坊单页初稿</span>
    </div>
  </footer>

  <div class="toast" id="toast">已复制</div>

  <script>
    const progress = document.getElementById("progress");
    const revealItems = document.querySelectorAll("[data-reveal]");
    const toast = document.getElementById("toast");
    const introOverlay = document.querySelector(".intro-overlay");
    const nav = document.querySelector(".nav");
    const sectionBlocks = document.querySelectorAll(".section, .signal-spine, .hero");
    const canvas = document.getElementById("networkCanvas");
    const ctx = canvas ? canvas.getContext("2d") : null;
    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const isTouchLike = window.matchMedia("(hover: none), (pointer: coarse)").matches;
    const isMobileSafeMode = document.documentElement.classList.contains("mobile-safe-mode");

    function updateProgress() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
      const pct = maxScroll > 0 ? (scrollTop / maxScroll) * 100 : 0;
      if (progress) progress.style.width = pct + "%";
      if (nav) nav.classList.toggle("is-scrolled", scrollTop > 12);
    }

    revealItems.forEach((item, index) => {
      if (!item.getAttribute("data-reveal")) {
        if (item.matches(".hero-media, .daily-board, .share-panel, .quote")) {
          item.setAttribute("data-reveal", "scale");
        } else if (item.matches(".section-head, .daily-copy, .slice")) {
          item.setAttribute("data-reveal", "fade-left");
        } else if (index % 3 === 1) {
          item.setAttribute("data-reveal", "fade-right");
        } else if (index % 3 === 2) {
          item.setAttribute("data-reveal", "scale");
        }
      }
    });

    if (isMobileSafeMode) {
      revealItems.forEach((item) => item.classList.add("visible"));
      sectionBlocks.forEach((item) => item.classList.add("section-active"));
    } else if ("IntersectionObserver" in window) {
      const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            revealObserver.unobserve(entry.target);
          }
        });
      }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });

      revealItems.forEach((item) => revealObserver.observe(item));

      const sectionObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          entry.target.classList.toggle("section-active", entry.isIntersecting);
        });
      }, { threshold: 0.18, rootMargin: "-12% 0px -58% 0px" });

      sectionBlocks.forEach((item) => sectionObserver.observe(item));
    } else {
      revealItems.forEach((item) => item.classList.add("visible"));
      sectionBlocks.forEach((item) => item.classList.add("section-active"));
    }

    function showToast(message) {
      toast.textContent = message;
      toast.classList.add("show");
      window.setTimeout(() => toast.classList.remove("show"), 1800);
    }

    function setupTilt() {
      if (prefersReducedMotion || isTouchLike) return;
      document.querySelectorAll("[data-tilt]").forEach((el) => {
        el.addEventListener("mousemove", (event) => {
          const rect = el.getBoundingClientRect();
          const x = (event.clientX - rect.left) / rect.width - 0.5;
          const y = (event.clientY - rect.top) / rect.height - 0.5;
          el.style.transform = `perspective(900px) rotateY(${x * 5}deg) rotateX(${y * -5}deg)`;
        });
        el.addEventListener("mouseleave", () => {
          el.style.transform = "perspective(900px) rotateY(0deg) rotateX(0deg)";
        });
      });
    }

    let nodes = [];
    let animationId = null;
    let networkStarted = false;

    function shouldRunNetwork() {
      return Boolean(ctx) && !prefersReducedMotion && !isMobileSafeMode && !isTouchLike && window.innerWidth >= 760;
    }

    function stopNetwork() {
      if (animationId) {
        cancelAnimationFrame(animationId);
        animationId = null;
      }
      networkStarted = false;
      if (ctx) ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    }

    function resizeCanvas() {
      if (!ctx || !canvas) return;
      const ratio = window.devicePixelRatio || 1;
      canvas.width = Math.floor(window.innerWidth * ratio);
      canvas.height = Math.floor(window.innerHeight * ratio);
      canvas.style.width = window.innerWidth + "px";
      canvas.style.height = window.innerHeight + "px";
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
      createNodes();
    }

    function createNodes() {
      const mobile = window.innerWidth < 720;
      const count = mobile
        ? Math.min(24, Math.max(12, Math.floor(window.innerWidth / 38)))
        : Math.min(58, Math.max(24, Math.floor(window.innerWidth / 26)));
      nodes = Array.from({ length: count }, () => ({
        x: Math.random() * window.innerWidth,
        y: Math.random() * window.innerHeight,
        vx: (Math.random() - 0.5) * (mobile ? 0.22 : 0.36),
        vy: (Math.random() - 0.5) * (mobile ? 0.22 : 0.36),
        r: Math.random() * 1.6 + 0.6
      }));
    }

    function drawNetwork() {
      if (!ctx || !shouldRunNetwork()) {
        stopNetwork();
        return;
      }
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
      const mobile = window.innerWidth < 720;
      const connectDistance = mobile ? 104 : 132;
      nodes.forEach((node, index) => {
        node.x += node.vx;
        node.y += node.vy;
        if (node.x < 0 || node.x > window.innerWidth) node.vx *= -1;
        if (node.y < 0 || node.y > window.innerHeight) node.vy *= -1;

        ctx.beginPath();
        ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2);
        ctx.fillStyle = mobile ? "rgba(0, 240, 255, 0.38)" : "rgba(0, 240, 255, 0.5)";
        ctx.fill();

        for (let j = index + 1; j < nodes.length; j++) {
          const other = nodes[j];
          const dx = node.x - other.x;
          const dy = node.y - other.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < connectDistance) {
            ctx.beginPath();
            ctx.moveTo(node.x, node.y);
            ctx.lineTo(other.x, other.y);
            ctx.strokeStyle = `rgba(255, 255, 255, ${0.13 * (1 - dist / connectDistance)})`;
            ctx.lineWidth = 1;
            ctx.stroke();
          }
        }
      });
      animationId = requestAnimationFrame(drawNetwork);
    }

    function startNetwork() {
      if (networkStarted || !shouldRunNetwork()) return;
      networkStarted = true;
      resizeCanvas();
      drawNetwork();
    }

    function finishIntro() {
      if (!introOverlay || introOverlay.classList.contains("is-gone")) {
        startNetwork();
        return;
      }

      introOverlay.classList.add("is-hiding");
      window.setTimeout(() => {
        introOverlay.classList.add("is-gone");
        startNetwork();
      }, prefersReducedMotion ? 20 : 440);
    }

    window.addEventListener("scroll", updateProgress, { passive: true });
    window.addEventListener("resize", () => {
      if (shouldRunNetwork()) {
        if (networkStarted) resizeCanvas();
        else startNetwork();
      } else {
        stopNetwork();
      }
    }, { passive: true });
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) stopNetwork();
      else startNetwork();
    });
    setupTilt();
    updateProgress();

    if (document.readyState === "complete") {
      window.setTimeout(finishIntro, prefersReducedMotion ? 0 : (window.innerWidth < 720 ? 420 : 820));
    } else {
      window.addEventListener("load", () => {
        window.setTimeout(finishIntro, prefersReducedMotion ? 0 : (window.innerWidth < 720 ? 420 : 820));
      }, { once: true });
    }

    window.setTimeout(finishIntro, prefersReducedMotion ? 0 : 1800);

    window.addEventListener("beforeunload", () => {
      if (animationId) cancelAnimationFrame(animationId);
    });
  </script>
</body>
</html>