/* Google Fonts loaded via <link> in HTML for performance */

:root {
  --background:        hsl(38, 32%, 97%);
  --foreground:        hsl(218, 52%, 11%);
  --card:              hsl(0, 0%, 100%);
  --card-foreground:   hsl(218, 52%, 11%);
  --primary:           hsl(218, 52%, 18%);
  --primary-foreground:hsl(38, 32%, 97%);
  --secondary:         hsl(38, 35%, 93%);
  --secondary-foreground: hsl(218, 52%, 18%);
  --muted:             hsl(38, 20%, 92%);
  --muted-foreground:  hsl(218, 14%, 48%);
  --accent:            hsl(42, 72%, 42%);
  --accent-foreground: hsl(0, 0%, 100%);
  --accent-light:      hsl(42, 70%, 96%);
  --border:            hsl(38, 20%, 87%);
  --gold-glow:         hsla(42,72%,42%,0.25);
  --navy-glow:         hsla(218,52%,18%,0.08);
  --radius:            0.75rem;
}

* { margin:0; padding:0; box-sizing:border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background: var(--background); color: var(--foreground); line-height: 1.6; }
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }
a { text-decoration: none; color: inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul { list-style:none; }

.font-heading { font-family: 'Playfair Display', serif; }
.font-body    { font-family: 'Lato', sans-serif; }

.shadow-soft { box-shadow: 0 2px 20px var(--navy-glow); }

/* === BUTTONS === */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, hsl(42,72%,46%), hsl(30,80%,32%));
  color: #fff; text-decoration: none; letter-spacing: 0.04em;
  box-shadow: 0 3px 14px var(--gold-glow);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.97); filter: brightness(0.93); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lato', sans-serif; font-weight: 700;
  border-radius: 0.75rem;
  border: 2px solid var(--primary); color: var(--primary); background: transparent;
  touch-action: manipulation;
}
.btn-outline:hover { background: var(--primary); color: var(--primary-foreground); }

.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

.safe-bottom { padding-bottom: max(0.625rem, env(safe-area-inset-bottom)); }

/* === LAYOUT === */
.max-w-5xl { max-width: 64rem; margin-left:auto; margin-right:auto; }
.max-w-6xl { max-width: 72rem; margin-left:auto; margin-right:auto; }
.max-w-3xl { max-width: 48rem; margin-left:auto; margin-right:auto; }
.max-w-2xl { max-width: 42rem; margin-left:auto; margin-right:auto; }
.max-w-4xl { max-width: 56rem; margin-left:auto; margin-right:auto; }
.max-w-md  { max-width: 28rem; margin-left:auto; margin-right:auto; }

/* === HEADER === */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:50;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  border-bottom: 2px solid hsl(42,72%,42%);
}
.header-inner {
  max-width: 64rem; margin:0 auto; padding: 0 1rem;
  display:flex; align-items:center; justify-content:space-between; height:56px;
}
.header-logo { height: 48px; width:auto; }
.header-nav { display:flex; align-items:center; gap:1.5rem; }
.header-nav a { font-size:0.875rem; font-weight:500; color: var(--foreground); transition: color 0.2s; }
.header-nav a:hover { color: var(--accent); }
.menu-toggle { display:none; color: var(--foreground); }
.mobile-menu { display:none; background: var(--card); border-top:1px solid var(--border); padding:1rem; }
.mobile-menu.active { display:block; }
.mobile-menu a { display:block; font-size:0.875rem; font-weight:500; color: var(--foreground); padding:0.5rem 0; }

/* === CROSS DIVIDER === */
.cross-divider {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin:0.5rem 0;
}
.cross-divider::before,.cross-divider::after {
  content:''; flex:1; height:1px;
  background: linear-gradient(to right, transparent, hsl(42,72%,42%), transparent);
  opacity:0.5;
}
.cross-divider svg { flex-shrink:0; color: var(--accent); }

/* === HERO PRODUCT === */
.hero-product { padding-top:64px; padding-bottom:1.5rem; background: var(--background); }
.hero-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.gallery-main { border-radius:0.75rem; overflow:hidden; background: var(--card); border:1px solid var(--border); aspect-ratio:1; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; gap:0.375rem; overflow-x:auto; padding-bottom:4px; }
.gallery-thumb { flex-shrink:0; width:48px; height:48px; border-radius:0.5rem; overflow:hidden; border:2px solid var(--border); opacity:0.6; transition:all 0.2s; cursor:pointer; }
.gallery-thumb.active { border-color: var(--accent); opacity:1; }
.gallery-thumb:hover { opacity:1; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }

.price-box { background: var(--accent-light); border:1px solid hsla(42,72%,42%,0.3); border-radius:0.75rem; padding:0.75rem; margin-bottom:1rem; }
.price-old { font-size:0.75rem; color: var(--muted-foreground); text-decoration:line-through; }
.price-current { font-family:'Playfair Display',serif; font-size:2rem; color: var(--accent); font-weight:700; }
.price-badge { font-size:0.75rem; background: var(--accent); color: #fff; padding:0.125rem 0.625rem; border-radius:9999px; font-weight:700; }

.bullet-list li { display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; margin-bottom:0.375rem; }
.bullet-dot { width:6px; height:6px; border-radius:50%; background: var(--accent); flex-shrink:0; }

.trust-badges { display:flex; flex-wrap:wrap; gap:0.75rem; font-size:10px; color: var(--muted-foreground); margin-top:0.75rem; }
.trust-badges span { display:flex; align-items:center; gap:4px; }

/* === SOCIAL PROOF BAR === */
.proof-bar { padding:1rem 0; background: var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.proof-bar-inner { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.proof-item { display:flex; align-items:center; gap:0.375rem; justify-content:center; font-size:10px; font-weight:600; }

/* === VIDEO SECTION === */
.video-section { padding:2rem 0; background: var(--secondary); }
.video-wrapper { position:relative; border-radius:0.75rem; overflow:hidden; border:1px solid var(--border); background: var(--card); }
.video-wrapper video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.video-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(14,25,60,0.4); cursor:pointer; transition: background 0.2s; }
.video-overlay:hover { background:rgba(14,25,60,0.55); }
.video-overlay.hidden { display:none; }
.play-btn { width:72px; height:72px; border-radius:50%; background: linear-gradient(135deg, hsl(42,72%,52%), hsl(30,80%,35%)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px var(--gold-glow); }

/* === BENEFITS GRID === */
.benefits-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.625rem; }
.benefit-card { background: var(--card); border-radius:0.75rem; padding:0.875rem; border:1px solid hsla(38,20%,87%,0.6); text-align:center; transition: border-color 0.2s, box-shadow 0.2s; }
.benefit-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px var(--gold-glow); }
.benefit-icon { width:36px; height:36px; border-radius:50%; background: var(--accent-light); border:1px solid hsla(42,72%,42%,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 0.5rem; }
.benefit-card h3 { font-size:0.875rem; margin-bottom:0.125rem; }
.benefit-card p { font-size:11px; color: var(--muted-foreground); line-height:1.4; }

/* === EMOTIONAL / 2-COL === */
.two-col { display:grid; grid-template-columns:1fr; gap:1.25rem; align-items:center; }
.two-col-img { border-radius:0.75rem; overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; }
.two-col-img img { width:100%; height:100%; object-fit:cover; }

/* === SPECS TABLE === */
.specs-table { background: var(--card); border-radius:0.75rem; border:1px solid var(--border); overflow:hidden; }
.spec-row { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; }
.spec-row:not(:last-child) { border-bottom:1px solid hsla(38,20%,87%,0.4); }
.spec-label { font-size:0.75rem; font-weight:700; }
.spec-value { font-size:0.75rem; color: var(--muted-foreground); text-align:right; }

/* === ENVIRONMENTS === */
.env-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.env-card { background: var(--background); border-radius:0.75rem; padding:0.75rem; border:1px solid var(--border); text-align:center; transition: border-color 0.2s; }
.env-card:hover { border-color: var(--accent); }
.env-icon { width:32px; height:32px; border-radius:50%; background: var(--accent-light); display:flex; align-items:center; justify-content:center; margin:0 auto 0.375rem; }
.env-card h3 { font-size:0.75rem; }
.env-card p { font-size:10px; color: var(--muted-foreground); display:none; }

/* === DIFFERENTIALS TABLE === */
.diff-table { background: var(--card); border-radius:0.75rem; border:1px solid var(--border); overflow:hidden; }
.diff-header, .diff-row { display:grid; grid-template-columns:1fr 60px 60px; align-items:center; padding:0.625rem 0.75rem; }
.diff-header { border-bottom:1px solid var(--border); background: var(--accent-light); font-size:10px; font-weight:700; }
.diff-row:not(:last-child) { border-bottom:1px solid hsla(38,20%,87%,0.3); }
.diff-row span:first-child { font-size:0.75rem; }
.diff-check { text-align:center; }

/* === TESTIMONIALS GRID === */
.testimonials-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.625rem; }
.testimonial-card { background: var(--card); border-radius:0.75rem; border:1px solid var(--border); overflow:hidden; transition: border-color 0.2s; }
.testimonial-card:hover { border-color: var(--accent); }
.testimonial-card .tc-img { aspect-ratio:1; overflow:hidden; }
.testimonial-card .tc-img img { width:100%; height:100%; object-fit:cover; }
.testimonial-card .tc-body { padding:0.625rem; }
.tc-name { font-size:0.75rem; font-weight:700; line-height:1.2; }
.tc-city { font-size:10px; color: var(--muted-foreground); }
.tc-stars { display:flex; gap:2px; color:#f59e0b; }
.tc-text { font-size:11px; color: var(--muted-foreground); line-height:1.4; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* === FAQ === */
.faq-item { background: var(--card); border-radius:0.75rem; border:1px solid var(--border); overflow:hidden; margin-bottom:0.375rem; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--accent); }
.faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; text-align:left; font-size:0.75rem; font-weight:600; color: var(--foreground); }
.faq-arrow { transition: transform 0.2s; flex-shrink:0; }
.faq-arrow.open { transform: rotate(180deg); }
.faq-answer { padding:0 1rem 0.75rem; font-size:0.75rem; color: var(--muted-foreground); line-height:1.6; display:none; }
.faq-answer.open { display:block; }

/* === FINAL CTA === */
.final-cta { padding:2.5rem 0; background: var(--primary); text-align:center; position:relative; overflow:hidden; }
.final-cta::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at center top, hsla(42,72%,42%,0.15), transparent 70%); pointer-events:none; }
.final-cta h2 { color: var(--primary-foreground); font-size:1.25rem; margin-bottom:0.75rem; }
.final-cta p { color: hsla(38,32%,97%,0.7); font-size:0.75rem; margin-bottom:1.5rem; max-width:28rem; margin-left:auto; margin-right:auto; }
.final-cta .trust-final { display:flex; justify-content:center; gap:1rem; margin-top:1rem; font-size:10px; color: hsla(38,32%,97%,0.55); }

