:root{
  --bg:#0b1220;
  --text:#e6f0ff;
  --muted:#cfe0ff;
  --surface:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --accent:#ff6b6b;
  --accent2:#38bdf8;
  --accent3:#a78bfa;
  --ok:#22c55e;
  --warn:#f59e0b;
  --radius:20px;
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --max:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,.25), transparent 60%),
    radial-gradient(1000px 500px at 120% 0%, rgba(167,139,250,.28), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(255,107,107,.25), transparent 60%),
    #0b1220;
  font: 17px/1.65 ui-sans-serif, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,"Apple Color Emoji","Segoe UI Emoji";
  position:relative;
}
/* subtle grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.12;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAl0lEQVQoz4WSwQ3CMBREv77C0oJQm0OAnQ4gkz2JYw0G0c5Ck8Cwq9l4mJc1V0mB+f7k3Q1q1q8m1y5vQ5VQq0mJt3n4mQxvQ3i2Q9c5mH8dWc4gkq2k0Y3w1Qf1L3k0zvL6Q3V2mJ3v2j3F8qkFz1sYx3Jqf1m8c2m1H3mJ8f9oH7D0f3v1Qh5i7kJpKqJr2gGm3yKQ5J2kqgqgGkGgA3J6q+0Lw3e3gGQ2wMfhwS3fC0GAAAAAElFTkSuQmCC);
  background-size:256px 256px;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;border-radius:14px}
button{font:inherit}

.container{max-width:var(--max);margin-inline:auto;padding:0 22px; position:relative; z-index:1}
.section{padding:84px 0}
.section--tight{padding:50px 0}

.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.65));
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border)
}
.header__row{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.3px}
.brand__logo{
  width:36px; height:36px;
  border-radius:50%;
  background: center/cover no-repeat url('../img/logo_custom.jpg');
  background-color: rgba(255,255,255,0.06);
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 8px 30px rgba(56,189,248,.35);
}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{opacity:.95;padding:10px 12px;border-radius:12px}
.nav a:hover{background:rgba(255,255,255,.06);opacity:1}

.hero{display:grid;gap:32px;grid-template-columns: 1.05fr .95fr;align-items:center;}
.hero h1{font-size:clamp(32px,4.8vw,56px);line-height:1.1;margin:0 0 12px}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.20), rgba(167,139,250,.20));
  color:#bfe6ff;font-weight:800}

.hero__card,.card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)
}

.cta{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#00121f;font-weight:900;border:0;cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,255,255,.15) inset, 0 10px 30px rgba(56,189,248,.4), 0 4px 14px rgba(255,107,107,.35);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease}
.cta:hover{filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 0 0 2px rgba(255,255,255,.2) inset, 0 18px 48px rgba(56,189,248,.5), 0 10px 24px rgba(255,107,107,.45)}
.cta--ghost{background:linear-gradient(135deg, rgba(167,139,250,.22), rgba(56,189,248,.22));
  color:var(--text); box-shadow:0 0 0 2px rgba(255,255,255,.18) inset}

.grid{display:grid;gap:20px;align-items:stretch}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.hero{grid-template-columns:1fr}.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(90deg, rgba(56,189,248,.16), rgba(167,139,250,.16));
  color:#cfe6ff}
.badge--ok{color:#86efac;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.15)}
.badge--warn{color:#fde68a;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.15)}

.status{font-weight:900}
.status--ok{color:#86efac}
.status--busy{color:#c4b5fd}

blockquote{margin:0;padding:16px;border-left:4px solid rgba(167,139,250,.55);background:rgba(255,255,255,.06);border-radius:12px}
.quote__name{opacity:.85;margin-top:6px;font-size:14px}

.footer{padding:36px 0;border-top:1px solid var(--border);opacity:.9;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00))}

.small{font-size:13px;opacity:.85}
.muted{color:#c9ddff}
.center{text-align:center}

.video{
  position:relative; width:100%; aspect-ratio:16/9;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(167,139,250,.18));
  border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
}
.video video{position:absolute; inset:0; width:100%; height:100%; display:block}

.reveal{opacity:1; transform:none}

.reveal.in{opacity:1; transform:none}

.member-card{display:flex;flex-direction:column;gap:10px}
.member-meta{display:grid;gap:6px}
.member-place{font-weight:900;letter-spacing:.3px}
.member-tariff{font-size:14px;opacity:.85}
.member-name{font-size:18px;font-weight:800}
.member-city{opacity:.9}


/* --- Video overlay poster with big play button --- */
.video .video-overlay{
  position:absolute; inset:0; border:0; cursor:pointer;
  background: center / cover no-repeat url('../../img/prevideo.png');
  display:grid; place-items:center;
}
.video .video-overlay .play{
  width:86px; height:86px; border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.18) inset;
  position:relative;
}
.video .video-overlay .play::after{
  content:""; position:absolute; left:34px; top:24px;
  border-style:solid; border-width:18px 0 18px 28px; border-color:transparent transparent transparent #ff4d4d;
}
.video video{position:absolute; inset:0; width:100%; height:100%}


