/* ============================================================
   PDP SECUR — Landing page "Встановлення відеонагляду у Львові"
   Mobile-first. Zero dependencies. Brand palette from pdp.com.ua
   ============================================================ */

:root{
  /* ------------------------------------------------------------
     ТЕМНА ТЕМА + РЕБРЕНДИНГ під рекламні креативи PDP SECUR:
     глибокий navy-градієнт, яскраво-синій акцент, синє «світіння».
     Помаранчевий CTA прибрано — головна кнопка тепер біла «пігулка»
     з синім текстом і стрілкою, як у креативах.
     Палітра тримає WCAG AA: --text/--text-soft/--muted та
     --blue-bright дають ≥4.5:1 на --surface і --bg-*.
     ------------------------------------------------------------ */

  /* Brand blue */
  --blue:        #1E7FF5;   /* суцільні заливки, активні стани */
  --blue-bright: #4DA2FF;   /* текст/іконки на темному (контраст ≥4.5:1) */
  --blue-dark:   #1567D6;
  --blue-glow:   rgba(30,127,245,.35);

  /* Поверхні: глибокий navy від фону сторінки до карток */
  --bg:          #060B15;   /* фон сторінки — темний navy-black */
  --bg-soft:     #0A1120;   /* альтернуючі секції */
  --bg-tint:     #08172E;   /* секція з синім відтінком */
  --surface:     #0F1B30;   /* картки, інпути, хедер, форми */
  --surface-2:   #16263F;   /* hover-стан над --surface */
  --ink:         #03060D;   /* найглибші блоки-акценти: hero, quiz */

  --line:        rgba(120,170,255,.14);

  /* Текст */
  --text:        #F2F6FC;
  --text-soft:   #B9C6D8;
  --muted:       #7E8CA3;

  /* Раніше помаранчевий CTA. Лишаємо токени, щоб нічого не зламати,
     але вказуємо на синій — усі старі .btn--primary тепер сині/білі. */
  --accent:      #1E7FF5;
  --accent-dark: #1567D6;
  --ok:          #12B981;
  --star:        #FDB022;
  --error:       #F97066;
  --success-bg:    #0C2A22;
  --success-line:  #1B5E4A;
  --success-text:  #5FE3B0;

  --radius:   14px;
  --radius-s: 10px;
  --radius-pill: 999px;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(120,170,255,.08);
  --shadow-blue: 0 0 0 6px rgba(30,127,245,.12), 0 14px 36px rgba(2,10,25,.6);

  --wrap: 1180px;
  --pad: 20px;

  --f-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body{
  margin:0; color:var(--text);
  font-family:var(--f-sans); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 620px at 78% -6%, rgba(30,127,245,.16), transparent 62%),
    radial-gradient(900px 700px at 10% 12%, rgba(21,103,214,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  /* room for the mobile sticky CTA bar */
  padding-bottom:env(safe-area-inset-bottom);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue-bright); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--blue-bright); color:#fff; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.14; font-weight:800; font-family:var(--f-sans); }
h1,h2{ text-transform:uppercase; letter-spacing:-.01em; font-weight:900; }
h1{ font-size:clamp(30px, 6.4vw, 56px); }
h2{ font-size:clamp(25px, 4.8vw, 42px); }
h3{ font-size:clamp(18px, 2.6vw, 22px); font-weight:700; letter-spacing:-.01em; }
/* Синій «другий рядок» у великих заголовках — як у креативах */
h1 .hl, h2 .hl{ color:var(--blue-bright); }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(17px,2.2vw,20px); color:var(--text-soft); }
small,.small{ font-size:14px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding:56px 0; position:relative; }
.section--soft{ background:var(--bg-soft); }
.section--tint{
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(30,127,245,.14), transparent 62%),
    var(--bg-tint);
}
@media(min-width:900px){ .section{ padding:84px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-bright); margin-bottom:12px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--blue-bright); border-radius:2px;
}
.section-head{ max-width:760px; margin-bottom:28px; }
.section-head p{ color:var(--text-soft); margin-bottom:0; }

/* ---------- Buttons — «пігулки» у стилі креативів ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:15px 30px; border-radius:var(--radius-pill);
  font-weight:800; font-size:15.5px; text-align:center; cursor:pointer;
  text-transform:uppercase; letter-spacing:.045em;
  border:2px solid transparent; transition:transform .12s, background .15s, box-shadow .15s, color .15s;
  text-decoration:none!important; width:100%;
}
@media(min-width:600px){ .btn{ width:auto; } }
.btn:active{ transform:translateY(1px); }

/* Головна: біла пігулка, синій текст, стрілка */
.btn--primary{ background:#fff; color:var(--blue-dark); border-color:#fff; box-shadow:var(--shadow-blue); }
.btn--primary:hover{ background:#E9F2FF; color:var(--blue-dark); }
.btn--primary::after{ content:"→"; font-size:18px; font-weight:700; line-height:1; margin-left:2px; }

/* Вторинна: прозора з синім контуром */
.btn--secondary{ background:rgba(30,127,245,.10); color:var(--blue-bright); border-color:rgba(77,162,255,.5); }
.btn--secondary:hover{ background:rgba(30,127,245,.18); border-color:var(--blue-bright); }

/* Світла привид-кнопка (телефон у hero / фінал) */
.btn--ghost-light{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.14); }

/* Суцільна синя */
.btn--blue{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 12px 30px rgba(30,127,245,.28); }
.btn--blue:hover{ background:var(--blue-dark); border-color:var(--blue-dark); }

/* opt-out стрілки, де вона зайва */
.btn--noarrow::after{ content:none; }

.btn-row{ display:flex; flex-direction:column; gap:12px; }
@media(min-width:600px){ .btn-row{ flex-direction:row; flex-wrap:wrap; } }

/* ---------- Header ---------- */
.hdr{
  position:absolute; top:0; left:0; right:0; z-index:60;
  background:transparent; border:0;
}
.hdr__bar{
  display:flex; align-items:center; gap:16px; min-height:74px;
  max-width:none; padding-inline:clamp(22px, 3.2vw, 58px);
}
/* Логотип у білому виконанні — реальний файл (не CSS-фільтр), як у креативах */
.hdr__logo{
  display:flex; align-items:center; flex-shrink:0;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.42));
}
.hdr__logo img{ height:51px; width:auto; }
.hdr__nav{ display:none; gap:22px; }
.hdr__nav a{
  color:#C7D2E2; font-weight:650; font-size:15px; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.06), 0 7px 16px rgba(0,0,0,.62);
  transform:translateY(0); transition:color .18s ease, transform .18s ease, text-shadow .18s ease;
}
.hdr__nav a:hover{
  color:#fff; text-decoration:none; transform:translateY(-2px);
  text-shadow:0 1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(30,127,245,.30);
}
.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.hdr__phone{
  font-weight:800; font-size:16px; color:var(--text); white-space:nowrap;
  text-shadow:0 5px 14px rgba(0,0,0,.58);
}
.hdr__phone span{ display:block; font-size:11px; font-weight:600; color:var(--muted); }
.hdr__phone-icon{ display:none; }
.hdr .btn{
  min-height:42px; padding:9px 20px; font-size:12.5px; letter-spacing:.05em;
  display:none; white-space:nowrap; box-shadow:none; gap:7px;
}
.hdr .btn--primary::after{ font-size:15px; }
@media(min-width:820px){
  .hdr .btn{ display:inline-flex; }
}
@media(min-width:1400px){
  .hdr__bar{ display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(380px,1fr); }
  .hdr__nav{ display:flex; justify-self:center; }
  .hdr__right{ margin-left:0; justify-self:end; }
}
@media(max-width:819px){ .hdr__phone{ font-size:15px; } }
@media(max-width:430px){
  .hdr__bar{ gap:10px; padding-inline:16px; }
}
@media(max-width:359px){
  .hdr__bar{ min-height:68px; }
  .hdr__logo img{ height:44px; }
  .hdr__phone{
    display:grid; place-items:center; width:44px; min-height:44px;
    font-size:0; border:1px solid rgba(77,162,255,.5); border-radius:50%;
    background:rgba(30,127,245,.12); color:#fff;
  }
  .hdr__phone span{ display:none; }
  .hdr__phone-icon{ display:block; }
}

/* ---------- Hero — контент ліворуч, AI-робот праворуч ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:4;
  left:0; right:0; bottom:0; height:clamp(170px, 14vw, 220px);
  background:linear-gradient(to bottom,
    rgba(8,23,46,0) 0%,
    rgba(8,23,46,.06) 30%,
    rgba(8,23,46,.42) 68%,
    var(--bg-tint) 100%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 520px at 82% 4%, rgba(30,127,245,.10), transparent 60%),
    radial-gradient(680px 480px at 8% 88%, rgba(21,103,214,.20), transparent 62%);
}
.hero__grid{ position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr); padding-block:118px 0; }
.hero__grid > *{ min-width:0; }
.hero__content{ position:relative; z-index:4; max-width:820px; padding-bottom:48px; }
.hero__visual{
  --robot-w:clamp(420px, 94vw, 610px);
  --robot-left:50%;
  --robot-right:auto;
  --robot-shift:translateX(-50%);
  position:relative; z-index:2; align-self:end; justify-self:center;
  width:100%; height:calc(var(--robot-w) * 1328 / 1184);
  margin-top:0; pointer-events:none;
}
.hero__robot-halo{
  position:absolute; z-index:0;
  left:var(--robot-left); right:var(--robot-right); top:0;
  width:var(--robot-w); height:100%; transform:var(--robot-shift);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  background:
    radial-gradient(ellipse 38% 43% at 50% 35%, rgba(30,127,245,.72), rgba(15,83,225,.38) 60%, transparent 100%),
    radial-gradient(ellipse 70% 68% at 50% 40%, rgba(2,5,12,.86) 40%, rgba(2,5,12,.52) 70%, transparent 100%);
}
.hero__robot{
  position:absolute; z-index:1;
  left:var(--robot-left); right:var(--robot-right); bottom:0;
  width:var(--robot-w); max-width:none; height:auto;
  transform:var(--robot-shift);
  transform-origin:center bottom;
}
@media(min-width:1320px){
  .hero{ --hero-robot-width:clamp(700px, 52vw, 840px); }
  .hero::before{
    z-index:2; top:calc(150px + var(--hero-robot-width) * 1328 / 1184 * .78);
    height:auto; bottom:0;
    background:linear-gradient(to bottom, rgba(8,23,46,0), var(--bg-tint) 180px);
  }
  .hero__grid{
    grid-template-columns:minmax(0, 620px) minmax(330px, 1fr);
    align-items:stretch; gap:36px; min-height:760px;
    padding-block:150px 0;
  }
  .hero__content{
    max-width:620px;
    margin-left:max(-180px, min(-80px, calc((100vw - var(--wrap)) / -2 + 56px)));
    padding:0 0 24px;
  }
  .hero__visual{
    --robot-w:var(--hero-robot-width);
    --robot-left:auto;
    --robot-right:min(0px, calc((100vw - var(--wrap)) / -2));
    --robot-shift:none;
    align-self:start; justify-self:stretch; width:auto;
    height:calc(var(--robot-w) * 1328 / 1184);
    min-height:0; margin:0;
  }
  .hero__robot{
    top:0; bottom:auto; transform:none;
    mask-image:linear-gradient(to bottom, #000 0% 78%, rgba(0,0,0,.85) 85%, rgba(0,0,0,.35) 94%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, #000 0% 78%, rgba(0,0,0,.85) 85%, rgba(0,0,0,.35) 94%, transparent 100%);
  }
}
@media(min-width:1320px) and (max-width:1439px){
  .hero{ --hero-robot-width:640px; }
}
/* Tablet and laptop introduction: the robot supports the message at its side.
   The benefits and actions use the full width beneath the portrait. */
