
:root{
  --navy:#061321;
  --navy2:#0a2038;
  --navy3:#102d4e;
  --blue:#0877e8;
  --blue2:#18a8ff;
  --cyan:#77d8ff;
  --silver:#d8e0e9;
  --text:#132238;
  --muted:#617188;
  --soft:#f2f6fa;
  --line:#dbe5ef;
  --white:#fff;
  --shadow:0 20px 54px rgba(15,37,65,.12);
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:9999}

.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(5,16,30,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.09)
}
.nav{height:82px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:13px;color:#fff;min-width:280px}
.brand img{width:58px;height:58px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.brand-copy{line-height:1.12}
.brand-copy strong{display:block;font-size:14px}
.brand-copy span{display:block;color:#9db2c9;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.menu{display:flex;align-items:center;gap:25px;margin-left:auto}
.menu a{color:#c6d3e1;font-size:14px;font-weight:700}
.menu a:hover{color:#fff}
.header-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;border-radius:999px;
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue2));
  font-weight:800;font-size:14px
}
.menu-toggle{
  display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff
}

.hero{
  position:relative;overflow:hidden;color:#fff;padding:88px 0 80px;
  background:
    radial-gradient(circle at 82% 22%,rgba(24,168,255,.28),transparent 31%),
    radial-gradient(circle at 10% 85%,rgba(8,119,232,.20),transparent 34%),
    linear-gradient(145deg,#04101f 0%,#0a213c 55%,#061321 100%);
}
.hero:before{
  content:"";position:absolute;inset:0;opacity:.25;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.22fr .78fr;gap:60px;align-items:center}
.logo-hero{
  width:min(520px,100%);height:auto;border-radius:50%;padding:0;
  background:transparent;filter:drop-shadow(0 30px 65px rgba(0,0,0,.42));
  margin-bottom:30px
}
.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 13px;
  color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase
}
.eyebrow:before{content:"";width:28px;height:2px;background:currentColor;border-radius:9px}
.hero h1{
  font-size:clamp(43px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;
  margin:0;max-width:850px
}
.hero .lead{
  max-width:800px;margin:25px 0 0;color:#bdccdc;font-size:clamp(17px,1.9vw,21px)
}
.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:31px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 23px;border-radius:999px;font-weight:850;border:1px solid transparent
}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.045)}
.hero-card{
  padding:30px;border-radius:26px;border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.06);box-shadow:0 26px 65px rgba(0,0,0,.2)
}
.hero-card h2{font-size:28px;line-height:1.2;margin:0 0 12px}
.hero-card p{margin:0;color:#b9c9da}
.quick-list{display:grid;gap:12px;margin-top:23px}
.quick-list div{display:flex;gap:11px;color:#e0eaf4;font-size:14px}
.quick-list i{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(24,168,255,.15);color:#67c9ff;font-style:normal;font-weight:900
}
.status{
  margin-top:24px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);font-size:13px;color:#aebfd2
}
.status strong{color:#fff}

.metrics{position:relative;z-index:4;margin-top:-31px}
.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)
}
.metric{padding:27px;min-height:130px}
.metric+.metric{border-left:1px solid var(--line)}
.metric strong{display:block;color:var(--blue);font-size:29px;line-height:1.05;letter-spacing:-.03em}
.metric span{display:block;font-weight:850;margin-top:9px;font-size:14px}
.metric small{display:block;color:var(--muted);font-size:12px;margin-top:5px}

.section{padding:94px 0}
.section-soft{background:var(--soft)}
.section-dark{background:var(--navy);color:#fff}
.section-head{
  display:grid;grid-template-columns:1fr .72fr;gap:45px;align-items:end;margin-bottom:42px
}
.section h2{font-size:clamp(34px,4.4vw,53px);line-height:1.08;letter-spacing:-.035em;margin:0}
.section-intro{margin:0;color:var(--muted);font-size:17px}
.section-dark .section-intro{color:#aebed0}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:0 9px 28px rgba(18,39,65,.06)
}
.service-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:1px solid var(--line)}
.service-body{padding:25px}
.service-kicker{font-size:11px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.service-card h3{font-size:23px;line-height:1.22;margin:8px 0 10px}
.service-card p{margin:0;color:var(--muted)}

.focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.focus-card{
  padding:31px;border-radius:22px;background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 27px rgba(18,39,65,.05)
}
.focus-card h3{font-size:25px;margin:0 0 11px;line-height:1.25}
.focus-card p{margin:0;color:var(--muted)}
.list{list-style:none;padding:0;margin:21px 0 0;display:grid;gap:12px}
.list li{display:flex;gap:11px;align-items:flex-start}
.list li:before{
  content:"✓";flex:0 0 23px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;background:#e8f3ff;color:var(--blue);font-size:12px;font-weight:900
}
.local-strip{
  margin-top:25px;padding:26px 29px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,#075fc7,#0ba3f4);
  display:grid;grid-template-columns:auto 1fr;gap:19px;align-items:center
}
.local-icon{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:24px}
.local-strip strong{font-size:19px}
.local-strip p{margin:4px 0 0;color:#e8f5ff}

.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.client{
  min-height:150px;padding:24px;border-radius:18px;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.055)
}
.client b{display:block;font-size:17px;margin-bottom:8px}
.client span{color:#aebed0;font-size:13px}

.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}
.founder-photo{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#fff}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.founder-photo figcaption{padding:13px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.story h3{font-size:31px;line-height:1.2;margin:0 0 16px}
.story p{margin:0 0 16px;color:var(--muted)}
.story-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.fact{padding:15px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.fact strong{display:block;font-size:14px}
.fact span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quality-card{padding:26px;border:1px solid var(--line);border-radius:19px;background:#fff}
.quality-card .badge{
  width:44px;height:44px;border-radius:13px;background:#e9f3ff;color:var(--blue);
  display:grid;place-items:center;font-weight:900;margin-bottom:17px
}
.quality-card h3{font-size:18px;margin:0 0 7px}
.quality-card p{margin:0;color:var(--muted);font-size:13px}

.contact{
  border-radius:29px;padding:50px;color:#fff;
  background:
    radial-gradient(circle at 90% 20%,rgba(24,168,255,.30),transparent 34%),
    linear-gradient(135deg,#04101f,#0a2745);
  display:grid;grid-template-columns:1fr .78fr;gap:45px;align-items:center
}
.contact h2{font-size:clamp(34px,4.3vw,52px)}
.contact p{color:#b7c7d9;font-size:17px;margin:17px 0 0}
.contact-boxes{display:grid;gap:12px}
.contact-box{
  padding:17px 19px;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:rgba(255,255,255,.055)
}
.contact-box small{display:block;color:#91a7bd;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.11em}
.contact-box strong{display:block;margin-top:5px;overflow-wrap:anywhere}
.contact-note{color:#91a7bd;font-size:12px;margin-top:9px}

.footer{padding:33px 0;background:#030a13;color:#94a8bd;border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer-brand{display:flex;align-items:center;gap:13px;color:#fff}
.footer-brand img{width:62px;height:62px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.footer-links{display:flex;flex-wrap:wrap;gap:19px;font-size:13px}

.legal{background:var(--soft);padding:70px 0;min-height:75vh}
.legal-card{max-width:900px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:42px;box-shadow:var(--shadow)}
.legal-card h1{font-size:43px;margin:0 0 25px}
.legal-card h2{font-size:22px;margin:29px 0 8px}
.legal-card p,.legal-card li{color:var(--muted)}
.legal-card a{color:var(--blue);text-decoration:underline}

@media(max-width:1000px){
  .menu,.header-cta{display:none}
  .menu-toggle{display:block}
  .menu.open{
    display:flex;position:absolute;top:82px;left:0;right:0;padding:20px;
    background:#061321;flex-direction:column;align-items:flex-start;border-top:1px solid rgba(255,255,255,.08)
  }
  .hero-grid,.section-head,.story-grid,.contact{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .metric:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .metric:nth-child(4){border-top:1px solid var(--line)}
  .service-grid,.quality-grid{grid-template-columns:1fr 1fr}
  .client-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .container{width:min(100% - 28px,var(--max))}
  .nav{height:72px}
  .brand{min-width:0}
  .brand img{width:52px;height:52px}
  .brand-copy strong{font-size:12px}
  .brand-copy span{display:none}
  .menu.open{top:72px}
  .hero{padding:58px 0 65px}
  .logo-hero{padding:0;width:min(390px,100%)}
  .actions{display:grid}
  .btn{width:100%}
  .metrics{margin-top:-23px}
  .metrics-grid,.service-grid,.focus-grid,.client-grid,.story-facts,.quality-grid{grid-template-columns:1fr}
  .metric+.metric,.metric:nth-child(3),.metric:nth-child(4){border-left:0;border-top:1px solid var(--line)}
  .section{padding:70px 0}
  .local-strip{grid-template-columns:1fr}
  .contact{padding:32px 23px}
  .footer-inner{align-items:flex-start;flex-direction:column}
  .legal-card{padding:28px 22px}
}
