/* 1. BLUE */
body[data-theme="blue"]{
	--bg: #f5f8ff;
	--surface: rgba(255,255,255,.88);
	--surface-2: rgba(255,255,255,.96);
	--border: rgba(15, 55, 120, .12);
	--text: #13233d;
	--muted: #5c6a84;
	--accent: #1d4ed8;
	--accent-2: #0ea5e9;
	--accent-3: #0f67d8;
	--hero-1: #0f172a;
	--hero-2: #1d4ed8;
	--hero-3: #2563eb;
	--cta-1: #ff5b6e;
	--cta-2: #ff8a5c;
	--shadow: 0 22px 60px rgba(24, 48, 92, .10);
	--soft-bg: #eef4ff;
	--section-alt: #eef4ff;
	--tag-bg: rgba(255,255,255,.74);
	--hero-text: rgba(255,255,255,.86);
	--hero-heading: #ffffff;
}

/* 2. BRIGHT BLUE */
body[data-theme="bright-blue"]{
	--bg: #eff6ff;
	--surface: rgba(255,255,255,.88);
	--surface-2: rgba(255,255,255,.96);
	--border: rgba(30, 64, 175, .12);
	--text: #0f172a;
	--muted: #4b5563;
	--accent: #1d4ed8;
	--accent-2: #38bdf8;
	--accent-3: #0f172a;
	--hero-1: #0f172a;
	--hero-2: #1d4ed8;
	--hero-3: #2563eb;
	--cta-1: #1d4ed8;
	--cta-2: #38bdf8;
	--shadow: 0 22px 60px rgba(30, 64, 175, .16);
	--soft-bg: #dbeafe;
	--section-alt: #dbeafe;
	--tag-bg: rgba(255,255,255,.74);
	--hero-text: rgba(255,255,255,.84);
	--hero-heading: #ffffff;
}

/* 3. PREMIUM */
body[data-theme="premium"]{
	--bg: #0b0d12;
	--surface: rgba(255,255,255,.06);
	--surface-2: rgba(255,255,255,.09);
	--border: rgba(255,255,255,.12);
	--text: #f5f7fb;
	--muted: rgba(245,247,251,.72);
	--accent: #d8b46a;
	--accent-2: #f3d69a;
	--accent-3: #8f7cff;
	--hero-1: #0a0d14;
	--hero-2: #111827;
	--hero-3: #0d111a;
	--cta-1: #d8b46a;
	--cta-2: #f3d69a;
	--shadow: 0 24px 80px rgba(0,0,0,.34);
	--soft-bg: #10131b;
	--section-alt: rgba(255,255,255,.03);
	--tag-bg: rgba(255,255,255,.06);
	--hero-text: rgba(245,247,251,.82);
	--hero-heading: #ffffff;
}

/* 4. PINK */
body[data-theme="pink"]{
	--bg: #fff7fb;
	--surface: rgba(255,255,255,.78);
	--surface-2: rgba(255,255,255,.92);
	--border: rgba(224, 156, 182, .20);
	--text: #2f2430;
	--muted: #6f5b6b;
	--accent: #e86da0;
	--accent-2: #ff92bc;
	--accent-3: #ff6f91;
	--hero-1: #ffe7f1;
	--hero-2: #fff0f7;
	--hero-3: #ffd8e8;
	--cta-1: #e86da0;
	--cta-2: #ff6f91;
	--shadow: 0 22px 60px rgba(192, 105, 145, .12);
	--soft-bg: #fff0f7;
	--section-alt: rgba(255,255,255,.28);
	--tag-bg: rgba(255,255,255,.72);
	--hero-text: rgba(111,91,107,.84);
	--hero-heading: #2f2430;
}

/* 5. GREEN */
body[data-theme="green"]{
	--bg: #f4fbf6;
	--surface: rgba(255,255,255,.86);
	--surface-2: rgba(255,255,255,.95);
	--border: rgba(34, 197, 94, .14);
	--text: #10261a;
	--muted: #53685d;
	--accent: #22c55e;
	--accent-2: #86efac;
	--accent-3: #15803d;
	--hero-1: #0f172a;
	--hero-2: #14532d;
	--hero-3: #22c55e;
	--cta-1: #16a34a;
	--cta-2: #86efac;
	--shadow: 0 22px 60px rgba(34, 197, 94, .12);
	--soft-bg: #ecfdf3;
	--section-alt: #ecfdf3;
	--tag-bg: rgba(255,255,255,.76);
	--hero-text: rgba(255,255,255,.84);
	--hero-heading: #ffffff;
}

