:root { --studio-ink:#1b1830; --studio-muted:#625e76; --studio-paper:#fbfaff; --studio-violet:#4f46d8; --studio-line:#e7e3f1; }
body { color:var(--studio-ink); background:var(--studio-paper); }
.studio-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgb(231 227 241 / 80%); background:rgb(251 250 255 / 90%); backdrop-filter:blur(16px); }
.studio-nav { min-block-size:4.5rem; }
.studio-brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--studio-ink); text-decoration:none; font-size:1.1rem; }
.studio-mark { display:grid; place-items:center; inline-size:2.35rem; aspect-ratio:1; border-radius:.8rem; color:#fff; background:linear-gradient(145deg,#7b35d4,#4032bd); box-shadow:0 7px 18px rgb(79 70 216 / 28%); font-weight:900; }
.studio-links a { color:var(--studio-muted); text-decoration:none; font-size:.93rem; }
.studio-links a:hover { color:var(--studio-violet); }
.studio-hero { position:relative; isolation:isolate; overflow:hidden; }
.studio-hero::before { position:absolute; z-index:-1; content:""; inline-size:32rem; aspect-ratio:1; inset-block-start:-16rem; inset-inline-end:-8rem; border-radius:50%; background:radial-gradient(circle,#e9defe 0,transparent 68%); }
.studio-hero-grid { --ally-grid-gap:clamp(2rem,5vw,4rem); align-items:center; }
.studio-kicker { display:inline-flex; align-items:center; gap:.55rem; width:max-content; padding:.45rem .8rem; border:1px solid #e1d8fa; border-radius:999px; background:#f3edff; color:#5833a9; font-size:.84rem; font-weight:750; }
.studio-kicker::before { content:""; inline-size:.48rem; aspect-ratio:1; border-radius:50%; background:#6d43ce; box-shadow:0 0 0 4px #e5dafa; }
.studio-copy h1 { max-width:12ch; margin-block:.9rem 1rem; font-size:clamp(2.8rem,6vw,5rem); letter-spacing:-.065em; line-height:.99; }
.studio-copy h1 span { color:#6746cb; }
.studio-copy > p { max-width:49ch; color:var(--studio-muted); font-size:clamp(1.05rem,2vw,1.2rem); }
.studio-actions { margin-block:1.6rem .85rem; }
.studio-modal-demo { border:0; padding:.25rem 0; background:transparent; color:#5a43bd; text-decoration:underline; text-underline-offset:.2em; font-weight:700; cursor:pointer; }
.studio-trust { color:var(--studio-muted); font-size:.88rem; }
.studio-trust span::before { content:"✓"; margin-inline-end:.4rem; color:#338361; font-weight:900; }
.studio-window { position:relative; padding:1rem; border:1px solid #e4def1; border-radius:1.4rem; background:#fff; box-shadow:0 30px 80px rgb(44 30 85 / 16%),0 3px 10px rgb(44 30 85 / 5%); transform:rotate(1deg); }
.studio-window-bar { padding:.25rem .25rem .9rem; color:#817b92; font-size:.74rem; }
.studio-dots { display:flex; gap:.32rem; }
.studio-dots i { inline-size:.55rem; aspect-ratio:1; border-radius:50%; background:#e7e2ef; }
.studio-dots i:first-child { background:#ff8c8c; }.studio-dots i:nth-child(2) { background:#ffc96a; }.studio-dots i:nth-child(3) { background:#64c89b; }
.studio-audit { overflow:hidden; padding:0; border-color:#eeeaf5; border-radius:1rem; background:#fff; }
.studio-audit-head { padding:1rem 1.1rem; background:#fcfbff; border-bottom:1px solid #eeeaf5; }
.studio-audit-head strong { font-size:.93rem; }.studio-audit-head small { display:block; color:#8a849a; font-size:.72rem; }
.studio-score { display:grid; place-items:center; inline-size:3.1rem; aspect-ratio:1; border:4px solid #4ab58a; border-radius:50%; color:#237656; font-size:.85rem; font-weight:850; }
.studio-audit-body { padding:1rem 1.1rem; }
.studio-audit-body > p { margin-block:0 1rem; color:#767087; font-size:.78rem; }
.studio-check { --ally-stack-gap:.6rem; padding:.65rem 0; border-top:1px solid #f0edf5; font-size:.79rem; }
.studio-check b { display:grid; place-items:center; inline-size:1.35rem; aspect-ratio:1; border-radius:50%; background:#eaf8f0; color:#25805d; font-size:.72rem; }
.studio-check em { color:#25805d; font-size:.7rem; font-style:normal; }
.studio-float { position:absolute; inset-inline-start:-2.2rem; inset-block-end:2rem; padding:.8rem 1rem; border:1px solid #ebe6f3; border-radius:.9rem; background:white; box-shadow:0 15px 40px rgb(37 26 67 / 12%); font-size:.8rem; font-weight:750; transform:rotate(-3deg); }
.studio-float b { display:grid; place-items:center; inline-size:1.8rem; aspect-ratio:1; border-radius:.6rem; color:#4d38bc; background:#f0ecff; }
.studio-strip { border-block:1px solid var(--studio-line); background:#fff; }
.studio-strip-inner { padding-block:1.2rem; color:#777189; font-size:.86rem; }
.studio-strip-inner strong { color:#38334f; }
.studio-heading { max-inline-size:43rem; margin:0 auto 2.4rem; text-align:center; }
.studio-heading .studio-kicker { margin-inline:auto; }
.studio-heading h2 { margin-block:.9rem .6rem; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; }
.studio-heading p { margin-inline:auto; color:var(--studio-muted); }
.studio-feature-grid { --ally-grid-gap:1rem; }
.studio-feature { block-size:100%; border-color:var(--studio-line); background:#fff; transition:transform .18s ease,box-shadow .18s ease; }
.studio-feature:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgb(37 26 67 / 8%); }
.studio-feature-icon { display:grid; place-items:center; inline-size:2.7rem; aspect-ratio:1; border-radius:.8rem; color:#593fbe; background:#f0edff; font-size:1.2rem; font-weight:800; }
.studio-feature h3 { margin-block:1.1rem .4rem; font-size:1.08rem; }
.studio-feature p { margin:0; color:var(--studio-muted); font-size:.92rem; }
.studio-showcase { overflow:hidden; border:1px solid #e5def3; border-radius:1.4rem; background:linear-gradient(135deg,#f5f1ff,#fff 66%); }
.studio-showcase-grid { --ally-grid-gap:clamp(2rem,5vw,4rem); align-items:center; padding:clamp(1.4rem,5vw,3.5rem); }
.studio-showcase-copy h2 { max-width:14ch; margin-block:.9rem; font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.05em; }
.studio-showcase-copy p { color:var(--studio-muted); }
.studio-showcase-copy ul { padding:0; list-style:none; color:#4d4960; }
.studio-showcase-copy li::before { content:"✓"; margin-inline-end:.6rem; color:#348664; font-weight:900; }
.studio-code { overflow:auto; padding:1.3rem; border:1px solid #29243b; border-radius:1rem; background:#211d31; color:#ebe7fa; box-shadow:0 20px 45px rgb(37 26 67 / 16%); font: .79rem/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; }
.studio-code .code-purple { color:#c8a5ff; }.studio-code .code-green { color:#9be2bb; }.studio-code .code-muted { color:#8d879f; }
.studio-cta { padding:clamp(2rem,6vw,4.5rem); border-radius:1.4rem; color:#fff; background:linear-gradient(120deg,#30217d,#5941bd 58%,#7549bd); text-align:center; box-shadow:0 22px 55px rgb(69 48 147 / 22%); }
.studio-cta h2 { margin-block:0 .7rem; color:#fff; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; }
.studio-cta p { margin:0 auto 1.3rem; color:#e3dcff; }
.studio-cta .ally-btn-primary { color:#382782; background:#fff; border-color:#fff; }
.studio-footer { padding-block:1.5rem; border-top:1px solid var(--studio-line); color:var(--studio-muted); font-size:.88rem; }
.studio-dialog .ally-modal-dialog { inline-size:min(100%,30rem); padding:2rem; border:1px solid #eeeaf5; border-radius:1.2rem; background:#fff; box-shadow:0 25px 80px rgb(0 0 0 / 24%); }
.studio-dialog-card h2 { margin-block:0 .6rem; }
@media (max-width:48rem) { .studio-links { display:none; }.studio-float { inset-inline-start:-.5rem; }.studio-copy h1 { max-width:13ch; } }
@media (prefers-reduced-motion:reduce) { .studio-feature { transition:none; } }