:root {
    /* --- Layout --- */
    --header-height: 150px;
    --nav-height: 50px;
    --footer-height: 50px;

    --container-padding: clamp(1rem, 4vw, 2rem);
    --container-width-narrow: 70ch;
    --container-width: 1200px;
    --container-width-wide: 1400px;

    /* --- Primitives (reference via semantic tokens, not directly in components) --- */
    --color-palette-base: oklch(from #536294 l c h);
    --color-accent-base: oklch(from var(--color-palette-base) l c calc(h - 20));
    --color-cta-base:     oklch(0.65 0.18  60);
    --color-success-base: oklch(0.65 0.18 145);
    --color-danger-base:  oklch(0.60 0.20  25);

    --color-palette-100: oklch(from var(--color-palette-base) .97 .02 h);
    --color-palette-200: oklch(from var(--color-palette-base) .92 .04 h);
    --color-palette-300: oklch(from var(--color-palette-base) .84 .07 h);
    --color-palette-400: oklch(from var(--color-palette-base) .73 .09 h);
    --color-palette-500: oklch(from var(--color-palette-base) .60 .10 h);
    --color-palette-600: oklch(from var(--color-palette-base) .47 .09 h);
    --color-palette-700: oklch(from var(--color-palette-base) .37 .08 h);
    --color-palette-800: oklch(from var(--color-palette-base) .27 .06 h);
    --color-palette-900: oklch(from var(--color-palette-base) .18 .04 h);
    --color-palette-950: oklch(from var(--color-palette-base) .11 .02 h);

    --color-accent-100: oklch(from var(--color-accent-base) .97 .02 h);
    --color-accent-200: oklch(from var(--color-accent-base) .92 .04 h);
    --color-accent-300: oklch(from var(--color-accent-base) .84 .07 h);
    --color-accent-400: oklch(from var(--color-accent-base) .73 .09 h);
    --color-accent-500: oklch(from var(--color-accent-base) .60 .10 h);
    --color-accent-600: oklch(from var(--color-accent-base) .47 .09 h);
    --color-accent-700: oklch(from var(--color-accent-base) .37 .08 h);
    --color-accent-800: oklch(from var(--color-accent-base) .27 .06 h);
    --color-accent-900: oklch(from var(--color-accent-base) .18 .04 h);
    --color-accent-950: oklch(from var(--color-accent-base) .11 .02 h);

    /* --- Semantic tokens: light mode --- */
    --color-bg:         var(--color-palette-100);
    --color-bg-surface: var(--color-palette-200);
    --color-bg-raised:  var(--color-palette-300);

    --color-text:         var(--color-palette-900);
    --color-text-muted:   var(--color-palette-700);
    --color-link:         var(--color-accent-600);
    --color-link-visited: var(--color-accent-700);
    --color-btn-text-primary: var(--color-accent-800);
    --color-btn-text-secondary: var(--color-palette-800);

    --gradient-primary-light-stop: var(--color-palette-100);
    --gradient-primary-dark-stop:  var(--color-palette-300);

    --gradient-accent-light-stop:  var(--color-accent-100);
    --gradient-accent-dark-stop:   var(--color-accent-300);

    --gradient-btn-primary-light-stop: var(--color-palette-300);
    --gradient-btn-primary-dark-stop: var(--color-palette-500);

    --gradient-btn-secondary-light-stop: var(--color-accent-300);
    --gradient-btn-secondary-dark-stop: var(--color-accent-500);

    --color-nav-border:    var(--color-accent-900);

    --color-footer-bg:     var(--color-accent-500);
    --color-footer-text:   var(--color-palette-950);
}

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

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) var(--nav-height) 1fr var(--footer-height);
    min-height: 100dvh;
    font-family: 'DM Sans', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', sans-serif;
}

p {
    margin: 15px 0;
}

a {
    color: var(--color-link);
    text-underline-offset: 3px;

    &:visited {
        color: var(--color-link-visited);
    }

    &:hover {
        color: var(--color-link);
        opacity: 0.75;
    }
}

section {
    background-color: var(--color-bg-surface);
    margin: 80px 2rem;
    border-radius: 1.5rem;
    corner-shape: notch;
    border: var(--color-bg-raised) solid 2px;
}

ul.primary-statement {
    margin: 1rem 0;

    li {
        margin: .5rem;
        font-size: 1.2rem;
        list-style: disclosure-closed;
    }
}

.secondary-statement {
    color: var(--color-text-muted);
    text-align: center;

    h2 {
        margin-top: 2rem;
        font-size: 1.2rem;
    }

    p {
        margin:0;
    }
}

