@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/outfit-200.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/outfit-300.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-400.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/outfit-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dm-sans-600.woff2) format('woff2')}

/* Concept: a dream sequence in blue and violet. A tall tree of light fades in from the dark, butterflies follow the cursor with real wing motion, stars float and pop, mist drifts through every section, and wave dividers flow. Hero copy sits left, the tree stands right with no overlap, and every other section centers like the agency pattern. */
:root {
  --bg1: #110946; --bg2: #1a1170; --bg3: #2c1a82; --ftop: 42,26,132; --fbot: #140c48;
  --text: #f4f2ff; --soft: rgba(244,242,255,.84); --faint: rgba(244,242,255,.6); --line: rgba(190,180,255,.24); --glass: rgba(255,255,255,.07);
  --hl1: #7fd8ff; --hl2: #b79bff; --hl3: #ffc86a;
  --mist: rgba(196,176,255,.78); --mist2: rgba(150,150,255,.6); --mist-shade: rgba(0,0,0,0);
  --tree1: #ffc86a; --tree2: #b79bff; --tree3: #7fd8ff; --star: 255,255,255;
  --lf: brightness(1.55) saturate(.3) drop-shadow(0 0 10px rgba(205,190,255,.7)); --lf2: brightness(1.8) saturate(.3) drop-shadow(0 0 24px rgba(205,190,255,.95)); --lfc: saturate(1.4) brightness(1.15) drop-shadow(0 0 12px rgba(143,224,255,.7));
  --panel: #14104f; --bar: rgba(14,10,60,.3);
  --f-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b1: #3d63ff; --b2: #7b3ff0; --b3: #b25cf6; --btext: #ffffff;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg1: #f1eeff; --bg2: #e6e0fe; --bg3: #e2d4fb; --ftop: 112,88,206; --fbot: #42308e;
  --text: #17123f; --soft: #332d6b; --faint: #5a5594; --line: rgba(70,50,170,.22); --glass: rgba(255,255,255,.34);
  --hl1: #3326c9; --hl2: #7b2fd6; --hl3: #0f7ad8;
  --mist: rgba(255,255,255,.95); --mist2: rgba(255,255,255,.8); --mist-shade: rgba(120,95,225,.34);
  --tree1: #5a3b2e; --tree2: #4b3fb0; --tree3: #9a80ea; --star: 110,76,216;
  --lf: brightness(.5) saturate(2.6) hue-rotate(32deg) drop-shadow(0 0 8px rgba(123,47,214,.4)); --lf2: brightness(.62) saturate(3) hue-rotate(32deg) drop-shadow(0 0 16px rgba(123,47,214,.65)); --lfc: brightness(.5) saturate(2.6) hue-rotate(32deg);
  --panel: #f6f3ff; --bar: rgba(255,255,255,.4);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--text); font-family: var(--f-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; background-color: var(--bg2); background-image: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%); transition: background-color .5s; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hl2); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#fly { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
.neb { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 45% at 85% 8%, rgba(139,92,246,.46), transparent 70%), radial-gradient(50% 45% at 6% 40%, rgba(80,100,240,.2), transparent 70%); }
:root[data-theme="light"] .neb { background: radial-gradient(55% 45% at 85% 6%, rgba(160,130,255,.30), transparent 70%), radial-gradient(50% 45% at 4% 40%, rgba(120,170,255,.26), transparent 70%); }
main, header, footer { position: relative; z-index: 2; }

/* mist through the whole page */
.mistfield { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.m { position: absolute; left: -900px; width: 760px; height: 220px; filter: blur(18px); opacity: 1; animation: drift linear infinite; background:
  radial-gradient(closest-side at 22% 60%, var(--mist), transparent 72%),
  radial-gradient(closest-side at 48% 38%, var(--mist2), transparent 72%),
  radial-gradient(closest-side at 76% 62%, var(--mist), transparent 72%),
  radial-gradient(closest-side at 50% 94%, var(--mist-shade), transparent 70%); }
.m5 { top: 28%; animation-duration: 110s; animation-delay: -50s; width: 620px; height: 180px; } .m6 { top: 76%; animation-duration: 130s; animation-delay: -90s; width: 700px; } .m1 { top: 14%; animation-duration: 150s; } .m2 { top: 40%; animation-duration: 190s; animation-delay: -70s; width: 900px; } .m3 { top: 66%; animation-duration: 170s; animation-delay: -120s; } .m4 { top: 86%; animation-duration: 210s; animation-delay: -30s; width: 960px; }
@keyframes drift { to { transform: translateX(calc(100vw + 1900px)); } }

/* logo: original color, glow breathes, a shine passes across the shape */
.logo { position: relative; display: block; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; }
.logo .base { filter: var(--lf); opacity: .88; animation: breathe 5s ease-in-out infinite; }
.logo .shine { position: absolute; inset: 0; filter: brightness(0) invert(1); opacity: .9; -webkit-mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%); -webkit-mask-size: 320% 100%; mask-size: 320% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: shineMove 6s ease-in-out infinite; }
:root[data-theme="light"] .logo .shine { filter: brightness(0) invert(1) opacity(.8); }
@keyframes shineMove { 0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; } 55%, 100% { -webkit-mask-position: -30% 0; mask-position: -30% 0; } }
@keyframes breathe { 0%,100% { filter: var(--lf); } 50% { filter: var(--lf2); } }

/* loader */
.ldr { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg1); transition: opacity .8s ease; }
.ldr.out { opacity: 0; pointer-events: none; }
.ldrlogo { position: relative; width: 150px; transition: transform 1s cubic-bezier(.6,.05,.2,1); }
.ldrlogo img { display: block; width: 100%; }
.ldrlogo .dimimg { filter: brightness(0) invert(1); opacity: .14; }
:root[data-theme="light"] .ldrlogo .dimimg { filter: brightness(0); opacity: .1; }
.ldrlogo .fillimg { position: absolute; inset: 0; filter: var(--lfc); clip-path: inset(100% 0 0 0); animation: fillup 1.9s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes fillup { to { clip-path: inset(0 0 0 0); } }

/* floating bar */
.bar { position: fixed; z-index: 90; top: 14px; left: 0; right: 0; pointer-events: none; }
.bar .in { pointer-events: auto; max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px 8px 20px; border-radius: 999px; background: var(--bar); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; white-space: nowrap; }
.brand .logo { width: 48px; opacity: 0; transition: opacity .5s; }
.ready .brand .logo { opacity: 1; }
.brand span { font-family: var(--f-display); font-weight: 300; letter-spacing: .22em; text-transform: uppercase; font-size: .92rem; }
.links { display: flex; gap: 30px; }
.links a { text-decoration: none; font-size: .93rem; color: var(--soft); white-space: nowrap; }
.links a:hover { color: var(--text); }
.right { display: flex; gap: 10px; align-items: center; }
.mode { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.mode svg { width: 19px; height: 19px; } .mode .sun { display: none; }
:root[data-theme="light"] .mode .sun { display: block; } :root[data-theme="light"] .mode .moon { display: none; }

/* buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; cursor: pointer; border: 0; font: 600 .95rem var(--f-body); padding: 14px 28px; border-radius: 999px; color: var(--btext); background: linear-gradient(100deg, var(--b1), var(--b2) 55%, var(--b3)); box-shadow: 0 10px 30px rgba(110,70,240,.35); transition: transform .3s; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: sweep 4.5s ease-in-out infinite; }
@keyframes sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.btn:hover { transform: translateY(-2px); }
.btn.sm { padding: 10px 20px; font-size: .88rem; }
.btn.line { background: var(--glass); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
.btn.line::after { display: none; }
.btn.line { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-theme="light"] .tag, :root[data-theme="light"] .btn.line, :root[data-theme="light"] .vis, :root[data-theme="light"] .bar .in { background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.16)); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 28px rgba(80,60,190,.1); }
:root:not([data-theme="light"]) .bar .in { background: linear-gradient(135deg, rgba(60,44,170,.3), rgba(14,10,60,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.faq { max-width: 760px; margin: 38px auto 0; text-align: left; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 0 22px; transition: background .3s; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--f-display); font-weight: 300; font-size: 1.18rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 200; color: var(--hl1); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 20px; color: var(--soft); font-size: 1rem; }

/* hero: copy left, tree right, roots grow across the bottom into floating site mocks */
.hero { position: relative; min-height: max(100svh, 1060px); overflow: hidden; display: flex; align-items: flex-start; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 60% 45%, transparent 62%, rgba(24,12,90,.28) 100%); }
:root[data-theme="light"] .hero::after { background: radial-gradient(ellipse at 60% 45%, transparent 65%, rgba(120,100,220,.2) 100%); }
.hero { background: radial-gradient(ellipse 42% 40% at 52% 46%, rgba(18,8,66,.5), transparent 72%), radial-gradient(ellipse 46% 34% at 0% 72%, rgba(64,118,255,.15), transparent 72%), radial-gradient(ellipse 34% 26% at 8% 18%, rgba(84,132,255,.06), transparent 72%); }
:root[data-theme="light"] .hero { background: radial-gradient(ellipse 46% 38% at 0% 88%, rgba(110,140,255,.16), transparent 72%), radial-gradient(ellipse 34% 26% at 8% 18%, rgba(130,160,255,.1), transparent 72%); }
.rays { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: conic-gradient(from 188deg at 72% -8%, transparent 0 9%, rgba(183,155,255,.2) 13%, transparent 17% 27%, rgba(127,216,255,.16) 32%, transparent 37% 50%, rgba(183,155,255,.18) 56%, transparent 61%); -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 70%); mask-image: linear-gradient(180deg, #000 0, transparent 70%); animation: rays 12s ease-in-out infinite alternate; }
:root[data-theme="light"] .rays { opacity: .55; }
@keyframes rays { from { opacity: .55; } to { opacity: 1; } }
#tree { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.copy { position: relative; z-index: 3; width: 100%; padding-top: 236px; }
.copy .col { width: 58%; }
.herologo { width: 92px; margin-bottom: 12px; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tag { display: inline-block; white-space: nowrap; font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl1); border: 1px solid var(--line); background: var(--glass); padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(10px); }
h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.2rem, 2.8vw, 2.6rem); line-height: 1.3; letter-spacing: -.012em; margin: 30px 0 0; }
h1 .u { display: block; white-space: nowrap; }
.tw { font-weight: 500; background: linear-gradient(100deg, var(--hl1), var(--hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.caret { display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.08em; background: var(--hl2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hl { position: relative; font-weight: 500; background: linear-gradient(100deg, var(--hl1), var(--hl2), var(--hl3)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glide 5s ease-in-out infinite alternate; }
@keyframes glide { from { background-position: 0 0; } to { background-position: 100% 0; } }
.st { position: absolute; width: 14px; height: 14px; color: var(--hl3); animation: tw 2.6s ease-in-out infinite; pointer-events: none; right: -16px; top: -5px; }
:root[data-theme="light"] .st { color: var(--hl2); }
@keyframes tw { 0%,100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.in1 { opacity: 0; transform: translateY(14px); transition: opacity 1s, transform 1s; }
.ready .in1 { opacity: 1; transform: none; }
.ready .d2 { transition-delay: .25s; } .ready .d3 { transition-delay: .5s; }
.mocks { position: absolute; z-index: 3; left: max(32px, calc((100vw - 1240px) / 2 + 32px)); bottom: 96px; width: 700px; height: 250px; pointer-events: none; }
.win { position: absolute; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,20,.4), 0 0 40px rgba(143,150,255,.18); animation: fl 8s ease-in-out infinite; }
.win .tb { height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--glass); }
.win .tb i { width: 7px; height: 7px; border-radius: 50%; background: var(--hl2); opacity: .7; }
.win .scr { position: absolute; top: 22px; bottom: 0; left: 0; right: 0; overflow: hidden; }
.pg { animation: pgs 16s linear infinite; }
@keyframes pgs { to { transform: translateY(-50%); } }
.pg b { display: block; height: 74px; margin: 10px; border-radius: 10px; background: linear-gradient(135deg, var(--b1), var(--b3)); }
.pg b.alt { background: linear-gradient(135deg, var(--hl1), var(--hl2)); height: 56px; }
.pg u { display: block; height: 6px; margin: 8px 10px; border-radius: 3px; background: var(--line); width: 70%; text-decoration: none; }
.pg u.s { width: 46%; }
.pg .g { display: flex; gap: 6px; margin: 10px; }
.pg .g i { flex: 1; height: 46px; border-radius: 8px; background: var(--glass); border: 1px solid var(--line); }
.pg .bt { display: block; width: 64px; height: 18px; margin: 10px; border-radius: 9px; background: linear-gradient(100deg, var(--hl1), var(--hl2)); }
.w1 { left: 0; bottom: 0; width: 340px; height: 214px; }
.ph1 { left: 322px; bottom: 22px; width: 120px; height: 236px; border-radius: 22px; animation-delay: -3s; }
.ph1 .tb { justify-content: center; } .ph1 .tb i:not(:nth-child(2)) { display: none; }
.w3 { left: 456px; bottom: 0; width: 230px; height: 150px; animation-delay: -5s; }
@keyframes fl { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* wave dividers */
.wavewrap { position: relative; overflow: hidden; line-height: 0; height: 150px; margin-top: -40px; margin-bottom: -20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.wavewrap::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(170,140,255,.13), transparent 70%); filter: blur(18px); }
.wave { position: relative; z-index: 2; display: block; width: 200%; height: 150px; animation: flow 28s linear infinite; opacity: .22; }
.wave path { fill: none; stroke: url(#wg); stroke-width: 1.4; filter: blur(.6px); }
.wave .w2 { opacity: .55; transform: translateY(10px); }
.wavewrap:hover .wave { animation-duration: 9s; }
.wavewrap:hover .wave path { stroke-width: 3; }
.wavewrap:hover .wave { opacity: .9; }
.hero { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
@keyframes flow { to { transform: translateX(-50%); } }

/* centered sections */
section { padding-block: 100px; text-align: center; }
.eyebrow { display: block; white-space: nowrap; font-weight: 600; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--hl1); margin: 0 0 16px; }
h2 { font-family: var(--f-display); font-weight: 200; font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 auto; white-space: nowrap; }
.sub { color: var(--soft); max-width: 62ch; margin: 22px auto 0; font-size: 1.12rem; text-wrap: balance; }
.cta.c { justify-content: center; }
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

.stats .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.stat { padding: 40px 20px; border-top: 0; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(2.8rem, 5.5vw, 4.2rem); line-height: 1.05; white-space: nowrap; background: linear-gradient(100deg, var(--hl1), var(--hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat i { display: block; font-style: normal; font-weight: 600; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl1); margin: 8px 0 4px; white-space: nowrap; }
.stat span { color: var(--faint); font-size: .94rem; }

.svc2 { margin: 64px auto 0; max-width: 1120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: stretch; text-align: left; }
.sl { display: flex; flex-direction: column; }
.vis { position: relative; height: 290px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); overflow: hidden; }
.vis svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.97); transition: opacity .6s, transform .6s; }
.vis svg.on { opacity: 1; transform: none; }
.sl h3 { margin: 28px 0 10px; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; }
.sl p { margin: 0 0 26px; color: var(--soft); font-size: 1.04rem; min-height: 5.2em; }
.sl .btn { align-self: flex-start; }
.sr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.sr li { border-top: 1px solid var(--line); }
.sr li:last-child { border-bottom: 1px solid var(--line); }
.sr button { position: relative; width: 100%; display: flex; align-items: center; gap: 20px; text-align: left; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 22px 6px; font: 300 clamp(1.15rem, 1.9vw, 1.55rem) var(--f-display); transition: color .35s, padding .35s; }
.sr button .n { font: 400 .85rem var(--f-body); color: var(--faint); letter-spacing: .12em; }
.sr button::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--hl1), var(--hl2), var(--hl3)); }
.sr button.on { color: var(--text); padding-left: 16px; }
.sr button.on .n { color: var(--hl2); }
.sr button.on::after { width: 100%; transition: width 4s linear; }
.mk2 { fill: none; stroke: var(--line); stroke-width: 1.5; }
.mf { fill: var(--glass); stroke: var(--line); stroke-width: 1.5; }
.ln { fill: var(--line); }

.flow { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, var(--hl1), var(--hl2), var(--hl3)); opacity: .45; }
.flow::after { content: ""; position: absolute; top: 9px; left: 0; width: 90px; height: 6px; border-radius: 6px; background: radial-gradient(closest-side, var(--hl3), transparent); animation: run 7s ease-in-out infinite; }
@keyframes run { 0% { left: 0; } 100% { left: calc(100% - 90px); } }
.stp { position: relative; padding-top: 44px; text-align: center; }
.stp .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; display: grid; place-items: center; }
.stp .dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hl2); box-shadow: 0 0 0 5px rgba(150,120,255,.2), 0 0 18px var(--hl2); }
.stp h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 300; font-size: 1.5rem; }
.stp p { margin: 0 auto; max-width: 28ch; color: var(--soft); font-size: .96rem; }
.stp small { color: var(--hl1); font-weight: 600; letter-spacing: .16em; font-size: .72rem; display: block; margin-bottom: 6px; }