/* === FOOTER === */
.site-footer { background: var(--primary); color: var(--primary-foreground); padding:2rem 0; text-align:center; }
.footer-logo { height:40px; margin:0 auto 0.75rem; filter: brightness(2); }
.footer-copy { font-size:0.75rem; color: hsla(38,32%,97%,0.4); }
.footer-ig { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: hsla(38,32%,97%,0.1); margin:0.5rem 0; transition: background 0.2s; }
.footer-ig:hover { background: var(--accent); }

/* === MOBILE CTA (removed - inline section buttons used instead) === */
.mobile-cta { display:none !important; }

/* === SECTION HELPERS === */
.section-bg { background: var(--background); }
.section-card { background: var(--card); }
.section-secondary { background: var(--secondary); }
.section-pad { padding: 2.5rem 0.75rem; }
.text-center { text-align:center; }
.section-title { font-size:1.25rem; margin-bottom:0.25rem; }
.section-subtitle { font-size:0.75rem; color: var(--muted-foreground); }
.section-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color: var(--accent); font-weight:700; margin-bottom:0.25rem; }

/* === PACKAGE BOX === */
.package-box { max-width:28rem; margin:0 auto; background: var(--background); border-radius:0.75rem; border:1px solid var(--border); padding:1.25rem 1.5rem; }
.package-box li { display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; margin-bottom:0.75rem; }
.package-note { font-size:11px; color: var(--muted-foreground); margin-top:1rem; line-height:1.5; }

/* === INDEX PAGE === */
.idx-hero { position:relative; overflow:hidden; }
.idx-hero-bg { width:100%; height:60vh; object-fit:cover; }
.idx-hero-overlay { position:absolute; inset:0; background: linear-gradient(to right, hsla(218,52%,8%,0.88), hsla(218,52%,8%,0.55), transparent); }
.idx-hero-content { position:absolute; top:50%; left:0; transform:translateY(-50%); padding:0 1rem; max-width:72rem; margin:0 auto; width:100%; }
.idx-hero-content h1 { font-size:2.5rem; color: var(--primary-foreground); line-height:1.1; margin-bottom:1rem; max-width:28rem; }
.idx-hero-content p { font-size:0.875rem; color: hsla(38,32%,97%,0.82); max-width:28rem; margin-bottom:1.5rem; }

.product-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.product-card { background: var(--card); border-radius:1rem; border:2px solid var(--border); overflow:hidden; transition: all 0.28s; text-decoration:none; color:inherit; display:block; }
.product-card:hover { transform:translateY(-5px); border-color: var(--accent); box-shadow: 0 10px 32px var(--gold-glow); }
.product-card .pc-img { aspect-ratio:1; overflow:hidden; }
.product-card .pc-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s; }
.product-card:hover .pc-img img { transform:scale(1.05); }
.product-card .pc-body { padding:1rem 1.25rem; }
.product-card h3 { font-size:1.125rem; margin-bottom:0.25rem; }
.product-card .pc-desc { font-size:0.875rem; color: var(--muted-foreground); margin-bottom:0.75rem; }
.pc-price-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; }