.btn {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: .9rem 0;
    margin: 1rem 0;
    width: 100%;
    font-size: 1.2rem;
    background-image: linear-gradient(
            120deg,
            var(--gradient-btn-primary-light-stop),
            var(--gradient-btn-primary-dark-stop)
    );
    border: var(--color-bg-raised) solid 3px;
    color: var(--color-btn-text-primary);
    border-radius: .8rem;
    transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;

    &.btn-cta {
        background-image: linear-gradient(
                120deg,
                oklch(from var(--color-cta-base) calc(l + .05) c h),
                oklch(from var(--color-cta-base) calc(l - .20) calc(c + .05) calc(h))
            )!important;
        color: var(--color-palette-200)!important;
        border-color: oklch(from var(--color-cta-base) calc(l - .25) c h);
    }

    &:hover {
        filter: brightness(1.12);
        transform: translateY(-2px);
        box-shadow: 0 4px 14px oklch(0 0 0 / 0.15);
    }

    &.btn-ghost {
        background: transparent;
        border-color: var(--color-palette-500);
        color: var(--color-text);

        &:hover {
            filter: none;
            background-color: var(--color-bg-raised);
        }
    }

    &.btn-success {
        background-image: linear-gradient(
            120deg,
            oklch(from var(--color-success-base) calc(l + .05) c h),
            oklch(from var(--color-success-base) calc(l - .20) calc(c + .05) h)
        );
        color: oklch(from var(--color-success-base) .15 .04 h);
        border-color: oklch(from var(--color-success-base) calc(l - .25) c h);
    }

    &.btn-danger {
        background-image: linear-gradient(
            120deg,
            oklch(from var(--color-danger-base) calc(l + .05) c h),
            oklch(from var(--color-danger-base) calc(l - .20) calc(c + .05) h)
        );
        color: oklch(from var(--color-danger-base) .15 .04 h);
        border-color: oklch(from var(--color-danger-base) calc(l - .25) c h);
    }
}

.btn-container {
    display: grid;
    justify-items: center;
}

.btn.btn-inline {
    width: auto;
    padding-inline: 2.5rem;
}

/* ─── Hero ──────────────────────────────────────────────────── */

.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2rem;
    /* Reset default section styles */
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: black;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-card {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    width: 100%;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    background: linear-gradient(to bottom, oklch(0 0 0 / 0.80), oklch(0 0 0 / 0.50));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    border: 2px solid oklch(from var(--color-cta-base) calc(l - .10) c h);
    border-top-color: oklch(from var(--color-cta-base) calc(l + .05) c h);
    border-left-color: oklch(from var(--color-cta-base) calc(l + .05) c h);
    box-shadow:
        0 0 25px oklch(from var(--color-cta-base) l c h / 0.35),
        0 0 50px oklch(from var(--color-cta-base) l c h / 0.20);
}

.hero-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(1 0 0 / 0.75);
    margin: 0;
}

.hero-headline {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    background: linear-gradient(to right, #dbeafe, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-logo {
    width: clamp(180px, 35%, 320px);
}

.hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.btn.hero-btn-primary {
    background: oklch(1 0 0 / 0.90);
    border-color: oklch(1 0 0 / 0.50);
    color: var(--color-palette-900);
    width: auto;
    padding-inline: 2rem;

    &:hover {
        filter: none;
        background: oklch(1 0 0 / 1);
        outline: 2px solid oklch(from var(--color-cta-base) l c h / 0.90);
        outline-offset: 2px;
    }
}

.btn.hero-btn-ghost {
    background: oklch(1 0 0 / 0.10);
    border-color: oklch(1 0 0 / 0.30);
    color: oklch(1 0 0);
    width: auto;
    padding-inline: 2rem;
    backdrop-filter: blur(4px);

    &:hover {
        filter: none;
        background: oklch(1 0 0 / 0.20);
        outline: 2px solid oklch(from var(--color-cta-base) l c h / 0.90);
        outline-offset: 2px;
    }
}

/* ─── Home Service Cards ────────────────────────────────────── */

.service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-block: 2rem;
}

.service-card {
    background-color: var(--color-bg-raised);
    border: oklch(from var(--color-bg-raised) calc(l + .10) calc(c + .05) h) solid 3px;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    .btn {
        margin-top: auto;
    }
}

.global-header {
    background-image: linear-gradient(180deg, var(--gradient-primary-dark-stop), var(--gradient-primary-light-stop));
}

.header-inner {
    display: grid;
    height: 100%;
    grid-template-columns: 300px 1fr;
    align-content: center;
    align-items: center;
    gap: 2rem;
}

.header-rotator {
    position: relative;
    flex: 1;
    height: 2em;
    text-align: center;
    width: 100%;
}

.header-rotator span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-text-muted);
    animation: quip-fade 16s infinite;
}

/* 4 quips × 4s each = 16s cycle */
.header-rotator span:nth-child(1) { animation-delay:  0s; }
.header-rotator span:nth-child(2) { animation-delay:  4s; }
.header-rotator span:nth-child(3) { animation-delay:  8s; }
.header-rotator span:nth-child(4) { animation-delay: 12s; }

@keyframes quip-fade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    20%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

.global-nav {
    position: sticky;
    top: 0;
    background-image: linear-gradient(180deg, var(--gradient-accent-light-stop), var(--gradient-accent-dark-stop));
    border-bottom: solid 3px var(--color-nav-border);
}

.global-nav .container {
    height: 100%;
    display: flex;
    justify-content: center;
}
.global-logo {
    width: 300px;
}

.logo-light {
    display: block;
}
.logo-dark {
    display: none;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    height: 100%;
    width: 100%;
}

nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
}

nav a:hover {
    color: var(--color-text-muted);
}

nav a.active {
    color: var(--color-text-muted);
    border-bottom: 2px solid currentColor;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    margin-left: auto;

    span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--color-text);
        border-radius: 2px;
        transition: transform 150ms ease, opacity 150ms ease;
    }

    &[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    &[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    &[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

main {
    background-color: var(--color-bg);
}

main > section {
    padding-block: 3rem;
}

footer {
    display: flex;
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    text-align: center;
    justify-content: center;
    align-items: center;
}

.container,
.container-narrow,
.container-wide {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container        { max-width: var(--container-width); }
.container-narrow { max-width: var(--container-width-narrow); }
.container-wide   { max-width: var(--container-width-wide); }

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:         var(--color-palette-950);
        --color-bg-surface: var(--color-palette-900);
        --color-bg-raised:  var(--color-palette-800);

        --color-text:         var(--color-palette-100);
        --color-text-muted:   var(--color-palette-300);
        --color-link:         var(--color-accent-400);
        --color-link-visited: var(--color-accent-300);
        --color-btn-text-primary: var(--color-accent-200);
        --color-btn-text-secondary: var(--color-palette-200);

        --gradient-primary-light-stop: var(--color-palette-700);
        --gradient-primary-dark-stop:  var(--color-palette-950);

        --gradient-accent-light-stop:  var(--color-accent-700);
        --gradient-accent-dark-stop:   var(--color-accent-950);

        --gradient-btn-primary-light-stop: var(--color-palette-500);
        --gradient-btn-primary-dark-stop: var(--color-palette-700);

        --gradient-btn-secondary-light-stop: var(--color-accent-500);
        --gradient-btn-secondary-dark-stop: var(--color-accent-700);

        --color-nav-border:    var(--color-accent-300);

        --color-footer-bg:     var(--color-accent-900);
        --color-footer-text:   var(--color-accent-100);
    }

    .logo-light {
        display: none;
    }
    .logo-dark {
        display: block;
    }
}

/* ─── Process: Zigzag ───────────────────────────────────────── */

.process-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-block: 1rem;
}

.process-step {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-raised);
    border: oklch(from var(--color-bg-raised) calc(l + .10) calc(c + .05) h) solid 3px;
    border-radius: 8px;
    gap: 3rem;
    padding: 2rem;
}

.process-step > * {
    flex: 1;
}

/* Even steps: illustration moves left, text stays right */
.process-step:nth-child(even) .process-step-illustration {
    order: -1;
}

.process-step-illustration {
    border-radius: 8px;
    min-height: 200px;
    align-self: stretch;
    display: flex;
    justify-content: center;

    img {
        max-width: 250px;
    }
}

/* ─── Website Packages ──────────────────────────────────────── */

.package-features {
    padding-left: 1.5rem;
    margin-block: 1.5rem;
}

.package-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-block: 2rem;
}

.package-tier {
    background-color: var(--color-bg-raised);
    border: oklch(from var(--color-bg-raised) calc(l + .10) calc(c + .05) h) solid 3px;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.package-price {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: auto;
}

/* ─── Hosting Plans ─────────────────────────────────────────── */

.plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-block: 2rem;
}

.plan-card {
    background-color: var(--color-bg-raised);
    border: oklch(from var(--color-bg-raised) calc(l + .10) calc(c + .05) h) solid 3px;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    .btn {
        margin-top: auto;
    }
}

