:root {
    /* Light theme: Paper + campfire warmth */
    --paper-0: #fbf7ef; /* page */
    --paper-1: #f6f0e3; /* surfaces */
    --paper-2: #efe6d3; /* borders */
    --ink: #1b1a17; /* primary text */
    --ink-2: rgba(27, 26, 23, 0.74); /* secondary */
    --ink-3: rgba(27, 26, 23, 0.58); /* subtle */

    /* Accent: amber / campfire */
    --amber: #E07A1F;
    --amber-2: #F2A14B;
    --ember: #B24A12;

    /* Music / calm contrast */
    --slate: #243047; /* deep blue-gray */
    --slate-soft: rgba(36, 48, 71, 0.10);

    --shadow: 0 18px 44px rgba(25, 18, 10, 0.10);
    --shadow-soft: 0 12px 28px rgba(25, 18, 10, 0.08);
    --r: 18px;
    --max: 1080px;

    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --fs-h1: clamp(34px, 4.1vw, 46px);
    --fs-h2: 18px;
    --fs-body: 15px;

    --focus: 0 0 0 4px rgba(224, 122, 31, 0.24);
    --anchor-offset: 78px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: /* Paper grain (no images): subtle layered lines */ radial-gradient(900px 650px at 18% 12%, rgba(224, 122, 31, 0.12), transparent 62%),
    radial-gradient(900px 650px at 82% 28%, rgba(242, 161, 75, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.00) 30%),
    repeating-linear-gradient(
            0deg,
            rgba(27, 26, 23, 0.015) 0px,
            rgba(27, 26, 23, 0.015) 1px,
            transparent 1px,
            transparent 6px
    ),
    linear-gradient(180deg, var(--paper-0), #f9f3e6);
    overflow-x: hidden;
}

a {
    color: inherit
}

section {
    margin-top: 12px
}

section #top {
    margin-top: 0px
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px 16px 36px
}

/* Header */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 247, 239, 0.78);
    border-bottom: 1px solid rgba(36, 48, 71, 0.10);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .topbar {
        backdrop-filter: blur(10px);
        background: rgba(251, 247, 239, 0.64);
    }
}

.topbar .inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 14px;
    padding: 4px 6px;
    white-space: nowrap;
}

.brand:focus-visible {
    outline: none;
    box-shadow: var(--focus)
}

.mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    border: 1px solid rgba(27, 26, 23, 0.10);
    box-shadow: 0 14px 32px rgba(224, 122, 31, 0.18);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.brand strong {
    font-weight: 820;
    letter-spacing: 0.2px;
    line-height: 1
}

.brand small {
    display: block;
    font-size: 12px;
    margin-top: 2px
}


.text-link {
    text-decoration: none;
    background: linear-gradient(180deg, transparent 62%, rgba(224, 122, 31, 0.18) 62%);
    padding: 0 2px;
    border-radius: 6px;
}

.text-link:hover {
    border-color: rgba(36, 48, 71, 0.14);
    padding: 0 2px;
    border-radius: 6px;
    background: rgba(224, 122, 31, 0.18)
}

.text-link:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-color: rgba(224, 122, 31, 0.28)
}

/* Type */
h1 {
    font-family: var(--serif);
    font-size: var(--fs-h1);
    line-height: 1.05;
    margin: 0 0 12px;
    letter-spacing: 0.1px;
}

h2 {
    font-family: var(--serif);
    font-size: var(--fs-h2);
    margin: 0 0 8px;
    color: rgba(27, 26, 23, 0.92);
}

h3 {
    font-size: 16px;
    margin: 14px 0 6px;
    color: rgba(27, 26, 23, 0.90)
}

p, li, a, summary, small {
    font-size: var(--fs-body);
    line-height: 1.6
}

p {
    margin: 0;
    color: var(--ink-2)
}


.accent {
    color: rgba(27, 26, 23, 0.94);
    font-weight: 800
}

/* Panels / Cards */
.panel {
    border-radius: var(--r);
    background: rgba(246, 240, 227, 0.72);
    border: 1px solid rgba(36, 48, 71, 0.12);
    box-shadow: var(--shadow);
    padding: 14px;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns:1fr
    }

    nav {
        display: none
    }
}

.ctaRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(36, 48, 71, 0.14);
    text-decoration: none;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
    background: rgba(255, 255, 255, 0.38);
    font-weight: 800;
    white-space: nowrap;
    color: rgba(27, 26, 23, 0.92);
}

.btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(36, 48, 71, 0.18)
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus)
}

.btnPrimary {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    border-color: rgba(27, 26, 23, 0.10);
    color: #22140b;
    box-shadow: 0 18px 38px rgba(224, 122, 31, 0.16);
}

.btnPrimary:hover {
    background: linear-gradient(135deg, #e8892f, #f7b468)
}

.icon {
    width: 18px;
    height: 18px;
    opacity: 0.95
}

/* Feature list */
.features {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

@media (max-width: 900px) {
    .features {
        grid-template-columns:1fr
    }
}

ul.clean {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px
}

ul.clean li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(27, 26, 23, 0.84)
}

.tick {
    width: 18px;
    height: 18px;
    border-radius: 8px;
    background: rgba(224, 122, 31, 0.14);
    border: 1px solid rgba(224, 122, 31, 0.22);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 1px;
}

.tick svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: rgba(27, 26, 23, 0.88);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

footer {
    margin-top: 14px;
    color: var(--ink-3);
    font-size: 12.75px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}


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

    * {
        scroll-behavior: auto !important
    }

    .btn, nav a {
        transition: none
    }
}