: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;
}