.plan-price {
    font-size: 1.25rem;
    font-weight: 700;
}

.plan-card > ul {
    padding-left: 1.5rem;
    flex: 1;
}

/* ─── Add-On Cards ──────────────────────────────────────────── */

.addon-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-block: 2rem;
}

.addon-card {
    background-color: var(--color-bg-raised);
    border: oklch(from var(--color-bg-raised) calc(l + .10) calc(c + .05) h) solid 3px;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    ul {
        padding-left: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }
}

.addon-card-illustration {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
}

.addon-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.addon-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-bg-surface);
}

/* ─── Ruled List (add-ons, disclosures) ─────────────────────── */

.addon-list,
.disclosure-list {
    list-style: none;
}

.addon-item,
.disclosure-item {
    padding-block: 1.5rem;
}

.addon-item + .addon-item,
.disclosure-item + .disclosure-item {
    border-top: 1px solid var(--color-bg-raised);
}

.addon-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.addon-price {
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ─── Custom Work Rate ──────────────────────────────────────── */

.custom-work-rate {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-block: 1rem;

    span {
        font-size: 1.25rem;
        font-weight: 400;
        color: var(--color-text-muted);
    }
}

/* ─── About Page ────────────────────────────────────────────── */

.about-intro {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.about-headshot {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 3px solid var(--color-bg-raised);
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.15);
}

@media (max-width: 768px) {
    .about-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ─── Contact Form ──────────────────────────────────────────── */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block: 1.5rem;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-row label {
    font-weight: 500;
    font-size: 0.95rem;
}

.form-row input,
.form-row textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--color-bg);
    border: 2px solid var(--color-bg-raised);
    border-radius: 0.5rem;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 150ms ease;

    &:focus {
        outline: none;
        border-color: var(--color-accent-500);
    }
}

.form-row textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-error {
    color: oklch(from var(--color-danger-base) calc(l - .10) c h);
    background-color: oklch(from var(--color-danger-base) .95 .03 h);
    border: 1px solid oklch(from var(--color-danger-base) .80 .08 h);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

/* ─── Definition Lists ──────────────────────────────────────── */

dl {
    border-left: 3px solid var(--color-bg-raised);
    padding-left: 1.5rem;
    margin-block: 1rem;
}

dt {
    font-weight: 600;
    margin-top: 1rem;
}

dt:first-child {
    margin-top: 0;
}

dd {
    margin-left: 0;
    color: var(--color-text-muted);
}

/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Body grid: let header and nav size to content */
    body {
        grid-template-rows: auto auto 1fr auto;
    }

    /* Header: stack logo above rotator */
    .header-inner {
        grid-template-columns: 1fr;
        height: auto;
        padding-block: 1.25rem;
        text-align: center;
        gap: 0.5rem;
    }

    .global-logo {
        width: 200px;
        margin-inline: auto;
    }

    .header-rotator span {
        font-size: 1.1rem;
    }

    /* Nav: hamburger */
    .global-nav .container {
        flex-wrap: wrap;
        height: auto;
        padding-block: 0.5rem;
        align-items: center;
    }

    .nav-toggle {
        display: flex;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding-block: 0.25rem 0.75rem;

        &.is-open {
            display: flex;
        }
    }

    nav ul li {
        width: 100%;
    }

    nav a {
        display: block;
        padding-block: 0.6rem;
    }

    nav a.active {
        border-bottom: none;
        font-weight: 700;
    }

    /* Sections: tighter margins */
    section {
        margin: 1.5rem 0.5rem;
    }

    /* Buttons: inline buttons go full-width on mobile */
    .btn.btn-inline {
        width: 100%;
        padding-inline: 0;
    }

    /* Process steps */
    .process-step {
        flex-direction: column;
    }

    .process-step .process-step-illustration {
        order: -1;
        width: 100%;
        min-height: 140px;
    }

    /* Packages, plan cards, add-on cards, and service cards */
    .package-tiers,
    .plan-cards,
    .addon-cards,
    .service-cards {
        grid-template-columns: 1fr;
    }

    /* Hero */
    .hero-section {
        padding: 1rem;
        min-height: 70vh;
    }

    .hero-card {
        padding: 2rem 1.25rem;
        gap: 1rem;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;

        .btn {
            width: 100%;
            padding-inline: 0;
        }
    }

    /* Add-on header: stack title and price on very narrow screens */
    .addon-header {
        flex-wrap: wrap;
    }
}