/* ============ SHARED STYLES, Sveikatos gidai ============ */

:root {
  --cream-50: #FAF7F2;
  --cream-100: #F4EFE6;
  --ink-50:  #F8F7F4;
  --ink-100: #EDEAE3;
  --ink-200: #D8D3C8;
  --ink-300: #B8B1A2;
  --ink-400: #8C8472;
  --ink-500: #5F5848;
  --ink-600: #403B30;
  --ink-700: #2A271F;
  --ink-800: #1A1812;
  --ink-900: #0F0E0A;
  --emerald: #10B981;
  --accent: var(--brand-accent, #5F5848);
  --accent-soft: var(--brand-accent-soft, #EDEAE3);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background:var(--cream-50);
  color:var(--ink-900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.display { font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.02em; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ===== ANNOUNCEMENT BAR ===== */
.announce {
  background:var(--ink-900); color:var(--cream-50);
  font-size:13px; overflow:hidden;
}
.marquee {
  display:inline-flex; gap:48px; padding:10px 24px;
  white-space:nowrap; animation: scroll 28s linear infinite;
}
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ===== HEADER ===== */
.header {
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,242,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-100);
}
.header-inner {
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo { font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:700; letter-spacing:-0.02em; }
.nav { display:none; gap:32px; font-size:14px; color:var(--ink-600); }
.nav a:hover { color:var(--ink-900); }
@media (min-width:768px) { .nav { display:flex; } }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; padding:14px 28px; border-radius:999px;
  transition: all .2s ease; cursor:pointer; border:none;
  text-decoration:none; font-size:15px;
}
.btn-primary { background:var(--ink-900); color:var(--cream-50); }
.btn-primary:hover { background:var(--ink-700); transform:translateY(-1px); }
.btn-secondary { border:1px solid var(--ink-200); color:var(--ink-900); background:transparent; }
.btn-secondary:hover { background:var(--ink-100); }
.btn-large { padding:18px 36px; font-size:17px; }
.btn-block { width:100%; }

/* ===== HERO ===== */
.hero { padding: 56px 0 80px; }
@media (min-width:768px) { .hero { padding: 80px 0 120px; } }
.hero-grid { display:grid; grid-template-columns: 1fr; gap:40px; align-items:center; }
@media (min-width:900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-500); margin-bottom:20px;
}
.eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }

.hero h1 {
  font-family:'Fraunces',Georgia,serif;
  font-size: clamp(36px, 6vw, 60px);
  font-weight:700; line-height:1.02; letter-spacing:-0.02em;
  color:var(--ink-900);
}
.hero h1 em { font-style:normal; color: var(--accent); }
.hero p.lead {
  margin-top:20px; max-width:520px;
  font-size:18px; color:var(--ink-600); line-height:1.6;
}

.rating { display:flex; align-items:center; gap:12px; margin-top:24px; font-size:14px; color:var(--ink-700); }
.stars { display:inline-flex; gap:2px; color:var(--ink-900); }

.hero-ctas { margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

.hero-trust {
  margin-top:28px;
  display:flex; flex-wrap:wrap; gap:20px;
  font-size:13px; color:var(--ink-500);
}
.hero-trust span { display:inline-flex; align-items:center; gap:6px; }

/* ===== HERO MOCKUP ===== */
.mockup-wrap {
  background: radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, var(--cream-50) 70%);
  border:1px solid var(--ink-100);
  border-radius:24px; padding:48px;
  aspect-ratio: 4/5;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.mockup {
  background:#fff; border:1px solid var(--ink-100); border-radius:14px;
  padding:36px 32px; max-width:280px; width:100%;
  box-shadow: 0 30px 60px -20px rgba(15,14,10,0.25);
  text-align:center;
  transform: rotate(-2deg);
  transition: transform .3s ease;
}
.mockup:hover { transform: rotate(0) scale(1.02); }
.mockup-icon { font-size:56px; margin-bottom:16px; }
.mockup-badge {
  display:inline-block;
  background:var(--ink-900); color:var(--cream-50);
  padding:4px 12px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:0.15em;
  margin-bottom:14px;
}
.mockup h3 { font-family:'Fraunces',Georgia,serif; font-size:22px; color:var(--ink-900); margin-bottom:6px; }
.mockup .meta { font-size:13px; color:var(--ink-500); }

.mockup-tag {
  position:absolute; top:24px; right:24px;
  background:var(--ink-900); color:var(--cream-50);
  padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:600;
  display:inline-flex; gap:6px; align-items:center;
}
.mockup-tag .pulse { width:8px; height:8px; border-radius:50%; background:#10B981; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ===== STATS STRIP ===== */
.stats {
  border-top:1px solid var(--ink-100);
  border-bottom:1px solid var(--ink-100);
  background:rgba(244,239,230,0.4);
}
.stats-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:24px;
  padding:32px 0; text-align:center;
}
@media (min-width:700px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-num { font-family:'Fraunces',Georgia,serif; font-size:28px; font-weight:700; }
.stat-label { font-size:13px; color:var(--ink-500); margin-top:4px; }

/* ===== SECTIONS ===== */
section { padding: 72px 0; }
@media (min-width:768px) { section { padding: 96px 0; } }
.section-head { max-width:640px; margin: 0 auto 48px; text-align:center; }
.section-head .eyebrow { justify-content:center; }
.section-head h2 {
  font-family:'Fraunces',Georgia,serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight:700; line-height:1.05; color:var(--ink-900);
}
.section-head p { margin-top:16px; font-size:17px; color:var(--ink-600); }

/* ===== CARDS ===== */
.card-grid { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px) { .card-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:900px) { .card-grid { grid-template-columns: repeat(3,1fr); } }

.card {
  background:#fff; border:1px solid var(--ink-100); border-radius:20px;
  padding:32px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow:0 14px 40px -20px rgba(15,14,10,0.15); }
.card .icon {
  width:48px; height:48px; border-radius:14px;
  background:var(--ink-900); color:var(--cream-50);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:20px;
}
.card h3 { font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:700; }
.card .sub {
  font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ink-400); margin-top:6px;
}
.card p { color:var(--ink-600); margin-top:12px; font-size:15px; }

/* ===== PRODUCT CARDS (homepage) ===== */
.product-grid { display:grid; grid-template-columns: 1fr; gap:20px; }
@media (min-width:640px) { .product-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1000px) { .product-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width:1000px) { .product-grid > .pc:nth-child(4),
                            .product-grid > .pc:nth-child(5) { grid-column: span 1; } }
.pc {
  background:#fff; border:1px solid var(--ink-100); border-radius:24px;
  padding:36px 28px; text-align:left;
  display:flex; flex-direction:column; gap:8px;
  transition: all .25s ease;
}
.pc:hover { transform: translateY(-4px); box-shadow:0 20px 50px -25px rgba(15,14,10,0.2); border-color:var(--ink-300); }
.pc-icon { font-size:42px; line-height:1; margin-bottom:8px; }
.pc h3 { font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:700; line-height:1.15; }
.pc .desc { color:var(--ink-500); font-size:14px; line-height:1.5; min-height:42px; }
.pc-foot { margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; }
.pc-price {
  font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:700;
}
.pc-cta {
  font-size:13px; font-weight:600; color:var(--ink-700);
  display:inline-flex; gap:6px; align-items:center;
  border-bottom:1px solid var(--ink-300); padding-bottom:1px;
}
.pc:hover .pc-cta { color:var(--ink-900); }

/* ===== PROBLEM LIST ===== */
.problem-list { max-width:760px; margin:0 auto; }
.problem-row {
  display:flex; gap:20px; padding:24px 0;
  border-bottom:1px solid var(--ink-100);
}
.problem-row:last-child { border-bottom:none; }
.problem-row .num {
  flex-shrink:0; font-family:'Fraunces',Georgia,serif; font-size:24px; color:var(--ink-300);
  width:48px;
}
.problem-row h4 { font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; }
.problem-row p { color:var(--ink-600); margin-top:6px; font-size:15px; }

/* ===== TESTIMONIALS ===== */
.testi-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px) { .testi-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1000px) { .testi-grid { grid-template-columns: repeat(3,1fr); } }

.testi {
  background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:24px;
}
.testi .stars { margin-bottom:10px; font-size:14px; }
.testi p { color:var(--ink-800); font-size:15px; line-height:1.6; }
.testi-foot {
  margin-top:18px; padding-top:18px; border-top:1px solid var(--ink-100);
  display:flex; align-items:center; gap:12px;
}
.avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--ink-100); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:var(--ink-700);
}
.testi-meta .name { font-size:14px; font-weight:600; color:var(--ink-900); }
.testi-meta .when { font-size:12px; color:var(--ink-500); margin-top:2px; }

