/* Kartavya portal: the modern motion layer.
   Loaded after portal.css and portal-cards.css. Everything here pauses off screen (.idle)
   and is switched off for people who ask for reduced motion. */


/* ---------- pause whatever is off screen ---------- */
.idle, .idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }

/* ---------- hero: live network, gradient word, floating sample cards, scroll fade ---------- */
.net { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw.grad { background: linear-gradient(90deg, #f2c879, #ffb27a, #7fe0d3, #f2c879); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hword .7s cubic-bezier(.2, .7, .2, 1) both, gradtext 6s linear infinite; animation-delay: calc(.25s + var(--i) * .07s), 0s; }
@keyframes gradtext { to { background-position: 300% 0; } }
.hero-core { translate: 0 var(--hy, 0px); opacity: var(--ho, 1); }

.floaters { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
@media (min-width: 1400px) { .floaters { display: block; } }
.fl { position: absolute; width: 232px; padding: 14px 16px; border-radius: 18px; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
  translate: calc(var(--px, 0) * var(--depth, 18px)) calc(var(--py, 0) * var(--depth, 18px)); transition: translate .5s ease-out;
  animation: flin .9s cubic-bezier(.2, .8, .2, 1) both, bob 7s ease-in-out infinite; }
.fl-l { left: 4%; top: 37%; --depth: 22px; animation-delay: 1.6s, 2.6s; }
.fl-r { right: 4%; top: 22%; --depth: -26px; animation-delay: 1.8s, 3.4s; }
.fl-s { right: 7%; top: 63%; --depth: 14px; width: auto; display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; border-radius: 999px; animation-delay: 2s, 4.2s; }
@keyframes flin { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@keyframes bob { 50% { transform: translateY(-10px); } }
.fl-h { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .88); }
.fl-h em { margin-left: auto; font-style: normal; font-size: .62rem; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .15); letter-spacing: .08em; text-transform: uppercase; }
.fl-dot { width: 8px; height: 8px; border-radius: 50%; }
.fl-dot.g { background: #5fe3d3; animation: beat-t 2s infinite; }
.fl-dot.o { background: #ff8a4c; animation: beat-o 1.4s infinite; }
@keyframes beat-t { from { box-shadow: 0 0 0 0 rgba(95, 227, 211, .6); } to { box-shadow: 0 0 0 10px rgba(95, 227, 211, 0); } }
@keyframes beat-o { from { box-shadow: 0 0 0 0 rgba(255, 138, 76, .7); } to { box-shadow: 0 0 0 10px rgba(255, 138, 76, 0); } }
.fl-big { display: block; margin-top: 8px; font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.fl-big small { font-size: .7rem; font-weight: 600; color: rgba(255, 255, 255, .75); }
.fl-bar { position: relative; height: 6px; margin: 10px 0 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.fl-bar i { display: block; width: 62%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5fe3d3, #f2c879); transform-origin: left; animation: dai-bar 7s ease-out 2s infinite; }
.fl-bar u { position: absolute; top: -4px; left: 58%; width: 2px; height: 14px; background: #fff; }
.fl p { font-size: .78rem; color: rgba(255, 255, 255, .82); }
.fl-title { display: block; margin: 6px 0 6px; font-size: 1rem; }
.fl-steps li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .8rem; opacity: 0; animation: flstep 9s ease infinite; }
.fl-steps li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #5fe3d3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2836' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4L18 8'/></svg>") center / 10px no-repeat; }
.fl-steps li:nth-child(1) { animation-delay: 2.6s; }
.fl-steps li:nth-child(2) { animation-delay: 3.5s; }
.fl-steps li:nth-child(3) { animation-delay: 4.4s; }
@keyframes flstep { 0% { opacity: 0; transform: translateX(-8px); } 6%, 78% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }
.fl-moon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, #5b57c4, #2c2a76); }
.fl-moon .ic { width: 20px; height: 20px; }
.fl-s b { display: block; font-size: 1rem; line-height: 1.2; }
.fl-s small { font-size: .7rem; color: rgba(255, 255, 255, .75); }

/* ---------- trust ticker ---------- */
.ticker { overflow: hidden; margin-top: 26px; padding: 12px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-in { display: flex; width: max-content; animation: tick 42s linear infinite; }
.ticker:hover .ticker-in { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 10px; padding-left: 30px; font-weight: 700; font-size: .95rem; color: var(--muted); white-space: nowrap; }
.ticker span::after { content: "\2726"; margin-left: 30px; color: var(--accent); font-size: .8rem; opacity: .7; }
.ticker .ic { width: 22px; height: 22px; color: var(--accent); }
:root[data-theme="dark"] .ticker .ic, :root[data-theme="dark"] .ticker span::after { color: #f0a870; }
@keyframes tick { to { transform: translateX(-50%); } }
.kits { padding-top: 22px; }

/* ---------- pointer glow, 3D tilt, magnetic buttons ---------- */
.portal .glow.glow { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), var(--glow-c, rgba(198, 93, 30, .13)), transparent 45%); }
.kits-panel .glow.glow, .ex-tiles .glow.glow { --glow-c: rgba(255, 255, 255, .24); }
.cardli .glow.glow { --glow-c: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .portal .glow { --glow-c: rgba(240, 168, 112, .14); }
.portal .tilt.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .2s, background-color .2s; }
.portal .tilt.tilt:hover { --ty: -4px; transition: transform .12s linear, box-shadow .3s, border-color .2s, background-color .2s; }
.mag { translate: var(--gx, 0px) var(--gy, 0px); transition: translate .35s cubic-bezier(.2, .8, .2, 1), transform .2s, box-shadow .2s, background .2s; }

/* ---------- buttons: light sweep on hover ---------- */
.btn-primary, .s-go, .btn-white { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .s-go::after, .btn-white::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-120%); transition: transform .65s ease; }
.btn-white::after { background: linear-gradient(110deg, transparent 30%, rgba(198, 93, 30, .16) 50%, transparent 70%); }
.btn-primary:hover::after, .s-go:hover::after, .btn-white:hover::after { transform: translateX(120%); }

/* ---------- headings rise word by word, icons draw themselves ---------- */
.u-title .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.u-title .wd > span { display: inline-block; }
.rv-ready .u-title .wd > span { transform: translateY(110%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--w) * .07s + var(--rd, 0s)); }
.rv-ready .r-in .u-title .wd > span, .rv-ready .u-title.r-in .wd > span { transform: none; }
.rv-ready .ic.draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rv-ready .r-in .ic.draw { animation: icdraw 1.5s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.35s + var(--n, 0) * .12s); }
.rv-ready .r-in.stats li .ic.draw { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both, icdraw 1.5s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.15s * var(--n, 1)), calc(.3s + .15s * var(--n, 1)); }
@keyframes icdraw { to { stroke-dashoffset: 0; } }

/* ---------- carousels: the active dot fills while the slide plays ---------- */
.dots button { position: relative; overflow: hidden; }
.playing .dots button[aria-current="true"] { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.playing .dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; animation: dotfill var(--dur, 6s) linear both; }
.playing .dots-light button[aria-current="true"] { background: rgba(255, 255, 255, .3); }
.playing .dots-light button[aria-current="true"]::after { background: #fff; }
.hold .dots button::after { animation-play-state: paused !important; }
@keyframes dotfill { from { transform: scaleX(0); } }

/* ---------- live home ---------- */
.live { padding: 40px 0 72px; }
.live-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin-top: 30px; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.live-plan { position: relative; padding: 58px 26px 22px; color: #fff; background: radial-gradient(600px 320px at 30% 20%, rgba(95, 227, 211, .13), transparent 60%), linear-gradient(150deg, #0d2836, #174559); }
.live-plan svg { display: block; width: 100%; height: auto; }
.live-badge { position: absolute; left: 24px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b5b; animation: beat-r 1.6s infinite; }
@keyframes beat-r { from { box-shadow: 0 0 0 0 rgba(255, 107, 91, .65); } to { box-shadow: 0 0 0 9px rgba(255, 107, 91, 0); } }
.rooms rect { fill: rgba(242, 200, 121, 0); transition: fill .7s ease; }
.rooms rect.on { fill: rgba(242, 200, 121, .17); }
.mk-ring { fill: none; stroke: #7fafc2; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mkring 3.6s ease-out .6s infinite; }
.mk-ring.r2 { animation-delay: 2.4s; }
@keyframes mkring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(7.5); opacity: 0; } }
.mk-pt { transform-box: fill-box; transform-origin: center; }
.rv-ready .r-in .mk-pt { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.5s + var(--i) * .15s); }
.live-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: .78rem; color: rgba(255, 255, 255, .82); }
.live-legend li { display: inline-flex; align-items: center; gap: 6px; }
.live-legend i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; font-style: normal; font-size: .6rem; font-weight: 800; color: #fff; }
.live-legend i.t { background: #2a9d8f; }
.live-legend li:first-child i { background: #fff; color: #0f1516; }
.live-legend i.o { background: #c65d1e; }
.live-legend i.m { min-width: 22px; }
.live-legend i.m::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f2c879; box-shadow: 0 0 0 4px rgba(242, 200, 121, .3); }
.live-side { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.live-top { display: flex; gap: 12px; }
.live-clock { min-width: 112px; padding: 10px 14px; border-radius: 12px; background: var(--bg); }
.live-clock small, .live-h3 { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.live-clock b { font-size: 1.65rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-status { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(35, 130, 90, .1); }
.live-status b { display: block; font-size: .95rem; line-height: 1.3; }
.live-status small { font-size: .78rem; color: var(--muted); }
.beat { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #23825a; animation: beat-g 1.8s infinite; }
@keyframes beat-g { from { box-shadow: 0 0 0 0 rgba(35, 130, 90, .55); } to { box-shadow: 0 0 0 12px rgba(35, 130, 90, 0); } }
.live-rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.live-rooms li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 10px; font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted); transition: transform .4s, border-color .4s, background-color .4s, color .4s; }
.live-rooms .ic { width: 20px; height: 20px; }
.live-rooms li.on { transform: translateY(-3px); border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.live-rooms li.on .ic { color: var(--accent); }
.live-log { display: flex; flex-direction: column; gap: 6px; min-height: 166px; }
.live-log li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg); font-size: .86rem; animation: login .5s cubic-bezier(.2, .8, .2, 1) both; }
.live-log li:first-child { background: var(--accent-soft); }
.live-log li:nth-child(3) { opacity: .75; }
.live-log li:nth-child(4) { opacity: .5; }
.live-log time { min-width: 44px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.live-log span { color: var(--muted); margin-left: auto; font-size: .8rem; }
@keyframes login { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.live-note { display: flex; gap: 8px; margin-top: auto; font-size: .8rem; color: var(--muted); }
.live-note .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
:root[data-theme="dark"] .live-log time, :root[data-theme="dark"] .live-rooms li.on .ic, :root[data-theme="dark"] .live-note .ic { color: #f0a870; }

/* ---------- banner artwork ---------- */
.banner .slider { background: radial-gradient(700px 360px at 85% 30%, rgba(95, 227, 211, .16), transparent 60%), radial-gradient(600px 300px at 10% 90%, rgba(198, 93, 30, .18), transparent 60%), linear-gradient(120deg, #0d2836, #174559); background-size: 140% 140%, 140% 140%, 100% 100%; animation: aurora 18s ease-in-out infinite alternate; }
@keyframes aurora { to { background-position: 100% 0, 0 100%, 0 0; } }
.orbit { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .28); animation: orbit-spin 18s linear infinite; }
.orbit.o2 { width: 184px; height: 184px; margin: -92px 0 0 -92px; animation-duration: 11s; animation-direction: reverse; }
.orbit b { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #f2c879; box-shadow: 0 0 14px rgba(242, 200, 121, .8); }
.orbit b:nth-child(1) { left: 50%; top: 0; }
.orbit b:nth-child(2) { left: 100%; top: 50%; background: #5fe3d3; box-shadow: 0 0 14px rgba(95, 227, 211, .8); }
.orbit b:nth-child(3) { left: 50%; top: 100%; }
.orbit b:nth-child(4) { left: 0; top: 50%; background: #ff8a4c; box-shadow: 0 0 14px rgba(255, 138, 76, .8); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.radar { position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; margin: -135px 0 0 -135px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(201, 225, 232, .35); background: repeating-radial-gradient(circle, transparent 0 44px, rgba(201, 225, 232, .16) 45px 46px); }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(95, 227, 211, .5), rgba(95, 227, 211, 0) 75deg, transparent); animation: orbit-spin 4s linear infinite; }
.radar b { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #f2c879; opacity: 0; animation: blip 4s ease-out infinite; animation-delay: var(--d); }
@keyframes blip { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.4); } 40% { opacity: .7; transform: scale(1); } 100% { opacity: 0; } }
.s-kit, .s-esc { min-height: 0; }
.s-kit svg { width: 100%; height: auto; max-height: 300px; overflow: visible; }
.s-kit g[fill="#5d6764"] { fill: rgba(255, 255, 255, .72); }
.s-esc svg { width: min(100%, 360px); height: auto; overflow: visible; }
.slide.on .s-kit svg, .slide.on .s-esc svg { animation: pop .8s cubic-bezier(.3, 1.4, .5, 1) both, floaty 7s ease-in-out .8s infinite; }

/* ---------- finder band: drifting device icons ---------- */
.finder { position: relative; overflow: hidden; }
.finder-in { position: relative; z-index: 1; }
.bubbles .ic { position: absolute; left: var(--x); bottom: -70px; width: calc(42px * var(--s)); height: calc(42px * var(--s)); color: rgba(255, 255, 255, .13); stroke-width: 1.3; animation: rise var(--t) linear infinite; animation-delay: var(--d); }
@keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(-620px) rotate(28deg); opacity: 0; } }

/* ---------- how it works: the steps light up in turn ---------- */
@keyframes stepglow { 0%, 34%, 100% { box-shadow: var(--shadow-s); } 8%, 24% { box-shadow: 0 0 0 2px var(--accent), 0 12px 28px rgba(180, 80, 26, .22); } }
.spot-art.ring .ic { animation: ringshake 2.6s ease-in-out infinite; }
.spot-art.ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: ringout 2.6s ease-out infinite; }
@keyframes ringshake { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(-12deg); } 10%, 20%, 30% { transform: rotate(12deg); } }

/* ---------- levels ---------- */
.levels { padding: 56px 0 66px; background: var(--surface); }
.lv { --lv: #23825a; max-width: 980px; margin: 30px auto 0; }
.lv-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 16px; background: var(--bg); }
.lv-fill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 30px) / 4); border-radius: 12px; background: var(--lv); box-shadow: 0 8px 22px color-mix(in srgb, var(--lv) 45%, transparent); transform: translateX(calc(var(--lvi, 0) * (100% + 6px))); transition: transform .6s cubic-bezier(.3, 1.25, .4, 1), background-color .4s, box-shadow .4s; }
.lv-seg { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 6px; border: 0; border-radius: 12px; background: transparent; font-weight: 700; font-size: 1rem; color: var(--muted); transition: color .3s; }
.lv-seg small { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .78rem; }
.lv-seg[aria-selected="true"] { color: #fff; }
.lv-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; margin-top: 16px; padding: 26px 28px; border-radius: 16px; background: var(--bg); border-left: 5px solid var(--lv); transition: border-color .4s; }
.lv-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--lv); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transition: background-color .4s; }
.lv-text h3 { margin: 8px 0 6px; font-size: 1.7rem; }
.lv-text p { color: var(--muted); }
.lv-swap { animation: lvswap .45s ease both; }
@keyframes lvswap { from { opacity: 0; transform: translateY(10px); } }
.lv-who h4 { margin-bottom: 10px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lv-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lv-roles li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1.5px dashed var(--line); border-radius: 12px; font-size: .82rem; font-weight: 600; color: var(--muted); opacity: .55; transition: opacity .4s, border-color .4s, background-color .4s, color .4s, box-shadow .4s; }
.lv-roles .ic { width: 24px; height: 24px; }
.lv-roles li.lit { opacity: 1; border-style: solid; border-color: var(--lv); background: var(--surface); color: var(--text); box-shadow: 0 6px 18px color-mix(in srgb, var(--lv) 25%, transparent); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.lv-roles li.lit .ic { color: var(--lv); }
.lv-note { margin-top: 12px; font-size: .92rem; font-weight: 600; }
:root[data-theme="dark"] .lv-roles li.lit .ic { color: #fff; }

/* ---------- explore scenes ---------- */
.calling { position: absolute; left: 50%; bottom: 9%; z-index: 2; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.dots3 b { animation: dotblink 1.4s infinite; }
.dots3 b:nth-child(2) { animation-delay: .2s; }
.dots3 b:nth-child(3) { animation-delay: .4s; }
@keyframes dotblink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ---------- involve band: phone with the alert flow ---------- */
.inv-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 34px; }
.inv-wrap .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.phone { position: relative; width: 270px; height: 540px; margin: 0 auto; padding: 14px; border-radius: 44px; background: #0b1419; box-shadow: 0 30px 70px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .12); animation: floaty 8s ease-in-out infinite; }
.phone-notch { position: absolute; left: 50%; top: 22px; z-index: 2; width: 90px; height: 24px; margin-left: -45px; border-radius: 14px; background: #000; }
.phone-scr { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 58px 12px 12px; border-radius: 32px; overflow: hidden; background: radial-gradient(300px 300px at 50% 0%, rgba(95, 227, 211, .25), transparent 70%), linear-gradient(170deg, #173b4d, #0d2836); }
.ph-time { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 6px; color: #fff; font-weight: 800; font-size: 1.1rem; }
.ph-time em { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nt { padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); color: #17232c; font-size: .8rem; line-height: 1.35; opacity: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.nt b { display: block; margin-bottom: 2px; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #53606c; }
.nt.al { background: #fff3ea; box-shadow: inset 4px 0 0 #c65d1e, 0 8px 20px rgba(0, 0, 0, .2); }
.nt.al b { color: #b4501a; }
.nt.ok { box-shadow: inset 4px 0 0 #23825a, 0 8px 20px rgba(0, 0, 0, .2); }
.nt.ok b { color: #23825a; }
.n1 { animation: nt1 12s cubic-bezier(.2, .8, .2, 1) infinite; }
.n2 { animation: nt2 12s cubic-bezier(.2, .8, .2, 1) infinite; }
.n3 { animation: nt3 12s cubic-bezier(.2, .8, .2, 1) infinite; }
.n4 { animation: nt4 12s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes nt1 { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 4%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes nt2 { 0%, 18% { opacity: 0; transform: translateY(-14px) scale(.96); } 22%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes nt3 { 0%, 36% { opacity: 0; transform: translateY(-14px) scale(.96); } 40%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes nt4 { 0%, 54% { opacity: 0; transform: translateY(-14px) scale(.96); } 58%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- footer: animated edge + giant wordmark ---------- */
.foot { position: relative; overflow: hidden; padding-bottom: 0; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #f2c879, #c65d1e, #2a9d8f, #f2c879); background-size: 300% 100%; animation: gradtext 8s linear infinite; }
.foot-word { margin-top: 30px; text-align: center; font-weight: 800; font-size: clamp(4rem, 17vw, 15rem); line-height: .8; letter-spacing: -.04em; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(242, 200, 121, .38), rgba(95, 227, 211, .28), rgba(255, 255, 255, .05)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradtext 10s linear infinite; user-select: none; translate: 0 16%; }

/* ---------- dark-mode switch: circular reveal (View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .inv-wrap { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
  .phone { width: 240px; height: 480px; }
}
@media (max-width: 900px) {
  .live-in { grid-template-columns: 1fr; }
  .inv-wrap { grid-template-columns: 1fr; }
  .lv-panel { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .phone { display: none; }
  .inv-wrap .inv-grid { grid-template-columns: 1fr; }
  .live-plan { padding: 54px 14px 16px; }
  .live-side { padding: 18px 16px; }
  .live-top { flex-direction: column; }
  .lv-seg { flex-direction: column; gap: 4px; min-height: 66px; font-size: .78rem; }
  .lv-panel { padding: 20px 18px; }
  .lv-text h3 { font-size: 1.4rem; }
  .ticker span { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-in, .bubbles, .net { display: none; }
  .ticker-in { display: flex; animation: none; }
  .fl-steps li, .nt, .radar b { opacity: 1; transform: none; }
  .hero-core { translate: none; opacity: 1; }
  .hw.grad { animation: none; }
}

@media (max-width: 1240px) { .rail { display: none; } }

/* ---------- hero video: the film is the hero background, the hero content sits on top ---------- */
.hero { display: flex; flex-direction: column; min-height: 100svh; padding-bottom: 150px; background: #0c1315; }
.hero::before { display: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 16, 20, .6) 0%, rgba(7, 16, 20, .08) 26%, rgba(7, 16, 20, .22) 50%, rgba(7, 16, 20, .9) 100%); }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: rgba(255, 255, 255, .14); }
.film-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2c879, #c65d1e); transform-origin: left; transform: scaleX(0); }
.hero-core { flex: 1; justify-content: flex-end; align-items: flex-start; text-align: left; padding-top: 0; }
.hero h1 { max-width: 22ch; margin-top: 0; font-size: clamp(2rem, 1rem + 3vw, 3.7rem); text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.hero-sub { text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.hero .search { margin-top: 20px; }
.trend { justify-content: flex-start; }
.trend ul { justify-content: flex-start; }
.hero.is-paused .hero-scrim { background: linear-gradient(180deg, rgba(7, 16, 20, .7) 0%, rgba(7, 16, 20, .3) 30%, rgba(7, 16, 20, .45) 55%, rgba(7, 16, 20, .92) 100%); }
.hero.is-paused [data-film-toggle] .ic { fill: currentColor; }
@media (max-width: 720px) {
  .hero { min-height: 92svh; padding-bottom: 130px; }
  .hero h1 { max-width: 14ch; }
}

/* ---------- film on top: a top bar over the playing video, the search and headline sit below it ---------- */
.hero { display: block; min-height: 0; padding-bottom: 150px; }
.hero-stage { position: relative; display: flex; flex-direction: column; height: clamp(360px, 56.25vw, 88svh); overflow: hidden; }
.hero-scrim { background: linear-gradient(180deg, rgba(7, 16, 20, .72) 0%, rgba(7, 16, 20, 0) 22%, rgba(7, 16, 20, 0) 90%, #0c1315 100%); }
.hero.is-paused .hero-scrim { background: linear-gradient(180deg, rgba(7, 16, 20, .72) 0%, rgba(7, 16, 20, .12) 25%, rgba(7, 16, 20, .12) 90%, #0c1315 100%); }
.hero-copy { position: relative; z-index: 3; width: min(100% - 48px, 1320px); padding-top: 28px; }
.hero-core { flex: none; justify-content: flex-start; }
.hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.2rem); text-shadow: none; }
@media (max-width: 720px) {
  .hero { min-height: 0; padding-bottom: 130px; }
  .hero-stage { height: auto; overflow: visible; background: #0c1315; }
  .hero-video { position: relative; order: 2; height: auto; aspect-ratio: 16 / 9; }
  .hero-scrim { display: none; }
  .film-bar { bottom: 0; }
  .hero-copy { width: min(100% - 32px, 1320px); padding-top: 20px; }
  .hero h1 { max-width: 14ch; }
}