/* WhyWeBuy — Performance Reset (luxury-premium, light) */
/* No external libs. Built for Lighthouse + PWA + A11y. */

:root{
  --bg: #F6F2EA;
  --bg2:#FFFFFF;
  --text:#0F1115;
  --muted:#4B5563;
  --muted2:#6B7280;
  --surface: rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.92);
  --stroke: rgba(15,17,21,.10);
  --stroke2: rgba(200,166,93,.25);
  --accent:#C8A65D;
  --accent2:#B51E2E;
  --shadow: 0 10px 30px rgba(15,17,21,.10);
  --shadow2: 0 12px 40px rgba(15,17,21,.14);
  --r-xl: 26px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --container: 1120px;

  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 60px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(200,166,93,.18), transparent 62%),
    radial-gradient(900px 600px at 110% 10%, rgba(181,30,46,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
  color:var(--text);
  overflow-x:hidden;
}

img{max-width:100%;height:auto}
.img-center{display:block;margin-inline:auto}
a{color:inherit}
:focus{outline:none}
:focus-visible{
  outline:3px solid rgba(200,166,93,.85);
  outline-offset:3px;
  border-radius:10px;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  padding:10px 12px;
  background:#0F1115; color:#fff;
  z-index:9999;
  border-radius:999px;
}
.skip-link:focus{left:12px; top:12px}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.site-header{
  position:sticky; top:0; z-index:1000;
}

.nav-wrap{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(246,242,234,.82), rgba(246,242,234,.65));
  border-bottom: 1px solid rgba(15,17,21,.08);
}

.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--s-4);
  padding: 14px 16px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  min-width:140px;
}
.brand-mark{
  width:34px;height:34px;border-radius:12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(200,166,93,.95), rgba(15,17,21,.95));
  box-shadow: inset 0 0 0 1px rgba(200,166,93,.35), 0 10px 24px rgba(15,17,21,.14);
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; inset:10px 8px 9px 8px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(200,166,93,.9), rgba(255,255,255,.9));
  opacity:.55;
}
.brand-name{font-weight:800; letter-spacing:.2px}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  cursor:pointer;
  position:relative;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.nav-toggle:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block;
  width:18px;height:2px; background: rgba(15,17,21,.85);
  border-radius:99px;
  position:absolute; left:50%;
  transform:translateX(-50%);
}
.nav-toggle span{top:50%}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

.nav{
  display:flex; align-items:center; gap: 18px;
}
.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:16px; align-items:center;
}
.nav-links a{
  text-decoration:none;
  color: rgba(15,17,21,.78);
  font-weight:650;
  padding:10px 10px;
  border-radius:999px;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-links a:hover{background: rgba(200,166,93,.12); color: rgba(15,17,21,.95)}
.nav-tools{display:flex; align-items:center; gap: 10px}
.select{
  font: inherit;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.72);
}

.progress{
  height:3px;
  background: rgba(15,17,21,.08);
}
.progress-bar{
  display:block;
  height:100%;
  width:100%;
  transform-origin:left;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(200,166,93,.85), rgba(181,30,46,.75));
}

.hero{
  position:relative;
  padding: clamp(34px, 6vw, 66px) 0;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 520px at 8% 10%, rgba(200,166,93,.22), transparent 60%),
    radial-gradient(700px 460px at 80% 0%, rgba(181,30,46,.12), transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, rgba(15,17,21,.12), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap: clamp(18px, 4vw, 46px);
}
.hero-copy{max-width: 56ch}
.eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.68);
  border:1px solid rgba(200,166,93,.22);
  color: rgba(15,17,21,.78);
  font-weight:700;
  letter-spacing:.2px;
}
h1{
  font-size: clamp(30px, 4.2vw, 54px);
  line-height:1.05;
  margin: 14px 0 12px;
}
h2{
  font-size: clamp(24px, 2.8vw, 34px);
  line-height:1.15;
  margin:0 0 10px;
}
h3{margin:0 0 8px; line-height:1.2}
.lead{
  font-size: clamp(16px, 1.4vw, 18px);
  line-height:1.55;
  color: rgba(15,17,21,.78);
  margin: 0 0 18px;
}
.micro, .fine{
  color: rgba(15,17,21,.66);
  line-height:1.45;
}
.micro{font-size: 13px; margin: 10px 0 0}
.fine{font-size: 12.5px; margin: 10px 0 0}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius:999px;
  padding: 12px 16px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid transparent;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  box-shadow: var(--shadow);
  user-select:none;
  will-change: transform;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(90deg, rgba(200,166,93,1), rgba(181,30,46,.90));
  color:#0F1115;
  border-color: rgba(15,17,21,.06);
}
.btn--primary:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn--ghost{
  background: rgba(255,255,255,.70);
  color: rgba(15,17,21,.88);
  border-color: rgba(15,17,21,.10);
}
.btn--ghost:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn--full{width:100%}

