/* ==========================================================================
   Subtitl — the "Why Subtitl" bento (#why, index.html only)
   --------------------------------------------------------------------------
   The WHOLE section lives here: card shell, copy, layout and the four
   illustrations. Only the homepage loads this file.

   SYSTEM — the owner's references (soft, tactile product objects):
   - light grey cards on the white page;
   - objects are real product UI made physical: bevelled white faces with a
     wide soft rim (.tl / --tl-*), and at most ONE glossy black object per card
     with a metallic rim (--gl-*) as the contrast point;
   - FOCUS LISTS: the active item is raised and sharp, the ones above and
     below fade and blur — the list scrolls under a fixed lens that carries
     its own copy of the list on the same keyframes, so the text inside and
     outside the lens stays in step;
   - copy is one sentence: a bold title running into grey text.
   History worth keeping: blank "caption pills" read as nothing; the same
   video frame in every card read as repetition; dark widgets in white cards
   read as one box; a starfield read as "space"; black Linear cards and a
   split-flap board were "not it". The owner picked this style by reference.

   SCALING: scenes are drawn on a fixed-size .bx-stage (px), centred in their
   panel and scaled by min(--kw, --kh); panels are size containers.

   MOTION CONTRACT — static until engaged
   - Every animated element carries .bx-a and is PAUSED by default (its ::before
     and ::after too). A card runs only while it has .is-playing, which app.js
     (initFeatureBento) adds on hover — or, on touch screens, while the card
     is mostly on screen. Hover-transition-only cards carry no data-bx-step.
   - On disengage the card plays on to its next resting frame (its
     data-bx-step grid) and parks: a card's t = 0 frame IS its resting
     picture, and every loop inside it must repeat on that step grid.
   - Toggle anything animated with VISIBILITY, never display: display:none
     cancels a CSS animation, and it restarts from 0 off the card's clock.
   - transform / opacity (plus a few colour swaps). Nothing from scale(0).
   - Without JS the loops simply run; with reduced motion they're removed and
     the base styles (= each t = 0 frame) are what shows.
   ========================================================================== */