.ph { border: 1px dashed var(--line); border-radius: 18px; color: var(--faint); font-size: .85rem; display: grid; place-items: center; background: var(--glass); }
.tcard { width: min(760px, 100%); height: 200px; margin: 34px auto 0; }
blockquote { margin: 30px auto 0; max-width: 28ch; font-family: var(--f-display); font-weight: 200; font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -.015em; }
.cite { margin-top: 20px; color: var(--soft); font-size: .96rem; }
.cite b { color: var(--text); font-weight: 600; }
.slots { margin: 0 auto; max-width: 820px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.slots i { display: block; height: 56px; border: 1px dashed var(--line); border-radius: 10px; }
.label { font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin: 0 0 18px; }
.note { margin-top: 12px; color: var(--faint); font-size: .85rem; }
.head { display: block; width: 168px; height: 210px; margin: 0 auto 26px; border-radius: 22px; object-fit: cover; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(60,30,200,.35); }

.cloudbtn { position: relative; display: inline-block; border: 0; background: none; padding: 0; cursor: pointer; width: 250px; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 14px 26px rgba(110,70,240,.4)); }
.cloudbtn svg { width: 100%; display: block; overflow: visible; }
.cloudbtn text { font-family: var(--f-display); font-weight: 400; font-size: 26px; fill: var(--btext); }
.cloudbtn:hover { animation-duration: 3s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fab { position: fixed; z-index: 80; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 150px; }
footer { position: relative; padding-block: 150px 40px; border-top: 0; background: linear-gradient(180deg, rgba(var(--ftop),0) 0, rgba(var(--ftop),.5) 70px, rgb(var(--ftop)) 150px, var(--fbot)); color: rgba(255,255,255,.78); font-size: .92rem; }
footer::before, footer::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; background: rgb(var(--ftop)); filter: blur(1.2px); }
footer::before { top: 40px; height: 90px; opacity: .36; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path d='M0 40 Q150 6 300 40 T600 40 T900 40 T1200 40 V90 H0 Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path d='M0 40 Q150 6 300 40 T600 40 T900 40 T1200 40 V90 H0 Z'/></svg>"); -webkit-mask-size: 1200px 90px; mask-size: 1200px 90px; animation: fwave 26s linear infinite; }
footer::after { top: 62px; height: 80px; opacity: .6; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 80' preserveAspectRatio='none'><path d='M0 36 Q112 70 225 36 T450 36 T675 36 T900 36 V80 H0 Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 80' preserveAspectRatio='none'><path d='M0 36 Q112 70 225 36 T450 36 T675 36 T900 36 V80 H0 Z'/></svg>"); -webkit-mask-size: 900px 80px; mask-size: 900px 80px; animation: fwave2 19s linear infinite; }
@keyframes fwave { to { -webkit-mask-position-x: -1200px; mask-position-x: -1200px; } }
@keyframes fwave2 { from { -webkit-mask-position-x: -900px; mask-position-x: -900px; } to { -webkit-mask-position-x: 0; mask-position-x: 0; } }
footer > * { position: relative; z-index: 2; }
footer .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; text-align: left; }
footer b { display: block; color: #fff; font-family: var(--f-display); font-weight: 400; margin-bottom: 8px; }
footer a { color: inherit; text-decoration: none; } footer a:hover { color: #fff; text-decoration: underline; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.frame { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(4,3,24,.6); backdrop-filter: blur(6px); }
.frame[hidden] { display: none; }
.box { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 26px; padding: 30px 28px; text-align: left; }
.box h3 { font-family: var(--f-display); font-weight: 300; font-size: 1.9rem; margin: 0 0 6px; }
.box p.s { margin: 0 0 18px; color: var(--soft); font-size: .96rem; }
.box label { display: block; font-weight: 600; font-size: .84rem; margin: 14px 0 6px; }
.box input, .box textarea, .box select { width: 100%; font: 400 1rem var(--f-body); color: var(--text); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.box textarea { min-height: 100px; resize: vertical; }
.row2 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.x { float: right; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--text); font-size: 1.3rem; cursor: pointer; }
pre.out { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font: 400 .95rem var(--f-body); user-select: all; margin: 14px 0 0; }

@media (max-width: 900px) {
  section { padding-block: 66px; }
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .links, .bar .btn { display: none; }
  .bar .in { margin-inline: 12px; }
  .brand span { font-size: .8rem; letter-spacing: .14em; }
  .hero { flex-direction: column; min-height: 0; padding-bottom: 40px; }
  #tree { opacity: .38; }
  .copy { padding-top: 96px; }
  .copy .col { width: 100%; }
  .herologo { width: 76px; }
  h1 { font-size: clamp(1.1rem, 5.2vw, 1.9rem); }
  .mocks { position: relative; left: auto; bottom: auto; margin: 44px 20px 0; width: calc(100% - 40px); height: 230px; }
  .w1 { width: 62%; height: 170px; } .ph1 { left: 56%; width: 96px; height: 196px; } .w3 { display: none; }
  h2 { white-space: normal; font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .close h2 { white-space: nowrap; font-size: clamp(1.05rem, 4.6vw, 1.6rem); }
  .stats .wrap { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; }
  .svc2 { grid-template-columns: minmax(0, 1fr); gap: 36px; } .vis { height: 230px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-left: 6px; }
  .flow::before { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .flow::after { display: none; }
  .stp { padding: 0 0 0 44px; text-align: left; }
  .stp .dot { left: 0; transform: none; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab { width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ldr { display: none; } .m, .hl, .btn::after, .cloudbtn, .flow::after, .st, .logo .base, .logo .shine, .wave, .herologo, .rays, .win, .pg, .caret { animation: none; } footer::before, footer::after { animation: none; }
  .in1, .js .rv { opacity: 1; transform: none; transition: none; } .brand .logo { opacity: 1; }
}


.lg8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 40px;max-width:1100px;margin:0 auto}
.lg8 .c{height:92px;display:grid;place-items:center}
.lg8 img{max-height:56px;max-width:78%;object-fit:contain}
.lg8 span{width:78%;height:56px;display:grid;place-items:center;color:var(--faint);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border:1px dashed var(--line);border-radius:8px}
.ab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;text-align:left}
.abt .eyebrow{text-align:left}
.abt h2{text-align:left;font-size:clamp(1.6rem,2.45vw,2.4rem);line-height:1.18;margin:0}
.abt h2 span{display:block;white-space:nowrap}
.abk{margin:26px 0 0;font:500 1.05rem "DM Sans",sans-serif;background:linear-gradient(100deg,#7fd8ff,#b79bff 60%,#e0b4ff);-webkit-background-clip:text;color:transparent;display:inline-block}
.abs{margin:12px 0 0;max-width:50ch;color:var(--soft);font-size:1.1rem;line-height:1.7}
.abp{position:relative;width:100%;max-width:470px;justify-self:center;aspect-ratio:1/1.05}
.abm{position:absolute;inset:0;overflow:hidden;border-radius:58% 42% 52% 48% / 48% 56% 44% 52%;animation:abmorph 14s ease-in-out infinite;box-shadow:0 0 70px rgba(127,216,255,.35),0 0 140px rgba(183,155,255,.28)}
.abm img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.cl{position:absolute;border-radius:50%;filter:blur(34px);pointer-events:none;animation:abpulse 6s ease-in-out infinite}
.c1{width:78%;height:78%;left:-16%;top:-12%;background:radial-gradient(circle,rgba(127,216,255,.55),transparent 68%)}
.c2{width:82%;height:82%;right:-18%;bottom:-16%;background:radial-gradient(circle,rgba(183,155,255,.6),transparent 68%);animation-delay:-3s}
.sp{position:absolute;inset:-6%;pointer-events:none}
.sp i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,233,168,.9);opacity:0;animation:abtw 3.6s ease-in-out infinite}
@keyframes abmorph{0%,100%{border-radius:58% 42% 52% 48% / 48% 56% 44% 52%}50%{border-radius:44% 56% 42% 58% / 56% 44% 58% 42%}}
@keyframes abpulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes abtw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@media (max-width:860px){.ab{grid-template-columns:minmax(0,1fr);gap:60px}.abt h2 span{white-space:normal}.abp{max-width:340px}.lg8{grid-template-columns:repeat(2,minmax(0,1fr))}}


.ab{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.abp{max-width:none;aspect-ratio:4/3}
.abm{border-radius:0!important;animation:none!important;box-shadow:none!important;-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 42%,transparent 98%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 42%,transparent 98%)}
.abm img{animation:abfade 1.6s ease both}
@keyframes abfade{from{opacity:0}to{opacity:1}}
.cl{filter:blur(44px)}


.abp.mos{aspect-ratio:4/3;max-width:none}
.mt{position:absolute;margin:0;width:62%;border-radius:12px;overflow:hidden;background:#0d0a2e;border:1px solid rgba(183,155,255,.35);box-shadow:0 18px 50px rgba(8,4,40,.55),0 0 40px rgba(127,216,255,.18);opacity:0;animation:mtin 1.2s ease both,mtfl 7s ease-in-out infinite}
.mt img{display:block;width:100%;height:auto}
.mb{display:flex;gap:5px;padding:7px 10px;background:rgba(255,255,255,.08)}
.mb i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.mt figcaption{position:absolute;right:10px;top:4px;font:600 .62rem "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(40,20,120,.7);padding:4px 10px;border-radius:99px}
.mt.m1{left:0;top:2%;transform:rotate(-4deg);animation-delay:.1s,0s}
.mt.m2{left:20%;top:26%;transform:rotate(2deg);animation-delay:.6s,-2s;z-index:2}
.mt.m3{right:0;top:46%;transform:rotate(-1.5deg);animation-delay:1.1s,-4s;z-index:3;width:64%}
@keyframes mtin{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes mtfl{0%,100%{margin-top:0}50%{margin-top:-8px}}
.abmore{display:inline-block;margin-top:22px;font:600 .95rem "DM Sans",sans-serif;color:#cfe9ff;text-decoration:none;border-bottom:1px solid rgba(183,155,255,.6);padding-bottom:3px;white-space:nowrap}


.mt{filter:saturate(.85) brightness(.96);box-shadow:0 0 0 1px rgba(190,170,255,.25),0 0 50px 10px rgba(160,130,255,.38),0 18px 50px rgba(8,4,40,.45)}
.mt::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(150,110,255,.28),rgba(127,216,255,.08) 55%,rgba(120,70,220,.26));mix-blend-mode:soft-light}
.abp.mos .c1{width:100%;height:100%;left:-10%;top:-12%}.abp.mos .c2{width:100%;height:100%;right:-10%;bottom:-12%}
.c3{width:90%;height:50%;left:5%;top:50%;background:radial-gradient(circle,rgba(255,196,255,.4),transparent 68%)}
.glowline{position:absolute;left:-6%;right:-6%;bottom:2%;height:110px;background:radial-gradient(ellipse at 50% 100%,rgba(200,170,255,.85),rgba(127,216,255,.3) 40%,transparent 70%);filter:blur(10px);pointer-events:none;animation:abpulse 6s ease-in-out infinite}
.abp.mos .sp{inset:-10%}.abp.mos .sp i{box-shadow:0 0 12px 3px rgba(210,200,255,.95)}
:root[data-theme="light"] .abk{background:linear-gradient(100deg,#3a5bd9,#6a3fd8 60%,#a233c8);-webkit-background-clip:text;color:transparent}
:root[data-theme="light"] .abmore{color:#3b1fa8;border-bottom-color:rgba(90,50,200,.6)}
:root[data-theme="light"] .abs{color:#3a3566}
:root[data-theme="light"] .abp.mos .sp i{background:#a77bff;box-shadow:0 0 12px 3px rgba(167,123,255,.8)}


.abp.mos{margin-left:6px}
.mt.m1{top:2.5%!important}
.mt.m2{left:calc(20% - 8px)!important;top:27%!important;transform:rotate(3.5deg)!important}
.mt.m3{top:53%!important;width:64%!important;transform:rotate(-3.5deg)!important}
.mt.m3::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 34% 52% at 78% 52%,rgba(190,225,255,.38),transparent 70%),radial-gradient(ellipse 60% 14% at 70% 92%,rgba(255,210,170,.40),transparent 75%);mix-blend-mode:screen;animation:abpulse 5s ease-in-out infinite}
.rootglow{position:absolute;left:30%;right:-6%;bottom:-2%;height:70px;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,rgba(255,215,190,.55),rgba(190,160,255,.35) 45%,transparent 72%);filter:blur(9px);animation:abpulse 4.5s ease-in-out infinite}
.glowline{bottom:-3%!important;height:130px!important}
.sp2 i{box-shadow:0 0 14px 4px rgba(255,230,205,.95)!important}
:root[data-theme="light"] .rootglow{background:radial-gradient(ellipse at 60% 50%,rgba(255,170,200,.5),rgba(150,110,240,.35) 45%,transparent 72%)}


.abp.mos{margin-top:-24px!important}
.mt.m3{width:72%!important;top:50%!important}


.mt.m1{width:56%!important;left:6%!important;top:3%!important;transform:rotate(-7deg)!important}
.mt.m2{width:60%!important;left:calc(19% - 8px)!important;top:26%!important;transform:rotate(4deg)!important}
.mt.m3{width:78%!important;right:0!important;top:49%!important;transform:rotate(-3deg)!important}


footer .fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;text-align:left;padding-bottom:36px}
footer .fcols>div+div{border-left:1px solid rgba(255,255,255,.16);padding-left:32px}
footer .fbrand p{margin:14px 0 20px;color:rgba(255,255,255,.78)}
footer .fbrand .brand{color:#fff}
footer .flogo{width:40px;opacity:1}
footer .fbot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:.88rem;color:rgba(255,255,255,.7)}
footer .soc{display:flex;gap:14px}
footer .soc i{width:34px;height:34px;border-radius:50%;border:1px dashed rgba(255,255,255,.4)}
@media(max-width:900px){footer .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}footer .fcols>div+div{border-left:0;padding-left:0}footer .fbot{flex-direction:column;gap:14px}}
/* brighter front page + more light */
.mt.m3{filter:saturate(1.05) brightness(1.18)!important;box-shadow:0 0 0 1px rgba(210,190,255,.5),0 0 80px 22px rgba(170,140,255,.55),0 22px 60px rgba(8,4,40,.4)!important}
.m3::after{opacity:.35}
.abp.mos .c1,.abp.mos .c2,.c3{opacity:1!important}
.abp.mos .c1{background:radial-gradient(circle,rgba(150,220,255,.7),transparent 68%)}
.abp.mos .c2{background:radial-gradient(circle,rgba(190,150,255,.75),transparent 68%)}
.c3{background:radial-gradient(circle,rgba(255,210,255,.55),transparent 68%)}
.abp.mos .sp i{width:6px!important;height:6px!important}


:root[data-theme="light"] .lg8 img{filter:brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(3600%) hue-rotate(247deg) brightness(.98)}


/* softer logos: fade in, drift gently */
.lg8 .c img{opacity:.8;animation:lgin 1.6s ease both,lgfl 9s ease-in-out infinite}
.lg8 .c:nth-child(1) img{animation-delay:.1s,0s}.lg8 .c:nth-child(2) img{animation-delay:.3s,-1s}.lg8 .c:nth-child(3) img{animation-delay:.5s,-2s}.lg8 .c:nth-child(4) img{animation-delay:.7s,-3s}
.lg8 .c:nth-child(5) img{animation-delay:.9s,-4s}.lg8 .c:nth-child(6) img{animation-delay:1.1s,-5s}.lg8 .c:nth-child(7) img{animation-delay:1.3s,-6s}.lg8 .c:nth-child(8) img{animation-delay:1.5s,-7s}
@keyframes lgin{from{opacity:0;transform:translateY(10px)}to{opacity:.8;transform:none}}
@keyframes lgfl{0%,100%{translate:0 0}50%{translate:0 -5px}}
:root[data-theme="light"] .lg8 img{filter:brightness(0) saturate(100%) invert(38%) sepia(70%) saturate(2600%) hue-rotate(243deg) brightness(1.12)}
:root[data-theme="light"] .lg8 .c img{opacity:.78}
/* light skin: brighter pages */
:root[data-theme="light"] .mt{filter:saturate(.9) brightness(1.3)!important}
:root[data-theme="light"] .mt::after{opacity:.2}
/* light skin footer logo */
:root[data-theme="light"] footer .flogo .base{filter:brightness(0) invert(1)!important;opacity:.95;animation:none}
:root[data-theme="light"] footer .fbrand .brand,:root[data-theme="light"] footer .brand span{color:#fff}

#about{padding-bottom:170px!important}@media(max-width:900px){#about{padding-bottom:110px!important}}

:root[data-theme="light"] .lg8 img{filter:brightness(0) saturate(100%) invert(54%) sepia(25%) saturate(900%) hue-rotate(208deg) brightness(1.05)!important}
:root[data-theme="light"] .lg8 .c img{opacity:.85}
#services{padding-top:80px!important}

:root[data-theme="light"] .lg8 .c img{opacity:.95}

/* even breathing room between sections */
.stats{padding-bottom:60px}
main>section:not(#services):not(#process):not(.close){padding-block:130px!important}
#services{padding-top:130px!important;padding-bottom:110px!important}
#process{padding-top:120px!important}
main>section:nth-of-type(n)[style*="40px 52px"]{padding-block:70px 130px!important}
#about{padding-top:120px!important;padding-bottom:200px!important}
#faq{padding-block:120px 110px!important}
#faq + .wavewrap,.wavewrap+section.close{margin-top:40px}
@media (max-width:900px){
  .stats{padding-bottom:40px}
  main>section:not(#services):not(#process):not(.close){padding-block:84px!important}
  #services{padding-top:84px!important;padding-bottom:70px!important}
  #process{padding-top:80px!important}
  main>section[style*="40px 52px"]{padding-block:50px 84px!important}
  #about{padding-top:84px!important;padding-bottom:120px!important}
  #faq{padding-block:84px!important}
  .abp.mos{min-height:0!important;width:100%;aspect-ratio:1/1.12!important;margin:30px 0 0!important}
  .mt.m1{width:68%!important;left:2%!important}.mt.m2{width:72%!important;left:12%!important;top:25%!important}.mt.m3{width:84%!important;top:50%!important}
  .ab{gap:36px!important}
  .abt h2 span{white-space:normal}
}


@media (max-width:900px){
  .ab{grid-template-columns:minmax(0,1fr)!important}
  .abt h2{font-size:clamp(1.5rem,6.4vw,2rem)}
  .abp.mos{aspect-ratio:1/1.05!important}
  footer .fbrand{grid-column:1/-1}
}
@media (min-width:901px) and (max-width:1100px){
  .ab{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .abt h2 span{white-space:normal}
}


/* v11 hero: devices, sparkle trail, butterfly */
.hero .hxg { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 60px; }
.hero .hxg .col { width: fit-content; max-width: 100%; }
.tagw { width: 0; min-width: 100%; white-space: nowrap; }
.twb { display: inline-block; text-align: left; }
.hxg h1 { font-weight: 200; font-size: clamp(1.7rem, 2.85vw, 2.6rem); line-height: 1.14; letter-spacing: -.02em; margin-top: 26px; }
.hxg h1 .hl { font-weight: 300; }
.hsub { width: 0; min-width: 100%; margin: 22px 0 0; font-size: 1.12rem; line-height: 1.6; color: color-mix(in srgb, var(--text) 86%, transparent); }
.hsub .hl { font-weight: 500; }
.hsub { text-wrap: pretty; }
.hxg .cta { width: 0; min-width: 100%; margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hxg .cta { flex-wrap: nowrap; }
.hxg .cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; padding-inline: clamp(16px, 1.6vw, 28px); min-width: 0; }
.pf { width: 0; min-width: 100%; margin-top: 28px; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px 14px; font-size: clamp(.7rem, .9vw, .78rem); color: color-mix(in srgb, var(--text) 72%, transparent); }
.pf span { white-space: nowrap; }
.pf i { font-style: normal; color: var(--hl1); margin-right: 5px; }

.dv { --bleed: 24px; position: relative; width: calc(100% + var(--bleed)); margin-right: calc(-1 * var(--bleed)); aspect-ratio: 800 / 640; margin-top: -6px; }
.stg { position: absolute; left: 0; top: 0; width: 800px; height: 640px; transform-origin: 0 0; }
.stg .stage { position: absolute; left: 10px; top: 0; width: 760px; height: 560px; }
.stg .lap { position: absolute; left: 70px; top: 40px; width: 600px; height: 380px; border-radius: 16px 16px 6px 6px; background: #0c0a1e; border: 2px solid #3a3568; padding: 10px 10px 8px; box-shadow: 0 30px 80px rgba(60,30,200,.4), 0 0 0 1px rgba(255,255,255,.08) inset; }
.stg .lap img, .stg .tab img, .stg .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.stg .lap img { border-radius: 4px; }
.stg .base { position: absolute; left: 30px; top: 418px; width: 680px; height: 16px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg,#2c2858,#14112e); border: 1px solid #3a3568; }
.stg .base::after { content: ""; position: absolute; left: 260px; right: 260px; top: 0; height: 5px; border-radius: 0 0 8px 8px; background: #0c0a1e; }
.stg .tab { position: absolute; right: -24px; top: 150px; width: 200px; height: 278px; border-radius: 20px; background: #0c0a1e; border: 2px solid #3a3568; padding: 10px; box-shadow: 0 24px 60px rgba(60,30,200,.45); }
.stg .tab img { border-radius: 10px; }
.stg .ph { position: absolute; left: -10px; top: 210px; width: 118px; height: 236px; border-radius: 22px; background: #0c0a1e; border: 2px solid #3a3568; padding: 8px; box-shadow: 0 24px 60px rgba(60,30,200,.45); }
.stg .ph img { border-radius: 15px; }
.stg .ph::before { content: ""; position: absolute; left: 38px; right: 38px; top: 6px; height: 9px; border-radius: 6px; background: #000; z-index: 2; }
.stg .rc { position: absolute; left: 0; top: 458px; width: 800px; height: 182px; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 0, #000 40%, transparent 90%); mask-image: radial-gradient(ellipse 62% 100% at 50% 0, #000 40%, transparent 90%); }
.stg .rc .stage { transform-origin: 0 0; transform: translateY(458px) scaleY(-1); opacity: .5; filter: blur(2px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 85%); mask-image: linear-gradient(180deg, transparent 0, #000 85%); }
.stg .land { position: absolute; left: 382px; top: 22px; width: 1px; height: 1px; }

/* devices settle in */
.dv .stage > div { opacity: 0; transform: translateY(-30px); transition: opacity 1s ease, transform 1.3s cubic-bezier(.2,.8,.2,1); }
.dv.s-tab .stage > .tab, .dv.s-lap .stage > .lap, .dv.s-lap .stage > .base, .dv.s-ph .stage > .ph { opacity: 1; transform: none; }
.stg .scr { opacity: 0; transition: opacity 1s ease .6s; }
.dv.s-tab .tab .scr, .dv.s-lap .lap .scr, .dv.s-ph .ph .scr { opacity: 1; }
.bfp { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }

/* gold sparkles at the base */
.gsp { position: absolute; inset: 0; pointer-events: none; }
.gsp i, .gsp b { position: absolute; opacity: 0; }
.dv.on .gsp i, .dv.on .gsp b { animation: dcfall 1.9s cubic-bezier(.3,.6,.35,1) var(--fd) both, dcfl var(--fl) ease-in-out calc(var(--fd) + 1.9s) infinite; }
.gsp i::after { content: ""; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(rgba(255,214,120,.5), transparent 65%); }
.gsp i::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff6d8; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.gsp b { position: absolute; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 6px rgba(255,214,120,.9); }
@keyframes dcfall { 0% { opacity: 0; transform: translate(-14px, -90px) scale(.4); } 70% { opacity: 1; } 100% { opacity: .85; transform: none; } }
@keyframes dcfl { 0%, 100% { opacity: .85; } 50% { opacity: .45; } }

/* sparkle trail */
.trail { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 4; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 94%, transparent); }
.trail .d1 { animation: dctwk 3.1s ease-in-out infinite alternate; }
.trail .d2 { animation: dctwk 4.3s ease-in-out -1.7s infinite alternate; }
.trail .d3 { animation: dctwk 5.6s ease-in-out -3.2s infinite alternate; }
@keyframes dctwk { 0% { opacity: .35; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-3px); } }
.trail .shim { stroke-dasharray: 70 1500; stroke-dashoffset: 70; opacity: 0; }
.trail.live .shim { opacity: .9; animation: dcshim 5.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes dcshim { 0% { stroke-dashoffset: 70; } 70%, 100% { stroke-dashoffset: -1050; } }
@media (min-width: 1441px) { .trail { width: 1440px; left: 50%; margin-left: -720px; } }

/* butterfly */
.bfx { position: absolute; left: 0; top: 0; z-index: 7; width: 200px; opacity: 0; pointer-events: none; will-change: transform; }
.bfx svg { display: block; width: 100%; height: auto; overflow: visible; }

.hero.off .gsp i, .hero.off .gsp b, .hero.off .trail *, .hero.off .stg * { animation-play-state: paused !important; }

@media (max-width: 1180px) {
  .dv { --bleed: 0px; }
  .hxg h1 { font-size: 3.6vw; }
  .pf { font-size: .74rem; }
}
@media (max-width: 900px) {
  .hero .hxg { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 112px; }
  .dv { --bleed: 0px; width: 100%; margin: 70px 0 0; max-width: none; }
  .hxg h1 { font-size: min(7.3vw, 3.9rem); }
  .hsub { font-size: 1.28rem; }
  .trail { top: -18px; z-index: 2; }
}
@media (max-width: 600px) { .hxg .cta { flex-wrap: wrap; } .dv { margin-top: 44px; } .hxg h1 { font-size: 6.9vw; } .pf { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 8px 14px; } .hsub { font-size: 1.02rem; } .tag { letter-spacing: .12em; } }
:root[data-theme="light"] .trail { filter: brightness(.72) saturate(2.4); }
:root[data-theme="light"] .gsp i::before { background: #f2b545; }
:root[data-theme="light"] .gsp i::after { background: radial-gradient(rgba(240,170,60,.45), transparent 65%); }
:root[data-theme="light"] .gsp b { background: #e9a93a; box-shadow: 0 0 5px rgba(230,160,50,.8); }

/* headline line 1 holds the typed word and does not set the block width */
.hxg h1 .u:first-child { width: 0; min-width: 100%; }
/* the words appear as the butterfly passes */
.hero.hold .hxg .col { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--rx, 3000px) - 90px), #000 var(--rx, 3000px)); mask-image: linear-gradient(90deg, transparent calc(var(--rx, 3000px) - 90px), #000 var(--rx, 3000px)); }
/* clouds drift across at a visible pace */
.m5 { animation-duration: 58s; } .m1 { animation-duration: 72s; } .m2 { animation-duration: 92s; } .m3 { animation-duration: 80s; } .m4 { animation-duration: 100s; } .m6 { animation-duration: 66s; }
/* reflection ripples */
.stg .rc .stage { animation: dcrip 6s ease-in-out infinite alternate; will-change: transform; }
.stg .rl { background: radial-gradient(120% 100% at 85% 0%, #3a2a9a, #1a1260 45%, #0b0826); } .stg .rt { background: linear-gradient(180deg, #8f7cf0 0 26%, #f6f4ff 26%); } .stg .rp { background: radial-gradient(120% 80% at 50% 0, #3a2a9a, #0b0826 75%); }
@keyframes dcrip { 0% { transform: translateY(458px) scaleY(-1) skewX(0deg); } 100% { transform: translate(-5px, 458px) scaleY(-1.03) skewX(1.4deg); } }
.stg .rc::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 10px, rgba(190,200,255,.08) 10px 12px); animation: dcripl 3.5s linear infinite; }
@keyframes dcripl { to { background-position: 0 24px; } }

/* device screens */
.stg .scr { position: relative; overflow: hidden; width: 100%; height: 100%; display: block; }
.stg .lap .scr { border-radius: 4px; } .stg .tab .scr { border-radius: 10px; } .stg .ph .scr { border-radius: 15px; }
.sitein { display: flex; flex-direction: column; gap: 9px; padding: 12px; }
.sitein i { display: block; }
.sitein .sh { height: 70px; border-radius: 8px; background: linear-gradient(120deg, #4a6bff, #b25cf6); }
.sitein .sl { height: 7px; border-radius: 4px; background: #d9d4f2; }
.sitein .w70 { width: 70%; } .sitein .w50 { width: 50%; } .sitein .w80 { width: 80%; } .sitein .w60 { width: 60%; } .sitein .w40 { width: 40%; }
.sitein .sb { height: 16px; width: 44%; border-radius: 999px; background: linear-gradient(100deg, #3d63ff, #b25cf6); }
.sitein .sg { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sitein .sg i { height: 42px; border-radius: 6px; background: #e8e4fb; }
.sitein .si { height: 56px; border-radius: 8px; background: linear-gradient(135deg, #7fd8ff, #4a6bff); }
.tsite { background: #f6f4ff; }
.tsite .sitein { animation: dcloop 16s linear infinite; }
@keyframes dcloop { to { transform: translateY(-50%); } }

.scn { background: radial-gradient(120% 100% at 85% 0%, #3a2a9a 0%, #1a1260 45%, #0b0826 100%); color: #f4f2ff; font-family: var(--f-body); }
.scn .sc { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.scn .sc.on { opacity: 1; }
.scn h4 { position: absolute; left: 36px; top: 46px; margin: 0; font: 300 23px/1.22 var(--f-display); letter-spacing: -.01em; color: #f6f4ff; white-space: nowrap; }
.scn p { position: absolute; left: 36px; top: 128px; margin: 0; font: 400 12.5px/1.6 var(--f-body); color: rgba(236,232,255,.76); white-space: nowrap; }
.scn .sc.on h4 { animation: dcin .7s ease both; }
.scn .sc.on p { animation: dcin .7s ease .15s both; }
@keyframes dcin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.s1 .mb { position: absolute; left: 0; top: 0; width: 74px; opacity: 0; overflow: visible; }
.s1.on .mb { animation: dcmb 2.6s ease-in-out both; }
@keyframes dcmb { 0% { opacity: 0; transform: translate(-80px, 240px) rotate(10deg); } 15%, 85% { opacity: 1; } 50% { transform: translate(250px, 180px) rotate(-6deg); } 100% { opacity: 0; transform: translate(600px, 130px) rotate(8deg); } }
.s1 .g { position: absolute; width: 12px; height: 12px; background: #ffe3a0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; }
.s1 .g1 { left: 120px; top: 262px; } .s1 .g2 { left: 260px; top: 222px; } .s1 .g3 { left: 400px; top: 196px; }
.s1.on .g1 { animation: dcg 1.3s ease .5s both; } .s1.on .g2 { animation: dcg 1.3s ease 1s both; } .s1.on .g3 { animation: dcg 1.3s ease 1.5s both; }
@keyframes dcg { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(12px) scale(.4); } }

.s2 .stamp { position: absolute; left: 250px; top: 176px; transform: rotate(-10deg); opacity: 0; }
.s2 .stamp b { display: block; padding: 10px 18px; border: 3px solid #ff7a9a; border-radius: 8px; color: #ff7a9a; font: 800 24px/1 var(--f-body); letter-spacing: .2em; white-space: nowrap; }
.s2 .stamp i { position: absolute; left: -10px; top: calc(50% - 2px); height: 4px; width: 0; background: #ffe3a0; border-radius: 4px; box-shadow: 0 0 10px #ffe3a0; }
.s2.on .stamp { animation: dcstamp .5s cubic-bezier(.3,1.6,.5,1) .35s both; }
.s2.on .stamp i { animation: dcstrike .5s ease 1.15s both; }
@keyframes dcstamp { from { opacity: 0; transform: rotate(-10deg) scale(1.8); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }
@keyframes dcstrike { to { width: calc(100% + 20px); } }

.s3 .card { position: absolute; left: 286px; top: 64px; width: 172px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: 0; }
.s3 .av { display: block; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #7fd8ff, #8a4cf0); margin-bottom: 10px; }
.s3 .card b { display: block; font: 600 14px var(--f-body); white-space: nowrap; }
.s3 .card span { display: block; font: 12px var(--f-body); color: rgba(236,232,255,.7); margin: 3px 0 6px; white-space: nowrap; }
.s3 .card em { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.24); margin-top: 9px; width: 0; }
.s3.on .card { animation: dcslide .7s cubic-bezier(.2,.8,.2,1) .2s both; }
.s3.on .card em { animation: dcbar .5s ease both; }
.s3.on .card em:nth-of-type(1) { --w: 92%; animation-delay: .9s; } .s3.on .card em:nth-of-type(2) { --w: 74%; animation-delay: 1.15s; } .s3.on .card em:nth-of-type(3) { --w: 58%; animation-delay: 1.4s; }
@keyframes dcslide { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes dcbar { to { width: var(--w); } }

.s4 .mini { position: absolute; left: 306px; top: 38px; width: 156px; height: 282px; border-radius: 10px; overflow: hidden; background: #f6f4ff; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.s4.on .sitein { animation: dcscroll 2.6s ease-in-out both; }
@keyframes dcscroll { to { transform: translateY(-46%); } }

.s5 .flow5 { position: absolute; left: 326px; top: 60px; width: 136px; height: 240px; }
.s5 .flow5 span { position: absolute; left: 0; width: 136px; text-align: center; padding: 9px 0; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); font: 600 12px var(--f-body); white-space: nowrap; opacity: 0; z-index: 1; }
.s5 .flow5 span:nth-child(2) { top: 96px; } .s5 .flow5 span:nth-child(3) { top: 192px; background: linear-gradient(100deg, #3d63ff, #b25cf6); border-color: transparent; }
.s5 .flow5 i { position: absolute; left: 67px; top: 30px; width: 2px; height: 166px; background: linear-gradient(#7fd8ff, #b25cf6); opacity: .55; }
.s5 .flow5 i::after { content: ""; position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #ffe3a0; box-shadow: 0 0 10px #ffe3a0; }
.s5.on .flow5 span { animation: dcin .5s ease both; }
.s5.on .flow5 span:nth-child(2) { animation-delay: .55s; } .s5.on .flow5 span:nth-child(3) { animation-delay: 1.1s; }
.s5.on .flow5 i::after { animation: dcdot 1.5s ease-in-out .3s both; }
@keyframes dcdot { to { top: 156px; } }

.s6 .bars { position: absolute; left: 300px; top: 112px; width: 160px; height: 150px; display: flex; align-items: flex-end; gap: 12px; padding: 0 6px; border-bottom: 1px solid rgba(255,255,255,.25); }
.s6 .bars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(#7fd8ff, #4a6bff); height: 0; }
.s6.on .bars i { animation: dcgrow .8s cubic-bezier(.2,.8,.2,1) both; }
.s6 .bars i:nth-child(1) { --h: 28%; } .s6 .bars i:nth-child(2) { --h: 42%; animation-delay: .12s; } .s6 .bars i:nth-child(3) { --h: 55%; animation-delay: .24s; } .s6 .bars i:nth-child(4) { --h: 74%; animation-delay: .36s; } .s6 .bars i:nth-child(5) { --h: 96%; animation-delay: .48s; }
.s6 .bars svg { position: absolute; left: 0; top: -14px; width: 160px; height: 116px; overflow: visible; }
.s6 .bars path { fill: none; stroke: #ffe3a0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; }
.s6.on .bars path { animation: dcdraw 1.4s ease .6s both; }
@keyframes dcgrow { to { height: var(--h); } }
@keyframes dcdraw { to { stroke-dashoffset: 0; } }

.s7 .chat { position: absolute; left: 292px; top: 74px; width: 168px; }
.s7 .chat i { display: block; height: 34px; border-radius: 14px; margin-bottom: 12px; opacity: 0; }
.s7 .c1 { width: 140px; background: rgba(255,255,255,.14); border-bottom-left-radius: 4px; }
.s7 .c2 { width: 120px; margin-left: auto; background: linear-gradient(100deg, #3d63ff, #b25cf6); border-bottom-right-radius: 4px; }
.s7 .c3 { width: 150px; background: rgba(255,255,255,.14); border-bottom-left-radius: 4px; }
.s7.on .chat i { animation: dcpop .45s cubic-bezier(.3,1.5,.5,1) both; }
.s7.on .chat .c2 { animation-delay: .7s; } .s7.on .chat .c3 { animation-delay: 1.3s; }
@keyframes dcpop { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }

.s8 .chip { position: absolute; left: 36px; top: 188px; padding: 7px 14px; border-radius: 999px; font: 600 12px var(--f-body); white-space: nowrap; background: rgba(255,227,160,.14); color: #ffe3a0; border: 1px solid rgba(255,227,160,.35); }
.s8.on .chip { animation: dcin .6s ease .5s both; }
.s8 .slide { position: absolute; left: 310px; top: 132px; width: 150px; }
.s8 .slide span { display: block; font: 600 12px var(--f-body); color: rgba(236,232,255,.82); margin-bottom: 14px; white-space: nowrap; }
.s8 .slide i { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); }
.s8 .slide b { position: absolute; left: 0; top: 25px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(127,216,255,.35); }
.s8.on .slide b { animation: dcknob 1.8s ease-in-out .3s both; }
@keyframes dcknob { to { left: 96px; } }

.s9 h4 { top: 70px; }
.stg .scn .s9 img { position: absolute; left: 322px; top: 100px; width: 128px; height: auto; border-radius: 0; object-fit: contain; filter: drop-shadow(0 0 18px rgba(127,216,255,.6)); }
.s9 .go { position: absolute; left: 36px; top: 140px; padding: 12px 22px; border-radius: 999px; font: 600 13px var(--f-body); white-space: nowrap; color: #fff; background: linear-gradient(100deg, #3d63ff, #7b3ff0 55%, #b25cf6); box-shadow: 0 10px 26px rgba(110,70,240,.45); }
.s9.on img { animation: dcin .8s ease .2s both; } .s9.on .go { animation: dcin .6s ease .6s both; }

.lock { background: radial-gradient(120% 80% at 50% 0, #3a2a9a, #0b0826 75%); color: #fff; text-align: center; font-family: var(--f-body); }
.lock .tm { display: block; margin-top: 26px; font: 300 26px/1 var(--f-display); }
.lock .dt { display: block; font-size: 7px; opacity: .7; margin-top: 3px; }
.lock .nt { position: absolute; left: 6px; right: 6px; top: 78px; padding: 6px 7px 6px 26px; border-radius: 9px; background: rgba(255,255,255,.16); text-align: left; opacity: 0; }
.lock .n2 { top: 116px; }
.lock .nt i { position: absolute; left: 7px; top: 8px; width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg, #7fd8ff, #8a4cf0); }
.lock .nt b { display: block; font: 700 7.5px/1.2 var(--f-body); white-space: nowrap; }
.lock .nt span { display: block; font: 6.5px/1.3 var(--f-body); opacity: .82; white-space: nowrap; }
.dv.s-ph .lock .n1 { animation: dcnt 9s ease 1s infinite; } .dv.s-ph .lock .n2 { animation: dcnt 9s ease 2.4s infinite; }
@keyframes dcnt { 0% { opacity: 0; transform: translateY(-14px); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }


/* devices pop out of the sparkle bursts */
.dv .stage > div { opacity: 0; transform: scale(.86); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,1.3,.4,1), filter 1.2s ease; filter: brightness(2.2) blur(3px); }
.dv.s-tab .stage > .tab, .dv.s-lap .stage > .lap, .dv.s-lap .stage > .base, .dv.s-ph .stage > .ph { filter: none; }
.stg .stage > .lap { transform-origin: 50% 60%; } .stg .stage > .tab, .stg .stage > .ph { transform-origin: 50% 50%; }

/* all-dark screens with a living background */
.scn { background: #0b0826; }
.scn .aur { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .75; z-index: 0; }
.scn .a1 { width: 360px; height: 260px; left: -60px; top: -80px; background: radial-gradient(closest-side, rgba(74,107,255,.75), transparent); animation: dcaur1 11s ease-in-out infinite alternate; }
.scn .a2 { width: 380px; height: 300px; right: -90px; bottom: -110px; background: radial-gradient(closest-side, rgba(178,92,246,.7), transparent); animation: dcaur2 13s ease-in-out infinite alternate; }
@keyframes dcaur1 { to { transform: translate(160px, 90px) scale(1.2); } }
@keyframes dcaur2 { to { transform: translate(-170px, -60px) scale(1.15); } }
.scn .spk { position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: #fff3d0; box-shadow: 0 0 6px #ffe3a0; animation: dcspk 4s ease-in-out infinite; }
@keyframes dcspk { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.3); } }
.scn .sc { z-index: 2; opacity: 0; transition: none; }
.scn .sc.was { opacity: 1; z-index: 2; }
.scn .sc.on { opacity: 1; z-index: 3; animation: dcwipe 1s cubic-bezier(.6,0,.25,1) both; }
@keyframes dcwipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.scn .sweep { position: absolute; z-index: 4; top: -10%; height: 120%; width: 70px; left: -90px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,235,190,.55) 45%, rgba(255,255,255,.9) 50%, rgba(255,235,190,.55) 55%, transparent); filter: blur(4px); }
.scn .sweep.go { animation: dcsweep 1s cubic-bezier(.6,0,.25,1) both; }
@keyframes dcsweep { 0% { opacity: 1; left: -90px; } 85% { opacity: 1; } 100% { opacity: 0; left: 600px; } }
.scn h4 em, .scn p em { font-style: normal; background: linear-gradient(100deg, #7fd8ff, #b79bff 55%, #ffd9a0); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glide 4s ease-in-out infinite alternate; }

/* dark, glowing site mock for the iPad and the laptop scene */
.tsite, .s4 .mini { background: linear-gradient(180deg, #17104a, #0d0a2e); }
.s4 .mini { border: 1px solid rgba(160,140,255,.35); box-shadow: 0 0 30px rgba(110,80,255,.35), 0 14px 34px rgba(0,0,0,.4); }
.sitein .sh { background: linear-gradient(120deg, #4a6bff, #b25cf6); box-shadow: 0 0 18px rgba(140,100,255,.55); }
.sitein .sl { background: rgba(255,255,255,.2); }
.sitein .sg i { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.sitein .si { background: linear-gradient(135deg, #7fd8ff, #4a6bff); box-shadow: 0 0 14px rgba(127,216,255,.45); }
.stg .rt { background: linear-gradient(180deg, #4a3bb0 0 26%, #17104a 26%); }

/* richer moments */
.s3 .card { background: rgba(255,255,255,.07); border: 1px solid rgba(160,140,255,.35); box-shadow: 0 0 28px rgba(110,80,255,.35); backdrop-filter: blur(6px); }
.s5 .flow5 span { box-shadow: 0 0 16px rgba(127,216,255,.25); }
.s6 .bars i { box-shadow: 0 0 12px rgba(127,216,255,.45); }
.s6 .bars path { filter: drop-shadow(0 0 5px #ffe3a0); }
.s7 .chat i { box-shadow: 0 0 14px rgba(140,100,255,.3); }
.s9 .go { animation: none; }
.s9.on .go { animation: dcin .6s ease .6s both, dcpulse2 2s ease-in-out 1.3s infinite; }
@keyframes dcpulse2 { 0%, 100% { box-shadow: 0 10px 26px rgba(110,70,240,.45); } 50% { box-shadow: 0 0 0 8px rgba(178,92,246,.18), 0 10px 30px rgba(110,70,240,.6); } }


/* devices are uncovered by the butterfly's sparkles, right to left */
.dv .stage > div { opacity: 1; transform: none; filter: none; transition: none; clip-path: inset(-60px -60px -60px var(--c, 100%)); }
/* after the landing the sparkle arc drifts apart and fades; loose sparkles keep floating */
.trail.gone .d1 { animation: dcd1 4.2s ease-in forwards; }
.trail.gone .d2 { animation: dcd2 4.8s ease-in .2s forwards; }
.trail.gone .d3 { animation: dcd3 5.4s ease-in .4s forwards; }
.trail.gone path { transition: opacity 2.6s ease; opacity: 0 !important; }
@keyframes dcd1 { to { opacity: 0; transform: translate(-40px, -46px); } }
@keyframes dcd2 { to { opacity: 0; transform: translate(30px, -70px); } }
@keyframes dcd3 { to { opacity: 0; transform: translate(60px, -30px); } }

:root[data-theme="light"] .stg .rc { opacity: .32; }
:root[data-theme="light"] .stg .rc::after { display: none; }

/* tighter top, devices fill more of the space */
@media (min-width: 901px) {
  .hero { min-height: max(100svh, 860px); }
  .hero .hxg { padding-top: clamp(140px, 12.5vw, 200px); }
  .trail { top: -26px; }
  .dv { margin-top: 26px; }
}
.stg .stage > .ph { left: 30px; }
.stg .stage > .tab { right: 4px; }
/* water: a stronger, moving reflection */
.stg .rc .stage { opacity: .72; filter: blur(1.5px); }
.stg .rc::before { content: ""; position: absolute; z-index: 2; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(205,215,255,.2), transparent); animation: dcshine 7s ease-in-out infinite; }
@keyframes dcshine { to { transform: translateX(350%); } }
/* butterflies on the laptop screen */
.scn .mbf { position: absolute; left: 0; top: 0; width: 44px; z-index: 4; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(127,216,255,.75)); }
.scn .f1 { animation: dcf1 12s linear infinite; }
.scn .f2 { width: 30px; animation: dcf2 16s linear -7s infinite; }
@keyframes dcf1 { 0% { transform: translate(-60px, 300px) rotate(12deg); } 25% { transform: translate(150px, 230px) rotate(-8deg); } 50% { transform: translate(300px, 280px) rotate(10deg); } 75% { transform: translate(470px, 200px) rotate(-6deg); } 100% { transform: translate(640px, 250px) rotate(8deg); } }
@keyframes dcf2 { 0% { transform: translate(620px, 40px) rotate(-10deg) scaleX(-1); } 30% { transform: translate(420px, 90px) rotate(6deg) scaleX(-1); } 60% { transform: translate(220px, 30px) rotate(-8deg) scaleX(-1); } 100% { transform: translate(-60px, 80px) rotate(6deg) scaleX(-1); } }
:root[data-theme="light"] .stg .rc .stage { opacity: .5; }

/* hero copy, new wording */
.hxg h1 { font-size: clamp(1.6rem, 2.4vw, 2.35rem); line-height: 1.16; }
.hxg h1 .u:first-child { width: auto; min-width: 0; }
@media (min-width: 901px) { .hsub { font-size: 1.02rem; line-height: 1.62; } }
@media (max-width: 900px) and (min-width: 601px) { .pf { font-size: .9rem; } }
.pf span { white-space: nowrap; }

/* laptop story: the butterfly's sparkles uncover each scene */
.scn .sc { position: absolute; inset: 0; z-index: 2; visibility: hidden; opacity: 1; animation: none !important; transition: none; }
.scn .sc.cur { visibility: visible; z-index: 3; clip-path: inset(-40px calc(100% - var(--rv, 0px)) -40px -40px); }
.scn .sc.old { visibility: visible; z-index: 2; clip-path: inset(-40px -40px -40px var(--rv, 0px)); }
.scn .sc.done { clip-path: none; }
.scn .tx { position: absolute; left: 36px; top: 34px; width: 400px; }
.scn .tx h4 { position: static; margin: 0; font: 300 21px/1.26 var(--f-display); color: #f6f4ff; white-space: normal; text-wrap: balance; }
.scn .tx p { position: static; margin: 9px 0 0; font: 400 12.5px/1.55 var(--f-body); color: rgba(236,232,255,.8); white-space: normal; text-wrap: pretty; }
.scn .ln { opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s ease; animation: none !important; }
.scn .ln.in { opacity: 1; transform: none; }
.scn .tx h4.in { text-shadow: 0 0 18px rgba(160,140,255,.35); }
.scn .vz { position: absolute; opacity: 0; transition: opacity .8s ease; }
.scn .sc.go .vz { opacity: 1; }
.scn .scp { position: absolute; inset: 0; width: 576px; height: 358px; z-index: 5; pointer-events: none; }
.scn .sbf { position: absolute; left: 0; top: 0; width: 46px; z-index: 6; pointer-events: none; overflow: visible; opacity: 0; filter: drop-shadow(0 0 7px rgba(127,216,255,.8)); }

/* 4: shapes that will not fit a template, then the stamp */
.v4 .tpl { left: 236px; top: 168px; width: 200px; height: 150px; }
.v4 .outl { position: absolute; left: 30px; top: 18px; width: 120px; height: 100px; border: 2px dashed rgba(200,190,255,.55); border-radius: 10px; }
.v4 .shp { position: absolute; display: block; }
.v4 .q1 { left: 6px; top: 40px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7fd8ff, #4a6bff); }
.v4 .q2 { left: 120px; top: 6px; width: 0; height: 0; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 46px solid #b25cf6; }
.v4 .q3 { left: 110px; top: 92px; width: 84px; height: 30px; border-radius: 6px; background: linear-gradient(100deg, #ffd9a0, #ff9ac8); }
.v4.go .q1 { animation: dcq1 1.1s ease-in-out .2s 2 alternate both; }
.v4.go .q2 { animation: dcq2 1s ease-in-out .35s 2 alternate both; }
.v4.go .q3 { animation: dcq3 1.2s ease-in-out .1s 2 alternate both; }
@keyframes dcq1 { 0% { transform: none; } 60% { transform: translate(44px, -6px) rotate(20deg); } 100% { transform: translate(30px, 4px) rotate(-8deg); } }
@keyframes dcq2 { 0% { transform: none; } 60% { transform: translate(-60px, 26px) rotate(-30deg); } 100% { transform: translate(-44px, 20px) rotate(14deg); } }
@keyframes dcq3 { 0% { transform: none; } 60% { transform: translate(-70px, -30px) rotate(-12deg); } 100% { transform: translate(-56px, -22px) rotate(6deg); } }
.v4 .stamp { position: absolute; left: 6px; top: 46px; transform: rotate(-12deg); opacity: 0; }
.v4 .stamp b { display: block; padding: 8px 14px; border: 3px solid #ff7a9a; border-radius: 8px; color: #ff7a9a; font: 800 20px/1 var(--f-body); letter-spacing: .2em; white-space: nowrap; background: rgba(11,8,38,.55); }
.v4 .stamp i { position: absolute; left: -8px; top: calc(50% - 2px); height: 4px; width: 0; background: #ffe3a0; border-radius: 4px; box-shadow: 0 0 10px #ffe3a0; }
.v4.go .stamp { animation: dcstamp .5s cubic-bezier(.3,1.6,.5,1) 2.5s both; }
.v4.go .stamp i { animation: dcstrike .5s ease 3.2s both; }

/* 5: strategy-call card */
.v5 .card { left: 100px; top: 150px; width: 230px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(160,140,255,.35); box-shadow: 0 0 28px rgba(110,80,255,.35); transform: translateX(80px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.v5.go .card { transform: none; }
.v5 .av { display: block; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #7fd8ff, #8a4cf0); margin-bottom: 10px; }
.v5 .cl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px; }
.v5 .cl i { display: block; height: 14px; border-radius: 4px; background: rgba(255,255,255,.1); }
.v5 .cl i.on { background: linear-gradient(135deg, #3d63ff, #b25cf6); box-shadow: 0 0 10px rgba(178,92,246,.7); }
.v5 .card em { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.24); margin-top: 8px; width: 80%; }
.v5 .card em + em { width: 55%; }

/* 6: sample website */
.v6 .web { left: 96px; top: 112px; width: 340px; height: 210px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #17104a, #0d0a2e); border: 1px solid rgba(160,140,255,.35); box-shadow: 0 0 30px rgba(110,80,255,.35); }
.v6 .bar3 { display: flex; gap: 5px; padding: 7px 9px; background: rgba(255,255,255,.06); }
.v6 .bar3 i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.v6.go .sitein { animation: dcscroll 5s ease-in-out .6s both; }

/* 8: rising graph */
.v8 .graph { left: 96px; top: 176px; width: 300px; height: 130px; display: flex; align-items: flex-end; gap: 16px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.25); }
.v8 .graph i { flex: 1; height: 0; border-radius: 5px 5px 0 0; background: linear-gradient(#7fd8ff, #4a6bff); box-shadow: 0 0 12px rgba(127,216,255,.4); }
.v8.go .graph i { animation: dcgrow .9s cubic-bezier(.2,.8,.2,1) both; }
.v8 .graph i:nth-child(1) { --h: 22%; } .v8 .graph i:nth-child(2) { --h: 34%; animation-delay: .12s; } .v8 .graph i:nth-child(3) { --h: 46%; animation-delay: .24s; } .v8 .graph i:nth-child(4) { --h: 60%; animation-delay: .36s; } .v8 .graph i:nth-child(5) { --h: 78%; animation-delay: .48s; } .v8 .graph i:nth-child(6) { --h: 96%; animation-delay: .6s; }
.v8 .graph svg { position: absolute; left: 0; top: -6px; width: 300px; height: 120px; overflow: visible; }
.v8 .graph path { fill: none; stroke: #ffe3a0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; filter: drop-shadow(0 0 5px #ffe3a0); }
.v8.go .graph path { animation: dcdraw 1.6s ease .7s both; }

/* 11: logo and button */
.v11 .fin { left: 36px; top: 96px; width: 420px; height: 230px; }
.v11 .fin .go { position: absolute; left: 0; top: 0; padding: 11px 20px; border-radius: 999px; font: 600 12.5px var(--f-body); white-space: nowrap; color: #fff; background: linear-gradient(100deg, #3d63ff, #7b3ff0 55%, #b25cf6); box-shadow: 0 10px 26px rgba(110,70,240,.45); }
.v11.go .fin .go { animation: dcpulse2 2s ease-in-out 1s infinite; }
.stg .scn .v11 .fin img { position: absolute; left: 236px; top: 26px; width: 140px; height: auto; border-radius: 0; object-fit: contain; filter: drop-shadow(0 0 18px rgba(127,216,255,.6)); }

/* iPad site: fuller, colorful content */
.sitein .c1 { background: linear-gradient(135deg, #7fd8ff, #4a6bff) !important; }
.sitein .c2 { background: linear-gradient(135deg, #b25cf6, #ff9ac8) !important; }
.sitein .c3 { background: linear-gradient(135deg, #ffd9a0, #ff7a9a) !important; }
.sitein .c4 { background: linear-gradient(135deg, #4a6bff, #b25cf6) !important; }
.sitein .sg i { border: 0 !important; height: 46px; box-shadow: 0 0 10px rgba(140,100,255,.3); }
.sitein .sr { display: flex; align-items: center; gap: 7px; }
.sitein .sr i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #7fd8ff, #8a4cf0); flex: none; }
.sitein .sr b { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); flex: 1; }
.sitein .sr b.s { flex: .5; background: rgba(255,227,160,.45); }
.sitein .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sitein .g3 i { height: 34px; border-radius: 6px; }

@media (max-width: 1180px) and (min-width: 901px) { .hxg h1 { font-size: 3vw; } }
.pf.two { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 8px 14px; }


/* laptop story: large, centered words that fill the screen */
.scn .tx { left: 128px; right: 136px; top: 22px; bottom: 40px; width: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.scn .tx h4 { font: 300 31px/1.18 var(--f-display); max-width: 312px; text-wrap: balance; color: #fff; }
.scn .tx h4.in { text-shadow: 0 0 22px rgba(160,140,255,.55); }
.scn .tx p { font: 400 19px/1.42 var(--f-body); max-width: 312px; margin-top: 12px; text-wrap: balance; color: rgba(240,236,255,.88); }
.scn .v11 .tx { bottom: 168px; }
.v11 .fin { left: 128px; right: 136px; width: auto; top: 178px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.stg .scn .v11 .fin img { position: static; width: 84px; }
.v11 .fin .go { position: static; font-size: 14px; padding: 12px 24px; }
/* the cycling word changes with a soft fade */
.hxg .tw { display: inline-block; transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.hxg .tw.swap { opacity: 0; transform: translateY(-.22em); filter: blur(3px); }
.hxg .caret { display: inline-block; }

/* phone: balanced natural wrap */
.hxg h1 .u + .u { }
/* island: the devices stand on a small glowing island just above the water; waves wash at its shore */
.stg .isle { position: absolute; left: -40px; top: 393px; width: 880px; height: 120px; z-index: 0; overflow: visible; }
.stg .stage { z-index: 1; }
.isl { position: absolute; left: -40px; top: 462px; width: 880px; height: 40px; pointer-events: none; z-index: 1; }
.isl .fo { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 50%; border: 1.5px solid rgba(215,222,255,.35); box-shadow: 0 0 8px rgba(190,205,255,.25); opacity: 0; animation: dcwash 5.4s ease-out infinite; }
.isl .f2 { animation-delay: -1.8s; } .isl .f3 { animation-delay: -3.6s; }
@keyframes dcwash { 0% { opacity: 0; transform: scale(1.12, 1.5); } 30% { opacity: .55; } 100% { opacity: 0; transform: scale(.94, .7); } }
:root[data-theme="light"] .isl .fo { border-color: rgba(120,110,230,.5); box-shadow: 0 0 10px rgba(140,120,240,.35); }
/* moving waves along the shoreline */
.shore { position: absolute; left: 0; width: 200%; height: 44px; z-index: 2; pointer-events: none; animation: dcshore 14s linear infinite; }
.shore path { fill: none; stroke-linecap: round; }
.shore .w1 { stroke: rgba(205,215,255,.3); stroke-width: 1.6; }
.shore .w2 { stroke: rgba(255,232,190,.28); stroke-width: 1.2; }
@keyframes dcshore { to { transform: translateX(-50%); } }
:root[data-theme="light"] .shore .w1 { stroke: rgba(110,100,220,.4); } :root[data-theme="light"] .shore .w2 { stroke: rgba(200,150,60,.35); }
.hero.off .shore, .hero.off .isl .fo { animation-play-state: paused; }
.gsp b { animation-name: dcfall, dcfloat !important; }
/* stars on the water: flash, drift and bob instead of sitting still */
.dv.on .gsp i { animation: dcfall 1.9s cubic-bezier(.3,.6,.35,1) var(--fd) both, dcwtw var(--fl) ease-in-out calc(var(--fd) + 1.9s) infinite; }
.gsp i:nth-child(3n) { --dx: -14px; } .gsp i:nth-child(3n+1) { --dx: 10px; } .gsp i:nth-child(3n+2) { --dx: -8px; }
@keyframes dcwtw { 0%, 100% { opacity: .35; transform: translate(0, 0) scale(.6); } 18% { opacity: 1; transform: translate(calc(var(--dx) * .3), -2px) scale(1.25); } 30% { opacity: .55; transform: translate(calc(var(--dx) * .45), -3px) scale(.85); } 62% { opacity: .9; transform: translate(var(--dx), 2px) scale(1.05); } 80% { opacity: .4; transform: translate(calc(var(--dx) * .5), 3px) scale(.7); } }
.gsp b { --dx: -10px; } .gsp b:nth-child(2n) { --dx: 8px; }
@keyframes dcfloat { 0%, 100% { opacity: .85; transform: translate(0, 0); } 25% { opacity: .3; } 50% { opacity: 1; transform: translate(var(--dx), -3px); } 75% { opacity: .45; transform: translate(calc(var(--dx) * .4), 2px); } }
@keyframes dcfloat { 0%, 100% { opacity: .85; transform: translate(0, 0); } 50% { opacity: .4; transform: translate(6px, -3px); } }

:root[data-theme="light"] .stg .isle path:first-of-type { fill: #8f80dc; opacity: .45; }
/* headline lines run edge to edge: each line is justified to the full block width; a short last line stays left */
.hxg h1 .u { display: block; white-space: nowrap; }
/* iPad: a calm, muted dashboard-style site, even cards, no loud colors */
.tsite { background: linear-gradient(180deg, #15103e, #0d0a2b) !important; }
.sitein.dash { gap: 8px; padding: 10px; }
.dash .dn { display: flex; align-items: center; gap: 6px; padding: 2px 0 4px; }
.dash .dn .lg { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #8fa2ff, #9b86e8); opacity: .85; flex: none; }
.dash .dn b { display: block; height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.14); }
.dash .dn b:first-of-type { flex: 2; background: rgba(255,255,255,.22); }
.dash .dh { padding: 10px; border-radius: 9px; background: linear-gradient(135deg, rgba(120,110,230,.32), rgba(80,90,200,.18)); border: 1px solid rgba(255,255,255,.08); }
.dash .dh b { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.45); }
.dash .dh .t1 { width: 72%; } .dash .dh .t2 { width: 48%; margin-top: 6px; background: rgba(255,255,255,.22); }
.dash .dh .db { display: block; width: 40%; height: 12px; margin-top: 9px; border-radius: 999px; background: rgba(150,165,255,.55); }
.dash .ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dash .ds span { display: block; padding: 6px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.dash .ds b { display: block; width: 60%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); margin-bottom: 5px; }
.dash svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash .ds path { fill: none; stroke: #a7b6ff; stroke-opacity: .7; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dash .dc { padding: 8px 6px 4px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.dash .dc .ar { fill: rgba(140,150,255,.14); }
.dash .dc .ln { fill: none; stroke: #b4a8ff; stroke-opacity: .8; stroke-width: 1.6; }
.dash .dl { display: flex; flex-direction: column; gap: 6px; }
.dash .dl span { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 7px; background: rgba(255,255,255,.04); }
.dash .dl i { width: 12px; height: 12px; border-radius: 4px; background: rgba(160,170,255,.45); flex: none; }
.dash .dl b { display: block; height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.2); }
.dash .dl em { display: block; width: 18px; height: 4px; border-radius: 2px; background: rgba(170,230,200,.4); }
/* devices stay fully hidden (shadows too) until the butterfly reaches them */
.dv .stage > div { visibility: hidden; }
/* opening: soft clouds part as the butterfly arrives */
.veil { position: absolute; top: -10%; bottom: -10%; width: 70%; z-index: 8; pointer-events: none; filter: blur(26px); transition: transform 3.6s cubic-bezier(.45,0,.2,1), opacity 3.6s ease; }
.veil.l { left: -10%; background: radial-gradient(ellipse 60% 45% at 60% 35%, rgba(150,130,255,.55), transparent 70%), radial-gradient(ellipse 55% 40% at 45% 70%, rgba(110,120,255,.5), transparent 72%), radial-gradient(ellipse 70% 60% at 70% 55%, rgba(40,26,120,.9), transparent 75%); }
.veil.r { right: -10%; background: radial-gradient(ellipse 60% 45% at 40% 40%, rgba(178,140,255,.55), transparent 70%), radial-gradient(ellipse 55% 40% at 55% 72%, rgba(120,110,255,.5), transparent 72%), radial-gradient(ellipse 70% 60% at 30% 55%, rgba(40,26,120,.9), transparent 75%); }
.hero.parted .veil.l { transform: translateX(-62%); opacity: 0; }
.hero.parted .veil.r { transform: translateX(62%); opacity: 0; }
:root[data-theme="light"] .veil.l, :root[data-theme="light"] .veil.r { filter: blur(26px) brightness(1.8) saturate(.6); }

/* ===== laptop story v3: demonstrations, one line at a time ===== */
.scn .ttl { position: absolute; left: 110px; width: 320px; margin: 0; text-align: center; font: 300 27px/1.2 var(--f-display); color: #fff; text-wrap: balance; text-shadow: 0 0 20px rgba(160,140,255,.45); }
.scn .ttl span { display: inline-block; }
.scn .l2, .scn .l3, .scn .lb { position: absolute; left: 110px; width: 320px; margin: 0; text-align: center; font: 400 19px/1.35 var(--f-body); color: rgba(240,236,255,.92); text-wrap: balance; }
.scn .l3 { font-size: 16px; }
.scn .lb { left: 96px; width: 190px; text-align: left; font: 300 24px/1.2 var(--f-display); color: #fff; }
.scn .sc [data-s] { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.scn .sc.st1 [data-s="1"], .scn .sc.st2 [data-s="2"], .scn .sc.st3 [data-s="3"], .scn .sc.st4 [data-s="4"], .scn .sc.st5 [data-s="5"], .scn .sc.st6 [data-s="6"] { opacity: 1; transform: none; }
.scn .sc.st2 [data-x="2"], .scn .sc.st3 [data-x="3"], .scn .sc.st4 [data-x="4"] { opacity: 0 !important; transform: translateY(-8px) !important; }
.scn .ic { display: block; width: 100%; height: 100%; fill: none; stroke: #d6cfff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 1 dream: clouds drift, an orb glows */
.q1 .cl { position: absolute; border-radius: 50%; filter: blur(14px); background: radial-gradient(closest-side, rgba(190,175,255,.55), transparent); }
.q1 .c1 { left: 90px; top: 220px; width: 200px; height: 80px; animation: dccl1 9s ease-in-out infinite alternate; }
.q1 .c2 { left: 250px; top: 250px; width: 220px; height: 90px; animation: dccl2 11s ease-in-out infinite alternate; }
.q1 .c3 { left: 150px; top: 60px; width: 180px; height: 60px; opacity: .6; animation: dccl1 13s ease-in-out infinite alternate-reverse; }
@keyframes dccl1 { to { transform: translateX(60px); } } @keyframes dccl2 { to { transform: translateX(-70px); } }
.q1 .orb { position: absolute; left: 240px; top: 100px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,210,.8), rgba(200,180,255,.2) 60%, transparent); animation: dcorb 4s ease-in-out infinite alternate; }
@keyframes dcorb { to { transform: scale(1.4); opacity: .6; } }

/* 2 vision: a layout rearranges to fit; then a store that sells around the clock */
.q2 .bw { position: absolute; left: 150px; top: 138px; width: 240px; height: 170px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(200,190,255,.28); overflow: hidden; }
.q2 .bw i { position: absolute; border-radius: 6px; transition: all 1.1s cubic-bezier(.3,1.3,.4,1); }
.q2 .bh { left: 10px; top: 10px; right: 10px; height: 12px; background: rgba(255,255,255,.18); }
.q2 .b1 { left: 10px; top: 32px; width: 100px; height: 60px; background: rgba(143,162,255,.45); }
.q2 .b2 { left: 120px; top: 32px; width: 110px; height: 128px; background: rgba(180,160,255,.32); }
.q2 .b3 { left: 10px; top: 100px; width: 100px; height: 60px; background: rgba(255,227,160,.28); }
.q2.st2 .b1 { left: 10px; top: 32px; width: 220px; height: 58px; }
.q2.st2 .b2 { left: 10px; top: 98px; width: 106px; height: 62px; }
.q2.st2 .b3 { left: 124px; top: 98px; width: 106px; height: 62px; }
.q2 .sell { position: absolute; left: 372px; top: 118px; width: 54px; }
.q2 .sell .ic { width: 40px; height: 40px; margin-bottom: 8px; filter: drop-shadow(0 0 6px rgba(160,140,255,.7)); }
.q2 .badge { position: absolute; left: 28px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ffe3a0; box-shadow: 0 0 10px #ffe3a0; }
.q2.st3 .badge { animation: dcbadge 1.4s ease-in-out infinite; }
@keyframes dcbadge { 50% { transform: scale(1.35); } }

/* 3 brochure: each item struck through, an X lands on the template */
.q3 .nolist { position: absolute; left: 100px; top: 112px; width: 196px; margin: 0; padding: 0; list-style: none; }
.q3 .nolist li { margin: 0 0 16px; font: 400 17px/1.3 var(--f-body); white-space: nowrap; color: #fff; }
.q3 .nolist span { position: relative; }
.q3 .nolist span::after { content: ""; position: absolute; left: -4px; top: 55%; height: 2px; width: 0; background: #ffe3a0; box-shadow: 0 0 8px #ffe3a0; transition: width .6s ease .6s; }
.q3.st1 li:nth-child(1) span::after, .q3.st2 li:nth-child(2) span::after, .q3.st3 li:nth-child(3) span::after { width: calc(100% + 8px); }
.q3 .wf { position: absolute; left: 300px; top: 100px; width: 130px; height: 200px; border-radius: 10px; border: 1px dashed rgba(220,210,255,.45); background: rgba(255,255,255,.03); }
.q3 .wf i { position: absolute; left: 10px; right: 10px; border-radius: 4px; background: rgba(255,255,255,.14); }
.q3 .wh { top: 10px; height: 14px; }
.q3 .wp { top: 34px; height: 70px; display: grid; place-items: center; background: rgba(255,255,255,.07) !important; }
.q3 .wp svg { width: 40px; height: 40px; fill: rgba(255,255,255,.18); }
.q3 .wt1 { top: 116px; height: 10px; } .q3 .wt2 { top: 134px; height: 10px; right: 40px !important; } .q3 .wt3 { top: 152px; height: 10px; right: 60px !important; }
.q3 .x { position: absolute; width: 36px; height: 36px; }
.q3 .x::before, .q3 .x::after { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 100%; margin-left: -1.5px; border-radius: 2px; background: #ffb4c8; box-shadow: 0 0 10px rgba(255,180,200,.8); transform: rotate(45deg); }
.q3 .x::after { transform: rotate(-45deg); }
.q3 .x1 { right: -14px; top: -14px; } .q3 .x2 { left: 47px; top: 51px; } .q3 .x3 { left: 47px; top: 120px; }

/* 4 one phrase at a time, words left, image right */
.q4 .pm { position: absolute; left: 310px; top: 64px; width: 104px; height: 210px; border-radius: 18px; background: #0b0826; border: 2px solid rgba(200,190,255,.4); overflow: hidden; }
.q4 .pn { position: absolute; left: 36px; top: 6px; width: 30px; height: 7px; border-radius: 4px; background: #000; z-index: 2; }
.q4 .ps { position: absolute; left: 8px; right: 8px; top: 18px; display: flex; flex-direction: column; gap: 7px; animation: dcps 4s ease-in-out infinite alternate; }
.q4 .ps i { display: block; height: 10px; border-radius: 4px; background: rgba(255,255,255,.18); }
.q4 .ps .ph1 { height: 34px; background: rgba(143,162,255,.4); } .q4 .ps .ph2 { height: 26px; background: rgba(180,160,255,.3); }
@keyframes dcps { to { transform: translateY(-60px); } }
.q4 .pcta { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 22px; border-radius: 999px; background: linear-gradient(100deg, #3d63ff, #8a4cf0); z-index: 2; }
.q4.st2 .pcta { animation: dcctag 1.2s ease-in-out infinite; }
@keyframes dcctag { 50% { box-shadow: 0 0 0 6px rgba(160,140,255,.3), 0 0 18px rgba(160,140,255,.8); } }
.q4 .arw { position: absolute; left: 228px; top: 240px; width: 80px; height: 30px; overflow: visible; }
.q4 .arw path { fill: none; stroke: #ffe3a0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #ffe3a0); }
.q4.st2 .arw { animation: dcnudge 1.1s ease-in-out infinite; }
@keyframes dcnudge { 50% { transform: translateX(8px); } }
.q4 .gc { position: absolute; left: 280px; top: 90px; width: 160px; height: 150px; }
.q4 .gc svg { position: absolute; left: 0; top: 0; width: 160px; height: 110px; overflow: visible; }
.q4 .ga, .q9 .ga { fill: rgba(143,162,255,.18); }
.q4 .gl, .q9 .gl { fill: none; stroke: #b9adff; stroke-width: 2.4; stroke-dasharray: 260; stroke-dashoffset: 260; filter: drop-shadow(0 0 5px rgba(185,173,255,.8)); }
.q4.st3 .gl, .q9.st5 .gl { animation: dcdraw 1.6s ease .3s forwards; }
.q4 .gc i { position: absolute; bottom: 0; width: 26px; height: 0; border-radius: 4px 4px 0 0; background: rgba(143,162,255,.35); transition: height 1s cubic-bezier(.2,.8,.2,1); }
.q4 .gc i:nth-child(2) { left: 4px; } .q4 .gc i:nth-child(3) { left: 44px; transition-delay: .15s; } .q4 .gc i:nth-child(4) { left: 84px; transition-delay: .3s; } .q4 .gc i:nth-child(5) { left: 124px; transition-delay: .45s; }
.q4.st3 .gc i:nth-child(2) { height: 18px; } .q4.st3 .gc i:nth-child(3) { height: 28px; } .q4.st3 .gc i:nth-child(4) { height: 36px; } .q4.st3 .gc i:nth-child(5) { height: 46px; }

/* 5 checklist, and a shape that refuses to be boxed in */
.q5 .ok { position: absolute; left: 112px; top: 92px; width: 326px; margin: 0; padding: 0; list-style: none; }
.q5 .ok li { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font: 400 16px/1.25 var(--f-body); white-space: nowrap; color: #fff; }
.q5 .ok .ic { width: 20px; height: 20px; flex: none; stroke: #9ff0c8; stroke-width: 2.4; }
.q5 .fit { position: absolute; left: 175px; top: 206px; width: 200px; height: 120px; }
.q5 .tbox { position: absolute; left: 70px; top: 40px; width: 60px; height: 52px; border: 2px dashed rgba(220,210,255,.6); border-radius: 6px; }
.q5 .gshape { position: absolute; left: 0; top: 30px; width: 70px; height: 70px; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: radial-gradient(circle at 35% 35%, #c9c1ff, #6f7bff 60%, #8a4cf0); box-shadow: 0 0 22px rgba(160,140,255,.7); }
.q5.st4 .gshape { animation: dcpush 1.4s ease-in-out .2s 2; }
@keyframes dcpush { 0%, 100% { transform: translateX(0) scale(1); } 45% { transform: translateX(42px) scale(.8, 1.06); } 55% { transform: translateX(40px) scale(.74, 1.1); } }
.q5.st5 .gshape { animation: dcfree 1.2s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes dcfree { to { transform: translate(64px, -10px) scale(1.35); } }
.q5 .stp { position: absolute; left: 50px; top: 50px; }
.scn .sc .stp[data-s] { transform: rotate(-10deg) !important; }
.q5 .stp b { display: block; padding: 4px 10px; border: 1.5px solid rgba(255,190,210,.8); border-radius: 6px; color: rgba(255,200,220,.95); font: 700 13px/1 var(--f-body); letter-spacing: .22em; background: rgba(11,8,38,.7); }
.q5 .stp i { position: absolute; left: -6px; top: calc(50% - 1px); height: 2px; width: 0; background: #ffe3a0; box-shadow: 0 0 8px #ffe3a0; transition: width .5s ease .7s; }
.q5.st5 .stp i { width: calc(100% + 12px); }
.q5.st5 .tbox { opacity: .25; transition: opacity .8s ease .6s; }

/* 6 a call, then a plan */
.q6 .pc { position: absolute; left: 132px; top: 140px; width: 100px; height: 180px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(200,190,255,.3); }
.q6 .pav { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; border-radius: 50%; padding: 7px; background: rgba(143,162,255,.3); }
.q6 .rg { position: absolute; left: 22px; top: 22px; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(200,190,255,.6); opacity: 0; }
.q6.st1 .rg { animation: dcring 1.8s ease-out infinite; } .q6.st1 .r2 { animation-delay: .9s; }
@keyframes dcring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.q6 .call { position: absolute; left: 32px; top: 120px; width: 36px; height: 36px; border-radius: 50%; padding: 8px; background: #3ecf8e; box-shadow: 0 0 14px rgba(62,207,142,.6); }
.q6 .call .ic { stroke: #fff; }
.q6.st1 .call { animation: dcbadge 1.2s ease-in-out infinite; }
.q6 .plan { position: absolute; left: 258px; top: 140px; width: 160px; height: 180px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(200,190,255,.3); padding: 14px 12px; }
.q6 .plan .pt { display: block; width: 70%; height: 9px; border-radius: 4px; background: rgba(255,255,255,.4); margin-bottom: 14px; }
.q6 .plan span { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.q6 .plan span i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(200,190,255,.5); flex: none; padding: 1px; }
.q6 .plan span i .ic { stroke: #9ff0c8; stroke-width: 3; opacity: 0; transition: opacity .4s ease; }
.q6 .plan span b { display: block; height: 7px; flex: 1; border-radius: 4px; background: rgba(255,255,255,.2); }
.q6.st2 .plan span:nth-of-type(1) .ic { opacity: 1; transition-delay: .6s; } .q6.st2 .plan span:nth-of-type(2) .ic { opacity: 1; transition-delay: 1.1s; } .q6.st2 .plan span:nth-of-type(3) .ic { opacity: 1; transition-delay: 1.6s; } .q6.st2 .plan span:nth-of-type(4) .ic { opacity: 1; transition-delay: 2.1s; }

/* 7 a site builds, a visitor clicks, a customer appears */
.q7 .br { position: absolute; left: 120px; top: 102px; width: 300px; height: 222px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(200,190,255,.3); overflow: visible; }
.q7 .bdots { position: absolute; left: 10px; top: 9px; width: 34px; height: 8px; background: radial-gradient(circle 3.5px at 4px 4px, rgba(255,255,255,.4) 98%, transparent), radial-gradient(circle 3.5px at 16px 4px, rgba(255,255,255,.4) 98%, transparent), radial-gradient(circle 3.5px at 28px 4px, rgba(255,255,255,.4) 98%, transparent); }
.q7 .bnav { position: absolute; left: 10px; right: 10px; top: 24px; height: 10px; border-radius: 4px; background: rgba(255,255,255,.14); }
.q7 .bhero { position: absolute; left: 10px; right: 10px; top: 44px; height: 70px; border-radius: 8px; background: linear-gradient(120deg, rgba(110,120,255,.45), rgba(160,130,255,.3)); }
.q7 .bcards { position: absolute; left: 10px; right: 10px; top: 124px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.q7 .bcards i { display: block; height: 52px; border-radius: 7px; background: rgba(255,255,255,.08); }
.q7 .bcta { position: absolute; left: 24px; top: 88px; width: 80px; height: 16px; border-radius: 999px; background: #fff; opacity: .9; }
.q7 .cur { position: absolute; left: 210px; top: 190px; width: 22px; height: 22px; }
.q7 .cur .ic { fill: #fff; stroke: #1a1440; }
.q7.st4 .cur { animation: dccur 1.4s ease-in-out forwards; }
@keyframes dccur { 60% { transform: translate(-140px, -96px); } 75% { transform: translate(-140px, -96px) scale(.85); } 100% { transform: translate(-140px, -96px); } }
.q7 .cust { position: absolute; left: 236px; top: -18px; width: 44px; height: 44px; border-radius: 50%; padding: 9px; background: #3ecf8e; box-shadow: 0 0 18px rgba(62,207,142,.7); }
.q7 .cust .ic { stroke: #fff; stroke-width: 2; }
.q7.st4 .cust { transition-delay: 1.2s; }

/* 8 tools */
.q8 .tools { position: absolute; left: 130px; top: 104px; width: 290px; display: flex; justify-content: space-between; }
.q8 .tools span { width: 78px; height: 78px; border-radius: 18px; padding: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(200,190,255,.35); box-shadow: 0 0 22px rgba(120,110,255,.3); }
.q8 .tools .ic { stroke-width: 1.8; }
.q8 .tlink { position: absolute; left: 70px; right: 70px; top: 38px; height: 2px; z-index: -1; background: linear-gradient(90deg, transparent, #ffe3a0, transparent); box-shadow: 0 0 8px #ffe3a0; }

/* 9 track, attract, grow: a full analytics view */
.q9 .ttl span { opacity: 0; transform: translateY(8px); }
.q9 .dbd { position: absolute; left: 44px; top: 122px; width: 390px; height: 214px; }
.q9 .k { position: absolute; top: 0; width: 120px; height: 52px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(200,190,255,.25); padding: 10px; }
.q9 .k:nth-child(1) { left: 0; } .q9 .k:nth-child(2) { left: 135px; } .q9 .k:nth-child(3) { left: 270px; }
.q9 .k i { display: block; width: 50%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); margin-bottom: 9px; }
.q9 .k b { display: block; width: 0; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #8fa2ff, #c9c1ff); transition: width 1.2s ease .4s; }
.q9.st5 .k:nth-child(1) b { width: 70%; } .q9.st5 .k:nth-child(2) b { width: 85%; } .q9.st5 .k:nth-child(3) b { width: 60%; }
.q9 .ach { position: absolute; left: 0; top: 64px; width: 255px; height: 150px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(200,190,255,.2); padding: 10px; }
.q9 .ach svg { width: 100%; height: 100%; overflow: visible; }
.q9 .bch { position: absolute; left: 270px; top: 64px; width: 120px; height: 150px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(200,190,255,.2); display: flex; align-items: flex-end; gap: 8px; padding: 12px; }
.q9 .bch i { flex: 1; height: 0; border-radius: 4px 4px 0 0; background: linear-gradient(#c9c1ff, #6f7bff); transition: height 1s cubic-bezier(.2,.8,.2,1); }
.q9.st5 .bch i:nth-child(1) { height: 30%; } .q9.st5 .bch i:nth-child(2) { height: 48%; transition-delay: .15s; } .q9.st5 .bch i:nth-child(3) { height: 62%; transition-delay: .3s; } .q9.st5 .bch i:nth-child(4) { height: 78%; transition-delay: .45s; } .q9.st5 .bch i:nth-child(5) { height: 96%; transition-delay: .6s; }

/* 10 support: a journey lights up, step by step */
.q10 .jr { position: absolute; left: 120px; top: 150px; width: 300px; height: 150px; }
.q10 .jr svg { width: 300px; height: 100px; overflow: visible; }
.q10 .jr path { fill: none; stroke: rgba(200,190,255,.45); stroke-width: 2; stroke-dasharray: 5 7; }
.q10 .jr i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid rgba(200,190,255,.5); transition: all .5s ease; }
.q10 .j1 { left: 3px; top: 73px; } .q10 .j2 { left: 123px; top: 23px; } .q10 .j3 { left: 233px; top: 53px; } .q10 .j4 { left: 285px; top: 13px; }
.q10.st2 .jr i { background: #ffe3a0; border-color: #fff3d0; box-shadow: 0 0 12px #ffe3a0; }
.q10.st2 .j2 { transition-delay: .5s; } .q10.st2 .j3 { transition-delay: 1s; } .q10.st2 .j4 { transition-delay: 1.5s; }
.q10 .jc { position: absolute; left: 250px; top: -44px; width: 40px; height: 40px; padding: 7px; border-radius: 12px; background: rgba(143,162,255,.35); opacity: 0; transition: opacity .6s ease 2s; }
.q10.st2 .jc { opacity: 1; }

/* 11 budget: dollar signs drift up, coins stack */
.q11 .dol { position: absolute; bottom: -30px; font: 600 24px var(--f-display); color: rgba(255,227,160,.8); text-shadow: 0 0 10px rgba(255,227,160,.7); opacity: 0; }
.q11.go .dol { animation: dcdol 4.5s ease-in infinite; }
.q11 .d1 { left: 130px; } .q11 .d2 { left: 190px; animation-delay: .9s !important; } .q11 .d3 { left: 260px; animation-delay: 1.8s !important; } .q11 .d4 { left: 330px; animation-delay: 2.7s !important; } .q11 .d5 { left: 395px; animation-delay: 3.6s !important; }
@keyframes dcdol { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-230px); } }
.q11 .coins { position: absolute; left: 240px; top: 220px; width: 60px; height: 100px; }
.q11 .coins i { position: absolute; left: 0; width: 60px; height: 16px; border-radius: 50%; background: linear-gradient(#ffe3a0, #d8b86a); box-shadow: 0 2px 0 #b8964e, 0 0 12px rgba(255,227,160,.5); transform: translateY(-40px); opacity: 0; transition: all .5s cubic-bezier(.3,1.4,.5,1); }
.q11 .coins i:nth-child(1) { top: 80px; } .q11 .coins i:nth-child(2) { top: 66px; } .q11 .coins i:nth-child(3) { top: 52px; } .q11 .coins i:nth-child(4) { top: 38px; }
.q11.st1 .coins i { transform: none; opacity: 1; } .q11.st1 .coins i:nth-child(2) { transition-delay: .3s; } .q11.st1 .coins i:nth-child(3) { transition-delay: .6s; } .q11.st1 .coins i:nth-child(4) { transition-delay: .9s; }

/* 12 ready */
.q12 .rlogo { position: absolute; left: 225px; top: 120px; width: 90px; }
.stg .scn .q12 .rlogo { width: 90px; height: auto; border-radius: 0; object-fit: contain; filter: drop-shadow(0 0 18px rgba(127,216,255,.6)); }
.q12 .rgo { position: absolute; left: 150px; top: 232px; width: 240px; text-align: center; padding: 12px 0; border-radius: 999px; font: 600 15px var(--f-body); white-space: nowrap; color: #fff; background: linear-gradient(100deg, #3d63ff, #7b3ff0 55%, #b25cf6); box-shadow: 0 10px 26px rgba(110,70,240,.45); }
.q12.st1 .rgo { animation: dcpulse2 2s ease-in-out 1s infinite; }

.scn .sc[class*=" q"] { top: 20px; bottom: -20px; }
.q10 .jc { background: rgba(143,162,255,.5); } .q10 .jc .ic { stroke: #fff; }
/* tidy layout: every scene sits below the big butterfly, scaled to fit the screen; text a touch larger to compensate */
.scn .sc[class*=" q"] { top: 0; bottom: 0; transform-origin: 270px 0; transform: translate(20px, 40px) scale(.9); }
.q2 .sell .ic + .badge + .ic, .q10 .jc, .q11 .d2, .q11 .d4 { display: none; }
.scn .ttl { font-size: 29px; }
.scn .l2 { font-size: 21px; }
.scn .lb { font-size: 26px; }
/* scene change: the old scene fades away before the next one is revealed, so they never overlap */
.scn .sc.old { visibility: visible; clip-path: none !important; animation: dcfadeout .45s ease forwards !important; }
@keyframes dcfadeout { to { opacity: 0; } }
/* 5: a template page, stamped */
.q5 .tpg { position: absolute; left: 200px; top: 196px; width: 140px; height: 128px; border-radius: 8px; border: 1px dashed rgba(220,210,255,.5); background: rgba(255,255,255,.04); }
.q5 .tpg i { position: absolute; left: 10px; right: 10px; border-radius: 4px; background: rgba(255,255,255,.16); }
.q5 .t1 { top: 10px; height: 10px; } .q5 .t2 { top: 28px; height: 44px; background: rgba(255,255,255,.09) !important; } .q5 .t3 { top: 82px; height: 8px; } .q5 .t4 { top: 96px; height: 8px; right: 40px !important; } .q5 .t5 { top: 110px; height: 8px; right: 60px !important; }
.q5 .ntp { position: absolute; left: 184px; top: 242px; width: 172px; text-align: center; }
.scn .sc .ntp[data-s] { transform: rotate(-12deg) scale(1.6) !important; transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1) !important; }
.scn .sc.st5 .ntp[data-s] { transform: rotate(-12deg) scale(1) !important; }
.q5 .ntp b { display: inline-block; padding: 7px 12px; border: 2px solid rgba(255,190,210,.9); border-radius: 7px; color: rgba(255,205,222,.98); font: 800 15px/1 var(--f-body); letter-spacing: .16em; white-space: nowrap; background: rgba(11,8,38,.78); box-shadow: 0 0 16px rgba(255,170,200,.35); }
.q2 .l2 { top: 108px !important; } .q2 .bw { top: 152px; } .q2 .sell { top: 140px; }
.q10 .ttl { top: 20px !important; } .q10 .l2 { top: 104px !important; }
.q12 .rgo { border: 0; cursor: pointer; pointer-events: auto; font-family: var(--f-body); z-index: 7; }
.q12.st2 .rgo { animation: dcglow 1.6s ease-in-out infinite; }
@keyframes dcglow { 0%, 100% { box-shadow: 0 10px 26px rgba(110,70,240,.45), 0 0 0 0 rgba(200,180,255,.5); } 50% { box-shadow: 0 10px 30px rgba(110,70,240,.7), 0 0 0 10px rgba(200,180,255,0), 0 0 28px rgba(220,200,255,.9); } }
.q12 .rarw { position: absolute; left: 82px; top: 238px; width: 60px; height: 24px; overflow: visible; }
.q12 .rarw path { fill: none; stroke: #ffe3a0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #ffe3a0); }
.q12.st2 .rarw { animation: dcnudge 1s ease-in-out infinite; }
.stg, .stg .scn, .stg .scn .sc.cur { pointer-events: auto; }

/* introductory offers */
.pk, .dz { text-align: center; }
.pk .wrap, .dz .wrap { text-align: center; }
.pk .tag, .dz .tag { margin-bottom: 22px; }
.pk h2, .dz h2 { text-align: center; margin-inline: auto; }
.pk .sub, .dz .sub { text-align: center; margin: 18px auto 0; max-width: none; white-space: nowrap; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-top: 48px; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); text-align: center; backdrop-filter: blur(10px); }
.pcard.feat { border-color: rgba(160,140,255,.55); box-shadow: 0 0 0 1px rgba(160,140,255,.25), 0 20px 50px rgba(80,60,220,.25); }
.pkick { margin: 0 0 8px; font: 600 .72rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--hl1); white-space: nowrap; }
.pcard h3 { margin: 0; font: 400 1.4rem/1.25 var(--f-display); color: var(--text); white-space: nowrap; }
.pprice { margin: 14px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); font-size: .9rem; white-space: nowrap; color: color-mix(in srgb, var(--text) 70%, transparent); }
.pprice b { font: 500 1.9rem/1 var(--f-display); background: linear-gradient(100deg, var(--hl1), var(--hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard ul { list-style: none; margin: 0 auto 28px; padding: 0; display: grid; gap: 12px; text-align: left; }
.pcard li { display: flex; gap: 10px; align-items: center; font-size: .95rem; line-height: 1.35; white-space: nowrap; color: color-mix(in srgb, var(--text) 88%, transparent); }
.pcard li svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--hl1); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pcard .btn { margin-top: auto; width: 100%; justify-content: center; white-space: nowrap; }
.pbadge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; white-space: nowrap; font: 700 .72rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(100deg, #3d63ff, #8a4cf0); box-shadow: 0 6px 18px rgba(110,70,240,.45); }
.pmore { margin: 110px auto 0; font: 300 clamp(1.6rem, 3vw, 2.4rem)/1.2 var(--f-display); letter-spacing: -.015em; text-align: center; white-space: nowrap; color: var(--text); }
.pmore span { background: linear-gradient(100deg, var(--hl1), var(--hl2), var(--hl3)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400; }
/* dreamazon */
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.dcol { display: flex; flex-direction: column; align-items: center; padding: 32px 28px 28px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); text-align: center; }
.dcol h3 { margin: 0 0 12px; font: 400 1.4rem/1.25 var(--f-display); color: var(--text); white-space: nowrap; }
.dcol p { margin: 0 0 24px; max-width: 30ch; font-size: .97rem; line-height: 1.55; text-wrap: balance; color: color-mix(in srgb, var(--text) 82%, transparent); }
.dbtn { margin-top: auto; display: flex; gap: 10px; width: 100%; }
.dbtn .btn { flex: 1 1 0; justify-content: center; padding-inline: 14px; white-space: nowrap; }
@media (max-width: 1180px) { .pcard { padding: 30px 20px 24px; } .pcard li { font-size: .88rem; gap: 8px; } .pcard li svg { width: 16px; height: 16px; } .pgrid, .dgrid { gap: 16px; } .pcard h3, .dcol h3 { font-size: 1.25rem; } }
@media (max-width: 920px) { .pgrid, .dgrid { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; } .pcard li { font-size: .95rem; } .pk .sub, .dz .sub, .pmore { white-space: normal; text-wrap: balance; } .pmore span { display: block; } .pmore { margin-top: 84px; } }
@media (max-width: 600px) { .pk h2, .dz h2 { text-wrap: balance; } }
.pnote { margin: 40px auto 0; font-size: .85rem; color: var(--soft); white-space: nowrap; } .pnote a { color: inherit; text-decoration: underline; }
@media (max-width: 600px) { .pnote { white-space: normal; text-wrap: balance; } }
/* loader fill waits for the logo */
/* order buttons light up like the featured button on hover */
.pcard .btn.line { transition: transform .3s, background .3s, color .3s, box-shadow .3s, border-color .3s; }
.pcard .btn.line:hover, .pcard .btn.line:focus-visible, :root[data-theme="light"] .pcard .btn.line:hover { background: linear-gradient(100deg, var(--b1), var(--b2) 55%, var(--b3)); color: var(--btext); border-color: transparent; box-shadow: 0 10px 30px rgba(110,70,240,.35); }
/* lighter rendering: plain glass on cards, blurred layers drawn once, off-screen sections skipped */
.pcard, .faq details, .pcard .btn.line { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.pcard .btn:hover::after, .pcard .btn:focus-visible::after { display: block; animation: dcsweep 1.4s ease-in-out infinite; }
@keyframes dcsweep { 0% { left: -60%; } 70%, 100% { left: 130%; } }
/* light mode: water sparkles in the brand gradient */
:root[data-theme="light"] .gsp i:nth-child(4n)::before { background: #ff6fb5; } :root[data-theme="light"] .gsp i:nth-child(4n+1)::before { background: #5b7cff; }
:root[data-theme="light"] .gsp i:nth-child(4n+2)::before { background: #a98bff; } :root[data-theme="light"] .gsp i:nth-child(4n+3)::before { background: #8a4cf0; }
:root[data-theme="light"] .gsp i::after { background: radial-gradient(rgba(160,110,255,.45), transparent 65%); }
:root[data-theme="light"] .gsp b:nth-child(3n) { background: #ff6fb5; box-shadow: 0 0 6px rgba(255,111,181,.8); } :root[data-theme="light"] .gsp b:nth-child(3n+1) { background: #5b7cff; box-shadow: 0 0 6px rgba(91,124,255,.8); } :root[data-theme="light"] .gsp b:nth-child(3n+2) { background: #a98bff; box-shadow: 0 0 6px rgba(169,139,255,.8); }
/* About frames: own timing (the hero mist durations no longer apply), smooth float */
.mt.m1, .mt.m2, .mt.m3 { animation-name: mtin2, mtfl2 !important; animation-duration: 1.6s, 7s !important; animation-timing-function: cubic-bezier(.2,.7,.2,1), ease-in-out !important; animation-iteration-count: 1, infinite !important; animation-fill-mode: both, none !important; }
@keyframes mtin2 { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes mtfl2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.mt figcaption { top: 3px !important; padding: 3px 9px !important; font-size: .56rem !important; line-height: 1.1 !important; }
/* water glitter: round sparkles that burst outward from the butterfly, then shimmer */
.gsp i::before { clip-path: none !important; border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 35%, #ffe3a0 60%, rgba(255,214,120,0) 72%) !important; }
.gsp i::after { inset: -120% !important; background: radial-gradient(rgba(255,214,120,.45), transparent 62%) !important; }
:root[data-theme="light"] .gsp i:nth-child(4n)::before { background: radial-gradient(circle, #fff 0 30%, #ff6fb5 60%, rgba(255,111,181,0) 72%) !important; }
:root[data-theme="light"] .gsp i:nth-child(4n+1)::before { background: radial-gradient(circle, #fff 0 30%, #5b7cff 60%, rgba(91,124,255,0) 72%) !important; }
:root[data-theme="light"] .gsp i:nth-child(4n+2)::before { background: radial-gradient(circle, #fff 0 30%, #a98bff 60%, rgba(169,139,255,0) 72%) !important; }
:root[data-theme="light"] .gsp i:nth-child(4n+3)::before { background: radial-gradient(circle, #fff 0 30%, #8a4cf0 60%, rgba(138,76,240,0) 72%) !important; }
:root[data-theme="light"] .gsp i::after { background: radial-gradient(rgba(160,110,255,.4), transparent 62%) !important; }
@keyframes dcfall { 0% { opacity: 0; transform: translate(var(--ox, -14px), var(--oy, -90px)) scale(.2); } 55% { opacity: 1; } 100% { opacity: .85; transform: none; } }
/* About: Today frame same shape as the others, lighter purple */
.mt.m3, :root[data-theme="light"] .mt.m3 { filter: saturate(1.1) brightness(1.32) !important; }
.pcode { margin: 40px auto 0; font-size: .95rem; color: var(--text); white-space: nowrap; }
.pcode b { letter-spacing: .08em; background: linear-gradient(100deg, var(--hl1), var(--hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcode + .pnote { margin-top: 10px; }
@media (max-width: 920px) { .pcode { white-space: normal; text-wrap: balance; } }
footer li { white-space: nowrap; }
/* butterfly arc sits a little lower, clearly between the top bar and the pill */
.trail { translate: 0 15px; }
/* clouds: between the original pace and the faster one */
.m5{animation-duration:80s!important}.m6{animation-duration:95s!important}.m1{animation-duration:105s!important}.m2{animation-duration:135s!important}.m3{animation-duration:120s!important}.m4{animation-duration:150s!important}
/* a little more room between the waves and the footer content */
footer { padding-top: 172px !important; }
/* dark mode: footer waves a shade darker than the sky, fading softly into the footer */
:root:not([data-theme="light"]) footer::before { background: linear-gradient(180deg, rgb(26,15,92) 30%, rgba(26,15,92,0)) !important; opacity: .6 !important; }
:root:not([data-theme="light"]) footer::after { background: linear-gradient(180deg, rgb(22,12,80) 30%, rgba(22,12,80,0)) !important; opacity: .7 !important; }
/* light mode: three layered swells at different depths, drifting in opposite directions */
footer .fwv3 { display: none; }
:root[data-theme="light"] footer .fwv3 { display: block; position: absolute; left: 0; right: 0; top: 10px; height: 110px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(170,150,255,.55), rgba(var(--ftop),.35)); filter: blur(1px);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 110' preserveAspectRatio='none'><path d='M0 58 Q190 18 375 56 T750 54 T1125 56 T1500 58 V110 H0 Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 110' preserveAspectRatio='none'><path d='M0 58 Q190 18 375 56 T750 54 T1125 56 T1500 58 V110 H0 Z'/></svg>");
  -webkit-mask-size: 1500px 110px; mask-size: 1500px 110px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; animation: fwave3 40s linear infinite; }
@keyframes fwave3 { from { -webkit-mask-position-x: 0; mask-position-x: 0; } to { -webkit-mask-position-x: 1500px; mask-position-x: 1500px; } }
:root[data-theme="light"] footer::before { top: 48px !important; opacity: .42 !important; background: linear-gradient(180deg, rgb(140,115,235), rgb(var(--ftop)) 80%) !important; filter: blur(.8px) !important; }
:root[data-theme="light"] footer::after { top: 76px !important; opacity: .85 !important; background: linear-gradient(180deg, rgb(125,100,222), rgb(var(--ftop)) 75%) !important; filter: blur(.8px) !important; }

/* order form */
.box label em { font-style: normal; font-weight: 400; color: var(--soft); }
.ocard { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(110,80,240,.16), rgba(80,160,255,.08)); }
.orow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: .94rem; }
.orow b { font-weight: 600; text-align: right; } .orow span { color: var(--soft); }
.orow:first-child span { color: var(--text); }
.odisc span:last-child { color: #7ee2b8; font-weight: 600; }
.otot { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); } .otot b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; background: linear-gradient(100deg, var(--hl1), var(--hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.onote { margin: 6px 0 0; min-height: 1.2em; font-size: .82rem; color: var(--soft); }
.frame.order .oterms { display: flex; }
.oterms { display: none; gap: 10px; align-items: flex-start; margin: 18px 0 0 !important; font-weight: 400 !important; font-size: .88rem !important; color: var(--soft); line-height: 1.45; cursor: pointer; }
.oterms input { width: 18px !important; height: 18px; flex: none; margin-top: 2px; padding: 0 !important; accent-color: #7b5cff; }
.oterms a { color: var(--hl1); }
.ferr { margin: 12px 0 0; min-height: 1.1em; font-size: .88rem; color: #ff9ab8; }
.rcheck { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 6px 0 14px; background: linear-gradient(135deg, #3d63ff, #8a4cf0); box-shadow: 0 10px 30px rgba(110,70,240,.45); }
.rcheck svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rmsg { margin: 0 0 6px; font-size: 1rem; line-height: 1.55; }
.rnext { margin: 16px 0 0; padding-left: 20px; color: var(--soft); font-size: .92rem; line-height: 1.7; }
#r-pay[hidden] { display: none; }
/* branded, wider form with a sidebar; slightly larger type */
.frame .box { max-width: 940px; padding: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: auto; font-size: 1.06rem; }
.fmain { padding: 34px 34px 30px; position: relative; min-width: 0; }
.fside { padding: 38px 28px; border-radius: 26px 0 0 26px; background: radial-gradient(120% 70% at 20% 0%, rgba(140,110,255,.45), transparent 70%), linear-gradient(170deg, #241866, #140d48); border-right: 1px solid var(--line); color: #fff; }
.fslogo { width: 68px; display: block; filter: drop-shadow(0 0 14px rgba(143,180,255,.55)); }
.fsname { margin: 14px 0 4px; font: 400 1.05rem/1.2 var(--f-display); letter-spacing: .28em; text-transform: uppercase; }
.fstag span { display: block; white-space: nowrap; } .fstag { margin: 0 0 24px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #9fdcff; }
.fslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .95rem; color: rgba(255,255,255,.88); }
.fslist li { padding-left: 24px; position: relative; } .fslist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #5fd0ff, #8a4cf0); box-shadow: 0 0 8px rgba(143,180,255,.7); }
.fsq { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font: 300 1.05rem/1.4 var(--f-display); color: #fff; }
.fsq span { display: block; margin-top: 8px; font: 400 .8rem var(--f-body); color: rgba(255,255,255,.7); }
.box h3 { font-size: 2.05rem; } .box p.s { font-size: 1.02rem; } .box label { font-size: .92rem; } .box input, .box textarea, .box select { font-size: 1.06rem; } .orow { font-size: 1rem; }
.box .x { z-index: 2; }
.rbook { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line); } .rbook b { display: block; margin-bottom: 4px; } .rbook span { color: var(--soft); font-size: .95rem; }
#r-cal[hidden], #o-plan[hidden] { display: none !important; }
@media (max-width: 760px) { .frame .box { grid-template-columns: minmax(0, 1fr); } .fside { border-radius: 26px 26px 0 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .fslogo { width: 44px; } .fsname { margin: 0; font-size: .9rem; } .fstag { margin: 0; width: 100%; font-size: .7rem; } .fstag span { display: inline; } .fstag span + span::before { content: ' \00b7  '; } .fslist, .fsq { display: none; } .fmain { padding: 26px 22px; } }
.orow span:last-child, .orow b:last-child { white-space: nowrap; }
@media (max-width: 760px) { #form .ocard .orow:first-child { flex-direction: column; align-items: flex-start; gap: 2px; } #form .ocard .orow:first-child b { text-align: left; } #r-sum .orow { flex-direction: column; align-items: flex-start; gap: 1px; } #r-sum .orow b { white-space: normal; text-align: left; } .orow span { white-space: nowrap; } }
/* rotating testimonials */
.tq { display: grid; max-width: none; margin: 0 auto; }
.tqi { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; pointer-events: none; }
.tqi.on { opacity: 1; transform: none; pointer-events: auto; }
.tqi blockquote { max-width: 1180px; margin: 26px auto 0; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.3; text-wrap: balance; }
.tqi .cite { text-wrap: balance; }
.tqd { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.tqd i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .4s; }
.tqd i.on { background: var(--hl1); }
.pk { padding-bottom: 50px !important; } .dz { padding-top: 70px !important; }
/* order form */
.frame .ord { display: none; } .frame.order .ord { display: contents; } .frame.order .gq { display: none; } .gq { display: contents; }
.payb { display: none; margin-top: 12px; } .payb.on { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .dv .stage > div { opacity: 1; transform: none; transition: none; filter: none; visibility: visible; } .veil { display: none; } .stg .scr { opacity: 1; transition: none; }
  .gsp i, .gsp b { opacity: .85; animation: none !important; } .trail .d1, .trail .d2, .trail .d3, .trail.gone .d1, .trail.gone .d2, .trail.gone .d3, .stg .rc .stage, .stg .rc::after, .stg .rc::before, .stg .scn *, .stg .scn .sc.on, .stg .tsite .sitein, .stg .lock .nt { animation: none !important; } .stg .lock .n1 { opacity: 1; }
}