.trust-strip{
  margin-top: 16px;
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}
.badge{
  height:44px;
  width:auto;
  opacity:.92;
  filter: drop-shadow(0 10px 20px rgba(15,17,21,.12));
}

.pack-frame{
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,.45)),
    linear-gradient(180deg, rgba(200,166,93,.10), rgba(255,255,255,.0));
  border:1px solid rgba(200,166,93,.18);
  box-shadow: var(--shadow2);
  padding: clamp(14px, 2.2vw, 18px);
  position:relative;
  overflow:hidden;
}
.pack-frame::before{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(circle at 40% 30%, rgba(200,166,93,.20), transparent 55%);
  animation: floatGlow 7.5s var(--ease) infinite;
}
.packshot{
  position:relative;
  z-index:1;
  object-fit: contain;
  aspect-ratio: 16 / 9;
  width:min(460px, 100%);
  height:auto;
  filter: drop-shadow(0 26px 30px rgba(15,17,21,.18));
}

.band{padding: clamp(40px, 6vw, 86px) 0}
.section-head{margin-bottom: 22px}
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 4vw, 46px);
  align-items:center;
}
.panel{max-width: 60ch}
.media{display:flex; justify-content:center}

.photo{
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.08);
  box-shadow: var(--shadow2);
  object-fit: cover;
  aspect-ratio: 5 / 6;
  width:min(480px, 100%);
}
.photo-frame{
  border-radius: var(--r-xl);
  overflow:hidden;
  border:1px solid rgba(15,17,21,.08);
  box-shadow: var(--shadow2);
}
.photo-frame .photo{border:0; box-shadow:none; border-radius:0}

.problem{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(181,30,46,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.0));
}

