*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1F2430;
  --muted:#8A8F9C;
  --line:#ECEAF1;
  --cream:#FAF9FC;
  --white:#FFFFFF;
  --coral:#FF6F5E;
  --coral-deep:#E8503E;
  --grad-a:#FF6F5E;
  --grad-b:#FFB84D;
  --grad-c:#6C63FF;
  --dark:#15121F;
  --dark-2:#1E1A2E;
}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:var(--white);font-size:17.5px;line-height:1.6;overflow-x:hidden}
.land{width:100%;max-width:640px;margin:0 auto;position:relative}
h1,h2,h3{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:-0.01em}

/* full-bleed helper: breaks a section out of the 640px container to viewport width */
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.full-bleed > .inner{max-width:640px;margin:0 auto}
.inner-pad{padding-left:1.6rem;padding-right:1.6rem}

/* ===== LANGUAGE SWITCH ===== */
.lang-switch{position:fixed;top:16px;right:16px;z-index:50}
.lang-switch select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:rgba(21,18,31,0.55) no-repeat right 12px center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  backdrop-filter:blur(6px);
  color:#fff;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:20px;
  padding:8px 30px 8px 16px;
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.lang-switch select option{color:#1F2430}

/* ===== HERO — photo slider =====
   ЗАМЕНА НА РЕАЛЬНЫЕ ФОТО: добавьте в .hero-slide.s1 / .s2 / .s3
   свойство background-image: url('путь_к_фото.jpg'); — оно перекроет
   текущий CSS-плейсхолдер (градиент + силуэт крыш). */
.hero{position:relative;padding:3.2rem 1.6rem 4.6rem;text-align:center;overflow:hidden;color:#fff;min-height:620px;display:flex;align-items:center;justify-content:center}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;background-size:cover;background-position:center}
.hero-slide.active{opacity:1}

.hero-slide.s1{
  background-image: url('images/budva.webp');
}

.hero-slide.s2{
  background-image: url('images/kotor.webp');
}

.hero-slide.s3{
  background-image: url('images/herceg.webp');
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(10,12,16,0.45) 0%,
    rgba(10,12,16,0.58) 55%,
    rgba(10,12,16,0.82) 100%
  );
  z-index:1;
}

.hero-content{position:relative;z-index:2;width:100%}
.hero-dots{position:absolute;bottom:18px;left:0;width:100%;display:flex;justify-content:center;gap:7px;z-index:2}
.hero-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.4);transition:background .3s ease, transform .3s ease}
.hero-dots span.active{background:#fff;transform:scale(1.25)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.3);backdrop-filter:blur(6px);color:#FFD9C2;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:7px 16px;border-radius:30px;margin-bottom:1.6rem}

.hero h1{
  font-size:2.3rem;
  color:#fff;
  line-height:1.22;
  margin-bottom:4.5rem;
  text-shadow:0 3px 18px rgba(0,0,0,0.6);
}

.hero h1 .hl{color:var(--grad-b)}

.hero-sub{
  font-size:1.02rem;
  color:#F7F4FF;
  max-width:430px;
  margin:0 auto 2.15rem;
  line-height:1.75;
  font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,0.65);
}

.cta-stack{display:flex;flex-direction:column;align-items:center;gap:12px}
.btn-pill{font-family:'Nunito',sans-serif;border:none;cursor:pointer;border-radius:100px;font-weight:700;font-size:1rem;padding:16px 38px;width:100%;max-width:300px;transition:transform .15s ease, box-shadow .15s ease}
.btn-pill.primary{background:linear-gradient(95deg,var(--grad-a),var(--grad-c));color:#fff;box-shadow:0 10px 24px -8px rgba(255,111,94,0.55)}
.btn-pill.primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(255,111,94,0.6)}
.btn-pill.ghost{background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.35);backdrop-filter:blur(4px)}
.btn-pill.ghost:hover{border-color:#fff}
.price-hint{font-size:17.5px;line-height:1.75;color:#D8D5E0;margin-top:4px}
.hero-lines{position:absolute;bottom:0;left:0;width:100%;height:6px;z-index:2}
.hero-lines span{display:block;width:100%;height:2px;background:var(--coral);opacity:0.7}
.hero-lines span.alt{background:var(--grad-c);opacity:0.5;margin-top:4px}

/* ===== CITY PILLS strip ===== */
.city-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:1.8rem 1.6rem 2.4rem}
.city-chip{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:10px 16px;font-size:13px;font-weight:600;box-shadow:0 8px 24px -12px rgba(31,36,48,0.12)}
.city-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--coral)}

/* ===== PROBLEM ===== */
.section{padding:2.6rem 1.6rem}
.section-label{font-size:15px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:0.7rem;text-align:center}

.section h2{
  font-size:1.9rem;
  text-align:center;
  line-height:1.25;
  margin-bottom:1.2rem;
}

