/* =============================== TOKENS =============================== */
:root {
    --page: #F6F3EF;
    --card: #F1E9E6;
    --ink: #1F1E1C;
    --ink-soft: #5E5955;
    --prism-coral: #FF7F6F;
    --prism-apricot: #FFB97A;
    --prism-lime: #B7E08B;
    --prism-sky: #8ED3FF;
    --prism-lav: #C4B5FD;
    --prism-mint: #8FE3B0;
    --prism-pink: var(--prism-coral);
    color-scheme: light;

    /* Liquid rays (light) */
    --rays-angle: 270deg;
    --rays-period: 9deg;
    --rays-width: 2.4deg;
    --rays-opacity: .20;
    --edge-left: color-mix(in srgb, var(--prism-apricot)60%, transparent);
    --edge-right: color-mix(in srgb, var(--prism-sky)60%, transparent);

    /* Horizon (sun) */
    --sun-radius: 60px;
    --sun-core: #fff;
    --sun-glow: rgba(255, 255, 255, .95);
    --horizon-radius: var(--sun-radius);
    --horizon-core: var(--sun-core);
    --horizon-glow: var(--sun-glow);

    --phase-rotate-speed: 120s;
    --sway-speed: 12s;
    --sway-amount: 1.6deg;
}

html.dark {
    color-scheme: dark;
    --page: #08090C;
    --card: #0E1116;
    --ink: #E7E2DA;
    --ink-soft: #B9B3AD;
    --rays-opacity: 0;

    --star-pink: color-mix(in srgb, var(--prism-pink)65%, #fff 35%);
    --star-apr: color-mix(in srgb, var(--prism-apricot)65%, #fff 35%);
    --star-lime: color-mix(in srgb, var(--prism-lime)60%, #fff 40%);
    --star-sky: color-mix(in srgb, var(--prism-sky)60%, #fff 40%);
    --star-lav: color-mix(in srgb, var(--prism-lav)65%, #fff 35%);

    --moon-radius: 60px;
    --moon-core: #ECE7DE;
    --moon-glow: rgba(236, 231, 222, .50);
    --horizon-radius: var(--moon-radius);
    --horizon-core: var(--moon-core);
    --horizon-glow: var(--moon-glow);

    --rule-strong: rgba(231, 226, 218, .18);
    --rule-soft: rgba(231, 226, 218, .10);
}

/* Accent toggles (optional) */
html.accent-coral {
    --prism-pink: var(--prism-coral);
}

html.accent-lavender {
    --prism-pink: var(--prism-lav);
}

html.accent-mint {
    --prism-pink: var(--prism-mint);
}

/* =============================== BASE =============================== */
* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: Sora, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
    background: var(--page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: Fraunces, ui-serif, Georgia, serif
}

h1 {
    font-size: 2.2rem;
    margin: .6rem 0
}

h2 {
    font-size: 2rem;
    margin: .6rem 0
}

h3 {
    font-size: 1.6rem;
    margin: .5rem 0
}

h4 {
    font-size: 1.2rem;
    margin: .4rem 0
}

.lead {
    font-size: 1.1rem;
    color: var(--ink-soft)
}

.small {
    font-size: .9rem
}

.xsmall {
    font-size: .78rem
}

.center {
    text-align: center
}

.muted {
    color: var(--ink-soft)
}

.hidden {
    display: none
}

/* =========================== BACKDROP =========================== */
.marble {
    position: relative;
    isolation: isolate
}

.marble::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-conic-gradient(from var(--rays-angle) at 50% 95%, rgba(255, 255, 255, .92) 0deg, rgba(255, 255, 255, .92) var(--rays-width), transparent var(--rays-width), transparent var(--rays-period)),
        repeating-conic-gradient(from calc(var(--rays-angle) - .45deg) at 50% 95%, var(--edge-left) 0deg, transparent calc(var(--rays-width)*.55), transparent var(--rays-period)),
        repeating-conic-gradient(from calc(var(--rays-angle) + .45deg) at 50% 95%, var(--edge-right) 0deg, transparent calc(var(--rays-width)*.55), transparent var(--rays-period)),
        radial-gradient(1200px 800px at 50% -10%, rgba(0, 0, 0, .07), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 1200px 800px;
    opacity: var(--rays-opacity);
    -webkit-mask-image: radial-gradient(140% 120% at 50% 100%, #000 22%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(140% 120% at 50% 100%, #000 22%, rgba(0, 0, 0, 0) 70%);
    transform-origin: 50% 95%;
    animation: raysSpin var(--phase-rotate-speed) linear infinite, raysSway var(--sway-speed) ease-in-out infinite;
}

@keyframes raysSpin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes raysSway {
    0% {
        transform: rotate(calc(-1*var(--sway-amount)))
    }

    50% {
        transform: rotate(var(--sway-amount))
    }

    100% {
        transform: rotate(calc(-1*var(--sway-amount)))
    }
}

.dark .marble::before {
    background-image:
        radial-gradient(1px 1px at 12% 22%, color-mix(in srgb, var(--star-sky) 85%, transparent) 99%, transparent 100%),
        radial-gradient(1px 1px at 38% 78%, color-mix(in srgb, var(--star-pink) 80%, transparent) 99%, transparent 100%),
        radial-gradient(1px 1px at 71% 34%, color-mix(in srgb, var(--star-lav) 78%, transparent) 99%, transparent 100%),
        radial-gradient(2px 2px at 86% 60%, color-mix(in srgb, var(--star-apr) 70%, transparent) 99%, transparent 100%),
        linear-gradient(#07090C, #0A0D12 60%, #07090C);
    background-size: 100% 100%;
    opacity: .6;
    animation: none;
}

.marble::after {
    content: "";
    position: fixed;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    z-index: -1;
    pointer-events: none;
    width: calc(var(--horizon-radius)*2.2);
    height: var(--horizon-radius);
    background:
        radial-gradient(circle var(--horizon-radius) at 50% 100%, var(--horizon-core) 0 99%, transparent 100%),
        radial-gradient(240px 140px at 50% 100%, var(--horizon-glow), transparent 70%);
    -webkit-mask-image: linear-gradient(to top, #000 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, #000 60%, rgba(0, 0, 0, 0) 100%);
    filter: blur(.25px);
    opacity: .95;
}

.dark .marble::after {
    bottom: -2vh;
    width: min(80vw, 1200px);
    height: min(45vh, 520px);
    background-image:
        radial-gradient(circle var(--horizon-radius) at 50% 100%, var(--horizon-core) 0 98%, transparent 100%),
        radial-gradient(260px 160px at 50% 100%, var(--horizon-glow), transparent 70%);
    -webkit-mask-image: radial-gradient(125% 140% at 50% 100%, #000 46%, rgba(0, 0, 0, 0) 80%);
    mask-image: radial-gradient(125% 140% at 50% 100%, #000 46%, rgba(0, 0, 0, 0) 80%);
    opacity: .92;
    filter: saturate(1.02) contrast(1.02);
}

/* =========================== LAYOUT =========================== */
.wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--page) 85%, transparent);
    backdrop-filter: blur(8px)
}

.header-wrap {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    grid-template-columns: auto 1fr auto auto
}

/* Show/Hide header clusters based on orientation (aspect ratio) */
.header-desktop-only {
    display: none
}

.header-mobile-only {
    display: flex
}

/* Landscape (desktop): show full header pieces */
@media (min-aspect-ratio: 1/1) {
    .header-desktop-only {
        display: inline-flex
    }

    .header-mobile-only {
        display: none
    }
}

/* brand bits */
.logo-mark {
    display: block;
    height: 28px;
    width: auto
}

.brand {
    font-weight: 600;
    color: var(--ink)
}

.online {
    margin-right: auto
}

.nav {
    margin-left: auto;
    display: flex;
    gap: 8px
}

.hangman {
    display: flex;
    align-items: center;
    gap: 8px
}

.hide-sm {
    display: none
}

@media (min-width:768px) {
    .hide-sm {
        display: inline
    }
}

.locked .card {
    max-width: 680px;
    margin: 16vh auto;
    padding: 24px;
    border-radius: 24px;
    text-align: center
}

.card.clay {
    background: color-mix(in srgb, var(--card) 96%, transparent)
}

.unlocked {
    padding-top: 16px
}

/* =========================== COMPONENTS =========================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: color-mix(in srgb, var(--page) 70%, transparent);
}

.chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    display: inline-block;
    animation: pulse 1.2s infinite
}

@keyframes pulse {
    50% {
        opacity: .55
    }
}

/* Buttons (no underline) */
.btn {
    border-radius: 16px;
    padding: 10px 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
}

.btn:link,
.btn:visited,
.nav a {
    text-decoration: none
}

.btn-neo {
    background: linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(135deg, var(--prism-pink), var(--prism-apricot), var(--prism-lime), var(--prism-sky), var(--prism-lav)) border-box;
    border: 1px solid transparent;
    box-shadow: 6px 6px 14px rgba(34, 28, 25, .15), -6px -6px 14px rgba(255, 255, 255, .70);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-neo:hover {
    transform: translateY(-1px)
}

.btn-neo:active {
    transform: translateY(1px)
}

.btn-ghost {
    background: var(--page);
    box-shadow: inset 8px 8px 16px rgba(34, 28, 25, .08), inset -8px -8px 16px rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .6);
    font-weight: 500;
}

.btn.small {
    padding: 6px 10px;
    font-weight: 500
}

.btn[aria-disabled="true"] {
    opacity: .6;
    pointer-events: none
}

.btn-arrow {
    border: 1px solid rgba(255, 255, 255, .6);
    background: color-mix(in srgb, var(--page) 70%, transparent)
}

.theme-toggle {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .6);
    background: color-mix(in srgb, var(--page) 80%, transparent)
}

.theme-toggle .sun,
.theme-toggle .moon {
    width: 24px;
    height: 24px;
    border-radius: 999px
}

.theme-toggle.small .sun,
.theme-toggle.small .moon {
    width: 20px;
    height: 20px
}

.theme-toggle .sun {
    background: rgba(255, 255, 255, .7)
}

html.dark .theme-toggle .sun {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2)
}

html.dark .theme-toggle .moon {
    background: rgba(255, 255, 255, .18)
}

/* sr-only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

/* Hero layout controlled by aspect ratio */
.grid.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media (min-aspect-ratio: 1/1) {
    .grid.hero {
        grid-template-columns: 40% 60%
    }
}

.hero-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 520px
}

.cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px
}

.creator-pills {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    max-width: 420px
}

.creator .avatar {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    background: transparent
}

.creator .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px
}

.avatar--black {
    background: #000
}

/* Jantzen black backdrop */

/* ===== Demo shell ===== */
.demo {
    padding: 12px;
    border-radius: 16px
}

.demo-body {
    border-radius: 14px;
    padding: 8px
}

.demo-canvas {
    background: var(--page);
    border-radius: 12px;
    overflow: hidden;
    /* Portrait taller to fit two stacked tiles nicely; Landscape a bit shorter */
    height: min(68vh, 560px);
}

@media (min-aspect-ratio: 1/1) {
    .demo-canvas {
        height: min(56vh, 520px)
    }
}

/* =================== Dashboard Builder =================== */
.db-demo {
    position: relative;
    height: 100%;
    width: 100%
}

.db-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    background: color-mix(in srgb, var(--page) 70%, transparent);
    backdrop-filter: blur(6px);
}

.db-tools {
    margin-left: auto;
    display: flex;
    gap: 8px
}

/* No internal scroll; grid adapts by aspect ratio */
.db-grid {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: 40px;
    display: grid;
    gap: 12px;
    padding: 6px;
    grid-template-columns: 1fr;
    /* portrait: stacked */
    grid-auto-rows: minmax(200px, 1fr);
    overflow: hidden;
    /* no inner scroll */
}

@media (min-aspect-ratio: 1/1) {
    .db-grid {
        grid-template-columns: 1fr 1fr;
        /* desktop: 2 columns */
        grid-template-rows: 1fr 1fr;
        /* desktop: 2 rows   */
    }
}

.db-tile {
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    min-height: 200px
}

.db-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    background: color-mix(in srgb, var(--page) 70%, transparent);
}