/* ===== INSIDE THE PDF ===== */
.inside-grid { display:grid; grid-template-columns:1fr; gap:16px; max-width:760px; margin:0 auto; }
.inside-item {
  display:flex; gap:16px; padding:20px; border:1px solid var(--ink-100); border-radius:14px; background:#fff;
}
.inside-item .ch { font-family:'Fraunces',Georgia,serif; font-size:24px; color:var(--accent); width:44px; flex-shrink:0; }
.inside-item h4 { font-family:'Fraunces',Georgia,serif; font-size:17px; font-weight:600; }
.inside-item p { color:var(--ink-600); margin-top:4px; font-size:14px; }

/* ===== CHECKOUT ===== */
.checkout-wrap { background:var(--cream-100); padding: 72px 0; }
@media (min-width:768px) { .checkout-wrap { padding: 96px 0; } }
.checkout {
  max-width:520px; margin:0 auto;
  background:#fff; border:1px solid var(--ink-200); border-radius:24px;
  padding:36px 28px;
}
@media (min-width:600px) { .checkout { padding: 44px 40px; } }
.checkout .product-line {
  display:flex; align-items:center; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--ink-100);
}
.checkout .product-line .pico {
  width:56px; height:56px; border-radius:14px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.checkout .product-line .pname { font-weight:600; }
.checkout .product-line .psub { font-size:13px; color:var(--ink-500); margin-top:2px; }

.checkout .price-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:20px 0 4px;
}
.checkout .price-row .label { color:var(--ink-500); font-size:14px; }
.checkout .price-row .val { font-family:'Fraunces',Georgia,serif; font-size:36px; font-weight:700; }
.checkout .price-row .was { color:var(--ink-300); text-decoration:line-through; margin-left:8px; font-size:18px; }

