:root {
    --pine-900: #0E2E23;
    --pine-800: #123B2E;
    --pine-700: #1B4F3E;
    --pine-500: #2E8B6A;
    --copper-500: #C07A3A;
    --copper-400: #E8B45A;
    --cream-100: #FBF8F1;
    --cream-200: #F3EFE3;
    --cream-300: #EFE9DA;
    --sage-200: #E7EEE6;
    --text-700: #22302A;
    --text-500: #3E4C44;
    --text-400: #5C6B62;
    --text-300: #8B9489;
    --text-200: #A6AD9F;
    --font-head: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

html {
    scroll-behavior: smooth;
    background-color: var(--cream-100);
    color: var(--text-700);
    font-family: var(--font-body);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color: var(--cream-100);
    color: var(--text-700);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); letter-spacing: -0.01em; }

.font-mono-num { font-family: var(--font-mono); }

a { text-decoration: none; }

/* ===== шапка ===== */
.eo-header { font-family: var(--font-head); }

.eo-header .eo-nav { position: relative; letter-spacing: 0.01em; }

.eo-header .eo-nav::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--copper-500);
    transition: width 0.22s ease;
}

.eo-header .eo-nav:hover::after { width: 100%; }

.eo-header .eo-burger:active { transform: scale(0.95); }

/* ===== hero ===== */
.eo-grad {
    background: linear-gradient(100deg, var(--copper-500) 0%, var(--copper-400) 55%, var(--pine-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eo-panel {
    background: linear-gradient(170deg, #FFFFFF 0%, var(--cream-200) 100%);
    border: 1px solid rgba(18, 59, 46, 0.12);
    box-shadow: 0 24px 60px rgba(18, 59, 46, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.eo-field {
    background: var(--cream-100);
    border: 1px solid rgba(18, 59, 46, 0.14);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eo-field:focus-within {
    border-color: var(--pine-500);
    box-shadow: 0 0 0 3px rgba(46, 139, 106, 0.12);
}

.eo-submit {
    background: linear-gradient(100deg, var(--pine-800), var(--pine-700));
    color: var(--cream-100);
    transition: filter 0.2s ease, transform 0.15s ease;
}

.eo-submit:hover { filter: brightness(1.08); }
.eo-submit:active { transform: scale(0.99); }

/* ===== калькулятор ===== */
.eo-calc { background: linear-gradient(180deg, var(--cream-200) 0%, var(--cream-100) 100%); }

.eo-calc .eo-cell {
    background: var(--cream-100);
    border: 1px solid rgba(18, 59, 46, 0.10);
    transition: border-color 0.2s ease;
}

.eo-calc .eo-cell:focus-within { border-color: var(--copper-500); }

/* ===== карточки ===== */
.eo-card {
    background: linear-gradient(165deg, #FFFFFF 0%, var(--cream-200) 100%);
    border: 1px solid rgba(18, 59, 46, 0.10);
    box-shadow: 0 10px 30px rgba(18, 59, 46, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.eo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(18, 59, 46, 0.12);
    border-color: rgba(192, 122, 58, 0.35);
}

/* ===== заметки ===== */
.eo-note {
    background: var(--sage-200);
    border: 1px solid rgba(18, 59, 46, 0.12);
}

/* ===== шаги ===== */
.eo-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    background: var(--pine-800);
    color: var(--copper-400);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ===== футер ===== */
.eo-flink { text-decoration: none; }

/* ===== details ===== */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] summary { color: var(--copper-500); }