/* 720° BIZ ASSIST main website. Made by 720DegreeIT (Pty) Ltd.
   One idea runs through the page (the same one as the flyers and social posts): it is late, a customer wants to book,
   and somebody has to answer. Navy for the night, electric blue for the product, amber for the one thing to notice,
   mint for "booked". Dark hero and demo, light sections for reading. */

:root {
  --ink: #06101f; --night: #0a1a30; --night2: #112a4a; --line: #21395c;
  --blue: #2b8fff; --blue2: #1a5fd0; --sky: #9bd0ff; --mint: #38d178; --amber: #ffb02e; --rose: #ff6b7a;
  --corp: #003366; --corp2: #0078d4;
  --paper: #f2f6fb; --card: #ffffff; --text: #0c1a2e; --muted: #586a82; --rule: #d9e2ee;
  --f-d: 'Archivo', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-m: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --wrap: 1200px; --r: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-d); font-size: 1.0625rem; line-height: 1.58; color: var(--text); background: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: var(--corp2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--amber); color: var(--ink); padding: .6rem 1rem; border-radius: 10px; font-weight: 700; }
.skip:focus { left: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.mono { font-family: var(--f-m); }
.amber { color: var(--amber); } .blue { color: var(--blue); } .mint { color: var(--mint); } .sky { color: var(--sky); }
.ico { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-m); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue2); }
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: currentColor; border-radius: 2px; }
.dark .eyebrow, .eyebrow.on-dark { color: var(--sky); }
.h2 { font-weight: 800; font-stretch: 88%; font-variation-settings: 'wdth' 88; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.04; letter-spacing: -.012em; color: var(--night); }
.dark .h2 { color: #fff; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.dark .lead { color: #b9cde6; }
.head { display: grid; gap: .9rem; margin-bottom: 3rem; }
.head.center { text-align: center; justify-items: center; }
.head.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn { white-space: nowrap; --bg: var(--blue); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .8rem 1.5rem; border-radius: 14px; border: 2px solid transparent; background: var(--bg); color: var(--fg); font-weight: 800; font-size: 1.02rem; letter-spacing: .005em; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; position: relative; overflow: hidden; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .ico { width: 1.2em; height: 1.2em; }
.btn.amber-b { --bg: var(--amber); --fg: var(--ink); box-shadow: 0 10px 30px rgba(255, 176, 46, .28); }
.btn.amber-b:hover { box-shadow: 0 14px 38px rgba(255, 176, 46, .45); }
.btn.amber-b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); }
.btn.amber-b:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.btn.line { --bg: transparent; --fg: #fff; border-color: rgba(155, 208, 255, .45); }
.btn.line:hover { background: rgba(43, 143, 255, .16); border-color: var(--sky); }
.btn.line-d { --bg: transparent; --fg: var(--night); border-color: var(--rule); }
.btn.line-d:hover { border-color: var(--blue); background: #fff; }
.btn.blue-b { box-shadow: 0 10px 28px rgba(43, 143, 255, .3); }
.btn.sm { min-height: 42px; padding: .5rem 1.05rem; font-size: .95rem; border-radius: 11px; }
.btn.wide { width: 100%; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .3s, box-shadow .3s; }
.hdr.scrolled { background: rgba(6, 16, 31, .84); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(155, 208, 255, .14); }
.hdr .in { display: flex; align-items: center; gap: 1.4rem; height: 74px; }
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 0 14px rgba(43, 143, 255, .45)); }
.brand b { display: block; font-weight: 800; font-stretch: 92%; font-size: 1.16rem; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.brand small { display: block; margin-top: .34rem; font-family: var(--f-m); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--sky); opacity: .9; white-space: nowrap; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 1.5rem; }
.nav a.l { position: relative; color: #cfe0f6; font-weight: 650; font-size: .95rem; padding: .35rem 0; text-decoration: none; white-space: nowrap; }
.nav a.l::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--amber); transition: width .25s var(--ease); }
.nav a.l:hover { color: #fff; }
.nav a.l:hover::after { width: 100%; }
.nav .m-only { display: none; }
.acts { display: flex; align-items: center; gap: .7rem; }
.menu { position: relative; }
.menu > button { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .5rem 1rem; border-radius: 11px; background: transparent; color: #fff; font-weight: 700; font-size: .95rem; border: 2px solid rgba(155, 208, 255, .4); }
.menu > button:hover, .menu > button[aria-expanded='true'] { background: rgba(43, 143, 255, .16); border-color: var(--sky); }
.menu > button .ico { width: 1em; height: 1em; transition: transform .2s; }
.menu > button[aria-expanded='true'] .ico { transform: rotate(180deg); }
.menu .pop { position: absolute; right: 0; top: calc(100% + .6rem); width: 290px; padding: .5rem; border-radius: 16px; background: #0b1a2f; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s var(--ease); }
.menu .pop.open { opacity: 1; transform: none; pointer-events: auto; }
.menu .pop a { display: grid; gap: .1rem; padding: .8rem .9rem; border-radius: 11px; color: #fff; text-decoration: none; }
.menu .pop a:hover { background: rgba(43, 143, 255, .16); }
.menu .pop a b { font-weight: 800; }
.menu .pop a span { font-size: .85rem; color: #9db3d0; }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; background: transparent; border: 2px solid rgba(155, 208, 255, .4); color: #fff; place-items: center; }
.burger .ico { width: 1.4em; height: 1.4em; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 148px 0 96px; min-height: min(100svh, 940px); display: grid; align-content: start;
  background: radial-gradient(1100px 620px at 82% 8%, rgba(43, 143, 255, .34), transparent 62%), radial-gradient(800px 520px at 6% 96%, rgba(255, 176, 46, .1), transparent 62%), linear-gradient(180deg, #06101f 0%, #0a1a30 100%); }
.hero::before { content: ''; position: absolute; inset: -20% 0 0 0; z-index: -2; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 0v34M0 50v34l28 16 28-16V50' fill='none' stroke='%232b8fff' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 56px 100px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%); animation: drift 40s linear infinite; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 30%), rgba(43, 143, 255, .16), transparent 62%); }
/* the same soft light over every other blue section; it fades in under the pointer and out when the pointer leaves */
.glow { position: relative; isolation: isolate; }
.glow::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 143, 255, .18), transparent 62%); }
.glow.lit::after { opacity: 1; }
.streak { position: absolute; z-index: -1; height: 150px; width: 70%; background: linear-gradient(90deg, transparent, rgba(43, 143, 255, .0) 10%, rgba(43, 143, 255, .5) 50%, rgba(155, 208, 255, .0) 90%); filter: blur(34px); transform: rotate(-32deg); opacity: .55; pointer-events: none; }
.streak.s1 { top: 6%; left: -22%; } .streak.s2 { bottom: 8%; right: -26%; transform: rotate(-32deg); opacity: .4; }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 3rem; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .95rem .45rem .5rem; border-radius: 99px; background: rgba(43, 143, 255, .14); border: 1px solid rgba(155, 208, 255, .3); color: #d8e9ff; font-size: .86rem; font-weight: 650; }
.pill .dot { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--blue); }
.pill .dot .ico { width: .95rem; height: .95rem; color: #fff; }
.pill b { color: #fff; }
h1.hero-h { margin-top: 1.4rem; font-weight: 900; font-stretch: 70%; font-variation-settings: 'wdth' 70; text-transform: uppercase; line-height: .92; letter-spacing: -.004em; font-size: clamp(2.7rem, 5.7vw, 5.2rem); }
h1.hero-h .time { display: block; font-family: var(--f-m); font-stretch: 100%; font-variation-settings: normal; font-weight: 700; color: var(--amber); font-size: .72em; letter-spacing: -.02em; text-shadow: 0 0 40px rgba(255, 176, 46, .45); margin-bottom: .12em; }
h1.hero-h .time i { font-style: normal; animation: blink 1.2s steps(1) infinite; }
h1.hero-h .ask { display: block; margin-top: .1em; background: linear-gradient(95deg, var(--amber) 10%, #ffd88a 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--amber); }
.hero .lead { margin-top: 1.5rem; color: #c3d6ee; font-size: clamp(1.1rem, 1.6vw, 1.32rem); max-width: 56ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }
.fine-row { margin-top: 1.2rem; font-size: .92rem; color: #9db3d0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.fine-row span { display: inline-flex; align-items: center; gap: .4rem; }
.fine-row .ico { width: 1.05em; height: 1.05em; color: var(--mint); }
.trust { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border-radius: 99px; background: rgba(43, 143, 255, .13); border: 1px solid rgba(155, 208, 255, .24); color: #d3e6ff; font-size: .84rem; font-weight: 700; }
.chip .ico { width: 1.05em; height: 1.05em; color: var(--mint); }

.stage { position: relative; display: grid; justify-items: center; align-content: center; min-height: 600px; }
.stage .halo { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 143, 255, .5), transparent 65%); filter: blur(30px); animation: pulse 6s ease-in-out infinite; }
.stage .orbit { position: absolute; width: 640px; height: 640px; border-radius: 50%; border: 1px dashed rgba(155, 208, 255, .2); }

/* the little honey bee: a loose loop around the phone, driven by site.js */
.bee-wrap { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.bee { position: absolute; left: -19px; top: -13px; width: 38px; height: 26px; will-change: transform; filter: drop-shadow(0 0 7px rgba(255, 176, 46, .55)); }
.bee svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bee .wing { transform-origin: 30px 20px; animation: flap .09s ease-in-out infinite alternate; }
.bee .wing.w2 { animation-delay: -.045s; }
.trail { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); will-change: transform; }
.trail:nth-child(1) { opacity: .55; } .trail:nth-child(2) { opacity: .46; } .trail:nth-child(3) { opacity: .38; }
.trail:nth-child(4) { opacity: .3; } .trail:nth-child(5) { opacity: .22; } .trail:nth-child(6) { opacity: .14; }
@keyframes flap { from { transform: rotate(-16deg) scaleY(1); } to { transform: rotate(18deg) scaleY(.7); } }
.fcard { position: absolute; z-index: 3; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem .7rem .75rem; border-radius: 16px; background: rgba(14, 32, 58, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(155, 208, 255, .26); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); font-size: .86rem; line-height: 1.25; animation: float 7s ease-in-out infinite; }
.fcard b { display: block; color: #fff; font-weight: 800; }
.fcard small.tag { display: block; margin-bottom: .15rem; font-family: var(--f-m); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--sky); opacity: .9; white-space: nowrap; }
.fcard span { color: #9db3d0; font-size: .78rem; }
.fcard .ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: rgba(56, 209, 120, .16); color: var(--mint); flex: none; }
.fcard .ic.b { background: rgba(43, 143, 255, .2); color: var(--sky); } .fcard .ic.a { background: rgba(255, 176, 46, .16); color: var(--amber); }
.fcard.f1 { top: 6%; left: -12%; animation-delay: -1s; } .fcard.f2 { top: 44%; right: -17%; animation-delay: -3.4s; } .fcard.f3 { bottom: 16%; left: -14%; animation-delay: -5.2s; }

/* ---------- phone (the same mock-up as the flyers) ---------- */
.phone { --ps: 16px; font-size: var(--ps); width: 22em; max-width: 100%; padding: .5em; border-radius: 3.1em; position: relative; z-index: 2;
  background: linear-gradient(150deg, #47597a 0%, #16233a 40%, #0b1424 62%, #34466a 100%); box-shadow: 0 2.4em 4.5em rgba(0, 0, 0, .55), 0 0 0 .07em #5a6f96 inset, 0 0 0 .13em #050a14; }
.hero .phone { transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .3s ease-out; will-change: transform; }
.phone .screen { position: relative; border-radius: 2.65em; overflow: hidden; background: #0b1626; display: flex; flex-direction: column; height: var(--mh, 36em); }
.phone .screen::before { content: ''; position: absolute; top: .62em; left: 50%; transform: translateX(-50%); width: 5.6em; height: 1.6em; border-radius: 1em; background: #000; z-index: 4; }
.sbar { display: flex; justify-content: space-between; align-items: center; padding: .95em 1.7em .35em; font-size: .8em; font-weight: 700; color: #fff; position: relative; z-index: 3; }
.sbar .sg { display: flex; gap: .35em; align-items: center; }
.sbar .sg i { display: block; background: #fff; border-radius: .1em; width: .28em; }
.sbar .bat { width: 1.5em; height: .72em; border: .1em solid #fff; border-radius: .22em; position: relative; margin-left: .2em; }
.sbar .bat::after { content: ''; position: absolute; inset: .1em; right: .35em; background: #fff; border-radius: .08em; }
.chead { display: flex; gap: .7em; align-items: center; padding: .7em 1em; background: #10213a; border-bottom: 1px solid #1d3558; position: relative; z-index: 2; }
.chead .av { width: 2.45em; height: 2.45em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95em; color: #fff; background: linear-gradient(140deg, #2b8fff, #1a5fd0); flex: none; }
.chead .who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.chead .who b { font-size: .92em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .who small { font-size: .68em; color: var(--mint); font-weight: 600; }
.chead .hi { margin-left: auto; display: flex; gap: .9em; color: #8ea6c6; }
.chead .hi .ico { width: 1.15em; height: 1.15em; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .42em; padding: 1em .75em .6em; overflow: hidden; justify-content: flex-end; background: radial-gradient(circle at 80% 0%, rgba(43, 143, 255, .1), transparent 55%), #0b1626; }
.chat .day { align-self: center; font-size: .64em; color: #8ea6c6; background: #14263f; border-radius: .5em; padding: .25em .8em; margin: .1em 0 .25em; font-weight: 600; letter-spacing: .06em; }
.b { position: relative; min-width: 4.4em; max-width: 82%; padding: .5em .7em 1.15em; border-radius: .95em; font-size: .84em; line-height: 1.34; color: #eaf1fb; font-weight: 450; box-shadow: 0 .08em .12em rgba(0, 0, 0, .25); overflow-wrap: break-word; animation: pop .35s var(--ease) both; }
.b.in { background: #1b2c46; border-top-left-radius: .25em; align-self: flex-start; }
.b.out { background: #17714c; border-top-right-radius: .25em; align-self: flex-end; }
.b i { position: absolute; right: .55em; bottom: .22em; font-size: .68em; font-style: normal; opacity: .62; font-weight: 500; }
.b.out i::after { content: ' ✓✓'; color: #8fd8ff; opacity: 1; letter-spacing: -.15em; }
.b b { font-weight: 700; color: #fff; }
.b .ok { color: var(--mint); font-weight: 700; }
.b.typing { padding: .7em .9em; min-width: 3.6em; }
.b.typing i { position: static; display: inline-block; width: .5em; height: .5em; margin: 0 .12em; border-radius: 50%; background: #8ea6c6; opacity: .5; animation: dots 1.1s infinite; }
.b.typing i::after { content: none; }
.b.typing i:nth-child(2) { animation-delay: .18s; } .b.typing i:nth-child(3) { animation-delay: .36s; }
.b.photo { padding: .28em .28em 1.2em; }
.b.photo .pic { width: 11.5em; max-width: 100%; height: 7.6em; border-radius: .7em; position: relative; overflow: hidden; background: linear-gradient(135deg, #2c3f5e, #13213a 60%, #3a2c5e); }
.b.photo .pic .ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.2em; height: 2.2em; color: #9db6d8; opacity: .8; }
.b.photo .cap { padding: .35em .45em 0; }
.cinput { display: flex; align-items: center; gap: .6em; padding: .6em .8em .95em; background: #0b1626; }
.cinput span { flex: 1; background: #14263f; color: #6f88ab; border-radius: 1.4em; padding: .62em 1em; font-size: .78em; }
.cinput em { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--blue); display: grid; place-items: center; font-style: normal; }
.cinput em .ico { width: 1.1em; height: 1.1em; color: #fff; }
.eg { margin-top: 1.1rem; text-align: center; font-family: var(--f-m); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--sky); opacity: .85; }

/* ---------- who is who ---------- */
.whois { position: relative; z-index: 2; background: linear-gradient(180deg, #0a1a30, #0c2038); border-top: 1px solid rgba(155, 208, 255, .12); border-bottom: 1px solid rgba(155, 208, 255, .12); color: #fff; }
.whois .in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.whois .it { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.2rem; }
.whois .it img { width: 62px; height: 62px; border-radius: 16px; flex: none; }
.whois .it .tag { font-family: var(--f-m); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--amber); }
.whois .it b { display: block; font-size: 1.28rem; font-weight: 800; font-stretch: 92%; line-height: 1.15; margin-top: .15rem; }
.whois .it p { margin-top: .25rem; color: #9db3d0; font-size: .93rem; line-height: 1.4; }
.whois .sep { width: 1px; background: linear-gradient(180deg, transparent, rgba(155, 208, 255, .35), transparent); margin: .8rem 0; }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.light { background: var(--paper); }
.white { background: #fff; }
.dark { background: var(--ink); color: #fff; }
.dark.alt { background: linear-gradient(180deg, #0a1a30, #06101f); }
.hexbg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 0v34M0 50v34l28 16 28-16V50' fill='none' stroke='%232b8fff' stroke-opacity='.1' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 56px 100px; }

/* the moment */
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.mom { position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: var(--r); background: #fff; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(10, 26, 48, .05), 0 18px 40px rgba(10, 26, 48, .06); transition: transform .3s var(--ease), box-shadow .3s var(--ease); overflow: hidden; }
.mom::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--sky)); }
.mom:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(10, 26, 48, .06), 0 28px 56px rgba(10, 26, 48, .12); }
.mom .t { font-family: var(--f-m); font-weight: 700; font-size: 2.1rem; color: var(--night); letter-spacing: -.03em; line-height: 1; }
.mom .t em { font-style: normal; color: var(--amber); text-shadow: 0 0 22px rgba(255, 176, 46, .5); }
.mom p { margin-top: .9rem; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.moment-end { margin-top: 2.4rem; display: flex; align-items: center; justify-content: center; gap: .9rem; text-align: center; font-weight: 800; font-stretch: 90%; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--night); }
.moment-end .ico { color: var(--blue); width: 1.3em; height: 1.3em; }

/* features */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feat { position: relative; padding: 1.7rem 1.6rem; border-radius: var(--r); background: #fff; border: 1px solid var(--rule); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.feat:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(10, 26, 48, .1); border-color: rgba(43, 143, 255, .45); }
.feat .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #fff; background: linear-gradient(140deg, #2b8fff, #1a5fd0); box-shadow: 0 10px 22px rgba(43, 143, 255, .3); }
.feat .ic .ico { width: 1.5rem; height: 1.5rem; }
.feat h3 { margin-top: 1.1rem; font-size: 1.24rem; font-weight: 800; font-stretch: 94%; color: var(--night); line-height: 1.2; }
.feat p { margin-top: .5rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.feat .tier { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--f-m); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--blue2); background: rgba(43, 143, 255, .1); border-radius: 99px; padding: .25rem .6rem; }
.addon { margin-top: 1.4rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; padding: 1.6rem 1.8rem; border-radius: var(--r); color: #fff; background: radial-gradient(500px 220px at 90% 0%, rgba(43, 143, 255, .45), transparent 70%), linear-gradient(135deg, #0a1a30, #112a4a); border: 1px solid var(--line); }
.addon .ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 176, 46, .15); color: var(--amber); }
.addon .ic .ico { width: 1.9rem; height: 1.9rem; }
.addon h3 { font-size: 1.3rem; font-weight: 800; }
.addon p { color: #b9cde6; margin-top: .2rem; font-size: 1rem; }
.addon .tag { display: inline-block; margin-bottom: .4rem; font-family: var(--f-m); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; color: var(--ink); background: var(--amber); border-radius: .35em; padding: .3em .6em; }

/* demo */
.demo { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: center; }
.tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
.tab { padding: .6rem 1.1rem; border-radius: 99px; background: rgba(43, 143, 255, .1); border: 1px solid rgba(155, 208, 255, .25); color: #cfe0f6; font-weight: 700; font-size: .95rem; transition: background .2s, color .2s, border-color .2s; }
.tab:hover { border-color: var(--sky); }
.tab[aria-selected='true'] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(43, 143, 255, .35); }
.demo-copy .h2 { margin-top: .8rem; }
.demo-copy .lead { margin-top: 1rem; }
.asks { margin-top: 1.6rem; display: grid; gap: .6rem; }
.asks h3 { font-family: var(--f-m); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); font-weight: 700; }
.ask-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: .85rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(155, 208, 255, .22); color: #fff; font-weight: 650; transition: background .2s, transform .2s var(--ease), border-color .2s; }
.ask-btn:hover:not(:disabled) { background: rgba(43, 143, 255, .2); border-color: var(--sky); transform: translateX(4px); }
.ask-btn:disabled { opacity: .45; cursor: default; }
.ask-btn .ico { color: var(--amber); width: 1.1em; height: 1.1em; }
html:not(.js) .asks, html:not(.js) #replay { display: none; }
.demo-foot { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; color: #9db3d0; font-size: .95rem; }
.demo-stage { display: grid; justify-items: center; position: relative; }
.demo-stage::before { content: ''; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(43, 143, 255, .38), transparent 66%); filter: blur(28px); }

/* how */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: s; position: relative; }
.steps::before { content: ''; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 20px); opacity: .45; }
.step { position: relative; padding: 0 1rem; text-align: center; }
.step .n { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.3rem; border-radius: 22px; background: linear-gradient(140deg, #2b8fff, #1a5fd0); color: #fff; font-family: var(--f-m); font-weight: 700; font-size: 1.6rem; box-shadow: 0 14px 30px rgba(43, 143, 255, .35); transform: rotate(-4deg); }
.step h3 { font-size: 1.3rem; font-weight: 800; color: var(--night); }
.step p { margin-top: .5rem; color: var(--muted); max-width: 34ch; margin-inline: auto; }
.needs { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.need { display: flex; gap: .9rem; align-items: flex-start; padding: 1.2rem 1.3rem; border-radius: 16px; background: #fff; border: 1px solid var(--rule); font-size: .98rem; color: var(--muted); }
.need .ico { color: var(--blue); width: 1.5em; height: 1.5em; margin-top: .1em; }
.need b { display: block; color: var(--night); font-weight: 800; }
.help-note { margin-top: 1.6rem; text-align: center; color: var(--muted); }
.help-note b { color: var(--night); }

/* trust */
.trusts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tr { padding: 1.7rem 1.6rem; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(155, 208, 255, .2); transition: transform .3s var(--ease), border-color .3s; }
.tr:hover { transform: translateY(-4px); border-color: var(--sky); }
.tr .ico { color: var(--mint); width: 2rem; height: 2rem; }
.tr h3 { margin-top: .9rem; font-size: 1.2rem; font-weight: 800; color: #fff; }
.tr p { margin-top: .45rem; color: #b9cde6; font-size: .98rem; line-height: 1.5; }

/* who for */
.fors { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.for { display: inline-flex; align-items: center; gap: .65rem; padding: .85rem 1.3rem; border-radius: 99px; background: #fff; border: 1px solid var(--rule); font-weight: 750; color: var(--night); box-shadow: 0 6px 18px rgba(10, 26, 48, .05); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.for:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 14px 30px rgba(43, 143, 255, .16); }
.for .ico { color: var(--blue); }
.notyet { margin: 2.2rem auto 0; max-width: 720px; text-align: center; color: var(--muted); font-size: .98rem; }
.notyet b { color: var(--night); }

/* pricing */
.cycle { display: inline-flex; padding: .3rem; border-radius: 99px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(10, 26, 48, .06); }
.cycle button { padding: .6rem 1.3rem; border-radius: 99px; border: 0; background: transparent; color: var(--muted); font-weight: 800; font-size: .98rem; transition: background .2s, color .2s; }
.cycle button[aria-pressed='true'] { background: var(--night); color: #fff; }
.cycle .save { margin-left: .5rem; font-family: var(--f-m); font-size: .68rem; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 99px; background: rgba(56, 209, 120, .18); color: #11803f; }
.cycle button[aria-pressed='true'] .save { background: rgba(56, 209, 120, .25); color: #7ff0ae; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; margin-top: 2.4rem; }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem 1.8rem 1.8rem; border-radius: 24px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(10, 26, 48, .05), 0 24px 50px rgba(10, 26, 48, .07); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.plan:hover { transform: translateY(-6px); }
.plan.rec { background: linear-gradient(180deg, #0c2038, #0a1a30); color: #fff; border: 1px solid rgba(43, 143, 255, .6); box-shadow: 0 0 0 1px rgba(43, 143, 255, .35), 0 34px 80px rgba(43, 143, 255, .28); transform: translateY(-12px); }
.plan.rec:hover { transform: translateY(-18px); }
.plan .ribbon { position: absolute; top: -.9rem; left: 50%; transform: translateX(-50%); font-family: var(--f-m); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; background: var(--amber); color: var(--ink); padding: .4rem .9rem; border-radius: 99px; box-shadow: 0 8px 20px rgba(255, 176, 46, .35); white-space: nowrap; }
.plan h3 { font-size: 1.5rem; font-weight: 900; font-stretch: 85%; text-transform: uppercase; letter-spacing: .01em; color: var(--night); }
.plan.rec h3 { color: #fff; }
.plan .for-who { margin-top: .2rem; color: var(--muted); font-size: .96rem; min-height: 2.9em; }
.plan.rec .for-who { color: #9db3d0; }
.plan .price { margin-top: 1.1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan .price .cur { font-family: var(--f-m); font-weight: 700; font-size: 1.1rem; color: var(--muted); }
.plan .price .amt { font-family: var(--f-m); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; color: var(--night); }
.plan.rec .price .amt { color: #fff; } .plan.rec .price .cur { color: #9db3d0; }
.plan .price .per { color: var(--muted); font-size: .95rem; font-weight: 650; }
.plan.rec .price .per { color: #9db3d0; }
.plan .sub { margin-top: .3rem; min-height: 1.5em; font-size: .88rem; color: var(--muted); }
.plan.rec .sub { color: #9db3d0; }
.plan .sub b { color: #11803f; } .plan.rec .sub b { color: #7ff0ae; }
.plan ul { margin: 1.4rem 0 1.8rem; display: grid; gap: .65rem; flex: 1; align-content: start; }
.plan li { display: flex; gap: .65rem; align-items: flex-start; font-size: .98rem; line-height: 1.4; }
.plan li .ico { color: var(--mint); width: 1.25em; height: 1.25em; margin-top: .12em; stroke-width: 2.4; }
.plan li.head { font-weight: 800; color: var(--night); }
.plan.rec li.head { color: #fff; }
.plan.rec li { color: #d3e3f7; }
.bill { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bill div { padding: 1.3rem 1.4rem; border-radius: 16px; background: #fff; border: 1px solid var(--rule); font-size: .96rem; color: var(--muted); line-height: 1.5; }
.bill b { display: block; color: var(--night); font-weight: 800; margin-bottom: .2rem; }
.vat { margin-top: 1.4rem; text-align: center; color: var(--muted); font-size: .9rem; }

/* about */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.about .h2 { margin-top: .8rem; }
.about .lead { margin-top: 1.1rem; }
.facts { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.fact { padding: 1rem 1.2rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(155, 208, 255, .2); }
.fact span { display: block; font-family: var(--f-m); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); font-weight: 700; }
.fact b { display: block; margin-top: .2rem; font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.3; }
.banner { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid rgba(155, 208, 255, .25); box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.banner img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(6, 16, 31, .5)); pointer-events: none; }
.other { margin-top: 1.6rem; color: #9db3d0; font-size: .98rem; }
.other b { color: #fff; }

/* faq */
.faqs { max-width: 860px; margin-inline: auto; display: grid; gap: .8rem; }
.faq { border-radius: 16px; background: #fff; border: 1px solid var(--rule); transition: border-color .2s, box-shadow .2s; }
.faq[open] { border-color: rgba(43, 143, 255, .5); box-shadow: 0 16px 40px rgba(10, 26, 48, .08); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; font-weight: 800; font-size: 1.08rem; color: var(--night); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(43, 143, 255, .12); color: var(--blue2); font-family: var(--f-m); font-size: 1.3rem; font-weight: 700; flex: none; transition: transform .25s var(--ease), background .2s; }
.faq[open] summary::after { content: '–'; background: var(--blue); color: #fff; transform: rotate(180deg); }
.faq .a { padding: 0 1.4rem 1.3rem; color: var(--muted); line-height: 1.6; }
.faq .a a { font-weight: 700; }

/* contact */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; }
.contact .h2 { margin-top: .8rem; } .contact .lead { margin-top: 1rem; }
.reach { display: grid; gap: 1rem; margin-top: 1.8rem; }
.reach .r { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(155, 208, 255, .2); color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .2s var(--ease); }
a.r:hover { background: rgba(43, 143, 255, .16); border-color: var(--sky); transform: translateX(4px); text-decoration: none; }
.reach .r .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(43, 143, 255, .22); color: var(--sky); flex: none; }
.reach .r b { display: block; font-weight: 800; }
.reach .r span { display: block; color: #9db3d0; font-size: .92rem; line-height: 1.4; }
.reach .r .num { font-family: var(--f-m); color: #fff; font-weight: 700; font-size: 1.05rem; }
.qr { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(155, 208, 255, .2); }
.qr .code { width: 118px; height: 118px; border-radius: 12px; background: #fff; padding: 8px; flex: none; }
.qr .code svg { width: 100%; height: 100%; }
.qr p { color: #b9cde6; font-size: .95rem; line-height: 1.45; }
.qr p b { color: #fff; }
.form { padding: 2rem; border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.form h3 { font-size: 1.5rem; font-weight: 800; color: var(--night); }
.form .sub { margin-top: .3rem; color: var(--muted); font-size: .98rem; }
.fields { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fields .full { grid-column: 1 / -1; }
.fld label { display: block; margin-bottom: .35rem; font-weight: 750; font-size: .9rem; color: var(--night); }
.fld label em { font-style: normal; color: var(--muted); font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: .75rem .95rem; border-radius: 12px; border: 1.5px solid var(--rule); background: #f8fafd; font-size: 1rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.fld textarea { min-height: 130px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(43, 143, 255, .18); }
.fld input.bad, .fld textarea.bad { border-color: var(--rose); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.consent input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--blue); flex: none; }
.status { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 12px; font-weight: 650; font-size: .96rem; display: none; }
.status.show { display: block; }
.status.ok { background: rgba(56, 209, 120, .14); color: #0d6b36; border: 1px solid rgba(56, 209, 120, .5); }
.status.err { background: rgba(255, 107, 122, .12); color: #a1202f; border: 1px solid rgba(255, 107, 122, .5); }
.form .btn { margin-top: 1.2rem; }
.form .tiny { margin-top: .9rem; font-size: .82rem; color: var(--muted); }

/* final call */
.final { position: relative; overflow: hidden; text-align: center; color: #fff; padding: clamp(4.5rem, 9vw, 7.5rem) 0; background: radial-gradient(900px 420px at 50% 0%, rgba(43, 143, 255, .4), transparent 70%), linear-gradient(180deg, #0a1a30, #06101f); }
.final .big { font-weight: 900; font-stretch: 70%; font-variation-settings: 'wdth' 70; text-transform: uppercase; line-height: .95; font-size: clamp(2.6rem, 7vw, 5.4rem); }
.final .big span { color: var(--amber); }
.final p { margin: 1.3rem auto 0; max-width: 56ch; color: #b9cde6; font-size: 1.18rem; }
.final .cta-row { justify-content: center; }

/* footer */
.ftr { background: #040b16; color: #9db3d0; padding: 4rem 0 2.2rem; font-size: .95rem; }
.ftr a { color: #cfe0f6; }
.ftr .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 2.5rem; }
.ftr .brand b { font-size: 1.1rem; }
/* one sentence per line; the company name never splits, and a short last line is avoided where the column is too narrow for the whole sentence */
.ftr p.who-we { margin-top: 1rem; max-width: 46ch; line-height: 1.5; }
.ftr p.who-we span { display: block; text-wrap: balance; }
.ftr p.who-we b { color: #fff; white-space: nowrap; }
.ftr h4 { font-family: var(--f-m); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); font-weight: 700; margin-bottom: 1rem; }
.ftr li { margin-bottom: .55rem; }
.ftr li a { text-decoration: none; }
.ftr li a:hover { color: #fff; text-decoration: underline; }
.ftr .base { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(155, 208, 255, .14); display: grid; gap: .8rem; font-size: .86rem; line-height: 1.55; }
.ftr .base .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }
.ftr .base b { color: #e8f0fb; }
.ftr .small { color: #7f94b3; max-width: 100ch; }
.tagline { font-family: var(--f-m); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--sky); }

/* mobile call bar */
.mbar { display: none; }

/* ---------- legal pages ---------- */
.page-hero { padding: 130px 0 3rem; background: radial-gradient(900px 400px at 80% 0%, rgba(43, 143, 255, .3), transparent 65%), linear-gradient(180deg, #06101f, #0a1a30); color: #fff; }
.page-hero h1 { margin-top: .8rem; font-weight: 900; font-stretch: 75%; font-variation-settings: 'wdth' 75; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; }
.page-hero p { margin-top: .9rem; color: #b9cde6; max-width: 62ch; }
.doc { background: var(--paper); padding: 3.5rem 0 5rem; }
.doc .paper { width: min(840px, 100% - 2.5rem); margin-inline: auto; background: #fff; border-radius: 22px; border: 1px solid var(--rule); box-shadow: 0 24px 60px rgba(10, 26, 48, .08); padding: clamp(1.6rem, 4vw, 3rem); }
.doc h2 { margin-top: 2rem; font-size: 1.28rem; font-weight: 800; color: var(--night); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { margin-top: .6rem; color: #2b3b52; line-height: 1.65; }
.doc ul { list-style: disc; padding-left: 1.3rem; }
.doc .upd { color: var(--muted); font-size: .92rem; margin-bottom: 1.4rem; font-family: var(--f-m); }
.doc .note { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 14px; background: #eef5ff; border: 1px solid #cfe2ff; color: #1b3a63; }
.doc .links { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-weight: 700; }

/* ---------- motion ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
/* the top of the page rises in by itself, so it never waits for a script */
.js .hero .rv { opacity: 1; transform: none; transition: none; animation: rise .9s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { background-position: 56px 100px; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-.28em); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  .fcard.f1 { left: -6%; } .fcard.f2 { right: -4%; } .fcard.f3 { left: -5%; }
}
@media (max-width: 1240px) {
  .burger { display: grid; }
  .nav { position: fixed; inset: 74px 0 auto 0; margin: 0; padding: 1rem 1.25rem 1.6rem; background: rgba(6, 16, 31, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); max-height: calc(100svh - 74px); overflow: auto; }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav .m-only { display: block; }
  .nav a.l { display: block; padding: 1rem .2rem; font-size: 1.1rem; border-bottom: 1px solid rgba(155, 208, 255, .12); }
  .nav a.l::after { display: none; }
  .acts { margin-left: auto; }
}
@media (max-width: 980px) {
  .hero { padding-top: 112px; min-height: 0; }
  .hero .grid, .demo, .about, .contact { grid-template-columns: 1fr; }
  .hero .grid { gap: 2.5rem; }
  .stage { min-height: 560px; } .stage .orbit { width: 520px; height: 520px; }
  .fcard.f1 { left: 2%; } .fcard.f2 { right: 2%; }
  .moments { grid-template-columns: repeat(2, 1fr); }
  .feats, .trusts { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .plan.rec { transform: none; } .plan.rec:hover { transform: translateY(-6px); }
  .bill, .needs { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2.2rem; } .steps::before { display: none; }
  .ftr .cols { grid-template-columns: 1fr 1fr; }
  .addon { grid-template-columns: auto 1fr; } .addon .btn { grid-column: 1 / -1; }
  .whois .in { grid-template-columns: 1fr; } .whois .sep { width: auto; height: 1px; margin: 0 1rem; background: linear-gradient(90deg, transparent, rgba(155, 208, 255, .35), transparent); }
  .demo { gap: 2.5rem; } .demo-copy { order: 2; } .demo-stage { order: 1; }
}
@media (max-width: 440px) {
  .acts .menu { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .acts .btn { display: none; }
  .brand small { display: none; }
  .brand img { width: 40px; height: 40px; }
  .acts .menu > button { padding: .45rem .8rem; font-size: .9rem; }
  .moments, .feats, .trusts, .fields, .facts { grid-template-columns: 1fr; }
  .fields .full { grid-column: auto; }
  .ftr .cols { grid-template-columns: 1fr; gap: 2rem; }
  .stage { min-height: 520px; } .stage .orbit, .fcard { display: none; }
  .bee { left: -15px; top: -10.5px; width: 30px; height: 21px; }
  .phone { --ps: 14.5px; }
  .cta-row .btn { width: 100%; }
  .qr { flex-direction: column; text-align: center; }
  .form { padding: 1.4rem; }
  .mbar { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(6, 16, 31, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s var(--ease); }
  .mbar.show { transform: none; }
  .mbar .btn { flex: 1; min-height: 46px; padding: .5rem .8rem; font-size: .95rem; }
  body { padding-bottom: 0; }
  .ftr { padding-bottom: 6rem; }
  .plan .ribbon { font-size: .64rem; }
}