:root { --navy:#243456; --blue:#6f7b9f; --rose:#f5b8bc; --rose-dark:#df8d95; --mint:#e9f3ef; --cream:#fbf7f1; --ink:#1d2430; --muted:#647084; --white:#fff; --line:rgba(36,52,86,.16); --shadow:0 24px 70px rgba(36,52,86,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter, Arial, sans-serif; background:var(--cream); color:var(--muted); line-height:1.6; }
img { max-width:100%; display:block; }
a { color:inherit; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:80; padding:.7rem 1rem; background:var(--navy); color:var(--white); }
.skip-link:focus { top:1rem; }
.site-head { position:sticky; top:0; z-index:30; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; min-height:74px; padding:0 clamp(1rem,5vw,4rem); background:rgba(36,52,86,.96); color:var(--white); box-shadow:0 12px 34px rgba(0,0,0,.14); }
.brand img { width:160px; max-height:42px; object-fit:contain; }
.site-nav { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.site-nav a, .head-cta, .menu-btn { color:var(--white); text-decoration:none; font-weight:800; }
.site-nav a { padding:.55rem .7rem; border-radius:8px; }
.site-nav a:hover { background:rgba(255,255,255,.12); }
.menu-btn { display:none; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); border-radius:8px; padding:.65rem .85rem; }
.head-cta, .main-action, .country-cta, .order-link { display:inline-flex; justify-content:center; align-items:center; min-height:48px; border:0; border-radius:8px; padding:.85rem 1.1rem; background:var(--rose); color:var(--navy); text-decoration:none; font-weight:950; box-shadow:0 12px 30px rgba(223,141,149,.28); }
.soft-action { display:inline-flex; justify-content:center; align-items:center; min-height:48px; border-radius:8px; border:1px solid var(--line); padding:.85rem 1.1rem; text-decoration:none; font-weight:900; color:var(--navy); background:var(--white); }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.82fr); gap:clamp(1.5rem,5vw,5rem); align-items:center; padding:clamp(4rem,8vw,7rem) clamp(1rem,5vw,5rem); background:linear-gradient(135deg, var(--white), var(--mint)); }
.home-hero { background:linear-gradient(135deg, var(--mint), var(--white)); }
.hero h1 { max-width:780px; margin:.25rem 0 1rem; color:var(--ink); font-size:clamp(2.35rem,6vw,5.6rem); line-height:.96; letter-spacing:0; }
.hero p { max-width:700px; font-size:1.08rem; }
.eyebrow { margin:0 0 .35rem; color:var(--rose-dark); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:950; }
.action-row, .country-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.country-actions .country-cta { min-width:150px; }
.hero-media { display:grid; place-items:center; min-height:340px; border-radius:8px; background:radial-gradient(circle, rgba(245,184,188,.32), rgba(111,123,159,.08)); }
.hero-media img { max-height:560px; filter:drop-shadow(0 30px 28px rgba(36,52,86,.2)); }
.trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.2rem clamp(1rem,5vw,5rem); background:var(--navy); }
.trust-row article { display:flex; align-items:center; gap:.8rem; color:var(--white); }
.trust-row img { width:52px; height:52px; border-radius:50%; background:var(--white); padding:.45rem; }
.split, .ingredients, .routine, .reviews, .countries, .price-section { padding:clamp(3.5rem,7vw,6rem) clamp(1rem,5vw,5rem); }
.split, .ingredients { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.split h2, .ingredients h2, .routine h2, .section-head h2, .final-panel h2 { color:var(--ink); font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.05; letter-spacing:0; margin:.2rem 0 1rem; }
.split img, .ingredients img { border-radius:8px; box-shadow:var(--shadow); background:var(--white); }
.ingredients { background:var(--white); }
table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:8px; background:var(--cream); }
th, td { padding:.85rem 1rem; border-bottom:1px solid var(--line); text-align:left; }
th { color:var(--ink); }
.routine { background:var(--mint); }
.routine-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.routine-cards article, .price-card, .review-card { border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.88); padding:1.2rem; box-shadow:0 12px 38px rgba(36,52,86,.08); }
.section-head { max-width:820px; margin:0 auto 1.5rem; text-align:center; }
.price-section { background:linear-gradient(180deg,var(--cream),var(--mint)); }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:1180px; margin:0 auto; align-items:stretch; }
.price-card { display:grid; grid-template-rows:auto auto auto auto auto auto 1fr auto auto auto; min-height:640px; gap:.45rem; }
.price-card.featured { border:2px solid var(--rose-dark); transform:translateY(-.35rem); }
.price-top { display:flex; min-height:56px; justify-content:space-between; gap:.6rem; align-items:start; color:var(--navy); font-weight:950; }
.price-top span, .price-top b { border-radius:999px; padding:.35rem .65rem; background:var(--mint); font-size:.8rem; }
.price-top b { background:var(--navy); color:var(--white); }
.pack-art { display:flex; justify-content:center; align-items:end; height:190px; overflow:hidden; border-radius:8px; background:radial-gradient(circle,var(--white),var(--mint)); }
.pack-art img { max-height:175px; width:auto; margin-left:-3rem; filter:drop-shadow(0 14px 14px rgba(36,52,86,.18)); }
.pack-art img:first-child { margin-left:0; }
.price-card h3 { margin:.5rem 0 0; color:var(--ink); font-size:1.65rem; }
.unit { color:var(--navy); font-size:2rem; font-weight:950; margin:.1rem 0; }
.total { color:var(--ink); font-weight:900; }
.order-link { align-self:end; margin-top:auto; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:1040px; margin:0 auto; }
.review-card { text-align:center; }
.review-card img { width:116px; height:116px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; border:4px solid var(--rose); }
.country-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; max-width:1050px; margin:0 auto; }
.country-grid a { padding:.9rem 1rem; border:1px solid var(--line); border-radius:8px; background:var(--white); text-decoration:none; color:var(--ink); font-weight:900; text-align:center; }
.country-grid a[aria-current='page'] { background:var(--navy); color:var(--white); }
.final-panel { display:grid; grid-template-columns:.7fr 1fr; gap:2rem; align-items:center; margin:0 clamp(1rem,5vw,5rem) clamp(3rem,6vw,5rem); padding:clamp(2rem,5vw,4rem); border-radius:8px; background:var(--navy); color:var(--white); }
.final-panel h2, .final-panel p { color:var(--white); }
.final-panel img { max-height:360px; margin:auto; }
.notice { font-size:.9rem; opacity:.86; }
.site-footer { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:1.2rem; padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,5rem); background:var(--ink); color:var(--white); }
.site-footer img { width:170px; margin-bottom:1rem; }
.site-footer h3, .site-footer p, .site-footer a { color:var(--white); }
.site-footer nav, .site-footer div { display:flex; flex-direction:column; gap:.55rem; }
.site-footer a, .legal-open { width:100%; text-align:left; border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(255,255,255,.08); color:var(--white); padding:.65rem .85rem; text-decoration:none; cursor:pointer; }
.copyline { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.18); padding-top:1rem; }
.modal-layer, .exit-layer { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:1rem; background:rgba(29,36,48,.68); }
[hidden] { display:none !important; }
.modal-card, .exit-card { position:relative; width:min(760px,100%); max-height:min(84vh,820px); overflow:auto; border-radius:8px; padding:clamp(1.2rem,3vw,2rem); background:var(--white); box-shadow:var(--shadow); }
.modal-card h2 { margin-top:1.7rem; color:var(--ink); }
.modal-close { position:absolute; top:.8rem; right:.8rem; border:1px solid var(--line); border-radius:8px; background:var(--mint); color:var(--ink); padding:.55rem .75rem; font-weight:900; cursor:pointer; }
.exit-card { width:min(900px,100%); display:grid; grid-template-columns:.75fr 1fr; gap:1.5rem; align-items:center; background:linear-gradient(135deg,var(--navy),var(--blue)); color:var(--white); }
.exit-card h2, .exit-card p { color:var(--white); }
.exit-card img { max-height:330px; margin:auto; filter:drop-shadow(0 24px 24px rgba(0,0,0,.22)); }
@media (max-width:1000px) { .hero, .split, .ingredients, .final-panel, .exit-card { grid-template-columns:1fr; } .trust-row, .routine-cards, .price-grid, .review-grid, .country-grid, .site-footer { grid-template-columns:1fr 1fr; } .price-card.featured { transform:none; } }
@media (max-width:720px) { .site-head { grid-template-columns:auto auto; } .menu-btn { display:inline-flex; justify-self:end; } .site-nav { display:none; grid-column:1/-1; justify-content:flex-start; } .site-nav.open { display:flex; } .head-cta { display:none; } .trust-row, .routine-cards, .price-grid, .review-grid, .country-grid, .site-footer { grid-template-columns:1fr; } .hero { padding-top:3rem; } .hero h1 { font-size:2.5rem; } .hero-media { min-height:260px; } .price-card { min-height:auto; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }