:root{
    --bg-1:#000;        /* deep navy */
    --bg-2: #1e1e1e;        /* dark blue */
    --ink:#e6eefc;         /* primary text */
    --ink-dim:#b8c5e6;     /* secondary text */
    --accent:#5aa9ff;      /* blue accent */
    --accent-2:#8fd3ff;    /* cyan accent */
    --danger:#ff6b6b;
    --ok:#38ef7d;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
    --nav-h:68px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
    margin:0;
    color:var(--ink);
    background: radial-gradient(1200px 800px at 80% -10%, #0e2550 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
    font: 16px/1.6 ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, system-ui, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Layout helpers */
.container{width:min(1120px, 92%); margin-inline:auto}
.grid{display:grid; gap:28px}
.center{display:grid; place-items:center}

/* Top Nav */
header{position:sticky; top:0; z-index:40}
.nav{
    height:var(--nav-h);
    display:flex; align-items:center; justify-content:space-between;
    backdrop-filter:saturate(140%) blur(10px);
    background:rgba(8,13,26,.55);
    border-bottom:1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 0 0 0 15px;
    margin-top: 10px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.logo{width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--shadow)}
nav a{color:var(--ink-dim); text-decoration:none; padding:10px 14px; border-radius:10px; display:inline-block}
nav a:hover{color:var(--ink)}
nav a.active{color:#0b1220; background:linear-gradient(135deg,var(--accent),var(--accent-2));}

.menu{display:flex; gap:6px; align-items:center}
.menu-toggle{display:none}
@media (max-width: 860px){
    .menu{display:none}
    .menu.open{display:flex; position:absolute; right:12px; top:calc(var(--nav-h) + 8px); flex-direction:column; background:rgba(8,13,26,.95); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px}
    .menu-toggle{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:11px; border:1px solid rgba(255,255,255,.1); background:rgba(12,18,35,.65); color:var(--ink)}
}

/* Sections */
section{min-height:calc(100vh - var(--nav-h)); display:grid; align-items:center; padding:42px 0}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow);}

.hero{
    padding-top:12px;
}
.hero .wrap-block{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px}
@media (max-width: 980px){.hero .wrap-block{grid-template-columns:1fr}}

.eyebrow{color:var(--accent-2); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:12px}
h1{margin:.3em 0 .4em; font-size: clamp(34px, 6vw, 60px); line-height:1.08}
h2{margin:0 0 .5em; font-size: clamp(24px, 4.6vw, 38px)}
p.lead{color:var(--ink-dim); font-size: clamp(16px, 2.4vw, 18px)}

.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; margin-bottom:20px}
.button{appearance:none; border:0; cursor:pointer; border-radius:14px; padding:12px 18px; font-weight:700; letter-spacing:.2px}
.button.primary{background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b1220}
.button.ghost{background: transparent; color: var(--ink); outline:1px solid rgba(255,255,255,.18)}
.button:hover{transform: translateY(-1px)}

/* Phone mock */
.phone-static{width:min(360px, 86vw); height:680px; border-radius:36px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg,#081128,#0d1733); box-shadow:var(--shadow); padding:14px; position:relative}
.phone-static:before{content:""; position:absolute; inset:10px; border-radius:28px; border:1px solid rgba(255,255,255,.06)}
.screen{position:absolute; inset:24px; border-radius:24px; background:linear-gradient(180deg,#0b1228,#0a1742); overflow:hidden; display:grid}
.status{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px 14px; font-size:12px; color:var(--ink-dim); border-bottom:1px solid rgba(255,255,255,.06)}
.map{flex:1; background:radial-gradient(250px 160px at 70% 30%, rgba(90,169,255,.25), transparent), radial-gradient(260px 200px at 20% 70%, rgba(143,211,255,.18), transparent)}
.pin{position:absolute; left:55%; top:48%; width:16px; height:16px; background:var(--danger); border-radius:50%; box-shadow:0 6px 20px rgba(255,107,107,.6)}
.card{position:absolute; left:20px; right:20px; bottom:24px; background:rgb(4 11 27 / 70%);; z-index: 3; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:4px 10px; border-radius:999px; background:rgba(56,239,125,.12); color:var(--ok);}

/* About */
.about .wrap-block{display:grid; grid-template-columns:1.1fr .9fr; gap:40px}
@media (max-width: 980px){
    .about .wrap-block {
        grid-template-columns:1fr
    }
    .nav.container {
        padding-right: 10px;
    }
    .phone-static {
        height: 455px;
        width: min(250px);
    }
}
.about .panel{padding:28px}
.list{display:grid; gap:12px}
.list li{list-style:none; padding-left:26px; position:relative}
.list li:before{content:"✓"; position:absolute; left:0; color:var(--accent-2)}

/* Demo */
.demo .frame{width:100%; aspect-ratio:16/9; border-radius:16px; border:1px dashed rgba(255,255,255,.2); overflow:hidden; position:relative; background:rgba(255,255,255,.03)}
.demo .frame iframe{width:100%; height:100%; border:0; background:#000}
.demo .hint{position:absolute; inset:auto 16px 16px 16px; color:var(--ink-dim); font-size:14px}

/* Contact */
form{display:grid; gap:12px}
label{font-size:13px; color:var(--ink-dim)}
input, textarea{width:100%; background:#0a1533; border:1px solid rgba(255,255,255,.12); color:var(--ink); border-radius:12px; padding:12px 14px}
textarea{min-height:120px; resize:vertical}
.split{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 640px){.split{grid-template-columns:1fr}}

/* мапа як фон */
.phone-static .map{
    position: absolute; inset: 0;
    background: url('../images/layout/map.jpg') center/cover no-repeat;
    filter: saturate(1.05) contrast(1.02);
    z-index: 1;
}


/* маркер + пульс */
.phone-static .pin{
    position: absolute;
    left: 60%;
    top:  50%;
    transform: translate(-50%, -100%); /* «вістря» в точку */
    width: 18px; height: 18px;
    background: #ef4444;               /* червоний */
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    z-index: 3;
    isolation: isolate; /* щоб псевдоелементи не «вилазили» */
}

/* хвилі-пульси */
@keyframes pinPulse {
    0%   { transform: translate(-50%, -50%) scale(.5); opacity: .7; }
    70%  { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
    100% { opacity: 0; }
}

.phone-static .pin::before,
.phone-static .pin::after{
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 28px; height: 28px;
    border: 2px solid rgba(239,68,68,.7);
    background: rgba(239,68,68,.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pinPulse 1.6s ease-out infinite;
    z-index: -1;
}

/* друга хвиля з невеликою затримкою */
.phone-static .pin::after{
    animation-delay: .8s;
}

/* маленька тінь під маркером (імітація контакту з поверхнею) */
.phone-static .pin::marker-shadow{} /* зарезервовано, не використовується */

footer{border-top:1px solid rgba(255,255,255,.08); color:var(--ink-dim); padding:24px 0; font-size:14px}