.proof-card{
  margin-top: 14px;
  border-radius: var(--r-xl);
  padding: 18px;
  border:1px solid rgba(200,166,93,.20);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.proof-bg{
  position:absolute; inset:0;
  background-image:url("/assets/img/guarantee-bg.jpg");
  background-size:cover;
  background-position:center;
  opacity:.16;
  filter: saturate(.9) contrast(1.05);
}
.proof-strong{
  position:relative;
  font-weight:900;
  font-size: 18px;
  margin:0 0 8px;
}
.proof-card .micro{position:relative; margin-bottom: 12px}

.benefits{
  background:
    radial-gradient(1100px 650px at 90% 10%, rgba(200,166,93,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.0));
}

.bullets{
  list-style: none;
  padding:0;
  margin: 0;
}
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.benefits-grid li{
  background: rgba(255,255,255,.70);
  border:1px solid rgba(15,17,21,.08);
  border-radius: var(--r-lg);
  padding: 12px 12px;
  box-shadow: 0 10px 26px rgba(15,17,21,.06);
  position:relative;
}
.benefits-grid li::before{
  content:"";
  width:10px;height:10px;border-radius:99px;
  background: linear-gradient(90deg, rgba(200,166,93,.95), rgba(181,30,46,.85));
  position:absolute; left:12px; top: 14px;
  box-shadow: 0 0 0 4px rgba(200,166,93,.12);
}
.benefits-grid li{padding-left: 30px; color: rgba(15,17,21,.86); line-height:1.45}

.cta-center{margin-top: 18px; display:flex; justify-content:center}

.how{
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(15,17,21,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.30));
}
.step-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.step-card{
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.step-card:hover{transform: translateY(-2px); box-shadow: var(--shadow2)}
.step-card p{margin:0; color: rgba(15,17,21,.74); line-height:1.5}

.stats{
  background:
    radial-gradient(1000px 600px at 90% 10%, rgba(181,30,46,.08), transparent 60%);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.stat-card{
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  padding: 16px;
}
.stat-k{margin:0; font-weight:800; color: rgba(15,17,21,.68)}
.stat-v{margin:6px 0 6px; font-weight:950; font-size: 20px}
.stat-d{margin:0; color: rgba(15,17,21,.70); line-height:1.45}

.testimonials{
  background:
    radial-gradient(1100px 620px at 10% 10%, rgba(200,166,93,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.0));
}
.t-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.t-card{
  margin:0;
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  padding: 18px;
}
.t-card blockquote{margin:0 0 12px; font-weight:800; line-height:1.35}
.t-card figcaption{color: rgba(15,17,21,.68); font-weight:700}

.pricing{
  background:
    radial-gradient(1000px 560px at 90% 20%, rgba(15,17,21,.07), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.35));
}
.price-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.price-card{
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.price-card:hover{transform: translateY(-2px); box-shadow: var(--shadow2)}
.price-badge{
  position:absolute;
  top: 14px; left: 14px;
  background: rgba(15,17,21,.90);
  color: rgba(246,242,234,.96);
  padding: 7px 10px;
  border-radius:999px;
  font-size: 12px;
  font-weight:900;
  letter-spacing:.35px;
}
.price-media{display:flex; justify-content:center; padding: 8px 0 10px}
.price-media .packshot{
  aspect-ratio:auto;
  width: min(320px, 100%);
  filter: drop-shadow(0 18px 22px rgba(15,17,21,.18));
}
.price-name{margin: 4px 0 6px; font-size: 18px}

.price-cta{margin-top:auto; padding-top: 12px}
.price-cta .btn{min-height: 48px}
.price-cta .micro{margin-top: 10px}
.price-note{margin:0 0 12px; color: rgba(15,17,21,.70); line-height:1.45}
.bullets--compact li{
  margin: 0 0 8px;
  color: rgba(15,17,21,.78);
  line-height:1.4;
  position:relative;
  padding-left: 18px;
}
.bullets--compact li::before{
  content:"";
  position:absolute; left:0; top: .5em;
  width:8px;height:8px;border-radius:99px;
  background: linear-gradient(90deg, rgba(200,166,93,.95), rgba(181,30,46,.85));
}
.center{text-align:center}

.faq{
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(181,30,46,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.0));
}
.accordion{
  display:grid;
  gap: 10px;
}
.accordion-item{
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.accordion-h{margin:0}
.accordion-btn{
  width:100%;
  text-align:left;
  padding: 14px 16px;
  background: transparent;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font: inherit;
  font-weight:850;
  cursor:pointer;
}
.accordion-icon{
  width: 18px;height:18px;
  border-radius:99px;
  position:relative;
  flex:0 0 auto;
  border:1px solid rgba(15,17,21,.18);
}
.accordion-icon::before,.accordion-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:10px;height:2px; background: rgba(15,17,21,.85);
  transform: translate(-50%,-50%);
  border-radius:99px;
}
.accordion-icon::after{
  transform: translate(-50%,-50%) rotate(90deg);
}
.accordion-btn[aria-expanded="true"] .accordion-icon::after{opacity:0}
.accordion-panel{
  padding: 0 16px 14px;
}
.accordion-panel p{margin:0; color: rgba(15,17,21,.74); line-height:1.55}

.contact{
  background:
    radial-gradient(1000px 680px at 90% 20%, rgba(200,166,93,.12), transparent 62%);
}
.form{
  margin-top: 10px;
  border-radius: var(--r-xl);
  border:1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  padding: 16px;
}
.field{display:grid; gap:6px; margin-bottom: 12px}
label{font-weight:800}
input,textarea{
  font: inherit;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(15,17,21,.12);
  background: rgba(255,255,255,.92);
}
.hint{margin:0; font-size: 12.5px; color: rgba(15,17,21,.58)}
.form-status{margin:10px 0 0; font-weight:800}

.site-footer{
  padding: 34px 0 44px;
  border-top: 1px solid rgba(15,17,21,.08);
  background: linear-gradient(180deg, rgba(246,242,234,.15), rgba(246,242,234,.55));
}
.site-footer a{color: rgba(15,17,21,.88); font-weight:900}
.noscript{
  margin: 0;
  padding: 12px;
  text-align:center;
  background: rgba(15,17,21,.92);
  color: rgba(246,242,234,.98);
}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

@keyframes floatGlow{
  0%{transform: translate3d(-2%, -2%, 0) rotate(0deg)}
  50%{transform: translate3d(2%, 1%, 0) rotate(6deg)}
  100%{transform: translate3d(-2%, -2%, 0) rotate(0deg)}
}

/* Responsive: mobile is 390–900px per brief */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:fixed;
    inset: 70px 10px auto 10px;
    background: rgba(246,242,234,.92);
    border:1px solid rgba(15,17,21,.10);
    border-radius: 18px;
    box-shadow: var(--shadow2);
    padding: 12px;
    display:none;
  }
  .nav.open{display:block}
  .nav-links{flex-direction:column; align-items:stretch; gap:6px}
  .nav-links a{display:block; text-align:center}
  .nav-tools{margin-top: 10px; justify-content:center}
  .hero-grid, .split{grid-template-columns: 1fr; text-align:center}
  .hero-copy{margin-inline:auto}
  .cta-row{justify-content:center}
  .btn{min-width: min(100%, 360px)}
  .benefits-grid{grid-template-columns: 1fr}
  .bullets, .accordion-btn{text-align:left}
  .step-grid, .stats-grid, .t-grid, .price-grid{grid-template-columns: 1fr}
  .badge{height:40px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .pack-frame::before{animation:none}
  .btn, .step-card, .price-card{transition:none}
}


/* Pricing: visible prices to match structured data */
.price-amount{margin:10px 0 6px; font-size:14px; line-height:1.35; color:var(--text-2);} 
.price-amount__label{opacity:.9; margin-right:6px;} 
.price-amount__total{font-size:20px; letter-spacing:-.01em; color:var(--text);} 
.price-amount__sub{display:inline-block; margin-left:8px; opacity:.85;}
@media (max-width:900px){.price-amount{ text-align:center; } .price-amount__sub{display:block; margin-left:0; margin-top:4px;}}

/* Policies section (Shipping & Returns) */
.section--policies{ position:relative; }
.section--policies .grid{ margin-top: 18px; }
.section--policies .card{ height:100%; }