:root{
  --bg:#EEF1EE; --bg-raised:#FFFFFF; --bg-sunken:#E3E9E3;
  --text:#1C2422; --text-muted:#5B6663;
  --accent:#B9853A; --accent-strong:#8C5F22; --accent-tint:#F2E6D2;
  --teal:#1F6E74; --teal-tint:#DCEAEA;
  --border:#D7DDD7; --shadow:rgba(18,25,27,0.10);
  --font-display:'Unbounded','Arial Black',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','Consolas',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10161A; --bg-raised:#171F23; --bg-sunken:#0B1013;
    --text:#E8ECE9; --text-muted:#9BA6A2;
    --accent:#D6A75A; --accent-strong:#F0C179; --accent-tint:#2A2114;
    --teal:#57ADB3; --teal-tint:#152B2E;
    --border:#263130; --shadow:rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --bg:#10161A; --bg-raised:#171F23; --bg-sunken:#0B1013;
  --text:#E8ECE9; --text-muted:#9BA6A2;
  --accent:#D6A75A; --accent-strong:#F0C179; --accent-tint:#2A2114;
  --teal:#57ADB3; --teal-tint:#152B2E;
  --border:#263130; --shadow:rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-strong); font-weight:600;
}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.muted{color:var(--text-muted);}
section{padding:clamp(56px,9vw,104px) 0;}
.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:13px 26px;
  font-family:var(--font-body); font-weight:600; font-size:0.95rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:#1C1408; box-shadow:0 6px 18px -6px var(--shadow);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal);}
.btn-sm{padding:9px 18px; font-size:0.85rem;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1120px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand svg{width:34px; height:22px; display:block;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-0.01em;}
nav.mainnav{display:flex; gap:26px;}
nav.mainnav a{
  font-size:0.9rem; font-weight:500; text-decoration:none; color:var(--text-muted); transition:color .15s;
  position:relative; padding-bottom:2px;
}
nav.mainnav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent);
  transition:right .25s cubic-bezier(.65,0,.35,1);
}
nav.mainnav a:hover{color:var(--text);}
nav.mainnav a:hover::after{right:0;}
nav.mainnav a.current{color:var(--text);}
nav.mainnav a.current::after{right:0; background:var(--teal);}
.header-cta{display:flex; align-items:center; gap:12px;}
@media (max-width:820px){ nav.mainnav{display:none;} }

/* ---------- breadcrumb ---------- */
.breadcrumb{font-size:0.82rem; color:var(--text-muted); display:flex; gap:8px; align-items:center; margin-bottom:20px;}
.breadcrumb a{text-decoration:none; color:var(--text-muted);}
.breadcrumb a:hover{color:var(--teal);}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding-top:clamp(64px,10vw,120px); padding-bottom:50px;}

.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-bg svg{width:100%; height:100%; display:block;}
.hero-bg .flow{opacity:0.16; vector-effect:non-scaling-stroke;}
.flow-1{animation:flow-drift-a 22s ease-in-out infinite;}
.flow-2{animation:flow-drift-b 17s ease-in-out infinite;}
.flow-3{animation:flow-drift-a 26s ease-in-out infinite reverse;}
.flow-4{animation:flow-drift-b 19s ease-in-out infinite reverse;}
.flow-5{animation:flow-drift-a 30s ease-in-out infinite;}
@keyframes flow-drift-a{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(-60px);} }
@keyframes flow-drift-b{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(50px);} }
.hero-glow{
  position:absolute; top:10%; right:8%; width:520px; height:520px; max-width:60vw; max-height:60vw;
  background:radial-gradient(circle, var(--teal) 0%, transparent 70%);
  opacity:0.14; filter:blur(10px); border-radius:50%;
}
.hero > .container{position:relative; z-index:1;}
@media (prefers-reduced-motion:reduce){ .flow-1,.flow-2,.flow-3,.flow-4,.flow-5{animation:none;} }
@media (max-width:900px){ .hero-glow{display:none;} }
.hero-wave{position:absolute; left:0; right:0; bottom:0; height:50px; line-height:0; z-index:1;}
.hero-wave svg{width:100%; height:100%; display:block;}
#waveBack{animation:wave-drift-1 14s ease-in-out infinite;}
#waveFront{animation:wave-drift-2 10s ease-in-out infinite;}
@keyframes wave-drift-1{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(-30px);} }
@keyframes wave-drift-2{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(25px);} }
@media (prefers-reduced-motion:reduce){ #waveBack,#waveFront{animation:none;} }
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(2.4rem,4.6vw,4rem); line-height:1.04; margin:14px 0 20px;}
.hero p.lead{font-size:1.1rem; color:var(--text-muted); max-width:46ch; margin-bottom:30px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}