/* 6. SUNSET */
body[data-theme="sunset"]{
	--bg: #fff8f3;
	--surface: rgba(255,255,255,.84);
	--surface-2: rgba(255,255,255,.96);
	--border: rgba(244, 114, 182, .14);
	--text: #2a1d1a;
	--muted: #6a5b57;
	--accent: #f97316;
	--accent-2: #fb7185;
	--accent-3: #ea580c;
	--hero-1: #7c2d12;
	--hero-2: #fb7185;
	--hero-3: #f97316;
	--cta-1: #f97316;
	--cta-2: #fb7185;
	--shadow: 0 22px 60px rgba(244, 114, 182, .12);
	--soft-bg: #fff1e7;
	--section-alt: #fff1e7;
	--tag-bg: rgba(255,255,255,.78);
	--hero-text: rgba(255,255,255,.84);
	--hero-heading: #ffffff;
}

/* 7. VIOLET */
body[data-theme="violet"]{
	--bg: #f8f5ff;
	--surface: rgba(255,255,255,.84);
	--surface-2: rgba(255,255,255,.96);
	--border: rgba(124, 58, 237, .14);
	--text: #1f1630;
	--muted: #5f5672;
	--accent: #7c3aed;
	--accent-2: #c084fc;
	--accent-3: #4c1d95;
	--hero-1: #1f1147;
	--hero-2: #7c3aed;
	--hero-3: #a855f7;
	--cta-1: #7c3aed;
	--cta-2: #c084fc;
	--shadow: 0 22px 60px rgba(124, 58, 237, .12);
	--soft-bg: #f0eaff;
	--section-alt: #f0eaff;
	--tag-bg: rgba(255,255,255,.78);
	--hero-text: rgba(255,255,255,.84);
	--hero-heading: #ffffff;
}

/* 8. DARK GOLD */
body[data-theme="dark-gold"]{
	--bg: #0b0b0b;
	--surface: rgba(255,255,255,.06);
	--surface-2: rgba(255,255,255,.09);
	--border: rgba(255, 215, 128, .14);
	--text: #f5f1e8;
	--muted: rgba(245,241,232,.72);
	--accent: #d8b46a;
	--accent-2: #f6d79b;
	--accent-3: #b89247;
	--hero-1: #0a0a0a;
	--hero-2: #1a1410;
	--hero-3: #0f0f10;
	--cta-1: #d8b46a;
	--cta-2: #f6d79b;
	--shadow: 0 24px 80px rgba(0,0,0,.38);
	--soft-bg: #111111;
	--section-alt: rgba(255,255,255,.03);
	--tag-bg: rgba(255,255,255,.06);
	--hero-text: rgba(245,241,232,.82);
	--hero-heading: #ffffff;
}

/* 9. ICE */
body[data-theme="ice"]{
	--bg: #f7fbff;
	--surface: rgba(255,255,255,.86);
	--surface-2: rgba(255,255,255,.96);
	--border: rgba(56, 189, 248, .14);
	--text: #0f172a;
	--muted: #516177;
	--accent: #38bdf8;
	--accent-2: #a5f3fc;
	--accent-3: #0ea5e9;
	--hero-1: #0f172a;
	--hero-2: #0ea5e9;
	--hero-3: #38bdf8;
	--cta-1: #0ea5e9;
	--cta-2: #a5f3fc;
	--shadow: 0 22px 60px rgba(56, 189, 248, .12);
	--soft-bg: #ecfeff;
	--section-alt: #ecfeff;
	--tag-bg: rgba(255,255,255,.78);
	--hero-text: rgba(255,255,255,.84);
	--hero-heading: #ffffff;
}

/* 10. BLACK-ORANGE */
body[data-theme="black-orange"]{
	--bg: #0a0a0a;
	--surface: rgba(255,255,255,.06);
	--surface-2: rgba(255,255,255,.09);
	--border: rgba(255, 138, 0, .14);
	--text: #f6f6f6;
	--muted: rgba(246,246,246,.72);
	--accent: #ff8a00;
	--accent-2: #ffb347;
	--accent-3: #ff6f00;
	--hero-1: #111111;
	--hero-2: #ff8a00;
	--hero-3: #ff6f00;
	--cta-1: #ff8a00;
	--cta-2: #ffb347;
	--shadow: 0 24px 80px rgba(255, 138, 0, .14);
	--soft-bg: #121212;
	--section-alt: rgba(255,255,255,.03);
	--tag-bg: rgba(255,255,255,.06);
	--hero-text: rgba(246,246,246,.82);
	--hero-heading: #ffffff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
	margin:0;
	min-width:320px;
	font-family: Arial, Helvetica, sans-serif;
	color:var(--text);
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}

img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.container{
	width:min(1300px, calc(100% - 40px));
	margin:0 auto;
}

.section{ padding:96px 0; }

.eyebrow{
	margin:0 0 14px;
	font-size:12px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--accent);
	font-weight:700;
}

.section-head{
	max-width:760px;
	margin-bottom:36px;
}

h1,h2,h3,p{ margin-top:0; }

h1{
	color:var(--hero-heading);
	font-size:clamp(42px, 5.6vw, 72px);
	line-height:.98;
	letter-spacing:-.05em;
	margin-bottom:22px;
}

h2{
	font-size:clamp(32px, 3vw, 46px);
	line-height:1.04;
	letter-spacing:-.04em;
	margin-bottom:0;
}

h3{
	font-size:22px;
	line-height:1.15;
	letter-spacing:-.03em;
	margin-bottom:12px;
}

.lead,
.hero__text,
.cta__text,
.pain-item p,
.benefit-card p,
.footer p{
	color:var(--muted);
	line-height:1.75;
	font-size:16px;
}

.hero .lead,
.hero .hero__text{
	color:var(--hero-text);
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:58px;
	padding:0 30px;
	border-radius:999px;
	font-weight:700;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
	border:1px solid transparent;
	will-change:transform;
}

.btn:hover{
	transform:translateY(-2px);
	border-color:#ff8a00;
}

.btn--primary{
	background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
	color:#fff;
	box-shadow: 0 18px 40px color-mix(in srgb, var(--cta-1) 26%, transparent);
}

.btn--primary:hover{
	box-shadow: 0 16px 36px rgba(255, 138, 0, .22);
}

.btn--light{
	background:var(--surface-2);
	color:var(--text);
	box-shadow:0 18px 40px rgba(0,0,0,.10);
}

.btn--light:hover{
	box-shadow:0 16px 36px rgba(255, 138, 0, .16);
}

.hero{
	position:relative;
	overflow:hidden;
	padding:96px 0 110px;
	background: linear-gradient(135deg, var(--hero-1), var(--hero-2), var(--hero-3));
}

.hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(135deg, rgba(255,255,255,.12), transparent 40%),
		radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 20%),
		radial-gradient(circle at 20% 85%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 24%);
	pointer-events:none;
}

.hero__grid{
	position:relative;
	display:grid;
	grid-template-columns:1.02fr .98fr;
	gap:64px;
	align-items:center;
}

.hero__content{ max-width:700px; }
.hero__content .lead,
.hero__content .hero__text{ max-width:620px; }
.hero__content .hero__text{ margin-bottom:32px; }

.hero__tags{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:28px;
}

.tag{
	padding:10px 14px;
	border-radius:999px;
	background:var(--tag-bg);
	border:1px solid var(--border);
	color:color-mix(in srgb, var(--text) 84%, transparent);
	font-size:13px;
	box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

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

.hero__media::before{
	content:"";
	position:absolute;
	width:82%;
	height:82%;
	border-radius:40px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent), rgba(255,255,255,.12));
	filter:blur(40px);
	z-index:0;
}

