:root {
--color-bg: #0d1016;
--color-bg-elevated: #151a22;
--color-bg-card: #1b2029;
--color-accent: #7a9bc8;
--color-accent-muted: #4f6d92;
--color-warm: #c4a574;
--color-warm-deep: #8c734d;
--color-text: #e6e9ef;
--color-text-soft: #97a3b4;
--color-border: rgba(230, 233, 239, 0.11);
--color-shadow: rgba(4, 7, 12, 0.48);
--font-sans: "Segoe UI", system-ui, sans-serif;
--font-display: Georgia, "Times New Roman", serif;
--fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
--fs-sm: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem);
--fs-base: clamp(0.9375rem, 0.88rem + 0.35vw, 1.0625rem);
--fs-md: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
--fs-lg: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
--fs-xl: clamp(1.85rem, 1.4rem + 1.4vw, 2.5rem);
--lh-tight: 1.2;
--lh-normal: 1.55;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
--shadow-sm: 0 2px 8px var(--color-shadow);
--shadow-md: 0 12px 32px var(--color-shadow);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3.5rem;
--space-9: 5rem;
--header-h: 3.25rem;
--transition: 0.22s ease;
--max-content: 72rem;
}

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

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--color-text);
background: radial-gradient(1200px 600px at 10% -10%, rgba(122, 155, 200, 0.09), transparent), var(--color-bg);
min-height: 100vh;
}

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

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

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

.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(15, 20, 25, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border);
}

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

.brand {
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-text);
text-decoration: none;
}

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

.menu-toggle {
display: none;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg-card);
color: var(--color-text);
cursor: pointer;
line-height: 0;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.menu-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}

.menu-toggle-icon svg {
display: block;
width: 1.5rem;
height: 1.5rem;
}

.menu-toggle:hover {
background: var(--color-bg-elevated);
color: var(--color-warm);
border-color: rgba(196, 165, 116, 0.38);
}

.site-nav {
flex: 1;
min-width: 0;
display: flex;
justify-content: flex-end;
align-items: center;
}

.site-nav .nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
justify-content: flex-end;
}

.site-nav a {
font-size: var(--fs-xs);
color: var(--color-text-soft);
text-decoration: none;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}

.site-nav a:hover {
color: var(--color-warm);
background: rgba(196, 165, 116, 0.09);
}

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

.section {
padding: var(--space-8) var(--space-4);
}

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

.section-hero {
background: linear-gradient(135deg, rgba(122, 155, 200, 0.08), transparent 55%), var(--color-bg);
border-bottom: 1px solid var(--color-border);
}

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

.hero-figure {
margin: 0;
padding: var(--space-4);
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}

.hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-4);
}

.rating-block {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-card);
border-radius: var(--radius-pill);
border: 1px solid var(--color-border);
font-size: var(--fs-xs);
}

.badge-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-soft);
margin-bottom: var(--space-1);
}

.trust-badge {
font-size: var(--fs-xs);
padding: var(--space-2) var(--space-3);
background: linear-gradient(120deg, rgba(122, 155, 200, 0.22), rgba(196, 165, 116, 0.14));
border-radius: var(--radius-pill);
border: 1px solid rgba(122, 155, 200, 0.38);
}

.hero-copy h1 {
font-family: var(--font-display);
font-size: var(--fs-xl);
line-height: var(--lh-tight);
margin: 0 0 var(--space-4);
color: var(--color-text);
}

.hero-lead {
color: var(--color-text-soft);
margin: 0 0 var(--space-4);
}

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

.price-current {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--color-accent);
}

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

.order-form,
.contact-form {
display: grid;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}

.form-field label {
display: block;
font-size: var(--fs-xs);
margin-bottom: var(--space-2);
color: var(--color-text-soft);
}

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

