/* =====================================================================
   CoolBox — Main Stylesheet  (mobile-first)
   Font: Open Sans — covers Latin Extended, Cyrillic, Greek
   Supports: Bulgarian, Hungarian, Romanian, Croatian, Greek, Spanish
   ===================================================================== */

/* --- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #17233b;
  background: #f0f4f8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; cursor: pointer; background: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* --- Design tokens --------------------------------------------------- */
:root {
  --blue:      #1588e8;
  --blue-d:    #0a6fc4;
  --blue-soft: #e8f3ff;
  --ink:       #17233b;
  --muted:     #5c6f88;
  --line:      #dce8f5;
  --panel:     #f3f8fe;
  --white:     #fff;
  --shadow-sm: 0 2px 8px rgba(20, 50, 90, .08);
  --shadow-md: 0 8px 28px rgba(20, 50, 90, .13);
  --r:         10px;
  --r-sm:      6px;
  --max:       1200px;
  --t:         .2s ease;
}

/* --- Typography ------------------------------------------------------ */
h1 {
  font-size: clamp(28px, 8vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.5px;
}
h2 {
  font-size: clamp(22px, 5.5vw, 38px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--ink);
}
h3 {
  font-size: clamp(14px, 3vw, 17px);
  line-height: 1.3;
  font-weight: 700;
}
h2 span { color: var(--blue); }

.section-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--blue-soft);
  color: var(--blue-d);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.section-lead {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* --- Loader ---------------------------------------------------------- */
#loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.spinner { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(270deg); } }
.path {
  stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center;
  animation: dash 1.4s ease-in-out infinite, cpath 5.6s ease-in-out infinite;
}
@keyframes dash {
  0%   { stroke-dashoffset: 187; }
  50%  { stroke-dashoffset: 47; transform: rotate(135deg); }
  100% { stroke-dashoffset: 187; transform: rotate(450deg); }
}
@keyframes cpath { 0%,100% { stroke: var(--blue); } 50% { stroke: #24a5ff; } }

/* --- Buttons --------------------------------------------------------- */
.primary-btn,
.outline-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.primary-btn,
.btn {
  color: #fff !important;
  background: linear-gradient(160deg, #2cb0ff, var(--blue));
  box-shadow: 0 8px 20px rgba(21, 136, 232, .32);
}
.primary-btn:hover,
.btn:hover {
  background: linear-gradient(160deg, #1da4f3, var(--blue-d));
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(21, 136, 232, .42);
}

.outline-btn {
  color: var(--blue) !important;
  background: #fff;
  border: 2px solid var(--blue);
}
.outline-btn:hover { color: #fff !important; background: var(--blue); }

.btn-cart {
  flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2l2.1 10.4A3 3 0 0 0 10 16h7.8a3 3 0 0 0 2.8-2l2-6H7.1L6.7 6H3V3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2l2.1 10.4A3 3 0 0 0 10 16h7.8a3 3 0 0 0 2.8-2l2-6H7.1L6.7 6H3V3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =====================================================================
   HEADER
   ===================================================================== */
.header-top-nav { display: none; }

.main-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(20,50,90,.06);
}
/* backdrop-filter on a pseudo-element so it doesn't create a containing block
   for position:fixed children (which would trap the mobile nav inside the header) */
.main-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(8px);
}

.header-bottom-nav .wrapper {
  width: min(var(--max), calc(100% - 32px));
  height: 60px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}

.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 36px; width: auto; }

.main-nav {
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0;
}

.main-nav-link {
  display: block; padding: 7px 11px;
  color: var(--ink); font-size: 14px; font-weight: 600;
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.main-nav-link:hover { color: var(--blue); background: var(--blue-soft); }

.main-nav .btn {
  height: 38px; padding: 0 18px;
  border-radius: 20px; font-size: 13px;
  box-shadow: 0 4px 14px rgba(21,136,232,.28);
}

/* Hamburger button */
.m-menu-btn {
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
}
.m-menu-btn span,
.m-menu-btn::before,
.m-menu-btn::after {
  content: ""; display: block;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
body.menu-opened .m-menu-btn::before { transform: translateY(7px) rotate(45deg); }
body.menu-opened .m-menu-btn::after  { transform: translateY(-7px) rotate(-45deg); }
body.menu-opened .m-menu-btn span    { opacity: 0; }

/* =====================================================================
   PAGE WRAPPER
   ===================================================================== */
.guide-page {
  width: min(var(--max), 100%);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 60px rgba(20, 50, 90, .10);
}

/* Base section shell */
.guide-section {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Full-bleed sections (hero, final CTA) break out of the 1200px wrapper */
.hero-card,
.final-card {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* =====================================================================
   § 1  HERO
   ===================================================================== */
.hero-card {
  min-height: 100svh;
  display: flex; align-items: flex-end;
  background: #08111e; color: #fff;
}

.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
}

/* Mobile: heavy bottom gradient so text is readable */
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,14,26,.22)  0%,
    rgba(6,14,26,.52)  42%,
    rgba(6,14,26,.93)  100%);
}

.hero-copy {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 20px 44px;
  /* on desktop the desktop block overrides this to a proper left margin */
}

.hero-logo { width: 120px; margin: 0 0 18px; }

.hero-copy h1 { color: #fff; max-width: 560px; }
.hero-copy h1 span { color: var(--blue); display: block; }

.hero-copy > p {
  max-width: 520px; margin: 14px 0 24px;
  color: rgba(255,255,255,.82);
  font-size: 15px; line-height: 1.65;
}

/* =====================================================================
   § 2  HOW TO USE
   ===================================================================== */
.intro-card {
  padding: 52px 20px 44px;
  text-align: center;
  background: #fff;
}

.intro-card > h2 { margin-bottom: 4px; }

.steps-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.step-card { text-align: left; }

.step-card img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

.step-num {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  margin: 12px 6px 0 0;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 800;
}

.step-card h3 { display: inline; font-size: 14px; }
.step-card > p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.cool-note {
  margin: 28px auto 0; max-width: 640px;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--blue-soft); color: var(--blue-d);
  font-size: 13px; font-weight: 700; text-align: left;
}

/* =====================================================================
   § 3  OVERVIEW — text left / image right
   ===================================================================== */
.place-card { background: var(--panel); }

.place-inner {
  display: flex; flex-direction: column;
}

.place-copy {
  order: 1;
  padding: 44px 20px 36px;
}

.place-copy h2 { margin-bottom: 12px; }

.place-copy > p {
  margin-top: 12px; color: var(--muted);
  font-size: 15px; line-height: 1.65;
}

.place-copy .primary-btn { margin-top: 26px; }

.place-image { order: 2; }

.place-image img {
  width: 100%; height: 280px;
  object-fit: cover; object-position: center 30%;
}

/* =====================================================================
   § 4  SETUP — image left / text right
   ===================================================================== */
.setup-card { background: #fff; }

.setup-inner { display: flex; flex-direction: column; }

.setup-image { order: 1; }

.setup-image img {
  width: 100%; height: 260px;
  object-fit: cover; object-position: center 35%;
}

.setup-copy {
  order: 2;
  padding: 40px 20px;
}

.setup-copy h2 { margin-bottom: 12px; }

.setup-copy > p {
  color: var(--muted); font-size: 15px; line-height: 1.65;
  margin-top: 12px;
}

.mini-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 24px;
}

.mini-features span {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  padding: 14px 8px; border-radius: var(--r);
  background: var(--panel);
  color: var(--ink); font-size: 12px; font-weight: 700;
  text-align: center;
}

/* =====================================================================
   § 5  PRODUCT FEATURES — product left / grid right
   ===================================================================== */
.features-card {
  display: flex; flex-direction: column;
  gap: 0;
  padding: 48px 20px 40px;
  background: linear-gradient(180deg, #fff 0%, #f3f8fe 100%);
}

.features-product {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0 32px;
}

.features-product img {
  width: min(300px, 85%);
  filter: drop-shadow(0 14px 28px rgba(21, 100, 200, .22));
}

.features-content h2 { margin-bottom: 20px; }

.features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 28px;
}

.feature-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
  color: var(--ink); font-size: 14px; font-weight: 700;
  line-height: 1.3;
}

.feature-row i { flex: 0 0 auto; }

/* =====================================================================
   § 6  FAQ
   ===================================================================== */
.faq-card {
  padding: 48px 20px 44px;
  background: var(--panel);
  text-align: center;
}

.faq-card > h2 { margin-bottom: 4px; }

.accordion {
  margin: 24px auto 32px;
  max-width: 700px; text-align: left;
  display: grid; gap: 10px;
}

.acc-item {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; overflow: hidden;
}

.acc-trigger {
  width: 100%; display: flex;
  align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px;
  background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left;
  transition: background var(--t);
}
.acc-trigger:hover { background: var(--blue-soft); }

.acc-icon {
  flex: 0 0 auto; font-size: 22px; font-weight: 400;
  color: var(--blue); line-height: 1;
  transition: transform .22s ease;
}
.acc-item.open .acc-icon { transform: rotate(45deg); }

.acc-body {
  max-height: 0; overflow: hidden;
  padding: 0 18px; color: var(--muted);
  font-size: 14px; line-height: 1.65;
  transition: max-height .28s ease, padding .28s ease;
}
.acc-item.open .acc-body {
  max-height: 260px; padding: 0 18px 16px;
}

/* =====================================================================
   § 7  FINAL CTA
   ===================================================================== */
.final-card {
  min-height: 480px; display: flex; align-items: flex-end;
  background: #06111e; color: #fff;
}

.final-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 40% center;
}

.final-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(4,12,22,.25)  0%,
    rgba(4,12,22,.66)  55%,
    rgba(4,12,22,.95)  100%);
}

