:root {
--color-bg: #ebe6dc;
--color-surface: #fffdf8;
--color-ink: #1a1d28;
--color-muted: #555c6b;
--color-accent-hero: #3a4f7a;
--color-accent-hero-soft: #e4e9f5;
--color-accent-char: #6b4a6e;
--color-accent-char-soft: #f3ebf4;
--color-accent-benefit: #4a6b55;
--color-accent-benefit-soft: #e9f1eb;
--color-accent-desc: #6b5344;
--color-accent-desc-soft: #f3ebe4;
--color-accent-usage: #3d5a6b;
--color-accent-usage-soft: #e5eef3;
--color-accent-ing: #5a4a6b;
--color-accent-ing-soft: #f0ecf5;
--color-accent-review: #455a6a;
--color-accent-review-soft: #e8eef3;
--color-accent-faq: #5a6a4a;
--color-accent-faq-soft: #eef2e9;
--color-accent-cta: #8b5a3c;
--color-accent-cta-soft: #f7ede6;
--color-accent-disclaimer: #3d3d3d;
--color-accent-disclaimer-soft: #ebebeb;
--color-primary: #3a4f7a;
--color-primary-hover: #2c3b5e;
--color-secondary: #b87333;
--color-secondary-hover: #965f28;
--color-on-primary: #f7f9ff;
--color-on-primary-hover: #ffffff;
--color-on-secondary: #fffaf5;
--color-on-secondary-hover: #ffffff;
--font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
--font-display: Georgia, "Times New Roman", serif;
--fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
--fs-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
--fs-md: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);
--fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
--fs-xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.85rem);
--fs-2xl: clamp(2rem, 1.65rem + 1.1vw, 2.65rem);
--shadow-sm: 0 1px 2px rgba(26, 31, 36, 0.06);
--shadow-md: 0 8px 24px rgba(26, 31, 36, 0.1);
--shadow-lg: 0 18px 40px rgba(26, 31, 36, 0.14);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 999px;
--space-xs: 0.35rem;
--space-sm: 0.6rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.25rem;
--space-2xl: 3.5rem;
--header-height: 3.75rem;
--transition: 0.22s ease;
--max-width: 1120px;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-md);
line-height: 1.6;
color: var(--color-ink);
background: var(--color-bg);
}

img {
max-width: 100%;
height: auto;
display: block;
}

a {
color: var(--color-accent-hero);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
color: var(--color-primary-hover);
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid rgba(26, 31, 36, 0.08);
box-shadow: var(--shadow-sm);
}

.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-sm) var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
min-height: var(--header-height);
}

.brand {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-ink);
text-decoration: none;
white-space: nowrap;
}

.brand:hover {
color: var(--color-primary);
}

.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1px solid rgba(26, 31, 36, 0.15);
border-radius: var(--radius-sm);
background: var(--color-surface);
cursor: pointer;
transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.nav-toggle:hover {
background: var(--color-accent-hero-soft);
border-color: var(--color-accent-hero);
}

.nav-toggle-bar {
display: block;
height: 2px;
width: 1.25rem;
margin: 0 auto;
background: var(--color-ink);
border-radius: var(--radius-full);
transition: transform var(--transition), opacity var(--transition);
}

.site-nav .nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-xs) var(--space-sm);
}

.site-nav a {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-muted);
text-decoration: none;
padding: 0.2rem 0.35rem;
border-radius: var(--radius-sm);
transition: color var(--transition), background var(--transition);
}

.site-nav a:hover {
color: var(--color-primary);
background: var(--color-accent-hero-soft);
}

@media (max-width: 1000px) {
.nav-toggle {
display: flex;
flex-shrink: 0;
}

.site-nav {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
background: rgba(255, 255, 255, 0.99);
border-bottom: 1px solid rgba(26, 31, 36, 0.1);
box-shadow: var(--shadow-md);
max-height: none;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
transform: translate3d(0, -100%, 0);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
z-index: 95;
}

.site-nav.is-open {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.site-nav .nav-list {
flex-direction: column;
align-items: stretch;
padding: var(--space-md);
padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0));
gap: var(--space-xs);
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
width: 100%;
}

.site-nav a {
display: block;
padding: var(--space-sm) var(--space-md);
font-size: var(--fs-sm);
border-radius: var(--radius-sm);
}

.site-nav a:active {
background: var(--color-accent-hero-soft);
}
}