.form-field input,
.form-field textarea {
width: 100%;
padding: var(--space-3);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
font: inherit;
transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: rgba(122, 155, 200, 0.55);
box-shadow: 0 0 0 3px rgba(122, 155, 200, 0.16);
}

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

.form-field.form-checkbox {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--space-3);
row-gap: var(--space-2);
align-items: start;
}

.form-field.form-checkbox input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
min-width: 1.125rem;
margin: 0.2rem 0 0;
accent-color: var(--color-accent);
cursor: pointer;
border-radius: var(--radius-sm);
vertical-align: top;
}

.form-field.form-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid rgba(122, 155, 200, 0.65);
outline-offset: 2px;
}

.form-field.form-checkbox label {
grid-column: 2;
grid-row: 1;
margin: 0;
padding: 0;
font-size: var(--fs-sm);
line-height: 1.45;
font-weight: 400;
color: var(--color-text-soft);
cursor: pointer;
}

.form-field.form-checkbox label a {
color: var(--color-accent);
font-weight: 500;
}

.form-field.form-checkbox label a:hover {
color: var(--color-warm);
}

.form-field.form-checkbox .field-error {
grid-column: 1 / -1;
margin-left: calc(1.125rem + var(--space-3));
margin-top: 0;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-pill);
font-size: var(--fs-sm);
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-primary {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-muted));
color: #0a0f16;
border-color: rgba(10, 15, 22, 0.25);
}

.btn-primary:hover {
background: linear-gradient(135deg, #92b3d9, #5a7aa9);
color: #0a0f16;
box-shadow: 0 8px 24px rgba(122, 155, 200, 0.28);
transform: translateY(-1px);
}

.btn-secondary {
background: rgba(196, 165, 116, 0.16);
color: var(--color-warm);
border-color: rgba(196, 165, 116, 0.48);
}

.btn-secondary:hover {
background: rgba(196, 165, 116, 0.28);
color: #f5efe6;
border-color: rgba(196, 165, 116, 0.68);
}

.btn-outline {
background: transparent;
color: var(--color-text-soft);
border-color: var(--color-border);
}

.btn-outline:hover {
color: var(--color-warm);
border-color: rgba(196, 165, 116, 0.45);
background: rgba(196, 165, 116, 0.07);
}

.btn-home {
font-size: var(--fs-xs);
padding: var(--space-2) var(--space-4);
}

.section-features {
background: var(--color-bg);
}

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

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

.feature-card {
padding: var(--space-5);
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
border-top: 3px solid var(--color-accent);
box-shadow: var(--shadow-sm);
transition: transform var(--transition), border-color var(--transition);
}

.feature-card:hover {
transform: translateY(-3px);
border-color: rgba(122, 155, 200, 0.36);
}

.feature-title {
margin: 0 0 var(--space-3);
font-size: var(--fs-md);
}

.feature-text {
margin: 0;
color: var(--color-text-soft);
font-size: var(--fs-sm);
}

.section-benefits {
background: linear-gradient(180deg, rgba(28, 37, 48, 0.6), var(--color-bg));
}

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

.benefits-split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-4);
}

.benefits-panel {
padding: var(--space-5);
background: radial-gradient(circle at 0% 0%, rgba(196, 165, 116, 0.13), transparent 55%), var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
position: relative;
overflow: hidden;
}

.benefits-panel::after {
content: "";
position: absolute;
inset: auto -20% -40% auto;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(122, 155, 200, 0.22), transparent 70%);
pointer-events: none;
}

.subheading {
margin: 0 0 var(--space-3);
font-size: var(--fs-md);
}

.section-detail {
background: var(--color-bg);
border-top: 1px solid var(--color-border);
}

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

.section-detail p {
color: var(--color-text-soft);
max-width: 65ch;
}

.section-usage {
background: var(--color-bg-elevated);
}

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

.usage-steps {
margin: 0;
padding-left: var(--space-5);
color: var(--color-text-soft);
}

.usage-steps li {
margin-bottom: var(--space-3);
}

