:root{--blue:#0593C6;--pink:#D83995;--white:#FCFFFF;--bg:#FCFFFF;--surface:#fff;--ink:#0b2236;--mut:#587084;--bd:rgba(11,34,54,.1);--glass:rgba(255,255,255,.68);--glass-bd:rgba(255,255,255,.75);--tint:rgba(5,147,198,.1);--shadow:0 1px 2px rgba(11,34,54,.05),0 18px 40px -18px rgba(11,34,54,.22);--err:#d92d4b}
@media(prefers-color-scheme:dark){:root{--bg:#06111b;--surface:#0c1d2c;--ink:#eaf6fd;--mut:#93aabb;--bd:rgba(234,246,253,.12);--glass:rgba(8,24,38,.62);--glass-bd:rgba(255,255,255,.14);--tint:rgba(5,147,198,.2);--shadow:0 1px 2px rgba(0,0,0,.4),0 20px 44px -20px rgba(0,0,0,.8);--err:#ff7a8e}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}.narrow{max-width:760px}
h1,h2,h3{line-height:1.08;letter-spacing:-.035em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.4rem,6.4vw,5rem);font-weight:500}h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:600}h3{font-size:1.15rem;letter-spacing:-.01em;font-weight:700}
.grad{background:linear-gradient(100deg,var(--blue),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.12rem;color:var(--mut);max-width:620px;margin:0 auto 28px}.muted{color:var(--mut)}

/* floating glass pill nav */
.hdr{position:fixed;top:22px;left:0;right:0;z-index:30;pointer-events:none}
.nav{pointer-events:auto;max-width:1040px;margin:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-bd);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--shadow)}
@media(min-width:1100px){.nav{margin:0 auto}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:1.08rem;letter-spacing:-.02em}
.brand b{font-weight:800;background:linear-gradient(100deg,var(--blue),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr nav{display:flex;align-items:center;gap:4px}
.hdr nav a:not(.btn){color:var(--ink);opacity:.72;text-decoration:none;padding:8px 14px;border-radius:999px;font-size:.93rem;font-weight:600;transition:opacity .15s,background .15s}
.hdr nav a:not(.btn):hover{opacity:1;background:var(--tint)}
.ftr{margin-top:96px;border-top:1px solid var(--bd);padding:48px 0 32px;color:var(--mut);font-size:.95rem}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.ftr h4{margin:0 0 10px;color:var(--ink);font-size:.95rem}
.ftr a{display:block;color:var(--mut);text-decoration:none;padding:3px 0}.ftr a:hover{color:var(--blue)}
.ftr .fine{margin-top:32px;padding-top:20px;border-top:1px solid var(--bd);font-size:.85rem}
@media(max-width:640px){.ftr .cols{grid-template-columns:1fr 1fr}.ftr .cols>div:first-child{grid-column:1/-1}}

/* buttons: pills */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:0;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 10px 24px -10px var(--blue)}
.btn:hover,button:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px var(--blue)}
.btn.sm{padding:9px 18px;font-size:.92rem}
.btn.white{background:#fff;color:#0b2236;box-shadow:0 10px 26px -12px rgba(0,0,0,.35)}
.btn.ghost{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(8px)}
button.sec{background:transparent;color:var(--ink);border:1px solid var(--bd);box-shadow:none;padding:10px 18px;font-weight:600}
button.sec:hover{background:var(--tint);box-shadow:none}
button:disabled{opacity:.5;cursor:default;transform:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* futuristic hero: blurred colour field + ribbed glass */
.hero{position:relative;margin:12px;border-radius:32px;overflow:hidden;isolation:isolate;color:#fff;padding:150px 0 40px;background:linear-gradient(120deg,#0593C6 0%,#0aa6de 30%,#8a6bd8 58%,#D83995 82%,#ff8a5c 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(64px);z-index:-2;animation:drift 20s ease-in-out infinite alternate;will-change:transform}
.b1{width:44vw;height:44vw;left:-10vw;top:-12vw;background:#0593C6}
.b2{width:38vw;height:38vw;right:-8vw;top:6%;background:#D83995;animation-delay:-7s}
.b3{width:30vw;height:30vw;left:42%;bottom:-14vw;background:#ff9a62;animation-delay:-12s}
.b4{width:20vw;height:34vw;left:30%;top:8%;background:#fff;opacity:.55;animation-delay:-3s;border-radius:40%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.17) 0,rgba(255,255,255,0) 7px,rgba(255,255,255,.07) 14px);backdrop-filter:blur(1.6px);-webkit-backdrop-filter:blur(1.6px)}
@keyframes drift{to{transform:translate3d(7vw,5vw,0) scale(1.18) rotate(8deg)}}
.hero-top{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:end}
.hero h1{color:#fff;margin:0 0 20px;text-shadow:0 2px 40px rgba(5,60,90,.25)}
.hero .sub{max-width:520px;font-size:1.1rem;color:rgba(255,255,255,.9);margin:0 0 26px}
.hero .cta-row{display:flex;gap:10px;flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(10px);font-size:.82rem;font-weight:600;margin-bottom:22px}
.kicker i{width:8px;height:8px;border-radius:50%;background:#7dffb0;box-shadow:0 0 10px #7dffb0}
.gcard{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-radius:22px;padding:16px 18px;box-shadow:0 20px 40px -24px rgba(5,40,70,.5)}
.gcard+.gcard{margin-top:12px}
.gcard small{display:block;font-size:.72rem;opacity:.8;letter-spacing:.04em;text-transform:uppercase}
.gcard strong{display:flex;justify-content:space-between;align-items:baseline;font-size:1.35rem;letter-spacing:-.02em}
.gcard em{font-style:normal;font-size:.8rem;font-weight:600;opacity:.85}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;font-size:.88rem}
.strip div{padding:14px 4px;border-top:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.92)}
.strip b{display:block;color:#fff;margin-bottom:2px}
@media(max-width:860px){.hero-top{grid-template-columns:1fr}.strip{grid-template-columns:1fr 1fr}.hero{padding-top:120px;margin:8px;border-radius:26px}}

/* tool: frosted glass */
.tool{margin-top:32px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-bd);border-radius:26px;padding:20px;box-shadow:0 30px 60px -30px rgba(5,40,70,.55);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=text]{flex:1;min-width:0;padding:14px 20px;border-radius:999px;border:1px solid var(--bd);background:var(--surface);color:var(--ink);font:inherit}
input[type=text]:focus{outline:3px solid var(--tint);border-color:var(--blue)}
.hint{font-size:.85rem;color:var(--mut);margin:10px 8px 0}
video{width:100%;max-height:60vh;background:#000;border-radius:16px;display:block}
#msg{color:var(--mut);margin:12px 8px 0;font-size:.95rem}#msg:empty{display:none}#msg.err{color:var(--err)}
#edit{display:none;margin-top:16px}#ytw{display:none;aspect-ratio:16/9}#ytw iframe{width:100%;height:100%;border:0;border-radius:16px}
.range{position:relative;height:40px;margin:18px 0 8px}
.range .track,.range .fill{position:absolute;top:17px;height:6px;border-radius:3px}
.range .track{left:0;right:0;background:var(--bd)}.range .fill{background:linear-gradient(90deg,var(--blue),var(--pink))}
.range input{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:22px;height:30px;border-radius:999px;background:#fff;border:2px solid var(--pink);box-shadow:0 4px 12px rgba(216,57,149,.4);cursor:ew-resize}
.range input::-moz-range-thumb{pointer-events:auto;width:18px;height:26px;border-radius:999px;background:#fff;border:2px solid var(--pink);cursor:ew-resize}
.tool label{color:var(--mut);font-size:.8rem;font-weight:600;display:flex;flex-direction:column;gap:4px}
.tool label input:not([type=checkbox]){width:112px;padding:9px;border-radius:12px;border:1px solid var(--bd);background:var(--surface);color:var(--ink);font:inherit;text-align:center}
.tool input[type=checkbox]{accent-color:var(--pink)}
.tool .actions{margin-top:14px}.tool .actions .spacer{margin-left:auto}
@media(max-width:560px){.tool .actions .spacer{margin-left:0;width:100%}.tool .actions button#dl{width:100%}}

/* sections */
section.s{padding:84px 0 0}
.center{text-align:center}.center .lead{margin-bottom:0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.grid{display:grid;gap:18px;margin-top:40px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3{grid-template-columns:1fr 1fr}}@media(max-width:560px){.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--bd);border-radius:24px;padding:26px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--blue) 40%,var(--bd))}
.card p{margin:0;color:var(--mut)}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--tint),rgba(216,57,149,.14));font-size:1.25rem;margin-bottom:16px}
.steps{counter-reset:s}.step{counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;font-weight:800;margin-bottom:16px}
.cta{position:relative;overflow:hidden;isolation:isolate;margin-top:84px;text-align:center;padding:60px 24px;border-radius:32px;color:#fff;background:linear-gradient(120deg,#0593C6,#8a6bd8 55%,#D83995)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 7px,rgba(255,255,255,.06) 14px)}
.cta h2{margin-bottom:.3em}.cta p{margin:0 0 24px;opacity:.92}

/* faq + prose + pages */
details{background:var(--surface);border:1px solid var(--bd);border-radius:20px;padding:0 22px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--pink);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px;color:var(--mut)}
.page{padding-top:130px}.page h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:600}
.prose h2{font-size:1.45rem;margin-top:2em}.prose p,.prose li{color:var(--mut)}.prose strong{color:var(--ink)}
.prose ul{padding-left:1.2em}
@media(max-width:560px){.hdr nav a:not(.btn){display:none}.brand{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}