@media(min-width:700px) and (max-width:1319px){
  .hero__grid{ display:block; min-height:0; padding-block:124px 0; }
  .hero__content{ max-width:none; padding-bottom:38px; }
  .hero h1{ font-size:clamp(38px, 3.5vw, 46px); }
  .hero__badges, .hero h1{ max-width:50%; }
  .hero__content .hero__sub{
    max-width:50%; margin-bottom:clamp(100px, 13vw, 150px);
    font-size:clamp(16px, 1.8vw, 18px);
  }
  .hero__visual{
    --robot-w:min(46vw, 600px); --robot-left:auto; --robot-right:0px; --robot-shift:none;
    position:absolute; top:136px; right:0; width:var(--robot-w); margin:0;
    height:calc(var(--robot-w) * 1328 / 1184);
  }
  .hero__robot{
    top:0; bottom:auto; transform:none;
    mask-image:linear-gradient(to bottom, #000 0% 60%, rgba(0,0,0,.8) 68%, rgba(0,0,0,.25) 82%, transparent 94%);
    -webkit-mask-image:linear-gradient(to bottom, #000 0% 60%, rgba(0,0,0,.8) 68%, rgba(0,0,0,.25) 82%, transparent 94%);
  }
  .hero__content .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__content .btn-row{ flex-direction:row; flex-wrap:wrap; }
  .hero__content .btn-row .btn{
    flex:1 1 280px; width:auto; max-width:none;
    padding-inline:16px; font-size:clamp(13px, 1.55vw, 15.5px);
  }
}
@media(min-width:700px) and (max-width:959px){
  .hero h1{ font-size:clamp(28px, 4vw, 36px); }
  .hero__badges, .hero h1{ max-width:52%; }
  .hero__content .hero__sub{ max-width:52%; }
}
@media(min-width:1250px) and (max-width:1319px){
  .hero__visual{ --robot-w:580px; }
}
@media(min-width:1320px) and (max-width:1399px){
  .hero{ --hero-robot-width:590px; }
  .hero__content{ margin-left:0; }
}
@media(max-width:699px){
  .hero__visual{ display:none; }
  .hero h1{ font-size:clamp(30px, 5vw, 36px); }
  .hero__content .btn-row{ flex-direction:column; }
  .hero__content .btn-row .btn{ width:100%; }
  .hero__content .btn-row .btn--primary{
    padding-inline:14px; font-size:clamp(12px, 3.5vw, 14px);
  }
}
@media(max-width:319px){
  .hero h1{ font-size:clamp(25px, 9vw, 28px); }
}
.hero h1{ color:#fff; margin-bottom:16px; }
.hero__sub{ font-size:clamp(16px,2.1vw,21px); color:#CBD8EA; margin-bottom:26px; max-width:60ch; }
.hero__local{
  display:inline-flex; align-items:center; gap:8px; background:rgba(30,127,245,.14);
  border:1px solid rgba(77,162,255,.45); color:#CFE4FF; font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.04em;
  padding:8px 15px; border-radius:999px; margin-bottom:18px;
}
.trust{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
@media(min-width:620px){ .trust{ grid-template-columns:1fr 1fr; gap:11px 22px; } }
.trust li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:#DDE5EF; }
.trust svg{ flex:0 0 20px; margin-top:2px; color:var(--blue-bright); }
.hero__note{ font-size:13.5px; color:#93A2B5; margin:16px 0 0; }

/* Безшовне продовження hero: той самий navy у точці стику,
   а сітка поступово розчиняється вже всередині AI-секції. */
#ai.section--tint{
  isolation:isolate; overflow:hidden; padding-top:28px;
  background:var(--bg-tint);
}
#ai.section--tint::before{
  content:""; position:absolute; z-index:0; inset:0 0 auto; height:240px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(760px 300px at 50% 0%, rgba(30,127,245,.12), transparent 72%);
  background-size:56px 56px, 56px 56px, auto;
  mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.3) 35%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.3) 35%, transparent 100%);
  pointer-events:none;
}
#ai.section--tint > .wrap{ position:relative; z-index:1; }

/* ---------- Lead form ---------- */
.leadcard{
  background:var(--surface); color:var(--text); border-radius:var(--radius); padding:24px 20px;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
@media(min-width:560px){ .leadcard{ padding:28px; } }
.leadcard h2{ font-size:23px; margin-bottom:6px; }
.leadcard__sub{ font-size:14.5px; color:var(--muted); margin-bottom:18px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; min-height:52px; padding:13px 15px; font-size:16px; /* 16px = no iOS zoom */
  border:1.5px solid var(--line); border-radius:var(--radius-s); background:var(--bg); color:var(--text);
  font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(77,162,255,.18);
}
.field input[aria-invalid="true"]{ border-color:var(--error); }
.field__err{ display:none; color:var(--error); font-size:13px; font-weight:600; margin-top:5px; }
.field input[aria-invalid="true"] ~ .field__err{ display:block; }

/* chip radios */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips input{ position:absolute; opacity:0; width:0; height:0; }
.chips label{
  display:inline-flex; align-items:center; min-height:44px; padding:9px 15px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--text); background:var(--bg); transition:.14s; margin:0;
}
.chips label:hover{ border-color:rgba(77,162,255,.4); background:var(--surface-2); }
.chips input:checked + label{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chips input:focus-visible + label{ outline:3px solid var(--blue-bright); outline-offset:2px; }
.form-note{ font-size:13px; color:var(--muted); margin:12px 0 0; text-align:center; }
.form-note a{ text-decoration:underline; }

.form-success{
  display:none; padding:22px; border-radius:var(--radius-s);
  background:var(--success-bg); border:1.5px solid var(--success-line); color:var(--success-text);
}
.form-success.is-on{ display:block; }
.form-success h3{ margin-bottom:6px; color:var(--success-text); }
form.is-sent .form-body{ display:none; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:16px; }
/* Колонки 1fr мають min-width:auto — довге слово (напр. «Відеореєстратор»)
   розпирає трек ширше за контейнер і дає горизонтальний скрол на мобільному.
   min-width:0 дозволяє треку стискатись, overflow-wrap ловить решту випадків. */
.grid > *{ min-width:0; overflow-wrap:anywhere; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--4{ grid-template-columns:minmax(0,1fr); }
@media(min-width:560px){ .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:700px){ .grid--2{ grid-template-columns:1fr 1fr; } .grid--3{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1120px){ .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.card h3{ margin-bottom:8px; }
.card p:last-child{ margin-bottom:0; }
.card p{ color:var(--text-soft); font-size:15.5px; }
/* Кругла іконка-«медальйон» з синім кільцем і світінням — як у креативах */
.ico-badge, .card__ico, .bento__ico{
  width:52px; height:52px; border-radius:50%; flex:0 0 52px;
  display:grid; place-items:center; margin-bottom:16px; color:var(--blue-bright);
  background:radial-gradient(circle at 50% 38%, rgba(30,127,245,.28), rgba(30,127,245,.05));
  border:1px solid rgba(77,162,255,.45);
  box-shadow:0 0 0 4px rgba(30,127,245,.07), 0 0 22px rgba(30,127,245,.22);
}
.card--flat{ border:0; background:var(--bg-soft); }

/* ---------- Segment tabs ---------- */
.segtabs{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; }
.segtab{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 17px;
  border:1.5px solid var(--line); background:var(--surface); border-radius:999px; cursor:pointer;
  font-weight:700; font-size:15px; color:var(--text-soft); transition:.14s;
}
.segtab:hover{ border-color:rgba(77,162,255,.5); color:var(--text); }
.segtab[aria-selected="true"]{
  background:rgba(30,127,245,.14); border-color:var(--blue-bright); color:#fff;
  box-shadow:0 0 0 3px rgba(30,127,245,.16);
}
.segpanel{ display:none; }
.segpanel.is-on{ display:block; animation:fade .22s ease-out; }
@keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.segpanel__box{
  display:grid; grid-template-columns:minmax(0,1fr); gap:24px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
}
.segpanel__box > *{ min-width:0; overflow-wrap:anywhere; }
@media(max-width:359px){ .segpanel__box{ padding:18px; } }
@media(min-width:900px){ .segpanel__box{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; padding:32px; } }
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.checklist li{ display:flex; gap:10px; font-size:15.5px; color:var(--text-soft); }
.checklist svg{ flex:0 0 20px; margin-top:3px; color:var(--blue-bright); }

/* ---------- Pricing tiers ---------- */
.tier{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; }
.tier--mid{ border:1px solid var(--blue); box-shadow:var(--shadow); position:relative; }
.tier__pill{
  position:absolute; top:-13px; left:24px; background:var(--blue); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.tier__n{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-bright); }
.tier__cams{ font-size:30px; font-weight:800; margin:6px 0 4px; letter-spacing:-.02em; }
.tier__for{ font-size:14.5px; color:var(--muted); margin-bottom:16px; }
.tier ul{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.tier li{ display:flex; gap:9px; font-size:15px; color:var(--text-soft); }
.tier li svg{ flex:0 0 18px; margin-top:3px; color:var(--blue-bright); }
.tier .btn{
  margin-top:auto; width:100%; height:56px; min-height:56px; flex-shrink:0;
  padding:10px 12px; font-size:clamp(11px,3vw,13px); line-height:1.25;
  letter-spacing:.02em; white-space:nowrap;
}
.tier .btn::after{ content:none; }
.pricenote{
  margin-top:22px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--radius-s); padding:20px;
}
.pricenote p:last-child{ margin-bottom:0; }
.pricenote b{ color:var(--text); }

/* ---------- Quiz ---------- */
.quiz{
  color:#fff; border-radius:var(--radius); padding:24px 20px; position:relative; overflow:hidden;
  background:
    radial-gradient(700px 400px at 85% -10%, rgba(30,127,245,.22), transparent 60%),
    var(--ink);
  border:1px solid rgba(77,162,255,.22);
  box-shadow:0 30px 80px rgba(2,10,25,.65);
}
@media(min-width:700px){ .quiz{ padding:34px; } }
.quiz h2{ color:#fff; font-size:clamp(21px,3vw,29px); }
.quiz__sub{ color:#B7C3D2; font-size:15.5px; margin-bottom:22px; }
.quiz__bar{ height:6px; background:rgba(255,255,255,.14); border-radius:99px; overflow:hidden; margin-bottom:10px; }
.quiz__fill{ height:100%; width:20%; background:var(--blue-bright); border-radius:99px; transition:width .3s ease; }
.quiz__meta{ display:flex; justify-content:space-between; font-size:13px; color:#93A2B5; font-weight:700; margin-bottom:20px; }
.quiz__step{ display:none; }
.quiz__step.is-on{ display:block; animation:fade .22s ease-out; }
.quiz__q{ font-size:clamp(19px,2.6vw,24px); font-weight:800; margin-bottom:16px; line-height:1.25; }
.quiz__opts{ display:grid; gap:10px; margin-bottom:22px; }
@media(min-width:600px){ .quiz__opts--2{ grid-template-columns:1fr 1fr; } }
.qopt{
  display:flex; align-items:center; gap:11px; width:100%; min-height:56px; padding:13px 18px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.18); border-radius:var(--radius-s);
  color:#fff; font-weight:600; font-size:16px; text-align:left; cursor:pointer; transition:.14s;
}
.qopt:hover{ background:rgba(77,162,255,.16); border-color:var(--blue-bright); }
.qopt[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue-bright); }
.qopt em{ font-style:normal; font-size:20px; }
.quiz__nav{ display:flex; gap:12px; align-items:center; }
.quiz__back{
  background:none; border:0; color:#93A2B5; font-weight:700; font-size:15px; cursor:pointer;
  min-height:48px; padding:0 4px;
}
.quiz__back:hover{ color:#fff; }
.quiz .field label{ color:#fff; }
.quiz .field input{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); color:#fff; }
.quiz .field input::placeholder{ color:#8895A6; }
.quiz__recap{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-s); padding:14px 16px; margin-bottom:18px; font-size:14.5px; color:#C9D4E3;
}
.quiz__recap b{ color:#fff; }

/* ---------- Steps / process ---------- */
.steps{ display:grid; gap:14px; counter-reset:s; }
@media(min-width:760px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(min-width:1050px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.step__n{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:var(--ink); color:#fff; font-weight:800; font-size:15px; margin-bottom:12px;
}
.step h3{ font-size:17.5px; margin-bottom:6px; }
.step p{ font-size:14.5px; color:var(--text-soft); margin:0; }

/* ---------- Cases ---------- */
.case{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.case__ph{ aspect-ratio:16/10; background:var(--bg-soft); }
.case__body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.case__tag{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:7px; }
.case h3{ font-size:19px; margin-bottom:12px; }
.case dl{ margin:0 0 16px; display:grid; gap:9px; }
.case dt{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.case dd{ margin:2px 0 0; font-size:15px; color:var(--text-soft); }
.case .btn{ margin-top:auto; min-height:48px; font-size:15.5px; }

/* ---------- Reviews ---------- */
.rev{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; }
.rev__stars{ color:var(--star); font-size:17px; letter-spacing:2px; margin-bottom:10px; }
.rev__txt{ font-size:15.5px; color:var(--text-soft); flex:1; }
.rev__who{ display:flex; align-items:center; gap:11px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.rev__av{ width:42px; height:42px; border-radius:50%; background:rgba(77,162,255,.16); color:var(--blue-bright); display:grid; place-items:center; font-weight:800; flex:0 0 42px; }
.rev__nm{ font-weight:700; font-size:15px; }
.rev__src{ font-size:12.5px; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:19px 44px 19px 0; position:relative;
  font-weight:700; font-size:17px; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--blue-bright); border-bottom:2.5px solid var(--blue-bright);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq details p{ margin:0 0 18px; color:var(--text-soft); font-size:15.5px; max-width:72ch; }

/* ---------- Showroom ---------- */
.showroom{ display:grid; gap:24px; }
@media(min-width:900px){ .showroom{ grid-template-columns:1fr 1fr; align-items:start; gap:36px; } }
.showroom__map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-soft); min-height:320px; }
.showroom__map iframe{ display:block; width:100%; height:380px; border:0; }
.info{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:16px; }
.info li{ display:flex; gap:13px; }
.info svg{ flex:0 0 22px; margin-top:3px; color:var(--blue-bright); }
.info b{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; }
.info span{ font-size:16.5px; }

/* ---------- Footer ---------- */
/* Мінімальний футер: заклик-до-дії наприкінці сторінки прибрано (шапка, sticky-
   панель і секція «Контакти» вже несуть телефон, адресу й CTA). Лишились тільки
   контактний рядок і копірайт. Нижній відступ на мобільному тримає sticky-панель
   подалі від тексту. */
.pagefoot{ background:var(--ink); color:var(--muted); text-align:center; padding:34px 0 112px; }
@media(min-width:820px){ .pagefoot{ padding-bottom:34px; } }
.pagefoot__meta{ font-size:14px; color:var(--text-soft); margin:0 0 8px; }
.pagefoot__meta a{ color:var(--text-soft); }
.pagefoot__copy{ font-size:13px; margin:0; }

/* ---------- Sticky mobile CTA ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(10,14,20,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(0,0,0,.4);
}
.sticky .btn{
  width:100%; min-width:0; min-height:52px; gap:5px;
  font-size:clamp(11px, 3.2vw, 16px); padding:10px 5px; letter-spacing:0;
}
.sticky .btn svg{ width:clamp(15px, 4vw, 19px); flex-shrink:0; }
.sticky .btn--primary::after{ content:none; }
.sticky__call-short{ display:none; }
@media(max-width:359px){
  .sticky .btn{ font-size:14px; }
  .sticky__call-full{ display:none; }
  .sticky__call-short{ display:inline; }
}
@media(min-width:820px){ .sticky{ display:none; } }

/* ---------- Utils ---------- */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.center{ text-align:center; }
.mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; }
.mb-0{ margin-bottom:0; }

/* ============================================================
   СУЧАСНІ ЕФЕКТИ — vanilla-порт патернів Aceternity / Skiper / 21st.dev
   React + Framer Motion не використовуються: усе на CSS + трохи JS,
   щоб не втратити Core Web Vitals на рекламному трафіку.
   ============================================================ */

/* ---------- Reveal при скролі (Framer Motion whileInView) ----------
   FAIL-SAFE: контент видимий за замовчуванням. Ховаємо його ЛИШЕ коли
   JS підтвердив, що вміє показати назад (клас .has-reveal на <html>).
   Без JS або зі зламаним IntersectionObserver сторінка лишається читабельною. */
.has-reveal [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.has-reveal [data-reveal].is-revealed{ opacity:1; transform:none; }
.has-reveal [data-reveal][data-reveal-delay="1"]{ transition-delay:.08s; }
.has-reveal [data-reveal][data-reveal-delay="2"]{ transition-delay:.16s; }
.has-reveal [data-reveal][data-reveal-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .has-reveal [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ---------- Aurora background (Aceternity: Aurora Background) ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora::before, .aurora::after{
  content:""; position:absolute; width:78vw; height:78vw; max-width:1100px; max-height:1100px;
  border-radius:50%; filter:blur(90px); opacity:.30; will-change:transform;
}
.aurora::before{
  top:-32%; right:-14%;
  background:radial-gradient(circle at 50% 50%, #4399FF 0%, rgba(77,162,255,0) 66%);
  animation:auroraA 22s ease-in-out infinite alternate;
}
.aurora::after{
  bottom:-42%; left:-18%;
  background:radial-gradient(circle at 50% 50%, #1257AD 0%, rgba(18,87,173,0) 68%);
  animation:auroraB 27s ease-in-out infinite alternate;
}
@keyframes auroraA{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-9%,7%,0) scale(1.16)} }
@keyframes auroraB{ from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(11%,-8%,0) scale(1)} }
@media (prefers-reduced-motion: reduce){ .aurora::before,.aurora::after{ animation:none; } }

/* ---------- Spotlight, що йде за курсором (Aceternity: Spotlight) ---------- */
.spotlight{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),
             rgba(77,162,255,.16), transparent 62%);
}
.hero:hover .spotlight{ opacity:1; }
@media (hover:none){ .spotlight{ display:none; } }

/* ---------- Сітка-фон (21st.dev: grid backgrounds) ---------- */
.gridlines{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 82% 62% at 50% 32%, #000 42%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 32%, #000 42%, transparent 100%);
}

/* ---------- Marquee брендів (Aceternity/Skiper: Infinite Moving Cards) ---------- */
.brands{ position:relative; z-index:2; margin-top:30px; min-width:0; }
.brands__lbl{ font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7E90A6; margin-bottom:12px; }
.marquee{
  overflow:hidden;
  /* min-width:0 обовʼязково: трек має width:max-content, а grid/flex-колонка
     за замовчуванням не стискається менше за min-content вмісту — без цього
     marquee роздуває колонку hero і виштовхує фото за межі екрана. */
  min-width:0;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display:flex; gap:14px; width:max-content; animation:marq 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.brand-chip{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:9px 18px; border-radius:999px; font-weight:700; font-size:14.5px;
  color:#C9D4E3; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.brand-chip svg{ color:var(--blue-bright); flex:0 0 15px; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---------- 3D tilt для карток (Aceternity: 3D Card Effect) ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .25s cubic-bezier(.22,1,.36,1); will-change:transform; }
.tilt__in{ transform:translateZ(28px); transition:transform .25s; }
@media (hover:none){ .tilt,.tilt__in{ transform:none!important; } }

/* ---------- Світіння рамки при наведенні (Aceternity: Glare/Border) ---------- */
.glow{ position:relative; }
.glow::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s; z-index:0;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(77,162,255,.22), transparent 55%);
}
.glow:hover::before{ opacity:1; }
.glow > *{ position:relative; z-index:1; }

/* ---------- Bento-сітка (Aceternity: Bento Grid) ---------- */
.bento{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:760px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){
  .bento{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(250px,auto);
    grid-template-areas:
      "installation installation mobile"
      "ai ai mobile"
      "engineering warranty network"
      "experience experience showroom";
  }
  .bento__item--installation{ grid-area:installation; }
  .bento__item--ai{ grid-area:ai; }
  .bento__item--mobile{ grid-area:mobile; }
  .bento__item--engineering{ grid-area:engineering; }
  .bento__item--warranty{ grid-area:warranty; }
  .bento__item--network{ grid-area:network; }
  .bento__item--experience{ grid-area:experience; }
  .bento__item--showroom{ grid-area:showroom; }
}
.bento__item{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:24px; display:flex; flex-direction:column; justify-content:flex-end;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.bento__item:hover{ border-color:rgba(77,162,255,.4); box-shadow:var(--shadow); }
.bento__item h3{ font-size:19px; margin-bottom:7px; position:relative; z-index:2; }
.bento__item p{ font-size:14.8px; color:var(--text-soft); margin:0; position:relative; z-index:2; }
.bento__ico{ position:relative; z-index:2; }
/* варіант із фото-фоном */
.bento__item--photo{ color:#fff; border-color:transparent; min-height:250px; }
.bento__item--photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.bento__item--photo:hover img{ transform:scale(1.06); }
.bento__item--photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,14,19,.92) 8%, rgba(10,14,19,.55) 45%, rgba(10,14,19,.15) 100%);
}
.bento__item--photo h3{ color:#fff; }
.bento__item--photo p{ color:#C9D4E3; }

/* ---------- Tracing beam для процесу (Aceternity: Tracing Beam) ---------- */
.beam{ position:relative; }
@media(min-width:900px){
  .beam{ padding-left:56px; }
  .beam__rail{
    position:absolute; left:19px; top:8px; bottom:8px; width:2px;
    background:var(--line); border-radius:2px; overflow:hidden;
  }
  .beam__fill{
    position:absolute; left:0; top:0; width:100%; height:0%;
    background:linear-gradient(to bottom, var(--blue-bright), var(--blue));
    border-radius:2px;
  }
  .beam__steps{ display:grid; gap:18px; }
  .beam .step{ position:relative; }
  .beam .step::before{
    content:""; position:absolute; left:-45px; top:26px; width:14px; height:14px;
    border-radius:50%; background:var(--surface); border:2.5px solid var(--line); transition:.3s;
  }
  .beam .step.is-active::before{ border-color:var(--blue-bright); box-shadow:0 0 0 5px rgba(77,162,255,.18); }
}

/* ---------- Плавне збільшення фото в картках кейсів ---------- */
.case{ transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; }
.case:hover{ box-shadow:var(--shadow-lg); border-color:rgba(77,162,255,.4); }
.case__ph{ transition:transform .55s cubic-bezier(.22,1,.36,1); }
.case > .case__ph{ display:block; width:100%; object-fit:cover; }
.case__media{ overflow:hidden; }
.case:hover .case__ph{ transform:scale(1.05); }

/* ---------- AI-відеоаналітика ---------- */
.hero__badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.hero__badges .hero__local{ margin-bottom:0; }
.hero__local--ai{
  background:var(--blue); border-color:var(--blue); color:#fff;
  box-shadow:0 8px 24px rgba(30,127,245,.32);
}
.ai-demo{
  background:var(--ink); border:1px solid rgba(77,162,255,.30);
  border-left:3px solid var(--blue-bright); border-radius:var(--radius);
  padding:20px 22px; margin-top:24px;
}

/* Фото типу об'єкта у сегментній секції */
.seg-photo{
  margin:0 0 18px; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(77,162,255,.25); box-shadow:0 0 26px rgba(30,127,245,.14);
  aspect-ratio:16/10; background:var(--bg-soft);
}
.seg-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.segpanel.is-on .seg-photo:hover img{ transform:scale(1.05); }
.ai-demo__tag{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--blue-bright); margin-bottom:8px;
}
.ai-demo__text{ margin:0; color:#DDE5EF; font-size:15.5px; }
.ai-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.ai-list li{
  position:relative; padding-left:20px; font-size:14.7px;
  color:var(--text-soft); line-height:1.5;
}
.ai-list li::before{
  content:""; position:absolute; left:2px; top:8px; width:7px; height:7px;
  border-radius:2px; background:var(--blue-bright);
}
.seg-ai{ margin-top:16px; border-left:3px solid var(--blue-bright); }
.seg-ai h3{ display:flex; align-items:center; gap:8px; }
.seg-ai h3 svg{ flex:0 0 18px; color:var(--blue-bright); }

/* ---------- Kinetic Grid (порт React-компонента KineticGrid) ----------
   Полотно лежить під контентом hero. Прозоре: крізь нього видно
   aurora та фон секції. opacity вмикає JS, щоб до ініціалізації
   не блимав порожній прямокутник. */
.kinetic{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  display:block; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}

/* ---------- Reference-led AI direction ----------
   Keep display type close to the supplied creative; give long reading copy a
   quieter system face. The first image provides the actual house/camera scene. */
:root{
  --bg:#050913;
  --bg-soft:#0A1529;
  --bg-tint:#09172D;
  --surface:#13233B;
  --ink:#050913;
  --text:#F7FAFF;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body{ font-family:var(--f-body); }
.btn,h1,h2,h3,.eyebrow,.hdr__nav{ font-family:var(--f-sans); }
.section-head h2{ letter-spacing:-.025em; }

.hero--creative{
  isolation:isolate; min-height:100vh; min-height:100svh;
  background:#050913; overflow:hidden;
}
.hero--creative::before{
  content:""; position:absolute; z-index:1; inset:0; height:auto;
  background:
    linear-gradient(90deg,#050913 0%,#050913 39%,rgba(5,9,19,.98) 49%,rgba(5,9,19,.78) 57%,rgba(5,9,19,.08) 82%),
    linear-gradient(0deg,#09172D 0%,rgba(5,9,19,0) 23%);
  pointer-events:none;
}
.hero--creative::after{
  content:""; display:block; position:absolute; z-index:1;
  left:0; right:0; bottom:-1px; height:clamp(130px,18vh,250px);
  background:linear-gradient(to bottom,rgba(9,23,45,0) 0%,rgba(9,23,45,.2) 34%,#09172D 100%);
  pointer-events:none;
}
.hero__scene{ position:absolute; z-index:0; inset:0; overflow:hidden; }
/* Hide the raster headline in creative №1 while leaving its house and cameras visible. */
.hero__scene::after{
  content:""; position:absolute; z-index:1; top:0; left:0;
  width:76%; height:47%; pointer-events:none;
  background:linear-gradient(90deg,#050913 0%,#050913 80%,rgba(5,9,19,.98) 86%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 67%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 67%,transparent 100%);
}
.hero__scene img{
  width:100%; height:100%; max-width:none; object-fit:cover;
  object-position:right center;
}
.hero__layout{
  position:relative; z-index:2; max-width:none;
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding:120px clamp(24px,4vw,64px) 62px;
}
.hero__copy{ width:min(65vw,900px); min-width:0; }
.hero--creative h1{
  font-size:clamp(36px,4.1vw,62px); line-height:1.06;
  letter-spacing:-.038em; font-weight:900; margin:0 0 16px;
  max-width:none;
  white-space:nowrap; text-shadow:0 3px 20px rgba(0,0,0,.45);
}
.hero--creative h1 .hl{ color:#338EF9; }
.hero--creative h1 wbr{ display:none; }
.hero__strap{
  margin:0 0 22px; color:#F7FAFF;
  font:500 clamp(17px,2.15vw,27px)/1.4 var(--f-body);
  white-space:nowrap;
}
.hero__strap span{ color:var(--blue-bright); padding-inline:.17em; }
.hero__signals{ list-style:none; padding:0; margin:0 0 24px; width:min(410px,100%); }
.hero__signals li{
  position:relative; display:flex; align-items:center; gap:20px; min-height:66px;
  color:#F0F5FD; font-size:clamp(16px,1.45vw,20px); line-height:1.25;
}
.hero__signals li + li::before{
  content:""; position:absolute; top:0; left:79px;
  width:calc(100% - 79px); height:1px;
  background:linear-gradient(90deg,rgba(77,162,255,.48),transparent);
}
.hero__signal-icon{
  display:grid; place-items:center; flex:none; width:56px; height:56px;
  border-radius:50%; border:1px solid rgba(77,162,255,.75);
  color:#4DA2FF; background:rgba(5,19,43,.48);
  box-shadow:0 0 0 4px rgba(30,127,245,.05),inset 0 0 14px rgba(30,127,245,.12),0 0 18px rgba(30,127,245,.33);
}
.hero__signal-icon svg{ width:30px; height:30px; }
.hero--creative .hero__cta{
  width:auto; min-height:64px; padding:13px 31px;
  font-size:clamp(16px,1.6vw,21px); font-weight:800;
  box-shadow:0 0 30px rgba(30,127,245,.38),0 10px 32px rgba(0,0,0,.25);
}
.hero--creative .hero__cta::after{ font-size:25px; margin-left:8px; }
.hero--creative .hero__note{ margin-top:16px; color:#B9C6D8; font-size:13px; }
@media(max-width:1099px){
  .hero--creative h1{ font-size:clamp(34px,4.2vw,49px); white-space:normal; max-width:700px; }
  .hero__copy{ width:min(65vw,660px); }
}
@media(max-width:699px){
  .hero--creative::before{
    background:linear-gradient(to bottom,#050913 0%,#050913 39%,rgba(5,9,19,.98) 48%,rgba(5,9,19,.2) 78%,#09172D 100%);
  }
  .hero__scene{ top:auto; bottom:0; height:min(72vw,320px); }
  .hero__scene::after{ display:none; }
  .hero__scene img{
    position:absolute; right:0; bottom:0; width:200%; height:auto;
    object-fit:initial; object-position:initial;
  }
  .hero__layout{
    display:block; padding:114px 20px calc(min(72vw,320px) + 48px);
  }
  .hero__copy{ width:100%; }
  .hero--creative h1{ font-size:clamp(30px,7vw,43px); max-width:100%; margin-bottom:13px; }
  .hero--creative h1 wbr{ display:inline; }
  .hero__strap{ font-size:clamp(15px,4vw,19px); margin-bottom:20px; white-space:normal; }
  .hero__signals{ width:min(410px,100%); margin-bottom:22px; }
  .hero__signals li{ min-height:57px; gap:15px; font-size:16px; }
  .hero__signals li + li::before{ display:none; }
  .hero__signal-icon{ width:46px; height:46px; }
  .hero__signal-icon svg{ width:25px; height:25px; }
  .hero--creative .hero__cta{ width:100%; min-height:56px; font-size:clamp(13px,3.7vw,17px); padding-inline:13px; }
  .hero--creative .hero__note{ max-width:32ch; }
}
@media(max-width:359px){
  .hero__scene{ height:300px; }
  .hero__scene img{ width:250%; }
  .hero__layout{ padding-inline:16px; padding-bottom:215px; }
  .hero--creative h1{ font-size:clamp(27px,8vw,31px); }
  .hero__strap{ font-size:14px; }
  .hero__signals li{ font-size:14px; }
  .hero--creative .hero__cta{ font-size:13px; }
  .hero--creative .hero__note{ display:none; }
}

/* Complete supplied visuals, grouped by the actual deployment setting rather
   than falsely presenting marketing renders as installed client projects. */
.creative-section{
  background:radial-gradient(950px 500px at 95% 0%,rgba(30,127,245,.16),transparent 70%),var(--bg);
}
.creative-section__head{ max-width:900px; margin-bottom:50px; }
.creative-group{ border-top:1px solid rgba(77,162,255,.26); padding-top:30px; }
.creative-group + .creative-group{ margin-top:56px; }
.creative-group__heading{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:22px; }
.creative-group__heading h3{ color:#F7FAFF; text-transform:uppercase; font-size:clamp(20px,2.3vw,28px); font-weight:900; }
.creative-group__heading p{ color:var(--text-soft); max-width:440px; font-size:15px; }
.creative-gallery{ display:grid; gap:20px; align-items:start; }
.creative-gallery--two{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
.creative-gallery--three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.creative-tile{
  margin:0; min-width:0; overflow:hidden;
  border:1px solid rgba(77,162,255,.31); border-radius:14px;
  background:#0A1529; box-shadow:0 20px 55px rgba(0,0,0,.24);
}
.creative-tile a{ display:block; overflow:hidden; }
.creative-tile img{ display:block; width:100%; height:auto; }
.creative-tile figcaption{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:14px 16px; color:#DDE8F8; font-size:13px; font-weight:600;
}
.creative-tile figcaption span{ color:var(--blue-bright); white-space:nowrap; }
.creative-tile a:hover img{ filter:brightness(1.08); }
.creative-tile a:focus-visible{ outline:3px solid #4DA2FF; outline-offset:-4px; }
@media(max-width:899px){
  .creative-gallery--three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creative-group__heading{ display:block; }
}
@media(max-width:599px){
  .creative-section__head{ margin-bottom:36px; }
  .creative-gallery--two,.creative-gallery--three{ grid-template-columns:1fr; }
  .creative-group + .creative-group{ margin-top:42px; }
  .creative-tile figcaption{ font-size:12px; }
}


/* Hero cleanup and cross-section transition */
.hero--creative::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  height:auto;
  background:linear-gradient(90deg,
    #050913 0%,
    #050913 39%,
    rgba(5,9,19,.995) 50%,
    rgba(5,9,19,.94) 62%,
    rgba(5,9,19,.52) 75%,
    rgba(5,9,19,.08) 88%,
    transparent 100%);
  pointer-events:none;
}
.hero--creative::after{
  content:"";
  display:block;
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  height:clamp(320px,42vh,480px);
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(9,23,45,0) 0%,
    rgba(9,23,45,.12) 24%,
    rgba(9,23,45,.48) 58%,
    rgba(9,23,45,.86) 82%,
    #09172D 100%);
}
.hero__scene::after{ display:none; }

#ai{
  isolation:isolate;
  background:
    linear-gradient(to bottom,#09172D 0,#09172D 120px,rgba(9,23,45,0) 300px),
    radial-gradient(900px 480px at 50% 0,rgba(30,127,245,.14),transparent 62%),
    var(--bg-tint);
}
#ai::before{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:-260px;
  height:260px;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(9,23,45,0) 0%,
    rgba(9,23,45,.14) 22%,
    rgba(9,23,45,.62) 58%,
    #09172D 100%);
}
#ai > .wrap{ position:relative; z-index:4; }

.hero--creative .hero__layout{ z-index:4; }

.hero__fade{position:absolute;z-index:3;left:0;right:0;bottom:0;height:clamp(320px,42vh,480px);pointer-events:none;background:linear-gradient(to bottom,rgba(9,23,45,0) 0%,rgba(9,23,45,.12) 24%,rgba(9,23,45,.48) 58%,rgba(9,23,45,.86) 82%,#09172D 100%)}

@media(max-width:520px){
  .hdr__logo img{ height:42px; }
  .hdr__phone{
    display:grid;
    place-items:center;
    width:44px;
    min-width:44px;
    min-height:44px;
    font-size:0;
    border:1px solid rgba(77,162,255,.5);
    border-radius:50%;
    background:rgba(30,127,245,.12);
    color:#fff;
  }
  .hdr__phone span{ display:none; }
  .hdr__phone-icon{ display:block; }
  .sticky .btn{ font-size:13px; }
  .sticky__call-full{ display:none; }
  .sticky__call-short{ display:inline; }
}

/* Final client-requested hero repair: one full-height horizontal veil hides
   the baked-in headline without introducing a horizontal rectangle. */
.hero--creative::before{
  z-index:1;
  inset:0;
  height:auto;
  background:linear-gradient(90deg,
    #050913 0%,
    #050913 56%,
    rgba(5,9,19,.995) 67%,
    rgba(5,9,19,.88) 76%,
    rgba(5,9,19,.38) 87%,
    transparent 97%);
}
.hero--creative::after{ display:none; }
.hero__scene::after{ display:none; }
#cost{ background-color:var(--bg-soft); }

/* ============================================================
   CLIENT FEEDBACK PASS — modal calculator, responsive repair,
   categorized FAQ and footer social links.
   ============================================================ */

/* One parent typeface across native controls and all page copy. */
:root{ --f-body:var(--f-sans); }
body,button,input,textarea,select{ font-family:var(--f-sans); }

/* ---------- Calculator launcher + modal ---------- */
.quiz-launch{
  display:grid; gap:28px; align-items:center;
  padding:clamp(26px,5vw,52px); border:1px solid rgba(77,162,255,.28);
  border-radius:24px; overflow:hidden; position:relative;
  background:
    radial-gradient(520px 280px at 92% 0%,rgba(77,162,255,.22),transparent 68%),
    linear-gradient(135deg,#07101F,#0B1F3D);
  box-shadow:var(--shadow-lg);
}
.quiz-launch::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:linear-gradient(rgba(77,162,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(77,162,255,.12) 1px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(90deg,transparent,#000);
}
.quiz-launch > *{ position:relative; z-index:1; }
.quiz-launch h2{ max-width:17ch; margin-bottom:12px; }
.quiz-launch p{ color:var(--text-soft); max-width:65ch; margin:0; }
.quiz-launch .btn{ justify-self:start; }
@media(min-width:900px){
  .quiz-launch{ grid-template-columns:minmax(0,1fr) auto; }
  .quiz-launch .btn{ min-width:250px; }
}

body.modal-open{ overflow:hidden; }
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; opacity:0; transition:opacity .18s ease; }
.modal[hidden]{ display:none; }
.modal.is-open{ opacity:1; }
.modal__backdrop{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  background:rgba(1,5,12,.82); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.modal__panel{
  position:relative; z-index:1; width:min(760px,100%); max-height:calc(100svh - 36px);
  overflow:auto; overscroll-behavior:contain; border-radius:20px;
  box-shadow:0 34px 110px rgba(0,0,0,.72); transform:translateY(14px) scale(.985);
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.modal.is-open .modal__panel{ transform:none; }
.modal__close{
  position:absolute; z-index:5; top:12px; right:12px; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.2); background:rgba(4,11,24,.82);
}
.modal__close:hover{ background:var(--blue-dark); }
.modal .quiz{ border-radius:20px; box-shadow:none; padding-top:64px; }
@media(max-width:599px){
  .modal{ padding:0; align-items:end; }
  .modal__panel{ width:100%; max-height:94svh; border-radius:22px 22px 0 0; }
  .modal .quiz{ border-radius:22px 22px 0 0; padding:58px 18px 24px; }
  .quiz-launch .btn{ width:100%; }
}

/* ---------- AI advantage in the bento grid ---------- */
.bento__item--ai{
  justify-content:center;
  background:
    radial-gradient(420px 220px at 92% 0%,rgba(77,162,255,.24),transparent 70%),
    linear-gradient(135deg,#0B1C37,#102B52);
  border-color:rgba(77,162,255,.38);
}
.bento__item--ai .bento__ico{ color:#fff; background:var(--blue); border-color:var(--blue-bright); }
.bento__link{ margin-top:18px; color:#fff; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.045em; }
.bento__link:hover{ color:var(--blue-bright); text-decoration:none; }

/* ---------- Full-width categorized FAQ ---------- */
.faq{ max-width:none; display:grid; gap:18px; }
.faq__group{
  min-width:0; padding:clamp(18px,3vw,28px); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
}
.faq__group h3{ display:flex; align-items:center; gap:12px; margin-bottom:8px; font-size:clamp(18px,2vw,22px); }
.faq__group h3 span{
  flex:0 0 auto; display:grid; place-items:center; width:38px; height:30px;
  border-radius:999px; color:var(--blue-bright); background:rgba(30,127,245,.12);
  border:1px solid rgba(77,162,255,.3); font-size:12px; letter-spacing:.05em;
}
.faq__group--ai{ border-color:rgba(77,162,255,.38); background:linear-gradient(135deg,var(--surface),#10284A); }
.faq details:last-child{ border-bottom:0; }
.faq details p{ max-width:80ch; }
@media(min-width:900px){
  .faq{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq__group--ai{ grid-column:1 / -1; }
}

/* ---------- Footer ---------- */
.pagefoot__social{ display:flex; justify-content:center; gap:12px; margin-bottom:18px; }
.pagefoot__social a{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  color:#DCEBFF; border:1px solid rgba(77,162,255,.34); background:rgba(30,127,245,.09);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.pagefoot__social a:hover{ transform:translateY(-3px); background:rgba(30,127,245,.2); border-color:var(--blue-bright); }
.pagefoot__social svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Thank-you page ---------- */
.thankyou-page{ min-height:100svh; display:grid; place-items:center; padding:28px; background:radial-gradient(760px 520px at 50% 10%,rgba(30,127,245,.2),transparent 72%),var(--bg); }
.thankyou{ width:min(680px,100%); text-align:center; padding:clamp(28px,6vw,58px); border:1px solid rgba(77,162,255,.28); border-radius:24px; background:rgba(10,21,41,.9); box-shadow:var(--shadow-lg); }
.thankyou__logo{ width:190px; height:auto; margin:0 auto 34px; }
.thankyou__mark{ width:72px; height:72px; display:grid; place-items:center; margin:0 auto 24px; border-radius:50%; color:#fff; background:var(--blue); box-shadow:0 0 0 10px rgba(30,127,245,.11),0 0 34px rgba(30,127,245,.35); }
.thankyou h1{ font-size:clamp(30px,6vw,52px); }
.thankyou p{ color:var(--text-soft); max-width:52ch; margin:0 auto 26px; }

/* ---------- Mobile alignment and consistent controls ---------- */
@media(max-width:699px){
  .btn{ width:100%; min-height:56px; padding:13px 18px; font-size:14px; }
  .btn-row .btn{ width:100%; }

  .hdr__phone{ line-height:0; }
  .hdr__phone-icon{ display:block; width:20px; height:20px; margin:0; }

  .hero--creative{ min-height:820px; }
  .hero--creative::before{
    z-index:1; inset:0;
    background:
      linear-gradient(180deg,#050913 0%,rgba(5,9,19,.96) 48%,rgba(5,9,19,.72) 72%,#09172D 100%),
      linear-gradient(90deg,#050913 0%,rgba(5,9,19,.86) 62%,rgba(5,9,19,.2) 100%);
  }
  .hero__scene{ inset:0; height:auto; opacity:.82; }
  .hero__scene img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:68% center;
  }
  .hero__layout{ display:flex; align-items:flex-start; min-height:820px; padding:110px 20px 104px; }
  .hero__copy{ width:100%; }
  .hero__fade{ height:220px; }

  .card--ai-feature{
    display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:15px; align-items:start;
  }
  .card--ai-feature .card__ico{ margin:0; }
  .card--ai-feature h3{ align-self:center; margin:0; }
  .card--ai-feature .ai-list{ grid-column:1 / -1; margin-top:18px; }

  .bento__item{
    display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:15px; align-items:end;
  }
  .bento__item > img{ grid-column:1 / -1; }
  .bento__item .bento__ico{ margin:0; }
  .bento__item h3{ align-self:center; margin:0; }
  .bento__item p,.bento__item .bento__link{ grid-column:1 / -1; margin-top:16px; }
  .bento__item--photo{ padding-top:88px; }

  .sticky .btn{ min-height:52px; padding:10px 7px; font-size:13px; }
}

@media(max-width:359px){
  .hero--creative{ min-height:780px; }
  .hero__scene{ height:auto; }
  .hero__scene img{ width:100%; }
  .hero__layout{ min-height:780px; padding:104px 16px 92px; }
}

/* Shared CTA geometry: text can use two lines without changing button height. */
.btn,.hdr .btn,.tier .btn,.sticky .btn,.hero--creative .hero__cta{
  box-sizing:border-box; height:56px; min-height:56px;
  padding:10px 16px; line-height:1.2;
}
.btn{ min-width:0; }
.btn::after{ flex-shrink:0; }
@media(max-width:699px){
  .btn,.tier .btn,.sticky .btn,.hero--creative .hero__cta{
    font-size:clamp(11px,3.1vw,14px); letter-spacing:.02em;
  }
  .hero--creative .hero__cta::after{ font-size:18px; margin-left:0; }
  .hdr__phone-icon{ display:none; }
}
@media(max-width:520px){
  .hdr__phone{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-height:44px; padding:0; gap:0;
    line-height:0; font-size:0;
  }
  .hdr__phone-icon{ display:block; flex:0 0 20px; width:20px; height:20px; margin:0; }
}