/* final-product: hidden on mobile, visible on desktop */
.final-product { display: none; }

.final-copy {
  position: relative; z-index: 1;
  width: 100%; padding: 0 20px 48px;
}

.final-copy h2 { color: #fff; max-width: 480px; }
.final-copy h2 span { color: var(--blue); }

.final-copy > p {
  max-width: 460px; margin: 14px 0 26px;
  color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.main-footer {
  padding: 28px 0; background: #071321;
  color: rgba(255,255,255,.6);
}

.main-footer .wrapper {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  gap: 12px 24px;
}

.copyright-text { font-size: 12px; }

.main-footer a,
.footer-nav-link,
.flag-icon-text {
  color: rgba(255,255,255,.6) !important;
  font-size: 12px;
  transition: color var(--t);
}
.main-footer a:hover,
.footer-nav-link:hover { color: rgba(255,255,255,.9) !important; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }

.scrollTop-btn { display: none !important; }

/* =====================================================================
   ICON SYSTEM
   ===================================================================== */
i[class^="icon-"] {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--blue); font-style: normal;
}
i[class^="icon-"]::before {
  content: ""; display: block;
  width: 22px; height: 22px; background: currentColor;
}

.icon-power::before  { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 3h-2v10h2V3Zm4.83 2.17-1.42 1.42A7 7 0 1 1 7.59 6.6L6.17 5.17A9 9 0 1 0 17.83 5.17Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 3h-2v10h2V3Zm4.83 2.17-1.42 1.42A7 7 0 1 1 7.59 6.6L6.17 5.17A9 9 0 1 0 17.83 5.17Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-bars::before   { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20h3V9H5v11Zm5 0h3V4h-3v16Zm5 0h3v-7h-3v7Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20h3V9H5v11Zm5 0h3V4h-3v16Zm5 0h3v-7h-3v7Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-wind::before   { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8h10a3 3 0 1 0-3-3H9a5 5 0 1 1 5 5H4V8Zm0 5h14a2 2 0 1 1-2 2h-2a4 4 0 1 0 4-4H4v2Zm0 5h7v2H4v-2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8h10a3 3 0 1 0-3-3H9a5 5 0 1 1 5 5H4V8Zm0 5h14a2 2 0 1 1-2 2h-2a4 4 0 1 0 4-4H4v2Zm0 5h7v2H4v-2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-snow::before   { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 2h2v20h-2V2Zm8.7 5-1-1.7-17.4 10 1 1.7L19.7 7Zm0 10-17.4-10-1 1.7 17.4 10 1-1.7Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 2h2v20h-2V2Zm8.7 5-1-1.7-17.4 10 1 1.7L19.7 7Zm0 10-17.4-10-1 1.7 17.4 10 1-1.7Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-bag::before    { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3v14H4V7h3Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3v14H4V7h3Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-mute::before   { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9v6h4l5 5V4L8 9H4Zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.49 4.49 0 0 0 2.5-4Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9v6h4l5 5V4L8 9H4Zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.49 4.49 0 0 0 2.5-4Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-plug::before   { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2h2v6h4V2h2v6h2v5a6 6 0 0 1-5 5.92V22h-2v-3.08A6 6 0 0 1 6 13V8h2V2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2h2v6h4V2h2v6h2v5a6 6 0 0 1-5 5.92V22h-2v-3.08A6 6 0 0 1 6 13V8h2V2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* clock — single outline path (ring + hands), not a filled circle */
.icon-clock::before  { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-leaf::before   { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3C11 3 5 8.5 5 16.5V21h2v-4.5C7 10 12 6 19 5c-1 7-5 12-11.5 12H7v2h.5C16 19 21 13 21 3Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3C11 3 5 8.5 5 16.5V21h2v-4.5C7 10 12 6 19 5c-1 7-5 12-11.5 12H7v2h.5C16 19 21 13 21 3Z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* =====================================================================
   TABLET  ≥ 600px
   ===================================================================== */
@media (min-width: 600px) {
  .steps-row { grid-template-columns: repeat(4, 1fr); }

  .place-image img { height: 340px; }
  .setup-image img { height: 320px; }

  .features-card { flex-direction: row; align-items: center; gap: 40px; padding: 56px 40px; }
  .features-product { flex: 0 0 40%; padding: 0; }
  .features-product img { width: 100%; }
  .features-content { flex: 1; }
  .features-list { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   DESKTOP  ≥ 900px
   ===================================================================== */
@media (min-width: 900px) {
  /* Header */
  .header-bottom-nav .wrapper { height: 68px; }
  .site-logo img { height: 40px; }
  .m-menu-btn { display: none !important; }
  .main-nav   { display: flex !important; }
  .main-nav .btn { height: 40px; }

  /* Buttons */
  .primary-btn, .btn { height: 54px; padding: 0 36px; font-size: 15px; }
  .outline-btn        { height: 54px; padding: 0 36px; font-size: 15px; }

  /* Hero — full-bleed, so viewport-based left margin is correct */
  .hero-card { align-items: center; }
  .hero-bg   { object-position: 58% center; }
  .hero-shade {
    background:
      linear-gradient(90deg,
        rgba(5,13,24,.97)  0%,
        rgba(6,15,27,.84) 42%,
        rgba(6,15,27,.14) 72%,
        transparent       100%),
      linear-gradient(180deg, rgba(5,13,24,.12), rgba(5,13,24,.30));
  }
  .hero-copy {
    width: min(580px, 48%);
    margin-left: max(24px, calc((100vw - var(--max)) / 2 + 48px));
    padding: 0;
  }
  .hero-logo { width: 140px; }
  .hero-copy h1 span { display: inline; }
  .hero-copy > p { font-size: 17px; }

  /* How to use — inside 1200px, simple padding */
  .intro-card { padding: 80px 56px 68px; }
  .steps-row  { gap: 24px; }
  .step-card h3 { font-size: 15px; }
  .step-card > p { font-size: 13px; }
  .cool-note { max-width: 100%; }

  /* Overview — text left, image right */
  .place-inner { flex-direction: row; min-height: 500px; }
  .place-copy {
    flex: 0 0 50%; order: 1;
    padding: 72px 48px 64px 56px;   /* simple values, no viewport calc */
    display: flex; flex-direction: column; justify-content: center;
  }
  .place-copy > p { font-size: 16px; }
  .place-image { flex: 0 0 50%; order: 2; }
  .place-image img { height: 100%; min-height: 500px; object-position: center 25%; }

  /* Setup — image left, text right */
  .setup-inner { flex-direction: row; min-height: 500px; }
  .setup-image { flex: 0 0 50%; order: 1; }
  .setup-image img { height: 100%; min-height: 500px; }
  .setup-copy {
    flex: 0 0 50%; order: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 72px 56px 64px 56px;   /* simple values */
  }
  .setup-copy > p { font-size: 16px; }

  /* Features — product left, grid right */
  .features-card { padding: 72px 56px; gap: 64px; align-items: stretch; }
  .features-product {
    flex: 0 0 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 55%, #cce4ff 0%, #deeeff 38%, #f0f7ff 65%, transparent 80%);
    border-radius: var(--r-lg);
    min-height: 460px;
    padding: 0;
  }
  .features-product img {
    width: 92%;
    max-width: 480px;
    margin: 0 auto;
    filter: drop-shadow(0 20px 40px rgba(21,100,200,.28));
  }
  .features-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .features-content h2 { font-size: 32px; margin-bottom: 22px; }
  .features-list { gap: 12px; margin-bottom: 32px; }
  .feature-row { font-size: 14px; padding: 14px; }

  /* FAQ — inside 1200px, simple padding */
  .faq-card { padding: 80px 56px 68px; }
  .accordion { max-width: 820px; }
  .acc-trigger { font-size: 15px; padding: 16px 22px; }
  .acc-body    { font-size: 15px; padding: 0 22px; }
  .acc-item.open .acc-body { padding: 0 22px 18px; }

  /* Final CTA */
  .final-card { min-height: 560px; align-items: center; }
  .final-bg   { object-position: bottom; }

  .final-shade {
    background:
      linear-gradient(90deg, rgba(4,11,20,.05), rgba(4,11,20,.1)),
      linear-gradient(180deg, rgba(4,11,20,.0), rgba(4,11,20,.2));
  }

  .final-product {
    display: block; position: absolute; z-index: 1;
    left: max(20px, calc((100vw - var(--max)) / 2 + 44px));
    bottom: 40px; width: min(380px, 30vw);
  }
  .final-product img {
    width: 100%;
    filter: drop-shadow(0 18px 32px rgba(0,0,0,.42));
  }

  .final-copy {
    width: min(540px, 44%);
    padding: 0;
    margin-left: auto;
    margin-right: max(20px, calc((100vw - var(--max)) / 2 + 44px));
  }

  .final-copy h2    { font-size: clamp(32px, 4vw, 50px); }
  .final-copy > p   { font-size: 17px; }
}

/* =====================================================================
   MOBILE MENU  < 900px
   ===================================================================== */
@media (max-width: 899px) {
  .m-menu-btn { display: inline-flex; position: relative; z-index: 1002; }

  .main-nav {
    display: none;
    position: fixed; inset: 60px 0 0;
    z-index: 1001; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px; background: #fff;
    border-top: 1px solid var(--line);
    overflow-y: auto;
  }

  body.menu-opened .main-nav { display: flex !important; }

  .main-nav-link { padding: 14px 16px; font-size: 16px; text-align: center; }

  .main-nav .btn {
    height: 50px; margin-top: 8px;
    border-radius: var(--r-sm); font-size: 14px;
  }

  /* Full-width buttons on mobile */
  .primary-btn, .outline-btn, .btn { width: 100%; }

  .main-footer .wrapper {
    align-items: center !important;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .main-footer ul {
    text-align: center;
  }

  .copyright-text {
    margin-right: 0;
  }
}