:root {
    --color-white: #ffffff;
    --color-black: #0a0a0a;
    --color-navy: #10091f;
    --color-navy-light: #2a1748;
    --color-blue: #7c3aed;
    --color-blue-hover: #6425c7;
    --color-text: #1b2533;
    --color-muted: #667085;
    --color-border: #e4e7ec;
    --color-surface: #f6f8fb;
    --shadow-sm: 0 8px 24px rgba(7, 26, 51, 0.08);
    --shadow-md: 0 18px 45px rgba(7, 26, 51, 0.14);
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --container-width: 1200px;
    --transition: 180ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--color-text);
    background: var(--color-white);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

figure {
    margin: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

main {
    min-height: 55vh;
}

.container {
    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.65rem 1rem;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.45);
    outline-offset: 3px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition),
        border-color var(--transition), transform var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: var(--color-white);
    background: var(--color-blue);
}

.btn-primary:hover {
    background: var(--color-blue-hover);
}

.btn-dark {
    color: var(--color-white);
    background: var(--color-navy);
}

.btn-dark:hover {
    background: var(--color-black);
}

.btn-outline {
    color: var(--color-navy);
    background: transparent;
    border-color: var(--color-navy);
}

.btn-outline:hover {
    color: var(--color-white);
    background: var(--color-navy);
}

.card {
    height: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.card h2,
.card h3 {
    margin-bottom: 0.75rem;
    color: var(--color-navy);
    line-height: 1.25;
}

.card p {
    color: var(--color-muted);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(14px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5rem;
    gap: 2rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-navy);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    gap: 0.65rem;
}

.site-logo img {
    width: 4rem;
    height: 4rem;
    display: block;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
}

.site-logo .site-logo-name {
    color: var(--color-blue);
}

.primary-navigation ul {
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 1.4vw, 1.3rem);
}

.primary-navigation a {
    position: relative;
    display: block;
    padding-block: 1.75rem;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition);
}

.primary-navigation a::after {
    position: absolute;
    right: 0;
    bottom: 1.15rem;
    left: 0;
    height: 2px;
    background: var(--color-blue);
    content: "";
    transform: scaleX(0);
    transition: transform var(--transition);
}

.primary-navigation a:hover,
.primary-navigation a.active {
    color: var(--color-blue);
}

.primary-navigation a:hover::after,
.primary-navigation a.active::after {
    transform: scaleX(1);
}

.primary-navigation .app-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    margin-left: 0.15rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid rgba(55, 48, 163, 0.14);
    border-radius: 999px;
    background: linear-gradient(135deg, #2f2ac8, #7c3aed);
    color: var(--color-white);
    box-shadow: 0 12px 28px rgba(47, 42, 200, 0.18);
}

.primary-navigation .app-nav-link::after {
    display: none;
}

.primary-navigation .app-nav-link:hover {
    color: var(--color-white);
    transform: translateY(-1px);
}

.menu-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.6rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin-block: 4px;
    background: var(--color-navy);
    transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-footer {
    padding: 4.5rem 0 1.5rem;
    color: rgba(255, 255, 255, 0.75);
    background: var(--color-navy);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
}

