:root {
    color-scheme:dark;
    --bg:#05070d;
    --bg-soft:#090d17;
    --panel:#0d111c;
    --panel-2:#111626;
    --line:rgba(143,155,190,.16);
    --text:#f7f7fb;
    --muted:#a8aec0;
    --purple:#8d43ff;
    --purple-2:#b36cff;
    --green:#43d267;
    --blue:#3887ff;
    --orange:#ff7a1a;
    --shadow:0 24px 80px rgba(0,0,0,.45)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:radial-gradient(circle at 78% 9%,rgba(111,38,255,.13),transparent 24rem),var(--bg);
    color:var(--text);
    font-family:"Instrument Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.5
}
.landing-page a:not(.button) {
    color:inherit;
    text-decoration:none
}
.landing-page button,.landing-page a {
    font:inherit
}
.shell {
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.release-banner {
    position:relative;
    z-index:40;
    border-bottom:1px solid rgba(179,108,255,.3);
    background:linear-gradient(90deg,rgba(74,26,145,.96),rgba(104,42,194,.96) 48%,rgba(62,24,130,.96));
    box-shadow:0 10px 36px rgba(47,13,103,.24);
    color:#fff
}
.release-banner[hidden] {
    display:none
}
.release-banner__inner {
    min-height:48px;
    display:flex;
    align-items:center;
    gap:18px;
    padding-block:8px
}
.release-banner__message {
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    flex:1
}
.release-banner__badge {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(5,7,13,.2);
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    white-space:nowrap
}
.release-banner__text {
    color:rgba(255,255,255,.9);
    font-size:13px
}
.release-banner__text strong {
    color:#fff
}
.release-banner__thanks {
    flex:0 0 auto;
    color:rgba(255,255,255,.75);
    font-size:12px;
    white-space:nowrap
}
.release-banner__close {
    flex:0 0 auto;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    font-size:22px;
    line-height:1;
    transition:background .2s ease,border-color .2s ease
}
.release-banner__close:hover,
.release-banner__close:focus-visible {
    border-color:rgba(255,255,255,.24);
    background:rgba(5,7,13,.2);
    outline:none
}
.site-header {
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid transparent;
    background:rgba(5,7,13,.68);
    backdrop-filter:blur(20px);
    transition:.25s ease
}
.site-header.is-scrolled {
    border-color:var(--line);
    background:rgba(5,7,13,.9)
}
.header-inner {
    height:82px;
    display:flex;
    align-items:center;
    gap:36px
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:21px;
    font-weight:800;
    letter-spacing:-.03em
}
.brand-mark,.mini-mark {
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#a557ff,#651fff);
    box-shadow:0 0 25px rgba(131,54,255,.5);
    color:white;
    border-radius:7px;
    font-weight:900
}
.brand-mark {
    width:28px;
    height:28px
}
.mini-mark {
    width:18px;
    height:18px;
    font-size:11px
}
.primary-nav {
    display:flex;
    align-items:center;
    gap:30px;
    margin-inline:auto;
    color:#d8dbe6;
    font-size:14px
}
.primary-nav a,.text-link {
    transition:.2s ease
}
.primary-nav a:hover,.text-link:hover {
    color:#b98aff
}
.header-actions {
    display:flex;
    align-items:center;
    gap:24px;
    font-size:14px
}
.nav-toggle {
    display:none;
    background:none;
    border:0;
    padding:8px
}
.nav-toggle span:not(.sr-only) {
    display:block;
    width:23px;
    height:2px;
    background:white;
    margin:5px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 21px;
    border-radius:8px;
    border:1px solid transparent;
    font-weight:750;
    font-size:14px;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.button:hover {
    transform:translateY(-2px)
}
.button-primary {
    background:linear-gradient(135deg,#9a4cff,#6e24ff);
    box-shadow:0 11px 32px rgba(112,36,255,.36),inset 0 1px rgba(255,255,255,.2)
}
.button-primary:hover {
    box-shadow:0 15px 38px rgba(112,36,255,.5)
}
.button-small {
    min-height:42px;
    padding-inline:18px
}
.button-secondary {
    border-color:rgba(255,255,255,.16);
    background:rgba(8,10,17,.4)
}
.landing-page .button-light {
    background:#fff;
    color:#6926dc;
    min-width:128px
}
.play-icon {
    font-size:11px
}
.section-glow {
    position:relative;
    overflow:hidden
}
.hero {
    padding:55px 0 48px;
    border-bottom:1px solid var(--line)
}
.hero:after {
    content:"";
    position:absolute;
    right:-90px;
    top:20px;
    width:520px;
    height:520px;
    background:radial-gradient(circle,rgba(101,29,255,.24),transparent 68%);
    pointer-events:none
}
.hero-grid {
    display:grid;
    grid-template-columns:.92fr 1.28fr;
    gap:58px;
    align-items:center
}
.eyebrow,.section-kicker {
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(170,145,255,.14);
    background:rgba(151,101,255,.08);
    color:#ddd2ff;
    border-radius:999px;
    font-size:12px;
    padding:7px 12px
}
.hero h1 {
    font-size:clamp(48px,5vw,72px);
    line-height:1.04;
    letter-spacing:-.055em;
    margin:25px 0 19px
}
.hero h1 span,.section-heading h2 span {
    background:linear-gradient(135deg,#bc7cff,#7b35ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent
}
.hero-lede {
    font-size:18px;
    color:#bec3d1;
    max-width:580px;
    margin:0
}
.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:31px
}
.assurance-list {
    display:flex;
    gap:21px;
    flex-wrap:wrap;
    margin-top:27px;
    color:#9ca4b7;
    font-size:11px
}
.assurance-list span {
    display:flex;
    align-items:center;
    gap:7px
}
.assurance-list i {
    font-style:normal;
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    border-radius:50%;
    background:rgba(54,198,90,.17);
    color:#66e383
}
.studio-preview {
    position:relative;
    z-index:1
}
.studio-window {
    border:1px solid rgba(150,95,255,.36);
    border-radius:11px;
    overflow:hidden;
    background:#080b12;
    box-shadow:0 0 0 1px rgba(255,255,255,.02),0 0 45px rgba(91,32,218,.28),var(--shadow)
}
.studio-topbar {
    height:51px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 15px;
    border-bottom:1px solid var(--line);
    font-size:11px;
    color:#cdd1dc
}
.studio-brand {
    display:flex;
    align-items:center;
    gap:7px;
    font-weight:700
}
.studio-page {
    margin-left:auto;
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:6px
}
.studio-tools {
    display:flex;
    gap:8px
}
.studio-tools span {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid var(--line);
    border-radius:5px
}
.studio-publish {
    display:flex;
    align-items:center;
    gap:6px
}
.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#9f50ff;
    box-shadow:0 0 10px #9f50ff
}
.studio-save {
    padding:7px 13px;
    border-radius:6px;
    background:linear-gradient(135deg,#9c4dff,#6f24ff);
    font-weight:700
}
.studio-body {
    display:grid;
    grid-template-columns:145px 1fr 162px;
    min-height:405px
}
.studio-library,.studio-inspector {
    padding:13px 11px;
    background:#080b12;
    font-size:10px;
    color:#aeb5c5
}
.studio-library {
    border-right:1px solid var(--line)
}
.studio-inspector {
    border-left:1px solid var(--line)
}
.studio-panel-title {
    display:flex;
    justify-content:space-between;
    color:white;
    font-weight:700;
    margin-bottom:12px
}
.studio-search,.field {
    border:1px solid var(--line);
    background:#0b0f18;
    border-radius:5px;
    padding:8px;
    color:#858ea2
}
.studio-group-label {
    color:#697286;
    font-size:8px;
    margin:15px 0 7px
}
.studio-items {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px
}
.studio-items span {
    padding:5px 2px
}
.studio-canvas-wrap {
    padding:25px 20px;
    background:radial-gradient(circle at center,rgba(80,35,140,.11),transparent 60%),#0b0e16
}
.studio-canvas {
    position:relative;
    min-height:355px;
    border:1px solid rgba(255,255,255,.06);
    background:#080b11;
    border-radius:4px;
    padding:48px 25px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center
}
.selection-frame {
    position:relative;
    border:1px solid #8e36ff;
    padding:26px 14px 21px
}
.selection-frame:before,.selection-frame:after {
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    background:#b064ff;
    top:-3px
}
.selection-frame:before {
    left:-3px
}
.selection-frame:after {
    right:-3px
}
.selection-tag {
    position:absolute;
    top:38px;
    left:26px;
    background:#8d35f5;
    color:white;
    font-size:7px;
    padding:2px 5px;
    border-radius:3px;
    z-index:2
}
.selection-frame h2 {
    font-size:27px;
    line-height:1.07;
    margin:0 0 13px;
    letter-spacing:-.04em
}
.selection-frame h2 span {
    color:#b77cff
}
.selection-frame p {
    font-size:9px;
    color:#aeb4c2;
    max-width:300px;
    margin:0 auto 15px
}
.selection-frame button {
    border:0;
    color:white;
    background:linear-gradient(135deg,#9b49ff,#6922ff);
    border-radius:5px;
    padding:8px 14px;
    font-size:9px
}
.studio-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:16px
}
.studio-stats div {
    border:1px solid var(--line);
    background:#0d111c;
    border-radius:6px;
    padding:12px 5px
}
.studio-stats strong {
    display:block;
    font-size:14px
}
.studio-stats small {
    font-size:8px;
    color:#8f97aa
}
.tabs {
    display:flex;
    gap:12px;
    border-bottom:1px solid var(--line);
    margin-bottom:13px
}
.tabs span {
    padding-bottom:7px;
    font-size:8px
}
.tabs .active {
    color:#c68fff;
    border-bottom:1px solid #9b4eff
}
.studio-inspector label {
    display:block;
    color:#dfe2eb;
    margin:11px 0 5px
}
.field {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.field.multiline {
    min-height:47px;
    display:block
}
.color-chip {
    width:12px;
    height:12px;
    border-radius:3px;
    background:#d9d1ff;
    display:inline-block
}
.align-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px
}
.align-row span {
    border:1px solid var(--line);
    border-radius:4px;
    padding:6px;
    text-align:center
}
.trust-strip {
    padding:28px 0 33px;
    border-bottom:1px solid var(--line);
    background:rgba(8,11,19,.56)
}
.trust-strip p {
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:#7e879b;
    font-size:10px
}
.logo-row {
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:28px;
    flex-wrap:wrap;
    color:#9098aa;
    font-size:18px;
    font-weight:650
}
.section {
    padding:78px 0;
    border-bottom:1px solid var(--line)
}
.section-heading {
    text-align:center;
    margin-bottom:38px
}
.section-heading h2 {
    font-size:clamp(31px,4vw,43px);
    line-height:1.14;
    letter-spacing:-.04em;
    margin:15px 0 0
}
.section-kicker {
    text-transform:uppercase;
    color:#c69cff;
    font-size:10px;
    letter-spacing:.08em
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}
.feature-card,.testimonial-card {
    border:1px solid var(--line);
    background:linear-gradient(145deg,rgba(17,22,35,.88),rgba(8,11,18,.86));
    border-radius:9px;
    box-shadow:inset 0 1px rgba(255,255,255,.025)
}
.feature-card {
    padding:24px;
    min-height:215px;
    transition:.25s ease
}
.feature-card:hover {
    transform:translateY(-4px);
    border-color:rgba(144,76,255,.38)
}
.feature-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-size:25px;
    margin-bottom:18px
}
.feature-icon.purple {
    color:#c77dff;
    background:rgba(129,48,255,.22);
    box-shadow:0 0 28px rgba(129,48,255,.15)
}
.feature-icon.green {
    color:#64e879;
    background:rgba(42,184,72,.18)
}
.feature-icon.blue {
    color:#66a1ff;
    background:rgba(43,112,255,.19)
}
.feature-icon.orange {
    color:#ff984c;
    background:rgba(255,105,17,.18)
}
.feature-card h3 {
    font-size:17px;
    margin:0 0 10px
}
.feature-card p,.workflow-grid p,.testimonial-card p,.footer-brand p {
    color:#aab1c1
}
.feature-card p {
    font-size:14px;
    margin:0
}
.section-link {
    display:block;
    text-align:center;
    color:#a456ff;
    margin-top:28px;
    font-size:14px
}
.workflow-section {
    background:linear-gradient(180deg,rgba(10,13,22,.26),transparent)
}
.workflow-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:66px;
    text-align:center
}
.workflow-grid article {
    position:relative
}
.workflow-grid article:not(:last-child):after {
    content:"";
    position:absolute;
    top:25px;
    left:calc(50% + 42px);
    width:calc(100% - 20px);
    border-top:1px dashed #444c61
}
.step-icon {
    position:relative;
    z-index:1;
    margin:0 auto 18px;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(143,78,255,.27);
    border-radius:50%;
    color:#a553ff;
    background:#080b12;
    font-size:22px
}
.workflow-grid h3 {
    font-size:16px;
    margin:0 0 8px
}
.workflow-grid p {
    font-size:13px;
    max-width:260px;
    margin:auto
}
.testimonials-section {
    background:radial-gradient(circle at center,rgba(97,35,178,.08),transparent 45%)
}
.testimonial-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}
.testimonial-card {
    padding:25px
}
.testimonial-card p {
    font-size:14px;
    min-height:84px;
    margin:0 0 22px
}
.person {
    display:flex;
    align-items:center;
    gap:12px
}
.person strong,.person small {
    display:block
}
.person strong {
    font-size:13px
}
.person small {
    font-size:11px;
    color:#878fa3
}
.avatar {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:10px;
    font-weight:800
}
.avatar-one {
    background:linear-gradient(135deg,#d08d72,#6c3d35)
}
.avatar-two {
    background:linear-gradient(135deg,#d0a44d,#654722)
}
.avatar-three {
    background:linear-gradient(135deg,#d66a91,#632640)
}
.carousel-dots {
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:20px
}
.carousel-dots span {
    width:7px;
    height:7px;
    border:1px solid #4a5060;
    border-radius:50%
}
.carousel-dots .active {
    background:#9b4cff;
    border-color:#9b4cff
}
.cta-section {
    padding:34px 0 18px
}
.cta-panel {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    padding:25px 32px;
    border:1px solid rgba(157,81,255,.5);
    border-radius:10px;
    background:linear-gradient(100deg,rgba(58,21,126,.84),rgba(29,16,76,.8));
    box-shadow:0 0 35px rgba(90,28,210,.12)
}
.cta-rocket {
    font-size:48px;
    color:#a76cff;
    text-shadow:0 0 20px #7e35ff
}
.cta-panel h2 {
    font-size:22px;
    margin:0 0 4px
}
.cta-panel p {
    color:#b8b4ce;
    margin:0;
    font-size:13px
}
.cta-actions {
    display:flex;
    align-items:center;
    gap:24px
}
.bright {
    color:#d7c3ff
}
.site-footer {
    padding:22px 0 50px
}
.footer-grid {
    display:grid;
    grid-template-columns:1.55fr repeat(4,1fr);
    gap:42px
}
.footer-grid h3 {
    font-size:13px;
    margin:5px 0 14px
}
.footer-grid>div:not(.footer-brand) {
    display:flex;
    flex-direction:column;
    gap:8px
}
.footer-grid>div:not(.footer-brand) a {
    color:#929bad;
    font-size:12px
}
.footer-grid a:hover {
    color:#b57aff
}
.footer-brand p {
    font-size:12px;
    max-width:175px
}
.socials {
    display:flex;
    gap:8px
}
.socials a {
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#101522;
    font-size:11px
}
@media(max-width:1000px) {
    .hero-grid {
        grid-template-columns:1fr
    }
    .hero-copy {
        text-align:center
    }
    .hero-lede {
        margin-inline:auto
    }
    .hero-actions,.assurance-list {
        justify-content:center
    }
    .studio-preview {
        max-width:760px;
        margin:auto
    }
    .feature-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-grid {
        grid-template-columns:1.5fr repeat(2,1fr)
    }
    .footer-grid>div:nth-child(4),.footer-grid>div:nth-child(5) {
        margin-top:15px
    }
    .primary-nav {
        gap:18px
    }
    .header-inner {
        gap:20px
    }
}
@media(max-width:760px) {
    .shell {
        width:min(100% - 28px,1180px)
    }
    .header-inner {
        height:70px
    }
    .nav-toggle {
        display:block;
        margin-left:auto
    }
    .primary-nav {
        display:none;
        position:absolute;
        top:70px;
        left:14px;
        right:14px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px;
        border:1px solid var(--line);
        border-radius:10px;
        background:#090d16;
        box-shadow:var(--shadow)
    }
    .primary-nav.is-open {
        display:flex
    }
    .primary-nav a {
        padding:12px
    }
    .header-actions .text-link {
        display:none
    }
    .header-actions .button {
        min-height:38px;
        padding-inline:12px
    }
    .hero {
        padding-top:35px
    }
    .hero h1 {
        font-size:46px
    }
    .studio-body {
        grid-template-columns:105px 1fr
    }
    .studio-inspector {
        display:none
    }
    .studio-canvas-wrap {
        padding:15px 12px
    }
    .studio-topbar {
        gap:8px
    }
    .studio-tools {
        display:none
    }
    .feature-grid,.testimonial-grid {
        grid-template-columns:1fr
    }
    .workflow-grid {
        grid-template-columns:1fr;
        gap:36px
    }
    .workflow-grid article:not(:last-child):after {
        display:none
    }
    .cta-panel {
        grid-template-columns:1fr;
        text-align:center
    }
    .cta-rocket {
        display:none
    }
    .cta-actions {
        justify-content:center
    }
    .footer-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-brand {
        grid-column:1/-1
    }
    .logo-row {
        font-size:15px
    }
    .section {
        padding:60px 0
    }
}
@media(max-width:520px) {
    .header-actions .button {
        display:none
    }
    .hero h1 {
        font-size:40px
    }
    .hero-actions {
        flex-direction:column
    }
    .button {
        width:100%
    }
    .assurance-list {
        align-items:flex-start;
        flex-direction:column;
        max-width:220px;
        margin-inline:auto
    }
    .studio-library {
        display:none
    }
    .studio-body {
        grid-template-columns:1fr
    }
    .studio-page {
        display:none
    }
    .selection-frame h2 {
        font-size:22px
    }
    .feature-grid {
        grid-template-columns:1fr
    }
    .cta-actions {
        flex-direction:column
    }
    .cta-actions .button {
        width:auto
    }
    .footer-grid {
        grid-template-columns:1fr
    }
    .footer-brand {
        grid-column:auto
    }
}
@media (max-width: 900px) {
    .release-banner__thanks {
        display:none
    }
}
@media (max-width: 640px) {
    .release-banner__inner {
        align-items:flex-start;
        gap:10px;
        padding-block:10px
    }
    .release-banner__message {
        align-items:flex-start;
        flex-direction:column;
        gap:6px
    }
    .release-banner__text {
        font-size:12px;
        line-height:1.4
    }
    .release-banner__close {
        margin-top:-2px
    }
}
@media (prefers-reduced-motion: no-preference) {
    .release-banner.is-closing {
        animation:release-banner-out .22s ease forwards
    }
}
@keyframes release-banner-out {
    to {
        opacity:0;
        transform:translateY(-100%)
    }
}
/* Phase 12.1.1 — reusable public shell */
.skip-link {
    position:fixed;
    top:.75rem;
    left:.75rem;
    z-index:9999;
    padding:.75rem 1rem;
    border-radius:.65rem;
    background:#fff;
    color:#090b13;
    font-weight:800;
    transform:translateY(-180%);
    transition:transform .16s ease
}
.skip-link:focus {
    transform:translateY(0)
}
.release-banner__link {
    white-space:nowrap;
    color:#fff;
    font-size:.82rem;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px
}
.primary-nav a.is-active {
    color:#fff
}
.primary-nav a.is-active::after {
    content:"";
    display:block;
    height:2px;
    margin-top:.35rem;
    border-radius:999px;
    background:currentColor
}
.mobile-nav-heading,.mobile-nav-actions {
    display:none
}
.nav-backdrop {
    position:fixed;
    inset:0;
    z-index:88;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(4px);
    opacity:0;
    transition:opacity .2s ease
}
.nav-backdrop.is-visible {
    opacity:1
}
.nav-is-open {
    overflow:hidden
}

/* Keep the public navigation header above its page backdrop while open.
   The header creates a stacking context, so the navigation cannot escape
   a lower header z-index even when the navigation itself has z-index:101. */
body.nav-is-open .site-header {
    z-index:100
}
.site-footer h2 {
    margin:0 0 1rem;
    color:#fff;
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding-top:1.5rem;
    padding-bottom:2rem;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.52);
    font-size:.82rem
}
.marketing-hero {
    position:relative;
    overflow:hidden;
    padding:8rem 0 4rem;
    background:radial-gradient(circle at 50% 15%,rgba(112,83,255,.2),transparent 42%)
}
.marketing-hero__inner {
    max-width:820px;
    text-align:center
}
.marketing-hero h1 {
    margin:.75rem 0 1rem;
    font-size:clamp(2.7rem,7vw,5.5rem);
    line-height:.98;
    letter-spacing:-.055em
}
.marketing-hero p {
    max-width:720px;
    margin:0 auto 2rem;
    color:var(--muted,#a9aec2);
    font-size:clamp(1rem,2vw,1.25rem);
    line-height:1.7
}
.placeholder-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.25rem
}
.placeholder-grid .feature-card h2 {
    font-size:1.18rem
}
.public-skeleton {
    border-radius:1rem;
    background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));
    background-size:200% 100%;
    animation:public-skeleton 1.4s linear infinite
}
@keyframes public-skeleton {
    to {
        background-position:-200% 0
    }
}
@media(max-width:900px) {
    .header-actions {
        display:none
    }
    .nav-toggle {
        display:flex;
        position:relative;
        z-index:102
    }
    .primary-nav {
        position:fixed;
        inset:auto 14px auto auto;
        top:var(--public-nav-top,84px);
        z-index:101;
        width:min(calc(100vw - 28px),360px);
        height:auto;
        max-height:calc(100dvh - var(--public-nav-top,84px) - 14px);
        padding:1rem;
        overflow-y:auto;
        overscroll-behavior:contain;
        display:flex;
        align-items:stretch;
        flex-direction:column;
        gap:.35rem;
        background:rgba(11,14,24,.98);
        border:1px solid rgba(255,255,255,.12);
        border-radius:1rem;
        box-shadow:0 24px 70px rgba(0,0,0,.55);
        opacity:0;
        transform:translateY(-10px) scale(.98);
        transform-origin:top right;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .18s ease,transform .18s ease,visibility .18s
    }
    .primary-nav.is-open {
        opacity:1;
        transform:translateY(0) scale(1);
        visibility:visible;
        pointer-events:auto
    }
    .primary-nav>a {
        padding:1rem;
        border-radius:.75rem;
        font-size:1.05rem
    }
    .primary-nav>a:hover,.primary-nav>a:focus-visible {
        background:rgba(255,255,255,.06)
    }
    .primary-nav a.is-active::after {
        display:none
    }
    .mobile-nav-heading {
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin-bottom:.75rem;
        padding-bottom:1rem;
        border-bottom:1px solid rgba(255,255,255,.09)
    }
    .mobile-nav-heading button {
        width:2.5rem;
        height:2.5rem;
        border:0;
        border-radius:.65rem;
        background:rgba(255,255,255,.07);
        color:#fff;
        font-size:1.6rem
    }
    .mobile-nav-actions {
        display:grid;
        gap:.65rem;
        margin-top:.35rem;
        padding-top:1rem;
        border-top:1px solid rgba(255,255,255,.09)
    }
    .mobile-nav-actions .button {
        justify-content:center
    }
    .placeholder-grid {
        grid-template-columns:1fr
    }
    .footer-bottom {
        flex-direction:column
    }
    .release-banner__link {
        display:none
    }
}
@media(prefers-reduced-motion:reduce) {
    .skip-link,.primary-nav,.nav-backdrop,.public-skeleton {
        transition:none;
        animation:none!important;
        scroll-behavior:auto!important
    }
}
/* Phase 12.1.2 — complete home experience */
.home-experience {
    overflow-x:hidden
}
.home-hero {
    position:relative;
    min-height:820px;
    padding:96px 0 110px;
    overflow:hidden
}
.home-hero__glow {
    position:absolute;
    width:740px;
    height:740px;
    right:-180px;
    top:-270px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(123,55,255,.28),rgba(31,15,75,.08) 45%,transparent 70%);
    filter:blur(10px);
    pointer-events:none
}
.home-hero__grid {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(560px,1.35fr);
    align-items:center;
    gap:58px
}
.home-hero__copy {
    position:relative;
    z-index:2
}
.home-hero h1 {
    max-width:700px;
    margin:18px 0 24px;
    font-size:clamp(3.7rem,6.4vw,6.65rem);
    line-height:.91;
    letter-spacing:-.068em
}
.home-hero h1 span,.home-section-heading h2 span {
    background:linear-gradient(100deg,#b980ff,#7a4cff 55%,#45a2ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent
}
.home-hero__copy>p {
    max-width:660px;
    margin:0;
    color:#b8bed0;
    font-size:1.14rem;
    line-height:1.75
}
.home-hero__proof {
    display:flex;
    flex-wrap:wrap;
    gap:12px 22px;
    margin-top:24px;
    color:#afb6c8;
    font-size:.83rem
}
.home-hero__proof span {
    display:inline-flex;
    align-items:center;
    gap:7px
}
.home-hero__proof i {
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(68,211,113,.12);
    color:#57dd7c;
    font-style:normal;
    font-size:.7rem
}
.platform-stage {
    position:relative;
    border:1px solid rgba(164,130,255,.25);
    border-radius:20px;
    background:rgba(9,12,22,.84);
    box-shadow:0 42px 110px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset;
    transform:perspective(1300px) rotateY(-4deg) rotateX(1deg);
    transform-origin:center left
}
.platform-stage::before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(130deg,rgba(255,255,255,.14),transparent 25%,transparent 72%,rgba(118,63,255,.18));
    pointer-events:none
}
.platform-stage__chrome {
    height:48px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#8f96ab;
    font-size:.7rem
}
.platform-stage__chrome>span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3c4150
}
.platform-stage__chrome strong {
    margin-left:10px;
    font-weight:650
}
.platform-stage__chrome em {
    margin-left:auto;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(67,210,103,.1);
    color:#64dc82;
    font-style:normal
}
.platform-stage__body {
    height:530px;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 168px;
    overflow:hidden
}
.platform-rail {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:11px;
    padding:13px 8px;
    border-right:1px solid rgba(255,255,255,.07);
    background:#090c15
}
.platform-rail b,.platform-rail span {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:8px
}
.platform-rail b {
    margin-bottom:8px;
    background:linear-gradient(145deg,#a557ff,#651fff);
    color:white
}
.platform-rail span {
    color:#747c91
}
.platform-rail span.is-active {
    background:rgba(133,73,255,.16);
    color:#b88bff
}
.platform-workspace {
    min-width:0;
    background:#101421
}
.platform-toolbar {
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 13px;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-size:.65rem
}
.platform-toolbar>div {
    display:flex;
    align-items:center;
    gap:6px
}
.platform-toolbar span {
    padding:5px 7px;
    border-radius:5px;
    background:rgba(255,255,255,.04);
    color:#8e96a9
}
.platform-toolbar button,.story-window__bar button {
    border:0;
    border-radius:5px;
    background:#41c968;
    color:#06120a;
    font-weight:800;
    padding:6px 9px
}
.platform-canvas {
    margin:14px;
    padding:15px;
    border-radius:8px;
    background:#060911;
    box-shadow:0 12px 35px rgba(0,0,0,.35)
}
.canvas-site-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#7f8799;
    font-size:.57rem
}
.canvas-site-nav strong {
    color:#fff;
    letter-spacing:.13em
}
.canvas-hero-card {
    min-height:250px;
    margin-top:14px;
    padding:48px 34px 32px;
    border-radius:8px;
    background:radial-gradient(circle at 75% 20%,rgba(80,46,160,.55),transparent 35%),linear-gradient(135deg,#0e1322,#090b13);
    border:1px solid rgba(144,94,255,.19)
}
.canvas-hero-card small {
    color:#9e71ff;
    font-size:.54rem;
    letter-spacing:.15em
}
.canvas-hero-card h2 {
    margin:8px 0;
    font-size:2rem;
    line-height:1.02;
    letter-spacing:-.05em
}
.canvas-hero-card h2 span {
    color:#9d69ff
}
.canvas-hero-card p {
    max-width:320px;
    color:#8991a5;
    font-size:.65rem
}
.canvas-hero-card div {
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:16px;
    color:#b198ff;
    font-size:.6rem
}
.canvas-hero-card button {
    padding:8px 11px;
    border:0;
    border-radius:5px;
    background:#7f42ff;
    color:#fff;
    font-size:.58rem
}
.canvas-card-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:10px
}
.canvas-card-row i {
    height:48px;
    border-radius:6px;
    background:linear-gradient(135deg,#111827,#151022);
    border:1px solid rgba(255,255,255,.05)
}
.platform-inspector {
    padding:14px 11px;
    border-left:1px solid rgba(255,255,255,.07);
    background:#0a0d16;
    color:#9199ad;
    font-size:.6rem
}
.platform-inspector>strong {
    color:#fff
}
.inspector-tabs {
    display:flex;
    gap:12px;
    margin:13px 0 16px;
    border-bottom:1px solid rgba(255,255,255,.06)
}
.inspector-tabs span {
    padding-bottom:7px
}
.inspector-tabs span.active {
    color:#b68cff;
    border-bottom:1px solid #8b4fff
}
.platform-inspector label {
    display:block;
    margin:9px 0 4px
}
.inspector-field,.inspector-pills span {
    padding:7px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:5px;
    background:#111522
}
.inspector-field i {
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:2px;
    background:#090b15;
    border:1px solid #5d6370
}
.inspector-pills {
    display:flex;
    gap:5px
}
.inspector-pills span {
    flex:1
}
.inspector-ai {
    margin-top:20px;
    padding:10px;
    border:1px solid rgba(143,78,255,.24);
    border-radius:7px;
    background:rgba(112,47,255,.08)
}
.inspector-ai b,.inspector-ai small {
    display:block
}
.inspector-ai b {
    color:#bd91ff
}
.inspector-ai small {
    margin-top:4px
}
.floating-status {
    position:absolute;
    display:flex;
    align-items:center;
    gap:9px;
    min-width:172px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:11px;
    background:rgba(12,16,28,.96);
    box-shadow:0 16px 45px rgba(0,0,0,.4);
    font-size:.66rem
}
.floating-status>span {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:8px
}
.floating-status strong,.floating-status small {
    display:block
}
.floating-status small {
    color:#8991a5
}
.floating-status--commerce {
    left:-44px;
    bottom:62px
}
.floating-status--commerce>span {
    background:rgba(66,211,104,.12);
    color:#57dc7c
}
.floating-status--ai {
    right:-26px;
    top:92px
}
.floating-status--ai>span {
    background:rgba(142,77,255,.15);
    color:#b88cff
}
.platform-strip {
    border-block:1px solid rgba(255,255,255,.06);
    background:rgba(8,11,19,.72)
}
.platform-strip__inner {
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    color:#9aa1b4;
    font-size:.75rem;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.08em
}
.platform-strip__inner i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:#7341d8
}
.home-intro {
    padding-top:120px
}
.home-section-heading {
    max-width:790px;
    margin-inline:auto;
    text-align:center
}
.home-section-heading h2 {
    font-size:clamp(2.5rem,5vw,4.8rem);
    line-height:1;
    letter-spacing:-.055em
}
.home-section-heading>p {
    max-width:660px;
    margin:20px auto 0;
    color:#9da4b7;
    font-size:1.04rem;
    line-height:1.75
}
.product-story {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(480px,1.22fr);
    align-items:center;
    gap:75px;
    margin-top:130px
}
.product-story:nth-of-type(3) {
    grid-template-columns:minmax(480px,1.22fr) minmax(0,.78fr)
}
.product-story:nth-of-type(3) .product-story__copy {
    order:2
}
.product-story:nth-of-type(3) .story-visual {
    order:1
}
.product-story__copy {
    position:relative
}
.product-story__number {
    position:absolute;
    right:0;
    top:-42px;
    color:rgba(255,255,255,.035);
    font-size:6.5rem;
    font-weight:900;
    line-height:1
}
.product-story__label {
    margin:14px 0 8px;
    color:#b691ff;
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase
}
.product-story h3 {
    margin:0;
    font-size:clamp(2rem,3.6vw,3.45rem);
    line-height:1.04;
    letter-spacing:-.05em
}
.product-story__copy>p:not(.product-story__label) {
    color:#a2a9bb;
    line-height:1.78
}
.product-story ul {
    display:grid;
    gap:10px;
    margin:22px 0 27px;
    padding:0;
    list-style:none;
    color:#d6d9e4;
    font-size:.88rem
}
.product-story li {
    display:flex;
    gap:9px
}
.product-story li::before {
    content:"✓";
    color:#53d978
}
.story-visual {
    position:relative;
    min-height:430px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:radial-gradient(circle at 80% 20%,rgba(119,54,255,.14),transparent 36%),#090c15;
    box-shadow:0 35px 100px rgba(0,0,0,.34);
    overflow:hidden
}
.story-window {
    position:absolute;
    inset:36px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:#0c101b;
    box-shadow:0 20px 50px rgba(0,0,0,.4)
}
.story-window__bar {
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 13px;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#858da0;
    font-size:.65rem
}
.story-window__bar b {
    color:#fff
}
.story-window__body {
    height:calc(100% - 48px);
    display:grid;
    grid-template-columns:120px 1fr
}
.component-list {
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:12px;
    border-right:1px solid rgba(255,255,255,.07);
    font-size:.58rem;
    color:#939bad
}
.component-list strong {
    margin-top:4px;
    color:#5f687d;
    font-size:.48rem;
    letter-spacing:.12em
}
.component-list span {
    padding:7px;
    border-radius:5px;
    background:rgba(255,255,255,.025)
}
.mini-page {
    margin:20px;
    padding:44px 25px;
    border:1px solid rgba(154,104,255,.25);
    border-radius:8px;
    background:radial-gradient(circle at 80% 15%,rgba(111,44,219,.4),transparent 35%),#070a11
}
.mini-page small {
    color:#9a71ed;
    font-size:.48rem
}
.mini-page h4 {
    margin:9px 0;
    font-size:1.9rem;
    line-height:1.02
}
.mini-page h4 em {
    color:#9866ff;
    font-style:normal
}
.mini-page p {
    max-width:300px;
    color:#858da0;
    font-size:.62rem
}
.mini-page button {
    margin-top:12px;
    padding:7px 10px;
    border:0;
    border-radius:5px;
    background:#7e42ff;
    color:#fff;
    font-size:.55rem
}
.commerce-story-visual {
    padding:38px
}
.commerce-dashboard-card,.commerce-order-card,.commerce-product-card {
    position:relative;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(14,18,31,.96);
    box-shadow:0 20px 55px rgba(0,0,0,.35)
}
.commerce-dashboard-card {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    min-height:145px;
    padding:24px
}
.commerce-dashboard-card small,.commerce-dashboard-card strong,.commerce-dashboard-card span {
    display:block
}
.commerce-dashboard-card small {
    color:#8d95a8
}
.commerce-dashboard-card strong {
    font-size:2.2rem
}
.commerce-dashboard-card span {
    color:#52d777;
    font-size:.65rem
}
.spark-bars {
    height:75px;
    display:flex;
    align-items:flex-end;
    gap:7px
}
.spark-bars i {
    width:11px;
    border-radius:4px 4px 0 0;
    background:linear-gradient(#a36dff,#6e32ee)
}
.spark-bars i:nth-child(1) {
    height:26%
}
.spark-bars i:nth-child(2) {
    height:42%
}
.spark-bars i:nth-child(3) {
    height:35%
}
.spark-bars i:nth-child(4) {
    height:62%
}
.spark-bars i:nth-child(5) {
    height:56%
}
.spark-bars i:nth-child(6) {
    height:82%
}
.spark-bars i:nth-child(7) {
    height:100%
}
.commerce-order-card {
    z-index:2;
    display:flex;
    align-items:center;
    gap:13px;
    margin:-8px 18px 0;
    padding:16px
}
.order-check {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border-radius:10px;
    background:rgba(65,207,103,.12);
    color:#55dd7b
}
.commerce-order-card small,.commerce-order-card strong,.commerce-order-card p {
    display:block;
    margin:0
}
.commerce-order-card small {
    color:#767f92;
    font-size:.52rem
}
.commerce-order-card strong {
    font-size:.78rem
}
.commerce-order-card p {
    color:#929aab;
    font-size:.6rem
}
.commerce-order-card em {
    margin-left:auto;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(67,210,103,.1);
    color:#60db80;
    font-style:normal;
    font-size:.55rem
}
.commerce-product-card {
    display:flex;
    align-items:center;
    gap:13px;
    margin:14px 34px 0;
    padding:14px
}
.product-art {
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:10px;
    background:linear-gradient(145deg,#8e51ff,#30106d);
    font-weight:900
}
.commerce-product-card small,.commerce-product-card strong,.commerce-product-card p {
    display:block;
    margin:0
}
.commerce-product-card small {
    color:#7e8798;
    font-size:.52rem
}
.commerce-product-card strong {
    font-size:.72rem
}
.commerce-product-card p {
    color:#b88cff;
    font-size:.65rem
}
.commerce-product-card button {
    margin-left:auto;
    border:0;
    border-radius:6px;
    padding:7px 9px;
    background:#7840f1;
    color:#fff;
    font-size:.55rem
}
.ai-story-visual {
    padding:36px
}
.ai-prompt-card,.ai-review-card {
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:#0e1220;
    box-shadow:0 20px 55px rgba(0,0,0,.35)
}
.ai-prompt-card {
    max-width:390px;
    padding:20px
}
.ai-prompt-card>div {
    display:flex;
    align-items:center;
    gap:8px
}
.ai-prompt-card>div span {
    color:#b98cff
}
.ai-prompt-card>div em {
    margin-left:auto;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(154,100,255,.12);
    color:#b98cff;
    font-style:normal;
    font-size:.55rem
}
.ai-prompt-card p {
    padding:14px;
    border-radius:8px;
    background:#090c15;
    color:#a7aec0;
    font-size:.72rem;
    line-height:1.6
}
.ai-prompt-card button {
    width:100%;
    padding:9px;
    border:0;
    border-radius:7px;
    background:linear-gradient(135deg,#9352ff,#6b2bdc);
    color:#fff;
    font-size:.65rem
}
.ai-review-card {
    position:relative;
    z-index:2;
    margin:-6px 0 0 46px;
    padding:20px
}
.ai-review-card>small {
    color:#9b70ed;
    font-size:.52rem;
    letter-spacing:.13em
}
.review-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px
}
.review-columns>div {
    padding:12px;
    border-radius:8px;
    background:#090c15
}
.review-columns span {
    color:#788195;
    font-size:.55rem
}
.review-columns p {
    margin:7px 0;
    color:#d7dbe5;
    font-size:.7rem;
    line-height:1.5
}
.review-columns>div:last-child {
    border:1px solid rgba(151,91,255,.25);
    background:rgba(119,53,230,.08)
}
.review-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px
}
.review-actions button {
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:6px;
    background:#121725;
    color:#aab1c2;
    font-size:.56rem
}
.review-actions button:last-child {
    border-color:#7540e6;
    background:#7540e6;
    color:#fff
}
.connected-section {
    padding-top:120px
}
.connected-panel {
    padding:60px;
    border:1px solid rgba(143,92,255,.17);
    border-radius:26px;
    background:radial-gradient(circle at 80% 10%,rgba(112,47,230,.18),transparent 38%),linear-gradient(140deg,#111523,#090c15);
    box-shadow:0 35px 100px rgba(0,0,0,.3)
}
.connected-panel__copy {
    max-width:760px
}
.connected-panel h2 {
    margin:10px 0 15px;
    font-size:clamp(2.3rem,4.4vw,4.2rem);
    line-height:1;
    letter-spacing:-.055em
}
.connected-panel p {
    color:#a0a8ba
}
.workflow-map {
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:center;
    gap:13px;
    margin-top:46px
}
.workflow-map>div {
    padding:18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.025)
}
.workflow-map span {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    margin-bottom:15px;
    border-radius:8px;
    background:rgba(130,69,255,.14);
    color:#b689ff;
    font-size:.7rem;
    font-weight:800
}
.workflow-map strong,.workflow-map small {
    display:block
}
.workflow-map small {
    margin-top:4px;
    color:#7f879a;
    font-size:.65rem
}
.workflow-map>b {
    color:#6842af
}
.reliability-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:54px
}
.reliability-grid article {
    padding:25px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;
    background:#0b0f19
}
.reliability-grid article>span {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:11px;
    background:rgba(127,67,255,.11);
    color:#af82ff
}
.reliability-grid h3 {
    font-size:1rem
}
.reliability-grid p {
    color:#939bad;
    font-size:.78rem;
    line-height:1.65
}
.home-cta {
    padding-bottom:130px
}
.home-cta__panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:58px 60px;
    border-radius:25px;
    background:linear-gradient(120deg,#6c25de,#8b3df2 48%,#4f20be);
    box-shadow:0 30px 90px rgba(91,35,205,.34)
}
.home-cta__panel h2 {
    max-width:700px;
    margin:8px 0 10px;
    font-size:clamp(2.3rem,4.3vw,4rem);
    line-height:1;
    letter-spacing:-.05em
}
.home-cta__panel p {
    margin:0;
    color:rgba(255,255,255,.76)
}
.home-cta__actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:190px
}
.button-ghost-light {
    border-color:rgba(255,255,255,.25);
    color:#fff;
    background:rgba(255,255,255,.06)
}
[data-reveal] {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease,transform .7s ease
}
[data-reveal].is-revealed {
    opacity:1;
    transform:none
}
@media(max-width:1100px) {
    .home-hero__grid {
        grid-template-columns:1fr
    }
    .home-hero__copy {
        text-align:center
    }
    .home-hero__copy>p {
        margin-inline:auto
    }
    .home-hero .hero-actions,.home-hero__proof {
        justify-content:center
    }
    .platform-stage {
        max-width:820px;
        margin-inline:auto;
        transform:none
    }
    .product-story,.product-story:nth-of-type(3) {
        grid-template-columns:1fr;
        gap:38px
    }
    .product-story:nth-of-type(3) .product-story__copy,.product-story:nth-of-type(3) .story-visual {
        order:initial
    }
    .reliability-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:760px) {
    .home-hero {
        min-height:auto;
        padding:62px 0 75px
    }
    .home-hero h1 {
        font-size:3.65rem
    }
    .platform-stage__body {
        height:420px;
        grid-template-columns:42px 1fr
    }
    .platform-inspector {
        display:none
    }
    .platform-toolbar span {
        display:none
    }
    .canvas-hero-card {
        padding:32px 20px
    }
    .floating-status--commerce {
        left:8px;
        bottom:18px
    }
    .floating-status--ai {
        right:8px;
        top:70px
    }
    .platform-strip__inner {
        justify-content:center;
        flex-wrap:wrap;
        padding:18px 0
    }
    .platform-strip__inner i {
        display:none
    }
    .product-story {
        margin-top:85px
    }
    .story-visual {
        min-height:360px
    }
    .story-window {
        inset:20px
    }
    .connected-panel {
        padding:38px 24px
    }
    .workflow-map {
        grid-template-columns:1fr 1fr
    }
    .workflow-map>b {
        display:none
    }
    .home-cta__panel {
        align-items:flex-start;
        flex-direction:column;
        padding:42px 28px
    }
    .home-cta__actions {
        width:100%
    }
    .home-cta__actions .button {
        width:100%
    }
}
@media(max-width:520px) {
    .home-hero h1 {
        font-size:2.95rem
    }
    .home-hero__proof {
        align-items:flex-start;
        flex-direction:column;
        margin-left:20px
    }
    .platform-stage__body {
        height:365px;
        grid-template-columns:1fr
    }
    .platform-rail {
        display:none
    }
    .platform-stage__chrome strong {
        display:none
    }
    .platform-canvas {
        margin:9px;
        padding:10px
    }
    .canvas-hero-card {
        min-height:215px
    }
    .canvas-hero-card h2 {
        font-size:1.5rem
    }
    .floating-status {
        display:none
    }
    .story-window__body {
        grid-template-columns:1fr
    }
    .component-list {
        display:none
    }
    .mini-page {
        margin:14px
    }
    .commerce-story-visual,.ai-story-visual {
        padding:20px
    }
    .commerce-dashboard-card {
        padding:18px
    }
    .commerce-order-card {
        margin-inline:6px
    }
    .commerce-product-card {
        margin-inline:12px
    }
    .review-columns {
        grid-template-columns:1fr
    }
    .ai-review-card {
        margin-left:12px
    }
    .reliability-grid {
        grid-template-columns:1fr
    }
    .workflow-map {
        grid-template-columns:1fr
    }
    .home-intro {
        padding-top:80px
    }
}
@media(prefers-reduced-motion:reduce) {
    [data-reveal] {
        opacity:1;
        transform:none;
        transition:none
    }
    .platform-stage {
        transform:none
    }
}
/* Phase 12.1.3 — pricing experience */
.pricing-page {
    overflow-x:hidden
}
.pricing-hero {
    padding:8rem 0 4.5rem;
    background:radial-gradient(circle at 50% 5%,rgba(120,71,255,.23),transparent 43%)
}
.pricing-hero__inner {
    max-width:850px;
    text-align:center
}
.pricing-hero h1 {
    margin:.8rem 0 1.25rem;
    font-size:clamp(3rem,7vw,5.8rem);
    line-height:.96;
    letter-spacing:-.06em
}
.pricing-hero p {
    max-width:720px;
    margin:0 auto;
    color:#aab1c4;
    font-size:1.12rem;
    line-height:1.75
}
.alpha-pricing-note {
    display:flex;
    align-items:center;
    gap:.8rem;
    max-width:720px;
    margin:2rem auto 0;
    padding:.85rem 1rem;
    border:1px solid rgba(157,111,255,.22);
    border-radius:.9rem;
    background:rgba(119,64,225,.08);
    text-align:left
}
.alpha-pricing-note strong {
    flex:0 0 auto;
    color:#c6a4ff;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.08em
}
.alpha-pricing-note span {
    color:#939caf;
    font-size:.8rem;
    line-height:1.45
}
.pricing-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:2rem;
    margin-bottom:2.5rem
}
.pricing-heading h2 {
    max-width:680px;
    margin:.6rem 0 0;
    font-size:clamp(2rem,4.4vw,3.7rem);
    line-height:1;
    letter-spacing:-.05em
}
.pricing-heading>p {
    max-width:390px;
    margin:0;
    color:#8f98ab;
    line-height:1.65
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem
}
.pricing-card {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:1.65rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.2rem;
    background:linear-gradient(160deg,rgba(18,22,37,.98),rgba(9,12,21,.98));
    box-shadow:0 20px 65px rgba(0,0,0,.22)
}
.pricing-card.is-featured {
    border-color:rgba(153,95,255,.58);
    box-shadow:0 28px 80px rgba(87,37,180,.25),0 0 0 1px rgba(146,82,255,.12) inset;
    transform:translateY(-10px)
}
.pricing-card__badge {
    position:absolute;
    top:0;
    right:1.25rem;
    transform:translateY(-50%);
    padding:.4rem .7rem;
    border-radius:999px;
    background:linear-gradient(135deg,#9a5cff,#6d30de);
    color:#fff;
    font-size:.66rem;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase
}
.pricing-card__header h3 {
    margin:0;
    font-size:1.28rem
}
.pricing-card__header p {
    min-height:5rem;
    margin:.75rem 0 0;
    color:#929bad;
    font-size:.82rem;
    line-height:1.6
}
.pricing-card__price {
    min-height:5.5rem;
    margin:1.4rem 0;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:.35rem
}
.pricing-card__price strong {
    font-size:2.75rem;
    line-height:1;
    letter-spacing:-.05em
}
.pricing-card__price sup {
    font-size:1rem;
    vertical-align:top
}
.pricing-card__price span {
    color:#7f899d;
    font-size:.78rem
}
.pricing-card__button {
    width:100%;
    justify-content:center
}
.pricing-card ul {
    display:grid;
    gap:.75rem;
    margin:1.5rem 0 0;
    padding:1.4rem 0 0;
    border-top:1px solid rgba(255,255,255,.07);
    list-style:none
}
.pricing-card li {
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    color:#b2b8c8;
    font-size:.78rem;
    line-height:1.45
}
.pricing-card li span {
    color:#58dc7e;
    font-weight:900
}
.commerce-ready {
    display:block;
    margin-top:auto;
    padding-top:1.2rem;
    color:#68da88;
    font-size:.67rem
}
.pricing-comparison {
    padding-top:5rem
}
.comparison-scroll {
    overflow-x:auto;
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.15rem;
    background:#0b0f19
}
.comparison-scroll:focus-visible {
    outline:2px solid #9c6aff;
    outline-offset:3px
}
.comparison-scroll table {
    width:100%;
    min-width:760px;
    border-collapse:collapse
}
.comparison-scroll th,.comparison-scroll td {
    padding:1.1rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.065);
    text-align:left
}
.comparison-scroll thead th {
    background:rgba(255,255,255,.025);
    color:#fff;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.07em
}
.comparison-scroll tbody th {
    color:#d7dbe5;
    font-size:.82rem
}
.comparison-scroll td {
    color:#929bad;
    font-size:.78rem
}
.comparison-scroll tr:last-child th,.comparison-scroll tr:last-child td {
    border-bottom:0
}
.faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem
}
.faq-grid details {
    padding:1.2rem 1.25rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:1rem;
    background:#0b0f19
}
.faq-grid summary {
    cursor:pointer;
    color:#fff;
    font-weight:750
}
.faq-grid p {
    margin:.9rem 0 0;
    color:#929bad;
    font-size:.83rem;
    line-height:1.65
}
.pricing-cta {
    padding-bottom:8rem
}
.pricing-cta__panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    padding:3rem;
    border-radius:1.4rem;
    background:linear-gradient(120deg,#6424d4,#8d40ef 58%,#4b1fb4);
    box-shadow:0 30px 90px rgba(80,28,177,.3)
}
.pricing-cta__panel h2 {
    max-width:720px;
    margin:.6rem 0 .7rem;
    font-size:clamp(2rem,4vw,3.6rem);
    line-height:1;
    letter-spacing:-.05em
}
.pricing-cta__panel p {
    margin:0;
    color:rgba(255,255,255,.75)
}
@media(max-width:1100px) {
    .pricing-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .pricing-card.is-featured {
        transform:none
    }
    .pricing-card__header p {
        min-height:auto
    }
}
@media(max-width:760px) {
    .pricing-hero {
        padding:5.5rem 0 3.5rem
    }
    .alpha-pricing-note,.pricing-heading,.pricing-cta__panel {
        align-items:flex-start;
        flex-direction:column
    }
    .pricing-grid,.faq-grid {
        grid-template-columns:1fr
    }
    .pricing-heading>p {
        max-width:none
    }
    .pricing-cta__panel {
        padding:2rem
    }
    .pricing-cta__panel .button {
        width:100%
    }
    .pricing-card__price {
        min-height:auto
    }
}
/* Phase 12.1.4 — Templates Gallery */
.templates-hero {
    padding:110px 0 78px;
    background:radial-gradient(circle at 76% 28%,rgba(141,67,255,.22),transparent 24rem)
}
.templates-hero__inner {
    max-width:900px;
    text-align:center
}
.templates-hero h1 {
    margin:18px 0 20px;
    font-size:clamp(48px,7vw,84px);
    line-height:.98;
    letter-spacing:-.065em
}
.templates-hero p {
    max-width:720px;
    margin:0 auto;
    color:var(--muted);
    font-size:19px
}
.templates-hero__actions {
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:32px
}
.template-proof {
    display:flex;
    justify-content:center;
    gap:12px 32px;
    flex-wrap:wrap;
    margin-top:42px;
    color:var(--muted);
    font-size:13px
}
.template-proof strong {
    color:#fff;
    font-size:16px
}
.template-gallery__heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px
}
.template-gallery__heading h2 {
    margin:8px 0 0;
    font-size:clamp(34px,5vw,54px);
    line-height:1.03;
    letter-spacing:-.05em
}
.template-gallery__heading>p {
    max-width:420px;
    color:var(--muted)
}
.template-tools {
    display:flex;
    align-items:center;
    gap:16px;
    justify-content:space-between;
    margin-bottom:14px
}
.template-search {
    min-width:280px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel)
}
.template-search input {
    width:100%;
    height:46px;
    border:0;
    outline:0;
    background:transparent;
    color:#fff
}
.template-filters {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.template-filters button {
    padding:9px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    background:transparent;
    color:var(--muted);
    cursor:pointer
}
.template-filters button:hover,.template-filters button.is-active {
    border-color:rgba(179,108,255,.62);
    background:rgba(141,67,255,.13);
    color:#fff
}
.template-results {
    margin:0 0 20px;
    color:var(--muted);
    font-size:13px
}
.template-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.template-card {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(17,22,38,.94),rgba(9,13,23,.94));
    box-shadow:0 20px 55px rgba(0,0,0,.2);
    transition:transform .25s ease,border-color .25s ease
}
.template-card:hover {
    transform:translateY(-5px);
    border-color:rgba(179,108,255,.42)
}
.template-card[hidden] {
    display:none
}
.template-preview {
    position:relative;
    height:250px;
    padding:18px;
    background:radial-gradient(circle at 80% 15%,var(--preview-glow),transparent 45%),#0a0d15
}
.template-preview--violet,.template-preview--purple {
    --preview:#8d43ff;
    --preview-glow:rgba(141,67,255,.42)
}
.template-preview--blue,.template-preview--indigo {
    --preview:#3887ff;
    --preview-glow:rgba(56,135,255,.38)
}
.template-preview--amber,.template-preview--orange {
    --preview:#ff8a24;
    --preview-glow:rgba(255,122,26,.35)
}
.template-preview--rose,.template-preview--pink {
    --preview:#ff5fa0;
    --preview-glow:rgba(255,95,160,.34)
}
.template-preview--green,.template-preview--lime {
    --preview:#43d267;
    --preview-glow:rgba(67,210,103,.32)
}
.template-preview--cyan {
    --preview:#25c2d9;
    --preview-glow:rgba(37,194,217,.34)
}
.template-preview--slate {
    --preview:#9ba9c7;
    --preview-glow:rgba(155,169,199,.28)
}
.template-preview__chrome {
    display:flex;
    gap:5px
}
.template-preview__chrome i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.25)
}
.template-preview__nav {
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:14px
}
.template-preview__nav b {
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:5px;
    background:var(--preview);
    font-size:9px
}
.template-preview__nav span {
    width:34px;
    height:4px;
    border-radius:4px;
    background:rgba(255,255,255,.17)
}
.template-preview__hero {
    width:76%;
    margin:34px auto 0;
    text-align:center
}
.template-preview__hero small {
    color:var(--preview);
    font-size:7px;
    text-transform:uppercase;
    letter-spacing:.15em
}
.template-preview__hero strong {
    display:block;
    margin:7px 0;
    font-size:19px;
    line-height:1.05
}
.template-preview__hero span {
    display:block;
    width:74%;
    height:5px;
    margin:0 auto 12px;
    border-radius:5px;
    background:rgba(255,255,255,.17)
}
.template-preview__hero button {
    min-height:22px;
    padding:0 10px;
    border:0;
    border-radius:5px;
    background:var(--preview);
    color:#fff;
    font-size:7px
}
.template-preview__blocks {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:28px
}
.template-preview__blocks i {
    height:38px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:6px;
    background:rgba(255,255,255,.045)
}
.template-card__body {
    padding:22px
}
.template-card__meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--preview,var(--purple-2));
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em
}
.template-card__meta em {
    padding:4px 7px;
    border-radius:999px;
    background:rgba(141,67,255,.14);
    color:#caa8ff;
    font-style:normal
}
.template-card h3 {
    margin:10px 0 7px;
    font-size:23px
}
.template-card p {
    min-height:66px;
    margin:0;
    color:var(--muted);
    font-size:14px
}
.template-card ul {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin:17px 0 20px;
    padding:0;
    list-style:none
}
.template-card li {
    padding:5px 8px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#c8ccda;
    font-size:10px
}
.template-card__actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.template-card__actions .button {
    min-height:40px;
    padding-inline:14px;
    font-size:12px
}
.template-card__actions>span {
    color:var(--muted);
    font-size:10px
}
.template-empty {
    text-align:center;
    padding:60px;
    border:1px dashed var(--line);
    border-radius:20px
}
.template-empty strong {
    font-size:22px
}
.template-empty p {
    color:var(--muted)
}
.template-process {
    background:rgba(9,13,23,.72)
}
.template-process__grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.template-process article {
    padding:28px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel)
}
.template-process article>span {
    color:var(--purple-2);
    font-size:12px;
    font-weight:800
}
.template-process h3 {
    margin:14px 0 8px;
    font-size:21px
}
.template-process p {
    margin:0;
    color:var(--muted)
}
.template-cta__panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:44px;
    border-radius:24px;
    background:linear-gradient(125deg,#6e25dd,#371078);
    box-shadow:var(--shadow)
}
.template-cta h2 {
    margin:8px 0;
    font-size:clamp(30px,4vw,46px);
    letter-spacing:-.04em
}
.template-cta p {
    margin:0;
    color:rgba(255,255,255,.78)
}
@media(max-width:980px) {
    .template-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .template-tools {
        align-items:stretch;
        flex-direction:column
    }
    .template-search {
        width:100%
    }
}
@media(max-width:680px) {
    .templates-hero {
        padding-top:76px
    }
    .templates-hero__actions {
        align-items:stretch;
        flex-direction:column
    }
    .template-gallery__heading {
        align-items:start;
        flex-direction:column
    }
    .template-grid,.template-process__grid {
        grid-template-columns:1fr
    }
    .template-preview {
        height:230px
    }
    .template-card p {
        min-height:auto
    }
    .template-cta__panel {
        align-items:flex-start;
        flex-direction:column;
        padding:30px
    }
    .template-filters {
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:5px
    }
    .template-filters button {
        white-space:nowrap
    }
}
/* Phase 12.1.9 — final public UI polish */
:root {
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-standard:cubic-bezier(.2,.7,.2,1);
    --focus-ring:0 0 0 3px rgba(141,67,255,.32);
}
::selection {
    background:rgba(141,67,255,.45);
    color:#fff;
}
html {
    scrollbar-color:rgba(179,108,255,.55) rgba(9,13,23,.6);
}
body {
    min-height:100vh;
    overflow-x:hidden;
}
.page-progress {
    position:fixed;
    inset:0 0 auto;
    z-index:100;
    height:2px;
    pointer-events:none;
    background:transparent;
}
.page-progress span {
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--purple),var(--purple-2),var(--blue));
    box-shadow:0 0 14px rgba(141,67,255,.7);
    transition:transform .08s linear;
}
.button,
.template-card,
.pricing-card,
.marketing-card,
.product-story,
.story-window {
    transition-property:transform,border-color,background-color,box-shadow,color,opacity;
    transition-duration:.24s;
    transition-timing-function:var(--ease-standard);
}
.button {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    -webkit-tap-highlight-color:transparent;
}
.button::after {
    content:"";
    position:absolute;
    inset:-2px;
    z-index:-1;
    opacity:0;
    transform:translateX(-55%);
    background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.19),transparent 75%);
    transition:transform .5s var(--ease-out),opacity .2s ease;
}
.button:hover::after {
    opacity:1;
    transform:translateX(55%);
}
.button:hover {
    transform:translateY(-2px);
}
.button:active {
    transform:translateY(0) scale(.985);
}
.button[aria-busy="true"] {
    cursor:progress;
    opacity:.78;
    pointer-events:none;
}
.button[aria-busy="true"]::before {
    content:"";
    width:14px;
    height:14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:public-button-spin .7s linear infinite;
}
@keyframes public-button-spin {
    to {
        transform:rotate(360deg);
    }
}
.template-card:hover,
.pricing-card:hover,
.marketing-card:hover {
    transform:translateY(-5px);
    border-color:rgba(179,108,255,.36);
    box-shadow:0 24px 54px rgba(0,0,0,.32),0 0 0 1px rgba(141,67,255,.08);
}
[data-reveal] {
    transition-duration:.75s;
    transition-timing-function:var(--ease-out);
}
[data-reveal]:nth-child(2) {
    transition-delay:.06s;
}
[data-reveal]:nth-child(3) {
    transition-delay:.12s;
}
[data-reveal]:nth-child(4) {
    transition-delay:.18s;
}
.public-toast-region {
    position:fixed;
    right:20px;
    bottom:86px;
    z-index:80;
    width:min(360px,calc(100vw - 40px));
    display:grid;
    gap:10px;
    pointer-events:none;
}
.public-toast {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 15px;
    border:1px solid rgba(179,108,255,.28);
    border-radius:14px;
    background:rgba(13,17,28,.94);
    box-shadow:0 18px 50px rgba(0,0,0,.36);
    backdrop-filter:blur(18px);
    color:var(--text);
    animation:public-toast-in .32s var(--ease-out) both;
}
.public-toast.is-leaving {
    animation:public-toast-out .22s ease both;
}
.public-toast strong {
    display:block;
    font-size:14px;
}
.public-toast small {
    display:block;
    margin-top:2px;
    color:var(--muted);
}
@keyframes public-toast-in {
    from {
        opacity:0;
        transform:translateY(10px) scale(.98);
    }
}
@keyframes public-toast-out {
    to {
        opacity:0;
        transform:translateY(8px) scale(.98);
    }
}
.back-to-top {
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:70;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(179,108,255,.28);
    border-radius:14px;
    background:rgba(13,17,28,.9);
    box-shadow:0 14px 38px rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
    color:#fff;
    cursor:pointer;
    transition:opacity .2s ease,transform .25s var(--ease-out),border-color .2s ease;
}
.back-to-top[hidden] {
    display:none;
}
.back-to-top:hover {
    transform:translateY(-3px);
    border-color:rgba(179,108,255,.58);
}
.back-to-top:active {
    transform:translateY(0) scale(.96);
}
.back-to-top:focus-visible {
    outline:none;
    box-shadow:var(--focus-ring),0 14px 38px rgba(0,0,0,.34);
}
.has-js-focus:focus {
    outline:none;
    box-shadow:0 0 0 4px rgba(141,67,255,.22);
    border-radius:8px;
}
@media (max-width:700px) {
    .public-toast-region {
        right:14px;
        bottom:76px;
        width:calc(100vw - 28px);
    }
    .back-to-top {
        right:14px;
        bottom:14px;
        width:44px;
        height:44px;
    }
    .button:hover,.template-card:hover,.pricing-card:hover,.marketing-card:hover {
        transform:none;
    }
}
@media (prefers-reduced-motion:reduce) {
    .page-progress span,
    .button,
    .button::after,
    .template-card,
    .pricing-card,
    .marketing-card,
    .back-to-top,
    .public-toast {
        transition:none!important;
        animation:none!important;
    }
    .button:hover,.template-card:hover,.pricing-card:hover,.marketing-card:hover,.back-to-top:hover {
        transform:none;
    }
}

/* Phase F.1 — WAVE accessibility refinements.
   Preserve the visual design while improving small secondary copy and dark-theme contrast. */
.release-banner__badge,
.release-banner__thanks,
.eyebrow,
.section-kicker {
    font-size:13px;
}

.release-banner__thanks {
    color:rgba(255,255,255,.86);
}

.assurance-list,
.studio-topbar,
.studio-library,
.studio-inspector,
.studio-group-label,
.studio-items,
.studio-search,
.studio-canvas .field {
    font-size:13px;
}

.assurance-list {
    color:#b8bfd0;
}

.studio-topbar {
    color:#e0e3eb;
}

.studio-library,
.studio-inspector {
    color:#c4cad8;
}

.studio-group-label {
    color:#aeb7ca;
    letter-spacing:.04em;
}

.studio-search,
.studio-canvas .field {
    color:#b8c0d1;
}

/* Keep compact preview labels readable without changing the preview's proportions. */
.studio-panel-title,
.studio-page,
.studio-publish,
.studio-save,
.selection-frame {
    line-height:1.35;
}