/* ==========================================================================
   SingSpace — landing page stylesheet
   Design tokens defined once, everything derives from them.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --mist:#F4F8FC;
  --mist-2:#EAF2FB;
  --sky:#2F86D6;
  --sky-light:#6FB1E8;
  --sky-deep:#0B4B8C;
  --sun:#FFD400;
  --sun-deep:#E6A800;
  --ink:#10151F;
  --slate:#5B6472;
  --slate-light:#8892A0;
  --line:#E4EBF3;
  --success:#1F9D6B;
  --radius-s:12px;
  --radius-m:20px;
  --radius-l:32px;
  --shadow-soft:0 1px 2px rgba(16,21,31,.04), 0 12px 32px -12px rgba(16,21,31,.12);
  --shadow-deep:0 4px 8px rgba(16,21,31,.05), 0 28px 60px -20px rgba(16,21,31,.22);
  --shadow-cta:0 10px 24px -8px rgba(230,168,0,.55);
  --container:1180px;
  --font-display:'Golos Text', 'Manrope', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.08;letter-spacing:-.01em;}
p{margin:0 0 1em;color:var(--slate);}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.section--tint{background:var(--mist);}
@media (max-width:780px){.section{padding:64px 0;}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sky-deep);background:var(--mist-2);border:1px solid var(--line);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(255,212,0,.25);}

.section-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px);}
.section-head p{font-size:17px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  padding:17px 30px;border-radius:999px;border:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn--cta{
  background:linear-gradient(180deg,#FFDE33,var(--sun));
  color:var(--sky-deep);
  box-shadow:var(--shadow-cta);
}
.btn--cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(230,168,0,.65);}
.btn--cta:active{transform:translateY(0);}
.btn--ghost{
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line);
}
.btn--ghost:hover{border-color:var(--sky-light);}
.btn--block{width:100%;}
.btn--lg{padding:20px 34px;font-size:17.5px;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:19px;}
.brand__mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--sky-light),var(--sky-deep));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand__mark svg{width:18px;height:18px;}
.topbar__meta{display:flex;align-items:center;gap:22px;}
.topbar__rating{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--slate);}
.topbar__rating strong{color:var(--ink);}
.stars{color:var(--sun-deep);letter-spacing:1px;font-size:14px;}
@media (max-width:640px){ .topbar__rating{display:none;} .btn--lg{padding:14px 20px;font-size:15px;} }

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 90px;}
.hero__ornament{position:absolute;top:0;right:0;width:260px;opacity:.9;pointer-events:none;}
.hero .container{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
@media (max-width:960px){ .hero .container{grid-template-columns:1fr;gap:40px;text-align:center;} .hero__ornament{width:150px;} }

.hero h1{font-size:clamp(32px,4.4vw,54px);}
.hero h1 .hl{color:var(--sky-deep);position:relative;white-space:nowrap;}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;background:var(--sun);z-index:-1;opacity:.55;border-radius:3px;}
.hero__sub{font-size:18px;max-width:480px;}
@media (max-width:960px){ .hero__sub{margin-left:auto;margin-right:auto;} }

.hero__cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:28px 0 22px;}
@media (max-width:960px){ .hero__cta-row{justify-content:center;} }
.hero__price{font-family:var(--font-mono);}
.hero__price .old{color:var(--slate-light);text-decoration:line-through;font-size:15px;margin-right:8px;}
.hero__price .new{color:var(--sky-deep);font-weight:700;font-size:22px;}

.trust-row{display:flex;align-items:center;gap:14px;color:var(--slate);font-size:14.5px;flex-wrap:wrap;}
@media (max-width:960px){ .trust-row{justify-content:center;} }
.trust-row .stars{font-size:16px;}

.hero__art{position:relative;}
.hero__art img{
  border-radius:var(--radius-l);box-shadow:var(--shadow-deep);
  width:100%;aspect-ratio:1/1;object-fit:cover;
}
.hero__badge{
  position:absolute;top:20px;left:20px;
  background:var(--paper);border-radius:999px;padding:9px 16px;
  box-shadow:var(--shadow-soft);font-family:var(--font-mono);font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.hero__badge span.dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(31,157,107,.2);}

.timer-card{
  position:absolute;left:-18px;bottom:-22px;
  background:var(--ink);color:#fff;border-radius:var(--radius-m);
  padding:18px 22px;box-shadow:var(--shadow-deep);
  min-width:280px;
}
@media (max-width:960px){ .timer-card{position:static;margin:26px auto 0;} }
.timer-card__label{font-size:12.5px;color:#B9C2CF;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.timer-card__clock{display:flex;gap:8px;font-family:var(--font-mono);}
.timer-card__clock .seg{background:rgba(255,255,255,.08);border-radius:8px;padding:8px 10px;font-size:22px;font-weight:700;min-width:44px;text-align:center;}
.timer-card__clock .sep{align-self:center;color:#5B6472;font-weight:700;}

/* ---------- ornament divider (signature) ---------- */
.ornament-divider{display:flex;justify-content:center;padding:6px 0 0;}
.ornament-divider svg{width:min(560px,90%);height:16px;}

/* ---------- benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:960px){ .benefits{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .benefits{grid-template-columns:1fr;} }
.benefit{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:26px 22px;transition:transform .2s ease, box-shadow .2s ease;
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.benefit__icon{
  width:48px;height:48px;border-radius:14px;background:var(--mist-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--sky-deep);
}
.benefit__icon svg{width:24px;height:24px;}
.benefit h3{font-size:17px;margin-bottom:6px;}
.benefit p{font-size:14.5px;margin:0;}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:560px;}
.gallery a{border-radius:var(--radius-m);overflow:hidden;position:relative;box-shadow:var(--shadow-soft);display:block;}
.gallery a:first-child{grid-row:1/3;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery a:hover img{transform:scale(1.06);}
.gallery a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,21,31,.35),transparent 45%);opacity:0;transition:opacity .25s ease;}
.gallery a:hover::after{opacity:1;}
.gallery__zoom{
  position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(4px);transition:all .2s ease;
}
.gallery a:hover .gallery__zoom{opacity:1;transform:translateY(0);}
@media (max-width:860px){
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,220px);height:auto;}
  .gallery a:first-child{grid-column:1/3;grid-row:1/2;}
}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,13,20,.92);z-index:200;display:none;align-items:center;justify-content:center;padding:30px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:min(900px,92vw);max-height:86vh;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lightbox__close{position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:20px;display:flex;align-items:center;justify-content:center;}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:20px;display:flex;align-items:center;justify-content:center;}
.lightbox__nav--prev{left:24px;} .lightbox__nav--next{right:24px;}

/* ---------- specs ---------- */
.specs-card{
  background:var(--paper);border-radius:var(--radius-l);box-shadow:var(--shadow-soft);
  padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:36px 56px;
}
@media (max-width:760px){ .specs-card{grid-template-columns:1fr;padding:30px 22px;} }
.spec-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px dashed var(--line);gap:16px;}
.spec-row:last-child{border-bottom:none;}
.spec-row__k{color:var(--slate);font-size:15px;}
.spec-row__v{font-family:var(--font-mono);font-weight:700;text-align:right;}

/* ---------- karaoke section ---------- */
.karaoke{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:900px){ .karaoke{grid-template-columns:1fr;} }
.karaoke__img{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-deep);}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.chip{
  background:var(--mist-2);border:1px solid var(--line);color:var(--sky-deep);
  font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;
}

/* ---------- reviews ---------- */
.reviews-track{display:flex;gap:20px;overflow-x:auto;padding:6px 4px 20px;scroll-snap-type:x proximity;}
.reviews-track::-webkit-scrollbar{height:6px;}
.reviews-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.review-card{
  flex:0 0 320px;scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:24px;box-shadow:var(--shadow-soft);
}
.review-card__head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.avatar{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;flex-shrink:0;
}
.review-card__name{font-weight:700;font-size:15px;}
.review-card__meta{font-size:12.5px;color:var(--slate-light);}
.review-card p{font-size:14.5px;margin:0;color:var(--ink);opacity:.85;}
.review-card .stars{display:block;margin-bottom:8px;}