.db-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink)
}

.db-handle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    opacity: .7
}

.db-handle i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink)
}

.db-tile-body {
    padding: 10px;
    background: var(--page);
    display: grid;
    place-items: stretch;
    min-height: 140px;
}

.db-tile-body svg {
    width: 100%;
    height: 100%;
    display: block
}

@keyframes hpTileLift {

    0%,
    22% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0)
    }

    23% {
        transform: translate(0, 0) scale(1.01);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .20)
    }

    55% {
        transform: translate(20px, 12px) scale(1.02);
        box-shadow: 0 16px 40px rgba(0, 0, 0, .24)
    }

    60% {
        transform: translate(12px, 8px) scale(1.01);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .18)
    }

    100% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0)
    }
}

@keyframes hpHandlePulse {

    0%,
    16% {
        opacity: .35;
        transform: scale(1)
    }

    22% {
        opacity: .9;
        transform: scale(1.1)
    }

    28% {
        opacity: 1;
        transform: scale(1.12)
    }

    55% {
        opacity: .9;
        transform: scale(1.08)
    }

    60% {
        opacity: .6;
        transform: scale(1.02)
    }

    100% {
        opacity: .35;
        transform: scale(1)
    }
}

.animate-lift {
    animation: hpTileLift 6s ease-in-out infinite
}

