@layer reset, tokens, layout, components, utilities;

@layer reset {
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
 body { min-height: 100vh; line-height: 1.6; }
 img { display: block; max-width: 100%; height: auto; }
 button { cursor: pointer; border: none; background: none; font: inherit; }
 a { color: inherit; text-decoration: none; }
 ul, ol { list-style: none; }
 address { font-style: normal; }
 input, select, textarea { font: inherit; }
}

@layer tokens {
 :root {
 --clr-bg: #f0f2f5;
 --clr-bg-dark: #0e1420;
 --clr-bg-mid: #141c2e;
 --clr-surface: rgba(255,255,255,0.82);
 --clr-surface-dark: rgba(255,255,255,0.06);
 --clr-steel: #8a9bb0;
 --clr-steel-light: #c8d4e0;
 --clr-accent: #2563b0;
 --clr-accent-light: #4a90d9;
 --clr-accent-glow: rgba(74,144,217,0.22);
 --clr-text: #1a2235;
 --clr-text-light: #f0f4fa;
 --clr-text-muted: #5a6a80;
 --clr-text-muted-light: rgba(240,244,250,0.7);
 --clr-border: rgba(138,155,176,0.2);
 --clr-border-light: rgba(255,255,255,0.12);
 --clr-warn: #b8860b;

 --grad-hero: linear-gradient(135deg, #0a1628 0%, #0e1f3d 40%, #0d2a4a 70%, #0f1e35 100%);
 --grad-dark: linear-gradient(160deg, #0e1420 0%, #141c2e 100%);
 --grad-mid: linear-gradient(160deg, #141c2e 0%, #1a2640 100%);
 --grad-accent: linear-gradient(135deg, #1a3a6e 0%, #2563b0 100%);
 --grad-footer: linear-gradient(160deg, #0a1628 0%, #0d1f3c 60%, #0e2040 100%);

 --shadow-sm: 0 2px 8px rgba(10,22,40,0.18), 0 1px 3px rgba(10,22,40,0.12);
 --shadow-md: 0 6px 24px rgba(10,22,40,0.22), 0 2px 8px rgba(10,22,40,0.14);
 --shadow-lg: 0 16px 48px rgba(10,22,40,0.28), 0 4px 16px rgba(10,22,40,0.18);
 --shadow-glow: 0 0 32px rgba(74,144,217,0.18), 0 8px 32px rgba(10,22,40,0.24);
 --shadow-card: 0 4px 20px rgba(10,22,40,0.16), 0 1px 6px rgba(10,22,40,0.1);

 --radius-sm: 6px;
 --radius-md: 12px;
 --radius-lg: 20px;
 --radius-xl: 28px;
 --radius-full: 9999px;

 --space-1: 0.25rem;
 --space-2: 0.5rem;
 --space-3: 0.75rem;
 --space-4: 1rem;
 --space-6: 1.5rem;
 --space-8: 2rem;
 --space-10: 2.5rem;
 --space-12: 3rem;
 --space-16: 4rem;
 --space-20: 5rem;
 --space-24: 6rem;
 --space-32: 8rem;

 --ff-heading: 'Lora', Georgia, serif;
 --ff-body: 'Inter', system-ui, sans-serif;

 --fw-regular: 400;
 --fw-medium: 500;
 --fw-semi: 600;
 --fw-bold: 700;

 --fs-xs: clamp(0.7rem, 1.5vw, 0.75rem);
 --fs-sm: clamp(0.8rem, 1.8vw, 0.875rem);
 --fs-base: clamp(0.9rem, 2vw, 1rem);
 --fs-md: clamp(1rem, 2.2vw, 1.125rem);
 --fs-lg: clamp(1.1rem, 2.5vw, 1.25rem);
 --fs-xl: clamp(1.25rem, 3vw, 1.5rem);
 --fs-2xl: clamp(1.5rem, 3.5vw, 2rem);
 --fs-3xl: clamp(1.8rem, 4vw, 2.5rem);
 --fs-4xl: clamp(2.2rem, 5vw, 3.2rem);
 --fs-5xl: clamp(2.8rem, 6vw, 4.2rem);

 --nav-h: 72px;
 --transition: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
}

@layer layout {
 body {
 font-family: var(--ff-body);
 font-size: var(--fs-base);
 color: var(--clr-text);
 background: var(--clr-bg);
 overflow-x: hidden;
 }

 .container {
 width: 100%;
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }
}

@layer components {

 
 .btn {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 padding: 0.75rem 1.75rem;
 border-radius: var(--radius-full);
 font-family: var(--ff-body);
 font-size: var(--fs-base);
 font-weight: var(--fw-semi);
 transition: all var(--transition);
 white-space: nowrap;
 min-height: 44px;
 position: relative;
 overflow: hidden;
 }

 .btn::after {
 content: '';
 position: absolute;
 inset: 0;
 background: rgba(255,255,255,0);
 transition: background var(--transition);
 }

 .btn:hover::after { background: rgba(255,255,255,0.08); }

 .btn--primary {
 background: var(--grad-accent);
 color: #fff;
 box-shadow: 0 4px 16px rgba(37,99,176,0.35), 0 2px 6px rgba(10,22,40,0.2);
 }

 .btn--primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 28px rgba(37,99,176,0.45), 0 4px 12px rgba(10,22,40,0.24);
 }

 .btn--primary:active { transform: translateY(0); }

 .btn--ghost {
 background: transparent;
 color: var(--clr-text-light);
 border: 1.5px solid var(--clr-border-light);
 }

 .btn--ghost:hover {
 background: rgba(255,255,255,0.08);
 border-color: rgba(255,255,255,0.3);
 transform: translateY(-2px);
 }

 .btn--large {
 padding: 1rem 2.25rem;
 font-size: var(--fs-md);
 }

 
 .siteHeader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 height: var(--nav-h);
 transition: background var(--transition-slow), box-shadow var(--transition-slow);
 }

 .siteHeader--scrolled {
 background: rgba(14, 20, 32, 0.95);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 box-shadow: 0 2px 20px rgba(10,22,40,0.3);
 }

 .siteHeader--light {
 background: rgba(240, 242, 245, 0.95);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 box-shadow: 0 2px 12px rgba(10,22,40,0.1);
 }

 .siteHeader_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-6);
 }

 .siteHeader_logo img { height: 36px; width: auto; }

 .siteNav_list {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 }

 .siteNav_link {
 padding: 0.5rem 0.875rem;
 border-radius: var(--radius-full);
 font-size: var(--fs-sm);
 font-weight: var(--fw-medium);
 color: var(--clr-text-light);
 transition: all var(--transition);
 min-height: 44px;
 display: flex;
 align-items: center;
 }

 .siteHeader--light .siteNav_link { color: var(--clr-text); }

 .siteNav_link:hover {
 background: rgba(255,255,255,0.1);
 color: #fff;
 }

 .siteHeader--light .siteNav_link:hover {
 background: rgba(37,99,176,0.1);
 color: var(--clr-accent);
 }

 .siteNav_link--cta {
 background: var(--grad-accent);
 color: #fff !important;
 box-shadow: 0 3px 12px rgba(37,99,176,0.35);
 padding: 0.5rem 1.25rem;
 }

 .siteNav_link--cta:hover {
 transform: translateY(-1px);
 box-shadow: 0 6px 20px rgba(37,99,176,0.45);
 background: var(--grad-accent) !important;
 }

 .siteHeader_burger {
 display: none;
 flex-direction: column;
 gap: 5px;
 padding: var(--space-2);
 min-width: 44px;
 min-height: 44px;
 align-items: center;
 justify-content: center;
 }

 .siteHeader_burger span {
 display: block;
 width: 24px;
 height: 2px;
 background: var(--clr-text-light);
 border-radius: 2px;
 transition: all var(--transition);
 }

 .siteHeader--light .siteHeader_burger span { background: var(--clr-text); }

 .siteHeader_burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
 .siteHeader_burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
 .siteHeader_burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

 
 .mobileMenu {
 position: fixed;
 top: 0;
 left: 0;
 width: 80%;
 max-width: 320px;
 height: 100vh;
 background: #0e1420;
 z-index: 200;
 transform: translateX(-100%);
 transition: transform var(--transition-slow);
 padding: calc(var(--nav-h) + var(--space-8)) var(--space-6) var(--space-8);
 overflow-y: auto;
 box-shadow: 4px 0 32px rgba(10,22,40,0.5);
 }

 .mobileMenu.is-open { transform: translateX(0); }

 .mobileMenu_overlay {
 position: fixed;
 inset: 0;
 background: rgba(10,22,40,0.6);
 z-index: 199;
 opacity: 0;
 pointer-events: none;
 transition: opacity var(--transition-slow);
 backdrop-filter: blur(4px);
 }

 .mobileMenu_overlay.is-visible {
 opacity: 1;
 pointer-events: all;
 }

 .mobileMenu_list { display: flex; flex-direction: column; gap: var(--space-2); }

 .mobileMenu_item { opacity: 0; transform: translateX(-20px); transition: all 0.3s ease; }

 .mobileMenu.is-open .mobileMenu_item { opacity: 1; transform: translateX(0); }
 .mobileMenu.is-open .mobileMenu_item:nth-child(1) { transition-delay: 0.05s; }
 .mobileMenu.is-open .mobileMenu_item:nth-child(2) { transition-delay: 0.1s; }
 .mobileMenu.is-open .mobileMenu_item:nth-child(3) { transition-delay: 0.15s; }
 .mobileMenu.is-open .mobileMenu_item:nth-child(4) { transition-delay: 0.2s; }
 .mobileMenu.is-open .mobileMenu_item:nth-child(5) { transition-delay: 0.25s; }
 .mobileMenu.is-open .mobileMenu_item:nth-child(6) { transition-delay: 0.3s; }

 .mobileMenu_link {
 display: block;
 padding: 0.875rem var(--space-4);
 color: var(--clr-text-light);
 font-size: var(--fs-md);
 font-weight: var(--fw-medium);
 border-radius: var(--radius-md);
 transition: all var(--transition);
 min-height: 44px;
 display: flex;
 align-items: center;
 }

 .mobileMenu_link:hover { background: rgba(255,255,255,0.08); color: #fff; }

 .mobileMenu_link--cta {
 background: var(--grad-accent);
 color: #fff;
 margin-top: var(--space-4);
 justify-content: center;
 box-shadow: 0 4px 16px rgba(37,99,176,0.35);
 }

 
 .sectionLabel {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--fs-xs);
 font-weight: var(--fw-semi);
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--clr-accent-light);
 margin-bottom: var(--space-3);
 }

 .sectionLabel--light { color: var(--clr-accent-light); }

 .sectionLabel::before {
 content: '';
 display: block;
 width: 20px;
 height: 2px;
 background: var(--clr-accent-light);
 border-radius: 2px;
 }

 .sectionHeading {
 font-family: var(--ff-heading);
 font-size: var(--fs-3xl);
 font-weight: var(--fw-bold);
 color: var(--clr-text);
 line-height: 1.2;
 margin-bottom: var(--space-6);
 }

 .sectionHeading--light { color: var(--clr-text-light); }

 
 .revealEl {
 opacity: 0;
 transform: translateY(28px);
 transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .revealEl.is-visible {
 opacity: 1;
 transform: translateY(0);
 }

 
 .mainHero {
 position: relative;
 min-height: 100vh;
 background: var(--grad-hero);
 display: flex;
 align-items: center;
 overflow: hidden;
 padding-top: var(--nav-h);
 }

 .mainHero_blobA,
 .mainHero_blobB {
 position: absolute;
 border-radius: 50%;
 filter: blur(80px);
 pointer-events: none;
 }

 .mainHero_blobA {
 width: 600px;
 height: 600px;
 background: radial-gradient(ellipse, rgba(37,99,176,0.25) 0%, transparent 70%);
 top: -10%;
 right: -5%;
 animation: blobDrift 28s ease-in-out infinite alternate;
 }

 .mainHero_blobB {
 width: 400px;
 height: 400px;
 background: radial-gradient(ellipse, rgba(74,144,217,0.15) 0%, transparent 70%);
 bottom: 10%;
 left: 5%;
 animation: blobDrift 22s ease-in-out infinite alternate-reverse;
 }

 @keyframes blobDrift {
 0% { transform: translate(0, 0) scale(1); }
 33% { transform: translate(30px, -20px) scale(1.05); }
 66% { transform: translate(-20px, 30px) scale(0.97); }
 100% { transform: translate(20px, 10px) scale(1.03); }
 }

 @keyframes scrollDot {
 0%, 100% { transform: translateY(0); opacity: 0.6; }
 50% { transform: translateY(10px); opacity: 1; }
 }

 .mainHero_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding: var(--space-16) var(--space-6);
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-12);
 align-items: center;
 width: 100%;
 position: relative;
 z-index: 1;
 }

 .mainHero_badge {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 background: rgba(74,144,217,0.12);
 border: 1px solid rgba(74,144,217,0.25);
 border-radius: var(--radius-full);
 padding: 0.35rem 0.875rem;
 font-size: var(--fs-xs);
 font-weight: var(--fw-medium);
 color: var(--clr-accent-light);
 margin-bottom: var(--space-4);
 letter-spacing: 0.04em;
 }

 .mainHero_title {
 font-family: var(--ff-heading);
 font-size: var(--fs-5xl);
 font-weight: var(--fw-bold);
 color: #fff;
 line-height: 1.05;
 margin-bottom: var(--space-3);
 letter-spacing: -0.02em;
 }

 .mainHero_subtitle {
 font-size: var(--fs-lg);
 font-weight: var(--fw-medium);
 color: var(--clr-accent-light);
 margin-bottom: var(--space-4);
 letter-spacing: 0.02em;
 }

 .mainHero_desc {
 font-size: var(--fs-md);
 color: var(--clr-text-muted-light);
 margin-bottom: var(--space-8);
 max-width: 480px;
 line-height: 1.7;
 }

 .mainHero_features {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
 margin-bottom: var(--space-8);
 }

 .mainHero_feature {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 background: rgba(255,255,255,0.06);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: var(--radius-full);
 padding: 0.4rem 0.875rem;
 font-size: var(--fs-sm);
 color: var(--clr-text-light);
 backdrop-filter: blur(8px);
 }

 .mainHero_cta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-4);
 }

 .mainHero_price {
 display: flex;
 align-items: baseline;
 gap: var(--space-3);
 flex-wrap: wrap;
 }

 .mainHero_priceNow {
 font-family: var(--ff-heading);
 font-size: var(--fs-3xl);
 font-weight: var(--fw-bold);
 color: #fff;
 }

 .mainHero_priceOld {
 font-size: var(--fs-xl);
 color: var(--clr-text-muted-light);
 text-decoration: line-through;
 text-decoration-color: rgba(255,255,255,0.4);
 }

 .mainHero_priceNote {
 font-size: var(--fs-xs);
 color: var(--clr-text-muted-light);
 letter-spacing: 0.04em;
 }

 .mainHero_visual {
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 }

 .mainHero_imgWrap {
 position: relative;
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-glow), 0 0 0 1px rgba(255,255,255,0.06);
 }

 .mainHero_imgWrap img {
 width: 100%;
 height: auto;
 display: block;
 }

 .mainHero_imgWrap::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 60%, rgba(10,22,40,0.5) 100%);
 pointer-events: none;
 }

 .mainHero_scroll {
 position: absolute;
 bottom: var(--space-8);
 left: 50%;
 transform: translateX(-50%);
 z-index: 2;
 }

 .mainHero_scrollDot {
 animation: scrollDot 2.2s ease-in-out infinite;
 }

 
 .dividerWave {
 line-height: 0;
 background: var(--grad-hero);
 }

 .dividerWave svg { display: block; width: 100%; }

 
 .aboutSection {
 background: var(--clr-bg);
 padding: var(--space-24) 0;
 }

 .aboutSection_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-16);
 align-items: center;
 }

 .aboutSection_text p {
 color: var(--clr-text-muted);
 line-height: 1.8;
 margin-bottom: var(--space-4);
 font-size: var(--fs-md);
 }

 .aboutSection_tags {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 margin-top: var(--space-6);
 }

 .tag {
 display: inline-block;
 background: rgba(37,99,176,0.08);
 border: 1px solid rgba(37,99,176,0.2);
 color: var(--clr-accent);
 border-radius: var(--radius-full);
 padding: 0.3rem 0.75rem;
 font-size: var(--fs-xs);
 font-weight: var(--fw-medium);
 letter-spacing: 0.03em;
 }

 .aboutSection_img {
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-lg);
 position: relative;
 }

 .aboutSection_img::before {
 content: '';
 position: absolute;
 inset: -1px;
 border-radius: var(--radius-xl);
 background: linear-gradient(135deg, rgba(74,144,217,0.3) 0%, transparent 60%);
 z-index: 1;
 pointer-events: none;
 }

 .aboutSection_img img { width: 100%; height: 100%; object-fit: cover; }

 
 .vitalitySection {
 background: var(--grad-dark);
 padding: var(--space-24) 0;
 position: relative;
 overflow: hidden;
 }

 .vitalitySection::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(74,144,217,0.4), transparent);
 }

 .vitalitySection_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 text-align: center;
 }

 .vitalitySection_inner .sectionHeading { margin-bottom: var(--space-12); }

 .vitalitySection_grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-6);
 text-align: left;
 }

 .vitalityCard {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: var(--radius-lg);
 padding: var(--space-8);
 backdrop-filter: blur(12px);
 transition: all var(--transition);
 }

 .vitalityCard:hover {
 background: rgba(255,255,255,0.07);
 border-color: rgba(74,144,217,0.25);
 transform: translateY(-3px);
 box-shadow: 0 8px 32px rgba(10,22,40,0.3), 0 0 0 1px rgba(74,144,217,0.15);
 }

 .vitalityCard_icon {
 width: 52px;
 height: 52px;
 background: rgba(74,144,217,0.1);
 border-radius: var(--radius-md);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: var(--space-4);
 }

 .vitalityCard h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-lg);
 font-weight: var(--fw-semi);
 color: var(--clr-text-light);
 margin-bottom: var(--space-3);
 }

 .vitalityCard p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-base);
 line-height: 1.7;
 }

 
 .benefitsSection {
 background: var(--clr-bg);
 padding: var(--space-24) 0;
 clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
 margin: -2% 0;
 padding-top: calc(var(--space-24) + 3%);
 padding-bottom: calc(var(--space-24) + 3%);
 }

 .benefitsSection_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .benefitsSection_head {
 max-width: 600px;
 margin-bottom: var(--space-12);
 }

 .benefitsSection_intro {
 color: var(--clr-text-muted);
 font-size: var(--fs-md);
 line-height: 1.7;
 }

 .benefitsGrid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-6);
 }

 .benefitCard {
 background: #fff;
 border: 1px solid var(--clr-border);
 border-radius: var(--radius-lg);
 padding: var(--space-8);
 transition: all var(--transition);
 box-shadow: var(--shadow-card);
 position: relative;
 overflow: hidden;
 }

 .benefitCard::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: var(--grad-accent);
 transform: scaleX(0);
 transition: transform var(--transition);
 transform-origin: left;
 }

 .benefitCard:hover::before { transform: scaleX(1); }

 .benefitCard:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-md), 0 0 0 1px rgba(37,99,176,0.1);
 }

 .benefitCard_icon {
 width: 56px;
 height: 56px;
 background: rgba(37,99,176,0.06);
 border-radius: var(--radius-md);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: var(--space-4);
 transition: background var(--transition);
 }

 .benefitCard:hover .benefitCard_icon { background: rgba(37,99,176,0.12); }

 .benefitCard h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-md);
 font-weight: var(--fw-semi);
 color: var(--clr-text);
 margin-bottom: var(--space-3);
 }

 .benefitCard p {
 color: var(--clr-text-muted);
 font-size: var(--fs-sm);
 line-height: 1.7;
 }

 
 .profilesSection {
 background: var(--clr-bg);
 padding: var(--space-20) 0;
 }

 .profilesSection_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .profilesSection_head {
 margin-bottom: var(--space-12);
 }

 .profileZigzag { display: flex; flex-direction: column; gap: var(--space-16); }

 .profileItem {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-12);
 align-items: center;
 }

 .profileItem--right { direction: rtl; }
 .profileItem--right > * { direction: ltr; }

 .profileItem_img {
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-lg);
 aspect-ratio: 4/3;
 }

 .profileItem_img img { width: 100%; height: 100%; object-fit: cover; }

 .profileItem_content { padding: var(--space-4) 0; }

 .profileItem_num {
 font-family: var(--ff-heading);
 font-size: var(--fs-4xl);
 font-weight: var(--fw-bold);
 color: rgba(37,99,176,0.12);
 line-height: 1;
 margin-bottom: var(--space-2);
 letter-spacing: -0.03em;
 }

 .profileItem_content h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-xl);
 font-weight: var(--fw-semi);
 color: var(--clr-text);
 margin-bottom: var(--space-4);
 }

 .profileItem_content p {
 color: var(--clr-text-muted);
 line-height: 1.8;
 margin-bottom: var(--space-6);
 }

 .profileItem_detail {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 }

 .profileItem_detail span {
 background: rgba(37,99,176,0.07);
 border: 1px solid rgba(37,99,176,0.15);
 color: var(--clr-accent);
 border-radius: var(--radius-full);
 padding: 0.25rem 0.75rem;
 font-size: var(--fs-xs);
 font-weight: var(--fw-medium);
 }

 
 .compositionSection {
 background: var(--grad-mid);
 padding: var(--space-24) 0;
 position: relative;
 }

 .compositionSection::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(74,144,217,0.4), transparent);
 }

 .compositionSection_inner {
 max-width: 900px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .compositionSection_head { text-align: center; margin-bottom: var(--space-10); }

 .compositionSection_intro {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-md);
 max-width: 600px;
 margin-inline: auto;
 line-height: 1.7;
 }

 .accordion { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }

 .accordion_item { border-bottom: 1px solid rgba(255,255,255,0.08); }
 .accordion_item:last-child { border-bottom: none; }

 .accordion_trigger {
 width: 100%;
 display: flex;
 align-items: center;
 gap: var(--space-4);
 padding: var(--space-6) var(--space-8);
 background: rgba(255,255,255,0.04);
 text-align: left;
 transition: background var(--transition);
 cursor: pointer;
 }

 .accordion_trigger:hover { background: rgba(255,255,255,0.07); }

 .accordion_item--open .accordion_trigger { background: rgba(74,144,217,0.1); }

 .accordion_name {
 font-family: var(--ff-heading);
 font-size: var(--fs-md);
 font-weight: var(--fw-semi);
 color: var(--clr-text-light);
 flex: 1;
 }

 .accordion_sub {
 font-size: var(--fs-xs);
 color: var(--clr-text-muted-light);
 margin-right: var(--space-4);
 white-space: nowrap;
 }

 .accordion_arrow {
 color: var(--clr-accent-light);
 transition: transform var(--transition);
 flex-shrink: 0;
 }

 .accordion_item--open .accordion_arrow { transform: rotate(180deg); }

 .accordion_body {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .accordion_item--open .accordion_body { max-height: 300px; }

 .accordion_content {
 padding: var(--space-6) var(--space-8);
 background: rgba(255,255,255,0.02);
 }

 .accordion_content p {
 color: var(--clr-text-muted-light);
 line-height: 1.8;
 font-size: var(--fs-base);
 }

 .compositionSection_disclaimer {
 margin-top: var(--space-8);
 color: var(--clr-text-muted-light);
 font-size: var(--fs-xs);
 text-align: center;
 opacity: 0.7;
 line-height: 1.6;
 }

 
 .ingredientDrawer {
 background: var(--clr-bg);
 padding: var(--space-20) 0;
 }

 .ingredientDrawer_inner {
 max-width: 900px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .ingredientDrawer_head {
 text-align: center;
 margin-bottom: var(--space-10);
 }

 .ingredientDrawer_head p {
 color: var(--clr-text-muted);
 font-size: var(--fs-md);
 }

 .ingredientChips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
 justify-content: center;
 margin-bottom: var(--space-6);
 }

 .ingredientChip {
 padding: 0.6rem 1.25rem;
 border-radius: var(--radius-full);
 border: 1.5px solid var(--clr-border);
 background: #fff;
 color: var(--clr-text-muted);
 font-size: var(--fs-sm);
 font-weight: var(--fw-medium);
 transition: all var(--transition);
 cursor: pointer;
 min-height: 44px;
 box-shadow: var(--shadow-sm);
 }

 .ingredientChip:hover {
 border-color: var(--clr-accent-light);
 color: var(--clr-accent);
 transform: translateY(-2px);
 box-shadow: 0 4px 16px rgba(37,99,176,0.15);
 }

 .ingredientChip.is-active {
 background: var(--grad-accent);
 border-color: transparent;
 color: #fff;
 box-shadow: 0 4px 20px rgba(37,99,176,0.3);
 }

 .ingredientDrawer_panel {
 background: #fff;
 border: 1px solid var(--clr-border);
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-md);
 min-height: 0;
 transition: min-height var(--transition-slow);
 }

 .ingredientDrawer_panel:has(.ingredientDrawer_content:not([hidden])) {
 min-height: 160px;
 }

 .ingredientDrawer_content {
 animation: drawerSlide 0.3s ease;
 }

 @keyframes drawerSlide {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
 }

 .ingredientDrawer_contentInner {
 padding: var(--space-8) var(--space-10);
 }

 .ingredientDrawer_contentInner h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-xl);
 font-weight: var(--fw-semi);
 color: var(--clr-text);
 margin-bottom: var(--space-3);
 }

 .ingredientDrawer_contentInner p {
 color: var(--clr-text-muted);
 line-height: 1.8;
 font-size: var(--fs-md);
 margin-bottom: var(--space-4);
 }

 .ingredientDrawer_type {
 display: inline-block;
 background: rgba(37,99,176,0.08);
 border: 1px solid rgba(37,99,176,0.2);
 color: var(--clr-accent);
 border-radius: var(--radius-full);
 padding: 0.25rem 0.75rem;
 font-size: var(--fs-xs);
 font-weight: var(--fw-medium);
 }

 
 .dosageSection {
 background: var(--clr-bg);
 padding: var(--space-20) 0;
 border-top: 1px solid var(--clr-border);
 border-bottom: 1px solid var(--clr-border);
 }

 .dosageSection_inner {
 max-width: 1100px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: var(--space-16);
 align-items: center;
 }

 .dosageSection_visual {
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-lg);
 }

 .dosageSection_visual img { width: 100%; height: 100%; object-fit: cover; }

 .dosageCard {
 background: #fff;
 border: 1px solid var(--clr-border);
 border-radius: var(--radius-lg);
 padding: var(--space-8);
 box-shadow: var(--shadow-card);
 }

 .dosageCard_main {
 display: flex;
 align-items: center;
 gap: var(--space-4);
 margin-bottom: var(--space-6);
 padding-bottom: var(--space-6);
 border-bottom: 1px solid var(--clr-border);
 }

 .dosageCard_number {
 font-family: var(--ff-heading);
 font-size: clamp(3rem, 8vw, 5rem);
 font-weight: var(--fw-bold);
 color: var(--clr-accent);
 line-height: 1;
 }

 .dosageCard_label strong {
 display: block;
 font-size: var(--fs-lg);
 font-weight: var(--fw-semi);
 color: var(--clr-text);
 }

 .dosageCard_label span {
 font-size: var(--fs-sm);
 color: var(--clr-text-muted);
 }

 .dosageCard p {
 color: var(--clr-text-muted);
 line-height: 1.7;
 margin-bottom: var(--space-4);
 font-size: var(--fs-base);
 }

 .dosageCard_warning {
 display: flex;
 gap: var(--space-3);
 background: rgba(184,134,11,0.06);
 border: 1px solid rgba(184,134,11,0.2);
 border-radius: var(--radius-md);
 padding: var(--space-4);
 margin-top: var(--space-4);
 }

 .dosageCard_warning svg { flex-shrink: 0; margin-top: 2px; }

 .dosageCard_warning p {
 color: var(--clr-warn);
 font-size: var(--fs-xs);
 line-height: 1.6;
 margin-bottom: 0;
 }

 
 .howToBuySection {
 background: var(--grad-dark);
 padding: var(--space-24) 0;
 position: relative;
 overflow: hidden;
 }

 .howToBuySection::after {
 content: '';
 position: absolute;
 bottom: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(74,144,217,0.4), transparent);
 }

 .howToBuySection_inner {
 max-width: 900px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .howToBuySection_head {
 text-align: center;
 margin-bottom: var(--space-16);
 }

 .howToBuySection_head p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-md);
 margin-top: var(--space-2);
 }

 .orderTimeline {
 position: relative;
 padding-left: 48px;
 }

 .orderTimeline_line {
 position: absolute;
 left: 16px;
 top: 16px;
 bottom: 16px;
 width: 2px;
 background: linear-gradient(180deg, var(--clr-accent) 0%, rgba(74,144,217,0.2) 100%);
 }

 .orderStep {
 position: relative;
 margin-bottom: var(--space-10);
 display: flex;
 align-items: flex-start;
 gap: var(--space-6);
 }

 .orderStep:last-child { margin-bottom: 0; }

 .orderStep_dot {
 position: absolute;
 left: -44px;
 top: 4px;
 width: 32px;
 height: 32px;
 background: var(--grad-accent);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: var(--fs-xs);
 font-weight: var(--fw-bold);
 color: #fff;
 box-shadow: 0 0 0 4px rgba(37,99,176,0.2);
 flex-shrink: 0;
 z-index: 1;
 }

 .orderStep_card {
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: var(--radius-lg);
 padding: var(--space-6) var(--space-8);
 backdrop-filter: blur(8px);
 transition: all var(--transition);
 flex: 1;
 }

 .orderStep_card:hover {
 background: rgba(255,255,255,0.08);
 border-color: rgba(74,144,217,0.2);
 }

 .orderStep_card h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-lg);
 font-weight: var(--fw-semi);
 color: var(--clr-text-light);
 margin-bottom: var(--space-2);
 }

 .orderStep_card p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-base);
 line-height: 1.7;
 }

 
 .faqSection {
 background: var(--clr-bg);
 padding: var(--space-24) 0;
 }

 .faqSection_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .faqSection_head { margin-bottom: var(--space-12); }

 .faqLayout {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: var(--space-8);
 align-items: start;
 }

 .faqSidebar {
 position: sticky;
 top: calc(var(--nav-h) + var(--space-6));
 background: #fff;
 border: 1px solid var(--clr-border);
 border-radius: var(--radius-lg);
 padding: var(--space-4);
 box-shadow: var(--shadow-card);
 }

 .faqSidebar_list { display: flex; flex-direction: column; gap: var(--space-1); }

 .faqSidebar_btn {
 width: 100%;
 text-align: left;
 padding: 0.75rem var(--space-4);
 border-radius: var(--radius-md);
 font-size: var(--fs-sm);
 font-weight: var(--fw-medium);
 color: var(--clr-text-muted);
 transition: all var(--transition);
 cursor: pointer;
 min-height: 44px;
 line-height: 1.3;
 }

 .faqSidebar_btn:hover {
 background: rgba(37,99,176,0.06);
 color: var(--clr-accent);
 }

 .faqSidebar_btn--active {
 background: rgba(37,99,176,0.1);
 color: var(--clr-accent);
 font-weight: var(--fw-semi);
 }

 .faqContent {
 background: #fff;
 border: 1px solid var(--clr-border);
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-card);
 }

 .faqAnswer {
 display: none;
 padding: var(--space-10) var(--space-10);
 animation: faqFade 0.3s ease;
 }

 @keyframes faqFade {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
 }

 .faqAnswer--active { display: block; }

 .faqAnswer h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-xl);
 font-weight: var(--fw-semi);
 color: var(--clr-text);
 margin-bottom: var(--space-4);
 padding-bottom: var(--space-4);
 border-bottom: 1px solid var(--clr-border);
 }

 .faqAnswer p {
 color: var(--clr-text-muted);
 line-height: 1.8;
 font-size: var(--fs-md);
 }

 
 .productCardSection {
 background: var(--grad-mid);
 padding: var(--space-20) 0;
 }

 .productCardSection_inner {
 max-width: 1000px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .productCard {
 background: rgba(255,255,255,0.06);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: var(--radius-xl);
 padding: var(--space-10);
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: var(--space-10);
 align-items: center;
 backdrop-filter: blur(16px);
 box-shadow: var(--shadow-glow);
 }

 .productCard_img {
 border-radius: var(--radius-lg);
 overflow: hidden;
 aspect-ratio: 9/10;
 }

 .productCard_img img { width: 100%; height: 100%; object-fit: cover; }

 .productCard_title {
 font-family: var(--ff-heading);
 font-size: var(--fs-2xl);
 font-weight: var(--fw-bold);
 color: var(--clr-text-light);
 margin-bottom: var(--space-6);
 line-height: 1.2;
 }

 .productCard_list {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 margin-bottom: var(--space-8);
 }

 .productCard_list li {
 display: flex;
 align-items: flex-start;
 gap: var(--space-3);
 color: var(--clr-text-muted-light);
 font-size: var(--fs-base);
 line-height: 1.5;
 }

 .productCard_list li svg { flex-shrink: 0; margin-top: 2px; }

 .productCard_price {
 display: flex;
 align-items: baseline;
 gap: var(--space-3);
 flex-wrap: wrap;
 margin-bottom: var(--space-6);
 }

 .productCard_priceNow {
 font-family: var(--ff-heading);
 font-size: var(--fs-3xl);
 font-weight: var(--fw-bold);
 color: #fff;
 }

 .productCard_priceOld {
 font-size: var(--fs-xl);
 color: rgba(255,255,255,0.4);
 text-decoration: line-through;
 }

 .productCard_priceNote {
 font-size: var(--fs-xs);
 color: var(--clr-text-muted-light);
 letter-spacing: 0.04em;
 }

 
 .dividerDots {
 background: var(--clr-bg);
 padding: var(--space-8) 0;
 display: flex;
 justify-content: center;
 }

 .dividerDots_inner {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 }

 .dividerDots_inner span {
 display: block;
 border-radius: 50%;
 background: var(--clr-steel-light);
 }

 .dividerDots_inner span:nth-child(1),
 .dividerDots_inner span:nth-child(7) { width: 4px; height: 4px; opacity: 0.3; }

 .dividerDots_inner span:nth-child(2),
 .dividerDots_inner span:nth-child(6) { width: 5px; height: 5px; opacity: 0.5; }

 .dividerDots_inner span:nth-child(3),
 .dividerDots_inner span:nth-child(5) { width: 6px; height: 6px; opacity: 0.7; }

 .dividerDots_inner span:nth-child(4) {
 width: 10px; height: 10px;
 background: var(--clr-accent-light);
 opacity: 1;
 }

 
 .orderSection {
 background: var(--grad-dark);
 padding: var(--space-24) 0;
 position: relative;
 }

 .orderSection::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(74,144,217,0.4), transparent);
 }

 .orderSection_inner {
 max-width: 800px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .orderSection_head {
 text-align: center;
 margin-bottom: var(--space-10);
 }

 .orderSection_head p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-md);
 margin-bottom: var(--space-4);
 }

 .orderSection_priceChip {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 background: rgba(74,144,217,0.12);
 border: 1px solid rgba(74,144,217,0.25);
 border-radius: var(--radius-full);
 padding: 0.5rem 1.125rem;
 font-size: var(--fs-sm);
 color: var(--clr-text-muted-light);
 }

 .orderSection_priceChip strong { color: #fff; font-weight: var(--fw-semi); }

 .orderSection_formWrap {
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: var(--radius-xl);
 padding: var(--space-10);
 backdrop-filter: blur(16px);
 box-shadow: var(--shadow-lg);
 }

 .orderForm { display: flex; flex-direction: column; gap: var(--space-5); }

 .formRow {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-5);
 }

 .formField { display: flex; flex-direction: column; gap: var(--space-2); }

 .formField_label {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--fs-sm);
 font-weight: var(--fw-medium);
 color: var(--clr-text-muted-light);
 }

 .formField_input {
 padding: 0.75rem 1rem;
 background: rgba(255,255,255,0.06);
 border: 1.5px solid rgba(255,255,255,0.12);
 border-radius: var(--radius-md);
 color: var(--clr-text-light);
 font-size: var(--fs-base);
 transition: all var(--transition);
 min-height: 44px;
 outline: none;
 }

 .formField_input::placeholder { color: rgba(255,255,255,0.3); }

 .formField_input:focus {
 border-color: var(--clr-accent-light);
 background: rgba(255,255,255,0.08);
 box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
 }

 .formField_input.has-error { border-color: #e05050; }

 .formField_select option {
 background: #1a2640;
 color: var(--clr-text-light);
 }

 .formField_textarea { resize: vertical; min-height: 120px; }

 .formField_error {
 font-size: var(--fs-xs);
 color: #e05050;
 min-height: 18px;
 display: block;
 }

 .formConsent {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 }

 .formConsent_label {
 display: flex;
 align-items: flex-start;
 gap: var(--space-3);
 cursor: pointer;
 }

 .formConsent_checkbox {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 }

 .formConsent_custom {
 width: 20px;
 height: 20px;
 min-width: 20px;
 border: 1.5px solid rgba(255,255,255,0.25);
 border-radius: var(--radius-sm);
 background: rgba(255,255,255,0.06);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all var(--transition);
 margin-top: 2px;
 }

 .formConsent_checkbox:checked + .formConsent_custom {
 background: var(--clr-accent);
 border-color: var(--clr-accent);
 }

 .formConsent_checkbox:checked + .formConsent_custom::after {
 content: '';
 display: block;
 width: 10px;
 height: 6px;
 border-left: 2px solid #fff;
 border-bottom: 2px solid #fff;
 transform: rotate(-45deg) translateY(-1px);
 }

 .formConsent_checkbox:focus + .formConsent_custom {
 box-shadow: 0 0 0 3px rgba(74,144,217,0.25);
 }

 .formConsent_text {
 font-size: var(--fs-sm);
 color: var(--clr-text-muted-light);
 line-height: 1.6;
 }

 .formConsent_text a {
 color: var(--clr-accent-light);
 text-decoration: underline;
 text-underline-offset: 2px;
 transition: color var(--transition);
 }

 .formConsent_text a:hover { color: #fff; }

 .formSubmit {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--space-4);
 padding-top: var(--space-2);
 }

 .formSubmit_price {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--fs-sm);
 color: var(--clr-text-muted-light);
 }

 .formSubmit_price strong { color: #fff; font-size: var(--fs-lg); }

 .formSmallprint {
 font-size: var(--fs-xs);
 color: rgba(255,255,255,0.35);
 text-align: center;
 line-height: 1.5;
 }

 
 .pageFooter {
 background: var(--grad-footer);
 padding: var(--space-16) 0 var(--space-8);
 position: relative;
 }

 .pageFooter::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(74,144,217,0.3), transparent);
 }

 .pageFooter_inner {
 max-width: 1200px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .pageFooter_top {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr;
 gap: var(--space-10);
 margin-bottom: var(--space-10);
 padding-bottom: var(--space-10);
 border-bottom: 1px solid rgba(255,255,255,0.08);
 }

 .pageFooter_logo { margin-bottom: var(--space-4); }

 .pageFooter_brand p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-sm);
 line-height: 1.7;
 margin-bottom: var(--space-3);
 }

 .pageFooter_disclaimer {
 font-size: var(--fs-xs) !important;
 opacity: 0.6;
 }

 .pageFooter_nav h4,
 .pageFooter_contact h4,
 .pageFooter_legal h4 {
 font-family: var(--ff-heading);
 font-size: var(--fs-sm);
 font-weight: var(--fw-semi);
 color: var(--clr-text-light);
 margin-bottom: var(--space-4);
 letter-spacing: 0.04em;
 }

 .pageFooter_nav ul,
 .pageFooter_legal ul {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 }

 .pageFooter_nav a,
 .pageFooter_legal a {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-sm);
 transition: color var(--transition);
 display: inline-block;
 padding: var(--space-1) 0;
 }

 .pageFooter_nav a:hover,
 .pageFooter_legal a:hover { color: var(--clr-accent-light); }

 .pageFooter_contact address {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 }

 .pageFooter_contact p {
 display: flex;
 align-items: flex-start;
 gap: var(--space-2);
 color: var(--clr-text-muted-light);
 font-size: var(--fs-sm);
 line-height: 1.5;
 }

 .pageFooter_contact svg { flex-shrink: 0; margin-top: 2px; opacity: 0.6; }

 .pageFooter_contact a {
 color: var(--clr-text-muted-light);
 transition: color var(--transition);
 }

 .pageFooter_contact a:hover { color: var(--clr-accent-light); }

 .pageFooter_bottom {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--space-3);
 }

 .pageFooter_bottom p {
 color: rgba(255,255,255,0.3);
 font-size: var(--fs-xs);
 }

 
 .cookieCard {
 position: fixed;
 top: var(--space-6);
 left: var(--space-6);
 z-index: 1000;
 background: #0e1420;
 border: 1px solid rgba(74,144,217,0.25);
 border-radius: var(--radius-lg);
 padding: var(--space-4) var(--space-5);
 max-width: 300px;
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05);
 transform: translateX(calc(-100% - var(--space-6)));
 transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 }

 .cookieCard.is-visible { transform: translateX(0); }

 .cookieCard_icon {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 }

 .cookieCard_text p {
 font-size: var(--fs-sm);
 color: var(--clr-text-light);
 line-height: 1.5;
 }

 .cookieCard_sub {
 color: var(--clr-text-muted-light) !important;
 font-size: var(--fs-xs) !important;
 margin-top: var(--space-1);
 }

 .cookieCard_btns {
 display: flex;
 gap: var(--space-2);
 }

 .cookieCard_btn {
 padding: 0.5rem 1rem;
 border-radius: var(--radius-full);
 font-size: var(--fs-xs);
 font-weight: var(--fw-semi);
 transition: all var(--transition);
 min-height: 36px;
 cursor: pointer;
 }

 .cookieCard_btn--accept {
 background: var(--grad-accent);
 color: #fff;
 box-shadow: 0 2px 8px rgba(37,99,176,0.3);
 flex: 1;
 }

 .cookieCard_btn--accept:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,176,0.4); }

 .cookieCard_btn--settings {
 background: rgba(255,255,255,0.06);
 color: var(--clr-text-muted-light);
 border: 1px solid rgba(255,255,255,0.1);
 }

 .cookieCard_btn--settings:hover { background: rgba(255,255,255,0.1); }

 .cookieModal_overlay {
 position: fixed;
 inset: 0;
 background: rgba(10,22,40,0.8);
 z-index: 1001;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: var(--space-6);
 backdrop-filter: blur(6px);
 opacity: 0;
 pointer-events: none;
 transition: opacity var(--transition-slow);
 }

 .cookieModal_overlay.is-visible {
 opacity: 1;
 pointer-events: all;
 }

 .cookieModal {
 background: #141c2e;
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: var(--radius-xl);
 width: 100%;
 max-width: 520px;
 box-shadow: var(--shadow-lg);
 overflow: hidden;
 transform: scale(0.95) translateY(16px);
 transition: transform var(--transition-slow);
 }

 .cookieModal_overlay.is-visible .cookieModal { transform: scale(1) translateY(0); }

 .cookieModal_head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: var(--space-6) var(--space-8);
 border-bottom: 1px solid rgba(255,255,255,0.08);
 }

 .cookieModal_head h2 {
 font-family: var(--ff-heading);
 font-size: var(--fs-lg);
 color: var(--clr-text-light);
 }

 .cookieModal_close {
 color: var(--clr-text-muted-light);
 padding: var(--space-2);
 border-radius: var(--radius-sm);
 transition: all var(--transition);
 min-width: 36px;
 min-height: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 }

 .cookieModal_close:hover { background: rgba(255,255,255,0.08); color: #fff; }

 .cookieModal_body {
 padding: var(--space-6) var(--space-8);
 display: flex;
 flex-direction: column;
 gap: var(--space-6);
 }

 .cookieCategory_head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--space-2);
 }

 .cookieCategory_head h3 {
 font-size: var(--fs-base);
 font-weight: var(--fw-semi);
 color: var(--clr-text-light);
 }

 .cookieCategory_badge {
 font-size: var(--fs-xs);
 background: rgba(74,144,217,0.15);
 color: var(--clr-accent-light);
 border-radius: var(--radius-full);
 padding: 0.2rem 0.6rem;
 }

 .cookieCategory p {
 font-size: var(--fs-sm);
 color: var(--clr-text-muted-light);
 line-height: 1.6;
 }

 .cookieToggle { display: flex; align-items: center; cursor: pointer; }
 .cookieToggle_input { position: absolute; opacity: 0; width: 0; height: 0; }

 .cookieToggle_slider {
 width: 44px;
 height: 24px;
 background: rgba(255,255,255,0.1);
 border-radius: var(--radius-full);
 position: relative;
 transition: background var(--transition);
 }

 .cookieToggle_slider::after {
 content: '';
 position: absolute;
 top: 3px; left: 3px;
 width: 18px; height: 18px;
 background: #fff;
 border-radius: 50%;
 transition: transform var(--transition);
 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 }

 .cookieToggle_input:checked + .cookieToggle_slider { background: var(--clr-accent); }
 .cookieToggle_input:checked + .cookieToggle_slider::after { transform: translateX(20px); }

 .cookieModal_foot {
 display: flex;
 gap: var(--space-3);
 justify-content: flex-end;
 padding: var(--space-6) var(--space-8);
 border-top: 1px solid rgba(255,255,255,0.08);
 }

 
 .legalPage {
 min-height: 100vh;
 padding-top: var(--nav-h);
 background: var(--clr-bg);
 }

 .legalPage_hero {
 background: var(--grad-dark);
 padding: var(--space-16) 0 var(--space-12);
 }

 .legalPage_heroInner {
 max-width: 900px;
 margin-inline: auto;
 padding-inline: var(--space-6);
 }

 .legalPage_heroInner h1 {
 font-family: var(--ff-heading);
 font-size: var(--fs-3xl);
 color: var(--clr-text-light);
 margin-bottom: var(--space-3);
 }

 .legalPage_heroInner p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-sm);
 }

 .legalPage_body {
 max-width: 900px;
 margin-inline: auto;
 padding: var(--space-12) var(--space-6) var(--space-16);
 }

 .legalPage_body h2 {
 font-family: var(--ff-heading);
 font-size: var(--fs-xl);
 color: var(--clr-text);
 margin: var(--space-10) 0 var(--space-4);
 padding-bottom: var(--space-3);
 border-bottom: 1px solid var(--clr-border);
 }

 .legalPage_body h2:first-child { margin-top: 0; }

 .legalPage_body h3 {
 font-family: var(--ff-heading);
 font-size: var(--fs-lg);
 color: var(--clr-text);
 margin: var(--space-6) 0 var(--space-3);
 }

 .legalPage_body p {
 color: var(--clr-text-muted);
 line-height: 1.8;
 margin-bottom: var(--space-4);
 font-size: var(--fs-base);
 }

 .legalPage_body ul {
 list-style: disc;
 padding-left: var(--space-6);
 margin-bottom: var(--space-4);
 }

 .legalPage_body li {
 color: var(--clr-text-muted);
 line-height: 1.7;
 margin-bottom: var(--space-2);
 font-size: var(--fs-base);
 }

 .legalPage_body a {
 color: var(--clr-accent);
 text-decoration: underline;
 text-underline-offset: 2px;
 }

 .legalPage_body a:hover { color: var(--clr-accent-light); }

 .legalPage_body strong { font-weight: var(--fw-semi); color: var(--clr-text); }

 
 .thanksPage {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 padding-top: var(--nav-h);
 }

 .thanksHero {
 flex: 1;
 background: var(--grad-hero);
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: var(--space-20) var(--space-6);
 position: relative;
 overflow: hidden;
 }

 .thanksHero::before {
 content: '';
 position: absolute;
 width: 500px; height: 500px;
 background: radial-gradient(ellipse, rgba(37,99,176,0.2) 0%, transparent 70%);
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 filter: blur(60px);
 pointer-events: none;
 }

 .thanksHero_inner { position: relative; z-index: 1; max-width: 600px; }

 .thanksHero_icon {
 width: 80px; height: 80px;
 background: rgba(74,144,217,0.15);
 border: 2px solid rgba(74,144,217,0.35);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto var(--space-6);
 }

 .thanksHero_inner h1 {
 font-family: var(--ff-heading);
 font-size: var(--fs-4xl);
 color: #fff;
 margin-bottom: var(--space-4);
 line-height: 1.2;
 }

 .thanksHero_inner p {
 color: var(--clr-text-muted-light);
 font-size: var(--fs-lg);
 line-height: 1.7;
 margin-bottom: var(--space-8);
 }

 
 @media (max-width: 1024px) {
 .mainHero_inner { grid-template-columns: 1fr; gap: var(--space-10); }
 .mainHero_visual { max-width: 480px; margin-inline: auto; }
 .aboutSection_inner { grid-template-columns: 1fr; }
 .benefitsGrid { grid-template-columns: repeat(2, 1fr); }
 .vitalitySection_grid { grid-template-columns: 1fr; }
 .faqLayout { grid-template-columns: 220px 1fr; }
 .pageFooter_top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
 .productCard { grid-template-columns: 200px 1fr; }
 }

 @media (max-width: 768px) {
 :root { --nav-h: 64px; }

 .siteNav { display: none; }
 .siteHeader_burger { display: flex; }

 .mainHero_inner { padding: var(--space-10) var(--space-4); }
 .mainHero_cta { flex-direction: column; align-items: flex-start; }
 .mainHero_price { flex-wrap: wrap; }

 .aboutSection { padding: var(--space-16) 0; }
 .aboutSection_inner { grid-template-columns: 1fr; gap: var(--space-8); }

 .vitalitySection { padding: var(--space-16) 0; }
 .vitalitySection_grid { grid-template-columns: 1fr; gap: var(--space-4); }

 .benefitsSection { padding: var(--space-16) 0; clip-path: none; margin: 0; }
 .benefitsGrid { grid-template-columns: 1fr; gap: var(--space-4); }

 .profilesSection { padding: var(--space-16) 0; }
 .profileItem { grid-template-columns: 1fr; gap: var(--space-6); }
 .profileItem--right { direction: ltr; }
 .profileZigzag { gap: var(--space-10); }

 .compositionSection { padding: var(--space-16) 0; }
 .accordion_trigger { padding: var(--space-4) var(--space-5); }
 .accordion_sub { display: none; }

 .dosageSection { padding: var(--space-16) 0; }
 .dosageSection_inner { grid-template-columns: 1fr; gap: var(--space-8); }

 .howToBuySection { padding: var(--space-16) 0; }
 .orderTimeline { padding-left: 44px; }

 .faqSection { padding: var(--space-16) 0; }
 .faqLayout { grid-template-columns: 1fr; }
 .faqSidebar { position: static; display: none; }
 .faqAnswer { display: none; }
 .faqAnswer--active { display: block; }

 .productCard { grid-template-columns: 1fr; }
 .productCard_img { max-height: 280px; }

 .orderSection { padding: var(--space-16) 0; }
 .orderSection_formWrap { padding: var(--space-6); }
 .formRow { grid-template-columns: 1fr; }
 .formSubmit { flex-direction: column; align-items: stretch; }
 .formSubmit .btn { width: 100%; justify-content: center; }

 .pageFooter_top { grid-template-columns: 1fr; gap: var(--space-8); }
 .pageFooter_bottom { flex-direction: column; text-align: center; }

 .cookieCard { max-width: calc(100vw - var(--space-8)); }

 .ingredientDrawer_contentInner { padding: var(--space-6); }
 }

 @media (max-width: 480px) {
 .mainHero_title { font-size: clamp(2.2rem, 10vw, 3rem); }
 .mainHero_features { flex-direction: column; }
 .ingredientChips { gap: var(--space-2); }
 .ingredientChip { font-size: var(--fs-xs); padding: 0.5rem 0.875rem; }
 .orderStep_card { padding: var(--space-4) var(--space-5); }
 .cookieModal_foot { flex-direction: column; }
 }
}

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

 .text-center { text-align: center; }
 .mt-auto { margin-top: auto; }

 :focus-visible {
 outline: 2px solid var(--clr-accent-light);
 outline-offset: 3px;
 border-radius: 3px;
 }

 ::selection {
 background: rgba(74,144,217,0.25);
 color: var(--clr-text);
 }
}