:root {
  --blue-900: #183a8a;
  --blue-800: #1e40af;
  --sky-700: #0369a1;
  --emerald-700: #047857;
  --violet-700: #6d28d9;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --white: #fff;
  --shadow-sm: 0 4px 16px rgba(15,23,42,0.06);
  --shadow-md: 0 12px 32px rgba(15,23,42,0.1);
  --shadow-lg: 0 22px 40px rgba(15,23,42,0.12);
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --container: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color: var(--slate-900); background:#0f172a; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display:block; }
.page-bg { position: fixed; inset: 0; background: linear-gradient(180deg,#0f172a 0%,#1e3a8a 30%,#0369a1 65%,#0f766e 100%); z-index: -1; }
.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
.main-stack { display: grid; gap: 40px; padding-bottom: 40px; }
.site-header { position: sticky; top:0; z-index: 40; border-bottom:1px solid rgba(252,211,77,0.45); background: linear-gradient(135deg,#c9971a 0%,#e0b84d 24%,#f2d27a 52%,#c89112 100%); box-shadow: 0 10px 35px rgba(140,98,8,.18); }
.header-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.logo-badge { position:relative; display:flex; align-items:center; justify-content:center; width:48px; height:48px; overflow:hidden; border-radius:20px; border:1px solid var(--slate-300); background: linear-gradient(135deg,#d7dde4 0%,#f5f7fa 45%,#fff 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,.9),0 6px 18px rgba(0,0,0,.12); }
.logo-badge::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.28) 35%,rgba(255,255,255,0) 60%); opacity:.7; }
.logo-badge::after { content:""; position:absolute; top:-12px; left:-12px; width:70px; height:40px; transform:rotate(12deg); border-radius:999px; background: rgba(255,255,255,.45); filter: blur(8px); }
.shine { position:absolute; top:0; bottom:0; left:-50px; width:18px; transform:rotate(12deg); background: linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0)); opacity:0; filter: blur(1px); }
.shine.animate { animation: shimmer 1.4s ease-in-out; }
@keyframes shimmer { 0% { transform: translateX(0) rotate(12deg); opacity:0; } 20% { opacity:.95; } 100% { transform: translateX(86px) rotate(12deg); opacity:0; } }
.shine-line { position:absolute; inset-inline:8px; top:4px; height:1px; background: rgba(255,255,255,.85); }
.logo-icons { position:relative; z-index: 1; display:flex; gap:2px; font-size:16px; }
.brand-name { font-size:32px; font-weight:800; letter-spacing:-0.02em; color: var(--blue-900); text-shadow: 0 1px 0 rgba(255,255,255,.75),0 1px 0 rgba(255,215,0,.35); -webkit-text-stroke: .6px rgba(255,255,255,.65); }
.brand-sub { margin-top:2px; font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color: rgba(255,255,255,.86); }
.header-actions { display:flex; gap:12px; }
.btn { border:0; border-radius: 14px; padding: 10px 16px; cursor:pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { border:1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.2); color: #fff; font-weight:700; backdrop-filter: blur(8px); }
.btn-primary { background: var(--blue-900); color:#fff; font-weight:700; box-shadow: 0 10px 24px rgba(30,58,138,.28); }
.btn-dark { background: var(--slate-900); color:#fff; font-weight:700; }
.btn-light { border:1px solid var(--slate-300); background:#fff; color: var(--slate-700); font-weight:700; }
.btn-lg { padding: 16px 24px; }
.nav-wrap { border-top:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.82); backdrop-filter: blur(12px); }
.premium-nav { display:flex; flex-wrap:wrap; gap:12px; padding:12px 0; }
.nav-pill { display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:1px solid var(--slate-200); background:#fff; padding:10px 16px; font-size:14px; font-weight:700; color: var(--slate-700); box-shadow: var(--shadow-sm); }
.hero-section { border-bottom:1px solid var(--slate-200); background: linear-gradient(180deg,#f8fafc 0%,#fff 100%); }
.hero-grid { display:grid; gap: 40px; padding: 40px 0 56px; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.15fr .85fr; align-items:center; } }
.hero-pill, .eyebrow { display:inline-flex; border-radius:999px; background: var(--amber-100); padding:10px 16px; font-size:14px; font-weight:700; color: var(--amber-800); box-shadow: var(--shadow-sm); }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.eyebrow.gold { color: #fde68a; background: transparent; box-shadow:none; padding:0; }
.eyebrow.gray { color: var(--slate-500); background: transparent; box-shadow:none; padding:0; }
.hero-copy h1 { margin: 24px 0 0; font-size: clamp(40px,6vw,64px); line-height:1.02; font-weight:800; letter-spacing:-.03em; }
.hero-copy h1 span { background: linear-gradient(to right,var(--blue-900),var(--sky-700),var(--blue-800)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.hero-copy p { margin-top:20px; max-width:720px; font-size:18px; line-height:1.8; color: var(--slate-600); }
.search-card { margin-top: 32px; border-radius: var(--radius-2xl); border:1px solid var(--slate-200); background:#fff; padding:12px; box-shadow: var(--shadow-lg); display:flex; flex-direction:column; gap:12px; }
@media (min-width:640px){ .search-card{ flex-direction:row; } }
.search-card input, .login-row input, .field-grid input, .price-input-wrap input { flex:1; border-radius: 14px; border:1px solid var(--slate-200); background: var(--slate-50); padding:16px 18px; font-size:14px; color: var(--slate-700); outline:none; }
.quick-links { margin-top: 24px; display:flex; flex-wrap:wrap; gap:12px; }
.quick-pill { border-radius:999px; padding:10px 16px; font-size:14px; font-weight:600; }
.quick-pill.blue{ background:#eff6ff; color:#1d4ed8;} .quick-pill.sky{ background:#f0f9ff; color:#0369a1;} .quick-pill.violet{ background:#f5f3ff; color:#6d28d9;} .quick-pill.emerald{ background:#ecfdf5; color:#047857;}
.feature-panel { position:relative; overflow:hidden; border-radius: var(--radius-3xl); border:1px solid rgba(253,230,138,.7); background: linear-gradient(145deg,#fff7db 0%,#fff 55%,#eef6ff 100%); padding:24px; box-shadow: 0 22px 40px rgba(251,191,36,.14); }
.feature-panel-inner { position:relative; border-radius: var(--radius-3xl); border:1px solid #fff; background: rgba(255,255,255,.8); padding:24px; backdrop-filter: blur(8px); }
.hero-faces { position:absolute; right:20px; bottom:0; display:flex; gap:30px; opacity:.35; }
.mini-face { width:56px; height:56px; border-radius:999px; position:relative; }
.mini-face::before, .mini-face::after { content:""; position:absolute; background:#fff; border-radius:999px; }
.mini-face::before { width:6px; height:6px; left:18px; top:20px; box-shadow: 14px 0 0 #fff; }
.mini-face::after { width:24px; height:12px; left:16px; top:32px; border-bottom: 3px solid #fff; background:transparent; border-radius: 0 0 16px 16px; }
.mini-face.blue { background: linear-gradient(135deg,#1e3a8a,#0369a1); }
.mini-face.green { background: linear-gradient(135deg,#047857,#0f766e); }
.feature-mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top:20px; font-size:14px; font-weight:700; color: var(--slate-700); }
.feature-mini-grid div { border-radius:18px; background: var(--slate-50); padding:16px; }
.featured-product-panel { position:relative; margin-top:24px; border-radius:18px; background: var(--slate-900); color:#fff; padding:20px; overflow:hidden; }
.featured-product-panel::before { content:""; position:absolute; inset:0; background: linear-gradient(135deg,#1e3a8a,#0369a1,#047857); opacity:.2; }
.featured-product-panel > * { position:relative; }
.featured-product-panel h3 { margin: 8px 0 0; font-size: 28px; }
.featured-product-panel p { margin-top: 10px; color: #cbd5e1; font-size: 14px; }
.featured-price-row { display:flex; align-items:end; gap:12px; margin-top:16px; }
.featured-price-row strong { font-size: 36px; }
.featured-price-row span { color:#fde68a; font-size:14px; padding-bottom:4px; }
.social-proof-section { border-top:1px solid var(--slate-200); border-bottom:1px solid var(--slate-200); background: rgba(248,250,252,.9); }
.social-proof-grid { display:flex; flex-direction:column; gap:16px; text-align:center; padding:20px 0; }
@media (min-width:768px){ .social-proof-grid{ flex-direction:row; justify-content:space-between; align-items:center; text-align:left; } }
.social-proof-grid h2 { margin: 8px 0 0; font-size: 32px; }
.stats-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:768px){ .stats-grid { display:flex; gap:16px; } }
.stat-card { border-radius:18px; border:1px solid var(--slate-200); background:#fff; padding:16px 20px; box-shadow: var(--shadow-sm); }
.stat-card strong { display:block; font-size:32px; } .stat-card span { font-size:14px; color: var(--slate-500); }
.section-block { padding-top: 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; border-bottom:1px solid var(--slate-200); padding-bottom:16px; margin-bottom:32px; }
.section-head h2 { margin: 8px 0 0; font-size: 36px; }
.section-head.center { justify-content:center; text-align:center; border-bottom:0; margin-bottom:20px; }
.section-link { font-size:14px; font-weight:700; color: var(--blue-900); }
.subcopy { color: var(--slate-600); max-width: 720px; }
.product-grid, .testimonial-grid { display:grid; gap:24px; }
@media (min-width:700px){ .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (min-width:900px){ .testimonial-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.product-card, .testimonial-card { overflow:hidden; border-radius: var(--radius-2xl); border:1px solid var(--slate-200); background:#fff; box-shadow: var(--shadow-sm); transition:.2s ease; }
.product-card:hover, .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-top { position:relative; height:224px; overflow:hidden; background: linear-gradient(135deg,#1e3a8a,#0369a1,#047857); }
.product-top::after { content:""; position:absolute; inset:0; background: linear-gradient(to top,rgba(2,6,23,.55),rgba(2,6,23,.1),transparent); }
.top-row { position:absolute; left:16px; right:16px; top:16px; display:flex; justify-content:space-between; gap:12px; z-index:1; }
.pill { border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; box-shadow: var(--shadow-sm); }
.pill.white { background: rgba(255,255,255,.95); color: var(--slate-700); }
.pill.amber { background: rgba(254,243,199,.95); color: var(--amber-800); }
.product-art { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.product-bottom { position:absolute; left:16px; right:16px; bottom:16px; display:flex; justify-content:space-between; align-items:end; gap:12px; z-index:1; }
.creator { display:flex; align-items:center; gap:12px; }
.creator-avatar, .testimonial-avatar { width:64px; height:64px; border-radius:999px; overflow:hidden; border:2px solid rgba(255,255,255,.8); background:#fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.creator-avatar img, .testimonial-avatar img { width:100%; height:100%; object-fit:cover; }
.creator-label { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.75); }
.creator-name { font-size:14px; font-weight:500; color:#fff; }
.product-body { padding:20px; }
.product-body h3, .testimonial-card h3 { margin:0; font-size:20px; }
.product-desc { margin-top:10px; font-size:14px; line-height:1.7; color: var(--slate-600); }
.bonus-chips { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.bonus-chip { border-radius:999px; background:#eff6ff; color:#1d4ed8; padding:6px 12px; font-size:12px; font-weight:700; }
.rating-row { display:flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; }
.rating-row .score { font-weight:800; color: var(--amber-700); }
.rating-row .stars { color:#f59e0b; }
.rating-row .count, .muted { color: var(--slate-500); }
.price-row { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-top:20px; }
.price-block strong, .price-lg { font-size:30px; font-weight:800; line-height:1; }
.price-block span { display:block; margin-top:4px; color: var(--slate-500); font-size:14px; }
.simple-card, .tool-shell, .testimonial-card { background:#fff; }
.simple-card { border:1px solid var(--slate-300); border-radius: var(--radius-xl); padding:16px; }
.simple-card h2 { margin:0; }
.flipbook-locked { margin-top:16px; border-radius: 10px; background:#000; color:#fff; padding:24px; text-align:center; }
.login-row { margin-top:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.login-row input { padding:12px 14px; background:#fff; flex: 0 1 240px; }
.tool-shell { overflow:hidden; border-radius: var(--radius-3xl); border:1px solid rgba(191,219,254,.65); box-shadow: var(--shadow-lg); display:grid; gap:0; }
@media (min-width:1000px){ .tool-shell { grid-template-columns: .95fr 1.05fr; } }
.discount-shell { border-color: rgba(253,230,138,.6); }
.dark-gradient { background: linear-gradient(135deg,#0f172a,#1e3a8a,#0369a1); color:#fff; padding:32px; }
.dark-gradient h2 { margin: 12px 0 0; font-size: 40px; line-height: 1.05; }
.dark-gradient p { color:#dbeafe; line-height:1.8; }
.preset-grid, .bonus-product-list { margin-top:24px; display:grid; gap:12px; }
.preset-card, .bonus-product-btn { border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1); color:#fff; padding:16px; border-radius:18px; text-align:left; cursor:pointer; transition:.2s ease; }
.preset-card:hover, .bonus-product-btn:hover, .bonus-product-btn.active, .preset-card.active { background: rgba(255,255,255,.15); border-color: var(--amber-200); }
.preset-card p, .bonus-product-btn p { margin:0; }
.tool-main { padding:32px; }
.field-grid { display:grid; gap:20px; }
.field-grid.two { grid-template-columns: 1fr; }
@media (min-width:800px){ .field-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.field-grid label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; color: var(--slate-700); }
.price-input-wrap { display:flex; align-items:center; border:1px solid var(--slate-300); background: var(--slate-50); border-radius: 18px; padding: 0 16px; }
.price-input-wrap span { color: var(--slate-500); }
.price-input-wrap input { border:0; background:transparent; padding-left:8px; }
.tool-main > .field-grid input { width:100%; }
.slider-wrap { margin-top:20px; }
.slider-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:14px; font-weight:700; color: var(--slate-700); }
.calc-grid { margin-top:24px; display:grid; gap:16px; }
@media (min-width:700px){ .calc-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.calc-card { border-radius:18px; border:1px solid var(--slate-200); background: var(--slate-50); padding:16px; }
.calc-card span { display:block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--slate-500); }
.calc-card strong { display:block; margin-top:8px; font-size:32px; color: var(--slate-900); }
.calc-card.amber { border-color: var(--amber-200); background: #fffbeb; } .calc-card.amber span, .calc-card.amber strong { color: var(--amber-800); }
.calc-card.green { border-color: #a7f3d0; background: #ecfdf5; } .calc-card.green span, .calc-card.green strong { color: #047857; }
.offer-preview { margin-top:24px; border-radius:24px; border:1px solid var(--slate-200); background: linear-gradient(180deg,#fff,#f8fafc); padding:24px; box-shadow: var(--shadow-sm); }
.offer-preview h3 { margin:8px 0 0; font-size: 30px; }
.offer-preview p { color: var(--slate-600); line-height:1.8; }
.tool-actions { margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; }
.bonus-stack { margin-top:20px; display:grid; gap:12px; }
.bonus-item { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--slate-200); background:#fff; padding:16px; border-radius:18px; }
.bonus-number { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:999px; background: var(--amber-100); color: var(--amber-800); font-size:14px; font-weight:800; flex: 0 0 auto; }
.bonus-item strong { display:block; color: var(--slate-900); }
.bonus-item p { margin:4px 0 0; color: var(--slate-500); font-size:14px; }
.testimonial-card { padding:24px; }
.testimonial-head { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.testimonial-role { color: var(--slate-500); font-size:14px; }
.testimonial-text { color: var(--slate-600); line-height:1.8; }
@media (max-width: 860px) {
  .header-top { flex-direction:column; align-items:flex-start; }
  .brand-name { font-size:26px; }
  .section-head, .social-proof-grid { text-align:left; }
}