/* ===========================================================
   Lisi — mobile-first single page
   Colors live in :root — change 3 values, whole site rebrands.
   =========================================================== */

:root{
  --bg:        #ffffff;
  --surface:   #f6f6f7;
  --text:      #14161a;
  --muted:     #6b7280;
  --line:      #e5e7eb;
  --accent:    #111827;   /* main button / highlight color */
  --accent-ink:#ffffff;
  --ok:        #16a34a;
  --danger:    #dc2626;
  --radius:    16px;
  --pad:       20px;
  --bar-h:     64px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Georgian",sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
}

/* one narrow column, centered on desktop so it still looks intentional */
body > header,
body > section,
body > footer{
  max-width:520px;
  margin-inline:auto;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2{ line-height:1.2; margin:0 0 10px; letter-spacing:-0.02em; }
h1{ font-size:28px; font-weight:800; }
h2{ font-size:22px; font-weight:750; }

.lead{ color:var(--muted); margin:0 0 16px; }

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--pad);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{ font-weight:800; font-size:19px; letter-spacing:-0.02em; }
.topbar-call{
  text-decoration:none; font-weight:650; font-size:14px;
  padding:8px 14px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
}

/* ---------------- carousel ---------------- */
.carousel-wrap{ position:relative; }

.carousel{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  aspect-ratio:3/2;                /* matches the photo set (landscape) */
  background:var(--surface);
}
.carousel::-webkit-scrollbar{ display:none; }

.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  position:relative;
  height:100%;
}
.slide img{
  width:100%; height:100%;
  object-fit:cover;
}
.slide .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 16px 14px;
  color:#fff; font-size:14px; font-weight:600;
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
}

/* gradient so hero text stays readable over any photo */
.hero-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:56px var(--pad) 26px;
  color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72) 15%,rgba(0,0,0,.25) 60%,transparent);
  pointer-events:none;
}
.hero-overlay h1{ margin:0 0 6px; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.hero-overlay p{ margin:0; font-size:15px; opacity:.92; text-shadow:0 2px 10px rgba(0,0,0,.4); }

.car-nav{
  position:absolute; top:calc(50% - 40px); transform:translateY(-50%);
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff;
  font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  backdrop-filter:blur(4px);
}
.car-nav.prev{ left:8px; }
.car-nav.next{ right:8px; }
.car-nav:active{ background:rgba(0,0,0,.55); }

.dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:6px; justify-content:center;
  pointer-events:none;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:width .2s,background .2s;
}
.dot.on{ width:20px; border-radius:999px; background:#fff; }

.dots.counter{ justify-content:flex-end; right:12px; bottom:auto; top:12px; left:auto; }
.dots.counter span{
  background:rgba(0,0,0,.5); color:#fff;
  font-size:12px; font-weight:650; font-variant-numeric:tabular-nums;
  padding:4px 10px; border-radius:999px;
  backdrop-filter:blur(4px);
}

/* ---------------- quick facts ---------------- */
.facts{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line);
  border-bottom:1px solid var(--line);
}
.fact{
  background:var(--bg);
  padding:14px var(--pad);
}
.fact .ic{ font-size:18px; }
.fact .lb{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.fact .vl{ font-size:15px; font-weight:650; }

/* ---------------- blocks ---------------- */
.block{ padding:26px var(--pad); border-bottom:1px solid var(--line); }
.block:last-of-type{ border-bottom:0; }

/* features */
.features{ display:grid; gap:12px; }
.feature{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface);
  border-radius:var(--radius);
  padding:14px;
}
.feature .ic{ font-size:20px; line-height:1.3; }
.feature h3{ margin:0 0 2px; font-size:15px; font-weight:700; }
.feature p{ margin:0; font-size:14px; color:var(--muted); }

