/* The page is the Figma frame (1920 × 6500) at its real coordinates, zoomed to the window width. */
  :root { --ink: #1d211f; --gray: #9aa19c; --muted: #6b7670; --green: #527969; }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: #ffffff; }
  body { font-family: "DM Sans", system-ui, sans-serif; font-weight: 300; color: var(--ink); font-optical-sizing: auto; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
  .page { position: relative; }
  /* every Figma section is one full screen: the 1920×1080 artboard is scaled to fit the window and centred */
  .sec { position: relative !important; top: auto !important; width: 100% !important; height: 100vh !important; min-height: 540px; display: flex; align-items: center; justify-content: center; }
  .stage { position: relative; width: 1920px; height: 1080px; flex: none; zoom: var(--s, 1); }
  .abs { position: absolute; }
  .sec { position: absolute; left: 0; width: 1920px; overflow: hidden; }
  p { margin: 0; }
  .nw { white-space: nowrap; }
  .r { text-align: right; }
  .c { text-align: center; }
  .g { color: var(--gray); }

  /* reveal */
  [data-r] { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s; transition-delay: var(--d, 0s); }
  [data-r="left"] { transform: translateX(-40px); }
  [data-r="right"] { transform: translateX(40px); }
  [data-r="scale"] { transform: scale(.94); }
  .in[data-r], .in [data-r] { opacity: 1; transform: none; filter: none; }

  /* ── 1 · cover ── */
  #cover { top: 0; height: 1100px; background: linear-gradient(180deg, #b9c8b6 0%, #a8b9a5 60%, #efefec 100%); }
  #cover .logo { left: 934px; top: 91px; width: 626px; height: 192px; opacity: .5; }
  #cover .tablet { left: 306px; top: 187px; width: 1399px; height: 822px; background: url(img/final/tablet-v2.png) top/100% auto no-repeat; }
  #cover .tablet { animation: floaty 7s ease-in-out infinite; animation-delay: 1.2s; }
  #cover .card { left: 215px; top: 851px; width: 554px; height: 127px; border-radius: 31.4px; background: rgba(50,53,51,.9); box-shadow: 0 3.1px 25px rgba(0,0,0,.12), inset 0 3.3px 3.3px rgba(255,255,255,.24); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  #cover .card .av { left: 25.1px; top: 22.8px; width: 81.6px; height: 81.6px; border-radius: 20.4px; background: url(img/final/avatar.png) center/cover; }
  #cover .card .t1 { left: 123.5px; top: 40.3px; font-size: 18px; color: #fff; }
  #cover .card .t2 { left: 123.5px; top: 66.9px; font-size: 15.6px; color: #bfbfbf; }
  #cover .card .go { left: 480.9px; top: 35.3px; width: 56.6px; height: 56.6px; transition: transform .35s; }
  #cover .card:hover .go { transform: rotate(45deg); }
  @keyframes floaty { 50% { transform: translateY(-10px); } }

  /* ── 2 · intro ── */
  #intro { top: 1100px; height: 1080px; background: linear-gradient(118.67deg, #212528 0.9%, #527969 101.5%); }
  #intro .lead { left: 210px; top: 179px; width: 1499px; font-size: 56px; font-weight: 300; font-variation-settings: "opsz" 40; line-height: 1.18; letter-spacing: -1.4px; text-align: center; }
  #intro .lead span { transition: color .5s, opacity .5s; }
  #intro .lead .w { opacity: .28; }
  #intro .lead .w.lit { opacity: 1; }
  #intro .lead .gw { color: var(--gray); }
  #intro .lead .ww { color: #fff; }
  #intro .road { left: 444px; top: 379px; width: 1033px; height: 544px; opacity: .85; }

  /* road scene (shared) */
  .roadscene { position: absolute; overflow: hidden; }
  .roadscene .in { position: absolute; left: 0; top: 0; width: 1728px; height: 910px; transform-origin: 0 0; }
  .roadscene svg { position: absolute; inset: 0; }
  .roadscene img { position: absolute; max-width: none; }
  .roadscene .dash, .roadscene .edge { fill: #ffffff; }

  /* ── 3 · problem ── */
  #problem { top: 2180px; height: 1080px; background: #f8f9f4; }
  .h44 { font-size: 44px; letter-spacing: -1.1px; }
  #problem .track { display: none; }
  #problem .fill { left: 953px; top: 183px; width: 14px; height: 842px; border-radius: 8px; background: linear-gradient(180deg, #b4c3b0, #527969); transform-origin: top; transform: scaleY(var(--p, 0)); }
  #problem .ticks { left: 953px; top: 183px; width: 14px; height: 842px;
    background: repeating-linear-gradient(180deg, #c9cfc8 0 2px, transparent 2px 8px); -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
  #problem .fill { z-index: 1; }
  .num { font-size: 110px; font-weight: 200; line-height: 1; letter-spacing: -2.75px; color: #d4d7d3; transition: color .8s; }
  .num.on { color: #b4c3b0; }
  .tag { font-size: 15px; color: var(--gray); }
  .steps { display: flex; gap: 4px; }
  .steps i { width: 26px; height: 24px; border-radius: 6px; background: #e2e4e0; color: #6b7670; font: 300 12px/24px "DM Sans", sans-serif; font-style: normal; text-align: center; transition: background .5s, color .5s; }
  .steps i.on { background: var(--green); color: #fff; }
  .p28 { font-size: 28px; }
  .q { font-size: 17px; line-height: 1.5; color: var(--muted); }
  .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
  .who img { width: 30px; height: 30px; }

  /* ── 4 · cards ── */
  #cards { top: 3260px; height: 1080px; background: #ffffff; }
  .pill-dark { left: 162px; top: 79px; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #1d211f; color: #fff; font-size: 15px; }
  .pill-dark img { width: 26px; height: 26px; animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { transform: scale(1.12); filter: brightness(1.15); } }
  .card { position: absolute; overflow: hidden; border-radius: 22.15px; background: #f7f7f5; }
  #roadCard { left: 324px; top: 202px; width: 743px; height: 380px; background: linear-gradient(90deg, #212528, #2e3d38 45%, #527969); }
  #roadCard .roadscene { left: 11.2px; top: 0; width: 721.5px; height: 379.8px; opacity: .85; }
  #roadCard .cap { left: 22.15px; top: 343.4px; font-size: 11.87px; color: #fff; }
  #leoCard { left: 1108.8px; top: 202px; width: 522.2px; height: 379.8px; }
  #leoCard .orb { left: 213.6px; top: 94.9px; width: 94.9px; height: 94.9px; animation: bob 4s ease-in-out infinite; filter: drop-shadow(0 16px 26px rgba(47,74,61,.28)); }
  #leoCard .glow { left: 186px; top: 67px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(127,209,166,.35), transparent 65%); animation: glow 4s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-8px); } }
  @keyframes glow { 50% { transform: scale(1.25); opacity: .6; } }
  #leoCard .t { left: 0; top: 212px; width: 522.2px; font-size: 22.15px; }
  #leoCard .s { left: 0; top: 246.8px; width: 522.2px; font-size: 12.66px; color: var(--muted); }
  #healthCard { left: 324px; top: 627.3px; width: 522.2px; height: 332.3px; }
  #healthCard .l { left: 22.15px; top: 22.15px; font-size: 11.87px; color: var(--muted); }
  #healthCard .score { left: 22.15px; top: 41.1px; letter-spacing: -.95px; }
  #healthCard .score b { font-weight: 300; font-size: 37.98px; } #healthCard .score small { font-size: 18.99px; }
  #healthCard .d { left: 22.15px; top: 91.8px; font-size: 11.87px; color: #3f8a5a; }
  .glass-tabs { left: 22.15px; top: 123.4px; width: 300.6px; height: 34.8px; border-radius: 999px; border: .79px solid #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); box-shadow: 0 7.9px 20.6px rgba(28,33,31,.08); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
  .glass-tabs .act { position: absolute; left: 2.37px; top: 2.37px; width: 68px; height: 28.5px; border-radius: 999px; background: linear-gradient(180deg, #4a524e, #2b302e);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.25); transition: left .6s cubic-bezier(.34,1.56,.64,1), width .6s cubic-bezier(.34,1.56,.64,1); }
  .glass-tabs span { position: absolute; top: 8.7px; font-size: 10.29px; color: var(--muted); text-align: center; transition: color .35s; }
  .glass-tabs span.on { color: #fff; }
  #healthCard .chart { left: 23.7px; top: 174.1px; width: 474.7px; height: 142.4px; }
  #healthCard .chart .ln { stroke-dasharray: 600; stroke-dashoffset: 600; }
  #healthCard.in .chart .ln { animation: draw 1.6s .5s cubic-bezier(.3,.6,.2,1) forwards; }
  #healthCard .chart .area { opacity: 0; }
  #healthCard.in .chart .area { animation: fadeUp 1.2s 1s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  #notesCard { left: 902.5px; top: 627.3px; width: 727.9px; height: 332.3px; }
  #notesCard .brand { left: 0; top: 110.8px; width: 727.9px; font-size: 87px; letter-spacing: -2.18px; color: var(--green); }
  .note { position: absolute; display: flex; align-items: center; gap: 9.5px; padding: 9.5px 14.24px 9.5px 9.5px; border-radius: 14.24px; background: rgba(255,255,255,.88); box-shadow: 0 11px 27px rgba(28,33,31,.12); font-size: 11.08px; }
  .note img { width: 26.9px; height: 26.9px; }
  .note b { display: block; font-weight: 300; color: var(--ink); } .note span { display: block; color: var(--muted); margin-top: 1.6px; }
  .note { opacity: 0; transform: translateY(16px) scale(.94); }
  #notesCard.in .note { animation: pop .7s cubic-bezier(.34,1.56,.64,1) forwards, drift 6s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + .7s); }
  @keyframes pop { to { opacity: 1; transform: none; } }
  @keyframes drift { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(-6px); } }

  /* ── 5 · process ── */
  #process { top: 4340px; height: 1080px; background: #efefec; }
  #process .dot { left: 160px; top: 166px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4.5px rgba(82,121,105,.18); animation: pulse 2.4s infinite; }
  #process .eyebrow { left: 182px; top: 160px; font-size: 15px; font-weight: 400; }
  #process .tile { left: 160px; top: 320px; width: 280px; height: 280px; }
  #process .tile path { stroke-dasharray: 420; stroke-dashoffset: 420; }
  #process.in .tile path { animation: draw 1.8s .3s cubic-bezier(.3,.6,.2,1) forwards; }
  #process .band { left: 760px; top: 321px; width: 1000px; height: 149px; border-radius: 24px; background: linear-gradient(90deg, rgba(180,195,176,.28), rgba(180,195,176,0)); transition: top .8s cubic-bezier(.34,1.3,.64,1); }
  #process .porb { left: 675px; top: 371px; width: 50px; height: 50px; transition: top .8s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 10px 18px rgba(47,74,61,.25)); }
  #process .porb.hop { animation: hop .8s cubic-bezier(.3,.7,.3,1); }
  @keyframes hop { 40% { transform: translateX(-26px) scale(1.06, .94); } 100% { transform: none; } }
  .pn { font-size: 56px; font-weight: 200; letter-spacing: -1.4px; transition: color .5s; }
  .pn.on { color: var(--green); }
  .pl { font-size: 14px; color: var(--gray); }
  .pt { font-size: 19px; font-weight: 400; }
  .pd { font-size: 16px; line-height: 1.5; color: var(--muted); width: 640px; }
  .rule { height: 1px; width: 1000px; background: rgba(29,33,31,.09); }

  /* ── 6 · system overview (last cover) ── */
  #system { top: 5420px; height: 1080px; background: #ffffff; }
  #system .hero { left: 160px; top: 227px; width: 1600px; height: 626.5px; border-radius: 53px; overflow: hidden; background: linear-gradient(180deg, #16241d, #2f5444); }
  #system .ttl { left: 341.6px; top: 233.7px; width: 917px; display: flex; flex-direction: column; align-items: center; gap: 14.46px; text-transform: uppercase; }
  #system .ttl .k { font-size: 15.06px; letter-spacing: 2.41px; color: #a9c3b3; }
  #system .ttl .h { font-size: 120.48px; font-weight: 200; line-height: 1.04; letter-spacing: -1.2px; color: #eaf2ed; white-space: nowrap; }
  #system .ttl .h span { display: inline-block; opacity: 0; transform: translateY(40px); filter: blur(10px); transition: all .9s cubic-bezier(.2,.7,.2,1); }
  #system.in .ttl .h span { opacity: 1; transform: none; filter: none; }
  #system .wave { left: 0; top: 433.7px; width: 1600px; height: 144.6px; overflow: visible; }
  #system .wave path { stroke-dasharray: 1800; stroke-dashoffset: 1800; }
  #system.in .wave path { animation: draw 2.4s .4s ease-out forwards, flow 9s 2.8s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -1800; } }
  .chip { position: absolute; padding: 8.43px 16.87px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1.2px solid rgba(255,255,255,.18); color: #e6efe9; font-size: 16.27px; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: bob 5s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-r], .note, #system .ttl .h span { opacity: 1 !important; transform: none !important; filter: none !important; }
    #healthCard .chart .ln, #process .tile path, #system .wave path { stroke-dashoffset: 0 !important; }
    #healthCard .chart .area { opacity: 1 !important; }
  }

  /* health card · gauge (Figma) */
  #healthCard .gauge{left:50%;top:70px;width:400px;height:210px;transform:translateX(-50%)}
  #healthCard #harea{transition:stroke-dasharray 1.6s cubic-bezier(.2,.7,.2,1) .3s}
  #healthCard.in #harea{stroke-dasharray:85 100}
  #healthCard .score.c{left:0;right:0;top:170px;text-align:center}
  #healthCard .score b{font-size:64px;font-weight:200;color:#1d211f}
  #healthCard .d.c{left:0;right:0;top:252px;text-align:center;font-size:13px;color:#727a75}

  /* ── research (Figma) ── */
  #research { background: #ffffff; }
  .eyebrow2 { font-size: 15px; font-weight: 400; color: var(--ink); }
  .lede { font-size: 18px; line-height: 1.55; color: var(--muted); }
  #research { background: #ffffff; }
  #research .lt { color: #1d211f !important; } #research .gl { color: var(--gray) !important; } #research .lede.lt { color: var(--muted) !important; }
  .rline path { stroke: #b4c3b0; }
  #research .lt { color: #fff; } #research .gl { color: rgba(255,255,255,.55); } #research .lede.lt { color: rgba(255,255,255,.78); }
  .rline path { stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-dasharray: 1600; stroke-dashoffset: 1600; }
  #research.in .rline path { animation: draw 1.6s .35s cubic-bezier(.3,.6,.2,1) forwards; }
  .rcards { left: 160px; top: 390px; width: 1600px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .rcard { position: relative; height: 410px; padding: 40px 40px 44px; border-radius: 40px; display: flex; flex-direction: column;
    background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.85); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px rgba(40,70,55,.16); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
  .rcard:hover { transform: translateY(-8px); box-shadow: 0 40px 90px rgba(40,70,55,.22); }
  .ric { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.75); box-shadow: 0 6px 20px rgba(40,70,55,.12); }
  .ric svg { width: 26px; height: 26px; fill: none; stroke: #303633; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .rcard em { font-style: normal; margin-top: auto; font-size: 64px; font-weight: 200; letter-spacing: -2px; line-height: 1; color: #3f6b57; }
  .rcard b { margin-top: 14px; font-weight: 300; font-size: 30px; letter-spacing: -.5px; color: #1d211f; }
  .rcard p { margin-top: 10px; font-size: 17px; line-height: 1.5; color: #4f5a55; }
  .truck3d { animation: floaty 7s ease-in-out infinite; }
  /* ── insights ── */
  .q { max-width: 420px; }
  /* ── cards: live pill + chat card ── */
  .livepill { left: 22px; top: 22px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); color: #fff; font-size: 13px; }
  .livepill i { width: 7px; height: 7px; border-radius: 50%; background: #9ed9a7; box-shadow: 0 0 0 3px rgba(158,217,167,.25); animation: pulse 2.4s infinite; }
  #chatCard { left: 902.5px; top: 627.3px; width: 727.9px; height: 332.3px; }
  #chatCard .corb { left: 340px; top: 44px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #f6faf6 0 10%, #cfe0d4 35%, #7ea08b 72%, #3c5a46 100%); box-shadow: 0 10px 22px rgba(47,74,61,.25); animation: bob 4s ease-in-out infinite; }
  #chatCard .ct { left: 0; top: 112px; width: 727.9px; font-size: 22px; }
  #chatCard .cin { left: 132px; top: 162px; width: 464px; height: 46px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(28,33,31,.06); display: flex; align-items: center; padding: 0 8px 0 18px; gap: 10px; font-size: 12px; color: #9aa19c; }
  #chatCard .cin .typed { flex: 1; }
  #chatCard .cin .mic { width: 8px; height: 12px; border: 1.2px solid #9aa19c; border-radius: 4px; }
  #chatCard .cin .send { width: 30px; height: 30px; border-radius: 50%; background: #303633; }
  #chatCard .cchips { left: 0; top: 226px; width: 727.9px; display: flex; justify-content: center; gap: 8px; }
  #chatCard .cchips span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 10.5px; color: var(--muted); opacity: 0; transform: translateY(8px); }
  #chatCard.in .cchips span { animation: pop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
  #chatCard.in .cchips span:nth-child(2) { animation-delay: .1s; } #chatCard.in .cchips span:nth-child(3) { animation-delay: .2s; } #chatCard.in .cchips span:nth-child(4) { animation-delay: .3s; }
  #process .tile.truck3d { left: 120px; top: 300px; width: 340px; height: auto; }
  /* ── information architecture ── */
  #flow { background: #f4f5f0; }
  .flines path { fill: none; stroke: #c9d6cc; stroke-width: 2; stroke-dasharray: 420; stroke-dashoffset: 420; }
  .flines circle { fill: #c9d6cc; opacity: 0; }
  #flow.in .flines path { animation: draw 1.1s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: calc(.3s + var(--i) * .08s); }
  #flow.in .flines circle { animation: fadeUp .4s forwards; animation-delay: calc(1s + var(--i) * .08s); }
  .fnode { display: flex; flex-direction: column; justify-content: center; width: 300px; height: 68px; padding: 0 22px; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(48,66,56,.08); }
  .fnode b { font-weight: 300; font-size: 19px; color: var(--ink); } .fnode span { font-size: 13px; color: var(--muted); margin-top: 2px; }
  .fnode.dark { background: #303633; } .fnode.dark b { color: #fff; } .fnode.dark span { color: #b9c2bc; }
  .fnode.start { flex-direction: row; align-items: center; gap: 14px; width: 240px; height: 84px; background: #303633; border-radius: 999px; padding: 0 26px 0 14px; }
  .fnode.start .fi { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
  .fnode.start b { color: #fff; display: block; } .fnode.start span { color: #b9c2bc; display: block; }
  /* ── design system, one screen ── */
  #ds { background: #f4f5f0; }
  .dslab { font-size: 13px; color: var(--muted); letter-spacing: .3px; margin-bottom: 14px; }
  .dsface { font-size: 170px; font-weight: 200; letter-spacing: -6px; line-height: .95; color: #a9bfae; }
  .dsweights { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 26px; border-top: 1px solid rgba(48,54,51,.1); }
  .dsweights div { padding: 16px 16px 0 0; } .dsweights b { display: block; font-size: 44px; color: var(--ink); } .dsweights span { font-size: 12px; color: var(--muted); }
  .dsscale { margin-top: 30px; border-top: 1px solid rgba(48,54,51,.1); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
  .dsscale p { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink); }
  .dsscale em { font-style: normal; font-size: 12px; color: var(--gray); }
  .dspal { display: grid; grid-template-columns: 1.5fr .8fr 1fr; grid-template-rows: 96px 96px; gap: 10px; }
  .dspal .sw { border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; }
  .dspal .sw b { font-weight: 400; } .dspal .sw span { opacity: .75; }
  .sw.linen { grid-row: 1 / 3; background: linear-gradient(135deg, #f1f3ec, #e3e9dd 55%, #d3dfd0); }
  .sw.card { background: #fff; border: 1px solid rgba(48,54,51,.08); }
  .sw.glass { background: rgba(255,255,255,.45); border: 1px solid #fff; backdrop-filter: blur(10px); }
  .sw.sage { background: #3f6b57; color: #fff; } .sw.graph { background: #303633; color: #fff; }
  .sw.glow { grid-column: 3; grid-row: 1 / 3; background: radial-gradient(circle at 50% 45%, #f6faf6 0%, #cfe0d4 32%, #7ea08b 70%, #3c5a46 100%); color: #fff; }
  .sw.card { grid-column: 2; grid-row: 1; } .sw.glass { display: none; } .sw.sage { grid-column: 2; grid-row: 2; } .sw.graph { display: none; }
  .dsstat { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
  .dsstat span { padding: 5px 12px; border-radius: 12px; font-size: 13px; }
  .dsstat .ok { background: #e6ffdc; color: #2d5a3b; } .dsstat .warn { background: #ffe7c0; color: #92400e; } .dsstat .bad { background: #fbe0dd; color: #a8433f; } .dsstat .blue { background: #d1daf3; color: #34406a; }
  .dsstat .pin { margin-left: 10px; } .dsstat .pin + .pin { margin-left: 0; } .dsstat .pin img { width: 26px; height: 32px; display: block; filter: drop-shadow(0 3px 6px rgba(60,90,70,.2)); }
  .dscomp { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto auto; gap: 12px; }
  .dkpi { grid-row: 1 / 3; background: #fff; border-radius: 28px; padding: 20px 22px; box-shadow: 0 2.5px 25px rgba(0,0,0,.04); }
  .dkpi span { font-size: 14px; color: var(--ink); } .dkpi b { display: block; font-weight: 200; font-size: 34px; margin-top: 12px; } .dkpi em { font-style: normal; font-size: 12px; color: var(--muted); } .dkpi em i { font-style: normal; color: #42926b; margin-right: 6px; }
  .dalert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid #fff; }
  .dalert img { width: 44px; height: 44px; } .dalert div { flex: 1; } .dalert b { display: block; font-weight: 300; font-size: 14px; } .dalert span { font-size: 12px; color: var(--muted); } .dalert em { font-style: normal; font-size: 12px; color: var(--muted); align-self: flex-start; }
  .dctrl { display: flex; align-items: center; gap: 10px; }
  .dper { display: flex; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.7); }
  .dper span { padding: 9px 14px; font-size: 12px; color: var(--muted); border-radius: 999px; } .dper .on { background: #303633; color: #fff; }
  .dbtn { padding: 10px 18px; border-radius: 999px; background: #303633; color: #fff; font-size: 13px; }
  .darrow { width: 40px; height: 40px; }


  /* Leo card (Figma): a big orb rising behind a frosted glass card */
  #leoCard { background: #f7f7f5; }
  #leoCard .lorb { left: 158px; top: 68px; width: 206px; height: 206px; border-radius: 50%;
    background: linear-gradient(180deg, #f6faf6 0%, #cfe0d4 25%, #93b6a0 50%, #5d8a73 75%, #46705d 100%);
    box-shadow: 0 18px 40px rgba(60,90,70,.22); animation: rise 6s ease-in-out infinite; }
  @keyframes rise { 50% { transform: translateY(-8px); } }
  #leoCard .lglass { left: 56px; top: 165px; width: 409px; height: 158px; border-radius: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 34px;
    background: rgba(250,250,248,.62); border: 1px solid rgba(255,255,255,.95); backdrop-filter: blur(26px) saturate(1.1); -webkit-backdrop-filter: blur(26px) saturate(1.1);
    box-shadow: 0 18px 40px rgba(28,33,31,.08), inset 0 1px 0 rgba(255,255,255,.9); }
  #leoCard .lglass .t, #leoCard .lglass .s { position: static; width: auto; left: auto; top: auto; text-align: center; }
  #leoCard .lglass .t { font-size: 21px; color: #1d211f; }
  #leoCard .lglass .s { margin-top: 6px; font-size: 13px; color: var(--muted); }

  /* ── design system · bento ── */
  #ds { background: linear-gradient(160deg, #f1f3ec 0%, #e6ebe1 55%, #d9e3d6 100%); }
  .bento { left: 160px; top: 232px; width: 1600px; height: 780px; display: grid; grid-template-columns: 1.25fr .75fr .9fr 1.1fr; grid-template-rows: 1fr 1fr; gap: 24px; }
  .bt { position: relative; border-radius: 36px; padding: 30px 32px; overflow: hidden; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 24px 60px rgba(48,66,56,.10); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
  .bt:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(48,66,56,.14); }
  .bl { position: absolute; left: 32px; top: 26px; font-size: 13px; color: #727a75; letter-spacing: .3px; }
  /* typography: big Aa, the family, weights and the real scale */
  .t-type { grid-column: 1 / 3; background: #fff; display: flex; align-items: flex-end; gap: 44px; }
  .t-type .aa { font-size: 300px; font-weight: 200; letter-spacing: -14px; line-height: .78; color: #a9bfae; margin: 0 0 -6px -10px; }
  .t-type .tside { flex: 1; padding-bottom: 4px; }
  .t-type .fam { font-size: 30px; font-weight: 300; color: #1d211f; }
  .t-type .wrow { display: flex; gap: 18px; margin-top: 6px; font-size: 14px; color: #727a75; }
  .tscale { margin-top: 22px; border-top: 1px solid rgba(48,54,51,.08); }
  .tscale p { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(48,54,51,.06); color: #1d211f; }
  .tscale em { font-style: normal; font-size: 12px; color: #9aa39d; }
  /* Leo */
  .t-leo { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .bigorb { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #f6faf6 0%, #cfe0d4 25%, #93b6a0 50%, #5d8a73 75%, #46705d 100%);
    box-shadow: 0 24px 50px rgba(60,90,70,.28); animation: rise 6s ease-in-out infinite; }
  .bigorb i { display: grid; place-items: center; } .bigorb svg { width: 60px; height: 58px; fill: #20362b; }
  .t-leo .lcap { margin-top: 28px; font-size: 15px; color: #4f5a55; text-align: center; }
  /* colour bands */
  .t-col { grid-row: 1 / 3; display: flex; flex-direction: column; }
  .bands { margin-top: 36px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
  .bands div { flex: 1; border-radius: 20px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: #1d211f; }
  .bands div:first-child { flex: 1.6; align-items: flex-end; padding-bottom: 18px; }
  .bands b { font-weight: 400; font-size: 15px; } .bands em { font-style: normal; font-size: 12px; opacity: .7; }
  /* status: pins + pills */
  .t-stat { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; padding-top: 50px; }
  .t-stat .pins { display: flex; gap: 30px; align-items: flex-end; }
  .t-stat .spills { justify-content: center; }
  .t-stat .pins img { width: 52px; height: 64px; filter: drop-shadow(0 8px 14px rgba(60,90,70,.2)); }
  .t-stat .pins img:nth-child(2) { transform: translateY(-10px); } .t-stat .pins img:nth-child(3) { transform: translateY(-20px); }
  .spills { display: flex; flex-wrap: wrap; gap: 8px; }
  .spills span { padding: 6px 14px; border-radius: 14px; font-size: 14px; }
  .spills .ok { background: #e6ffdc; color: #2d5a3b; } .spills .warn { background: #ffe7c0; color: #92400e; } .spills .bad { background: #fbe0dd; color: #a8433f; } .spills .blue { background: #d1daf3; color: #34406a; }
  /* components on the real background */
  .t-comp { grid-column: 2 / 4; grid-row: 2; background: linear-gradient(140deg, #eef2ea, #dfe7da); display: flex; align-items: flex-end; gap: 16px; }
  .ckpi { width: 230px; flex: none; background: #fff; border-radius: 30px; padding: 22px 24px; box-shadow: 0 3px 25px rgba(0,0,0,.05); }
  .ckpi span { font-size: 15px; color: #1d211f; } .ckpi b { display: block; font-weight: 200; font-size: 40px; margin-top: 14px; color: #1d211f; }
  .ckpi em { font-style: normal; font-size: 13px; color: #727a75; } .ckpi em i { font-style: normal; color: #42926b; margin-right: 6px; }
  .cstack { flex: 1; display: flex; flex-direction: column; gap: 10px; }
  .calert { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid #fff; backdrop-filter: blur(12px); }
  .calert img { width: 48px; height: 48px; } .calert img.ph { border-radius: 14px; object-fit: cover; }
  .calert div { flex: 1; } .calert b { display: block; font-weight: 300; font-size: 14px; color: #1d211f; } .calert span { font-size: 12px; color: #727a75; }
  .calert em { font-style: normal; font-size: 12px; color: #727a75; align-self: flex-start; margin-top: 4px; }
  .calert .urg { display: flex; align-items: flex-end; gap: 2px; height: 16px; } .calert .urg s { width: 4px; border-radius: 2px; background: #ff4a3d; text-decoration: none; }
  .calert .urg s:nth-child(1) { height: 7px; } .calert .urg s:nth-child(2) { height: 11px; } .calert .urg s:nth-child(3) { height: 16px; }
  .cctl { position: absolute; left: 32px; right: 32px; top: 64px; display: flex; align-items: center; gap: 12px; }
  .cper { display: flex; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: 0 3px 16px rgba(0,0,0,.04); }
  .cper span { padding: 10px 16px; font-size: 13px; color: #727a75; border-radius: 999px; } .cper .on { background: #303633; color: #fff; }
  .cbtn { padding: 12px 22px; border-radius: 999px; background: #303633; color: #fff; font-size: 13px; }
  .carr { width: 40px; height: 40px; margin-left: auto; }
  /* controls */
  .t-ctl { grid-column: 4; grid-row: 1 / 3; display: none; }
  .t-col { grid-column: 4; }
  .t-stat { grid-column: 1; grid-row: 2; }
  .t-leo { grid-column: 3; grid-row: 1; }

  /* ── design system · editorial quadrants ── */
  #ds { background: #ffffff; }
  .dq-lines .v { position: absolute; left: 960px; top: 262px; width: 1px; height: 720px; background: linear-gradient(180deg, rgba(48,54,51,0), rgba(48,54,51,.12) 20%, rgba(48,54,51,.12) 80%, rgba(48,54,51,0)); }
  .dq-lines .h { position: absolute; left: 160px; top: 620px; width: 1600px; height: 1px; background: linear-gradient(90deg, rgba(48,54,51,0), rgba(48,54,51,.12) 15%, rgba(48,54,51,.12) 85%, rgba(48,54,51,0)); }
  .dq { width: 760px; }
  .dqk { font-size: 13px; color: #727a75; letter-spacing: .4px; text-transform: uppercase; }
  .dqk em { font-style: normal; color: #3f6b57; margin-right: 12px; }
  /* 01 type */
  .dq-type { display: flex; align-items: flex-end; gap: 48px; margin-top: 22px; }
  .dq-type .aa { font-size: 230px; font-weight: 200; letter-spacing: -10px; line-height: .8; color: #a9bfae; margin: 0 0 -4px -8px; }
  .dq-type .fam { font-size: 15px; color: #727a75; margin-bottom: 14px; }
  .dq-type .w { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; font-size: 30px; letter-spacing: -.5px; color: #1d211f; padding: 8px 0; border-top: 1px solid rgba(48,54,51,.07); }
  .dq-type .w span { font-size: 12px; font-weight: 300; letter-spacing: 0; color: #9aa39d; white-space: nowrap; }
  /* 02 Leo gradient */
  .dq-leo { display: flex; align-items: center; gap: 70px; margin-top: 24px; }
  .lorb2 { width: 250px; height: 250px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(180deg, #f6faf6 0%, #cfe0d4 25%, #93b6a0 50%, #5d8a73 75%, #46705d 100%);
    box-shadow: 0 30px 60px rgba(60,90,70,.26), 0 0 0 14px rgba(255,255,255,.35); animation: rise 6s ease-in-out infinite; }
  .lorb2 svg { width: 70px; height: 68px; fill: #20362b; }
  .stops { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 30px; }
  .stops .rail { position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border-radius: 3px; background: linear-gradient(180deg, #f6faf6, #cfe0d4, #93b6a0, #5d8a73, #46705d); box-shadow: inset 0 0 0 1px rgba(48,54,51,.06); }
  .stops p { display: flex; align-items: center; gap: 14px; font-size: 15px; color: #1d211f; letter-spacing: .3px; }
  .stops i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(48,54,51,.08); }
  .stops span { font-size: 12px; color: #9aa39d; margin-left: 6px; }
  /* 03 colour */
  .dq-col { display: flex; gap: 22px; margin-top: 30px; }
  .dq-col div { display: flex; flex-direction: column; }
  .dq-col i { width: 126px; height: 168px; border-radius: 63px; box-shadow: 0 18px 40px rgba(48,66,56,.12), inset 0 0 0 1px rgba(48,54,51,.05); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .dq-col div:hover i { transform: translateY(-8px); }
  .dq-col b { margin-top: 18px; font-weight: 300; font-size: 17px; color: #1d211f; }
  .dq-col span { margin-top: 3px; font-size: 12px; color: #9aa39d; letter-spacing: .3px; }
  /* 04 status */
  .dq-stat { display: flex; gap: 46px; margin-top: 44px; align-items: flex-end; }
  .dq-stat div { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .dq-stat img { width: 58px; height: 72px; filter: drop-shadow(0 10px 18px rgba(60,90,70,.2)); animation: rise 5s ease-in-out infinite; }
  .dq-stat div:nth-child(2) img { animation-delay: -1.6s; } .dq-stat div:nth-child(3) img { animation-delay: -3.2s; }
  .dq-stat .avail { width: 58px; height: 58px; border-radius: 50%; margin-bottom: 7px; background: linear-gradient(180deg, #eef1fb, #a9b6e6); box-shadow: 0 10px 18px rgba(52,64,106,.18); }
  .dq-stat small { margin-top: -8px; font-size: 12px; color: #9aa39d; white-space: nowrap; }
  .dq-stat span { padding: 7px 16px; border-radius: 15px; font-size: 14px; }
  .dq-stat .ok { background: #e6ffdc; color: #2d5a3b; } .dq-stat .warn { background: #ffe7c0; color: #92400e; } .dq-stat .bad { background: #fbe0dd; color: #a8433f; } .dq-stat .blue { background: #d1daf3; color: #34406a; }

  /* hover: Leo's notes rise out of the glass, like papers from a folder */
  #leoCard .lorb { z-index: 1; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s; }
  #leoCard .lglass { z-index: 3; }
  /* the notes keep our original note design (.note); here they only get their place and motion */
  /* layers: orb (back) → notes (middle) → glass (front). The notes rise from behind the glass, fanned like the reference */
  #leoCard .lnote { z-index: 2; left: 261px; top: 240px; opacity: 0; animation: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transform: translate(-50%, -50%) scale(.9); transition: transform .85s cubic-bezier(.2,.9,.25,1.12), opacity .4s; }
  #leoCard .lnote.n2 { display: none; }
  #leoCard:hover .lnote { opacity: 1; }
  #leoCard:hover .n1 { transform: translate(calc(-50% - 70px), calc(-50% - 132px)) rotate(-10deg); transition-delay: .04s; }
  #leoCard:hover .n3 { transform: translate(calc(-50% + 112px), calc(-50% - 166px)) rotate(14deg); transition-delay: .12s; }
  #leoCard:hover .lorb { animation-play-state: paused; }

  /* hover: the health gauge keeps drawing itself, the score counts with it */
  #healthCard:hover #harea { animation: gloop 2.6s cubic-bezier(.3,.6,.2,1) infinite; }
  @keyframes gloop { 0% { stroke-dasharray: 0 100; } 55%, 88% { stroke-dasharray: 85 100; } 100% { stroke-dasharray: 85 100; } }

  /* hover: a cursor taps a suggestion and a short talk with Leo plays, then it resets */
  #chatCard .corb, #chatCard .ct, #chatCard .cin, #chatCard .cchips { transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1), filter .45s; }
  #chatCard.talk .corb, #chatCard.talk .ct, #chatCard.talk .cin, #chatCard.talk .cchips { opacity: 0; transform: translateY(-14px); filter: blur(6px); pointer-events: none; }
  #chatCard.talk .cchips span { animation: none; }
  .cconv { left: 0; top: 0; width: 727.9px; height: 332.3px; opacity: 0; pointer-events: none; transition: opacity .45s; }
  #chatCard.talk .cconv { opacity: 1; }
  .cme { position: absolute; right: 40px; top: 34px; padding: 9px 16px; border-radius: 16px; background: #fff; font-size: 12.5px; color: #1d211f; box-shadow: 0 4px 14px rgba(28,33,31,.06);
    opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .cleo { position: absolute; left: 40px; top: 84px; display: flex; gap: 10px; align-items: flex-start; opacity: 0; transition: opacity .4s; }
  .cleo img { width: 26px; height: 26px; flex: none; } .cleo p { font-size: 13px; color: #1d211f; margin-top: 4px; }
  .ctyping { display: inline-flex; gap: 4px; } .ctyping i { width: 6px; height: 6px; border-radius: 50%; background: #93b6a0; animation: typ 1s infinite; }
  .ctyping i:nth-child(2) { animation-delay: .15s; } .ctyping i:nth-child(3) { animation-delay: .3s; }
  @keyframes typ { 50% { opacity: .3; transform: translateY(-2px); } }
  .ctext { display: none; }
  .clist { position: absolute; left: 76px; top: 124px; width: 470px; display: flex; flex-direction: column; gap: 8px; }
  .clist div { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 14px; background: rgba(255,255,255,.8); font-size: 11.5px;
    opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .clist b { font-weight: 300; color: #1d211f; } .clist span { color: var(--muted); flex: 1; }
  .clist em { font-style: normal; padding: 5px 12px; border-radius: 999px; background: #303633; color: #fff; font-size: 10.5px; }
  #chatCard.s1 .cme { opacity: 1; transform: none; }
  #chatCard.s2 .cleo { opacity: 1; }
  #chatCard.s3 .ctyping { display: none; } #chatCard.s3 .ctext { display: inline; }
  #chatCard.s4 .clist div { opacity: 1; transform: none; }
  #chatCard.s4 .clist div:nth-child(2) { transition-delay: .12s; } #chatCard.s4 .clist div:nth-child(3) { transition-delay: .24s; }
  .ccur { position: absolute; z-index: 5; left: 640px; top: 300px; opacity: 0; pointer-events: none; transition: left .8s cubic-bezier(.45,0,.2,1), top .8s cubic-bezier(.45,0,.2,1), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
  .ccur span { position: absolute; left: -14px; top: -14px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(63,107,87,.6); opacity: 0; }
  .ccur.click span { animation: ripple .6s ease-out; }
  @keyframes ripple { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }
  #chatCard .cchips span.press { background: #303633; color: #fff; transform: scale(.96); transition: all .2s; }

  /* user flow: the research gradient — the intro's green at the top, fading to light */
  #flow { background: linear-gradient(118.67deg, #212528 0.9%, #527969 101.5%) !important; }
  #flow .fnode { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
  #flow .fnode b { color: #fff; } #flow .fnode span { color: rgba(255,255,255,.6); }
  #flow .fnode.dark, #flow .fnode.start { background: #fff !important; border-color: #fff !important; }
  #flow .fnode.dark b, #flow .fnode.start b { color: #1d211f; } #flow .fnode.dark span, #flow .fnode.start span { color: #727a75; }
  #flow .fnode.start .fi { background: #303633 !important; }
  #flow .flines path { stroke: rgba(255,255,255,.28) !important; } #flow .flines circle { fill: rgba(255,255,255,.55) !important; }
  #flow .eyebrow2, #flow .h44 { color: #fff; } #flow .h44 .g { color: rgba(255,255,255,.6); }
  #flow .fnode { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  #flow .fnode.dark { background: #303633; border-color: #303633; }
  #flow .fnode.start { background: #303633; border-color: #303633; } #flow .fnode.start .fi { background: rgba(255,255,255,.12); }
  #flow .flines path { stroke: #b4c3b0; } #flow .flines circle { fill: #93b6a0; }

  /* research → insights: the three threads converge and continue into the insights timeline */
  .rjoin { left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
  .rjoin path { fill: none; stroke: #b4c3b0; stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; }
  .rjoin circle { fill: #527969; opacity: 0; }
  #research.in .rjoin path { animation: draw 1.4s 1s cubic-bezier(.3,.6,.2,1) forwards; }
  #research.in .rjoin circle { animation: fadeUp .5s 2s forwards; }
  .rfound { left: 990px; top: 972px; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #3f6b57; font-size: 13px; box-shadow: 0 6px 18px rgba(40,70,55,.10); opacity: 0; }
  #research.in .rfound { animation: fadeUp .6s 2.1s forwards; }
  #problem .pre { left: 959px; top: 0; width: 2px; height: 183px; background: #b4c3b0; }

  /* research · simple: three lines, hairlines between them */
  .rsimple { left: 960px; top: 318px; width: 800px; border-top: 1px solid rgba(48,54,51,.1); }
  .rsimple div { display: grid; grid-template-columns: 70px 1fr; column-gap: 20px; padding: 34px 0; border-bottom: 1px solid rgba(48,54,51,.1); }
  .rsimple em { grid-row: 1 / 3; font-style: normal; font-size: 15px; color: #527969; padding-top: 10px; }
  .rsimple b { font-weight: 300; font-size: 34px; letter-spacing: -.8px; color: #1d211f; }
  .rsimple span { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--muted); }

  /* research · on the map: three pins pop up like bubbles, each with a glass tag */
  #research { background: #e9ede5 !important; }
  .rmap { left: -40px; top: -12px; width: 2140px; height: 1104px; background: url(img/final/map-bg.jpg) left top/2140px auto no-repeat; }
  .rmapfade { left: 0; top: 0; width: 1920px; height: 1080px; background: linear-gradient(90deg, rgba(248,249,244,.98) 0%, rgba(248,249,244,.96) 30%, rgba(248,249,244,.55) 42%, rgba(248,249,244,0) 54%), linear-gradient(180deg, rgba(248,249,244,.35), rgba(248,249,244,0) 30%, rgba(248,249,244,0) 75%, rgba(248,249,244,.45)); }
  .rpin { position: absolute; width: 0; height: 0; z-index: 2; }
  .rpin img { position: absolute; left: -50px; bottom: 0; width: 100px; height: 123px; transform-origin: 50% 100%; transform: translateY(30px) scale(0); opacity: 0;
    filter: drop-shadow(0 12px 20px rgba(60,90,70,.25)); }
  #research.found .rpin img { animation: pinPop .9s cubic-bezier(.3,1.7,.5,1) forwards, pinFloat 4.5s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + .9s); }
  @keyframes pinPop { 0% { opacity: 0; transform: translateY(30px) scale(0); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  @keyframes pinFloat { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(-8px); } }
  .rpin::after { content: ""; position: absolute; left: -16px; top: -4px; width: 32px; height: 8px; border-radius: 50%; background: rgba(48,66,56,.18); filter: blur(3px); opacity: 0; }
  #research.found .rpin::after { animation: fadeUp .5s forwards; animation-delay: calc(var(--d) + .4s); }
  .rtag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border-radius: 22px; width: 330px;
    background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 14px 36px rgba(48,66,56,.12); opacity: 0; transform: translateX(-10px); }
  .rtag.left { transform: translate(-100%, 0) translateX(10px); }
  #research.found .rtag { animation: tagIn .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d); }
  #research.in .rtag.left { animation-name: tagInL; }
  @keyframes tagIn { to { opacity: 1; transform: none; } }
  @keyframes tagInL { to { opacity: 1; transform: translate(-100%, 0); } }
  .rtag em { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #303633; color: #fff; font-style: normal; font-size: 13px; }
  .rtag b { display: block; font-weight: 300; font-size: 22px; letter-spacing: -.3px; color: #1d211f; }
  .rtag span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #4f5a55; }

  /* research · the product's DNA: dark pill, a search that types itself, alert-style cards, map filters */
  #research .rmapfade { background: radial-gradient(900px 520px at 50% 18%, rgba(248,249,244,.92), rgba(248,249,244,0) 70%), linear-gradient(180deg, rgba(248,249,244,.2), rgba(248,249,244,0) 40%, rgba(248,249,244,0) 70%, rgba(248,249,244,.75)) !important; }
  .rpilld { left: 50% !important; top: 96px !important; transform: translateX(-50%); }
  .rpilld.in, #research.in .rpilld { transform: translateX(-50%) !important; }
  .rpilld img { width: 26px; height: 26px; animation: none !important; }
  .rsearch { left: 420px; top: 130px; width: 1080px; height: 76px; display: flex; align-items: center; gap: 8px; padding: 0 28px 0 16px; border-radius: 999px;
    background: rgba(255,255,255,.72); border: 1px solid #fff; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 50px rgba(48,66,56,.14);
    font-size: 26px; font-weight: 300; letter-spacing: -.3px; color: #1d211f; }
  .rsearch .caret { width: 2px; height: 30px; background: #3f6b57; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .rsub { left: 0; top: 230px; width: 1920px; text-align: center; font-size: 17px; color: var(--muted); }
  .rtag { width: 360px !important; translate: 0 -100%; padding: 14px 18px 14px 14px !important; align-items: center; }
  .rtag div { flex: 1; min-width: 0; }
  .rtag b { font-size: 18px !important; }
  .rtag span { display: flex !important; align-items: flex-start; gap: 6px; font-size: 12px !important; color: #727a75 !important; }
  .rtag span svg { flex: none; margin-top: 2px; }
  .rtag > i { align-self: flex-start; font-style: normal; font-size: 11px; color: #727a75; white-space: nowrap; margin-top: 2px; }
  .rtag em { width: 36px !important; height: 36px !important; font-size: 12px !important; }
  .rpin, .rtag { transition: opacity .35s, filter .35s; }
  #research.focus .rpin, #research.focus .rtag { opacity: .25 !important; filter: saturate(.4); }
  #research.focus .rpin.hi, #research.focus .rtag.hi { opacity: 1 !important; filter: none; }

  /* the map fills the whole section at any window size, kept in step with the stage so the pins stay put */
  #research { background-color: #e8ede4 !important; background-image: url(img/final/map-bg.jpg) !important; background-repeat: no-repeat !important; }
  #research .rmap { display: none; }
  #research .rmapfade { left: -1200px; top: -600px; width: 4320px; height: 2280px;
    background: radial-gradient(900px 520px at 50% 34%, rgba(248,249,244,.92), rgba(248,249,244,0) 70%) !important; }

  /* research · classy: soft embossed roads on cream, quiet cards (our type, our pin) */
  #research { background: #f4f3ee !important; background-image: radial-gradient(1100px 600px at 50% 30%, #faf9f5, rgba(250,249,245,0)) !important; background-size: auto !important; background-position: 0 0 !important; }
  .rroads { left: -400px; top: -200px; width: 2760px; height: 1600px; overflow: visible; }
  .rroads path { fill: none; stroke-linecap: round; }
  .rroads .rb { stroke: #e3e0d6; stroke-width: 14; }
  .rroads .rt { stroke: #fbfaf6; stroke-width: 8; stroke-dasharray: 2600; stroke-dashoffset: 2600; }
  #research.in .rroads .rt { animation: draw 2.4s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: calc(var(--i) * .08s); }
  .rs2 { left: 460px !important; top: 118px !important; width: 1000px !important; height: 104px !important; padding: 0 44px 0 34px !important; gap: 14px !important;
    background: rgba(251,250,246,.86) !important; border: 1px solid #fff !important; box-shadow: 0 24px 60px rgba(60,58,48,.10), inset 0 1px 0 #fff !important;
    font-size: 42px !important; font-weight: 300 !important; letter-spacing: -1px !important; }
  .rs2 .caret { height: 40px !important; }
  .rs2sub { top: 254px !important; font-size: 17px !important; letter-spacing: .6px; color: #6b7670 !important; }
  #research .rpin img { left: -24px !important; width: 48px !important; height: 59px !important; filter: drop-shadow(0 8px 12px rgba(60,90,70,.28)) !important; }
  #research .rpin::after { left: -12px; width: 24px; height: 6px; }
  .rc { display: block !important; width: 340px !important; padding: 26px 30px 28px !important; border-radius: 24px !important;
    background: rgba(251,250,246,.9) !important; border: 1px solid #fff !important; box-shadow: 0 20px 50px rgba(60,58,48,.10) !important;
    translate: 0 calc(-50% - 30px) !important; }
  .rc .ey { font-size: 12px; font-weight: 400; letter-spacing: 2.4px; text-transform: uppercase; color: #3f6b57; }
  .rc b { display: block; margin-top: 10px; font-weight: 300 !important; font-size: 32px !important; letter-spacing: -.8px !important; color: #1d211f; }
  .rc span { display: block !important; margin-top: 10px; font-size: 16px !important; line-height: 1.45 !important; color: #6b7670 !important; }


  /* research · soft mesh gradient (sage + warm peach from the pins), roads become white glass */
  #research { background-color: #eef1ea !important;
    background-image:
      linear-gradient(180deg, rgba(248,249,244,0) 78%, #f8f9f4 100%),
      radial-gradient(60% 70% at 12% 18%, #cfe0d4 0%, rgba(207,224,212,0) 70%),
      radial-gradient(50% 60% at 88% 12%, #f6e7d6 0%, rgba(246,231,214,0) 70%),
      radial-gradient(55% 65% at 78% 92%, #b9cfc0 0%, rgba(185,207,192,0) 70%),
      radial-gradient(45% 55% at 22% 95%, #fbeee2 0%, rgba(251,238,226,0) 70%),
      radial-gradient(40% 40% at 50% 45%, #f7f8f3 0%, rgba(247,248,243,0) 75%) !important;
    background-size: 100% 100%, 140% 140%, 140% 140%, 140% 140%, 140% 140%, 140% 140% !important; background-position: 0 0 !important;
    animation: rmesh 22s ease-in-out infinite alternate; }
  @keyframes rmesh { to { background-position: 0 0, 100% 100%, 0% 100%, 100% 0%, 30% 70%, 50% 50%; } }
  #research .rmapfade { display: none !important; }
  .rroads .rb { stroke: rgba(255,255,255,.22); }
  .rroads .rt { stroke: rgba(255,255,255,.55); stroke-width: 5; }
  #research .rc, #research .rs2 { background: rgba(255,255,255,.72) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.8); }

  /* user flow · flowchart animation: intro → shrink aside → flowchart → highlighted path */
  #flow .fc { left:0; top:0; width:1920px; height:1080px; overflow:visible; }
  #flow .fc text { font-family:'DM Sans',sans-serif; font-weight:300; fill:#fff; }
  #flow .fc .pl rect { fill:#4f6860; stroke:rgba(255,255,255,.14); transition: fill .6s, stroke .6s; }
  #flow .fc .pl.end rect, #flow .fc .pg.lm rect, #flow .fc .open rect { fill:#f0f0f0; stroke:none; }
  #flow .fc .pl.end text, #flow .fc .pg.lm text { fill:#303633; transition: fill .6s; }
  #flow .fc .open circle { fill:#303633; } #flow .fc .open .t1 { fill:#303633; font-weight:400; } #flow .fc .open .t2 { fill:#6b7670; }
  #flow .fc .dm polygon { fill:rgba(38,51,47,.55); stroke:rgba(180,195,176,.7); stroke-width:1.2; transition: fill .6s, stroke .6s; }
  #flow .fc .ln path { fill:none; stroke:rgba(200,212,204,.55); stroke-width:1.5; }
  #flow .fc .ln circle, #flow .fc .fan circle { fill:#a9bbb0; }
  #flow .fc .lb { fill:#dfe8e1; opacity:.85; font-weight:400; }
  #flow .fc .lg text { fill:rgba(255,255,255,.6); } #flow .fc .l1 { fill:#f0f0f0; } #flow .fc .l2 { fill:#4f6860; }
  #flow .fc .l3 { fill:rgba(38,51,47,.55); stroke:rgba(180,195,176,.7); }
  /* 1 · intro: the start group, large and centred */
  #flow .fc-start { transform-box:view-box; transform-origin:0 0; transform:translate(503px,-445px) scale(1.443); transition: transform 1.5s cubic-bezier(.65,0,.25,1); }
  #flow .fc .fan path { fill:none; stroke:rgba(200,212,204,.55); stroke-width:1.3; stroke-dasharray:1; stroke-dashoffset:1; }
  #flow .fc .fan circle, #flow .fc .pg, #flow .fc .open { opacity:0; }
  #flow.in .fc .open { animation: fadeUp .6s .1s forwards; }
  #flow.in .fc .fan path { animation: fcdraw 1s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: calc(.35s + var(--i) * .07s); }
  #flow.in .fc .fan circle { animation: fadeUp .3s forwards; animation-delay: calc(1s + var(--i) * .07s); }
  #flow.in .fc .pg { animation: fadeUp .6s forwards; animation-delay: calc(.6s + var(--i) * .08s); }
  @keyframes fcdraw { to { stroke-dashoffset:0; } }
  /* 2 · go: start group shrinks aside, the rest arrives column by column */
  #flow.go .fc-start { transform:none; }
  #flow .fc-rest .it, #flow .fc .lg { opacity:0; transition: opacity .8s; transition-delay: calc(.6s + var(--o) * .16s); }
  #flow.go .fc-rest .it { opacity:.9; } #flow.go .fc .lg { opacity:1; transition-delay:1.6s; }
  /* 3 · highlight: Fleet overview → Critical alert → Leo chat → Approve → Done, the rest goes to background */
  #flow.hl .fc-rest .it:not(.h), #flow.hl .fc .pg:not(.fo), #flow.hl .fc .fan path, #flow.hl .fc .fan circle { opacity:.32 !important; transition: opacity 1s; transition-delay:0s; animation:none; }
  #flow.hl .fc .open { opacity:.35 !important; animation:none; transition: opacity 1s; }
  #flow.hl .fc .pg.lm rect { fill:#4f6860; } #flow.hl .fc .pg.lm text { fill:#fff; }
  #flow.hl .fc .pg.fo rect { fill:#f0f0f0; stroke:none; } #flow.hl .fc .pg.fo text { fill:#303633; }
  #flow .fc .gl { stroke:#eef5f0 !important; stroke-width:2.2 !important; stroke-dasharray:1; stroke-dashoffset:1; filter: drop-shadow(0 0 6px rgba(220,240,228,.55)); }
  #flow.hl .fc .h .gl { animation: fcdraw .55s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.5s + var(--h) * .42s); }
  #flow.hl .fc-rest .it.h { opacity:1; transition-delay: calc(.5s + var(--h) * .42s); }
  #flow.hl .fc .h .dm polygon { fill:rgba(47,74,64,.95); stroke:#eef5f0; transition-delay: calc(.5s + var(--h) * .42s); }
  #flow.hl .fc .h .pl.w rect { fill:#f0f0f0; stroke:none; transition-delay: calc(.5s + var(--h) * .42s); }
  #flow.hl .fc .h .pl.w text { fill:#303633; transition: fill .6s; transition-delay: calc(.5s + var(--h) * .42s); }
  #flow.hl .fc .h .lb { opacity:1; fill:#fff; }


  /* product strategy · white, active row = dark-green gradient bar (Figma) */
  #process { background:#ffffff !important; }
  #process .band { top:331px; height:130px; border-radius:20px; background: linear-gradient(90deg, #26332f 0%, #3a5a4c 38%, rgba(82,121,105,.55) 72%, rgba(82,121,105,0) 100%); }
  #process [data-k] { transition: color .5s; }
  #process .pn.on, #process .pt.on { color:#fff; }
  #process .pl.on, #process .pd.on { color:rgba(255,255,255,.72); }

  /* product strategy → solution, merged and pinned */
  #strat { position:relative; height:400vh; }
  #strat > #process.sec { position:sticky !important; top:0 !important; }
  #process .band { left:160px; width:820px; }
  #process .porb { left:92px; }
  #process .rule { width:820px; }
  #process .pd { width:440px; }
  #process .ptag { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#93a39a; padding:5px 10px; border:1px solid #dfe3dc; border-radius:999px; transition: color .5s, border-color .5s; }
  #process .ptag.on { color:#3f6b57; border-color:rgba(63,107,87,.35); background:rgba(255,255,255,.6); }
  #process .sxpanel { left:1000px; top:331px; width:760px; height:580px; border-radius:28px; background:#f6f7f3; }
  #process .card.sx { opacity:0; transform:translateY(26px) scale(.96); filter:blur(10px); transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1), filter .6s; pointer-events:none; box-shadow:0 30px 60px rgba(28,33,31,.10); }
  #process .card.sx.on { opacity:1; transform:none; filter:none; pointer-events:auto; transition-delay:.15s; }
  #process #healthCard { left:1119px; top:455px; }
  #process #chatCard { left:1016px; top:455px; }
  #process #leoCard { left:1119px; top:431px; }
  #process #roadCard { left:1008px; top:431px; }
  #process .sxdots { left:1380px; top:880px; transform:translateX(-50%); display:flex; gap:8px; }
  #process .sxdots i { width:6px; height:6px; border-radius:3px; background:#cfd5ce; transition: width .4s, background .4s; }
  #process .sxdots i.on { width:22px; background:#3f6b57; }
  /* beats */
  #healthCard.play #harea { animation: gloop 2.6s cubic-bezier(.3,.6,.2,1) infinite; }
  #leoCard.play .lnote { opacity:1; }
  #leoCard.play .n1 { transform: translate(calc(-50% - 70px), calc(-50% - 132px)) rotate(-10deg); transition-delay:.5s; }
  #leoCard.play .n3 { transform: translate(calc(-50% + 112px), calc(-50% - 166px)) rotate(14deg); transition-delay:.62s; }
  #roadCard .rap { left:50%; bottom:26px; transform:translate(-50%,20px); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px; border-radius:18px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(0,0,0,.18); opacity:0; white-space:nowrap; transition: opacity .5s, transform .7s cubic-bezier(.2,.9,.25,1.1); }
  #roadCard .rap img { width:30px; height:30px; }
  #roadCard .rap b { display:block; font-size:14px; font-weight:400; color:#1d211f; } #roadCard .rap span { font-size:11.5px; color:#727a75; }
  #roadCard .rap em { position:relative; font-style:normal; font-size:12.5px; color:#fff; background:#303633; border-radius:12px; padding:9px 14px; margin-left:8px; overflow:hidden; display:grid; }
  #roadCard .rap em i { grid-area:1/1; font-style:normal; transition: opacity .3s, transform .4s; text-align:center; }
  #roadCard .rap .a2 { opacity:0; transform:translateY(8px); }
  #roadCard.play .rap { opacity:1; transform:translate(-50%,0); transition-delay:.7s; }
  #roadCard.play .rap em { animation: apv 0s 2.4s forwards; }
  #roadCard.play .rap .a1 { opacity:0; transform:translateY(-8px); transition-delay:2.4s; }
  #roadCard.play .rap .a2 { opacity:1; transform:none; transition-delay:2.4s; }
  @keyframes apv { to { background:#3f6b57; } }

  /* product strategy · Figma: light sage bar, card top-right, hover per row */
  #process { background:#ffffff !important; }
  #process .band { top:321px; width:1000px !important; height:149px !important; border-radius:24px !important; background: linear-gradient(90deg, rgba(180,195,176,.45), rgba(180,195,176,0)) !important; }
  #process .porb { top:371px; }
  #process .rule { width:1000px !important; }
  #process .pd { width:640px !important; }
  #process .pn.on { color:var(--green) !important; } #process .pt.on { color:#1d211f !important; }
  #process .pl.on { color:var(--gray) !important; } #process .pd.on { color:var(--muted) !important; }
  #process .phit { left:160px; width:1090px; height:149px; z-index:5; cursor:default; }
  #process .card.sx { box-shadow:none; background:#f4f5f0; }
  #process #healthCard { left:1281px !important; top:220px !important; }
  #process #leoCard { left:1281px !important; top:220px !important; }
  #process #chatCard { left:1803px !important; top:220px !important; transform-origin:100% 0; translate:-100% 0; scale:.82; }
  #process #roadCard { left:1803px !important; top:220px !important; transform-origin:100% 0; translate:-100% 0; scale:.8; }

  /* typography (Figma · Slide 15) */
  #ds { background:#f4f4f0 !important; }
  #ds .tydot { left:160px; top:163px; width:12px; height:12px; border-radius:50%; border:1.5px solid #3f6b57; box-sizing:border-box; }
  #ds .tydot::after { content:""; position:absolute; inset:2.5px; border-radius:50%; background:#3f6b57; }
  #ds .tyey { left:180px; top:160px; font-size:13px; color:#303633; }
  #ds .tyh { left:160px; top:190px; color:#1d211f; } #ds .tyh .g { color:#9aa49f; }
  #ds .tybig { left:152px; top:236px; font-size:236px; font-weight:200; letter-spacing:-9px; line-height:1.27; color:#a9c1ad; }
  #ds .tyh1 { left:168px; width:1296px; height:1px; background:rgba(29,33,31,.09); }
  #ds .tyv { top:550px; width:1px; height:110px; background:rgba(29,33,31,.09); }
  #ds .tyw .k { font-size:13px; color:#727a75; }
  #ds .tyw .aa { margin-top:5px; font-size:46px; line-height:62px; color:#1d211f; display:inline-block; width:90px; }
  #ds .tyw .u { display:inline-block; vertical-align:top; margin-top:28px; font-size:11.5px; color:#9aa49f; }
  #ds .tyr { left:168px; width:1300px; }
  #ds .tyr .ex { color:#1d211f; white-space:nowrap; letter-spacing:-.2px; }
  #ds .tyr .nm, #ds .tyr .sp { position:absolute; top:50%; translate:0 -50%; font-size:12.5px; color:#727a75; }
  #ds .tyr .nm { left:968px; } #ds .tyr .sp { left:1148px; color:#9aa49f; }

  /* each live screen sits centred on its own row (row centre = 395.5 + 150·k) */
  #process #healthCard { top:229.5px !important; }
  #process #chatCard { top:409.5px !important; }
  #process #leoCard { top:505.5px !important; }
  #process #roadCard { top:693.5px !important; }

  /* ── Figma page 9 ── */
  #cover { background:#fafaf6 !important; }
  #cover .cvwm { left:1171px; top:255px; width:592px; height:181px; background:#d9dfd7; opacity:.5;
    -webkit-mask:url(img/final/flevo-logo.svg) center/contain no-repeat; mask:url(img/final/flevo-logo.svg) center/contain no-repeat; }
  #cover .cvmock { left:-12px; top:0; width:1944px; height:1080px; }
  #problem .ins-h { line-height:1.18; }
  #problem .ins-sub { left:160px; top:290px; width:380px; font-size:16px; line-height:1.55; color:var(--muted); }
  #problem .p28 { line-height:1.3; }
  #process { background:#efefec !important; overflow:hidden; }
  #process .rocks { left:0; top:139px; width:1212px; height:941px; }
  #process .band { transition: top .8s cubic-bezier(.34,1.3,.64,1), left .8s cubic-bezier(.34,1.3,.64,1) !important; }
  #process .porb { transition: top .8s cubic-bezier(.34,1.56,.64,1), left .8s cubic-bezier(.34,1.56,.64,1) !important; }
  #process .phit { width:1200px; }
  #process .pd { width:600px !important; }
  #cards { background:#ffffff !important; }
  #ds { background:#f4f5f0 !important; }
  #ds .t2big { left:169px; top:219px; font-size:236px; font-weight:200; letter-spacing:-9px; line-height:1.27; color:#a9c1ad; }
  #ds .t2r { left:178px; width:740px; }
  #ds .t2r .ex { color:#1d211f; white-space:nowrap; letter-spacing:-.2px; }
  #ds .t2r .nm, #ds .t2r .sp { position:absolute; top:50%; translate:0 -50%; font-size:12.5px; color:#727a75; }
  #ds .t2r .nm { left:467px; } #ds .t2r .sp { left:647px; color:#9aa49f; }
  #ds .ctile { border-radius:16px; }
  #ds .ctile span { position:absolute; left:13px; bottom:14px; font-size:10px; color:#4d5650; }
  #ds .t-linen { background:linear-gradient(135deg,#f0f2ec,#dbe3d5); }
  #ds .t-sage { background:#527969; } #ds .t-sage span, #ds .t-ink span { color:rgba(255,255,255,.85); }
  #ds .t-card { background:#fff; }
  #ds .t-glass { background:linear-gradient(180deg,#f7f8f4,#e6ebe3); }
  #ds .t-ink { background:#303633; }
  #ds .t-glow { background:linear-gradient(180deg,#f4f5f0 0%,#b9cfc0 35%,#6a917e 70%,#46705d 100%); }
  #devices { background:#ffffff; }
  #devices .dvipad { left:319px; top:46px; width:1139px; height:660px; }
  #devices .dvphone { left:888px; top:205px; width:737px; height:875px; }

  /* full-height sections: the rock images hang off the section's bottom edge, not the centred stage */
  #cover .cvmock { position:absolute; left:50%; bottom:min(0px, calc((100vh - 100vw / 1.8) * .8)); top:auto; width:max(100%, calc(1944px * var(--s, 1))); height:auto; transform:translateX(-50%); z-index:1; }
  @keyframes cvIn { from { opacity:0; } to { opacity:1; } }
  #cover .stage { z-index:0; }
  #process .rocks { position:absolute; left:0; bottom:0; top:auto; width:calc(1212px * var(--s, 1)); max-height:100%; object-fit:contain; object-position:left bottom; height:auto; z-index:0; pointer-events:none; }
  #process .stage { z-index:1; }

  /* cover: the live dashboard runs on the laptop screen (mapped onto the photo's screen corners) */
  #cover .cvmock { aspect-ratio:1683/935; }
  #cover .cvmock > img { position:absolute; inset:0; width:100%; height:100%; }
  #cover .cvscr { position:absolute; left:0; top:0; width:1512px; height:945px; transform-origin:0 0; overflow:hidden; background:#eff0eb; }
  #cover .cvscr iframe { width:1512px; height:945px; border:0; display:block; transform-origin:0 0; transform:scaleY(1.104); pointer-events:none; opacity:0; transition:opacity .6s; }
  #cover .cvscr.ready iframe { opacity:1; }
  #cover .cvscr::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%); }

  #cover .cvstill { position:absolute; left:0; top:0; width:1512px; height:945px; transform-origin:0 0; transform:scaleY(1.104); }
  #cover .cvscr.still .cvstill { opacity:1; }
  #cover .cvscr iframe { position:relative; z-index:1; }
  #cover .cvscr.still iframe { opacity:0; }

  #cover .cvwm[data-r] { transform:translateX(180px); filter:none; transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.3s cubic-bezier(.16,.84,.24,1); transition-delay:.15s; }
  #cover.in .cvwm[data-r] { transform:none; }

  /* ───────── mobile (393-wide artboards from Figma, zoomed to the screen) ───────── */
  .mo { display:none; }
  
  
  
  
  /* cover */
  
  
  
  
  /* intro */
  
  
  
  
  
  
  /* insights */
  
  
  
   
  
  
  
   
  
  
  
  
  
  
  
  
  
  
  /* product strategy: thin lines between rows, only the orb's row is coloured */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  /* live cards: one column */
  
  
  
  
  
  
  
  /* flow: the intro fan only */
  
  
  
  
  
  
  /* typography & colour */
  
  
  
  
  
  
  
  
  
  
  

   
   
    
   

  /* ── component wrapper: each card keeps its designed size and scales to the width it is given ── */
  html, body { margin:0; background:transparent; }
  .lc-fit { position:relative; width:100%; }
  .lc-fit > .lc-in { position:absolute; left:0; top:0; transform-origin:0 0; }
  .lc-fit .card { left:0 !important; top:0 !important; scale:none !important; }