:root{
    --f950:#082a1b; --f900:#12442c; --f800:#185737; --f700:#1a6e41;
    --f500:#2fa362; --f400:#54bb80; --f300:#8bd5a8; --f100:#dbf3e3; --f50:#f1faf4;
    --gold:#e9ad2a; --gold3:#edc14e; --o2:#8fd0ff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;background:#000;overflow:hidden}
  body{display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif}
  #stage-wrap{position:relative}
  /* The stage is a fixed 1920x1080 board scaled to fit the window, not a column
     of text. In an Arabic document its box is laid out from the right edge, so
     the scaled board landed 663px off to the left and half the window painted
     black. The geometry is forced left to right; the Arabic inside the scenes
     keeps its own direction. */
  html[dir="rtl"] #stage-wrap{direction:ltr}
  html[dir="rtl"] .scene{direction:rtl}
  #stage{
    position:relative;width:1920px;height:1080px;overflow:hidden;
    background:var(--f950);transform-origin:top left;
    user-select:none;-webkit-user-select:none;
  }
  /* A scene arrives, it does not merely appear. The slight over-scale settling
     to 1 is what separates an authored cut from a slideshow dissolve. The
     visibility delay keeps the outgoing scene on screen for its whole fade. */
  .scene{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transform:scale(1.018);
    transition:opacity .55s ease, transform .9s cubic-bezier(.2,.7,.25,1), visibility 0s linear .55s;
  }
  .scene.active{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .55s ease, transform .9s cubic-bezier(.2,.7,.25,1), visibility 0s;
  }
  /* Parallax: the particle layer travels less than the words in front of it, so
     the frame reads as having depth without a single new asset. */
  .scene .fx{ transform:translateY(20px) scale(1.05); transition:transform 1.3s cubic-bezier(.2,.7,.25,1); }
  .scene.active .fx{ transform:none; }
  .display{font-family:'Space Grotesk','Inter',sans-serif}

  .rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.25,1)}
  /* Headlines grow into place, body copy rises into it. Same stagger for both
     reads flat; splitting them by role is what makes the hierarchy felt. */
  .rv.display{transform:scale(.955)}
  .active .rv{opacity:1;transform:none}

  /* particles */
  .fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .ember{position:absolute;bottom:-20px;width:7px;height:7px;border-radius:50%;background:#ff9d45;opacity:0;animation:emberUp 5s linear infinite}
  @keyframes emberUp{0%{transform:translateY(0) scale(1);opacity:0}8%{opacity:.85}100%{transform:translateY(-1150px) translateX(60px) scale(.2);opacity:0}}
  .o2{position:absolute;bottom:-60px;font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;color:var(--o2);
      text-shadow:0 0 18px rgba(143,208,255,.8);opacity:0}
  .o2.a{animation:o2A linear infinite}
  .o2.b{animation:o2B linear infinite}
  @keyframes o2A{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}55%{transform:translateY(-640px) translateX(46px)}100%{transform:translateY(-1200px) translateX(-24px);opacity:0}}
  @keyframes o2B{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.85}55%{transform:translateY(-620px) translateX(-52px)}100%{transform:translateY(-1200px) translateX(30px);opacity:0}}

  /* ---------- Scene 1: problem ---------- */
  #s1{background:radial-gradient(ellipse at 50% 120%, #3a1f08 0%, #120a04 55%, #000 100%)}
  #s1 .big{font-size:94px;font-weight:700;color:#f7ede0;letter-spacing:-.02em;text-align:center;line-height:1.15;max-width:1560px}
  #s1 .big em{font-style:normal;color:#ff9d45}
  #s1 .sub{margin-top:34px;font-size:38px;color:#c9b39a;transition-delay:.7s}

  /* ---------- Scene 2: the flip ---------- */
  #s2{background:radial-gradient(ellipse at 50% 40%, var(--f800) 0%, var(--f950) 70%)}
  #s2 .coin{width:320px;height:320px;filter:drop-shadow(0 0 70px rgba(47,163,98,.55));transition-delay:.1s;animation:coinBob 3.4s ease-in-out infinite}
  @keyframes coinBob{0%,100%{translate:0 0}50%{translate:0 -16px}}
  #s2 .name{margin-top:42px;font-size:102px;font-weight:700;color:#fff;letter-spacing:-.02em;transition-delay:.35s}
  #s2 .name .dot{color:var(--f400)}
  #s2 .tag{margin-top:22px;font-size:45px;color:var(--f300);transition-delay:.7s}

  /* ---------- Scene 3: how it works ---------- */
  #s3{background:linear-gradient(180deg,var(--f50) 0%,#e6f5eb 100%)}
  #s3 .kicker{font-size:31px;font-weight:600;letter-spacing:.22em;color:var(--f500);text-transform:uppercase}
  #s3 h2{font-size:76px;font-weight:700;color:var(--f950);letter-spacing:-.02em;margin:16px 0 54px;transition-delay:.1s}
  #s3 .steps{display:flex;gap:56px}
  #s3 .step{
    width:505px;padding:36px 36px 46px;border-radius:34px;background:#fff;text-align:center;
    box-shadow:0 12px 50px -20px rgba(16,68,44,.28);
  }
  #s3 .step:nth-child(1){transition-delay:.3s}
  #s3 .step:nth-child(2){transition-delay:1.2s}
  #s3 .step:nth-child(3){transition-delay:2.1s}
  #s3 .art{width:100%;height:256px;display:block}
  #s3 .t{margin-top:12px;font-size:42px;font-weight:700;color:var(--f950)}
  #s3 .d{margin-top:10px;font-size:28px;line-height:1.4;color:#3e5c4b}

  /* card 1: planting */
  .sprout{transform-origin:252px 200px;animation:sproutGrow 3s ease-in-out infinite alternate}
  @keyframes sproutGrow{0%{transform:scale(.72) rotate(-2deg)}100%{transform:scale(1.05) rotate(2deg)}}
  .wave{transform-origin:130px 126px;animation:waveArm .9s ease-in-out infinite alternate}
  @keyframes waveArm{0%{transform:rotate(-10deg)}100%{transform:rotate(16deg)}}
  .speck{animation:speckPop 1.6s ease-in-out infinite}
  .speck.s2{animation-delay:.55s}.speck.s3{animation-delay:1.1s}
  @keyframes speckPop{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1;transform:translateY(-14px)}80%{opacity:0;transform:translateY(-24px)}}

  /* card 2: verify */
  .aibadge{transform-origin:221px 55px;opacity:0;animation:checkPop 3s ease-out infinite}
  @keyframes checkPop{0%,66%{opacity:0;transform:scale(0)}74%{opacity:1;transform:scale(1.15)}82%{transform:scale(1)}96%{opacity:1}100%{opacity:0}}
  .vtree{transform-origin:272px 200px;animation:treeSway 2.6s ease-in-out infinite alternate}
  @keyframes treeSway{0%{transform:rotate(-1.6deg)}100%{transform:rotate(1.6deg)}}

  /* card 3: earn + breathe */
  .etree{transform-origin:268px 204px;animation:treeSway 2.8s ease-in-out infinite alternate}
  .o2f{opacity:0;animation:o2flow 3.2s ease-out infinite}
  .o2f.f2{animation-delay:1.05s}.o2f.f3{animation-delay:2.1s}
  @keyframes o2flow{0%{opacity:0;transform:translate(0,0)}14%{opacity:1}75%{opacity:.9}100%{opacity:0;transform:translate(-102px,-36px)}}
  .breather{transform-origin:120px 162px;animation:breathe 2.6s ease-in-out infinite alternate}
  @keyframes breathe{0%{transform:scale(1)}100%{transform:scale(1.05)}}
  .o2up{opacity:0;animation:o2rise 3s ease-out infinite}
  .o2up.u2{animation-delay:1.4s}
  @keyframes o2rise{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(10px,-64px)}}
  .co2in{opacity:0;animation:co2enter 3.4s ease-in infinite}
  .co2in.g2{animation-delay:1.7s}
  @keyframes co2enter{0%{opacity:0;transform:translate(0,0)}18%{opacity:1}80%{opacity:.85;transform:translate(52px,40px)}100%{opacity:0;transform:translate(60px,46px)}}
  .coinfall{opacity:0;animation:coinFall 2.4s cubic-bezier(.3,.7,.4,1) infinite}
  .coinfall.c2{animation-delay:.5s}.coinfall.c3{animation-delay:1s}
  @keyframes coinFall{0%{opacity:0;transform:translateY(-80px) rotate(-18deg)}18%{opacity:1}55%{transform:translateY(0) rotate(6deg)}68%{transform:translateY(-10px) rotate(0)}80%{transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
  .plnt-chip{opacity:0;animation:chipRise 2.4s ease-out infinite}
  @keyframes chipRise{0%,45%{opacity:0;transform:translateY(6px)}58%{opacity:1}100%{opacity:0;transform:translateY(-42px)}}
  .spark{opacity:0;animation:sparkle 2.4s ease-in-out infinite}
  .spark.k2{animation-delay:.8s}
  @keyframes sparkle{0%,50%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.15)}78%,100%{opacity:0;transform:scale(.4)}}

  /* ---------- Scene 4: growth ---------- */
  #s4{background:linear-gradient(180deg,#eaf7ef 0%,var(--f100) 100%)}
  #s4 .wrap{display:flex;align-items:center;gap:90px}
  #s4 .tree{transform-origin:210px 400px;transform:scale(.45);transition:transform 4.5s cubic-bezier(.3,.6,.3,1)}
  .active#s4 .tree{transform:scale(1)}
  #s4 .txt{max-width:1000px}
  #s4 h2{font-size:64px;font-weight:700;color:var(--f950);letter-spacing:-.02em;line-height:1.15}
  #s4 h2 em{font-style:normal;color:var(--f600)}
  #s4 .mult{margin-top:30px;font-size:132px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1;transition-delay:.25s;display:flex;align-items:baseline;white-space:nowrap}
  #s4 .mult small{font-size:42px;color:#3e5c4b;font-weight:600;margin-left:18px;white-space:nowrap}
  /* The counter used to climb alone. The years now step with it, one bar per
     confirmed year as in the rewards chart on the home page, and the five-year
     total fills underneath until it lands on 7.5x. */
  #s4 .years{margin-top:30px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:end;height:236px;transition-delay:.4s}
  #s4 .yr{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
  #s4 .yr .v{font-size:30px;font-weight:700;color:#3e5c4b;font-variant-numeric:tabular-nums;opacity:.25;transition:opacity .3s ease,color .3s ease}
  #s4 .yr .b{display:block;width:100%;margin-top:10px;border-radius:12px 12px 4px 4px;background:#b9e7c9;height:calc(150px * var(--h));transform:scaleY(.08);transform-origin:bottom;opacity:.45;
             transition:transform .5s cubic-bezier(.2,1.25,.4,1),background-color .3s ease,opacity .3s ease}
  #s4 .yr .y{margin-top:12px;font-size:26px;font-weight:600;color:#3e5c4b;white-space:nowrap;opacity:.45;transition:opacity .3s ease}
  #s4 .yr.on .b{transform:none;opacity:1;background:var(--f500)}
  #s4 .yr.on .v,#s4 .yr.on .y{opacity:1}
  #s4 .yr.cur .b{background:var(--gold)}
  #s4 .yr.cur .v{color:var(--gold)}
  #s4 .total{margin-top:28px;display:flex;align-items:center;gap:22px;transition-delay:.5s}
  #s4 .total .tl{font-size:30px;font-weight:600;color:#3e5c4b;white-space:nowrap}
  #s4 .total .tt{flex:1;height:26px;border-radius:13px;background:#cdebd8;overflow:hidden}
  #s4 .total .tf{display:block;height:100%;width:0;border-radius:13px;background:linear-gradient(90deg,var(--f500),var(--gold));transition:width .55s cubic-bezier(.2,.7,.25,1)}
  #s4 .total .tv{font-size:52px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:150px;text-align:end}
  #s4 .note{margin-top:22px;font-size:32px;color:#3e5c4b;transition-delay:.55s}

  /* ---------- Scene 5: trust ---------- */
  #s5{background:radial-gradient(ellipse at 50% 0%,var(--f900) 0%,var(--f950) 75%)}
  #s5 .kicker{font-size:31px;font-weight:600;letter-spacing:.22em;color:var(--f400);text-transform:uppercase;margin-bottom:54px}
  #s5 .fact{display:flex;align-items:center;gap:30px;font-size:60px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:26px 0}
  #s5 .fact .chk{flex:none;width:70px;height:70px;border-radius:50%;background:var(--f500);display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff}
  #s5 .fact em{font-style:normal;color:var(--gold3)}
  #s5 .fact:nth-of-type(1){transition-delay:.15s}
  #s5 .fact:nth-of-type(2){transition-delay:.9s}
  #s5 .fact:nth-of-type(3){transition-delay:1.65s}
  #s5 .src{margin-top:50px;font-size:31px;color:var(--f300);transition-delay:2.3s}

  /* ---------- Scene 6: CTA ---------- */
  #s6{background:radial-gradient(ellipse at 50% 45%,var(--f800) 0%,var(--f950) 72%)}
  #s6 .coin{width:265px;height:265px;filter:drop-shadow(0 0 70px rgba(47,163,98,.55));animation:coinBob 3.4s ease-in-out infinite}
  #s6 .name{margin-top:38px;font-size:90px;font-weight:700;color:#fff;letter-spacing:-.02em;transition-delay:.2s}
  #s6 .name .dot{color:var(--f400)}
  #s6 .site{margin-top:26px;font-size:58px;font-weight:600;color:var(--gold3);transition-delay:.45s}
  #s6 .tag{margin-top:20px;font-size:38px;color:var(--f300);transition-delay:.7s}

  #bar{position:absolute;left:0;bottom:0;height:7px;width:0%;background:linear-gradient(90deg,var(--f500),var(--gold));z-index:50}

  /* The scene dots were removed: they sat across the frame and the progress bar
     already says how far along the piece is. Keyboard arrows still step through
     the scenes for anyone who wants to go back. */

  /* Tucked into the corner and kept small, so the chrome stops competing with
     the picture it sits on. */
  #controls{position:absolute;top:10px;right:10px;z-index:60;display:flex;gap:6px;align-items:center}
  #controls button{
    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:#fff;
    background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.35);border-radius:999px;
    padding:5px 12px;cursor:pointer;transition:background .2s ease,opacity .3s ease;
  }
  #controls button:hover{background:rgba(0,0,0,.55)}
  #controls button:focus-visible{outline:2px solid var(--f400);outline-offset:2px}
  #stage-wrap.on-light #controls button{color:var(--f950);background:rgba(255,255,255,.65);border-color:rgba(16,59,39,.25)}
  #stage-wrap.on-light #controls button:hover{background:rgba(255,255,255,.9)}

  /* The stage itself is only visible during a cross-fade, which is exactly
     where the jump from the dark scenes to the one light scene showed as a
     flash. Tinting it under the cut absorbs that. */
  #stage{transition:background-color .5s ease}
  #stage-wrap.on-light #stage{background:#e9f5ed}

  /* The multiplier is the strongest beat in the whole piece. It gets a short
     hold before it runs and a settle when it lands, so the eye can catch it. */
  #mult{display:inline-block;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
  #mult.settle{transform:scale(1.14)}
  /* The replay button used to place itself, from when it was the only piece of
     chrome here. Left as it was it anchored to #controls rather than to the
     stage and pushed itself past the right edge, so only the play button showed.
     #controls lays both of them out now.

     The controls also used to appear only on hover. On a touch screen there is
     no hover, so they were unreachable; they stay visible and step back instead. */
  #controls{opacity:.55;transition:opacity .25s ease}
  #stage-wrap:hover #controls, #controls:focus-within{opacity:1}
.st-0dc2815{--h:.5 !important}
.st-364336d{--h:.625 !important}
.st-6b36ef9{--h:.75 !important}
.st-285380a{--h:.875 !important}
.st-3ad772b{--h:1 !important}