/* ---------- delivery / guarantee ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:860px){ .info-grid{grid-template-columns:1fr;} }
.info-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:30px;
}
.info-card__icon{width:44px;height:44px;border-radius:12px;background:var(--mist-2);display:flex;align-items:center;justify-content:center;color:var(--sky-deep);margin-bottom:14px;}
.info-card ul{margin:0;padding:0;list-style:none;}
.info-card li{display:flex;gap:10px;padding:6px 0;font-size:14.5px;color:var(--slate);}
.info-card li svg{flex-shrink:0;color:var(--success);width:16px;height:16px;margin-top:3px;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item__q{
  width:100%;text-align:left;background:none;border:none;padding:22px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--ink);
}
.faq-item__q .plus{width:26px;height:26px;border-radius:50%;background:var(--mist-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .25s ease;color:var(--sky-deep);}
.faq-item[open] .faq-item__q .plus{transform:rotate(45deg);}
.faq-item__a{padding:0 4px 22px;color:var(--slate);font-size:15px;}
summary{cursor:pointer;list-style:none;}
summary::-webkit-details-marker{display:none;}

/* ---------- order form ---------- */
.order{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
@media (max-width:900px){ .order{grid-template-columns:1fr;} }
.order-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:36px;box-shadow:var(--shadow-soft);
}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--ink);}
.field input,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius-s);
  padding:14px 16px;font-family:var(--font-body);font-size:15.5px;color:var(--ink);
  background:var(--mist);transition:border-color .15s ease, background .15s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sky);background:var(--paper);}
.field textarea{resize:vertical;min-height:90px;}
.field--hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;}
.form-note{font-size:12.5px;color:var(--slate-light);margin-top:14px;text-align:center;}
.form-msg{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius-s);font-size:14.5px;}
.form-msg.ok{display:block;background:#EAFBF3;color:#0E7A50;border:1px solid #BFEEDA;}
.form-msg.err{display:block;background:#FEEEEE;color:#B0281F;border:1px solid #F6CBC8;}

.order-summary{
  background:var(--sky-deep);color:#fff;border-radius:var(--radius-l);padding:34px;
  position:sticky;top:96px;
}
.order-summary h3{color:#fff;font-size:20px;}
.order-summary__list{list-style:none;padding:0;margin:18px 0;}
.order-summary__list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px;color:#DCEBFB;}
.order-summary__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);}
.order-summary__total .amount{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--sun);}
.order-summary__badges{display:flex;flex-direction:column;gap:10px;margin-top:22px;font-size:13.5px;color:#DCEBFB;}
.order-summary__badges span{display:flex;align-items:center;gap:8px;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#AAB3C0;padding:56px 0 28px;font-size:13.5px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{color:#fff;font-size:14px;margin-bottom:14px;font-family:var(--font-display);}
.footer-grid p, .footer-grid li{color:#8892A0;margin:0 0 8px;}
.footer-grid ul{list-style:none;padding:0;}
.footer-grid ul a:hover{color:#fff;}
.footer-fill{color:#5B6472;font-style:italic;}
.footer-bottom{border-top:1px solid #232A38;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#5B6472;}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:12px 16px;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -10px 24px rgba(16,21,31,.08);
}
.sticky-cta__price{font-family:var(--font-mono);font-weight:700;font-size:16px;}
.sticky-cta__price .old{color:var(--slate-light);text-decoration:line-through;font-size:12.5px;font-weight:500;margin-right:6px;}
@media (max-width:780px){ .sticky-cta{display:flex;} }

/* ---------- misc ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:999;}
.skip-link:focus{left:0;}