:root{
  --blue:#1259b5; --blue-2:#1a6fd4; --blue-d:#0e4894; --blue-l:#f1f6fc;
  --navy:#0c2340; --ink:#122a46; --body:#53667d; --muted:#8395a9;
  --line:#e8eef5; --line-2:#dfe8f2;
  --soft:#fbfcfe; --panel:#f5f9fd;
  --radius:20px; --wrap:1120px;
  --sh-card:0 1px 2px rgba(15,40,72,.04), 0 12px 28px rgba(15,40,72,.055);
  --sh-btn:0 1px 2px rgba(11,38,76,.16), 0 8px 18px rgba(18,89,181,.20);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:22px; height:68px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand .mark{width:46px; height:46px; flex:none}
.brand b{display:block; font-size:13px; font-weight:800; letter-spacing:.055em; color:var(--navy); line-height:1.3; text-transform:uppercase}
.brand span{display:block; font-size:10.5px; color:var(--muted); letter-spacing:.01em; margin-top:2px}
.nav{display:flex; align-items:center; align-self:stretch; gap:26px; margin-left:auto}
.nav a{display:flex; align-items:center; height:100%; font-size:13px; font-weight:500; color:#4f6277; white-space:nowrap; letter-spacing:.005em; position:relative; transition:color .18s}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--blue); opacity:0; transition:opacity .18s}
.nav a:hover{color:var(--blue)}
.nav a.on{color:var(--navy); font-weight:600}
.nav a.on::after{opacity:1}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:.005em; border-radius:12px; padding:12px 22px;
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, background .18s, border-color .18s, color .18s}
.btn svg{width:15px; height:15px; flex:none}
.btn-pri{background:linear-gradient(180deg,var(--blue-2) 0%,var(--blue) 100%); border-color:#1051a4; color:#fff; box-shadow:var(--sh-btn)}
.btn-pri:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(11,38,76,.18), 0 14px 26px rgba(18,89,181,.26); background:linear-gradient(180deg,#1b74dc 0%,#1460c2 100%)}
.btn-pri:active{transform:translateY(0)}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line-2); box-shadow:0 1px 2px rgba(15,40,72,.05)}
.btn-ghost:hover{transform:translateY(-1px); border-color:#c6d7e9; box-shadow:0 8px 20px rgba(15,40,72,.09)}
.btn-ghost .tg{fill:#2b9fd9}
.hdr .btn{flex:none; margin-left:20px; padding:10px 20px; font-size:13px}
.burger{display:none; margin-left:auto; width:42px; height:38px; border:1px solid var(--line-2); border-radius:11px; background:#fff; align-items:center; justify-content:center; cursor:pointer}
.burger svg{width:18px; height:18px; stroke:var(--navy); fill:none; stroke-width:1.7}

/* ---------- hero ---------- */
.hero{position:relative; margin-top:26px; border-radius:24px; overflow:hidden; min-height:466px;
  background:linear-gradient(118deg,#12304f 0%,#0c2440 46%,#081b31 72%,#061424 100%);
  box-shadow:0 1px 2px rgba(15,40,72,.05), 0 20px 46px rgba(12,35,64,.10)}
.hero-earth{position:absolute; z-index:1; right:-24px; top:50%; transform:translateY(-50%); width:556px; height:556px; object-fit:contain; pointer-events:none}
.hero::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(96deg,
    #ffffff 0%, #fbfdfe 22%, rgba(250,252,254,.985) 36%,
    rgba(246,250,253,.90) 46%, rgba(240,246,251,.62) 55%,
    rgba(232,240,248,.24) 60%, rgba(226,236,246,.07) 66%, rgba(226,236,246,0) 72%)}
.hero::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(270deg, rgba(4,12,24,.60) 0%, rgba(4,12,24,.30) 9%, rgba(4,12,24,.08) 16%, rgba(4,12,24,0) 23%)}
.hero-in{position:relative; z-index:3; padding:56px 48px 50px; max-width:724px}
.eyebrow{display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; padding:7px 15px 7px 12px;
  border-radius:999px; background:rgba(18,89,181,.07); border:1px solid rgba(18,89,181,.16);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#1259b5; font-weight:700}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--blue-2); box-shadow:0 0 0 3px rgba(26,111,212,.18)}
.hero h1{margin:0 0 18px; font-size:40px; line-height:1.2; font-weight:700; letter-spacing:-.028em; color:#0c2340; max-width:none; white-space:nowrap}
.hero p{margin:0 0 30px; font-size:15.5px; line-height:1.72; color:#3f5470; max-width:424px}
p.eyebrow{color:#1259b5}
.hero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px}
.msgrow{display:flex; flex-wrap:wrap; align-items:center; gap:17px}
.msg{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:500; color:#53677f; letter-spacing:.005em}
.msg i{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none}
.msg i svg{width:13px; height:13px; fill:#fff}
.i-tg{background:#2b9fd9}.i-wa{background:#26b862}.i-sg{background:#3f6fd0}.i-imo{background:#0fc2f2}.i-bip{background:#0e9e9a}
.hero-words{position:absolute; z-index:3; right:46px; top:66px; text-align:right; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:#8ba1ba; font-weight:500; line-height:2.3}
.hero-badge{position:absolute; z-index:3; right:46px; bottom:42px; display:flex; align-items:center; gap:11px; color:#8ca3bc}
.hero-badge svg{width:24px; height:24px; stroke:#7d96b1; fill:none; stroke-width:1.3; flex:none}
.hero-badge div{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; line-height:1.9; text-align:left}

/* ---------- sections ---------- */
section{margin-top:30px}
.h2{margin:0 0 5px; font-size:26px; font-weight:700; letter-spacing:-.025em; color:var(--navy)}
.sub{margin:0 0 26px; font-size:13.5px; color:var(--muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}

/* service cards */
.svc{display:flex; flex-direction:column; align-items:stretch; gap:22px; padding:22px; border-radius:var(--radius);
  background:var(--soft); border:1px solid var(--line); box-shadow:var(--sh-card); transition:box-shadow .22s, transform .22s}
.svc:hover{transform:translateY(-2px); box-shadow:0 1px 2px rgba(15,40,72,.05), 0 18px 38px rgba(15,40,72,.09)}
.svc.alt{background:#fafcfe}
.svc .pic{width:100%; height:360px; flex:none; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:10px;
  background:linear-gradient(140deg,#f6f9fd 0%,#eaf1f9 100%)}
.svc .pic img{max-width:100%; max-height:100%; width:auto; height:auto}
.svc h3{margin:0 0 9px; font-size:18px; font-weight:700; letter-spacing:-.015em; color:var(--navy); line-height:1.3}
.svc p{margin:0 0 18px; font-size:13px; line-height:1.68; color:var(--body)}
.svc .btn{padding:10px 18px; font-size:12.5px; border-radius:11px}

/* features */
.feat{background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:36px 34px 38px}
.feat-head{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px}
.feat-head .h2{font-size:22px; margin:0}
.feat-head .btn{flex:none; padding:11px 18px; font-size:13px}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 24px}
.feat-i svg{width:23px; height:23px; stroke:var(--blue); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px}
.feat-i h4{margin:0 0 6px; font-size:13.5px; font-weight:700; letter-spacing:-.005em; color:var(--navy)}
.feat-i p{margin:0; font-size:12px; line-height:1.6; color:var(--body)}

/* ---------- contact ---------- */
.contact{position:relative; overflow:hidden; border-radius:24px; padding:46px 44px;
  background:linear-gradient(122deg,#0d2440 0%,#123657 58%,#0a1f38 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 2px rgba(12,35,64,.10), 0 20px 44px rgba(12,35,64,.16)}
.contact-in{display:grid; grid-template-columns:1fr 210px; gap:44px; align-items:center}
.contact h2{margin:0 0 12px; font-size:28px; font-weight:700; letter-spacing:-.025em; color:#fff; line-height:1.25}
.contact p{margin:0 0 28px; font-size:14px; line-height:1.72; color:#a3b8cf; max-width:470px}
.msg-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:580px}
.msg-btn{display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:13px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); color:#eaf1f8;
  font-size:13.5px; font-weight:600; transition:transform .18s, background .18s, border-color .18s}
.msg-btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); transform:translateY(-1px)}
.msg-btn i{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none}
.msg-btn i svg{width:15px; height:15px; fill:#fff}
.contact-lines{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:580px; margin-top:12px}
.contact-line{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:13px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  transition:transform .18s, background .18s, border-color .18s}
.contact-line:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); transform:translateY(-1px)}
.contact-line i{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.08)}
.contact-line i svg{width:15px; height:15px; stroke:#bcd3ea; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.contact-line b{display:block; font-size:13.5px; font-weight:600; color:#fff; letter-spacing:.01em; white-space:nowrap}
.contact-line em{display:block; font-style:normal; font-size:11px; color:#8fa6bf; margin-top:2px}
.contact-note{margin:20px 0 0; font-size:12px; color:#8fa6bf}
.contact-phone{width:100%; max-width:178px; margin:0 auto}

/* ---------- service pages ---------- */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0 16px; font-size:12px; color:var(--muted)}
.crumbs a{transition:color .18s}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:#adbbcb}
.page-head{display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:center;
  background:linear-gradient(122deg,#f8fbfe 0%,#eef4fb 100%); border:1px solid var(--line);
  border-radius:24px; padding:44px 44px; margin-top:0}
.page-head h1{margin:0 0 16px; font-size:34px; line-height:1.22; font-weight:700; letter-spacing:-.028em; color:var(--navy)}
.page-head .lead{margin:0 0 28px; font-size:15px; line-height:1.72; color:#3f5470; max-width:520px}
.page-head-pic{border-radius:18px; padding:14px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-card)}
.page-head-pic img{width:100%; height:auto}

.article{max-width:760px; margin-top:40px}
.article h2{margin:34px 0 12px; font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--navy)}
.article h2:first-child{margin-top:0}
.article p{margin:0 0 14px; font-size:14.5px; line-height:1.78; color:var(--body)}
.article ul{margin:0 0 16px; padding-left:20px; font-size:14.5px; line-height:1.78; color:var(--body)}
.article li{margin-bottom:6px}
.placeholder{border:1px dashed #cfdcea; border-radius:16px; padding:28px 30px; background:#fafcfe}
.placeholder h2{margin:0 0 10px; font-size:17px; color:var(--navy)}
.placeholder p{margin:0; font-size:13.5px; line-height:1.75; color:#7f91a6}

/* ---------- footer ---------- */
.ftr{margin-top:34px; background:#0b1f36; color:#b3c4d6}
.ftr-top{display:flex; align-items:center; gap:26px; padding:30px 0 26px}
.ftr .brand b{color:#fff}
.ftr .brand span{color:#859bb3}
.ftr-nav{display:flex; gap:20px; margin:0 auto; flex-wrap:nowrap}
.ftr-nav a{font-size:12.5px; color:#b3c4d6; white-space:nowrap; transition:color .18s}
.ftr-nav a:hover{color:#fff}
.soc{display:flex; gap:10px}
.soc i{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; transition:transform .18s}
.soc i:hover{transform:translateY(-2px)}
.soc i svg{width:14px; height:14px; fill:#fff}
.ftr-bot{display:flex; gap:20px; align-items:center; padding:16px 0 30px; border-top:1px solid rgba(255,255,255,.07)}
.ftr-bot p{margin:0; font-size:10.5px; color:#778da5}
.ftr-contacts{display:flex; align-items:center; gap:10px; margin-left:26px !important; font-size:11.5px !important; color:#c2d4e6 !important}
.ftr-contacts a{transition:color .18s}
.ftr-contacts a:hover{color:#fff}
.ftr-contacts span{color:#4f6880}
.ftr-bot p:last-child{margin-left:auto; text-align:right; max-width:440px; line-height:1.8}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .hdr .btn{display:none}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero{min-height:0}
  .hero-earth{width:420px; height:420px; right:-130px; opacity:.92}
  .hero h1{font-size:31px; white-space:normal}
  .hero-in{padding:40px 28px 36px}
  .hero-words,.hero-badge{display:none}
  .grid2{grid-template-columns:1fr}
  .feat-head{flex-direction:column; align-items:flex-start; gap:16px}
  .contact{padding:38px 28px}
  .contact-in{grid-template-columns:1fr; gap:30px}
  .contact-phone{display:none}
  .page-head{grid-template-columns:1fr; gap:28px; padding:34px 28px}
  .page-head-pic{max-width:340px}
  .ftr-top{flex-wrap:wrap}
  .ftr-nav{margin:0; order:3; width:100%; flex-wrap:wrap; gap:16px 20px}
}
@media (max-width:640px){
  .hero{background:linear-gradient(168deg,#ffffff 0%,#f2f7fb 48%,#e2ebf4 100%)}
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 72%)}
  .hero::after{display:none}
  .hero-earth{top:auto; bottom:-64px; right:-48px; transform:none; width:250px; height:250px; opacity:1}
  .hero-in{padding-bottom:150px}
  .eyebrow{letter-spacing:.16em}
  .hero h1{font-size:25px; white-space:normal}
  .hero p{font-size:14.5px}
  .svc{flex-direction:column; align-items:flex-start}
  .svc .pic{height:260px}
  .feat{padding:28px 22px 30px}
  .feat-grid{grid-template-columns:1fr 1fr; gap:22px 18px}
  .msg-btns{grid-template-columns:1fr 1fr}
  .contact-lines{grid-template-columns:1fr}
  .contact-line b{font-size:12.5px}
  .contact h2{font-size:23px}
  .page-head h1{font-size:26px}
  .ftr-bot{flex-direction:column; align-items:flex-start}
  .ftr-bot p:last-child{margin-left:0; text-align:left}
  .ftr-contacts{margin-left:0 !important; flex-wrap:wrap}
}