:root {
    --paper: #f6efe3;
    --paper-warm: #efe1cb;
    --paper-deep: #dfc7a3;
    --ink: #2a211b;
    --muted: #74675c;
    --brown: #33261f;
    --brown-2: #211813;
    --brown-3: #15110e;
    --gold: #c7954f;
    --gold-light: #e2c38b;
    --line: rgba(79, 57, 39, .16);
    --shadow: rgba(42, 28, 18, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 13% 18%, rgba(160,112,68,.09), transparent 28rem),
        radial-gradient(circle at 86% 66%, rgba(160,112,68,.07), transparent 30rem),
        linear-gradient(180deg, #fbf7ef 0%, var(--paper) 48%, #f2e8d9 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .24;
    background-image:
        repeating-linear-gradient(90deg, rgba(65,47,31,.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(65,47,31,.018) 0 1px, transparent 1px 6px);
}
a { color: inherit; }

/* Navigation */
.landing-nav { z-index: 1000; }
.landing-nav-inner {
    min-height: 56px;
    padding: 7px clamp(18px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: 26px;
    color: #f7ecda;
    background: rgba(43,31,25,.96);
    border-bottom: 1px solid rgba(235,210,169,.13);
    box-shadow: 0 7px 22px rgba(20,13,9,.15);
}
.landing-nav-sticky { background: rgba(38,27,21,.98); }
.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f8ead2;
    font: 700 18px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .08em;
    text-decoration: none;
}
.landing-brand-mark {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(230,198,146,.52);
    border-radius: 50%;
    font-size: 14px;
}
.landing-nav-links { display: flex; gap: 24px; margin-left: auto; }
.landing-nav-links a { color: #d9cbb9; text-decoration: none; font-size: 12px; font-weight: 700; }
.landing-nav-links a:hover { color: #fff4df; }
.landing-nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.landing-lang-button { border: 0; background: transparent; color: #d9cbb9; font: 800 11px/1 system-ui, sans-serif; cursor: pointer; }
.landing-lang-menu { min-width: 120px; padding: 8px; border-radius: 9px; background: #fff9ee; border: 1px solid var(--line); box-shadow: 0 18px 45px rgba(30,22,16,.18); }
.landing-lang-menu a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; font: 800 12px/1.2 system-ui, sans-serif; }
.landing-lang-menu a:hover, .landing-lang-menu a.active { background: #ead8bd; }
.landing-nav-cta, .landing-primary {
    background: linear-gradient(180deg, #b98749, #8b5d2f) !important;
    border: 1px solid #d0a367 !important;
    color: #fff8eb !important;
    border-radius: 7px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 3px 0 rgba(65,38,19,.35);
}
.landing-nav-cta { min-height: 35px; line-height: 33px; padding: 0 16px; font-size: 11px; }
.landing-primary:hover { filter: brightness(1.06); }
.landing-secondary {
    border-radius: 7px;
    border-color: rgba(75,52,34,.35) !important;
    color: var(--ink) !important;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(255,249,238,.76) !important;
}

/* Hero */
.landing-hero {
    position: relative;
    min-height: clamp(510px, 62vw, 760px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #e4cfad;
    border-bottom: 1px solid rgba(69,47,30,.27);
}
.landing-hero-art {
    position: absolute;
    inset: 0;
    background: url('/assets/hero-room.webp') center 48% / cover no-repeat;
    filter: sepia(.08) contrast(.97) saturate(.82);
    transform: scale(1.025);
}
.landing-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(231,211,180,.05) 0, rgba(237,219,191,.78) 33%, rgba(237,219,191,.9) 50%, rgba(237,219,191,.75) 67%, rgba(231,211,180,.04) 100%),
        linear-gradient(180deg, rgba(54,37,27,.03), rgba(54,37,27,.1));
}
.landing-hero-inner { position: relative; z-index: 2; width: 100%; padding-block: 60px 86px; }
.landing-hero-copy { max-width: 620px; margin: 0 auto; padding: 42px 35px; text-shadow: 0 1px rgba(255,255,255,.35); }
.landing-ornament { display: flex; align-items: center; justify-content: center; gap: 11px; color: rgba(80,55,37,.5); margin-bottom: 12px; }
.landing-ornament span { width: 58px; height: 1px; background: currentColor; }
.landing-ornament i { font-style: normal; font-size: 11px; }
.landing-hero-wordmark {
    margin: 0;
    font: 700 clamp(54px, 7vw, 96px)/.92 Georgia, "Times New Roman", serif;
    letter-spacing: .045em;
    color: #34261e;
}
.landing-hero-subtitle {
    margin-top: 17px;
    font: 700 clamp(16px, 1.7vw, 23px)/1.35 Georgia, "Times New Roman", serif;
    letter-spacing: .14em;
    color: #4d382b;
}
.landing-hero-text { max-width: 590px; margin: 20px auto 0; color: #57483d; font: 500 clamp(15px,1.4vw,18px)/1.6 Georgia, serif; }
.landing-hero-actions { margin-top: 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.landing-hero-meta { margin-top: 18px; color: #6f5d4d; font-size: 11px; font-weight: 800; letter-spacing: .08em; }

/* Shared typography */
.landing-kicker { margin-bottom: 12px; color: #986234; font-size: 11px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.landing-kicker-light { color: #d6b378; }
.landing-h2 { margin: 0 0 18px; color: var(--ink); font: 700 clamp(36px, 4.5vw, 62px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.landing-copy, .landing-wide-lead { color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; }
.landing-copy { max-width: 700px; }
.landing-wide-lead { max-width: 850px; margin: 0 auto; }
.landing-light { color: #fbefdb; }
.landing-muted-light { color: #c9baa8; }
.landing-section-heading { max-width: 930px; margin: 0 auto clamp(38px,5vw,64px); }

/* Real-app screenshot frames */
.landing-browser {
    overflow: hidden;
    border: 1px solid rgba(68,48,32,.3);
    border-radius: 13px;
    background: #fffaf1;
    box-shadow: 0 28px 70px var(--shadow), 0 2px 0 rgba(255,255,255,.7) inset;
}
.landing-browser-top {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #342820;
    border-bottom: 1px solid rgba(0,0,0,.18);
    color: #d9c7ad;
}
.landing-browser-dots { display: flex; gap: 5px; }
.landing-browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #a98459; opacity: .8; }
.landing-browser-title { margin-left: auto; margin-right: auto; font-size: 9px; letter-spacing: .07em; opacity: .8; }
.landing-browser img { display: block; width: 100%; height: auto; }
.landing-browser-dark { border-color: rgba(219,185,128,.24); background: #0f0c0a; box-shadow: 0 38px 95px rgba(0,0,0,.45); }
.landing-browser-dark .landing-browser-top { background: #130f0c; }

/* Catalogue showcase */
.landing-catalog-section { position: relative; z-index: 3; padding: 0 0 clamp(70px,8vw,120px); }
.landing-browser-catalog { margin-top: clamp(-78px,-6vw,-46px); background: #f8f4ed; }
.landing-browser-catalog img { aspect-ratio: 2048 / 1280; object-fit: cover; object-position: top center; }
.landing-catalog-section .landing-section-heading { margin-top: clamp(58px,7vw,90px); }
.landing-feature-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.landing-feature-card {
    min-height: 210px;
    padding: 23px 18px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,250,241,.75);
    box-shadow: 0 10px 28px rgba(57,40,27,.055);
}
.landing-feature-icon { height: 42px; display: grid; place-items: center; color: #775036; font: 700 28px/1 Georgia, serif; }
.landing-feature-card h3 { margin: 12px 0 10px; color: #3a2a20; font: 700 20px/1.05 Georgia, serif; }
.landing-feature-card p { margin: 0; color: #76685d; font-size: 12px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* Interactive grille */
.landing-grille-detail { position: relative; background: rgba(255,255,255,.24); border-block: 1px solid var(--line); }
.landing-split { position: relative; z-index: 2; }
.landing-feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.landing-feature-list span, .landing-sync-map > * {
    padding: 8px 11px;
    border: 1px solid rgba(72,54,39,.17);
    border-radius: 999px;
    background: rgba(255,255,255,.54);
    color: #655548;
    font-size: 11px;
    font-weight: 800;
}

/* Sync */
.landing-sync-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #f3e8d6, #f8f1e6); }
.landing-device-stage { position: relative; min-height: clamp(310px,39vw,560px); max-width: 1160px; margin: 0 auto; }
.landing-device { position: absolute; filter: drop-shadow(0 25px 28px rgba(55,38,25,.16)); }
.landing-device-screen { overflow: hidden; background: #faf7f1; border: 7px solid #27221f; }
.landing-device-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.landing-device-laptop { left: 3%; bottom: 8%; width: 54%; }
.landing-device-laptop .landing-device-screen { aspect-ratio: 16 / 10; border-radius: 13px 13px 4px 4px; }
.landing-device-laptop .landing-device-base { width: 112%; height: 13px; margin-left: -6%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#d8d8d5,#999995); box-shadow: inset 0 2px rgba(255,255,255,.7); }
.landing-device-tablet { right: 13%; bottom: 8%; width: 31%; z-index: 2; }
.landing-device-tablet .landing-device-screen { aspect-ratio: 4 / 3; border-width: 9px; border-radius: 17px; }
.landing-device-phone { right: 1%; bottom: 5%; width: 11.5%; z-index: 4; }
.landing-device-phone .landing-device-screen { aspect-ratio: 9 / 19.2; border-width: 7px; border-radius: 21px; }
.landing-device-phone .landing-device-screen img { object-position: top; }
.landing-sync-orbit { position: absolute; left: 64%; top: 8%; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; color: #fff3df; background: #46342a; box-shadow: 0 8px 22px rgba(57,40,27,.25); z-index: 5; }
.landing-sync-map { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.landing-sync-map strong { background: #3d2d24; color: #fff5e6; border-color: #3d2d24; }

/* Performance */
.landing-performance { position: relative; overflow: hidden; color: #fff8ed; background: radial-gradient(circle at 60% 18%, rgba(150,93,49,.2), transparent 34rem), linear-gradient(150deg, #211914, #0f0c0a 72%); }
.landing-performance .landing-browser { position: relative; z-index: 2; }
.landing-performance-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.landing-performance-points span { padding: 7px 11px; border: 1px solid rgba(223,190,134,.2); border-radius: 999px; color: #cfbfae; font-size: 11px; font-weight: 800; }

/* Decorative players only when there is genuinely spare screen width. */
.landing-side-illustration { display: none; position: absolute; bottom: -40px; z-index: 1; pointer-events: none; user-select: none; opacity: .25; }
.landing-side-illustration img { display: block; max-height: 640px; width: auto; }
.landing-side-illustration-left { left: -190px; }
.landing-side-illustration-right { right: -185px; }

/* Voicings */
.landing-voicing-section { border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(233,215,187,.46), rgba(255,255,255,.18)); }
.landing-instruments { margin-top: 28px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.landing-instrument { position: relative; isolation: isolate; min-height: 88px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(249,240,225,.42)); box-shadow: 0 7px 20px rgba(62,42,28,.035); color: #2f2119; font-weight: 800; }
.landing-instrument::before { content: ""; position: absolute; z-index: -1; left: -18px; top: 50%; width: 112px; height: 112px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(164,112,62,.10), rgba(164,112,62,.035) 48%, transparent 72%); pointer-events: none; }
.landing-instrument img { flex: 0 0 auto; width: 66px; height: 66px; object-fit: contain; transform: scale(var(--instrument-scale,1)); transform-origin: center; filter: drop-shadow(0 3px 4px rgba(59,39,25,.10)) saturate(.9) contrast(1.03); transition: transform .22s ease, filter .22s ease; }
.landing-instrument-guitar { --instrument-scale: .94; }
.landing-instrument-ukulele { --instrument-scale: 1.04; }
.landing-instrument-cavaquinho { --instrument-scale: 1.00; }
.landing-instrument-piano { --instrument-scale: 1.08; }
@media (hover:hover) and (pointer:fine) {
    .landing-instrument:hover img { transform: translateY(-2px) scale(var(--instrument-scale,1)); filter: drop-shadow(0 6px 7px rgba(59,39,25,.14)) saturate(.95) contrast(1.05); }
}

/* Learning / teacher / ensembles */
.landing-cards-section { background: rgba(255,255,255,.28); border-bottom: 1px solid var(--line); }
.landing-card { height: 100%; padding: clamp(24px,3vw,37px); border-radius: 13px; border: 1px solid var(--line); background: #fff9ef; box-shadow: 0 15px 40px rgba(53,38,26,.06); }
.landing-card-no { color: #ac7c43; font: 900 11px/1 system-ui,sans-serif; letter-spacing: .18em; }
.landing-card h3 { margin: 18px 0 12px; color: #35271f; font: 700 clamp(27px,2.7vw,38px)/1.04 Georgia,serif; letter-spacing: -.03em; }
.landing-card p { color: var(--muted); line-height: 1.65; }
.landing-card a { color: #9a6136; font-weight: 900; text-decoration: none; }

.landing-swingbooks {
    background: linear-gradient(90deg, #ddbd8d, #f0dcb9 45%, #d2aa76);
    border-block: 1px solid rgba(78,54,36,.18);
}
.landing-swingbooks .landing-h2 { max-width: 760px; }

/* Final CTA */
.landing-final { position: relative; overflow: hidden; min-height: 390px; display: grid; place-items: center; background: #302219; }
.landing-final-art { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(48,34,25,.93),rgba(48,34,25,.7) 50%,rgba(48,34,25,.93)), url('/assets/hero-room.webp') center 62% / cover no-repeat; filter: sepia(.1) saturate(.72); opacity: .78; }
.landing-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(32,22,17,.18),rgba(32,22,17,.62)); }
.landing-final-inner { position: relative; z-index: 2; }
.landing-final .landing-wide-lead { margin-bottom: 0; }
.landing-primary-gold { background: linear-gradient(180deg,#c99755,#966333) !important; }
.landing-secondary-light { color: #f6ead8 !important; border-color: rgba(244,224,193,.35) !important; background: rgba(37,27,21,.58) !important; }

/* Existing footer shell */
.landing-footer { padding: 30px 0; background: #17120f; color: #d8d0c5; font-size: 11px; }
.landing-footer-links { display: flex; gap: 15px; flex-wrap: wrap; }
.landing-footer-links a { color: #d8d0c5; text-decoration: none; }
.landing-dev-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); color: #817a73; font-size: 9px; }
.landing-dev-note code { color: #c3a370; }

@media (min-width: 1740px) {
    .landing-side-illustration { display: block; }
}

@media (max-width: 1199px) {
    .landing-feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .landing-device-stage { min-height: 430px; }
}

@media (max-width: 959px) {
    .landing-nav-inner { min-height: 54px; padding-inline: 15px; }
    .landing-nav-actions { margin-left: auto; }
    .landing-nav-cta { padding-inline: 12px; }
    .landing-hero { min-height: 560px; }
    .landing-hero-art { background-size: auto 100%; }
    .landing-hero-shade { background: rgba(238,220,192,.79); }
    .landing-hero-copy { max-width: 600px; padding-inline: 18px; }
    .landing-browser-catalog { margin-top: -52px; }
    .landing-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .landing-feature-card { min-height: 180px; }
    .landing-device-stage { min-height: 390px; }
    .landing-device-laptop { left: 0; width: 60%; }
    .landing-device-tablet { right: 8%; width: 34%; }
    .landing-device-phone { width: 14%; }
}

@media (max-width: 639px) {
    .landing-brand span:last-child { display: none; }
    .landing-nav-cta { font-size: 10px; }
    .landing-hero { min-height: 500px; }
    .landing-hero-art { background-position: 50% 50%; opacity: .78; }
    .landing-hero-copy { padding-block: 48px 34px; }
    .landing-hero-wordmark { font-size: clamp(45px,14vw,64px); }
    .landing-hero-subtitle { font-size: 14px; }
    .landing-h2 { font-size: clamp(34px,10vw,47px); }
    .landing-copy, .landing-wide-lead { font-size: 16px; }
    .landing-browser { border-radius: 9px; }
    .landing-browser-top { height: 25px; }
    .landing-browser-catalog { margin-top: -35px; }
    .landing-browser-catalog img { aspect-ratio: 1.2; object-fit: cover; object-position: top left; }
    .landing-feature-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
    .landing-feature-card { min-height: 170px; padding: 20px 13px; }
    .landing-feature-card h3 { font-size: 17px; }
    .landing-feature-card p { font-size: 11px; }
    .landing-device-stage { min-height: 330px; margin-inline: -18px; }
    .landing-device-laptop { left: -8%; bottom: 15%; width: 72%; }
    .landing-device-tablet { right: 2%; bottom: 14%; width: 39%; }
    .landing-device-phone { right: 0; bottom: 8%; width: 18%; }
    .landing-sync-orbit { left: 57%; top: 5%; width: 38px; height: 38px; }
    .landing-instruments { grid-template-columns: 1fr 1fr; gap: 7px; }
    .landing-instrument { min-height: 72px; gap: 7px; padding: 8px; border-radius: 10px; font-size: 12px; }
    .landing-instrument::before { left: -22px; width: 86px; height: 86px; }
    .landing-instrument img { width: 50px; height: 50px; }
}