/* tide bands: the hero and the closing call to action sit on a slow green silk (tide.js).
     The gradient is what shows without WebGL, with reduced motion, and before the first frame. */
  .bandwrap{padding-top:12px}
  .band{position:relative;overflow:hidden;isolation:isolate;border-radius:36px;background:#03130a;color:#fff;text-align:center}
  .tide{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 16% 16%,#0f8a46 0,transparent 62%),radial-gradient(50% 70% at 90% 30%,#00a350 0,transparent 58%),radial-gradient(70% 60% at 52% 108%,#0a6b37 0,transparent 62%),#031209}
  .tide canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
  .tide-on canvas{opacity:1}
  .tide::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 54% 50% at 50% 50%,rgba(0,12,6,.5),rgba(0,12,6,0) 100%)}
  .band-in{padding:36px 24px 190px}
  .band h1,.band h2{color:#fff;text-shadow:0 2px 28px rgba(0,16,8,.45)}
  .band .btn.go{height:48px;padding:0 28px;font-size:17px}
  .btn.glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
  .btn.glass:hover{background:rgba(255,255,255,.24)}

  /* hero */
  .ruvi{display:block;width:176px;height:auto;margin:0 auto 14px;filter:drop-shadow(0 22px 22px rgba(0,12,6,.5))}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#e6fff0;padding:6px 8px 6px 14px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px)}
  .pill b{color:#fff;font-weight:500}
  .pill i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;font-style:normal;color:#000;font-size:12px}
  h1{margin:26px auto 0;font-weight:500;font-size:clamp(46px,7.4vw,88px);line-height:1.02;letter-spacing:-.035em}
  .lede{max-width:640px;margin:24px auto 0;font-size:20px;line-height:1.5;color:#e9fff1}
  .hero .actions{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
  .fine{margin-top:22px;font-size:14px;color:#cdeedb}
  .fine a{text-decoration:underline;text-underline-offset:3px;color:#fff}

  /* the product window overlaps the hero */
  .stage{position:relative;z-index:2;margin-top:-170px;perspective:1600px}
  .stage-in{max-width:1040px;margin:0 auto}
  .stage-in .u-win{transition:transform .3s ease-out;will-change:transform}

  /* sections */
  section{padding-top:clamp(84px,11vw,140px)}
  .intro{text-align:center;max-width:720px;margin:0 auto}
  .intro.left{text-align:left;max-width:none;margin:0}
  h2{font-weight:500;font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
  h2.small{font-size:clamp(26px,3vw,34px)}
  .intro p{margin-top:18px;font-size:19px;color:var(--muted)}
  h3{font-weight:500;letter-spacing:-.01em;color:var(--ink)}
  .chip{display:inline-block;font:500 12px/1 var(--font);font-style:normal;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:#4a4a55;white-space:nowrap}
  .chip.live{background:#e7fbef;color:#07692f}
  .chip.work{background:#e3edff;color:#1d4fb8}
  .chip.warn{background:#fff4e2;color:#8a5200}
  .chip.done{background:#e7fbef;color:#07692f}
  .chip.live::before,.chip.work::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px}

  /* apps strip */
  .apps{padding-top:clamp(64px,8vw,96px)}
  .app-list{list-style:none;padding:0;margin:36px auto 0;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .app-list li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:18px;transition:transform .3s,box-shadow .3s}
  .app-list li:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(0,0,0,.3)}
  .app-list span{font-size:14px;line-height:1.35;color:var(--muted)}
  .app-list b{display:block;font-size:16px;font-weight:500;color:var(--ink)}

  /* bento */
  .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:56px}
  .tile{--accent:#00c24e;--accent-ink:#087a3a;--wash:#eafcf1;position:relative;grid-column:span 2;display:flex;flex-direction:column;padding:30px;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 22px 44px -30px rgba(0,0,0,.25);transition:opacity .8s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
  .tile.wide{grid-column:span 4;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center}
  .tile.c-violet{--accent:#7c3aed;--accent-ink:#5b32c4;--wash:#f1ecfd}
  .tile.c-amber{--accent:#f59e0b;--accent-ink:#8a5200;--wash:#fff4e0}
  .tile.c-blue{--accent:#2563eb;--accent-ink:#1d4fb8;--wash:#e8f0ff}
  .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0),var(--accent),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s;pointer-events:none}
  .tile:hover::before{opacity:1}
  .tile.in:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 30px 56px -30px rgba(0,0,0,.35)}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--font);color:var(--accent-ink)}
  .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .tile h3{margin-top:12px;font-size:23px;line-height:1.2}
  .tile .tx p{margin-top:8px;color:var(--muted);font-size:16px}
  .art{flex:1;display:grid;place-items:center;margin-top:26px;padding:22px;border-radius:20px;background:var(--wash)}
  .tile.wide .art{margin-top:0;min-height:100%}

  /* mini mock-ups inside tiles and tabs */
  .mini .u-win{box-shadow:var(--fl);border-radius:14px}
  .mini .u-chrome{height:34px}
  .mini .u-chrome .u-url{min-width:0;overflow:hidden;white-space:nowrap;margin:0;transform:none;flex:1;max-width:240px;height:22px;font-size:12px}
  .ctl{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:3px 10px;border-radius:999px;background:#e7fbef;color:#07692f;font:500 12px var(--uf)}
  .ctl b{width:7px;height:7px;border-radius:50%;background:#00c24e;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
  .bpage{display:grid;gap:8px;padding:12px;background:#f7f7f8}
  .pr{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--hl)}
  .pr.best{border-color:#00c24e;background:#f3fff8}
  .th{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#dfe3f4,#f3eee4)}
  .nm b{display:block;font-weight:500}
  .nm small{color:var(--t2);font-size:12px}
  .pr em{font-style:normal;font-weight:600}
  .bestchip{position:absolute;right:12px;top:-10px;padding:3px 9px;border-radius:999px;background:#00f56d;color:#000;font:600 11px var(--uf)}
  .scene{display:grid;gap:2px}
  .scene .u-msg{justify-self:end}
  .route{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font-size:12.5px;color:var(--t2)}
  .route i{width:8px;height:8px;border-radius:50%;background:#0a8f45}
  .picks{display:flex;gap:8px}
  .picks span{padding:6px 12px;border-radius:999px;border:1px solid var(--hl);background:#fff;color:var(--t2);font-size:13px}
  .picks .chosen{border-color:#087a3a;background:#e7fbef;color:#087a3a}
  .team{display:grid;gap:10px}
  .flow{display:grid;justify-items:center;gap:12px;max-width:none}
  .stack{display:grid;gap:8px}
  .gears{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}
  .flow .u-file{height:auto;padding:7px 12px 7px 8px;white-space:nowrap}
  .art>.ui{width:100%}
  .player{max-width:1040px;margin:56px auto 0}
  .player video{display:block;width:100%;height:auto;aspect-ratio:1200/650;background:#eceeed}
  .player figcaption{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px;font-size:14px;color:var(--muted)}
  .player figcaption .chip:last-of-type{margin-right:6px}

  /* use cases */
  .tabs{max-width:1040px;margin:48px auto 0;padding:28px 28px 36px;background:#fff;border:1px solid var(--line);border-radius:32px;box-shadow:0 24px 48px -34px rgba(0,0,0,.25)}
  .tablist{display:flex;gap:4px;width:fit-content;max-width:100%;margin:0 auto;padding:5px;border-radius:999px;background:var(--surface);overflow-x:auto}
  .tab{border:0;height:42px;padding:0 20px;border-radius:999px;background:transparent;color:var(--muted);font:500 15px var(--font);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
  .tab:hover{color:#000}
  .tab[aria-selected="true"]{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,.14)}
  .tabpanel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:30px;min-height:340px}
  .tabpanel[hidden]{display:none}
  .tabpanel h3{font-size:25px;line-height:1.2}
  .tabpanel p{margin-top:10px;color:var(--muted)}
  .tabpanel>.ui{max-width:500px;justify-self:center;padding:22px;border-radius:22px;background:var(--surface)}
  .tabpanel .u-steps{margin:10px 0}
  .u-msg.cmp{display:block;min-width:min(300px,100%)}
  .shop{position:relative;display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:10px;margin-top:10px;font-size:13px}
  .shop em{font-style:normal;font-weight:600}
  .shop.win{margin-top:28px}
  .bar{display:block;height:8px;border-radius:99px;background:#cfd2d6;transform-origin:left}
  .bar.less{width:93%;background:#00c24e}
  .shop .bestchip{right:0;top:-19px}
  .inbox{display:grid;gap:6px;margin-bottom:12px}
  .inbox p{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border:1px solid var(--hl);border-radius:12px;background:#fff;font-size:13.5px}
  .inbox b{min-width:46px;font-weight:600}
  .inbox em{margin-left:auto}
  .doc{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--hl);border-radius:14px;background:#fff}
  .chart{display:flex;align-items:flex-end;gap:10px;height:92px}
  .chart span{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(#00f56d,#00b149);transform-origin:bottom}
  .chart .h1{height:40%}.chart .h2{height:62%}.chart .h3{height:48%}.chart .h5{height:96%}
  .bar[data-cue][data-on="0"]{transform:scaleX(.05)}
  .chart span[data-cue][data-on="0"]{transform:scaleY(.04)}
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){.chart span[data-s0]:not([data-on]){transform:scaleY(.04);opacity:1;visibility:visible}.bar[data-s0]:not([data-on]){transform:scaleX(.05);opacity:1;visibility:visible}}

  /* you stay in control */
  .band-soft{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px;border:1px solid #d3f1e0;border-radius:36px;background:linear-gradient(135deg,#e6fbee,#f5fbf8 58%,#fff)}
  .points{list-style:none;padding:0;margin-top:28px;display:grid;gap:18px}
  .points li{display:flex;gap:14px;align-items:flex-start}
  .points svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:40px;height:40px;padding:10px;border-radius:50%;background:#fff;border:1px solid #cdeedb;color:#087a3a}
  .points b{display:block;color:#000;font-weight:500}
  .points span{color:var(--muted);font-size:16px}
  .mini.big{max-width:520px;justify-self:center;padding:26px;border-radius:26px;background:rgba(255,255,255,.7);border:1px solid #cdeedb}
  .big .u-card{padding:18px;background:var(--bb)}

  /* how it works */
  .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;list-style:none;padding:0}
  .steps3 li{position:relative;border-top:1px solid var(--line);padding-top:22px}
  .steps3 li::after{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--green);transition:width 1.3s cubic-bezier(.2,.7,.2,1) .2s}
  html[data-js] .steps3 li::after{width:0}
  html[data-js] .steps3.in li::after{width:100%}
  .num{display:block;margin-bottom:18px;font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ai);font-variant-numeric:tabular-nums}
  .steps3 h3{font-size:19px}
  .steps3 p{margin-top:6px;color:var(--muted)}

  /* faq */
  .faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start;max-width:1040px;margin:0 auto}
  .faq-head{position:sticky;top:96px}
  .faq-head p{margin-top:14px;color:var(--muted)}
  .faq-head a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
  details{border-bottom:1px solid var(--line)}
  details:first-child{border-top:1px solid var(--line)}
  summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:18px;color:var(--ink)}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:24px;line-height:1;color:var(--muted);transition:transform .25s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{padding:0 40px 22px 0;color:var(--muted)}

  /* closing */
  .closing{margin-top:clamp(84px,11vw,140px)}
  .closing .band-in{padding:96px 24px}
  .closing p{margin:16px auto 0;max-width:520px;color:#e9fff1;font-size:19px}
  .closing .btn{margin-top:32px}

  /* motion: scroll reveal (home.js sets data-js), the mascot's idle float, the stage's entrance */
  html[data-js] [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  html[data-js] [data-reveal].in{opacity:1;transform:none}
  html[data-js] .tile[data-reveal]{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
  html[data-js] .tile[data-reveal].in{transition:opacity .8s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
  @media (prefers-reduced-motion:no-preference){
    .ruvi{animation:ruvi-in .9s cubic-bezier(.2,.9,.3,1.15) both,ruvi-float 6s ease-in-out 1s infinite}
    .stage-in{animation:rise 1s cubic-bezier(.2,.7,.2,1) .25s both}
    .pill,.hero h1,.lede,.hero .actions,.fine{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
    .hero h1{animation-delay:.08s}.lede{animation-delay:.16s}.hero .actions{animation-delay:.24s}.fine{animation-delay:.32s}
  }
  @keyframes ruvi-in{from{opacity:0;transform:translateY(16px) scale(.92)}}
  @keyframes ruvi-float{50%{transform:translateY(-8px) rotate(-1.2deg)}}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}}

  @media (max-width:900px){
    .app-list{grid-template-columns:repeat(2,1fr)}
    .bento{grid-template-columns:1fr}
    .tile,.tile.wide{grid-column:auto;display:flex}
    .tile.wide .art{margin-top:26px;min-height:0}
    .band-soft{grid-template-columns:1fr;padding:32px 24px;gap:32px}
    .tabs{padding:20px 16px 28px}
    .tabpanel{grid-template-columns:1fr;gap:24px;min-height:0}
    .steps3,.faq{grid-template-columns:1fr}
    .faq{gap:24px}
    .faq-head{position:static}
    .stage{margin-top:-120px}
    .band-in{padding-bottom:160px}
  }
  @media (max-width:520px){
    .pill{white-space:nowrap;font-size:12.5px;gap:6px;padding-left:12px}
    .band{border-radius:28px}
    .band-in{padding:40px 18px 140px}
    .ruvi{width:150px}
    .lede{font-size:18px}
    .hero .actions .btn{flex:1 1 100%}
    .app-list{grid-template-columns:1fr}
    .tile{padding:24px 20px}
    .art{padding:14px}
    .tablist{width:100%}
    .tab{flex:1;padding:0 8px;font-size:13.5px}
    .band-soft{padding:26px 18px;border-radius:28px}
    .mini.big{padding:14px}
    .closing .band-in{padding:64px 18px}
    .stage{margin-top:-100px}
  }