main {
padding-bottom: var(--space-2xl);
}

.hero {
background: linear-gradient(145deg, var(--color-accent-hero-soft) 0%, #ffffff 55%, var(--color-bg) 100%);
padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

.hero-grid {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--space-xl);
align-items: start;
}

.hero-figure {
margin: 0;
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-md);
border: 1px solid rgba(58, 79, 122, 0.14);
}

.hero-figure img {
border-radius: var(--radius-md);
width: 100%;
height: auto;
}

.hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-md);
font-size: var(--fs-sm);
}

.hero-note {
margin: 0;
flex: 1 1 280px;
font-size: var(--fs-sm);
color: var(--color-muted);
line-height: 1.5;
}

.trust-badge {
display: inline-block;
padding: var(--space-xs) var(--space-sm);
background: var(--color-accent-hero);
color: var(--color-on-primary);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: 600;
}

.hero-copy h1 {
font-family: var(--font-display);
font-size: var(--fs-2xl);
line-height: 1.15;
margin: 0 0 var(--space-md);
color: var(--color-accent-hero);
}

.lead {
font-size: var(--fs-lg);
color: var(--color-muted);
margin: 0 0 var(--space-lg);
}

.price-row {
display: flex;
align-items: baseline;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}

.price-current {
font-size: var(--fs-2xl);
font-weight: 800;
color: var(--color-secondary);
}

.price-old {
font-size: var(--fs-lg);
text-decoration: line-through;
color: var(--color-muted);
}

.order-form {
background: var(--color-surface);
padding: var(--space-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid rgba(58, 79, 122, 0.12);
}

.form-heading {
font-size: var(--fs-lg);
margin: 0 0 var(--space-md);
}

.field {
margin-bottom: var(--space-md);
}

.field label {
display: block;
font-weight: 600;
font-size: var(--fs-sm);
margin-bottom: var(--space-xs);
}

.optional {
font-weight: 400;
color: var(--color-muted);
}

.field input,
.field textarea {
width: 100%;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid rgba(26, 31, 36, 0.2);
font: inherit;
transition: border-color var(--transition), box-shadow var(--transition);
}

.field input:focus,
.field textarea:focus {
outline: none;
border-color: var(--color-accent-hero);
box-shadow: 0 0 0 3px rgba(58, 79, 122, 0.22);
}

.field-error {
display: block;
min-height: 1.25rem;
font-size: var(--fs-xs);
color: #a12a2a;
margin-top: var(--space-xs);
}

.field-checkbox {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-sm);
align-items: start;
}

.field-checkbox input {
width: auto;
margin-top: 0.35rem;
}

.field-checkbox label {
margin: 0;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 0.65rem 1.25rem;
font: inherit;
font-weight: 700;
font-size: var(--fs-sm);
border-radius: var(--radius-md);
border: none;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn-primary {
background: var(--color-primary);
color: var(--color-on-primary);
box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
background: var(--color-primary-hover);
color: var(--color-on-primary-hover);
box-shadow: var(--shadow-md);
}

.btn-secondary {
background: var(--color-secondary);
color: var(--color-on-secondary);
}

.btn-secondary:hover {
background: var(--color-secondary-hover);
color: var(--color-on-secondary-hover);
}

.btn-ghost {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}

.btn-ghost:hover {
background: var(--color-accent-hero-soft);
color: var(--color-primary-hover);
}

.section {
padding: var(--space-2xl) var(--space-md);
}

.section-inner {
max-width: var(--max-width);
margin: 0 auto;
}

.section h2 {
font-family: var(--font-display);
font-size: var(--fs-xl);
margin: 0 0 var(--space-lg);
}

.section-characteristics {
background: var(--color-accent-char-soft);
border-block: 1px solid rgba(107, 74, 110, 0.18);
}

.section-characteristics h2 {
color: var(--color-accent-char);
}

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--space-lg);
}

.card {
background: var(--color-surface);
padding: var(--space-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-accent-char);
transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}

.card-accent-a {
border-left-color: #7a5f8c;
}

.card-accent-b {
border-left-color: #4a7c8c;
}

.card-accent-c {
border-left-color: #a67c52;
}

.card h3 {
margin: 0 0 var(--space-sm);
font-size: var(--fs-lg);
}

.section-benefits {
background: linear-gradient(180deg, var(--color-accent-benefit-soft) 0%, #ffffff 100%);
}

.section-benefits h2 {
color: var(--color-accent-benefit);
}

.benefit-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--space-md);
}

