/* Hero. Stage is 1600x900 units (see .stage in styles.css). The background image is a Blender render
   (design/hero_plate.py) whose light trails start under the card positions below; move both together. */
.hero{height:100vh;height:100svh;min-height:560px;position:relative;overflow:hidden;background:#030708;display:grid;place-items:center;color:#fff}
.h-plate-img{position:absolute;left:0;top:0;width:1600px;height:900px;animation:fadein 1.2s ease both}
.h-edge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:calc(110px * var(--s,1));z-index:3}

/* nav */
.h-nav{position:absolute;left:80px;right:56px;top:18px;height:52px;display:flex;align-items:center;justify-content:space-between;z-index:4}
.h-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 27px Poppins,"IBM Plex Sans",sans-serif;letter-spacing:-.04em}
.h-links{position:absolute;left:500px;display:flex;gap:58px}
.h-links a,.h-signin{color:#e8eeee;text-decoration:none;font-size:17px;font-weight:500}
.h-links a:hover,.h-signin:hover{color:#fff}
.h-right{display:flex;align-items:center;gap:32px}
.h-pill{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 34px;border-radius:999px;background:#F6EBDC;color:#142629;font-size:19px;font-weight:600;text-decoration:none;box-shadow:0 10px 30px -10px rgba(246,235,220,.45);transition:transform .2s,box-shadow .2s}
.h-pill:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(246,235,220,.6)}
.h-pill.sm{height:52px;padding:0 26px;font-size:17px}
.h-pill:focus-visible,.h-watch:focus-visible,.out-card:focus-visible{outline:2px solid #2FE0C8;outline-offset:3px}

/* copy */
.h-copy{position:absolute;left:80px;top:140px;width:580px;z-index:2}
.h-eyebrow{font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#dfe8e8;margin-bottom:22px}
.h-copy h1{font-size:80px;line-height:.98;font-weight:600;letter-spacing:-.035em;color:#fff}
.h-copy h1 span{background:linear-gradient(90deg,#22D8C6,#1CB9AE);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-sub{font-size:19px;line-height:1.5;color:#d3dddd;margin:24px 0 34px;width:520px}
.h-ctas{display:flex;align-items:center;gap:32px}
.h-watch{display:inline-flex;align-items:center;gap:16px;color:#fff;text-decoration:none;font-size:19px;font-weight:500}
.h-watch span{width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.8);display:grid;place-items:center;padding-left:3px;transition:background .2s}
.h-watch:hover span{background:rgba(255,255,255,.1)}
.h-benefits{list-style:none;display:flex;gap:34px;margin-top:56px}
.h-benefits li{display:flex;align-items:center;gap:12px;font-size:17px;color:#e2eaea;white-space:nowrap}
.h-benefits span{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center}
.h-benefits svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* incoming cards: frosted glass, strong perspective (right side recedes), big logo tiles */
.in-wrap,.ghost-card{position:absolute;left:calc(var(--x) + 20px);top:calc(var(--y) - 6px);width:300px;height:96px;transform:perspective(760px) rotateY(30deg) rotateZ(5deg);transform-origin:0 50%}
.in-wrap{z-index:2;animation:cin 1s cubic-bezier(.2,.7,.2,1) both var(--d)}
.in-card{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;gap:18px;padding:0 18px;color:#1B2B2E;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(228,234,236,.9) 60%,rgba(206,216,219,.88));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 #fff,inset 0 -10px 20px rgba(0,30,40,.06),0 24px 44px -16px rgba(0,0,0,.8)}
/* motion trail: blurred copies sit behind, each tilted on its own, so the blur never leaks into the cards */
.h-ghosts{position:absolute;inset:0;z-index:1;pointer-events:none}
.ghost-card{border-radius:20px;background:linear-gradient(90deg,rgba(200,215,218,0),rgba(200,215,218,.35));filter:blur(7px);translate:-46px 0;animation:cin 1s cubic-bezier(.2,.7,.2,1) both var(--d)}
.ghost-card::after{content:"";position:absolute;inset:0 -40px 0 -150px;background:linear-gradient(90deg,transparent,var(--c) 70%,transparent);opacity:.28;filter:blur(14px);border-radius:30px}
.streak{display:none}
.logo-tile{width:66px;height:66px;border-radius:18px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.04);display:grid;place-items:center;flex:none}
.logo-tile svg{width:46px;height:46px}
.in-card b{display:block;font-size:21px;font-weight:500;letter-spacing:-.01em;padding-right:4px;white-space:nowrap}
.in-card>div{flex:1;min-width:0}
.in-card p{font-size:16px;color:#5A686B;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:58px}
.in-card p[lang="ar"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;text-align:left}
.in-card p[lang="hi"]{font-family:"IBM Plex Sans Devanagari","IBM Plex Sans",sans-serif}
.in-card .lang{display:inline-block;vertical-align:2px;margin-left:8px;font:600 10.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;font-style:normal;color:#0F5B5E;background:#DDF4EF;border-radius:5px;padding:3px 5px}
.in-card time{position:absolute;right:16px;bottom:12px;font-size:12px;color:#6B7779}

/* outcome cards: bright frosted glass, lit from the left where the ribbon connects */
.out-card{position:absolute;left:1262px;top:var(--y);width:334px;height:104px;border-radius:22px;display:flex;align-items:center;gap:14px;padding:0 16px 0 22px;overflow:hidden;color:#fff;text-decoration:none;white-space:nowrap;
  border:1.5px solid rgba(255,255,255,.55);z-index:2;animation:oin .8s cubic-bezier(.2,.7,.2,1) both var(--d);transition:transform .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -12px 24px rgba(0,0,0,.12)}
.out-card:hover{transform:translateX(4px)}
.out-card b,.out-card p{text-shadow:0 1px 2px rgba(0,0,0,.28)}
.out-card.teal{background:radial-gradient(130px 100px at 0% 50%,rgba(255,255,255,.55),transparent 70%),linear-gradient(135deg,#A9EDE2 0%,#5CC7B8 38%,#2A8F86 72%,#1C6964 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -12px 24px rgba(0,0,0,.12),0 0 46px -4px rgba(92,215,196,.55)}
.out-card.blue{background:radial-gradient(130px 100px at 0% 50%,rgba(255,255,255,.55),transparent 70%),linear-gradient(135deg,#B5D3FF 0%,#6FA4F0 38%,#3D6FC2 72%,#24498C 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -12px 24px rgba(0,0,0,.12),0 0 46px -4px rgba(100,160,255,.55)}
.out-card.amber{background:radial-gradient(130px 100px at 0% 50%,rgba(255,255,255,.6),transparent 70%),linear-gradient(135deg,#FBE2BC 0%,#E7B676 38%,#B98446 72%,#7E5626 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -12px 24px rgba(0,0,0,.12),0 0 46px -4px rgba(245,180,100,.55)}
.oc-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.teal .oc-ic{background:#1E9C8B;box-shadow:0 0 0 1.5px rgba(255,255,255,.45),0 4px 12px rgba(0,0,0,.2)}
.blue .oc-ic{background:#13264B}.amber .oc-ic{background:#2E1D0C}
.oc-ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.out-card b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.out-card p{font-size:15px;color:rgba(255,255,255,.92);margin-top:4px}
.avs{display:flex;margin-left:auto}
.avs i{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.9);display:grid;place-items:center;font:700 10px "IBM Plex Sans";color:#142629;font-style:normal;text-shadow:none}
.avs i+i{margin-left:-9px}
.avs img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.chev{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:auto;flex:none}
.avs+.chev{margin-left:4px}
.out-card>div{min-width:0}
.h-note{position:absolute;left:930px;top:712px;font-size:12px;color:#7d9292;letter-spacing:.04em;z-index:2}

/* AI orb & flowing webs (inline SVG from design/orb_flow.py). Slow, transform/opacity-only motion. */
.orb-flow{position:absolute;left:0;top:0;width:1600px;height:900px;animation:fadein 1.2s ease both}
.orb-flow #orb-halo{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite}
.orb-flow #orb-inner{animation:glow 7s ease-in-out infinite}
.orb-flow .drift{animation:drift 11s ease-in-out infinite alternate}
.orb-flow #rear-gold.drift{animation-duration:13s;animation-direction:alternate-reverse}
.orb-flow .drift.slow{animation-duration:15s}
.orb-flow .fil.pulse{stroke-dasharray:70 520;animation:flow var(--dur,7s) linear infinite;animation-delay:var(--delay,0s);opacity:.95}
.orb-flow .glint{opacity:0;animation:glint 6s ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes breathe{50%{transform:scale(1.05);opacity:.85}}
@keyframes glow{50%{opacity:.7}}
@keyframes drift{to{transform:translate(4px,-5px)}}
@keyframes flow{from{stroke-dashoffset:590}to{stroke-dashoffset:0}}
@keyframes glint{45%,55%{opacity:.9}}
@keyframes fadein{from{opacity:0}}
@keyframes cin{from{translate:-160px 0;opacity:0}}
@keyframes oin{from{translate:-30px 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.in-wrap,.out-card,.orb-flow,.orb-flow *{animation:none!important}.orb-flow .glint{opacity:0}.orb-flow .fil.pulse{stroke-dasharray:none}}

/* The visual (orb, cards, outcomes) lives in .h-visual. On desktop it is the full 1600x900 stage.
   On phones and narrow tablets the copy flows normally and the visual becomes its own block,
   cropped to the stage region x 600-1600 and scaled to the screen width (--vs, set in scene.js). */
.h-visual,.h-visual-inner{position:absolute;left:0;top:0;width:1600px;height:900px}
.h-mflow,.m-cta{display:none}

/* ---------- phones and narrow tablets ----------
   Same content as desktop, laid out top to bottom: copy, then one example conversation flowing
   down through the AI core into its outcome (cycles every few seconds), then the benefits.
   The desktop scene (.h-visual, .h-outputs) is hidden here. */
@media (max-width:860px){
  .hero{height:auto;min-height:0;display:block;padding-bottom:84px}
  .hstage{transform:none;width:auto;height:auto;position:relative;display:flex;flex-direction:column}
  .h-copy{display:contents}
  .h-copy>*{padding-left:20px;padding-right:20px}
  .h-nav{order:0;position:relative;left:auto;right:auto;top:auto;height:64px;padding:0 20px}
  .h-links,.h-signin{display:none}
  .h-logo{font-size:22px}.h-logo svg{width:30px;height:30px}
  .h-pill.sm{height:42px;padding:0 18px;font-size:15px}
  .h-eyebrow{order:1;font-size:12px;margin:18px 0 12px}
  .h-copy h1{order:1;font-size:clamp(38px,11vw,54px)}
  .h-sub{order:1;width:auto;font-size:16px;margin:14px 0 22px}
  .h-ctas{order:1;gap:14px}
  .h-pill{height:52px;padding:0 22px;font-size:16px;flex:none}
  .h-watch{font-size:15px;gap:10px}.h-watch span{width:44px;height:44px;flex:none}
  .h-visual,.h-outputs,.h-note{display:none}

  .h-mflow{order:2;display:flex;flex-direction:column;align-items:center;padding:30px 20px 0;position:relative}
  .h-mflow::before{content:"";position:absolute;left:50%;top:40%;width:340px;height:340px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(52,181,164,.32),transparent 65%);pointer-events:none}
  .mf-msg,.mf-out{width:100%;max-width:400px;transition:opacity .3s,transform .3s}
  .h-mflow.swap .mf-msg{opacity:0;transform:translateY(-8px)}
  .h-mflow.swap .mf-out{opacity:0;transform:translateY(8px)}
  .mf-msg{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;color:#1B2B2E;
    background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(226,233,235,.92));border:1px solid rgba(255,255,255,.75);
    box-shadow:inset 0 1px 0 #fff,0 18px 36px -14px rgba(0,0,0,.8)}
  .mf-msg .logo-tile{width:52px;height:52px;border-radius:14px}.mf-msg .logo-tile svg{width:36px;height:36px}
  .mf-msg b{display:block;font-size:17px;font-weight:600}
  .mf-msg{min-height:128px}
  .mf-msg>div{flex:1;min-width:0}
  .mf-msg p{font-size:15px;color:#2B3A3D;margin-top:2px;line-height:1.4;padding-right:40px}
  .mf-msg p[lang="ar"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;font-size:16px;padding:0 0 0 0}
  .mf-msg p[lang="hi"]{font-family:"IBM Plex Sans Devanagari","IBM Plex Sans",sans-serif}
  .mf-tr{display:block;font-size:12.5px;font-style:italic;color:#6B7779;line-height:1.35;margin-top:5px}
  .mf-tr:empty{display:none}
  .mf-msg time{position:absolute;right:14px;top:14px;font-size:12px;color:#6B7779}
  .mf-link{width:4px;height:34px;border-radius:2px;background:linear-gradient(#B8F4F1,#34B5A4);box-shadow:0 0 14px rgba(52,181,164,.9);position:relative;overflow:hidden}
  .mf-link::after{content:"";position:absolute;left:0;right:0;height:12px;top:-12px;background:#fff;border-radius:2px;animation:mfpulse 1.8s linear infinite}
  .mf-link.out{background:linear-gradient(#34B5A4,#B8F4F1)}
  .mf-link.out::after{animation-delay:.9s}
  .mf-orb{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;flex:none;
    background:radial-gradient(circle at 36% 30%,#FCFBF8 0,#B8F4F1 28%,#34B5A4 66%,#155E63 92%);
    box-shadow:inset 0 0 0 1.5px rgba(233,255,252,.75),0 0 40px rgba(52,181,164,.65),0 0 110px rgba(52,181,164,.3);animation:breathe 7s ease-in-out infinite}
  .mf-out{position:relative;left:auto;top:auto;height:84px;animation:none}
  .mf-dots{display:flex;gap:8px;margin-top:16px}
  .mf-dots button{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);border:0;padding:0;transition:width .3s,background .3s}
  .mf-dots button[aria-selected="true"]{width:22px;background:#34B5A4}

  .h-benefits{order:3;flex-wrap:wrap;gap:10px 18px;margin-top:30px}
  .h-benefits li{font-size:14px;gap:8px}.h-benefits span{width:30px;height:30px}.h-benefits svg{width:16px;height:16px}

  .m-cta{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;transform:translateY(140%);transition:transform .3s}
  .m-cta.show{transform:none}
  .m-cta .h-pill{width:100%;justify-content:center;box-shadow:0 14px 34px rgba(0,0,0,.45)}
}
@keyframes mfpulse{to{top:100%}}
@media (prefers-reduced-motion:reduce){.mf-link::after,.mf-orb{animation:none}}