.section-sub{text-align:center;color:var(--muted);font-size:17.5px;line-height:1.75;max-width:420px;margin:0 auto 1.8rem}
.problem-section{background:var(--cream)}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prob-card{background:var(--white);border-radius:26px;padding:1.8rem 1.5rem;border:none;box-shadow:0 14px 28px -16px rgba(31,36,48,0.22);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.prob-card .icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff}
.prob-card .icon svg{width:26px;height:26px}
.prob-card .icon.icon-1{background:linear-gradient(135deg,var(--grad-a),#FF9478)}
.prob-card .icon.icon-2{background:linear-gradient(135deg,var(--grad-c),#9B8CFF)}
.prob-card .icon.icon-3{background:linear-gradient(135deg,var(--grad-b),#FFD37A);color:#3A2A08}
.prob-card .icon.icon-4{background:linear-gradient(135deg,#2BB673,#5CD9A0)}
.prob-card p{font-size:17.5px;line-height:1.75;color:var(--muted)}

/* ===== INSIDE — dark glow section ===== */
.inside-dark{position:relative;background:radial-gradient(120% 90% at 15% 0%, #2C2350 0%, var(--dark-2) 45%, var(--dark) 100%);padding:3rem 1.6rem;overflow:hidden}
.inside-dark::before{content:'';position:absolute;top:-20%;right:-30%;width:70%;height:70%;background:radial-gradient(circle,rgba(255,111,94,0.35),transparent 65%);filter:blur(10px)}
.inside-dark::after{content:'';position:absolute;bottom:-20%;left:-20%;width:60%;height:60%;background:radial-gradient(circle,rgba(108,99,255,0.3),transparent 65%);filter:blur(10px)}
.inside-dark .section-label{color:var(--grad-b)}

.inside-dark h2{
  color:#fff;
  position:relative;
  z-index:1;
  text-align:center;
  max-width:800px;
  margin-bottom:1.2rem;
  margin-left:auto;
  margin-right:auto;
  line-height:1.25;
  font-size:1.9rem;
}

.inside-dark .section-sub{color:#B7B2C9;position:relative;z-index:1}
.inside-list{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;margin-top:1.8rem}
.inside-item{display:flex;align-items:flex-start;gap:13px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:18px;padding:14px 16px;backdrop-filter:blur(6px)}
.inside-dot{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--grad-a),var(--grad-c));flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.inside-item strong{font-size:19px;line-height:1.45;color:#fff;display:block;margin-bottom:2px;font-family:'Quicksand',sans-serif}
.inside-item span{font-size:17.5px;line-height:1.75;color:#A8A3BC}

/* ===== PREVIEW ===== */
.pages-row{display:grid;grid-template-columns:1fr;gap:20px;margin-top:1.6rem}
.preview-card{background:#F3F1F7;border-radius:28px;padding:2.2rem 1.6rem 1.8rem;text-align:center}
.preview-card h3{font-size:19px;line-height:1.35;margin-bottom:0.7rem;color:var(--ink)}
.preview-card p{font-size:15px;line-height:1.65;color:var(--muted);max-width:300px;margin:0 auto 1.8rem}
/*.phone-mock{position:relative;width:220px;margin:0 auto;background:#131217;border-radius:44px;padding:4px;box-shadow:0 22px 40px -18px rgba(15,15,20,0.4),inset 0 0 0 1.5px rgba(255,255,255,0.1),inset 0 1px 1px rgba(255,255,255,0.18)}*/
/*.phone-mock .btn-mute,
.phone-mock .btn-vol,
.phone-mock .btn-power{display:none}*/
/*.phone-mock .screen{position:relative;border-radius:40px;overflow:hidden;background:#000}*/
/*.phone-mock .screen img{width:100%;display:block}*/
/*.phone-mock .dynamic-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:28%;height:10px;background:#0C0B10;border-radius:7px;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,0.04)}*/
.preview-foot{font-size:17.5px;line-height:1.75;color:var(--muted);text-align:center;margin-top:1.2rem}

/* ===== COMPARE ===== */
.compare-wrap{
  background:var(--cream);
  border-radius:24px;
  padding:1.4rem 1rem;
  margin:1.6rem auto 0;
  border:1px solid var(--line);
  max-width:1100px;
}

.cmp-head{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;margin-bottom:6px}
.cmp-head div{font-size:11px;font-weight:700;text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em}
.cmp-head div:first-child{text-align:left}
.cmp-head div.hl{color:var(--coral-deep)}
.cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.cmp-row div{text-align:center;font-size:17.5px;line-height:1.75;color:var(--ink)}
.cmp-row div:first-child{text-align:left;color:var(--muted);font-weight:600}
.cmp-row .yes{color:#2BB673;font-size:16px;font-weight:700}
.cmp-row .no{color:#D1CFD9;font-size:16px}
.cmp-row .price-hl{background:linear-gradient(95deg,var(--grad-a),var(--coral-deep));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* ===== PRICING ===== */

.price-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:1.8rem;
}

.price-card{border-radius:24px;padding:1.5rem;text-align:left;border:1.5px solid var(--line);background:var(--white)}
.price-card.featured{border:none;background:linear-gradient(160deg,#251D40,var(--dark));color:#fff;position:relative;overflow:hidden}
.price-card.featured::before{content:'';position:absolute;top:-30%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,111,94,0.4),transparent 70%)}
.badge-f{display:inline-block;background:linear-gradient(95deg,var(--grad-a),var(--grad-b));color:#1A1208;font-size:10.5px;padding:4px 12px;border-radius:20px;font-weight:800;letter-spacing:0.03em;margin-bottom:10px;position:relative;z-index:1}
.price-card h3{font-size:19px;line-height:1.45;margin-bottom:4px;position:relative;z-index:1}
.price-card .amount-row{display:flex;align-items:baseline;gap:8px;margin:6px 0 12px;position:relative;z-index:1}
.price-card .amount{font-size:2.3rem;font-weight:700;font-family:'Quicksand',sans-serif}
.price-card:not(.featured) .amount{color:var(--coral-deep)}
.price-card .old{font-size:13px;color:var(--muted);text-decoration:line-through}
.price-card.featured .old{color:#A8A3BC}

.price-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
  position:relative;
  z-index:1;
  margin-bottom:28px;
}

.price-card ul li{font-size:17.5px;line-height:1.75;padding-left:22px;position:relative}
.price-card:not(.featured) ul li{color:var(--muted)}
.price-card.featured ul li{color:#D5D1E5}
.price-card ul li::before{content:'✓';position:absolute;left:0;font-weight:800}
.price-card:not(.featured) ul li::before{color:var(--coral-deep)}
.price-card.featured ul li::before{color:var(--grad-b)}

.price-card .btn-pill{
  margin-top:0;
  position:relative;
  z-index:1;
}
.price-card.disabled{background:var(--cream);border-color:var(--line);opacity:0.85}
.price-card.disabled h3{color:var(--muted)}
.price-card.disabled .amount-soon{font-size:1.3rem;font-weight:700;color:var(--muted);font-family:'Quicksand',sans-serif;text-transform:uppercase;letter-spacing:0.04em}
.price-card.disabled ul li{color:#A8ACB5}
.price-card.disabled ul li::before{color:#C7CAD2}
.btn-pill.disabled{background:#EDEAF1;color:#A8ACB5;cursor:not-allowed;box-shadow:none}
.btn-pill.disabled:hover{transform:none}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--line);padding:16px 2px}
.faq-q{font-weight:700;font-size:19px;line-height:1.45;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:'Quicksand',sans-serif}
.faq-q span{color:var(--coral-deep);font-size:26px;font-weight:500;flex-shrink:0;margin-left:12px}
.faq-a{font-size:17.5px;color:var(--muted);line-height:1.75;margin-top:10px;display:none}
.faq-a.open{display:block}

/* ===== FOOTER ===== */
.footer{background:var(--dark);padding:2.2rem 1.6rem;text-align:center}
.footer .brand{font-family:'Quicksand',sans-serif;font-weight:700;color:#fff;font-size:1.1rem;margin-bottom:6px}
.footer .brand span{color:var(--coral)}
.footer p{color:#8A85A0;font-size:12.5px;margin-top:4px}
.footer .quote{margin-top:1.4rem;color:#D5D1E5;font-size:12.5px;font-style:italic;max-width:300px;margin-left:auto;margin-right:auto;line-height:1.6}

/* Заготовка для будущих блоков (пока не используется в HTML) */
.review,
.benefit-card li{font-size:17.5px;line-height:1.75}
.benefit-card h3{font-size:19px;line-height:1.45}

@media (min-width:900px){

  .pricing-section{
    width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    padding-left:2rem;
    padding-right:2rem;
  }

  .pricing-section > .section-label,
  .pricing-section > h2,
  .pricing-section > .price-cards{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
  }

  .price-cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    align-items:stretch;
  }

  .price-card{
    height:100%;
    display:flex;
    flex-direction:column;
  }

  .price-card .btn-pill{
    margin-top:auto;
  }

  .price-card.disabled{
    grid-column:1 / -1;
    max-width:360px;
    justify-self:center;
  }

  .compare-section{
    width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    padding-left:2rem;
    padding-right:2rem;
  }

  .compare-section > .section-label,
  .compare-section > h2,
  .compare-section > .compare-wrap{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
  }

  .faq-section{
    width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    padding-left:2rem;
    padding-right:2rem;
  }

  .faq-section > .section-label,
  .faq-section > h2,
  .faq-section > div{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
  }

  .problem-section > .inner{
    max-width:1100px;
    padding-left:2rem;
    padding-right:2rem;
  }

  .problem-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }

  .preview-section{
    width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    padding-left:2rem;
    padding-right:2rem;
  }

  .preview-section > .section-label,
  .preview-section > h2,
  .preview-section > .pages-row,
  .preview-section > .preview-foot{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
  }

  .pages-row{
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
}

@media (max-width:640px){
  .section{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .inner-pad{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .city-strip{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .compare-section{
    padding-left:.3rem;
    padding-right:.3rem;
  }

  .compare-wrap{
    padding-left:.3rem;
    padding-right:.3rem;
  }
}