.benefit-item {
margin: 0;
padding: var(--space-lg);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
border-top: 3px solid var(--color-accent-benefit);
transition: box-shadow var(--transition), transform var(--transition);
}

.benefit-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

.benefit-title {
display: block;
font-weight: 700;
margin-bottom: var(--space-xs);
}

.benefit-1 {
border-top-color: #4a7c8c;
}

.benefit-2 {
border-top-color: #6b5a3d;
}

.benefit-3 {
border-top-color: #6b5a8c;
}

.section-description {
background: var(--color-accent-desc-soft);
}

.section-description h2 {
color: var(--color-accent-desc);
}

.section-usage {
background: var(--color-accent-usage-soft);
border-block: 1px solid rgba(61, 90, 107, 0.14);
}

.section-usage h2 {
color: var(--color-accent-usage);
}

.steps {
margin: 0;
padding-left: 1.25rem;
}

.steps li {
margin-bottom: var(--space-sm);
padding-left: var(--space-xs);
}

.section-ingredients {
background: var(--color-accent-ing-soft);
}

.section-ingredients h2 {
color: var(--color-accent-ing);
}

.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}

.data-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
background: var(--color-surface);
font-size: var(--fs-sm);
}

.data-table th,
.data-table td {
padding: var(--space-sm) var(--space-md);
text-align: left;
border-bottom: 1px solid rgba(26, 31, 36, 0.1);
}

.data-table th {
background: rgba(90, 74, 107, 0.1);
font-weight: 700;
}

.ing-note {
font-size: var(--fs-sm);
color: var(--color-muted);
margin-top: var(--space-md);
}

.section-reviews {
background: var(--color-accent-review-soft);
}

.section-reviews h2 {
color: var(--color-accent-review);
}

.review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--space-lg);
}

.review {
margin: 0;
padding: var(--space-lg);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}

.review::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--color-accent-review);
opacity: 0.85;
}

.review:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

.review-a::before {
background: #5a7a8f;
}

.review-b::before {
background: #8f6b5a;
}

.review-c::before {
background: #6b7a8f;
}

.review-text {
margin: 0 0 var(--space-md);
}

.review-author {
margin: 0;
font-weight: 700;
font-size: var(--fs-sm);
color: var(--color-muted);
}

.section-faq {
background: var(--color-accent-faq-soft);
border-block: 1px solid rgba(90, 106, 74, 0.16);
}

.section-faq h2 {
color: var(--color-accent-faq);
}

.faq-list {
margin: 0;
}

.faq-item {
padding: var(--space-md) 0;
border-bottom: 1px solid rgba(90, 106, 74, 0.16);
}

.faq-item:last-child {
border-bottom: none;
}

.faq-item dt {
font-weight: 700;
margin-bottom: var(--space-xs);
}

.faq-item dd {
margin: 0;
color: var(--color-muted);
}

.section-cta {
background: linear-gradient(135deg, var(--color-accent-cta-soft), #ffffff);
}

.section-cta h2 {
color: var(--color-accent-cta);
}

.cta-inner {
text-align: center;
}

.section-disclaimer {
background: var(--color-accent-disclaimer-soft);
padding: var(--space-lg) var(--space-md);
}

.disclaimer-text {
max-width: var(--max-width);
margin: 0 auto;
font-size: var(--fs-sm);
color: var(--color-muted);
line-height: 1.65;
}

.site-footer {
background: #252a38;
color: #d4dae6;
padding: var(--space-xl) var(--space-md);
}

.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
}

.footer-links {
list-style: none;
margin: 0 0 var(--space-md);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-lg);
}

.footer-links a {
color: #e8eef3;
text-decoration: none;
font-size: var(--fs-sm);
font-weight: 600;
}

.footer-links a:hover {
color: #ffffff;
text-decoration: underline;
}

.footer-contact,
.footer-emails,
.footer-meta {
margin: 0 0 var(--space-sm);
font-size: var(--fs-sm);
color: #b8c2cc;
}

.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
background: rgba(30, 35, 40, 0.97);
color: #eef2f6;
padding: var(--space-md);
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
}

.cookie-banner-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}

.cookie-text {
margin: 0;
flex: 1 1 280px;
font-size: var(--fs-sm);
}

.cookie-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
}

.btn-cookie {
font-size: var(--fs-xs);
padding: 0.55rem 1rem;
}