/* pricing */
.plans{ display:grid; gap:12px; }
.plan{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; background:var(--bg);
}
.plan.solo{ border-color:var(--accent); border-width:2px; }
.plan.hot{ border-color:var(--accent); border-width:2px; position:relative; }
.plan.hot::after{
  content:"POPULAR";
  position:absolute; top:-10px; right:14px;
  background:var(--accent); color:var(--accent-ink);
  font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:3px 8px; border-radius:999px;
}
.plan .pname{ font-size:14px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.plan .pprice{ font-size:28px; font-weight:800; letter-spacing:-0.03em; }
.plan .pnote{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.plan ul{ margin:0; padding-left:18px; font-size:14px; color:var(--muted); }

/* videos */
.videos{ display:grid; gap:14px; }
.vid{
  border-radius:var(--radius); overflow:hidden;
  background:#000; aspect-ratio:9/16; position:relative;
}
.vid.wide{ aspect-ratio:16/9; }
.vid video,.vid iframe{ width:100%; height:100%; border:0; display:block; object-fit:cover; }
.vid-title{ font-size:14px; font-weight:600; margin-top:6px; }

/* reviews */
.reviews{ display:grid; gap:12px; }
.review{
  background:var(--surface); border-radius:var(--radius); padding:14px;
}
.review p{ margin:0 0 8px; font-size:15px; }
.review .who{ font-size:13px; color:var(--muted); font-weight:650; }
.review .stars{ color:#f5a623; font-size:13px; letter-spacing:1px; }

/* ---------------- form ---------------- */
.form-block{ background:var(--surface); }

.field{ display:block; margin-bottom:14px; }
.field > span{
  display:block; font-size:13px; font-weight:650; margin-bottom:6px;
}
.field b{ color:var(--danger); }
.field i{ color:var(--muted); font-style:normal; font-weight:500; }

.field input{
  width:100%;
  font-size:16px;              /* 16px stops iOS zoom-on-focus */
  font-family:inherit;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(17,24,39,.10);
}
.field input.bad{ border-color:var(--danger); }

.err{ display:none; font-style:normal; font-size:12.5px; color:var(--danger); margin-top:5px; }
.err.show{ display:block; }

.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

.btn-primary{
  width:100%;
  font-size:16px; font-weight:700; font-family:inherit;
  padding:16px; border:0; border-radius:12px;
  background:var(--accent); color:var(--accent-ink);
  cursor:pointer;
}
.btn-primary:active{ transform:scale(.99); }
.btn-primary[disabled]{ opacity:.6; cursor:default; }

.form-msg{ margin:12px 0 0; font-size:14px; font-weight:600; min-height:20px; }
.form-msg.ok{ color:var(--ok); }
.form-msg.no{ color:var(--danger); }

/* ---------------- footer ---------------- */
footer{
  padding:24px var(--pad) 30px;
  text-align:center; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line);
}
footer .addr{ display:block; margin-bottom:8px; font-weight:600; color:var(--text); text-decoration:none; }

/* ---------------- sticky bottom bar ---------------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
}
.sb-btn{
  flex:1; text-align:center; text-decoration:none;
  font-size:14px; font-weight:700;
  padding:13px 6px; border-radius:12px;
  background:var(--surface); color:var(--text);
  white-space:nowrap;
}
.sb-btn.cta{ background:var(--accent); color:var(--accent-ink); }
.sb-btn:active{ opacity:.8; }

/* ---------------- lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.94);
  display:grid; place-items:center;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; }
.lb-close{
  position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px;
  width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}

/* ---------------- dark mode ---------------- */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d0f12; --surface:#171a1f; --text:#f2f3f5; --muted:#9aa1ab;
    --line:#262b33; --accent:#ffffff; --accent-ink:#0d0f12;
  }
  .topbar{ background:rgba(13,15,18,.86); }
  .sticky-bar{ background:rgba(13,15,18,.94); }
  .field input:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.12); }
}

@media (prefers-reduced-motion:reduce){
  .carousel{ scroll-behavior:auto; }
  *{ transition:none !important; }
}