/* ============================================================
   pages/home.css — index.html specific layout
   ============================================================ */

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding-block:var(--s9) var(--s8)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.6;pointer-events:none;
  background:
    radial-gradient(820px 380px at 84% -6%, var(--primary-soft), transparent 60%),
    radial-gradient(620px 320px at 2% 4%, var(--accent-soft), transparent 62%);
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s5)}
.hero h1{font-size:clamp(2.5rem,5vw,var(--t-6xl));max-width:15ch;letter-spacing:-.03em}
.hero p.lead{font-size:var(--t-xl);color:var(--text-muted);max-width:54ch;margin-top:var(--s5)}
.hero__cta{display:flex;gap:var(--s3);margin-top:var(--s7);flex-wrap:wrap}
.hero__meta{display:flex;gap:var(--s5);margin-top:var(--s7);flex-wrap:wrap}
.hero__meta .m{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:var(--text-muted)}
.hero__meta .m svg{width:18px;height:18px;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* checkout preview visual */
.checkout-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--sh-xl);padding:var(--s6);max-width:420px;margin-inline:auto;position:relative}
.checkout-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);pointer-events:none}
[data-theme="dark"] .checkout-card::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.checkout-card .cc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5)}
.checkout-card .cc-head b{font-family:var(--font-display);font-size:var(--t-lg)}
.checkout-card .cc-secure{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--accent);font-weight:var(--fw-semibold)}
.checkout-card .cc-secure svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.pay-row{display:flex;align-items:center;gap:var(--s3);padding:14px var(--s4);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;transition:var(--fast);background:var(--surface-2)}
.pay-row.is-active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.pay-row .pr-ico{width:34px;height:24px;border-radius:5px;display:grid;place-items:center;flex:0 0 auto;background:var(--bg-sunken);color:var(--text-muted)}
.pay-row .pr-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pay-row .pr-label{font-size:var(--t-sm);font-weight:var(--fw-medium);color:var(--text)}
.pay-row .pr-sub{font-size:var(--t-xs);color:var(--text-subtle);font-family:var(--font-mono)}
.pay-row .pr-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);margin-left:auto;flex:0 0 auto;position:relative}
.pay-row.is-active .pr-radio{border-color:var(--primary)}
.pay-row.is-active .pr-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary)}
.checkout-card .cc-pay{margin-top:var(--s5);width:100%;justify-content:center}
.checkout-card .cc-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--s4);font-size:var(--t-xs);color:var(--text-subtle)}

@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero h1{max-width:18ch}
  .hero__visual{order:2}
}
@media (max-width:560px){
  .hero{padding-block:var(--s7) var(--s7)}
  .hero__cta .btn{width:100%}
  .checkout-card{padding:var(--s5)}
}

/* ---- Trust bar ---- */
.trust-section{padding-block:var(--s6);border-block:1px solid var(--border);background:var(--bg-subtle)}
.trust-section p{text-align:center;color:var(--text-subtle);font-size:var(--t-sm);margin-top:var(--s4)}

/* ---- Products ---- */
.products-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.products-grid{grid-template-columns:1fr}}

/* ---- Stats band ---- */
.stats-grid{grid-template-columns:repeat(4,1fr);gap:var(--s7)}
@media (max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}}

/* ---- Why choose ---- */
.why-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.why-grid{grid-template-columns:1fr}}