/* ---- hero ---- */
  .hero{position:relative;border-radius:30px;background:var(--hero-bg);overflow:hidden;
    display:grid;grid-template-columns:1fr 1.18fr;gap:44px;align-items:center;padding:72px 64px;min-height:560px}
  .hero::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;
    right:-140px;top:-180px;z-index:0;pointer-events:none;background:radial-gradient(circle,var(--mint),transparent 68%);opacity:.14}
  .col{position:relative;z-index:2}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:12px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:0 0 22px}
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--mint)}
  h1{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--on-dark);
    font-size:clamp(38px,4.6vw,58px);line-height:1.03;letter-spacing:-.03em;margin:0 0 24px}
  h1 .hl{color:var(--mint)}
  .sub{font-size:17px;color:var(--muted);margin:0 0 36px;max-width:46ch}
  .cta{display:flex;gap:14px;flex-wrap:wrap}
  .stage{position:relative;z-index:2;aspect-ratio:7/5;width:100%;max-width:640px;justify-self:end}
  .photo{position:absolute;inset:0;border-radius:22px;overflow:hidden;
    background:radial-gradient(120% 80% at 70% 20%, #3a4a55, transparent 60%),linear-gradient(160deg,#52606b,#161c21)}
  .photo img{width:100%;height:100%;object-fit:cover;object-position:62% center;display:block}
  .photo-tag{position:absolute;left:14px;bottom:12px;color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
  .glass{position:absolute;border-radius:18px;
    background:linear-gradient(150deg,rgba(16,24,21,.52),rgba(16,24,21,.14));
    -webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);
    border:1px solid rgba(244,243,238,.16);box-shadow:0 18px 44px rgba(0,0,0,.26);z-index:3}
  .gtitle{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,238,.72)}
  .trend{display:inline-flex;align-items:center;gap:4px;color:var(--mint);font-size:11px;font-weight:600}
  .ghead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .chart{position:relative;width:100%;height:82px;margin-bottom:12px}
  .chart svg{width:100%;height:82px;display:block;overflow:visible}
  .aarea{fill:url(#ag);opacity:0;animation:areafade 4.6s ease-in-out infinite}
  .aline{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:430;stroke-dashoffset:430;animation:draw 4.6s ease-in-out infinite}
  .adot{fill:var(--mint);opacity:0;animation:dotin 4.6s ease-in-out infinite}
  .gnum{display:flex;align-items:baseline;justify-content:space-between}
  .gnum .big{font-size:23px;font-weight:700;color:var(--on-dark)}
  .gnum .meta{font-size:11px;color:var(--muted)}
  .card-gauge{top:32px;left:-32px;width:238px;padding:16px 18px;animation:float 7s ease-in-out infinite}
  .gauge-head{margin-bottom:13px}
  .gauge-row{display:flex;align-items:center;gap:13px}
  .card-stat{left:-46px;bottom:44px;width:248px;padding:16px 18px;animation:float 6s ease-in-out infinite .8s}
  .donut{position:relative;width:56px;height:56px;flex:none}.donut svg{transform:rotate(-90deg)}
  .dtrack{fill:none;stroke:rgba(244,243,238,.2);stroke-width:7}
  .dval{fill:none;stroke:var(--mint);stroke-width:7;stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151;animation:sweep 4.6s ease-in-out infinite}
  .donut .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--on-dark)}
  .chip-txt .v{font-size:13px;font-weight:600;color:var(--on-dark)}.chip-txt .k{font-size:11px;color:rgba(244,243,238,.7);margin-top:1px}

  /* ---- trust ---- */
  .trust{max-width:1100px;margin:0 auto;padding:74px 24px 44px;text-align:center}
  .trust .label{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 28px}
  /* subtle green glow behind the Melcon logo (no glassmorphism) */
  .melcon-stage{position:relative;display:inline-block;isolation:isolate}
  .ms-blob{position:absolute;z-index:0;border-radius:50%;filter:blur(38px);pointer-events:none}
  .ms-blob.b1{width:120px;height:120px;left:-22px;top:-26px;background:var(--mint);opacity:.22}
  .ms-blob.b2{width:130px;height:130px;right:-26px;bottom:-28px;background:var(--green);opacity:.16}
  .melcon-logo{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
    line-height:0;padding:20px 40px;border-radius:22px;
    background:rgba(16,128,92,.05);
    border:1px solid rgba(16,128,92,.14);
    box-shadow:0 8px 26px rgba(16,128,92,.12);
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease}
  .melcon-logo:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(16,128,92,.2)}
  .melcon-img{position:relative;z-index:1;height:32px;width:auto;display:block}
  .melcon-mark{font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1;color:var(--green-deep);letter-spacing:.01em}
  .melcon-mark sup{font-size:.3em;font-weight:600;vertical-align:top;position:relative;top:.12em;margin-left:4px}
  .melcon-mark:hover{color:var(--green)}
  .logos{display:flex;gap:46px;justify-content:center;align-items:center;flex-wrap:wrap;opacity:.62}
  .logos span{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:21px;color:var(--green-deep)}

  /* ---- platform features ---- */
  .platform{max-width:1120px;margin:0 auto;padding:64px 24px 90px}
  .fhead{max-width:680px;margin:0 auto 40px;text-align:center}
  .platform h2.title{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--green-deep);
    font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.025em;margin:0 0 16px}
  .platform .lede{font-size:17px;color:var(--ink-soft);margin:0}

  .fblock{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
    padding:44px 26px;border-radius:22px;margin:6px 0;transition:background .25s ease}
  .fblock:hover{background:rgba(16,128,92,.04)}
  .fblock.flip .thumb{order:2}.fblock.flip .fcopy{order:1}
  .fnum{font-size:13px;font-weight:700;color:var(--green);letter-spacing:.04em;margin:0 0 12px}
  .fcopy h3{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--green-deep);
    font-size:clamp(26px,2.8vw,38px);line-height:1.06;letter-spacing:-.02em;margin:0 0 16px}
  .fcopy p{font-size:17px;color:var(--ink-soft);margin:0 0 24px;max-width:40ch}
  .flink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--green-deep);
    text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
  .flink:hover{border-color:var(--green)}
  .flink svg{transition:transform .2s}.flink:hover svg{transform:translateX(5px)}

  /* thumbnail frame */
  .thumb{position:relative;border-radius:24px;min-height:340px;overflow:hidden;
    background:linear-gradient(158deg,#F2EFE4 0%,#E6DFCE 100%);
    display:flex;align-items:center;justify-content:center;padding:36px;
    border:1px solid transparent;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .fblock:hover .thumb{border-color:rgba(16,128,92,.4);box-shadow:0 22px 48px rgba(14,74,56,.15);transform:translateY(-4px)}
  .fblock:hover .flink{border-color:var(--green)}
  .thumb::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;
    top:-90px;right:-70px;background:radial-gradient(circle,var(--green),transparent 70%);opacity:.1;pointer-events:none}

  /* product card primitives */
  .pc{position:relative;background:#fff;border-radius:14px;box-shadow:0 14px 36px rgba(14,74,56,.16);z-index:2}
  .pc-h{padding:13px 16px;border-bottom:1px solid var(--c-line);display:flex;align-items:center;justify-content:space-between}
  .pc-t{font-weight:600;font-size:13px;color:var(--c-ink)}
  .pc-s{font-size:11px;color:var(--c-muted)}
  .pc-b{padding:14px 16px}
  .li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;color:var(--c-ink)}
  .li + .li{border-top:1px solid var(--c-line)}
  .li .amt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
  .chk{width:18px;height:18px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
  .chk svg{width:10px;height:10px}
  .pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
  .pill.g{background:var(--g-soft);color:var(--green)}
  .pill.a{background:var(--honey-soft);color:var(--honey)}
  .bar{height:8px;border-radius:5px;background:rgba(21,36,29,.1)}
  .dots{display:flex;flex-direction:column;gap:3px}.dots span{width:16px;height:2px;background:var(--c-line);border-radius:2px}

  /* F1 scan */
  .scanline{position:absolute;left:0;right:0;height:40px;z-index:3;pointer-events:none;
    background:linear-gradient(var(--mint),transparent);opacity:.22;animation:scan 4s ease-in-out infinite}
  .scanedge{position:absolute;left:0;right:0;height:2px;background:var(--green);opacity:.6;z-index:4;animation:scanedge 4s ease-in-out infinite}
  .aibadge{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:6;
    background:#fff;border:1px solid var(--g-soft);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:600;
    color:var(--c-ink);display:inline-flex;align-items:center;gap:6px;box-shadow:0 6px 18px rgba(16,128,92,.24)}
  .aibadge .sp{width:12px;height:12px;color:var(--green)}
  .airing{position:absolute;top:46%;left:50%;width:44px;height:44px;border-radius:50%;z-index:5;
    transform:translate(-50%,-50%);background:var(--green);animation:ring 3s ease-out infinite}
  .airing.r2{animation-delay:1.5s}
  .fillbar{position:relative;overflow:hidden}
  .fillbar::after{content:"";position:absolute;inset:0;background:var(--g-soft);transform:scaleX(0);transform-origin:left;
    animation:fillx 4s ease-in-out infinite}
  .fillbar.d2::after{animation-delay:.3s}.fillbar.d3::after{animation-delay:.6s}

  /* F2 three-way match */
  .match2{width:100%}
  .mline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:12.5px;color:var(--c-ink)}
  .mline + .mline{border-top:1px solid var(--c-line)}
  .mline .ml{font-weight:500}
  .mline .mamt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
  .mchk{width:18px;height:18px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none;transform:scale(0);animation:pop 5s ease-in-out infinite}
  .mchk svg{width:10px;height:10px}
  .r1 .mchk{animation-delay:.3s}.r2 .mchk{animation-delay:.7s}.r3 .mchk{animation-delay:1.1s}
  .toltop{display:flex;align-items:center;justify-content:space-between;margin:15px 0 7px;font-size:11px;color:var(--c-muted)}
  .tolpill{opacity:0;animation:fade 5s ease-in-out infinite;animation-delay:1.5s}
  .tolbar{position:relative;height:8px;border-radius:5px;background:rgba(21,36,29,.1)}
  .tolzone{position:absolute;left:34%;width:32%;top:0;bottom:0;background:var(--g-soft);border-radius:5px;border:1px solid rgba(16,128,92,.3)}
  .tolmark{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 2px 6px rgba(16,128,92,.45);left:6%;animation:tolslide 5s ease-in-out infinite}

  /* F3 QA states */
  .stwrap{position:relative;height:24px}
  .st{position:absolute;inset:0;display:flex;align-items:center}
  .st.a1{animation:stA 5s ease-in-out infinite}
  .st.a2{animation:stB 5s ease-in-out infinite}
  .qty1{animation:stA 5s ease-in-out infinite}.qty2{animation:stB 5s ease-in-out infinite}

  /* F4 progress */
  .track{height:10px;border-radius:6px;background:rgba(21,36,29,.1);overflow:hidden;position:relative}
  .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--green);width:0;animation:grow64 5s ease-in-out infinite}
  .ticks{display:flex;justify-content:space-between;margin-top:6px}
  .ticks span{font-size:10px;color:var(--c-muted)}

  /* F5 queue */
  .qrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:12px;color:var(--c-ink)}
  .qrow.flag{background:var(--honey-soft);animation:flagpulse 4s ease-in-out infinite}
  .qi{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none}
  .qi.a{background:rgba(224,162,60,.25);color:var(--honey)}.qi.g{background:var(--g-soft);color:var(--green)}
  .qi svg{width:12px;height:12px}
  .review{margin-left:auto;opacity:0;animation:fadeup 4s ease-in-out infinite;animation-delay:1s}

  /* F6 approval-to-payment flow */
  .f6title{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px}
  .f6x{color:var(--c-muted);flex:none;margin-top:2px}
  .flow6{position:relative;margin:22px 0 20px}
  .flow6-track{display:flex;justify-content:space-between;position:relative}
  .flow6-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:10px;height:2px;background:rgba(21,36,29,.14)}
  .flow6-track::after{content:"";position:absolute;left:12.5%;top:10px;height:2px;background:var(--green);width:0;animation:fill6 6s ease-in-out infinite}
  .fstep{flex:1;text-align:center;position:relative;z-index:2}
  .fnode{width:22px;height:22px;border-radius:50%;border:2px solid rgba(21,36,29,.18);background:#fff;margin:0 auto 9px;position:relative}
  .fnode .fdone{position:absolute;inset:-2px;border-radius:50%;background:var(--green);display:grid;place-items:center;transform:scale(0);animation:pop6 6s ease-in-out infinite}
  .fnode .fdone svg{width:11px;height:11px}
  .n1 .fdone{animation-delay:.4s}.n2 .fdone{animation-delay:1.1s}.n3 .fdone{animation-delay:1.9s}.n4 .fdone{animation-delay:2.9s}
  .flabel{font-size:11px;font-weight:600;color:var(--c-ink);line-height:1.25}
  .fsub{font-size:10px;color:var(--c-muted);line-height:1.2}
  .f6amt-l{font-size:11px;color:var(--c-muted)}
  .f6amt{font-size:22px;font-weight:700;color:var(--c-ink);letter-spacing:-.01em}

  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes draw{0%,5%{stroke-dashoffset:var(--o,240)}38%,90%{stroke-dashoffset:0}99%,100%{stroke-dashoffset:var(--o,240)}}
  @keyframes areafade{0%,10%{opacity:0}44%,88%{opacity:1}98%,100%{opacity:0}}
  @keyframes dotin{0%,40%{opacity:0}48%,88%{opacity:1}98%,100%{opacity:0}}
  @keyframes sweep{0%,6%{stroke-dashoffset:151}46%,88%{stroke-dashoffset:9}98%,100%{stroke-dashoffset:151}}
  @keyframes fade{0%,16%{opacity:0}30%,90%{opacity:1}99%,100%{opacity:0}}
  @keyframes pop{0%,18%{transform:scale(0)}28%{transform:scale(1.15)}34%,90%{transform:scale(1)}98%,100%{transform:scale(0)}}
  @keyframes scan{0%{top:14%}50%{top:78%}100%{top:14%}}
  @keyframes scanedge{0%{top:14%}50%{top:calc(78% + 40px)}100%{top:14%}}
  @keyframes ring{0%{transform:translate(-50%,-50%) scale(.6);opacity:.4}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
  @keyframes fillx{0%,20%{transform:scaleX(0)}45%,90%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
  @keyframes stA{0%,42%{opacity:1}52%,100%{opacity:0}}
  @keyframes stB{0%,44%{opacity:0}54%,96%{opacity:1}100%{opacity:0}}
  @keyframes grow64{0%,8%{width:0}30%{width:26%}52%{width:44%}74%,92%{width:64%}100%{width:0}}
  @keyframes flagpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,162,60,0)}50%{box-shadow:0 0 0 4px rgba(224,162,60,.18)}}
  @keyframes fadeup{0%,20%{opacity:0;transform:translateY(6px)}40%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}
  @keyframes pop6{0%{transform:scale(0)}8%{transform:scale(1.18)}14%,94%{transform:scale(1)}99%,100%{transform:scale(0)}}
  @keyframes fill6{0%,6%{width:0}18%{width:25%}32%{width:50%}48%,94%{width:75%}99%,100%{width:0}}
  @keyframes tolslide{0%,22%{left:6%}58%{left:54%}72%,92%{left:50%}100%{left:6%}}

  /* ---- workflow diagram ---- */
  .workflow{max-width:1160px;margin:0 auto;padding:24px 24px 48px}
  .wf-panel{position:relative;border-radius:28px;overflow:hidden;padding:52px 34px;
    background:radial-gradient(120% 100% at 50% -14%, #135B43 0%, #0C4230 52%, #06281D 100%);
    box-shadow:0 30px 66px rgba(6,30,22,.34)}
  .wf-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 26px}
  .wf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:0 0 16px}
  .wf-eyebrow::before{content:"";width:22px;height:2px;background:var(--mint)}
  .wf-panel h2{font-family:"Fraunces",serif;font-weight:600;color:#EAF4EC;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:.005em;margin:0 0 12px}
  .wf-lede{color:rgba(220,236,224,.7);font-size:16px;margin:0}
  .wf-scroll{position:relative;z-index:1;overflow-x:auto;padding:6px 0}
  .wf-canvas{position:relative;width:940px;height:560px;margin:0 auto}
  .wf-canvas .links{position:absolute;inset:0;width:940px;height:560px;pointer-events:none;z-index:1}
  .baseline{stroke:rgba(220,240,228,.26);stroke-width:1.5;fill:none}
  .flowline{stroke:var(--mint);stroke-width:2.4;fill:none;stroke-dasharray:5 7;animation:flowdash 1s linear infinite;filter:drop-shadow(0 0 4px rgba(79,224,160,.5))}
  @keyframes flowdash{to{stroke-dashoffset:-24}}
  .wf-node{position:absolute;z-index:2}
  .wf-in{width:118px;text-align:center}
  .wf-in .circle{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;color:var(--mint);display:grid;place-items:center;
    border:1px solid rgba(200,240,220,.18);background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.2)}
  .wf-in .circle svg{width:20px;height:20px}
  .wf-in .lbl{font-size:11px;color:rgba(220,236,224,.72);line-height:1.2}
  .wf-hub{width:120px;height:56px;border-radius:14px;color:#06281D;font-family:"Fraunces",serif;font-weight:600;font-size:15px;line-height:1.1;
    display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,#63EBB0,#37C88A);
    box-shadow:0 12px 28px rgba(79,224,160,.42),inset 0 1px 0 rgba(255,255,255,.5)}
  .wf-card{width:148px;min-height:220px;border-radius:16px;padding:15px 14px;
    border:1px solid rgba(200,240,220,.15);
    background:radial-gradient(130% 150% at 15% -12%, rgba(110,225,170,.15), transparent 55%),linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 26px rgba(0,0,0,.22);transition:transform .2s,border-color .2s,box-shadow .2s}
  .wf-card:hover{transform:translateY(-4px);border-color:rgba(79,224,160,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 40px rgba(0,0,0,.32)}
  .wf-card .ic{width:36px;height:36px;border-radius:10px;background:rgba(79,224,160,.16);border:1px solid rgba(120,225,170,.3);color:var(--mint);display:grid;place-items:center;margin-bottom:12px}
  .wf-card .ic svg{width:18px;height:18px}
  .wf-card h4{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:700;color:#EAF4EC;margin:0 0 10px;letter-spacing:-.01em;line-height:1.18}
  .wf-card ul{list-style:none;margin:0;padding:0}
  .wf-card li{font-size:11.5px;color:rgba(220,236,224,.72);display:flex;align-items:center;gap:7px;padding:3px 0;line-height:1.22}
  .wf-card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none;opacity:.9}
  .wf-erp{border-radius:16px;padding:16px 20px;border:1px solid rgba(200,240,220,.15);
    background:radial-gradient(130% 160% at 12% -20%, rgba(110,225,170,.16), transparent 55%),linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 26px rgba(0,0,0,.22);display:flex;flex-direction:column;justify-content:center}
  .wf-erp .t{font-size:12px;font-weight:600;color:var(--mint);margin-bottom:10px}
  .wf-erp .row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
  .wf-erp .erp{font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:#EAF4EC;opacity:.9}
  .wf-erp .more{font-family:"Inter",sans-serif;font-weight:500;font-size:13px;color:rgba(220,236,224,.6)}
  .wf-feed{border-radius:13px;padding:12px 14px;text-align:center;border:1px solid rgba(79,224,160,.4);
    background:linear-gradient(180deg, rgba(79,224,160,.18), rgba(79,224,160,.05));box-shadow:0 0 26px rgba(79,224,160,.14),inset 0 1px 0 rgba(255,255,255,.1)}
  .wf-feed .t{font-size:12.5px;font-weight:700;color:#EAF4EC;margin-bottom:2px}
  .wf-feed .s{font-size:11px;color:rgba(220,236,224,.7)}
  .wf-albl{position:absolute;z-index:2;font-size:10px;color:rgba(220,236,224,.78);white-space:nowrap;background:rgba(6,30,22,.6);padding:2px 7px;border-radius:6px}
  .wf-scan{position:absolute;left:250px;top:280px;z-index:1;width:0;height:0;pointer-events:none}
  .wf-scan span{position:absolute;left:0;top:0;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;border:2px solid var(--mint);opacity:0;animation:scanring 2.8s ease-out infinite}
  .wf-scan span:nth-child(2){animation-delay:1.4s}
  @keyframes scanring{0%{transform:scale(.55);opacity:.55}100%{transform:scale(2.6);opacity:0}}
  .wf-aibadge{position:absolute;left:180px;top:318px;width:140px;text-align:center;z-index:3}
  .wf-aibadge .chip{display:inline-flex;align-items:center;gap:5px;background:#fff;color:#07140E;font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:999px;box-shadow:0 8px 20px rgba(79,224,160,.45)}
  .wf-aibadge .chip svg{width:11px;height:11px;color:var(--green)}
  @media (prefers-reduced-motion:reduce){.flowline{animation:none;stroke-dasharray:none}.wf-scan span{animation:none;opacity:0}}

  @media (max-width:860px){
    body{padding:14px}
    .hero{grid-template-columns:1fr;gap:44px;padding:48px 28px;min-height:0}
    .stage{justify-self:center;max-width:340px}.sub{max-width:none}
    .card-main{right:-12px;width:234px}.card-chip{left:-6px}
    .logos{gap:30px}
    .fblock{grid-template-columns:1fr;gap:34px;padding:30px 18px}
    .fblock.flip .thumb{order:1}.fblock.flip .fcopy{order:2}
    .fcopy p{max-width:none}
  }
  @media (max-width:560px){
    body{outline:6px solid orange !important}
    .stage{display:none !important}
    .hero{display:block;padding:32px 20px;border-radius:24px}
    .hero .col+.col{margin-top:28px}
    .col,.fcopy,.thumb,.stage{min-width:0;max-width:100%}
    h1{font-size:31px}
    .sub{font-size:15.5px}
    .platform h2.title{font-size:26px}
    .platform .lede{font-size:15.5px}
    .fcopy h3{font-size:23px}
    .fcopy p{font-size:15.5px}
    .stage{width:100%;margin:0 auto}
    .card-gauge{left:0;top:12px;width:190px;padding:13px 15px}
    .card-stat{left:auto;right:0;bottom:16px;width:196px;padding:13px 15px}
    .platform{padding:48px 16px 56px}
    .fblock{display:block;padding:24px 4px}
    .fblock .fcopy{margin-top:22px}
    .thumb{min-height:0;padding:22px}
    .thumb .pc{width:100%!important;max-width:100%}
    .results{padding:8px 16px 56px}
    .results-panel{padding:30px 22px;border-radius:20px}
    .getstarted{padding:0 16px}
    .workflow{padding:16px 8px 40px}
  }
  @media (prefers-reduced-motion:reduce){
    [class*="anim"],.aline,.aarea,.adot,.dval,.th,.cs .d,.cres,.scanline,.scanedge,.airing,
    .card-main,.card-chip,.st,.qty1,.qty2,.fill,.qrow.flag,.review,.synced,.minibars i,.fillbar::after{
      animation:none!important}
    .aline,.th{stroke-dashoffset:0}.dval{stroke-dashoffset:9}
    .aarea,.adot,.cs .d,.review,.synced{opacity:1}.cres{transform:scale(1)}
    .st.a1{opacity:0}.st.a2{opacity:1}.qty1{opacity:0}.qty2{opacity:1}
    .fill{width:64%}.fillbar::after{transform:scaleX(1)}
    .fnode .fdone{animation:none;transform:scale(1)}.flow6-track::after{animation:none;width:75%}
    .mchk{animation:none;transform:scale(1)}.tolmark{animation:none;left:50%}.tolpill{animation:none;opacity:1}
  }

  /* ===== Case study / results ===== */
  .results{max-width:1120px;margin:24px auto 60px;padding:52px 48px;scroll-margin-top:26px;
    background:var(--surface-l);border:1px solid var(--line-l);border-radius:28px;
    box-shadow:0 22px 54px rgba(14,74,56,.08)}
  .results-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}
  .results-copy .eyebrow-l{margin:0 0 16px}
  .results-h{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--green-deep);font-size:clamp(24px,2.9vw,34px);line-height:1.14;letter-spacing:-.02em;margin:0 0 16px}
  .results-body{font-size:16px;line-height:1.62;color:var(--ink-soft);margin:0 0 24px;max-width:46ch}
  .results-copy .flink{font-size:15px}
  .results-panel{position:relative;overflow:hidden;border-radius:24px;padding:40px 38px;color:var(--on-dark);
    background:linear-gradient(150deg, rgba(16,90,66,.8), rgba(8,48,35,.82));
    -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 26px 60px rgba(6,30,22,.26), inset 0 1px 0 rgba(255,255,255,.22)}
  .results-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 88% 0%, rgba(79,224,160,.16), transparent 58%);pointer-events:none}
  .rs-num{position:relative;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(50px,6.6vw,72px);line-height:1;color:var(--mint);letter-spacing:-.03em;display:block}
  .rs-lbl{position:relative;display:block;margin-top:6px;font-size:14px;letter-spacing:.01em;color:rgba(244,243,238,.82)}
  .results-bars{position:relative;margin:26px 0 4px;display:grid;gap:14px}
  .rbar{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:12px}
  .rbar-cap{font-size:12.5px;color:rgba(244,243,238,.72)}
  .rtrack{height:10px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
  .rfill{display:block;height:100%;border-radius:inherit;transform-origin:left;animation:rgrow 1.3s cubic-bezier(.16,1,.3,1) both}
  .rfill-old{width:100%;background:rgba(255,255,255,.34)}
  .rfill-new{width:15.4%;background:var(--mint);box-shadow:0 0 16px rgba(79,224,160,.6);animation-delay:.28s}
  .rbar-val{font-size:13px;font-weight:600;color:var(--bone);min-width:52px;text-align:right}
  @keyframes rgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .results-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;position:relative}
  .results-chips li{font-size:12.5px;font-weight:500;color:var(--bone);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 12px}
  @media (max-width:820px){.results-inner{grid-template-columns:1fr;gap:32px}}
  @media (prefers-reduced-motion:reduce){.rfill{animation:none!important;transform:none!important}}

  /* ===== Get started closing ===== */
  .getstarted{max-width:1160px;margin:16px auto 0;padding:0 24px}
  .gs-panel{position:relative;border-radius:30px;overflow:hidden;min-height:470px;
    display:grid;place-items:center;padding:78px 40px;text-align:center;box-shadow:0 30px 66px rgba(6,30,22,.3)}
  .gs-photo{position:absolute;inset:0;z-index:0;background-color:#0A2018;
    background-image:url('/images/getstarted.png');
    background-image:-webkit-image-set(url('/images/getstarted.webp') type('image/webp'), url('/images/getstarted.png') type('image/png'));
    background-image:image-set(url('/images/getstarted.webp') type('image/webp'), url('/images/getstarted.png') type('image/png'));
    background-size:cover;background-position:center;background-repeat:no-repeat}
  .gs-photo::after{content:"";position:absolute;inset:0;
    background:radial-gradient(120% 100% at 50% -12%, rgba(16,128,92,.34), transparent 58%),linear-gradient(180deg, rgba(7,20,14,.42), rgba(7,20,14,.66))}
  .gs-tag{position:absolute;left:16px;bottom:12px;z-index:2;color:rgba(255,255,255,.42);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
  .gs-inner{position:relative;z-index:2;max-width:620px}
  .gs-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:0 0 18px}
  .gs-eyebrow::before,.gs-eyebrow::after{content:"";width:22px;height:2px;background:var(--mint);opacity:.7}
  .gs-h{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(30px,4.2vw,50px);line-height:1.06;letter-spacing:-.01em;color:#F3F7F3;margin:0 0 18px}
  .gs-sub{font-size:17px;line-height:1.6;color:rgba(224,238,229,.84);margin:0 0 30px}
  .gs-card{position:absolute;z-index:3}
  .gs-card.a{left:2.5%;top:22%;width:196px;padding:13px 14px;animation:float 7s ease-in-out infinite}
  .gs-card.a .chart{height:54px;margin-bottom:9px}
  .gs-card.a .chart svg{height:54px}
  .gs-card.a .gnum .big{font-size:19px}
  .gs-card.b{left:5%;bottom:9%;padding:14px 16px;display:flex;align-items:center;gap:12px;animation:float 6s ease-in-out infinite .8s}
  .gs-card .chip-txt .k{font-size:11px;color:var(--muted)}
  @media (max-width:1040px){.gs-card{display:none}.gs-panel{min-height:340px;padding:58px 26px}}
  @media (prefers-reduced-motion:reduce){.gs-card{animation:none!important}}