#why{
  --bx-io:cubic-bezier(.77,0,.175,1);
  --bx-out:cubic-bezier(.23,1,.32,1);
  --bx-sine:cubic-bezier(.37,0,.63,1);
  /* tactile white object: face + bevel + the wide soft rim of the reference */
  --tl-face:linear-gradient(180deg,#FFFFFF 0%,#F3F3F5 100%);
  --tl-edge:inset 0 1.5px 0 #fff,inset 0 -2px 4px rgba(20,20,30,.05),
    0 0 0 1px rgba(20,20,30,.07),0 0 0 7px rgba(255,255,255,.6),0 0 0 8px rgba(20,20,30,.05),
    0 30px 44px -26px rgba(20,20,40,.42);
  /* glossy black object with a metallic rim (border-box gradient) */
  --gl-face:linear-gradient(180deg,#1C1C1F 0%,#060607 100%) padding-box,
    linear-gradient(180deg,#A5A6AB 0%,#3B3C40 32%,#141416 62%,#77787D 100%) border-box;
  --gl-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 36px -18px rgba(0,0,0,.55),0 4px 10px -4px rgba(0,0,0,.3);
}
.js #why .bx-a,.js #why .bx-a::before,.js #why .bx-a::after{animation-play-state:paused}
#why .is-playing .bx-a,#why .is-playing .bx-a::before,#why .is-playing .bx-a::after{animation-play-state:running}

/* ---- grid + card shell --------------------------------------------------- */
.bento-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);
  max-width:1140px;margin:var(--stack-gap,40px) auto 0;
}
.bento-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  border-radius:32px;background:#EFEFF1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(20,20,30,.03);
}
.bento-card--hero{grid-column:span 2}
.bento-panel{position:relative;overflow:hidden;height:clamp(250px,24vw,300px);container-type:size}
.bento-text{padding:0 32px 30px}
.bento-copy{font:500 1.14rem/1.42 var(--sans);letter-spacing:-.012em;color:#8A8C93;max-width:34ch;text-wrap:pretty}
.bento-copy strong{font-weight:650;color:#141518}
.bento-card--hero .bento-copy{max-width:44ch}
@media (max-width:820px){
  .bento-grid{grid-template-columns:1fr;max-width:440px}
  .bento-card--hero{grid-column:span 1}
  .bento-panel{height:clamp(240px,64vw,290px)}
  .bento-text{padding:0 26px 26px}
  .bento-copy{font-size:1.06rem}
}
.bx-stage{position:absolute;left:50%;top:var(--sy,50%);width:var(--sw);height:var(--sh);
  transform:translate(-50%,-50%) scale(min(var(--kw,1),var(--kh,1)));transform-origin:50% 50%}

/* hover: the card lifts a touch (`translate`, not `transform`: the reveal
   stagger leaves an inline transform on each card; initFeatureBento clears
   the stagger's inline transition once a card lands) */
@media (hover:hover) and (pointer:fine){
  #why .bento-card{transition:translate .45s var(--bx-out),box-shadow .45s var(--bx-out)}
  #why .bento-card:hover{translate:0 -4px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(20,20,30,.03),0 30px 50px -34px rgba(20,20,40,.35)}
}

.tl{background:var(--tl-face);box-shadow:var(--tl-edge)}

/* ==========================================================================
   01 · NO CREDITS. NO LIMITS. (wide, step 2s)
   Left: a stack of tactile cards; the front one reads 0 · Credits used with
   an "Unlimited minutes" pill. Right: a focus list of finished videos under
   a glossy black lens ("Captions ready · Reel 14 · 0 credits"). On play the
   list steps up one video every 2s (10s = 5 videos; the list is drawn twice,
   so -5 rows looks exactly like 0) and the 0 rolls over and lands on 0 as
   each video arrives. Every 2s mark is a rest.
   ========================================================================== */
.nc-stage{--sw:700px;--sh:260px}
.nc-stack{position:absolute;left:0;top:0;width:300px;height:260px}
.nc-back{position:absolute;left:34px;top:48px;width:236px;height:164px;border-radius:30px;opacity:.9}
.nc-b1{transform:rotate(-8deg) translate(-10px,6px)}
.nc-b2{transform:rotate(7deg) translate(12px,2px)}
.nc-front{position:absolute;left:30px;top:40px;width:240px;height:176px;border-radius:30px;padding:22px 24px;
  display:flex;flex-direction:column;align-items:flex-start}
.nc-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:999px;
  font:600 12px/1 var(--body);color:#0F6FC4;background:linear-gradient(180deg,#EAF4FF,#DCEDFF);
  box-shadow:inset 0 0 0 1px rgba(18,134,230,.28),inset 0 1px 0 #fff}
.nc-pill svg{width:16px;height:16px}
.nc-num{display:block;height:64px;overflow:hidden;margin:14px 0 4px}
.nc-roll{display:flex;flex-direction:column;animation:ncRoll 2s var(--bx-io) infinite}
.nc-roll b{display:block;flex:none;height:64px;font:700 62px/64px var(--sans);letter-spacing:-.03em;color:#111214}
/* rolls to the second 0 as the new video lands (1.7-2.0s of each step) and
   snaps back to the identical first 0: re-counted, still 0 */
@keyframes ncRoll{0%,84%{transform:translateY(0)}98%{transform:translateY(-50%)}98.01%,100%{transform:translateY(0)}}
.nc-lbl{font:500 14px/1 var(--body);color:#7E8189}

/* the focus list */
.fq{position:absolute;right:0;top:4px;width:370px;height:252px}
.fq-win{position:absolute;left:0;top:0;width:370px;height:252px;overflow:hidden}
.fq-win--soft{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%)}
.fq-win--soft .fq-list{filter:blur(1.2px);opacity:.55}
.fq-list{display:flex;flex-direction:column;gap:12px;animation:fqStep 10s infinite}
@keyframes fqStep{
  0%,17%{transform:translateY(0);animation-timing-function:var(--bx-io)}
  20%,37%{transform:translateY(-84px);animation-timing-function:var(--bx-io)}
  40%,57%{transform:translateY(-168px);animation-timing-function:var(--bx-io)}
  60%,77%{transform:translateY(-252px);animation-timing-function:var(--bx-io)}
  80%,97%{transform:translateY(-336px);animation-timing-function:var(--bx-io)}
  100%{transform:translateY(-420px)}
}
.fq-row{flex:none;display:flex;align-items:center;gap:14px;height:72px;padding:0 18px;border-radius:24px}
.fq-win--soft .fq-row{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(20,20,30,.05)}
.fq-ic{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  color:#fff;background:linear-gradient(180deg,#2E97F2,#0D6BC9);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -4px rgba(13,107,201,.6)}
.fq-ic svg{width:20px;height:20px}
.fq-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.fq-tx b{font:650 16px/1 var(--sans);color:#141518;letter-spacing:-.01em}
.fq-tx em{font:500 13px/1 var(--body);font-style:normal;color:#8A8C93;white-space:nowrap}
.fq-tx em i{font-style:normal;font-weight:600;color:#0F6FC4}
/* the lens: the glossy black pill round the centre row, with its own copy */
.fq-lens{position:absolute;left:-10px;right:-10px;top:74px;height:92px;border-radius:28px;overflow:hidden;
  background:var(--gl-face);border:4px solid transparent;box-shadow:var(--gl-shadow)}
.fq-lens .fq-win{left:6px;top:-78px}
.fq-lens .fq-tx b{color:#fff}
.fq-lens .fq-tx em{color:#9EA1A8}
.fq-lens .fq-tx em i{color:#6CB8FF}
.fq-lens .fq-ic{background:linear-gradient(180deg,#3A3B40,#1C1D20);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
@container (max-width:680px){ .nc-stage{--kw:.9} }
@container (max-width:560px){
  /* one column: the focus list alone (it still says "0 credits" on every row) */
  .nc-stage{--sw:392px;--kw:1}
  .nc-stack{visibility:hidden}
  .fq{right:11px}
}
@container (max-width:400px){ .nc-stage{--kw:.9} }
@container (max-width:350px){ .nc-stage{--kw:.82} }

/* ==========================================================================
   02 · 100% OFFLINE — Wi-Fi goes off, transcription carries on (step 8s)
   A tactile Wi-Fi tile over the Subtitl status panel (the card's one
   glossy black object).
   Rest (t = 0): Wi-Fi OFF, the line transcribed. On play: the words clear,
   Wi-Fi flicks on and is switched off, then the words stream back in while
   the waveform runs; it ends on the rest frame. Bar loops are 2 / 1.6 / 4s
   so they all repeat on the 8s grid.
   ========================================================================== */
.scene-offline{}
.of-cc{
  position:absolute;left:50%;top:20px;transform:translateX(-50%);width:min(250px,76%);
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:16px;
  background:var(--tl-face);box-shadow:var(--tl-edge);
}
.of-ic{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:#B7BAC1;animation:ofIcon 8s infinite}
.of-ic svg{width:17px;height:17px}
.of-slash{stroke:#fff;stroke-width:2.4;opacity:1;animation:ofSlash 8s infinite}
.of-lbl{flex:1;display:flex;flex-direction:column;line-height:1.15}
.of-lbl b{font:600 13px/1.15 var(--body);color:#17181A}
.of-state{position:relative;height:14px;font-size:11.5px;color:#8A8E96}
.of-state em{position:absolute;left:0;top:0;font-style:normal}
.of-on{opacity:0;animation:ofOn 8s infinite}
.of-off{opacity:1;animation:ofOff 8s infinite}
.of-tog{flex:none;position:relative;width:38px;height:23px;border-radius:999px;background:#DDDEE2;animation:ofTog 8s infinite}
.of-tog i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);animation:ofKnob 8s infinite}
@keyframes ofIcon{0%,4%{background:#B7BAC1}8%,15%{background:var(--blue)}20%,100%{background:#B7BAC1}}
@keyframes ofTog{0%,4%{background:#DDDEE2}8%,15%{background:#34C759}20%,100%{background:#DDDEE2}}
@keyframes ofKnob{0%,4%{transform:translateX(0)}8%,15%{transform:translateX(15px)}20%,100%{transform:translateX(0)}}
@keyframes ofSlash{0%,4%{opacity:1}7%,16%{opacity:0}20%,100%{opacity:1}}
@keyframes ofOn{0%,4%{opacity:0}7%,16%{opacity:1}19%,100%{opacity:0}}
@keyframes ofOff{0%,4%{opacity:1}6%,17%{opacity:0}20%,100%{opacity:1}}

.of-panel{
  position:absolute;left:50%;top:92px;transform:translateX(-50%);width:min(286px,86%);
  padding:12px 13px 11px;border-radius:20px;color:#fff;background:var(--gl-face);border:4px solid transparent;box-shadow:var(--gl-shadow);
}
.of-hd{display:flex;align-items:center;gap:7px;font:500 11.5px/1 var(--body);color:rgba(255,255,255,.72)}
.of-dot{width:7px;height:7px;border-radius:50%;background:#4BA6F1;animation:ofDot 1.6s ease-in-out infinite}
@keyframes ofDot{50%{opacity:.35}}
.of-wave{display:flex;align-items:center;justify-content:space-between;height:30px;margin:10px 0 8px}
.of-wave i{flex:none;width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,#6CB8FF,#1286E6);
  transform:scaleY(.25);transform-origin:center;
  animation:ofBar 1s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -97ms)}
.of-wave i:nth-child(3n){animation-duration:.8s}
.of-wave i:nth-child(4n+1){animation-duration:2s}
@keyframes ofBar{0%{transform:scaleY(.18)}100%{transform:scaleY(.95)}}
.of-words{min-height:22px;font:700 16px/1.3 var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.of-words span{display:inline-block;animation:ofWord 8s infinite}
.of-words span:nth-child(2){animation-name:ofWord2}
.of-words span:nth-child(3){animation-name:ofWord3;color:#6CB8FF}
.of-words span:nth-child(4){animation-name:ofWord4}
@keyframes ofWord {0%,2%{opacity:1;transform:none}6%,26%{opacity:0;transform:translateY(5px)}31%,100%{opacity:1;transform:none}}
@keyframes ofWord2{0%,2%{opacity:1;transform:none}6%,36%{opacity:0;transform:translateY(5px)}41%,100%{opacity:1;transform:none}}
@keyframes ofWord3{0%,2%{opacity:1;transform:none}6%,46%{opacity:0;transform:translateY(5px)}51%,100%{opacity:1;transform:none}}
@keyframes ofWord4{0%,2%{opacity:1;transform:none}6%,56%{opacity:0;transform:translateY(5px)}61%,100%{opacity:1;transform:none}}
.of-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.1);
  font:500 11px/1 var(--body);color:rgba(255,255,255,.5)}
.of-foot b{font-weight:600;color:#6BE38B}

/* ==========================================================================
   03 · 100+ LANGUAGES — the greeting as a focus list (step 2s)
   The same line in six languages; the centre row is a raised tactile card,
   the rows above and below fade and blur. On play it steps one language
   every 2s (12s); the list is the six plus the first three again, so -6
   rows looks exactly like 0. Rest: Hinglish in the lens.
   ========================================================================== */
.lq-stage{--sw:318px;--sh:230px}
.lq-win{position:absolute;left:0;top:0;width:318px;height:230px;overflow:hidden}
.lq-win--soft{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 32%,#000 68%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 32%,#000 68%,transparent 100%)}
.lq-win--soft .lq-list{filter:blur(1.2px);opacity:.5}
.lq-list{display:flex;flex-direction:column;gap:12px;padding-top:12px;animation:lqStep 12s infinite}
@keyframes lqStep{
  0%,14.17%{transform:translateY(0);animation-timing-function:var(--bx-io)}
  16.67%,30.83%{transform:translateY(-70px);animation-timing-function:var(--bx-io)}
  33.33%,47.5%{transform:translateY(-140px);animation-timing-function:var(--bx-io)}
  50%,64.17%{transform:translateY(-210px);animation-timing-function:var(--bx-io)}
  66.67%,80.83%{transform:translateY(-280px);animation-timing-function:var(--bx-io)}
  83.33%,97.5%{transform:translateY(-350px);animation-timing-function:var(--bx-io)}
  100%{transform:translateY(-420px)}
}
.lq-row{flex:none;display:flex;align-items:center;gap:14px;height:58px;padding:0 16px;border-radius:20px}
.lq-win--soft .lq-row{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(20,20,30,.05)}
.lq-ic{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  font:700 18px/1 var(--sans-indic);color:#3B3D43;background:linear-gradient(180deg,#F4F4F6,#E4E5E8);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(20,20,30,.06)}
.lq-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.lq-tx em{display:flex;align-items:center;gap:5px;font:600 10.5px/1 var(--body);font-style:normal;color:#8A8C93;letter-spacing:.02em}
.lq-tx em i{width:6px;height:6px;border-radius:50%;background:#1286E6}
.lq-tx b{font:650 17px/1.15 var(--sans-indic);color:#141518;white-space:nowrap;letter-spacing:-.005em}
.lq-lens{position:absolute;left:-12px;right:-12px;top:78px;height:74px;border-radius:24px;overflow:hidden;
  background:var(--tl-face);box-shadow:var(--tl-edge)}
.lq-lens .lq-win{left:12px;top:-78px}
.lq-lens .lq-ic{color:#fff;background:linear-gradient(180deg,#2E97F2,#0D6BC9);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.lq-lens .lq-tx b{font-size:19px}
@container (max-width:340px){ .lq-stage{--kw:.92} }
@container (max-width:290px){ .lq-stage{--kw:.84} }

/* ==========================================================================
   04 · DESIGNED STYLES — a real editor screenshot + the two host icons
   The screenshot (After Effects is dark, so the frame is too) sits low with
   a tactile rim and fades out at the bottom; the After Effects and Premiere
   Pro icons float over its top edge, tilted like stickers. Hover: the icons
   fan out, the screenshot lifts — plain transitions, no loops.
   ========================================================================== */
.ss-shot{position:absolute;left:50%;top:84px;width:min(600px,86%);aspect-ratio:16/10;
  translate:-50% 0;border-radius:16px;overflow:hidden;background:#1B1C1F;
  box-shadow:0 0 0 1px rgba(20,20,30,.1),0 0 0 7px rgba(255,255,255,.6),0 0 0 8px rgba(20,20,30,.05),0 30px 50px -30px rgba(20,20,40,.5);
  transition:transform .6s var(--bx-out)}
/* fade the screenshot out ABOVE the panel's bottom edge (the frame itself
   runs past it, so a mask on the frame would never show) */
.scene-ss{-webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 94%);
          mask-image:linear-gradient(to bottom,#000 52%,transparent 94%)}
.ss-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* stand-in until the real screenshot lands: a drawn editor window — panels,
   a comp viewer with a caption, the Subtitl panel row lit blue, and a
   timeline whose top track is a row of caption word clips under the playhead.
   The "screenshot goes here" note stays in the markup for whoever swaps it,
   but never shows (the panel is aria-hidden). */
.ss-ph{position:absolute;inset:0;font-size:0;color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='none'%3E %3Crect width='160' height='100' fill='%231b1c1f'/%3E %3Crect width='160' height='7' fill='%2326272b'/%3E%3Ccircle cx='5' cy='3.5' r='1.3' fill='%23ff5f57'/%3E%3Ccircle cx='9.5' cy='3.5' r='1.3' fill='%23febc2e'/%3E%3Ccircle cx='14' cy='3.5' r='1.3' fill='%2328c840'/%3E %3Crect x='3' y='10' width='38' height='46' rx='2' fill='%23232428'/%3E %3Crect x='6' y='14' width='24' height='2' rx='1' fill='%233a3b41'/%3E%3Crect x='6' y='19' width='30' height='2' rx='1' fill='%2334353b'/%3E%3Crect x='6' y='24' width='20' height='2' rx='1' fill='%2334353b'/%3E%3Crect x='6' y='29' width='27' height='2' rx='1' fill='%2334353b'/%3E %3Crect x='44' y='10' width='72' height='46' rx='2' fill='%230e0f12'/%3E %3Crect x='64' y='41' width='32' height='6' rx='3' fill='%23ffffff' fill-opacity='.92'/%3E%3Crect x='68' y='43.2' width='24' height='1.6' rx='.8' fill='%2311131a'/%3E %3Crect x='119' y='10' width='38' height='46' rx='2' fill='%23232428'/%3E %3Crect x='122' y='14' width='32' height='5' rx='1.5' fill='%231286e6'/%3E%3Crect x='122' y='22' width='32' height='4' rx='1.5' fill='%232d2e34'/%3E%3Crect x='122' y='28' width='32' height='4' rx='1.5' fill='%232d2e34'/%3E%3Crect x='122' y='34' width='32' height='4' rx='1.5' fill='%232d2e34'/%3E%3Crect x='122' y='40' width='32' height='4' rx='1.5' fill='%232d2e34'/%3E %3Crect x='3' y='59' width='154' height='38' rx='2' fill='%23202125'/%3E %3Crect x='36' y='63' width='121' height='.5' fill='%232c2d33'/%3E %3Crect x='6' y='66' width='24' height='2' rx='1' fill='%233a3b41'/%3E%3Crect x='6' y='74' width='20' height='2' rx='1' fill='%233a3b41'/%3E%3Crect x='6' y='82' width='26' height='2' rx='1' fill='%233a3b41'/%3E%3Crect x='6' y='90' width='22' height='2' rx='1' fill='%233a3b41'/%3E %3Crect x='44' y='64.5' width='13' height='5' rx='1.5' fill='%23e9eef8'/%3E%3Crect x='58' y='64.5' width='18' height='5' rx='1.5' fill='%23e9eef8'/%3E%3Crect x='77' y='64.5' width='10' height='5' rx='1.5' fill='%23e9eef8'/%3E%3Crect x='88' y='64.5' width='16' height='5' rx='1.5' fill='%23e9eef8'/%3E%3Crect x='105' y='64.5' width='12' height='5' rx='1.5' fill='%23e9eef8'/%3E %3Crect x='40' y='72.5' width='74' height='5' rx='1.5' fill='%238b6cff'/%3E %3Crect x='38' y='80.5' width='96' height='5' rx='1.5' fill='%233d8bff'/%3E %3Crect x='38' y='88.5' width='110' height='5' rx='1.5' fill='%231f9e8e'/%3E %3Crect x='82' y='60' width='.9' height='37' fill='%234ba6f1'/%3E%3Cpath d='M79.5 59h5.9l-2.95 3.2z' fill='%234ba6f1'/%3E %3C/svg%3E") 0 0/100% 100% no-repeat}
.ss-icons{position:absolute;left:50%;top:30px;z-index:2;display:flex;translate:-50% 0}
.ss-ic{display:block;width:84px;height:84px;filter:drop-shadow(0 18px 22px rgba(24,12,70,.35));
  transition:transform .55s var(--bx-out)}
.ss-ic--ae{transform:rotate(-9deg) translateX(10px)}
.ss-ic--pr{transform:rotate(9deg) translate(-10px,6px)}
@media (hover:hover) and (pointer:fine){
  #why .bento-card:hover .ss-ic--ae{transform:rotate(-13deg) translate(-4px,-8px)}
  #why .bento-card:hover .ss-ic--pr{transform:rotate(13deg) translate(4px,-2px)}
  #why .bento-card:hover .ss-shot{transform:translateY(-8px)}
}
@container (max-width:470px){
  .ss-shot{top:78px;width:92%}
  .ss-ic{width:68px;height:68px}
}

/* ==========================================================================
   Height steps (panels: 300px desktop, 250-265px on tablets, ~250px phones)
   ========================================================================== */
@container (max-height:280px){ .nc-stage{--kh:.94} .lq-stage{--kh:.96} }
@container (max-height:262px){ .nc-stage{--kh:.9} .lq-stage{--kh:.92} }

/* ==========================================================================
   Reduced motion: no loops, no lift; every scene shows its rest frame
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  #why .bx-a,#why .bx-a::before,#why .bx-a::after{animation:none !important}
  #why .bento-card:hover{translate:none}
  #why .bento-card:hover .ss-ic--ae{transform:rotate(-9deg) translateX(10px)}
  #why .bento-card:hover .ss-ic--pr{transform:rotate(9deg) translate(-10px,6px)}
  #why .bento-card:hover .ss-shot{transform:none}
  #why .of-wave i{transform:scaleY(.4)}
  #why .of-wave i:nth-child(3n){transform:scaleY(.75)}
  #why .of-wave i:nth-child(4n+1){transform:scaleY(.55)}
  #why .of-wave i:nth-child(5n+2){transform:scaleY(.95)}
  #why .of-wave i:nth-child(7n){transform:scaleY(.25)}
}