.idx-about-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
.idx-about-img { border-radius:1rem; overflow:hidden; border:2px solid var(--border); }
.idx-about-img img { width:100%; height:100%; object-fit:cover; }
.idx-stats { display:flex; gap:1.5rem; margin-top:1rem; }
.idx-stat-num { font-family:'Playfair Display',serif; font-size:1.5rem; color: var(--accent); font-weight:700; }
.idx-stat-label { font-size:0.75rem; color: var(--muted-foreground); }

.idx-testimonials-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.idx-testimonial { background: var(--card); border-radius:1rem; border:1px solid var(--border); padding:1.25rem 1.5rem; transition: border-color 0.2s; }
.idx-testimonial:hover { border-color: var(--accent); }

.idx-footer { background: var(--primary); color: var(--primary-foreground); padding:2.5rem 0; }
.idx-footer-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2rem; }
.idx-footer h4 { font-size:1.125rem; margin-bottom:0.75rem; color: hsl(42,72%,65%); }
.idx-footer a { font-size:0.875rem; color: hsla(38,32%,97%,0.65); display:block; margin-bottom:0.5rem; transition: color 0.2s; }
.idx-footer a:hover { color: hsl(42,72%,65%); }
.social-icon { width:36px; height:36px; border-radius:50%; background: hsla(38,32%,97%,0.1); display:inline-flex; align-items:center; justify-content:center; transition: background 0.2s; }
.social-icon:hover { background: var(--accent); }
.footer-divider { border-top:1px solid hsla(38,32%,97%,0.12); padding-top:1.5rem; text-align:center; }

/* === SVG ICON INLINE === */
.icon-svg    { width:14px; height:14px; display:inline-block; vertical-align:middle; }
.icon-svg-sm { width:12px; height:12px; }
.icon-svg-md { width:16px; height:16px; }
.icon-svg-lg { width:18px; height:18px; }
.icon-svg-xl { width:28px; height:28px; }
.icon-accent  { color: var(--accent); }
.icon-primary { color: var(--primary); }
.icon-muted   { color: var(--muted-foreground); }
.fill-amber   { fill:#f59e0b; color:#f59e0b; }

/* === RESPONSIVE === */
@media (min-width: 640px) {
  .header-logo { height:56px; }
  .hero-product { padding-top:96px; padding-bottom:3.5rem; }
  .gallery-thumb { width:64px; height:64px; }
  .gallery-thumbs { gap:0.5rem; }
  .price-current { font-size:3rem; }
  .section-pad { padding:5rem 1.5rem; }
  .section-title { font-size:1.875rem; }
  .benefits-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .benefit-card { padding:1.25rem; }
  .benefit-card h3 { font-size:1rem; }
  .benefit-card p { font-size:0.75rem; }
  .benefit-icon { width:44px; height:44px; }
  .video-wrapper video { aspect-ratio:16/9; }
  .testimonials-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; }
  .tc-text { -webkit-line-clamp:unset; overflow:visible; }
  .env-grid { grid-template-columns:repeat(5,1fr); gap:1rem; }
  .env-card { padding:1.25rem; }
  .env-card p { display:block; }
  .env-icon { width:40px; height:40px; }
  .diff-header, .diff-row { grid-template-columns:1fr 80px 80px; padding:0.75rem 1.25rem; }
  .faq-btn { font-size:0.875rem; padding:1rem 1.25rem; }
  .faq-answer { font-size:0.875rem; padding:0 1.25rem 1rem; }
  .final-cta { padding:5rem 1.5rem; }
  .final-cta h2 { font-size:1.875rem; }
  .final-cta p { font-size:0.875rem; }
  .proof-bar-inner { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; }
  .proof-item { font-size:0.875rem; }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .idx-about-grid { grid-template-columns:1fr 1fr; }
  .idx-testimonials-grid { grid-template-columns:repeat(3,1fr); }
  .idx-footer-grid { grid-template-columns:repeat(3,1fr); }
  .play-btn { width:80px; height:80px; }
}
@media (min-width: 768px) {
  .hero-grid { grid-template-columns:1fr 1fr; gap:3rem; }
  .two-col { grid-template-columns:1fr 1fr; gap:3rem; }
  .menu-toggle { display:none !important; }
  .header-nav { display:flex !important; }
  .mobile-cta { display:none !important; }
  .mobile-menu { display:none !important; }
  .desktop-only { display:inline-flex !important; }
  .testimonials-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 767px) {
  .header-nav { display:none; }
  .menu-toggle { display:block; }
  .desktop-only { display:none !important; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .testimonials-grid { grid-template-columns:repeat(4,1fr); }
}