.animate-lift .db-handle {
    animation: hpHandlePulse 6s ease-in-out infinite;
    transform-origin: center
}

/* Cursor overlay */
.db-cursor {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 5
}

@keyframes hpCursorPath {
    0% {
        transform: translate(56px, 128px)
    }

    20% {
        transform: translate(230px, 170px)
    }

    28% {
        transform: translate(268px, 164px)
    }

    55% {
        transform: translate(308px, 184px)
    }

    60% {
        transform: translate(300px, 180px)
    }

    100% {
        transform: translate(56px, 128px)
    }
}

@keyframes hpCursorOpenVis {

    0%,
    22% {
        opacity: 1
    }

    23%,
    60% {
        opacity: 0
    }

    61%,
    100% {
        opacity: 1
    }
}

@keyframes hpCursorClosedVis {

    0%,
    22% {
        opacity: 0
    }

    23%,
    60% {
        opacity: 1
    }

    61%,
    100% {
        opacity: 0
    }
}

.cursor-open,
.cursor-closed {
    position: absolute;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25))
}

.cursor-open {
    animation: hpCursorOpenVis 6s linear infinite, hpCursorPath 6s ease-in-out infinite
}

.cursor-closed {
    animation: hpCursorClosedVis 6s linear infinite, hpCursorPath 6s ease-in-out infinite
}

/* simple widgets */
.db-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px
}

.db-list li {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.db-bignum {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink)
}

.db-donut {
    height: 100%;
    min-height: 160px;
    border-radius: 12px;
    background:
        conic-gradient(var(--prism-pink) 0 150deg, var(--prism-sky) 150deg 260deg, var(--prism-mint) 260deg 360deg);
    mask: radial-gradient(circle at 50% 50%, transparent 36%, black 37%);
}

.db-funnel {
    display: grid;
    gap: 6px
}

.db-funnel>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--page), rgba(255, 255, 255, .6));
    width: var(--w);
}

/* Bar chart */
.db-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    min-height: 160px;
    padding: 8px 10px;
    border-radius: 12px;
}

.db-bars i {
    display: block;
    flex: 0 0 14px;
    height: calc(var(--h, 50) * 1%);
    border-radius: 6px;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--prism-sky) 55%, var(--page) 45%) 0%,
            color-mix(in srgb, var(--prism-pink) 45%, var(--page) 55%) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .06);
}

/* ============================== Steps / CTA ============================== */
.steps {
    margin-top: 28px
}

.steps .lead {
    max-width: 680px;
    margin: 8px auto 0
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px
}

@media (min-aspect-ratio: 1/1) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.step {
    padding: 18px;
    border-radius: 16px
}

.step .pill {
    margin-top: 8px
}

.cta {
    margin-top: 24px;
    padding: 18px;
    border-radius: 20px;
    display: grid;
    gap: 12px
}

@media (min-aspect-ratio: 1/1) {
    .cta {
        grid-template-columns: 1fr auto;
        align-items: center
    }
}

.cta-actions {
    display: flex;
    gap: 10px
}

.footer {
    margin: 22px 0 60px;
    text-align: center
}

/* ============================== Modal ============================== */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: color-mix(in srgb, var(--ink) 18%, transparent)
}

.modal.show[aria-hidden="false"] {
    display: grid
}

.modal-card {
    width: min(92vw, 520px);
    border-radius: 24px;
    padding: 18px
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.modal-body {
    margin-top: 10px;
    display: grid;
    gap: 8px
}

.modal-body input {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: var(--page)
}