/* ═══════════════════════════════════════════════════════════
   PRACTVIA — shared brand system
   Used by index.html, features.html, pricing.html, demo.html
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Brand palette */
    --ink: #0B3142;
    --ink-soft: #2B4E5F;
    --ink-mute: #56707D;
    --ocean: #0E7490;
    --ocean-dark: #0A5567;
    --ocean-soft: #E6F2F5;
    --leaf: #3BA776;
    --leaf-dark: #2A8A5D;
    --leaf-soft: #E8F5EC;
    --sun: #F4B942;
    --sun-dark: #E0A226;
    --sun-soft: #FEF4DC;
    --coral: #EA7750;
    --coral-dark: #D35E38;
    --coral-soft: #FBE5DC;

    /* Warm neutrals */
    --cream: #FDFBF5;
    --cream-2: #F9F3E5;
    --cream-3: #F3EBD7;
    --paper: #FFFFFF;
    --line: #E8DFC9;
    --line-soft: #F0E8D4;

    /* Typography */
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.55;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Ambient atmosphere */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 800px 600px at 15% 10%, rgba(244, 185, 66, 0.12), transparent 60%),
        radial-gradient(ellipse 900px 700px at 90% 20%, rgba(14, 116, 144, 0.08), transparent 60%),
        radial-gradient(ellipse 700px 500px at 70% 85%, rgba(234, 119, 80, 0.10), transparent 60%),
        radial-gradient(ellipse 600px 400px at 20% 75%, rgba(59, 167, 118, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(11, 49, 66, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}
.wrap-narrow {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

/* ═══ Header ═══ */
header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    background: rgba(253, 251, 245, 0.78);
    border-bottom: 1px solid rgba(232, 223, 201, 0.6);
}
.hdr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    gap: 32px;
}
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 40px; }

nav.primary ul {
    display: flex;
    gap: 36px;
    list-style: none;
    align-items: center;
}
nav.primary a {
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.005em;
    transition: color 180ms;
    position: relative;
}
nav.primary a:hover { color: var(--ocean); }
nav.primary a.active {
    color: var(--ink);
}
nav.primary a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    height: 2px;
    background: var(--ocean);
    border-radius: 2px;
}

.hdr-cta { display: flex; gap: 12px; align-items: center; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 180ms, box-shadow 180ms, background 180ms, border-color 180ms;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.btn-primary {
    background: var(--ink);
    color: var(--cream);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.2) inset, 0 6px 14px -6px rgba(11,49,66,0.4);
}
.btn-primary:hover {
    background: var(--ocean-dark);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.2) inset, 0 10px 20px -8px rgba(11,49,66,0.5);
}
.btn-ghost { background: transparent; color: var(--ink); padding: 11px 18px; }
.btn-ghost:hover { color: var(--ocean); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line);
}
.btn-outline:hover {
    border-color: var(--ink);
    background: var(--cream-2);
}
.btn-sun {
    background: var(--sun);
    color: var(--ink);
}
.btn-sun:hover {
    background: #F8C766;
    transform: translateY(-1px);
}
.btn-wide { width: 100%; justify-content: center; }

.mobile-menu { display: none; background: none; border: none; cursor: pointer; color: var(--ink); }

/* ═══ Typography utilities ═══ */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
    margin-bottom: 28px;
}
.eyebrow-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--leaf);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
}
.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 18px;
}
.title-xl {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(42px, 6.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 100;
}
.title-lg {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--ink);
    font-variation-settings: "opsz" 100;
}
.title-lg em, .title-xl em {
    font-style: italic;
    font-weight: 400;
    color: var(--ocean);
}
.lead {
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink-mute);
    letter-spacing: -0.01em;
}
.lead-sm {
    font-size: 19px;
    color: var(--ink-mute);
    line-height: 1.55;
    letter-spacing: -0.005em;
}

/* ═══ Footer ═══ */
footer.site {
    padding: 64px 0 40px;
    border-top: 1px solid var(--line-soft);
    position: relative;
    z-index: 1;
    margin-top: 80px;
}
.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
.foot-brand img { height: 38px; margin-bottom: 18px; }
.foot-brand p { font-size: 14px; color: var(--ink-mute); max-width: 280px; line-height: 1.55; }
.foot-col h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 18px;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 11px; }
.foot-col a {
    color: var(--ink-mute);
    text-decoration: none;
    font-size: 14.5px;
    transition: color 180ms;
}
.foot-col a:hover { color: var(--ocean); }
.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--ink-mute);
    flex-wrap: wrap;
    gap: 16px;
}
.foot-legal { display: flex; gap: 24px; }
.foot-legal a { color: var(--ink-mute); text-decoration: none; }
.foot-legal a:hover { color: var(--ink); }

/* ═══ Reveal animation ═══ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal:nth-child(1) { animation-delay: 0.05s; }
.reveal:nth-child(2) { animation-delay: 0.15s; }
.reveal:nth-child(3) { animation-delay: 0.25s; }
.reveal:nth-child(4) { animation-delay: 0.35s; }
.reveal:nth-child(5) { animation-delay: 0.45s; }
@keyframes reveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ═══ Responsive breakpoints ═══ */
@media (max-width: 960px) {
    nav.primary ul { display: none; }
    .mobile-menu { display: inline-flex; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .wrap, .wrap-narrow { padding: 0 20px; }
    .foot-grid { grid-template-columns: 1fr; }
    .hdr-cta .btn-ghost { display: none; }
}