.page-hero{padding:clamp(48px,8vw,88px) 0 20px;}
.page-hero h1{font-size:clamp(2rem,4vw,3rem); margin:10px 0 16px;}
.page-hero p.lead{font-size:1.05rem; color:var(--text-muted); max-width:60ch;}

.city-switch{
  display:inline-flex; padding:4px; background:var(--bg-sunken); border:1px solid var(--border); border-radius:999px; gap:4px;
  position:relative;
}
.city-switch button{
  border:none; background:transparent; padding:9px 20px; border-radius:999px; font-family:var(--font-body);
  font-weight:600; font-size:0.88rem; color:var(--text-muted); cursor:pointer; transition:color .2s;
  position:relative; z-index:1;
}
.city-switch button.active{color:#1C1408;}
.city-switch .thumb{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:var(--accent);
  border-radius:999px; transition:transform .28s cubic-bezier(.65,0,.35,1); box-shadow:0 4px 12px -4px var(--shadow);
}
.city-switch[data-city="astana"] .thumb{transform:translateX(100%);}
.city-note{font-size:0.82rem; color:var(--text-muted); margin-top:10px;}

.city-link-badge{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--border); background:var(--bg-sunken); font-size:0.85rem; font-weight:600;
  color:var(--text); text-decoration:none; transition:border-color .2s;
}
.city-link-badge:hover{border-color:var(--accent);}
@media (max-width:600px){
  .city-link-badge{padding:8px 12px; font-size:0.78rem;}
}

.gauge-wrap{position:relative; display:flex; justify-content:center; align-items:center;}
.gauge-ring{width:min(340px,90%); aspect-ratio:1; position:relative;}
.gauge-ring svg{width:100%; height:100%;}
#impeller{transform-origin:340px 340px; animation:spin-impeller 0.6s linear infinite; transition:animation-duration .3s ease;}
@keyframes spin-impeller{ to{ transform:rotate(360deg); } }
.gauge-ring:hover #impeller{ animation-duration:0.15s; }
#needle{transform-origin:430px 470px; animation:spin-needle 14s linear infinite;}
@keyframes spin-needle{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #impeller, #needle{animation:none;} }

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-raised);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:32px 0;}
@media (max-width:760px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
.trust-item{display:flex; flex-direction:column; gap:4px;}
.trust-num{font-family:var(--font-mono); font-size:1.6rem; font-weight:600; color:var(--teal);}
.trust-label{font-size:0.82rem; color:var(--text-muted);}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in-view{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1; transform:none; transition:none;} }

.section-head{max-width:60ch; margin-bottom:44px;}
.section-head h2{font-size:clamp(1.7rem,2.6vw,2.3rem); margin-top:10px;}
.section-head p{color:var(--text-muted); margin-top:12px; font-size:1.02rem;}

/* ---------- services picker ---------- */
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){ .service-grid{grid-template-columns:1fr;} }
.service-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--text);
  transition:border-color .25s, transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s;
}
.service-card:hover{border-color:var(--accent); transform:translateY(-6px); box-shadow:0 20px 40px -18px var(--shadow);}
.service-icon{width:44px; height:44px; border-radius:12px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; color:var(--accent-strong);}
.service-card h3{font-size:1.15rem; font-family:var(--font-body); font-weight:700;}
.service-card p{margin:0; color:var(--text-muted); font-size:0.92rem;}
.service-price{font-family:var(--font-mono); color:var(--accent-strong); font-weight:600; font-size:0.95rem; margin-top:auto;}
.service-arrow{font-family:var(--font-mono); color:var(--teal); font-size:0.85rem; display:flex; align-items:center; gap:6px;}

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){ .price-grid{grid-template-columns:1fr;} }
.price-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .25s, transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s;
}
.price-card:hover{
  border-color:var(--accent); transform:translateY(-6px) scale(1.015);
  box-shadow:0 20px 40px -18px var(--shadow);
}
.price-card .price-tag{transition:transform .25s cubic-bezier(.2,.8,.3,1.3);}
.price-card:hover .price-tag{transform:scale(1.06); transform-origin:left center;}
.price-tag{font-family:var(--font-mono); font-size:2.1rem; font-weight:600; color:var(--accent-strong);}
.price-tag small{font-size:1rem; font-weight:500; color:var(--text-muted); font-family:var(--font-body);}
.price-card h3{font-size:1.12rem; font-family:var(--font-body); font-weight:700;}
.price-card p{color:var(--text-muted); font-size:0.92rem; margin:0;}
.price-note{margin-top:22px; font-size:0.86rem; color:var(--text-muted);}

.price-city-switch{margin-bottom:16px;}
.price-table-wrap{background:var(--bg-raised); border:1px solid var(--border); border-radius:16px; padding:4px 20px; margin-bottom:10px;}
.price-table{width:100%; border-collapse:collapse;}
.price-table td{padding:14px 0; border-bottom:1px solid var(--border); font-size:0.95rem;}
.price-table tr:last-child td{border-bottom:none;}
.price-table td:first-child{color:var(--text-muted);}
.price-table td:last-child{text-align:right; font-family:var(--font-mono); font-weight:600; color:var(--accent-strong); font-variant-numeric:tabular-nums;}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }

.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){ .timeline{grid-template-columns:1fr;} }
.step{border-left:2px solid var(--border); padding-left:18px; position:relative; transition:border-color .25s;}
.step:hover{border-color:var(--accent);}
.step-num{font-family:var(--font-mono); color:var(--teal); font-size:0.85rem; font-weight:600; display:block; margin-bottom:8px; transition:transform .25s cubic-bezier(.2,.8,.3,1.3), color .25s;}
.step:hover .step-num{transform:scale(1.15); transform-origin:left center; color:var(--accent-strong);}
.step h3{font-size:1rem; font-family:var(--font-body); font-weight:700; margin-bottom:6px;}
.step p{margin:0; color:var(--text-muted); font-size:0.9rem;}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-body);
  font-size:1.02rem; font-weight:600; color:var(--text);
}
.faq-q .plus{font-family:var(--font-mono); color:var(--accent-strong); font-size:1.3rem; transition:transform .25s; flex:none;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{margin:0 0 20px; color:var(--text-muted); max-width:66ch;}

/* ---------- blog listing ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:760px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:20px; padding:26px;
  text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:10px;
  transition:border-color .25s, transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s;
}
.blog-card:hover{border-color:var(--teal); transform:translateY(-5px); box-shadow:0 18px 36px -18px var(--shadow);}
.blog-card h3{font-size:1.08rem; font-family:var(--font-body); font-weight:700;}
.blog-card p{margin:0; color:var(--text-muted); font-size:0.92rem;}
.blog-card .service-arrow{margin-top:auto;}

/* ---------- article typography ---------- */
.article{max-width:70ch; margin:0 auto;}
.article h1{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:14px;}
.article .article-meta{color:var(--text-muted); font-size:0.88rem; margin-bottom:28px;}
.article h2{font-family:var(--font-body); font-weight:700; font-size:1.35rem; margin:40px 0 14px;}
.article p{margin:0 0 18px; font-size:1.02rem;}
.article ul{margin:0 0 18px; padding-left:22px;}
.article li{margin-bottom:8px;}
.callout{
  background:var(--teal-tint); border-left:3px solid var(--teal); border-radius:8px; padding:16px 20px;
  margin:24px 0; font-size:0.95rem;
}
.article-cta{
  margin-top:44px; padding:28px; border-radius:20px; background:var(--bg-raised); border:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.related-articles{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.related-articles a{color:var(--teal); text-decoration:none; font-size:0.95rem;}
.related-articles a:hover{text-decoration:underline;}

/* ---------- contacts ---------- */
.contact-panel{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:24px; padding:clamp(28px,4vw,44px);
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px;
}
@media (max-width:820px){ .contact-panel{grid-template-columns:1fr;} }
.phone-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.phone-list a{
  font-family:var(--font-mono); font-size:1.05rem; text-decoration:none; color:var(--text);
  display:flex; align-items:center; gap:10px; transition:color .2s, transform .2s; width:fit-content;
}
.phone-list a:hover{color:var(--teal); transform:translateX(6px);}
.wa-tag{font-family:var(--font-body); font-size:0.72rem; background:var(--teal-tint); color:var(--teal); padding:2px 8px; border-radius:999px; font-weight:600;}
.contact-side{background:var(--bg-sunken); border-radius:16px; padding:22px;}

/* ---------- water ripple on click ---------- */
.water-ripple{
  position:fixed; width:10px; height:10px; margin-left:-5px; margin-top:-5px;
  border-radius:50%; border:1px solid var(--teal); pointer-events:none; z-index:9999;
  filter:blur(0.4px);
  box-shadow:inset 0 0 4px rgba(255,255,255,0.25);
  animation:ripple-out 1s cubic-bezier(.22,.7,.35,1) forwards;
}
@keyframes ripple-out{
  0%{transform:scale(0); opacity:0.4;}
  60%{opacity:0.22;}
  100%{transform:scale(16); opacity:0;}
}

.float-whatsapp{
  position:fixed; right:20px; bottom:20px; z-index:50; width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#1C1408; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px var(--shadow); transition:transform .15s ease, background .15s ease;
}
.float-whatsapp:hover{background:var(--accent-strong); transform:translateY(-2px);}
@media (max-width:600px){ .float-whatsapp{right:16px; bottom:16px; width:52px; height:52px;} }

footer{border-top:1px solid var(--border); padding:36px 0; }
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-inner .brand-name{font-size:0.95rem;}
.footer-links{display:flex; gap:20px; font-size:0.85rem; color:var(--text-muted);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--text);}