.checkout .badges {
  display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--ink-500);
  padding-bottom:20px; border-bottom:1px solid var(--ink-100); margin-bottom:20px;
}
.checkout .stripe-slot {
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
.checkout .stripe-slot stripe-buy-button {
  display:block;
}
.checkout .secure {
  margin-top:16px; text-align:center; font-size:12px; color:var(--ink-500);
}
.checkout .secure b { color:var(--ink-700); }

/* ===== FAQ ===== */
.faq { max-width:760px; margin:0 auto; border-top:1px solid var(--ink-200); }
.faq details {
  border-bottom:1px solid var(--ink-200);
  padding:20px 0;
}
.faq summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary h4 { font-family:'Fraunces',Georgia,serif; font-size:18px; font-weight:600; color:var(--ink-900); }
.faq summary .chev { transition: transform .2s ease; flex-shrink:0; color:var(--ink-400); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin-top:14px; color:var(--ink-600); font-size:15px; line-height:1.65; }

/* ===== FINAL CTA ===== */
.final-cta {
  background:var(--ink-900); color:var(--cream-50);
  padding:96px 0; text-align:center;
}
.final-cta .eyebrow { color:var(--ink-300); }
.final-cta .eyebrow .dot { background:var(--accent); }
.final-cta h2 { font-family:'Fraunces',Georgia,serif; font-size: clamp(32px,5vw,48px); line-height:1.05; font-weight:700; }
.final-cta p { color:rgba(244,239,230,0.7); margin-top:16px; max-width:520px; margin-left:auto; margin-right:auto; }
.final-cta .btn-primary { background:var(--cream-50); color:var(--ink-900); }
.final-cta .btn-primary:hover { background:#fff; }

/* ===== FOOTER ===== */
.footer {
  background:var(--cream-100);
  border-top:1px solid var(--ink-100);
  padding:40px 0; font-size:13px; color:var(--ink-500);
}
.footer-inner { display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
@media (min-width:768px) { .footer-inner { flex-direction:row; justify-content:space-between; text-align:left; } }
.footer a:hover { color:var(--ink-900); }
.footer-links { display:flex; gap:24px; }

/* ===== STICKY MOBILE CTA ===== */
.sticky-cta {
  position:fixed; bottom:16px; left:16px; right:16px; z-index:60;
  display:flex;
}
@media (min-width:768px) { .sticky-cta { display:none; } }
.sticky-cta a {
  flex:1;
  background:var(--ink-900); color:var(--cream-50);
  padding:14px 22px; border-radius:999px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 14px 40px -10px rgba(15,14,10,0.5);
  font-weight:600;
}
.sticky-cta a small { display:block; font-size:10px; opacity:0.7; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }

/* ===== UTILITY ===== */
.center { text-align:center; }
.mt-20 { margin-top:20px; }
.mt-32 { margin-top:32px; }
.fade-in { animation: fadeIn .8s ease both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }