/* =========================================================
   WP MLM Soft — Modern SaaS theme
   Tokens → Reset → Layout → Components → Sections
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

	--indigo-50:#eef2ff;
	--indigo-100:#e0e7ff;
	--indigo-500:#6366f1;
	--indigo-600:#4f46e5;
	--indigo-700:#4338ca;
	--violet-500:#8b5cf6;
	--violet-600:#7c3aed;
	--pink-500:#ec4899;
	--cyan-500:#06b6d4;
	--amber-500:#f59e0b;
	--emerald-500:#10b981;

	--ink-900:#0b1020;
	--ink-800:#111827;
	--ink-700:#1f2937;
	--ink-600:#334155;
	--ink-500:#64748b;
	--ink-400:#94a3b8;
	--ink-300:#cbd5e1;
	--ink-200:#e2e8f0;
	--ink-100:#f1f5f9;
	--ink-50: #f8fafc;
	--white:#ffffff;

	--bg:#ffffff;
	--bg-soft:#fafbff;
	--surface:#ffffff;
	--border:#e6e8f0;
	--border-strong:#d4d8e6;

	--grad-primary: linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
	--grad-soft:    linear-gradient(135deg,#eef2ff 0%,#f5f3ff 50%,#fdf2f8 100%);

	--radius-sm: 8px;
	--radius:    14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-full: 9999px;

	--shadow-xs: 0 1px 2px rgba(15,23,42,.06);
	--shadow-sm: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
	--shadow-md: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
	--shadow-lg: 0 24px 60px rgba(99,102,241,.18), 0 8px 24px rgba(15,23,42,.08);
	--shadow-glow: 0 30px 80px -20px rgba(99,102,241,.45);

	--container: 1200px;
	--section-y: clamp(64px, 8vw, 120px);

	--ease-out: cubic-bezier(.22,1,.36,1);
	--ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
	margin:0;
	font-family:var(--font-sans);
	font-size:16px;
	line-height:1.6;
	color:var(--ink-700);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--indigo-600);text-decoration:none;transition:color .18s var(--ease-out)}
a:hover{color:var(--indigo-700)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink-900);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.25rem,4.5vw,3.75rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.875rem,3.2vw,2.75rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:1.375rem;font-weight:700}
h4{font-size:1.125rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}

button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}

.screen-reader-text{
	position:absolute!important;clip:rect(1px,1px,1px,1px);
	width:1px;height:1px;overflow:hidden;white-space:nowrap;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:10px 14px;background:#fff;color:var(--indigo-600);border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.py-section{padding-block:var(--section-y)}
.grad-text{
	background:var(--grad-primary);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
}
.kicker{
	display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--indigo-600);
	padding:.4em .85em;border-radius:999px;background:var(--indigo-50);
	margin-bottom:1rem;
}
.section-head{text-align:center;max-width:740px;margin:0 auto 3.5rem}
.section-title{margin-bottom:.6rem}
.section-sub{color:var(--ink-500);font-size:1.125rem;margin:0}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;align-items:center;gap:.55em;
	padding:.75em 1.25em;font-weight:600;font-size:.95rem;
	border-radius:999px;
	transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
	white-space:nowrap;cursor:pointer;line-height:1;
}
.btn svg{width:1.1em;height:1.1em;flex-shrink:0}
.btn-sm{padding:.6em 1em;font-size:.875rem}
.btn-lg{padding:.95em 1.6em;font-size:1.025rem}
.btn-block{width:100%;justify-content:center}

.btn-primary{
	background:var(--grad-primary);color:#fff;
	box-shadow:0 10px 24px -8px rgba(99,102,241,.55), 0 4px 10px -4px rgba(236,72,153,.35);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px -8px rgba(99,102,241,.7), 0 6px 14px -4px rgba(236,72,153,.45);color:#fff}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
	background:rgba(255,255,255,.7);color:var(--ink-800);
	border:1px solid var(--border);
	backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:#fff;border-color:var(--border-strong);color:var(--ink-900);transform:translateY(-1px)}

.btn-white{
	background:#fff;color:var(--indigo-700);
	box-shadow:0 10px 24px -8px rgba(0,0,0,.25);
}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(0,0,0,.3);color:var(--indigo-700)}

/* ---------- Header ---------- */
.site-header{
	position:sticky;top:0;z-index:60;
	background:rgba(255,255,255,.8);
	backdrop-filter:saturate(180%) blur(14px);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid transparent;
	transition:border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.site-header.is-scrolled{
	background:rgba(255,255,255,.92);
	border-bottom-color:var(--border);
	box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.header-inner{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	min-height:72px;
}
.brand-link{display:inline-flex;align-items:center;gap:.7rem;color:var(--ink-900)}
.brand-link:hover{color:var(--ink-900)}
.brand-mark{display:inline-grid;place-items:center}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink-900);letter-spacing:-.01em}
.brand-tag{font-size:.7rem;color:var(--ink-500);font-weight:500}

.primary-nav{flex:1;display:flex;justify-content:center}
.primary-menu{display:flex;gap:6px;align-items:center}
.primary-menu li{position:relative}
.primary-menu a{
	display:inline-flex;align-items:center;
	padding:.55em .95em;font-weight:500;color:var(--ink-600);
	border-radius:999px;transition:background .18s var(--ease-out), color .18s var(--ease-out);
}
.primary-menu a:hover,.primary-menu .current-menu-item > a{color:var(--ink-900);background:var(--ink-100)}

.header-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{
	display:none;width:42px;height:42px;border-radius:12px;
	border:1px solid var(--border);background:#fff;align-items:center;justify-content:center;
}
.menu-toggle svg{width:22px;height:22px}
.menu-toggle .i-close{display:none}
body.menu-open .menu-toggle .i-open{display:none}
body.menu-open .menu-toggle .i-close{display:block}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:48px;padding-bottom:80px}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.blob-a{width:520px;height:520px;background:#a78bfa;top:-180px;left:-120px}
.blob-b{width:480px;height:480px;background:#f0abfc;top:-100px;right:-100px;opacity:.45}
.blob-c{width:380px;height:380px;background:#22d3ee;bottom:-180px;left:30%;opacity:.35}
.grid-overlay{
	position:absolute;inset:0;
	background-image:
		linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15,23,42,.05) 1px, transparent 1px);
	background-size:42px 42px;
	mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
	-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}

.hero-inner{
	position:relative;z-index:1;
	display:grid;grid-template-columns: 1.05fr .95fr;gap:64px;align-items:center;
	padding-block:48px 24px;
}

.eyebrow{
	display:inline-flex;align-items:center;gap:.55em;
	padding:.45em .9em .45em .65em;
	border-radius:999px;background:rgba(255,255,255,.7);
	border:1px solid var(--border);box-shadow:var(--shadow-xs);
	color:var(--ink-700);font-size:.85rem;font-weight:500;margin-bottom:1.5rem;
	backdrop-filter:blur(8px);
}
.eyebrow:hover{color:var(--ink-900)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--grad-primary);box-shadow:0 0 0 4px rgba(139,92,246,.15)}
.eyebrow svg{width:1em;height:1em;color:var(--ink-500)}

.hero-title{margin-bottom:1.1rem}
.hero-sub{font-size:1.175rem;color:var(--ink-600);max-width:560px;margin-bottom:2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--ink-500);font-size:.92rem}
.hero-meta li{display:inline-flex;align-items:center;gap:.45em}
.hero-meta svg{width:1em;height:1em;color:var(--emerald-500)}

/* Hero visual */
.hero-visual{position:relative;min-height:380px}
.hero-card{
	background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
	box-shadow:var(--shadow-lg);
}
.hero-card-main{
	position:relative;padding:0;overflow:hidden;
	transform:rotate(-1.5deg);
}
.hc-head{
	display:flex;align-items:center;gap:.75rem;
	padding:12px 16px;border-bottom:1px solid var(--border);background:#fafbff;
}
.hc-dots{display:flex;gap:6px}
.hc-dots span{width:10px;height:10px;border-radius:50%;background:var(--ink-200)}
.hc-dots span:nth-child(1){background:#fca5a5}
.hc-dots span:nth-child(2){background:#fcd34d}
.hc-dots span:nth-child(3){background:#86efac}
.hc-title{font-size:.85rem;font-weight:600;color:var(--ink-700)}
.hc-tag{
	margin-left:auto;font-size:.7rem;font-weight:600;letter-spacing:.08em;
	padding:.25em .6em;background:#ecfdf5;color:#047857;border-radius:999px;text-transform:uppercase;
	display:inline-flex;align-items:center;gap:.4em;
}
.hc-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.hc-body{padding:20px}
.tree-svg{width:100%;height:auto}

.hero-card-stat{
	position:absolute;display:flex;align-items:center;gap:14px;padding:14px 18px;
	min-width:220px;background:#fff;
	border-radius:18px;box-shadow:var(--shadow-md);
}
.hero-card-stat-a{left:-32px;bottom:30px;transform:rotate(-3deg);animation:float 6s ease-in-out infinite}
.hero-card-stat-b{right:-20px;top:30px;transform:rotate(3deg);animation:float 7s ease-in-out infinite reverse}
.hc-icon{
	width:42px;height:42px;border-radius:12px;
	background:var(--indigo-50);color:var(--indigo-600);
	display:grid;place-items:center;
}
.hc-icon svg{width:22px;height:22px}
.hc-icon-pink{background:#fdf2f8;color:var(--pink-500)}
.hc-stat-value{font-weight:800;font-size:1.15rem;color:var(--ink-900);font-family:var(--font-display)}
.hc-stat-label{font-size:.78rem;color:var(--ink-500)}

@keyframes float{
	0%,100%{transform:translateY(0) rotate(-3deg)}
	50%{transform:translateY(-8px) rotate(-3deg)}
}
.hero-card-stat-b{animation-name:floatB}
@keyframes floatB{
	0%,100%{transform:translateY(0) rotate(3deg)}
	50%{transform:translateY(-8px) rotate(3deg)}
}

/* ---------- Trust bar ---------- */
.trust-bar{
	position:relative;z-index:1;
	margin-top:48px;padding-top:32px;
	border-top:1px solid var(--border);
	display:flex;flex-direction:column;align-items:center;gap:20px;
}
.trust-label{font-size:.85rem;color:var(--ink-500);letter-spacing:.02em}
.trust-logos{
	display:flex;flex-wrap:wrap;justify-content:center;gap:48px;
}
.trust-logos li{
	font-family:var(--font-display);font-weight:800;letter-spacing:.18em;font-size:.95rem;
	color:var(--ink-400);opacity:.85;
}

/* ---------- Stats ---------- */
.stats{padding-block:48px}
.stats-grid{
	display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
	padding:36px;border-radius:24px;
	background:var(--grad-soft);border:1px solid var(--border);
}
.stat{text-align:center}
.stat-value{font-family:var(--font-display);font-size:clamp(2rem,3.5vw,3rem);font-weight:800;line-height:1}
.stat-label{margin-top:.4rem;color:var(--ink-600);font-size:.95rem}

/* ---------- Features ---------- */
.features{background:var(--bg)}
.features-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.feature-card{
	background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
	padding:28px;transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--indigo-100)}
.feature-icon{
	width:52px;height:52px;border-radius:14px;
	background:var(--grad-primary);color:#fff;
	display:grid;place-items:center;margin-bottom:18px;
	box-shadow:0 8px 20px -6px rgba(99,102,241,.5);
}
.feature-icon svg{width:26px;height:26px}
.feature-title{margin-bottom:.4rem}
.feature-desc{color:var(--ink-500);margin:0;font-size:.95rem}

/* ---------- Plans ---------- */
.plans{background:var(--bg-soft)}
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.plan-card{
	background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);
	overflow:hidden;display:flex;flex-direction:column;
	transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--indigo-100)}
.plan-visual{
	background:var(--grad-soft);
	padding:28px;display:grid;place-items:center;
	border-bottom:1px solid var(--border);
}
.plan-visual svg{width:100%;max-width:280px;height:auto}
.plan-body{padding:28px;display:flex;flex-direction:column;flex:1}
.plan-tag{
	align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--pink-500);background:#fdf2f8;padding:.3em .65em;border-radius:999px;margin-bottom:.85rem;
}
.plan-body h3{margin-bottom:.5rem}
.plan-body > p{color:var(--ink-500);margin-bottom:1.1rem}
.plan-features{display:flex;flex-direction:column;gap:.55em;margin-bottom:1.25rem}
.plan-features li{display:inline-flex;align-items:center;gap:.55em;font-size:.92rem;color:var(--ink-700)}
.plan-features svg{width:18px;height:18px;color:var(--emerald-500);flex-shrink:0}
.plan-link{
	margin-top:auto;display:inline-flex;align-items:center;gap:.4em;
	font-weight:600;font-size:.95rem;color:var(--indigo-600,#4f46e5);
	text-decoration:none;transition:gap .2s var(--ease-out), color .2s var(--ease-out);
}
.plan-link:hover{gap:.65em;color:var(--pink-500,#ec4899)}
.plan-link svg{width:1.05em;height:1.05em;flex-shrink:0}

/* ---------- Plan detail page (per-plan subpages) ---------- */
.plan-detail .related-link{
	display:inline-flex;align-items:center;gap:.4em;
	font-weight:600;font-size:.92rem;color:var(--indigo-600);
	transition:gap .2s var(--ease-out), color .2s var(--ease-out);
}
.plan-detail .related-link svg{width:1.05em;height:1.05em;flex-shrink:0}
.plan-detail .related-card:hover .related-link{gap:.65em;color:var(--pink-500)}
.plan-detail .proscons-block h3{display:inline-flex;align-items:center;gap:.5em;margin-bottom:.6rem}
.plan-detail .proscons-block h3 svg{width:1.1em;height:1.1em;flex-shrink:0}
.plan-detail .proscons-pros h3 svg{color:var(--emerald-500)}
.plan-detail .proscons-cons h3 svg{color:var(--pink-500)}
.plan-detail .breadcrumbs svg{width:1em;height:1em}

/* ---------- How it works ---------- */
.how-grid{
	display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.how-step{
	position:relative;padding:28px;border-radius:var(--radius-lg);
	background:#fff;border:1px solid var(--border);
}
.step-num{
	font-family:var(--font-display);font-size:2.5rem;font-weight:800;
	background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
	-webkit-text-fill-color:transparent;
	line-height:1;margin-bottom:.7rem;letter-spacing:-.04em;
}
.how-step h3{margin-bottom:.4rem;font-size:1.15rem}
.how-step p{color:var(--ink-500);margin:0;font-size:.95rem}

/* ---------- Pricing ---------- */
.pricing{background:var(--bg-soft)}
.billing-toggle{
	display:inline-flex;padding:5px;background:#fff;border:1px solid var(--border);
	border-radius:999px;margin-top:1.25rem;gap:4px;
}
.billing-toggle button{
	padding:.55em 1.1em;border-radius:999px;font-weight:600;color:var(--ink-600);
	font-size:.9rem;display:inline-flex;align-items:center;gap:.5em;
	transition:background .18s var(--ease-out), color .18s var(--ease-out);
}
.billing-toggle button.is-active{background:var(--grad-primary);color:#fff;box-shadow:0 6px 18px -6px rgba(99,102,241,.6)}
.save-pill{
	font-size:.7rem;font-weight:700;letter-spacing:.04em;
	background:rgba(255,255,255,.25);padding:.2em .55em;border-radius:999px;
}
.billing-toggle button:not(.is-active) .save-pill{background:#ecfdf5;color:#047857}

.pricing-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;
}
.price-card{
	background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);
	padding:32px;display:flex;flex-direction:column;gap:14px;
	transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.price-card h3{margin:0}
.price-desc{color:var(--ink-500);font-size:.92rem;margin:0;min-height:42px}
.price{display:flex;align-items:baseline;gap:.25em;margin:.4rem 0}
.amount{font-family:var(--font-display);font-size:2.75rem;font-weight:800;color:var(--ink-900);letter-spacing:-.03em;line-height:1}
.custom-amount{font-size:1.75rem;color:var(--ink-700)}
.period{color:var(--ink-500);font-weight:500}
.price-list{display:flex;flex-direction:column;gap:.55em;margin-top:.4rem}
.price-list li{display:inline-flex;align-items:center;gap:.55em;font-size:.93rem;color:var(--ink-700)}
.price-list svg{width:18px;height:18px;color:var(--emerald-500);flex-shrink:0}

.price-featured{
	position:relative;border:none;
	background:linear-gradient(180deg,#0f172a 0%, #1e1b4b 100%);
	color:#fff;box-shadow:var(--shadow-glow);
}
.price-featured h3{color:#fff}
.price-featured .amount{color:#fff}
.price-featured .price-desc{color:#cbd5e1}
.price-featured .price-list li{color:#e2e8f0}
.price-featured .period{color:#cbd5e1}
.price-featured .price-list svg{color:#34d399}
.price-badge{
	position:absolute;top:-14px;left:50%;transform:translateX(-50%);
	display:inline-flex;align-items:center;gap:.4em;
	padding:.45em 1em;background:var(--grad-primary);color:#fff;
	border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.06em;
	box-shadow:0 8px 22px -6px rgba(236,72,153,.55);
}
.price-badge svg{width:14px;height:14px;color:#fcd34d}

/* ---------- Testimonials ---------- */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial{
	position:relative;margin:0;padding:32px;background:#fff;
	border:1px solid var(--border);border-radius:var(--radius-lg);
	display:flex;flex-direction:column;gap:14px;
}
.t-quote-icon{
	position:absolute;top:18px;right:22px;
	width:32px;height:32px;color:var(--indigo-100);
}
.t-quote-icon svg{width:100%;height:100%}
.t-stars{display:inline-flex;gap:2px;color:#fbbf24}
.t-stars svg{width:18px;height:18px}
.testimonial blockquote{margin:0;font-size:1.05rem;color:var(--ink-800);line-height:1.55}
.testimonial figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{
	width:42px;height:42px;border-radius:50%;
	background:var(--grad-primary);color:#fff;
	display:grid;place-items:center;font-weight:700;font-size:.92rem;
	font-family:var(--font-display);letter-spacing:.02em;
	box-shadow:0 6px 14px -4px rgba(99,102,241,.45);
}
.t-name{font-weight:700;color:var(--ink-900);font-size:.95rem}
.t-role{color:var(--ink-500);font-size:.85rem}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
	background:#fff;border:1px solid var(--border);border-radius:16px;
	padding:6px 22px;transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.faq-item[open]{border-color:var(--indigo-100);box-shadow:var(--shadow-sm)}
.faq-item summary{
	list-style:none;cursor:pointer;
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:16px 0;font-weight:600;color:var(--ink-900);font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{
	width:32px;height:32px;border-radius:50%;background:var(--ink-100);
	display:grid;place-items:center;color:var(--ink-600);
	transition:transform .25s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
	flex-shrink:0;
}
.faq-chevron svg{width:18px;height:18px}
.faq-item[open] .faq-chevron{transform:rotate(45deg);background:var(--indigo-500);color:#fff}
.faq-answer{padding:0 0 18px;color:var(--ink-600);line-height:1.65}

/* ---------- CTA banner ---------- */
/* Force the HTML hidden attribute to win over display:flex/grid/etc. so JS toggles work. */
[hidden]{display:none !important}

.cta-banner{padding-block:var(--section-y)}
.cta-inner{
	position:relative;overflow:hidden;
	padding:60px;border-radius:32px;
	background:linear-gradient(135deg,#1e1b4b 0%,#312e81 35%,#7c3aed 100%);
	color:#fff;
	display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
	box-shadow:var(--shadow-glow);
}
.cta-bg{position:absolute;inset:0;pointer-events:none;opacity:.7}
.cta-bg .blob{position:absolute;border-radius:50%;filter:blur(70px)}
.blob-x{width:360px;height:360px;background:#ec4899;top:-120px;right:-80px;opacity:.6}
.blob-y{width:320px;height:320px;background:#06b6d4;bottom:-140px;left:-80px;opacity:.5}
.cta-copy{position:relative;z-index:1}
.cta-copy h2{color:#fff;margin-bottom:.5rem}
.cta-copy p{color:#cbd5e1;font-size:1.1rem;margin:0;max-width:480px}
.cta-form{
	position:relative;z-index:1;display:flex;gap:10px;
	background:rgba(255,255,255,.1);backdrop-filter:blur(12px);
	padding:8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
}
.cta-form input{
	flex:1;background:transparent;border:0;outline:0;
	padding:.85em 1.2em;color:#fff;font-size:1rem;
}
.cta-form input::placeholder{color:rgba(255,255,255,.7)}
.cta-success{
	position:relative;z-index:1;
	display:inline-flex;align-items:center;gap:.6em;
	padding:.9em 1.4em;background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.25);border-radius:999px;
	color:#fff;font-weight:600;font-size:1rem;
	backdrop-filter:blur(12px);
}
.cta-success svg{width:1.2em;height:1.2em;color:#34d399;background:rgba(52,211,153,.18);border-radius:50%;padding:3px;box-sizing:content-box}

.newsletter-success{
	margin:.5rem 0 0;padding:.55em .9em;
	color:#86efac;font-size:.9rem;
	background:rgba(16,185,129,.12);
	border:1px solid rgba(16,185,129,.25);
	border-radius:10px;max-width:380px;
}

/* ---------- Footer ---------- */
.site-footer{background:#0b1020;color:#cbd5e1;padding-top:80px}
.footer-grid{
	display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr;gap:48px;
	padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer .brand-name{color:#fff}
.footer-pitch{color:#94a3b8;margin:1rem 0 1.25rem;max-width:380px;font-size:.95rem}
.newsletter{
	display:flex;gap:8px;background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.1);
	padding:6px;border-radius:999px;max-width:380px;
}
.newsletter input{
	flex:1;background:transparent;border:0;outline:0;
	padding:.6em 1em;color:#fff;font-size:.9rem;
}
.newsletter input::placeholder{color:#64748b}

.footer-col h4{color:#fff;font-size:.92rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.footer-col ul{display:flex;flex-direction:column;gap:.65em}
.footer-col a{color:#94a3b8;font-size:.95rem}
.footer-col a:hover{color:#fff}

.footer-bottom{
	display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
	padding-block:28px;color:#64748b;font-size:.9rem;
}
.footer-bottom p{margin:0}
.footer-legal{display:flex;gap:24px}
.footer-legal a{color:#64748b}
.footer-legal a:hover{color:#fff}
.footer-social{display:flex;gap:10px}
.footer-social a{
	width:36px;height:36px;border-radius:50%;
	background:rgba(255,255,255,.06);color:#cbd5e1;
	display:grid;place-items:center;transition:background .2s var(--ease-out), color .2s var(--ease-out);
}
.footer-social a:hover{background:var(--grad-primary);color:#fff}

/* ---------- Blog/Single/Page ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.post-card:hover{box-shadow:var(--shadow-md)}
.post-thumb img{width:100%;height:200px;object-fit:cover}
.post-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-title{margin:0;font-size:1.2rem}
.post-title a{color:var(--ink-900)}
.post-meta{color:var(--ink-500);font-size:.82rem;display:flex;gap:6px}
.post-excerpt{color:var(--ink-600);font-size:.95rem;flex:1}
.pagination-wrap{margin-top:40px;display:flex;justify-content:center}

.page-article,.single-article{max-width:760px;margin:0 auto}
.page-header,.single-header{margin-bottom:24px}
.single-thumb{margin-bottom:24px;border-radius:var(--radius-lg);overflow:hidden}
.single-thumb img{width:100%;height:auto}
.page-content,.single-content{font-size:1.05rem;color:var(--ink-700)}
.page-content h2,.single-content h2{margin-top:1.8em}
.page-content h3,.single-content h3{margin-top:1.4em}
.page-content a,.single-content a{text-decoration:underline}

.error-404-inner{text-align:center;max-width:520px;margin:0 auto;padding:40px 0}
.error-code{font-family:var(--font-display);font-size:7rem;font-weight:800;line-height:1;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
	.hero-inner{grid-template-columns:1fr;gap:48px}
	.hero-visual{max-width:520px;margin:0 auto}
	.features-grid{grid-template-columns:repeat(2,1fr)}
	.how-grid{grid-template-columns:repeat(2,1fr)}
	.testimonials-grid{grid-template-columns:1fr}
	.post-grid{grid-template-columns:repeat(2,1fr)}
	.footer-grid{grid-template-columns:1fr 1fr}
	.cta-inner{grid-template-columns:1fr;padding:44px}
	.stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px){
	html{scroll-padding-top:72px}
	.header-inner{min-height:64px}
	.hide-sm{display:none}
	.menu-toggle{display:inline-grid}
	.primary-nav{
		position:fixed;inset:64px 0 auto 0;
		background:#fff;border-bottom:1px solid var(--border);
		padding:16px 20px;display:none;
	}
	body.menu-open .primary-nav{display:block}
	.primary-menu{flex-direction:column;align-items:stretch;gap:2px}
	.primary-menu a{padding:.85em 1em}

	.features-grid{grid-template-columns:1fr}
	.plans-grid{grid-template-columns:1fr}
	.how-grid{grid-template-columns:1fr}
	.pricing-grid{grid-template-columns:1fr}
	.post-grid{grid-template-columns:1fr}
	.stats-grid{grid-template-columns:repeat(2,1fr);padding:24px}
	.footer-grid{grid-template-columns:1fr;gap:36px}
	.cta-form{flex-direction:column;border-radius:18px;background:rgba(255,255,255,.05)}
	.cta-form input{padding:.95em 1.2em}
	.cta-form .btn{width:100%;justify-content:center}
	.cta-inner{padding:36px 24px;border-radius:24px}
	.trust-logos{gap:28px}
	.hero-card-stat-a{left:-12px;bottom:-10px}
	.hero-card-stat-b{right:-10px;top:0}

	h1{font-size:2.25rem}
	h2{font-size:1.875rem}
	.section-head{margin-bottom:2.25rem}
}

@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}