.hero__image-wrap{
	position:relative;
	z-index:1;
	width:min(100%, 560px);
	padding:18px;
	border-radius:34px;
	background:var(--surface);
	border:1px solid var(--border);
	box-shadow:var(--shadow);
	backdrop-filter:blur(10px);
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero__image-wrap img{
	border-radius:34px;
}
.hero__image {
	border-radius:34px;
}

.hero__image-wrap:hover,
.pain-item:hover,
.benefit-card:hover,
.cta__box:hover{
	border-color:#ff8a00;
	box-shadow: 0 16px 36px rgba(255, 138, 0, .16);
	transform:translateY(-2px);
}

.hero__image{
	width:100%;
	height:auto;
	border-radius:24px;
	object-fit:cover;
}

.problem{ background: var(--section-alt); }

.pain-list{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:18px;
}

.pain-item{
	display:flex;
	gap:16px;
	align-items:flex-start;
	padding:24px 26px;
	border-radius:22px;
	background:var(--surface);
	border:1px solid var(--border);
	box-shadow:0 12px 32px rgba(0,0,0,.08);
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.pain-item__icon{
	width:34px;
	height:34px;
	border-radius:50%;
	display:grid;
	place-items:center;
	flex:0 0 34px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
	color:var(--accent);
	font-weight:700;
}

.pain-item p{ margin:0; }

.benefits{ background: var(--section-alt); }

.benefits__grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:22px;
}

.benefit-card{
	background: linear-gradient(180deg, var(--surface-2), var(--surface));
	border:1px solid var(--border);
	border-radius:22px;
	padding:30px;
	box-shadow:var(--shadow);
	display:flex;
	flex-direction:column;
	min-height:100%;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.benefit-card__icon{
	width:70px;
	height:70px;
	border-radius:20px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
	border:1px solid var(--border);
	color:var(--accent);
	padding:14px;
	margin-bottom:22px;
}

.benefit-card p{ margin:0; }

.cta{
	padding-top:80px;
}

.cta__box{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:28px;
	align-items:center;
	padding:46px;
	border-radius:34px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent), rgba(255,255,255,.16));
	border:1px solid var(--border);
	box-shadow:0 30px 90px rgba(0,0,0,.12);
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cta__content .eyebrow,
.cta__content .cta__text{
	color: color-mix(in srgb, var(--text) 78%, transparent);
}

.cta__content h2{ margin-bottom:18px; }
.cta__text{ margin-bottom:28px; max-width:620px; }

.cta__media{
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.cta__media svg{
	width:min(100%, 320px);
	height:auto;
	opacity:.95;
}

.footer{
	padding:22px 0 26px;
	text-align:center;
}

.footer p{
	margin:0;
	font-size:13px;
	line-height:1.5;
	opacity:.72;
}

.expert{
    background: var(--section-alt);
}

.expert-card{
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 32px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.expert-card:hover{
    border-color: #ff8a00;
    box-shadow: 0 16px 36px rgba(255, 138, 0, .16);
    transform: translateY(-2px);
}

.expert-card__top{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.expert-card__avatar{
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.expert-card__avatar svg{
    width: 100%;
    height: 100%;
}

.expert-card__info{
    min-width: 0;
}

.expert-card__name-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.expert-card__name-row h3{
    margin: 0;
}

.expert-card__stars{
    display: inline-flex;
    gap: 3px;
    color: #f5c542;
    font-size: 18px;
    line-height: 1;
}

.expert-card__role{
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.expert-card__text{
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px 24px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.expert-card__text p{
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
    font-size: 16px;
}

@media (max-width: 640px){
    .expert-card{
        padding: 22px;
    }

    .expert-card__top{
        align-items: flex-start;
    }

    .expert-card__avatar{
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .expert-card__name-row{
        gap: 10px;
    }

    .expert-card__text{
        padding: 18px 18px;
    }
}

@media (max-width: 1100px){
	.hero__grid,
	.cta__box{
		grid-template-columns:1fr;
	}

	.hero__media{ order:2; }
	.hero__content{ order:1; }
	.cta__media{ justify-content:flex-start; }
	.benefits__grid{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
	.section{ padding:68px 0; }
	.hero{ padding:72px 0 84px; }
	.pain-list{ grid-template-columns:1fr; }
	.cta__box{ padding:28px; border-radius:26px; }
	.hero__image-wrap{ padding:12px; border-radius:28px; }
}

@media (max-width: 520px){
	.container{ width:min(1300px, calc(100% - 24px)); }
	.section{ padding:56px 0; }
	.hero{ padding:56px 0 68px; }
	.benefit-card,
	.pain-item{ padding:20px; }
	.btn{ width:100%; }
	h1{ font-size:clamp(34px, 11vw, 46px); }
}