/* --- Clickfix v2 --- */
.video{position:relative}
.video video{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.video.playing video{pointer-events:auto}
.video .video-overlay{position:absolute; inset:0; z-index:3; cursor:pointer; display:grid; place-items:center; background:center/cover no-repeat url('../../img/prevideo.png')}
.video .video-overlay .play{width:86px; height:86px; border-radius:999px; background:rgba(255,255,255,.92); box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.18) inset; position:relative}
.video .video-overlay .play::after{content:""; position:absolute; left:34px; top:24px; border-style:solid; border-width:18px 0 18px 28px; border-color:transparent transparent transparent #ff4d4d}
.video .video-overlay .msg{margin-top:12px; font-weight:700; color:#ffd1d1; text-shadow:0 1px 2px rgba(0,0,0,.5)}


/* === Mobile Header Toggle === */
.menu-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:10px 14px;
  border-radius:var(--radius);
  cursor:pointer;
}
@media (max-width: 820px){
  .header__row{ gap:10px; flex-wrap:wrap; }
  .menu-toggle{ display:inline-flex; align-items:center; }
  .nav{ display:none; width:100%; flex-wrap:wrap; gap:8px; }
  .nav.is-open{ display:flex; }
  .nav a{ display:block; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
}

/* === Badge wrap fix (mobile) === */
.badge{
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
@media (max-width: 480px){
  .badge{ font-size:14px; line-height:1.35; padding-right:8px; padding-left:8px; }
}


@media (max-width: 768px) {
  nav {
    display: none;
  }
  nav.open {
    display: block;
  }
  .menu-toggle {
    display: block;
    background: #2d7a2d;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
  }
  .review-form .form-row {
    flex-direction: column;
  }
  .review-form .form-row > * {
    width: 100%;
  }
}
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}


/* === Mobile menu button & nav collapse === */
.menu-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:10px 14px;
  border-radius:var(--radius);
  cursor:pointer;
}
@media (max-width: 820px){
  .header__row{ gap:10px; flex-wrap:wrap; }
  .menu-toggle{ display:inline-flex; align-items:center; }
  .nav{ display:none; width:100%; flex-wrap:wrap; gap:8px; }
  .nav.open{ display:flex; }
  .nav a{ display:block; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
}

/* === Reviews form responsive === */
@media (max-width: 768px){
  #comment-form > div{
    display:grid !important;
    grid-template-columns: 1fr !important;
  }
  #comment-form input, #comment-form textarea{
    width: 100% !important;
  }
}


/* === Modal styles for comment thank-you === */
.modal-backdrop[hidden]{ display:none !important; }
.modal-backdrop{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,.5);
  padding: 20px;
}
.modal{
  max-width: 520px; width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  color: var(--text);
  text-align: center;
}
.modal h4{ margin: 0 0 10px; font-size: 22px; }
.modal p{ margin: 0 0 16px; color: var(--muted); }
.modal .cta{ width: 100%; }


/* === Circular logo image === */
header img[src*="logo_custom.jpg"]{
  border-radius: 50%;
  object-fit: cover;
}


