/* ============================================================
   Silent Kick — store recreation (Horizon-style)
   MOBILE FIRST. All desktop changes live in @media (min-width) blocks
   at the bottom, so the phone layout is never affected by them.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#111111;
  --bg:#ffffff;
  --panel:#eef1ea;      /* soft green */
  --panel-2:#e1edf5;    /* soft blue */
  --grey:#f5f5f5;
  --muted:#666666;
  --line:#e7e7e7;
  --btn:#111111;
  --btn-ink:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --wrap:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3{line-height:1.08;font-weight:700;letter-spacing:-.02em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:18px}

/* ---------- buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;
  background:var(--btn);color:var(--btn-ink);
  font-weight:600;font-size:1rem;padding:1.05em 1.4em;border-radius:100px;
  border:1.5px solid var(--btn);transition:transform .15s var(--ease),background .2s,color .2s;
}
.btn:active{transform:scale(.985)}
.btn--out{background:transparent;color:var(--ink)}
.btn--out:hover{background:var(--ink);color:#fff}
.btn.small{width:auto;padding:.85em 1.5em;font-size:.95rem}

/* ---------- announcement bar ---------- */
.announce{background:var(--ink);color:#fff;text-align:center;font-size:.8rem;font-weight:500;
  letter-spacing:.02em;padding:.6rem 1rem}
.announce span{opacity:.6;margin-inline:.5rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand span{color:var(--muted);font-weight:600}
.site-header nav{display:none}
.header-buy{background:var(--ink);color:#fff;font-weight:600;font-size:.85rem;
  padding:.6em 1.1em;border-radius:100px}

/* ============================================================
   HERO (product-first)
   ============================================================ */
.hero{padding:26px 0 34px}
.hero h1{font-size:clamp(1.9rem,7.5vw,2.5rem);letter-spacing:-.03em;margin-bottom:20px;font-weight:800}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:var(--panel-2);z-index:-1}
.hero-media{border-radius:var(--radius);overflow:hidden;background:var(--grey);margin-bottom:22px}
.hero-media img{width:100%;aspect-ratio:1/1;object-fit:cover}

.buy-card{}
.offer-badge{display:inline-block;background:#c8402f;color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.35em .7em;border-radius:6px;margin-bottom:10px}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem;margin-bottom:14px}
.price{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.compare{font-size:1.05rem;color:var(--muted);text-decoration:line-through;font-weight:600}
.price-note{font-size:.85rem;color:var(--muted);flex-basis:100%}

.variants{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.variant{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1rem;
  text-align:left;transition:border-color .2s,background .2s}
.variant:hover{border-color:#bbb}
.variant.on{border-color:var(--ink);background:#fafafa}
.variant>span{min-width:0}
.variant>span:first-child{flex:1 1 auto;overflow-wrap:anywhere}
.variant .v-price{flex:0 0 auto}
.variant .v-name{font-weight:700;font-size:.98rem}
.variant .v-meta{color:var(--muted);font-size:.8rem;font-weight:500}
.variant .v-name em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--panel);color:#3c5231;padding:.2em .5em;border-radius:6px;margin-left:.5em}
.variant .v-price{font-weight:800;font-size:1.02rem}

.cta-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}

.assurances{list-style:none;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line);padding-top:18px}
.assurances li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:500;line-height:1.4;min-width:0}
.assurances svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px}
.assurances .a-txt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:44px 0}
.panel{background:var(--panel)}
.panel-2{background:var(--panel-2)}
.section h2{font-size:clamp(1.6rem,5.5vw,2.1rem);font-weight:800;letter-spacing:-.025em;margin-bottom:16px}
.section .lead{font-size:1.02rem;color:#333;margin-bottom:8px}

/* dev testimonial */
.testimonial{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:26px}
.testimonial p{font-size:1.05rem;font-style:italic;line-height:1.5}
.testimonial .by{font-style:normal;font-weight:700;margin-top:10px;font-size:.9rem}

/* why-choose list */
.reasons{list-style:none;display:flex;flex-direction:column;gap:14px}
.reasons li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;font-weight:500;line-height:1.45;min-width:0}
.reasons li>span:last-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.reasons .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* media + content */
.media-block{}
.media-block .m-img{border-radius:var(--radius);overflow:hidden;background:var(--grey);margin-bottom:20px}
.media-block .m-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-block h2{margin-bottom:12px}
.media-block p{font-size:1.02rem;color:#333;margin-bottom:20px}

/* image strip (was slideshow) */
.strip-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.strip-imgs figure{border-radius:var(--radius-sm);overflow:hidden;background:var(--grey)}
.strip-imgs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.strip-imgs figure:first-child{grid-column:span 2;aspect-ratio:auto}
.strip-imgs figure:first-child img{aspect-ratio:16/10}

/* disclaimer */
.disclaimer{text-align:center}
.disclaimer .tag{font-weight:800;letter-spacing:.05em;font-size:.8rem;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px}
.disclaimer p{max-width:56ch;margin:0 auto 20px;color:#333;font-size:.98rem}

/* FAQ */
.faq h2{text-align:center;margin-bottom:24px}
.acc{max-width:720px;margin:0 auto;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;text-align:left;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.15rem 0;font-weight:600;font-size:1.05rem}
.acc-q .mk{font-size:1.4rem;font-weight:400;transition:transform .3s var(--ease)}
.acc-item.open .acc-q .mk{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-a p{padding-bottom:1.15rem;color:#444;font-size:.98rem;line-height:1.6}

/* footer */
.site-footer{background:var(--ink);color:#fff;padding:40px 0 28px;margin-top:10px}
.site-footer .brand{color:#fff;margin-bottom:12px}
.site-footer p{color:rgba(255,255,255,.6);font-size:.9rem;max-width:40ch;margin-bottom:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.foot-links a{color:rgba(255,255,255,.85);font-size:.9rem;font-weight:500}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;
  font-size:.8rem;color:rgba(255,255,255,.5)}

/* reveal */
.r{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.r.in{opacity:1;transform:none}

/* ============================================================
   DESKTOP ENHANCEMENTS ONLY  (min-width) — phone view untouched
   ============================================================ */
@media (min-width:760px){
  .site-header nav{display:flex;gap:26px}
  .site-header nav a{font-size:.9rem;font-weight:500;color:#333}
  .site-header nav a:hover{color:var(--ink)}
  .header-in{height:66px}

  /* hero becomes two columns: image left, buy card right */
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .hero-head{grid-column:1 / -1;text-align:center;max-width:760px;margin:0 auto 16px}
  .hero h1{font-size:clamp(2.1rem,2.9vw,2.7rem);line-height:1.06;text-wrap:balance}
  .hero-media{margin-bottom:0;position:sticky;top:90px}
  .hero-media img{aspect-ratio:1/1}
  .buy-card{align-self:center}

  .section{padding:72px 0}
  /* why-choose two columns */
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  /* media block side by side, alternating */
  .media-block .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .media-block .m-img{margin-bottom:0}
  .media-block.flip .m-img{order:2}
  .strip-imgs{grid-template-columns:repeat(4,1fr)}
  .strip-imgs figure:first-child{grid-column:span 2;grid-row:span 2}
  .strip-imgs figure:first-child img{aspect-ratio:1/1;height:100%}
  .site-footer .wrap{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
}

@media (min-width:1040px){
  .hero{padding:52px 0 64px}
  .hero .wrap{gap:64px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .r{opacity:1;transform:none}
}