:root{
  --bg:#061E3C;
  --bg-2:#0D2E5C;
  --text:#EAF2FF;
  --muted:#9BB3D6;
  --accent:#4AA3FF;
  --primary:#1E7BFF;
  --ink:#0A1630;
  --white:#fff;
  --etsy:#F1641E; /* Etsy brand orange */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  line-height:1.55;
}

.container{width:min(1150px,92%); margin-inline:auto}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; padding:14px 22px; font-weight:700;
  transition:.2s transform ease, .2s background ease, .2s color ease;
  border:1px solid transparent; cursor:pointer;
}
.btn--primary{background:linear-gradient(135deg,#3E8BFF,#2A6CFB); color:#fff; box-shadow:0 10px 20px rgba(30,123,255,.25)}
.btn--ghost{border-color:#3a68b4; color:#cfe0ff; background:transparent}
.btn--lg{padding:16px 24px; font-size:1.05rem}
.btn--xl{padding:18px 28px; font-size:1.15rem}
.btn--sm{padding:10px 14px; font-size:.9rem}
.btn:hover{transform:translateY(-1px)}

.btn--etsy{
  background:var(--etsy); color:#fff; border:0; box-shadow:0 10px 22px rgba(241,100,30,.25)
}
.btn--etsy:hover{filter:brightness(1.05)}

.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; font-size:.8rem; margin:0 0 6px}
.accent{color:#8BC2FF}

.nav{position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(6,30,60,.6); border-bottom:1px solid rgba(255,255,255,.06); z-index:40}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.menu a{margin-left:18px; color:#dfeaff}
.menu a.btn{margin-left:22px}

.hero{padding:68px 0 28px}
.hero__grid{
  display:grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(320px, 0.8fr);
  gap:30px;
  align-items:center;
}
.hero h1{font-size: clamp(2.2rem, 5vw, 3.2rem); margin:.1em 0 .2em}
.hero .sub{color:#d6e4ff; max-width:48ch}
.hero__ctas{display:flex; gap:12px; margin:18px 0}
.hero__bullets{list-style:none; padding:0; margin:18px 0 12px; color:#cfe1ff}
.hero__bullets li{margin:6px 0}
.mockup{width:100%; border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.35)}
.hero__media picture,
.hero__media img.mockup{
  display:block;
  width:100%;
  max-width:600px;            /* ✅ hard cap on desktop */
  height:auto;
  aspect-ratio: 1926 / 996;   /* reserve space; prevents CLS */
  margin-inline:auto;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  object-fit:contain;
  
}

.trust{display:flex; gap:12px; align-items:center; margin-top:12px}
.trust img{height:22px}
.trust--etsy span strong{color:#fff}

.logos{padding:16px 0 24px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.logos__title{text-align:center; color:var(--muted); margin:0 0 10px}
.logos img{display:block; margin:0 auto; max-width:740px; opacity:.9; filter:contrast(1.1) brightness(1.05)}

.how{padding:72px 0}
.how h2, .benefits h2, .reviews h2, .faq h2, .pricing h2, .story h2, .why-etsy h2{font-size:clamp(1.7rem, 3.6vw, 2.2rem)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:20px; border-radius:18px}
.card img{height:36px}
.card h3{margin:10px 0 6px}
.video{position:relative; margin-top:26px}
.video img{width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.08)}
.video .play{position:absolute; bottom:14px; right:14px; background:#0009; padding:10px 14px; border-radius:999px; color:#fff; font-weight:700}

.benefits{padding:68px 0}
.benefits__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.shadow{width:100%; border-radius:16px; box-shadow:0 25px 80px rgba(0,0,0,.35)}
.checklist{list-style:none; padding:0; margin:18px 0; color:#dfeaff}
.checklist li{margin:10px 0}
.guarantee{display:flex; gap:12px; align-items:flex-start; margin-top:12px; background:rgba(31,123,255,.08);
  padding:12px 14px; border:1px solid rgba(31,123,255,.22); border-radius:14px}
.guarantee img{height:28px}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}

.why-etsy{padding:68px 0; border-top:1px solid rgba(255,255,255,.06)}
.why-etsy__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.why-etsy__ctas{display:flex; gap:12px; margin-top:12px}

.reviews{padding:68px 0}
.reviews__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.reviews blockquote{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px; margin:0; font-style:italic}
.reviews cite{display:block; margin-top:10px; color:#a6c0e9; font-style:normal}

.pricing{padding:68px 0}
.price__box{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:24px}
.price__right{text-align:center}
.price__tag{display:flex; align-items:flex-end; justify-content:center; gap:4px; margin-bottom:6px}
.price__currency{font-size:1.6rem; opacity:.85}
.price__num{font-size:3.2rem; font-weight:900}
.price__note{display:block; color:var(--muted); font-size:.9rem}
.cta-stack{display:flex; flex-direction:column; gap:10px; margin-top:10px}

.faq{padding:68px 0}
.accordion{display:grid; gap:10px}
.acc{border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03)}
.acc__head{width:100%; text-align:left; background:none; color:var(--text); padding:16px 18px; border:0; font-weight:700; cursor:pointer}
.acc__body{padding:0 18px 16px; display:none; color:#d6e4ff}
.acc.open .acc__body{display:block}

.footer{padding:26px 0; border-top:1px solid rgba(255,255,255,.08)}
.footer__grid{display:flex; align-items:center; justify-content:space-between}
.footer__nav a{margin-left:14px; color:#cfe0ff}

@media (max-width: 980px){
  .hero__grid, .benefits__grid, .why-etsy__grid, .price__box{grid-template-columns:1fr}
  .hero__media{ justify-self:center; }
  .cards{grid-template-columns:1fr}
  .reviews__grid{grid-template-columns:1fr}
  .menu{display:none}
  .nav__inner{justify-content:center}
}

.video-section {
  padding: 60px 0;
  text-align: center;
}

.video-wrapper {
  position: relative;
  width: 80%;               /* make it bigger */
  max-width: 960px;         /* prevent it from being too wide on huge screens */
  margin: 0 auto;           /* center it */
  padding-bottom: 45%;      /* slightly less padding = taller video (bigger look) */
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}