/* === 2026 reviews, modal videos, and chat actions === */
.reviews-section{position:relative;overflow:hidden}
.reviews-section::before{content:"";position:absolute;width:520px;height:520px;right:-220px;top:80px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.16),transparent 68%);pointer-events:none}
.reviews-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.reviews-head h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:14px 0 8px}
.reviews-head p{margin:0;max-width:720px}
.reviews-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.reviews-chat-link{flex:none}
.video-reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.video-review-card{overflow:hidden;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.video-review-card:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.38);box-shadow:0 22px 54px rgba(0,0,0,.4)}
.video-review-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.video-review-media{position:relative;aspect-ratio:16/9;background:#050a12;overflow:hidden}
.video-review-media img{width:100%;height:100%;display:block;object-fit:cover;background:#050a12}
.video-review-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:rgba(4,10,20,.58);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);font-size:28px;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:transform .18s ease,background .18s ease}
.video-review-card:hover .video-review-play,.video-review-trigger:focus-visible .video-review-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(56,189,248,.22)}
.video-review-duration{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(4,10,20,.72);backdrop-filter:blur(10px);font-size:12px;font-weight:800;letter-spacing:.02em;pointer-events:none}
.video-review-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px}
.video-review-copy strong{font-size:18px}
.video-review-copy span{font-size:13px;color:var(--muted);text-align:right}
.text-reviews{margin-top:34px}
.text-reviews h3{font-size:clamp(24px,3vw,34px);margin:0 0 16px}
.reviews-community{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.reviews-community h3{margin:10px 0 8px;font-size:clamp(22px,3vw,30px)}
.reviews-community p{margin:0;max-width:760px}
.reviews-community__actions{display:flex;gap:12px;flex-wrap:wrap}
.modal--video{max-width:min(960px,100%);padding:0;overflow:hidden;text-align:left}
.review-modal__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--border)}
.review-modal__top h4{margin:0;font-size:clamp(20px,3vw,28px)}
.review-modal__close{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text);font-size:28px;line-height:1;cursor:pointer}
.review-modal__body{background:#02070d}
.review-modal__body video{width:100%;max-height:min(78vh,720px);display:block;background:#000}

@media (max-width:820px){
  .reviews-head{align-items:flex-start;flex-direction:column}
  .reviews-actions{width:100%;justify-content:flex-start}
  .reviews-chat-link{width:100%;justify-content:center}
  .video-reviews-grid{grid-template-columns:1fr}
  .reviews-community{align-items:flex-start}
  .reviews-community__actions{width:100%}
  .reviews-community__actions .cta{width:100%;justify-content:center}
  .section{padding:62px 0}
}
@media (max-width:560px){
  body{font-size:16px;padding-bottom:76px}
  .container{padding-inline:16px}
  .hero__card,.card{padding:18px;border-radius:18px}
  .reviews-actions,.reviews-community__actions{width:100%}
  .reviews-actions .cta,.reviews-community__actions .cta{width:100%;justify-content:center}
  .video-review-copy{padding:13px 14px}
  .video-review-copy span{display:none}
  .video-review-play{width:62px;height:62px;font-size:24px}
  .review-modal__top{padding:14px 14px 12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.video-review-card,.video-review-play{transition:none}}


/* Review form restoration */
.review-form-card{margin-top:24px}
.review-form-card h3{margin:0 0 8px;font-size:clamp(22px,3vw,30px)}
.review-form{margin-top:16px}
.review-form .form-row{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,2fr);gap:12px}
.review-form input,.review-form textarea{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text);font:inherit;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.review-form textarea{resize:vertical;min-height:110px}
.review-form input:focus,.review-form textarea:focus{border-color:rgba(56,189,248,.65);box-shadow:0 0 0 3px rgba(56,189,248,.12);background:rgba(255,255,255,.05)}
.review-form__actions{margin-top:12px;display:flex;justify-content:flex-start}
@media(max-width:700px){.review-form .form-row{grid-template-columns:1fr}.review-form__actions .cta{width:100%;justify-content:center}}