.footer-logo {
    display: inline-flex;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.footer-logo img {
    width: 3.5rem;
    height: 3.5rem;
}

.footer-logo .site-logo-name {
    color: var(--color-white);
}

.footer-brand p {
    max-width: 31rem;
}

.footer-column h2 {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-size: 1rem;
}

.footer-column address {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-style: normal;
}

.footer-column a {
    transition: color var(--transition);
}

.footer-column a:hover {
    color: var(--color-white);
}

.footer-legal ul {
    display: grid;
    gap: 0.45rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
}

/* Homepage */
.section {
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.eyebrow {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-heading {
    max-width: 42rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.section-heading h2,
.colors-content h2,
.pricing-copy h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.section-heading > p:last-child,
.colors-content > p,
.pricing-copy > p {
    margin-top: 1rem;
    color: var(--color-muted);
    font-size: 1.05rem;
}

.hero {
    position: relative;
    overflow: hidden;
    background: var(--color-navy);
}

.hero::before {
    display: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    min-height: calc(100vh - 5rem);
    padding-block: 5rem;
    gap: clamp(2rem, 7vw, 7rem);
}

.hero-grid > *,
.colors-grid > * {
    min-width: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    max-width: 46rem;
    color: var(--color-white);
    font-size: clamp(3rem, 6.5vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.hero h1 span {
    color: var(--color-blue);
}

.hero-description {
    max-width: 39rem;
    margin-top: 1.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.5rem;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    font-weight: 700;
}

.hero-highlights li::before {
    margin-right: 0.5rem;
    color: var(--color-blue);
    content: "✓";
}

.hero .btn-outline {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.55);
}

.hero .btn-outline:hover {
    color: var(--color-navy);
    background: var(--color-white);
    border-color: var(--color-white);
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 1.5rem;
    box-shadow: 0 2rem 4rem rgba(7, 26, 51, 0.32);
    isolation: isolate;
}

.hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.process-section {
    background: var(--color-white);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.process-card {
    position: relative;
    min-height: 20rem;
    padding: 2rem;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: border-color var(--transition), transform var(--transition);
}

.process-card:hover {
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-4px);
}

.step-number {
    position: absolute;
    top: 0.8rem;
    right: 1.25rem;
    color: rgba(7, 26, 51, 0.06);
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
}

.step-icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 4.5rem;
    color: var(--color-white);
    background: var(--color-blue);
    border-radius: 50%;
    font-weight: 800;
    place-items: center;
}

.process-card h3 {
    margin-bottom: 0.65rem;
    color: var(--color-navy);
    font-size: 1.3rem;
}

.process-card p {
    color: var(--color-muted);
}

.features-section {
    color: var(--color-white);
    background: var(--color-navy);
}

.section-heading-light h2 {
    color: var(--color-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.feature-item {
    padding: 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.feature-item:last-child {
    border-right: 0;
}

.feature-item > span {
    color: #71a8ff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.feature-item h3 {
    margin: 3rem 0 0.75rem;
    font-size: 1.25rem;
}

.feature-item p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
}

.colors-section {
    background: var(--color-surface);
}

.colors-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.color-options {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.color-option {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.color-option div {
    display: grid;
}

.color-option small {
    color: var(--color-muted);
}

.color-swatch {
    width: 2.75rem;
    height: 2.75rem;
    border: 4px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-border);
}

.color-black {
    background: #090b0e;
}

.color-blue {
    background: #102c50;
}

.color-showcase {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 7 / 5;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

.color-showcase img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.pricing-preview {
    background: var(--color-white);
}

.pricing-panel {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
}

.pricing-copy {
    padding: clamp(2rem, 6vw, 5rem);
}

.text-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--color-blue);
    font-weight: 800;
}

.text-link span {
    display: inline-block;
    transition: transform var(--transition);
}

.text-link:hover span {
    transform: translateX(4px);
}

.price-box {
    display: grid;
    align-self: stretch;
    padding: clamp(2rem, 5vw, 4rem);
    color: var(--color-white);
    background: var(--color-navy);
    place-content: center;
}

.price-box > span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.price-box strong {
    margin-block: 0.5rem;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.price-box strong small {
    font-size: 0.45em;
}

.price-box p {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.65);
}

.final-cta {
    position: relative;
    padding: clamp(5rem, 11vw, 9rem) 0;
    overflow: hidden;
    color: var(--color-white);
    background-color: rgba(16, 9, 31, 0.86);
    background-image: url("../images/cta-banner.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.final-cta::before,
.final-cta::after {
    display: none;
}

.final-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    text-align: center;
}

.final-cta .eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.final-cta h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.final-cta p:not(.eyebrow) {
    max-width: 37rem;
    margin: 1.25rem auto 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

.btn-light {
    color: var(--color-navy);
    background: var(--color-white);
}

.btn-light:hover {
    color: var(--color-blue);
}

/* How it works */
.page-hero {
    position: relative;
    padding: clamp(5rem, 11vw, 9rem) 0;
    overflow: hidden;
    text-align: center;
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/page-banner.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.page-hero::before,
.page-hero::after {
    display: none;
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 60rem;
}

.page-hero h1 {
    color: var(--color-white);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.page-hero h1 span {
    color: var(--color-blue);
}

.page-hero-inner > p:not(.eyebrow) {
    max-width: 45rem;
    margin: 1.5rem auto 2rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.workflow-section {
    overflow: hidden;
}

.workflow-timeline {
    position: relative;
    display: grid;
    gap: 2rem;
    max-width: 64rem;
    margin-inline: auto;
}

.workflow-timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(124, 58, 237, 0.35);
    content: "";
    transform: translateX(-50%);
}

.workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5rem 1fr;
    align-items: center;
}

.workflow-step:nth-child(odd) .workflow-card {
    grid-column: 1;
}

.workflow-step:nth-child(even) .workflow-card {
    grid-column: 3;
}

.workflow-marker {
    position: absolute;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-white);
    background: var(--color-blue);
    border: 0.45rem solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18);
    font-size: 0.72rem;
    font-weight: 900;
    place-items: center;
    transform: translateX(-50%);
}

.workflow-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.workflow-step:nth-child(odd) .workflow-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(-4px);
}

.workflow-step:nth-child(even) .workflow-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.workflow-label {
    margin-bottom: 0.45rem;
    color: var(--color-blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.workflow-card h3 {
    margin-bottom: 0.75rem;
    color: var(--color-navy);
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
}

.workflow-card > p:not(.workflow-label) {
    color: var(--color-muted);
}

.workflow-tips {
    display: grid;
    gap: 0.45rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 600;
}

.workflow-tips li::before {
    margin-right: 0.55rem;
    color: var(--color-blue);
    content: "✓";
}

.faq-section {
    background: var(--color-surface);
}

.faq-layout {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

.faq-intro {
    position: sticky;
    top: 8rem;
}

.faq-intro h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.faq-intro > p:not(.eyebrow) {
    margin-top: 1rem;
    color: var(--color-muted);
}

.faq-list {
    border-top: 1px solid var(--color-border);
}

.faq-list details {
    border-bottom: 1px solid var(--color-border);
}

.faq-list summary {
    position: relative;
    padding: 1.6rem 3.5rem 1.6rem 0;
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    color: var(--color-blue);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    content: "+";
    font-size: 1.25rem;
    font-weight: 400;
    place-items: center;
    transform: translateY(-50%);
    transition: color var(--transition), background-color var(--transition),
        transform var(--transition);
}

.faq-list details[open] summary::after {
    color: var(--color-white);
    background: var(--color-blue);
    transform: translateY(-50%) rotate(45deg);
}

.faq-list details p {
    max-width: 42rem;
    padding: 0 3.5rem 1.6rem 0;
    color: var(--color-muted);
}

.workflow-cta {
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/cta-banner.jpg");
}

/* Design examples */
.examples-hero {
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/page-banner.jpg");
}

.examples-hero h1 {
    color: var(--color-white);
}

.examples-hero .page-hero-inner > p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.7);
}

.examples-hero::before,
.examples-hero::after {
    border-color: rgba(255, 255, 255, 0.1);
}

.examples-section {
    background: var(--color-white);
}

.gallery-intro {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    align-items: end;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
    gap: 2rem;
}

.gallery-intro h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.gallery-intro > p {
    max-width: 32rem;
    justify-self: end;
    color: var(--color-muted);
}

.design-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem);
}

.design-card:nth-child(even) {
    margin-top: 5rem;
}

.design-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #17131f;
    border-radius: 0.25rem;
}

.design-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.design-card:hover .design-image img {
    transform: scale(1.035);
}

.design-overlay {
    position: absolute;
    right: 1.25rem;
    bottom: 1rem;
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.design-info {
    padding-top: 1.25rem;
}

.design-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.style-tag {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    color: var(--color-blue);
    background: rgba(124, 58, 237, 0.08);
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.design-index {
    color: #98a2b3;
    font-size: 0.75rem;
    font-weight: 700;
}

.design-info h2 {
    margin-top: 0.85rem;
    color: var(--color-navy);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    letter-spacing: -0.025em;
}

.design-info > p {
    max-width: 32rem;
    margin-top: 0.45rem;
    color: var(--color-muted);
}

.examples-cta {
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/cta-banner.jpg");
}

/* Pricing */
.pricing-hero {
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/page-banner.jpg");
}

.product-pricing-section {
    background: var(--color-white);
}

.product-pricing-card {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-md);
}

.product-pricing-main {
    padding: clamp(2rem, 6vw, 5rem);
}

.product-pricing-main h2 {
    color: var(--color-navy);
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.product-summary {
    max-width: 39rem;
    margin-top: 1rem;
    color: var(--color-muted);
    font-size: 1.05rem;
}

.product-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
    padding-block: 2rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.product-option {
    display: grid;
    gap: 0.8rem;
}

.option-label {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.option-values,
.size-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.option-values > span {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    color: var(--color-navy);
    font-size: 0.88rem;
    font-weight: 700;
    gap: 0.45rem;
}

.option-color {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-border);
}

.option-color-black {
    background: var(--color-black);
}

.option-color-blue {
    background: var(--color-navy-light);
}

.size-values > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-navy);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 800;
    place-items: center;
}

.service-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
    gap: 1.5rem;
}

.service-details > div {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.service-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-blue);
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50%;
    font-weight: 800;
    place-items: center;
}

.service-details strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.service-details p {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.product-price-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    color: var(--color-white);
    background: var(--color-navy);
}

.product-price-panel > span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-price {
    display: flex;
    align-items: flex-start;
    margin-block: 0.75rem;
    gap: 0.35rem;
}

.product-price strong {
    font-size: clamp(4rem, 8vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.product-price small {
    margin-top: 0.35rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.product-price-panel > p {
    margin-bottom: 1.75rem;
    color: rgba(255, 255, 255, 0.65);
}

.product-price-panel .btn {
    width: 100%;
}

.price-note {
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.75rem;
    text-align: center;
}

.included-section {
    color: var(--color-white);
    background: var(--color-navy);
}

.included-section .section-heading > p:last-child {
    color: rgba(255, 255, 255, 0.62);
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
}

.included-item {
    min-height: 18rem;
    padding: 2rem;
    background: var(--color-navy);
}

.included-item > span {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    color: #8bb8ff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    place-items: center;
}

.included-item h3 {
    margin: 4rem 0 0.75rem;
    font-size: 1.2rem;
    line-height: 1.25;
}

.included-item p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.92rem;
}

.pricing-faq {
    background: var(--color-white);
}

.pricing-cta {
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/cta-banner.jpg");
}

/* About and contact */
.about-hero {
    text-align: left;
}

.about-hero .page-hero-inner {
    max-width: var(--container-width);
    margin-inline: auto;
}

.about-hero .page-hero-inner > p:not(.eyebrow) {
    max-width: 47rem;
    margin-inline: 0;
}

.about-story {
    background: var(--color-white);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
    gap: clamp(3rem, 9vw, 9rem);
}

.about-story-heading {
    position: sticky;
    top: 8rem;
}

.about-story-heading h2,
.about-process-content h2,
.business-details h2,
.contact-form-panel h2 {
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.about-story-copy {
    color: var(--color-muted);
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
}

.about-story-copy p + p {
    margin-top: 1.5rem;
}

.about-story-copy p:first-child::first-letter {
    float: left;
    margin: 0.1rem 0.6rem 0 0;
    color: var(--color-blue);
    font-size: 4rem;
    font-weight: 800;
    line-height: 0.8;
}

.about-process {
    background: var(--color-surface);
}

.about-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.about-process-visual {
    overflow: hidden;
    aspect-ratio: 7 / 5;
    border-radius: 1.5rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.32);
}

.about-process-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-process-content > p:not(.eyebrow) {
    margin-top: 1rem;
    color: var(--color-muted);
}

.about-checklist {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.75rem;
    color: var(--color-navy);
    font-weight: 650;
}

.about-checklist li::before {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.65rem;
    color: var(--color-white);
    background: var(--color-blue);
    border-radius: 50%;
    content: "✓";
    font-size: 0.72rem;
    place-items: center;
}

.trust-section {
    background: var(--color-white);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.trust-card {
    min-height: 18rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.trust-number {
    color: var(--color-blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.trust-card h3 {
    margin: 3.5rem 0 0.75rem;
    color: var(--color-navy);
    font-size: 1.35rem;
}

.trust-card p {
    color: var(--color-muted);
}

.about-cta {
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/cta-banner.jpg");
}

.contact-hero {
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

.contact-section {
    background: var(--color-white);
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

.business-intro,
.contact-form-panel > p {
    margin-top: 1rem;
    color: var(--color-muted);
}

.business-list {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.business-list > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}

.business-list dt {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.business-list dd {
    color: var(--color-navy);
    font-weight: 650;
}

.business-list a {
    color: var(--color-blue);
}

.contact-form-panel {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
}

.contact-form {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-group {
    display: grid;
    gap: 0.45rem;
}

.form-group label {
    color: var(--color-navy);
    font-size: 0.85rem;
    font-weight: 750;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group textarea {
    min-height: 9rem;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.consent-field {
    display: flex;
    align-items: flex-start;
    color: var(--color-muted);
    font-size: 0.82rem;
    cursor: pointer;
    gap: 0.65rem;
}

.consent-field input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    accent-color: var(--color-blue);
}

.consent-field a {
    color: var(--color-blue);
    text-decoration: underline;
}

.contact-form .btn {
    justify-self: start;
    min-width: 11rem;
}

.contact-support-note {
    padding: clamp(3rem, 7vw, 5rem) 0;
    color: var(--color-white);
    background: var(--color-navy);
}

.support-note-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
}

.support-note-inner h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.support-note-inner > p {
    color: rgba(255, 255, 255, 0.68);
}

/* Order */
.order-hero {
    padding-bottom: clamp(3.5rem, 7vw, 5rem);
}

.order-section {
    background: var(--color-surface);
}

.form-alert {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    color: #8a1c1c;
    background: #fff1f1;
    border: 1px solid #f1c6c6;
    border-radius: var(--radius-sm);
    font-weight: 650;
}

.order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
    align-items: start;
    gap: 2rem;
}

.order-form-panel {
    display: grid;
    gap: 1.25rem;
}

.order-block,
.order-agreements {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.order-block-heading {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
}

.order-block-heading > span {
    display: grid;
    flex: 0 0 auto;
    width: 2.7rem;
    height: 2.7rem;
    color: var(--color-blue);
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 850;
    place-items: center;
}

.order-block-heading h2 {
    color: var(--color-navy);
    font-size: 1.35rem;
}

.order-block-heading p {
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.form-group select {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.form-group label span {
    color: var(--color-muted);
    font-weight: 500;
}

.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group select[aria-invalid="true"] {
    border-color: #c93636;
}

.field-help,
.field-error {
    display: block;
    font-size: 0.78rem;
}

.field-help {
    color: var(--color-muted);
}

.field-error {
    color: #b42318;
    font-weight: 650;
}

.order-block .form-group + .form-group,
.order-block .form-row + .form-group,
.order-block .form-group + .form-row {
    margin-top: 1.25rem;
}

.order-agreements {
    display: grid;
    gap: 1rem;
}

.order-agreements legend {
    margin-bottom: 0.25rem;
    padding: 0;
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 800;
}

.order-summary {
    position: sticky;
    top: 7rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-white);
    background: var(--color-navy);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.order-summary .eyebrow {
    color: #8bb8ff;
}

.order-summary h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.summary-list {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.summary-list > div {
    display: flex;
    justify-content: space-between;
    padding-block: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.9rem;
    gap: 1rem;
}

.summary-list dt {
    color: rgba(255, 255, 255, 0.58);
}

.summary-list dd {
    text-align: right;
    font-weight: 700;
}

.summary-shipping {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
}

.summary-shipping strong {
    font-size: 0.85rem;
}

.summary-shipping p {
    margin-top: 0.3rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}

.summary-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 1.5rem;
    gap: 1rem;
}

.summary-total span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.summary-total strong {
    font-size: 1.7rem;
    letter-spacing: -0.03em;
}

.order-submit {
    width: 100%;
    margin-top: 1.5rem;
}

.secure-note {
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    text-align: center;
}

.secure-note span {
    color: #8bb8ff;
}

/* Checkout and payment results */
.checkout-hero {
    padding-bottom: clamp(3.5rem, 7vw, 5rem);
}

.checkout-section {
    background: var(--color-surface);
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    align-items: start;
    gap: 2rem;
}

.checkout-details {
    display: grid;
    gap: 1.25rem;
}

.checkout-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.checkout-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-card-heading .eyebrow {
    margin-bottom: 0.35rem;
}

.checkout-card-heading h2 {
    color: var(--color-navy);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

.edit-order-link {
    flex: 0 0 auto;
    color: var(--color-blue);
    font-size: 0.85rem;
    font-weight: 750;
}

.checkout-data-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.checkout-data-list > div {
    padding: 1.1rem 1rem 1.1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.checkout-data-list dt {
    margin-bottom: 0.25rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.checkout-data-list dd {
    color: var(--color-navy);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.checkout-data-list .checkout-address,
.checkout-data-list .checkout-prompt {
    grid-column: 1 / -1;
}

.checkout-payment {
    position: sticky;
    top: 7rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-white);
    background: var(--color-navy);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.checkout-payment .eyebrow {
    color: #8bb8ff;
}

.checkout-payment h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.payment-totals {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.payment-totals > div {
    display: flex;
    justify-content: space-between;
    padding-block: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    gap: 1rem;
}

.payment-totals dt {
    color: rgba(255, 255, 255, 0.62);
}

.payment-totals dd {
    text-align: right;
    font-weight: 750;
}

.payment-totals .payment-grand-total {
    align-items: end;
    padding-block: 1.25rem;
}

.payment-grand-total dt {
    color: var(--color-white);
    font-weight: 800;
}

.payment-grand-total dd {
    font-size: 1.65rem;
    letter-spacing: -0.03em;
}

.payment-button {
    width: 100%;
    margin-top: 1.5rem;
}

.payment-trust-notes {
    display: grid;
    gap: 1rem;
    margin-top: 1.75rem;
}

.payment-trust-notes > div {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.payment-trust-notes > div > span {
    display: grid;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    color: var(--color-navy);
    background: #8bb8ff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 900;
    place-items: center;
}

.payment-trust-notes p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
}

.payment-trust-notes strong {
    display: block;
    color: var(--color-white);
}

.payment-disclaimer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    color: rgba(255, 255, 255, 0.48);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.72rem;
}

.result-page {
    display: grid;
    min-height: calc(100vh - 5rem);
    padding: clamp(4rem, 10vw, 8rem) 0;
    background: var(--color-surface);
    place-items: center;
}

.result-card {
    max-width: 48rem;
    padding: clamp(2rem, 6vw, 5rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.result-icon {
    display: grid;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    color: var(--color-white);
    background: var(--color-blue);
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 900;
    place-items: center;
}

.result-fail .result-icon {
    background: #b42318;
}

.result-card h1 {
    color: var(--color-navy);
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.result-lead {
    max-width: 38rem;
    margin: 1.25rem auto 0;
    color: var(--color-muted);
    font-size: 1.05rem;
}

.result-reference {
    display: grid;
    margin: 2rem 0;
    padding: 1.25rem;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    gap: 0.3rem;
}

.result-reference span {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.result-reference strong {
    color: var(--color-navy);
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.result-note {
    color: var(--color-muted);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
    gap: 0.75rem;
}

.failure-info {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #fff7f6;
    border: 1px solid #f4d0cc;
    border-radius: var(--radius-sm);
    text-align: left;
}

.failure-info h2 {
    color: var(--color-navy);
    font-size: 1.1rem;
}

.failure-info ul {
    display: grid;
    margin-top: 0.8rem;
    color: var(--color-muted);
    gap: 0.5rem;
}

.failure-info li {
    padding-left: 1.2rem;
}

.failure-info li::before {
    margin-left: -1.2rem;
    margin-right: 0.55rem;
    color: #b42318;
    content: "•";
}

/* Legal pages */
.legal-hero {
    padding: clamp(4rem, 9vw, 7rem) 0;
    color: var(--color-white);
    background-color: rgba(16, 9, 31, 0.88);
    background-image: url("../images/page-banner.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.legal-hero-inner {
    max-width: 58rem;
}

.legal-hero h1 {
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.legal-hero-inner > p:last-child {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.62);
}

.legal-section {
    padding: clamp(3.5rem, 8vw, 7rem) 0;
    background: var(--color-surface);
}

.legal-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
}

.legal-sidebar {
    position: sticky;
    top: 7rem;
    display: grid;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.legal-sidebar strong {
    padding: 1rem 1.2rem;
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
}

.legal-sidebar a {
    padding: 0.7rem 1.2rem;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
    transition: color var(--transition), background-color var(--transition);
}

.legal-sidebar a:last-child {
    border-bottom: 0;
}

.legal-sidebar a:hover {
    color: var(--color-blue);
    background: var(--color-surface);
}

.legal-content {
    padding: clamp(1.5rem, 5vw, 4rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.legal-content section {
    scroll-margin-top: 7rem;
}

.legal-content section + section {
    margin-top: 2.75rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--color-border);
}

.legal-content h2 {
    margin-bottom: 1rem;
    color: var(--color-navy);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    line-height: 1.25;
}

.legal-content h3 {
    margin: 1.5rem 0 0.65rem;
    color: var(--color-navy);
    font-size: 1.05rem;
}

.legal-content p,
.legal-content li {
    color: #475467;
}

.legal-content p + p {
    margin-top: 1rem;
}

.legal-content ul,
.legal-content ol {
    display: grid;
    margin-top: 1rem;
    padding-left: 1.25rem;
    gap: 0.55rem;
}

.legal-content ul {
    list-style: disc;
}

.legal-content ol {
    list-style: decimal;
}

.legal-content a {
    color: var(--color-blue);
    text-decoration: underline;
}

.legal-notice,
.legal-highlight {
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
}

.legal-notice {
    margin-bottom: 2.5rem;
    color: #7a4d00;
    background: #fff8e8;
    border: 1px solid #f4dfaa;
    font-size: 0.88rem;
    font-weight: 650;
}

.legal-highlight {
    margin-block: 1.25rem;
    color: var(--color-navy);
    background: rgba(124, 58, 237, 0.07);
    border-left: 3px solid var(--color-blue);
    font-weight: 650;
}

.legal-company {
    display: grid;
    margin-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.legal-company > div {
    display: grid;
    grid-template-columns: 10rem 1fr;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}

.legal-company dt {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.legal-company dd {
    color: var(--color-navy);
    font-weight: 650;
}

.legal-table-wrap {
    margin-top: 1.25rem;
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    min-width: 38rem;
    border-collapse: collapse;
}

.legal-table th,
.legal-table td {
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    color: var(--color-navy);
    background: var(--color-surface);
    font-size: 0.8rem;
}

.legal-table td {
    color: var(--color-muted);
    font-size: 0.88rem;
}

@media (max-width: 1024px) {
    .menu-toggle {
        display: block;
    }

    .primary-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        opacity: 0;
        pointer-events: none;
        transition: max-height 260ms ease, opacity var(--transition),
            visibility var(--transition);
    }

    .primary-navigation.is-open {
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .primary-navigation ul {
        display: block;
        width: min(100% - 2rem, var(--container-width));
        margin-inline: auto;
        padding-block: 0.75rem 1.25rem;
    }

    .primary-navigation a {
        padding: 0.85rem 0.25rem;
        font-size: 1rem;
    }

    .primary-navigation a::after {
        display: none;
    }

    .primary-navigation .app-nav-link {
        width: 100%;
        margin: 0.35rem 0 0;
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-grid {
        min-height: auto;
        padding-block: 5rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-item:nth-child(2) {
        border-right: 0;
    }

    .feature-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .faq-layout {
        gap: 4rem;
    }

    .included-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-layout {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-payment {
        position: static;
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .legal-sidebar strong {
        grid-column: 1 / -1;
    }

    .legal-sidebar a {
        border-right: 1px solid var(--color-border);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .hero-grid,
    .colors-grid,
    .pricing-panel {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        padding-top: 4rem;
    }

    .hero-visual,
    .color-showcase {
        width: 100%;
        justify-self: stretch;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-card {
        min-height: auto;
    }

    .step-icon {
        margin-bottom: 3rem;
    }

    .price-box {
        min-height: 22rem;
    }

    .workflow-timeline {
        gap: 1.25rem;
        padding-left: 3.5rem;
    }

    .workflow-timeline::before {
        left: 1.5rem;
    }

    .workflow-step {
        display: block;
    }

    .workflow-marker {
        top: 1.5rem;
        left: -2rem;
    }

    .workflow-step:nth-child(odd) .workflow-card:hover,
    .workflow-step:nth-child(even) .workflow-card:hover {
        transform: translateY(-3px);
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-intro {
        position: static;
    }

    .gallery-intro {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .gallery-intro > p {
        justify-self: start;
    }

    .design-card:nth-child(even) {
        margin-top: 2.5rem;
    }

    .product-pricing-card {
        grid-template-columns: 1fr;
    }

    .product-price-panel {
        min-height: 26rem;
    }

    .about-story-grid,
    .about-process-grid,
    .contact-layout,
    .support-note-inner {
        grid-template-columns: 1fr;
    }

    .about-story-heading {
        position: static;
    }

}

@media (max-width: 560px) {
    .container {
        width: min(100% - 1.25rem, var(--container-width));
    }

    .header-inner {
        min-height: 4.5rem;
    }

    .site-header .site-logo {
        font-size: 1.08rem;
        gap: 0.5rem;
    }

    .site-header .site-logo img {
        width: 3.35rem;
        height: 3.35rem;
    }

    .primary-navigation { top: 100%; }

    .primary-navigation.is-open {
        max-height: calc(100dvh - 4.5rem);
    }

    .card-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 14vw, 4rem);
    }

    .hero-actions .btn {
        width: 100%;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-item,
    .feature-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .feature-item:last-child {
        border-bottom: 0;
    }


    .page-hero h1 {
        font-size: clamp(2.65rem, 13vw, 4rem);
    }

    .workflow-timeline {
        padding-left: 2.5rem;
    }

    .workflow-timeline::before {
        left: 0.75rem;
    }

    .workflow-marker {
        left: -1.75rem;
        width: 3rem;
        height: 3rem;
    }

    .faq-list summary {
        padding-right: 3rem;
    }

    .design-gallery {
        grid-template-columns: 1fr;
    }

    .design-card:nth-child(even) {
        margin-top: 0;
    }

    .product-options,
    .service-details,
    .included-grid {
        grid-template-columns: 1fr;
    }

    .included-item {
        min-height: auto;
    }

    .included-item h3 {
        margin-top: 2.5rem;
    }

    .trust-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    .trust-card {
        min-height: auto;
    }

    .trust-card h3 {
        margin-top: 2.5rem;
    }

    .business-list > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .contact-form .btn {
        width: 100%;
    }

    .checkout-data-list {
        grid-template-columns: 1fr;
    }

    .checkout-data-list .checkout-address,
    .checkout-data-list .checkout-prompt {
        grid-column: auto;
    }

    .checkout-card-heading {
        display: grid;
    }

    .result-actions .btn {
        width: 100%;
    }

    .legal-sidebar {
        grid-template-columns: 1fr;
    }

    .legal-sidebar strong {
        grid-column: auto;
    }

    .legal-company > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* Storefront and management panel */
.cart-nav-link{display:flex!important;align-items:center;gap:.4rem}.cart-count{display:grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .3rem;border-radius:99px;background:#8f5cff;color:#fff;font-size:.75rem}.product-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}.shop-product-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#171024;box-shadow:0 18px 45px rgba(0,0,0,.16)}.shop-product-image{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}.shop-product-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.shop-product-card:hover img{transform:scale(1.035)}.discount-badge{position:absolute;top:1rem;left:1rem;padding:.45rem .7rem;border-radius:99px;background:#e2466c;color:#fff;font-weight:700}.shop-product-info{padding:1.25rem}.shop-product-info h2{margin:.65rem 0;font-size:1.35rem}.shop-product-info h2 a{color:inherit}.shop-card-footer{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-top:1.25rem}.shop-price{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:1rem 0}.shop-price strong{font-size:1.45rem;color:#fff}.shop-price del{color:#a9a2b5}.shop-price span{padding:.25rem .5rem;border-radius:8px;background:rgba(226,70,108,.16);color:#ff7895;font-size:.8rem}.product-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}.product-detail-image{overflow:hidden;border-radius:28px}.product-detail-image img{display:block;width:100%;max-height:720px;object-fit:cover}.product-detail-content h1{font-size:clamp(2.2rem,5vw,4rem)}.shop-back{display:inline-block;margin-bottom:2rem;color:#bca4ef}.add-cart-form{display:grid;grid-template-columns:1fr 1fr 100px;gap:1rem;margin-top:2rem}.add-cart-form label,.delivery-form label,.admin-form label,.admin-login label{display:grid;gap:.5rem;font-weight:600}.add-cart-form select,.add-cart-form input,.delivery-form input,.delivery-form textarea,.admin-form input,.admin-form textarea,.admin-login input{width:100%;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#100b1b;color:#fff;font:inherit}.add-cart-form .btn{grid-column:1/-1}.cart-layout,.checkout-form-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:2rem;align-items:start}.cart-list,.delivery-form,.shop-empty{padding:1.5rem;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#171024}.cart-item{display:grid;grid-template-columns:100px 1fr 90px;gap:1.25rem;align-items:center;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.cart-item img{width:100px;height:120px;object-fit:cover;border-radius:12px}.cart-item h2{font-size:1.1rem}.cart-item input{width:100%;padding:.65rem;border-radius:8px}.cart-summary{position:sticky;top:110px;padding:1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#171024}.cart-summary>div,.review-item{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.cart-summary .cart-total{font-size:1.2rem;border-bottom:0}.cart-summary .btn{width:100%;margin-top:1rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}.form-wide{grid-column:1/-1}.field-error{color:#ff7895}.checkout-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:start;margin:1.25rem 0}.checkout-consent input{width:auto}.searchable-select{position:relative}.city-options{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;display:none;max-height:260px;overflow:auto;padding:.4rem;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#191126;box-shadow:0 18px 45px #000}.searchable-select.is-open .city-options{display:block}.city-options button{display:block;width:100%;padding:.7rem;border:0;border-radius:8px;background:none;color:#fff;text-align:left;cursor:pointer}.city-options button:hover{background:#302044}.review-item span{display:grid}.review-item small{color:#a9a2b5}.admin-body{min-height:100vh;background:#0d0914;color:#f8f5ff}.admin-header{display:flex;justify-content:space-between;padding:1.1rem 4vw;background:#171024;border-bottom:1px solid rgba(255,255,255,.1)}.admin-header nav{display:flex;gap:1.2rem}.admin-main{width:min(1400px,92%);margin:2rem auto}.admin-login{min-height:100vh;display:grid;place-items:center}.admin-login .admin-card{width:min(420px,92%)}.admin-card{padding:1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#171024}.admin-stats{display:flex;gap:1rem;margin-bottom:1rem}.admin-stats div{display:grid;min-width:140px;padding:1rem;border-radius:16px;background:#241735}.admin-stats strong{font-size:2rem}.admin-grid{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(0,1.2fr);gap:1rem}.admin-form{display:grid;gap:1rem}.admin-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.admin-check{display:flex!important}.admin-check input{width:auto}.admin-products article{display:grid;grid-template-columns:64px 1fr auto auto;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.admin-products img{height:80px;object-fit:cover;border-radius:8px}.admin-products article div{display:grid}.admin-products span,.admin-table-wrap small{color:#aaa;display:block}.admin-products button{border:0;background:none;color:#ff7895;cursor:pointer}.admin-orders{margin-top:1rem}.admin-table-wrap{overflow:auto}.admin-table-wrap table{width:100%;border-collapse:collapse}.admin-table-wrap th,.admin-table-wrap td{padding:.9rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap}.admin-success,.admin-alert{padding:1rem;border-radius:12px;background:rgba(61,190,132,.15);color:#75e3ac}.admin-alert{background:rgba(226,70,108,.15);color:#ff7895}
.shop-product-info{color:#f4efff!important}.shop-product-info h2,.shop-product-info h2 a{color:#fff!important}.shop-product-info>p:not(.style-tag){color:#d7d0e2!important}.shop-product-info .shop-price del{color:#c8bfd3!important}.shop-product-page .product-detail-content{padding:clamp(1.5rem,4vw,3rem)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:28px!important;background:#171024!important;color:#f4efff!important;box-shadow:0 20px 55px rgba(21,12,34,.18)!important}.shop-product-page .product-detail-content h1{display:block!important;margin:.7rem 0 1rem!important;color:#fff!important}.shop-product-page .product-detail-content>p:not(.eyebrow){color:#d7d0e2!important}.shop-product-page .product-detail-content .eyebrow{color:#9b62ff!important}.shop-product-page .product-detail-content .shop-back{color:#d6c2ff!important}.shop-product-page .product-detail-content .add-cart-form label{color:#f4efff!important}.shop-product-page .product-detail-content .shop-price strong{color:#fff!important}.shop-empty{color:#f4efff!important}.shop-empty h1,.shop-empty h2{color:#fff!important}.shop-empty>p:not(.eyebrow){color:#d7d0e2!important}
.cart-list,.cart-summary,.delivery-form,.checkout-card,.checkout-payment,.admin-card{color:#f4efff!important}.cart-list h1,.cart-list h2,.cart-list h3,.cart-summary h1,.cart-summary h2,.delivery-form h1,.delivery-form h2,.checkout-card h1,.checkout-card h2,.checkout-payment h1,.checkout-payment h2,.admin-card h1,.admin-card h2{color:#fff!important}.cart-item p,.cart-summary span,.cart-summary dt,.checkout-card p,.checkout-card dt,.checkout-payment p,.checkout-payment dt,.delivery-form p{color:#d7d0e2!important}.cart-item strong,.cart-summary strong,.cart-summary dd,.checkout-card strong,.checkout-card dd,.checkout-payment strong,.checkout-payment dd{color:#fff!important}.cart-list .btn-outline{border-color:#8b5cf6!important;background:transparent!important;color:#fff!important}.cart-list .btn-outline:hover{background:#7c3aed!important}.delivery-form input,.delivery-form textarea,.delivery-form select,.add-cart-form input,.add-cart-form select{border-color:#5a5068!important;background:#fff!important;color:#171024!important}.delivery-form input::placeholder,.delivery-form textarea::placeholder{color:#6d6576!important}.city-options{background:#21172f!important}.city-options button{color:#fff!important}.checkout-data-list>div,.payment-totals>div{border-color:rgba(255,255,255,.16)!important}.cart-toast{position:fixed;z-index:1000;top:96px;right:24px;display:flex;align-items:center;gap:1.5rem;max-width:min(460px,calc(100% - 32px));padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#21152f;color:#f8f5ff;box-shadow:0 18px 55px rgba(17,8,28,.28)}.cart-toast span{display:grid;gap:.15rem}.cart-toast strong{color:#fff}.cart-toast a{white-space:nowrap;color:#c7a8ff;font-weight:700}
.cart-nav-item{position:relative;display:flex!important;align-items:center}.primary-navigation .cart-nav-link{position:relative;display:grid!important;place-items:center;width:44px;height:44px;padding:0!important;border-radius:50%;color:#21172f!important;transition:background .2s,color .2s,transform .2s}.primary-navigation .cart-nav-link:hover,.primary-navigation .cart-nav-link:focus-visible{background:#f0e9ff!important;color:#7137e8!important;transform:translateY(-1px)}.cart-nav-icon{display:block;pointer-events:none}.primary-navigation .cart-count{position:absolute;top:-3px;right:-5px;display:grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .28rem;border:2px solid #fff;border-radius:99px;background:#8f5cff;color:#fff;font-size:.68rem;font-weight:800;line-height:1;pointer-events:none}.cart-live-message{min-height:1.4rem;margin:0!important;color:#9fe1bb!important;font-size:.9rem}.cart-live-message.is-error{color:#ff9aae!important}.cart-item-actions{display:grid;justify-items:end;gap:.55rem;color:#d7d0e2}.quantity-control{display:grid;grid-template-columns:38px 58px 38px;overflow:hidden;border:1px solid #746787;border-radius:10px;background:#fff}.quantity-control button{border:0;background:#eee8f7;color:#21172f;font-size:1.25rem;cursor:pointer}.quantity-control button:hover{background:#dfd2f1}.quantity-control input{width:58px!important;padding:.55rem .2rem!important;border:0!important;border-radius:0!important;background:#fff!important;color:#171024!important;text-align:center;-moz-appearance:textfield}.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cart-remove{border:0;background:none;color:#ff9aae;text-decoration:underline;cursor:pointer}.cart-item.is-updating{opacity:.6;pointer-events:none}.checkout-details .checkout-card{background:#fff!important;color:#1b2533!important}.checkout-details .checkout-card h1,.checkout-details .checkout-card h2,.checkout-details .checkout-card dd,.checkout-details .checkout-card strong{color:#10091f!important}.checkout-details .checkout-card dt,.checkout-details .checkout-card p:not(.eyebrow),.checkout-details .checkout-card small{color:#667085!important}.checkout-details .checkout-card .eyebrow{color:#7c3aed!important}.checkout-details .checkout-card .checkout-data-list>div,.checkout-details .checkout-card .review-item{border-color:#e4e7ec!important}.checkout-payment{color:#fff!important;background:#10091f!important}.checkout-payment h2,.checkout-payment dd,.checkout-payment strong{color:#fff!important}.checkout-payment dt,.checkout-payment p{color:rgba(255,255,255,.72)!important}
.admin-tabs{display:flex;gap:.6rem;margin-bottom:1.25rem;padding:.4rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#171024}.admin-tabs a{display:flex;align-items:center;gap:.55rem;padding:.75rem 1.15rem;border-radius:10px;color:#cfc6db;font-weight:700}.admin-tabs a.active{background:#7c3aed;color:#fff}.admin-tabs span{display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:99px;background:rgba(255,255,255,.14);font-size:.75rem}.admin-section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:1.8rem 0 1rem}.admin-section-heading h1{color:#fff}.admin-section-heading p{color:#bdb5c8}.admin-readonly-stat{display:grid;align-content:center;padding:1rem;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#21172f}.admin-readonly-stat span,.admin-readonly-stat small{color:#bdb5c8}.admin-readonly-stat strong{font-size:1.6rem;color:#fff}.admin-orders-list{display:grid;gap:1rem}.admin-order-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#171024;color:#f5f1fa}.admin-order-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.4rem;border-bottom:1px solid rgba(255,255,255,.1)}.admin-order-card>header h2{margin:.45rem 0 .1rem;color:#fff}.admin-order-card time{color:#aaa}.order-status{display:inline-flex;padding:.3rem .6rem;border-radius:99px;font-size:.75rem;font-weight:800}.order-status.pending{background:rgba(245,158,11,.16);color:#fbc56d}.order-status.sent{background:rgba(16,185,129,.16);color:#79e3bd}.order-status.cancelled{background:rgba(239,68,68,.16);color:#ff9a9a}.order-status.waiting{background:rgba(124,58,237,.18);color:#c4a6ff}.admin-order-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.4rem}.admin-order-grid section{padding:1rem;border-radius:12px;background:#21172f}.admin-order-grid h3,.admin-order-items h3{margin-bottom:.7rem;color:#fff}.admin-order-grid dl>div{display:grid;grid-template-columns:90px 1fr;gap:.7rem;padding:.25rem 0}.admin-order-grid dt{color:#aaa}.admin-order-grid dd{color:#fff}.admin-order-items{padding:0 1.4rem 1.4rem}.admin-order-items>div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.admin-order-items span{display:grid}.admin-order-items small{color:#aaa}.admin-order-card>footer{padding:1.2rem 1.4rem;background:#120c1d}.order-status-form{display:flex;align-items:end;gap:1rem}.order-status-form label{display:grid;gap:.4rem;min-width:260px}.order-status-form select{padding:.75rem;border:1px solid #51455f;border-radius:10px;background:#fff;color:#171024}.order-status-form .btn{min-height:46px}.admin-products article span+span{margin-top:.2rem}
@media(max-width:1024px){.product-gallery{grid-template-columns:repeat(2,1fr)}.product-detail-grid,.cart-layout,.checkout-form-layout,.admin-grid{grid-template-columns:1fr}.cart-summary{position:static}.admin-order-grid{grid-template-columns:1fr}}
@media(max-width:640px){.product-gallery,.form-grid,.add-cart-form,.admin-form-row{grid-template-columns:1fr}.product-detail-grid{gap:2rem}.cart-item{grid-template-columns:75px 1fr}.cart-item img{width:75px;height:95px}.cart-item label{grid-column:2}.shop-card-footer{align-items:stretch;flex-direction:column}.admin-products article{grid-template-columns:52px 1fr}.admin-products article>a,.admin-products article>form{grid-column:auto}.admin-header{align-items:flex-start;gap:1rem}.admin-header nav{display:grid}.cart-toast{top:78px;right:16px;left:16px;justify-content:space-between}.admin-tabs a{flex:1;justify-content:center}.admin-stats{display:grid;grid-template-columns:1fr 1fr}.admin-stats div{min-width:0}.admin-order-card>header,.admin-section-heading,.order-status-form{align-items:stretch;flex-direction:column}.order-status-form label{min-width:0}.admin-order-grid{padding:1rem}.admin-order-items{padding:0 1rem 1rem}}

.admin-body{direction:rtl;text-align:right;font-family:Tahoma,"Segoe UI",Arial,sans-serif}.admin-body input,.admin-body textarea,.admin-body select{font-family:inherit}.admin-body input[type="email"],.admin-body input[type="tel"],.admin-order-card time{direction:ltr;text-align:right}.admin-header nav,.admin-tabs,.admin-stats,.admin-form-row,.admin-order-card>header,.order-status-form{direction:rtl}.admin-table-wrap th,.admin-table-wrap td{text-align:right}.admin-seo-fields{display:grid;gap:1rem;margin-top:.5rem;padding:1.2rem;border:1px solid rgba(155,98,255,.4);border-radius:14px;background:#130d1e}.admin-seo-fields legend{padding:0 .6rem;color:#c6a9ff;font-size:1.05rem;font-weight:800}.admin-seo-fields>p,.admin-seo-fields small{color:#aaa}.admin-seo-fields input[dir="ltr"]{direction:ltr;text-align:left}

.primary-navigation .cart-nav-link::after{display:none!important;content:none!important}.shop-card-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}.shop-card-actions .btn{padding:.7rem .9rem}.shop-card-actions .btn-outline{border-color:#8b5cf6;color:#fff}.quick-add-dialog{width:min(500px,calc(100% - 2rem));max-width:none;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#171024;color:#f5f1fa;box-shadow:0 30px 90px rgba(16,9,31,.45)}.quick-add-dialog::backdrop{background:rgba(10,6,17,.65);backdrop-filter:blur(4px)}.quick-add-content{padding:2rem}.quick-add-content h2{margin:.4rem 0;color:#fff}.quick-add-content>p:not(.eyebrow){color:#cfc6d9}.quick-add-close-form{position:absolute;top:.8rem;right:.8rem}.quick-add-close-form button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#2a1d3d;color:#fff;font-size:1.5rem;cursor:pointer}.quick-add-dialog [data-quick-add-form]{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}.quick-add-dialog label{display:grid;gap:.45rem;color:#f5f1fa;font-weight:700}.quick-add-dialog select,.quick-add-dialog input{width:100%;padding:.8rem;border:1px solid #61556f;border-radius:10px;background:#fff;color:#171024;font:inherit}.quick-add-dialog [data-quick-add-form]>label:nth-of-type(3),.quick-add-dialog .quick-add-message,.quick-add-dialog [type="submit"]{grid-column:1/-1}.quick-add-message{min-height:1.4rem;color:#ff9aae}.quick-add-dialog [type="submit"]{width:100%}.quick-add-toast{animation:quick-toast-in .2s ease-out}@keyframes quick-toast-in{from{opacity:0;transform:translateY(-8px)}}@media(max-width:560px){.quick-add-dialog [data-quick-add-form]{grid-template-columns:1fr}.quick-add-dialog [data-quick-add-form]>*{grid-column:1!important}.shop-card-actions{display:grid;grid-template-columns:1fr 1fr}.shop-card-actions .btn{justify-content:center}}

.shop-product-card [hidden]{display:none!important}.shop-card-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:nowrap}.quick-add-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #8b5cf6;border-radius:12px;background:transparent;color:#b995ff;cursor:pointer;transition:background .18s,color .18s}.quick-add-icon:hover,.quick-add-icon[aria-expanded="true"]{background:#7c3aed;color:#fff}.quick-add-icon svg{pointer-events:none}.inline-quick-add{margin-top:1rem;padding:1rem;border:1px solid rgba(139,92,246,.45);border-radius:14px;background:#100a1a}.inline-quick-add form{display:grid;grid-template-columns:1fr 1fr 72px 44px;gap:.55rem;align-items:end}.inline-quick-add label{display:grid;gap:.3rem;color:#cfc6da;font-size:.75rem;font-weight:700}.inline-quick-add select,.inline-quick-add input{width:100%;height:40px;padding:.45rem .55rem;border:1px solid #5c5069;border-radius:8px;background:#fff;color:#171024;font:inherit}.inline-quick-add button[type="submit"]{display:grid;place-items:center;width:44px;height:40px;border:0;border-radius:8px;background:#7c3aed;color:#fff;cursor:pointer}.inline-quick-add button:disabled{opacity:.6}.inline-quick-add p{grid-column:1/-1;min-height:1.1rem;margin:0!important;color:#9fe1bb!important;font-size:.78rem}.shop-card-footer{align-items:center}.shop-card-actions .btn{white-space:nowrap}@media(max-width:700px){.inline-quick-add form{grid-template-columns:1fr 1fr}.inline-quick-add form>*{grid-column:auto}.inline-quick-add button[type="submit"]{width:100%}.inline-quick-add p{grid-column:1/-1}}

.cart-page-section{padding-top:clamp(1.5rem,4vw,3rem)!important}.cart-page-heading{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid #e4e7ec}.cart-page-heading h1{margin:.2rem 0;color:#10091f;font-size:clamp(2rem,4vw,3.25rem);line-height:1.1}.cart-page-heading p:not(.eyebrow){color:#667085}.cart-page-heading>a{color:#7137e8;font-weight:750;white-space:nowrap}.cart-page-heading>a:hover{text-decoration:underline}.cart-page-section .cart-list{padding:clamp(1rem,2vw,1.5rem)}.cart-page-section .cart-item:first-of-type{padding-top:.35rem}.cart-page-section .cart-summary{top:100px}
@media(max-width:768px){.cart-page-section{padding-top:1rem!important;padding-bottom:2rem!important}.cart-page-heading{align-items:flex-start;flex-direction:column;gap:.65rem;margin-bottom:1rem;padding-bottom:1rem}.cart-page-heading h1{font-size:2rem}.cart-layout{gap:1rem}.cart-page-section .cart-list{padding:.85rem;border-radius:16px}.cart-item{grid-template-columns:76px minmax(0,1fr)!important;gap:.8rem!important;padding:.85rem 0!important}.cart-item img{width:76px!important;height:94px!important}.cart-item>div:nth-of-type(1){min-width:0}.cart-item h2{overflow:hidden;margin-bottom:.15rem;text-overflow:ellipsis;white-space:nowrap}.cart-item-actions{grid-column:1/-1;grid-template-columns:auto 1fr;align-items:center;justify-items:start!important;padding-top:.25rem}.cart-item-actions>span{display:none}.cart-item-actions .quantity-control{justify-self:start}.cart-remove{justify-self:end}.cart-summary{padding:1.1rem;border-radius:16px}.cart-summary>div{padding:.75rem 0}.cart-summary .btn{min-height:50px}.cart-live-message{font-size:.8rem}}
@media(max-width:390px){.cart-page-heading>a{font-size:.9rem}.cart-item-actions{grid-template-columns:1fr}.cart-remove{justify-self:start}.quantity-control{grid-template-columns:36px 54px 36px}.quantity-control input{width:54px!important}}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}