.section-composition {
background: var(--color-bg);
}

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

.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}

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

.data-table caption {
caption-side: bottom;
padding: var(--space-3);
font-size: var(--fs-xs);
color: var(--color-text-soft);
text-align: left;
}

.data-table th,
.data-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border);
}

.data-table thead th {
background: rgba(122, 155, 200, 0.09);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}

.composition-note {
margin-top: var(--space-4);
color: var(--color-text-soft);
font-size: var(--fs-sm);
}

.section-reviews {
background: linear-gradient(135deg, rgba(196, 165, 116, 0.07), transparent);
}

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

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

.review-card {
padding: var(--space-5);
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
border: 1px dashed rgba(196, 165, 116, 0.38);
}

.review-text {
margin: 0 0 var(--space-4);
color: var(--color-text);
font-style: italic;
}

.review-name {
margin: 0;
font-size: var(--fs-xs);
color: var(--color-accent);
letter-spacing: 0.03em;
}

.section-faq {
background: var(--color-bg);
}

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

.faq-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
background: var(--color-bg-card);
}

.faq-item summary {
cursor: pointer;
font-weight: 600;
font-size: var(--fs-sm);
}

.faq-item p {
margin: var(--space-3) 0 0;
color: var(--color-text-soft);
font-size: var(--fs-sm);
}

.section-contact {
background: var(--color-bg-elevated);
}

.contact-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-6);
align-items: start;
}

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

.contact-intro p {
color: var(--color-text-soft);
margin: 0;
}

.section-cta {
background: radial-gradient(ellipse at center, rgba(122, 155, 200, 0.13), transparent 60%), var(--color-bg);
text-align: center;
border-top: 1px solid var(--color-border);
}

.cta-inner {
max-width: 40rem;
}

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

.section-cta p {
color: var(--color-text-soft);
margin: 0 0 var(--space-5);
}

.section-disclaimer {
background: var(--color-bg-card);
border-top: 1px solid var(--color-border);
}

.section-disclaimer h2 {
font-family: var(--font-display);
font-size: var(--fs-md);
margin: 0 0 var(--space-3);
}

.section-disclaimer p {
margin: 0;
color: var(--color-text-soft);
font-size: var(--fs-sm);
max-width: 75ch;
}

.site-footer {
border-top: 1px solid var(--color-border);
padding: var(--space-6) var(--space-4);
background: #0a0e12;
}

.footer-inner {
max-width: var(--max-content);
margin: 0 auto;
display: grid;
gap: var(--space-4);
}

.footer-brand {
font-size: var(--fs-sm);
font-weight: 600;
}

.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}

.footer-nav a {
font-size: var(--fs-xs);
color: var(--color-text-soft);
text-decoration: none;
}

.footer-nav a:hover {
color: var(--color-warm);
}

.footer-contact p {
margin: 0 0 var(--space-2);
font-size: var(--fs-xs);
color: var(--color-text-soft);
}

.footer-meta {
margin: 0;
font-size: var(--fs-xs);
color: var(--color-text-soft);
}

.cookie-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background: rgba(10, 14, 18, 0.96);
border-top: 1px solid var(--color-border);
padding: var(--space-4);
box-shadow: 0 -8px 32px var(--color-shadow);
}

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

.cookie-bar-inner {
max-width: var(--max-content);
margin: 0 auto;
display: grid;
gap: var(--space-4);
align-items: center;
}

.cookie-text {
margin: 0;
font-size: var(--fs-xs);
color: var(--color-text-soft);
}

.cookie-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}

.cookie-modal {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(5, 8, 12, 0.72);
}

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

.cookie-modal-panel {
width: min(100%, 28rem);
padding: var(--space-6);
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
outline: none;
}

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

.cookie-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-sm);
}

.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-bg-card);
border-radius: var(--radius-pill);
border: 1px solid var(--color-border);
transition: background var(--transition);
}

.slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 2px;
background: var(--color-text-soft);
border-radius: 50%;
transition: transform var(--transition), background var(--transition);
}

.switch input:checked + .slider {
background: rgba(122, 155, 200, 0.36);
border-color: rgba(122, 155, 200, 0.55);
}

.switch input:checked + .slider::before {
transform: translateX(18px);
background: var(--color-accent);
}

.switch input:disabled + .slider {
opacity: 0.6;
cursor: not-allowed;
}

.cookie-modal-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-5);
}

.legal-main {
padding-top: var(--space-6);
background: var(--color-bg);
}

.section.section-legal {
background: linear-gradient(180deg, rgba(122, 155, 200, 0.05), transparent 40%), var(--color-bg);
}

.section-legal .section-inner.legal-inner {
max-width: min(46rem, 100%);
margin-left: auto;
margin-right: auto;
padding: var(--space-6) var(--space-5);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}

.legal-home {
margin: 0 0 var(--space-5);
}

.section-legal h1 {
font-family: var(--font-display);
font-size: var(--fs-xl);
margin: 0 0 var(--space-3);
color: var(--color-text);
line-height: var(--lh-tight);
}

.legal-updated {
font-size: var(--fs-xs);
color: var(--color-text-soft);
margin: 0 0 var(--space-5);
}

.legal-inner > p:not(.legal-home) {
color: var(--color-text-soft);
max-width: 65ch;
}

.legal-inner > p.legal-home {
max-width: none;
}

.legal-inner > p strong {
color: var(--color-text);
}

.legal-inner ul,
.legal-inner ol {
margin: 0 0 var(--space-4);
padding-left: 1.35em;
color: var(--color-text-soft);
max-width: 65ch;
}

.legal-inner li {
margin-bottom: var(--space-2);
line-height: var(--lh-normal);
}

.legal-inner li:last-child {
margin-bottom: 0;
}

.legal-inner .table-wrap {
max-width: 100%;
width: 100%;
margin: var(--space-4) 0 var(--space-5);
}

.legal-inner .data-table {
min-width: 0;
}

.legal-inner h2 {
margin-top: var(--space-6);
margin-bottom: var(--space-3);
padding-bottom: var(--space-2);
font-size: var(--fs-md);
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
}

.legal-inner h2:first-of-type {
margin-top: var(--space-5);
}

.legal-inner a {
color: var(--color-accent);
}

.legal-inner a:hover {
color: var(--color-warm);
}

.thank-main {
padding-top: var(--space-7);
}

.section-thank-hero {
background: var(--color-bg-elevated);
}

.thank-inner {
max-width: 42rem;
}

.section-thank-hero h1 {
font-family: var(--font-display);
font-size: var(--fs-xl);
margin: 0 0 var(--space-4);
}

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

.section-thank-next h2,
.section-thank-support h2 {
font-family: var(--font-display);
font-size: var(--fs-lg);
margin: 0 0 var(--space-3);
}

.section-thank-next p,
.section-thank-support p {
color: var(--color-text-soft);
}

.thank-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-4);
}

@media (max-width: 1000px) {
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}

.site-nav {
position: fixed;
left: 0;
right: 0;
top: var(--header-h);
flex: none;
display: block;
margin: 0;
padding: var(--space-4);
background: rgba(15, 20, 25, 0.98);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
transform: translateY(-120%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
z-index: 35;
}

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

.site-nav .nav-list {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}

.site-nav a {
font-size: var(--fs-sm);
width: 100%;
padding: var(--space-2) var(--space-3);
}

.cookie-actions {
flex-direction: column;
align-items: stretch;
}

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

@media (min-width: 1001px) {
.site-nav {
flex: 1;
min-width: 0;
display: flex !important;
justify-content: flex-end;
align-items: center;
position: static;
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}

.cookie-modal-actions {
flex-direction: row;
flex-wrap: wrap;
}
}