.btn-accept {
background: #3d6b8c;
color: #f4f9fc;
}

.btn-accept:hover {
background: #2f5670;
color: #ffffff;
}

.btn-reject {
background: #4f5660;
color: #f0f3f7;
}

.btn-reject:hover {
background: #3e4449;
color: #ffffff;
}

.btn-settings {
background: transparent;
color: #e8eef3;
border: 2px solid rgba(255, 255, 255, 0.45);
}

.btn-settings:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}

@media (max-width: 640px) {
.cookie-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}

.cookie-actions .btn {
width: 100%;
justify-content: center;
}
}

.cookie-modal {
position: fixed;
inset: 0;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
background: rgba(15, 18, 22, 0.55);
backdrop-filter: blur(4px);
}

.cookie-modal[hidden] {
display: none;
}

.cookie-modal-dialog {
max-width: 480px;
width: 100%;
background: var(--color-surface);
color: var(--color-ink);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-lg);
outline: none;
}

.cookie-modal-lead {
font-size: var(--fs-sm);
color: var(--color-muted);
}

.cookie-toggles {
list-style: none;
margin: var(--space-md) 0;
padding: 0;
}

.cookie-toggle-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-sm);
align-items: center;
padding: var(--space-sm) 0;
border-bottom: 1px solid rgba(26, 31, 36, 0.1);
}

.cookie-toggle-row:last-child {
border-bottom: none;
}

.toggle-hint {
grid-column: 1 / -1;
font-size: var(--fs-xs);
color: var(--color-muted);
}

.toggle-status {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-muted);
}

.cookie-modal-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-md);
}

@media (max-width: 640px) {
.cookie-modal-actions {
flex-direction: column;
align-items: stretch;
}

.cookie-modal-actions .btn {
width: 100%;
}
}

.legal-main {
padding: var(--space-xl) var(--space-md) var(--space-2xl);
background: var(--color-bg);
min-height: 50vh;
}

.legal-home {
max-width: var(--max-width);
margin: 0 auto var(--space-md);
padding: 0;
}

.btn-home {
font-size: var(--fs-xs);
padding: 0.45rem 0.9rem;
}

.legal-article {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-lg);
box-shadow: var(--shadow-md);
border: 1px solid rgba(58, 79, 122, 0.12);
}

.legal-article.section-inner {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}

.legal-article h1 {
font-family: var(--font-display);
font-size: var(--fs-2xl);
line-height: 1.2;
margin: 0 0 var(--space-md);
color: var(--color-accent-hero);
}

.legal-updated {
font-size: var(--fs-sm);
color: var(--color-muted);
margin: 0 0 var(--space-lg);
}

.legal-article > p {
margin: 0 0 var(--space-md);
color: var(--color-ink);
line-height: 1.65;
}

.legal-article > p:last-of-type {
margin-bottom: 0;
}

.legal-article section {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(58, 79, 122, 0.1);
}

.legal-article section:first-of-type {
margin-top: var(--space-lg);
}

.legal-article h2,
.legal-article section h2 {
font-family: var(--font-display);
font-size: var(--fs-xl);
line-height: 1.25;
margin: 0 0 var(--space-md);
color: var(--color-accent-hero);
}

.legal-article section p,
.legal-article section li {
font-size: var(--fs-md);
line-height: 1.65;
color: var(--color-ink);
}

.legal-article section p {
margin: 0 0 var(--space-md);
}

.legal-article section p:last-child {
margin-bottom: 0;
}

.legal-article .table-wrap {
margin: var(--space-md) 0 var(--space-lg);
}

.legal-article .data-table {
font-size: var(--fs-sm);
}

.legal-article a {
color: var(--color-primary);
font-weight: 600;
}

@media (max-width: 640px) {
.legal-article {
padding: var(--space-lg) var(--space-md);
}
}

.thank-main {
min-height: 50vh;
}

.thank-inner {
text-align: center;
}

.thank-hero {
background: var(--color-accent-hero-soft);
}

.thank-lead {
max-width: 42rem;
margin: 0 auto var(--space-lg);
font-size: var(--fs-lg);
}

.thank-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
}

.thank-next {
background: var(--color-surface);
border-block: 1px solid rgba(26, 31, 36, 0.08);
}

.thank-back {
background: var(--color-bg);
}

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

.btn,
.card,
.benefit-item,
.review,
.nav-toggle,
.site-nav {
transition: none;
}
}