:root {
  --navy-950: #050a16;
  --navy-900: #0a1428;
  --navy-800: #0f1e3b;
  --navy-700: #152a4d;
  --blue-500: #2f7fff;
  --blue-400: #4d94ff;
  --blue-300: #7cb2ff;
  --ice-50: #f5f8fc;
  --ice-100: #eaf1fb;
  --white: #ffffff;
  --slate-400: #8a98b3;
  --slate-500: #66748f;
  --slate-600: #4b5568;
  --green-400: #39d98a;
  --amber-400: #ffb545;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 20px 50px -20px rgba(5, 10, 22, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--navy-900);
  background: var(--ice-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 0;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--navy-900);
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(47, 127, 255, .18);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(.97);
}

.btn-primary {
  background: var(--blue-500);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(47, 127, 255, .55);
}

.btn-primary:hover {
  background: var(--blue-400);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(47, 127, 255, .6);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
}

.btn-dark {
  background: var(--navy-900);
  color: #fff;
}

.btn-dark:hover {
  background: var(--navy-800);
  transform: translateY(-2px);
}

/* ===== NAV ===== */

header.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(245, 248, 252, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 30, 59, .06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--navy-900);
}

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-500));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.brand small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--slate-500);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--slate-600);
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--blue-500);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy-900);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

/*==============================
    LOGIN BUTTON
==============================*/

.btn-outline{

    padding:12px 22px;

    border:1.5px solid var(--blue-500);

    border-radius:12px;

    color:var(--blue-500);

    background:transparent;

    font-weight:600;

    transition:.3s;

}

.btn-outline:hover{

    background:var(--blue-500);

    color:#fff;

}

/*==============================
    HAMBURGER
==============================*/

.nav-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    gap:6px;

}

.nav-toggle span{

    width:26px;

    height:2px;

    background:var(--navy-900);

    transition:.35s;

    margin:auto;

}

/*==============================
    MOBILE
==============================*/

@media(max-width:992px){

.nav-toggle{

display:flex;

}

.nav-links{

position:fixed;

top:78px;

left:0;

right:0;

background:#fff;

padding:30px;

display:flex;

flex-direction:column;

gap:20px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

transform:translateY(-130%);

transition:.35s;

z-index:99;

}

.nav-links.active{

transform:translateY(0);

}

.nav-links a{

font-size:16px;

}

.nav-cta{

display:none;

}

.mobile-login{

display:inline-flex;

justify-content:center;

align-items:center;

padding:14px;

border-radius:12px;

background:var(--blue-500);

color:#fff !important;

font-weight:600;

margin-top:10px;

}

}

@media(min-width:993px){

.mobile-login{

display:none;

}

}

/* ===== HERO ===== */

.hero {
  position: relative;
  padding-top: 78px;
  min-height: 92vh;
  display: flex;
  align-items: stretch;
  background: var(--ice-50);
  overflow: hidden;
}

.hero-dark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background:
    radial-gradient(ellipse 700px 520px at 78% 12%, rgba(47, 127, 255, .28), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950) 75%);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
}

/* Interactive grid overlay: replaces the old static ::after background-grid.
   Requires a wrapper of real .grid-cell divs inside .hero-dark (see JS snippet below). */
.hero-grid {
  position: absolute;
  inset: 0;
  display: grid;
  /* grid-template-columns: repeat(auto-fill, 46px); */
  grid-auto-rows: 46px;
  mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
  pointer-events: auto;
}

.grid-cell {
  border-right: 1px solid rgba(124, 178, 255, .06);
  border-bottom: 1px solid rgba(124, 178, 255, .06);
  transition: background .35s var(--ease);
}

.grid-cell:hover {
  background: rgba(47, 127, 255, .22);
  transition: background .12s var(--ease);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 20px;
}

.hero-left {
  padding: 96px 0 96px 0;
  max-width: 600px;
}

.hero-left .eyebrow {
  color: var(--blue-500);
  margin-bottom: 22px;
}

.hero-left h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  margin-bottom: 22px;
}

.hero-left h1 .hl {
  color: var(--blue-500);
}

.hero-left p.lede {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--slate-600);
  max-width: 490px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.trust-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-item .ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ice-100);
  border: 1px solid rgba(15, 30, 59, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
  flex-shrink: 0;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.trust-item:hover .ic {
  background: var(--blue-500);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 14px rgba(37, 99, 235, .3);
}

.trust-item .ic svg {
  width: 17px;
  height: 17px;
}

.trust-item span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-900);
}

.trust-item small {
  display: block;
  font-size: 11px;
  color: var(--slate-500);
}

.hero-right {
  position: relative;
  padding: 40px 32px 40px 0;
}

.status-card {
  position: relative;
  margin-left: auto;
  max-width: 380px;
  background: rgba(15, 30, 59, .55);
  border: 1px solid rgba(124, 178, 255, .22);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

.status-card .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(124, 178, 255, .22);
}

.status-card .sc-head .live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--green-400);
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-400);
  position: relative;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--green-400);
  animation: pulse-ring 2.2s var(--ease) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(.6);
    opacity: .9;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.status-card .sc-head .id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--slate-400);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--slate-400);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-radius: 6px;
  transition: background .2s var(--ease), padding-left .2s var(--ease);
}

.status-row:hover {
  background: rgba(255, 255, 255, .06);
  padding-left: 8px;
}

.status-row:last-of-type {
  border-bottom: none;
}

.status-row .val {
  font-weight: 600;
}

.status-row .val.ok {
  color: var(--green-400);
}

.status-row .val.warn {
  color: var(--amber-400);
}

.status-row .val.blue {
  color: var(--blue-300);
}

.sc-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(124, 178, 255, .22);
  font-size: 11px;
  color: var(--slate-400);
  line-height: 1.5;
}

.sc-foot strong {
  color: #fff;
}

.node-graphic {
  position: absolute;
  top: -6%;
  right: -6%;
  width: 280px;
  height: 280px;
  opacity: .9;
  pointer-events: none;
}

/* ===== SECTION HEADS ===== */

.section {
  padding: 120px 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: 64px;
}

.section-head .eyebrow {
  color: var(--blue-500);
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  margin-bottom: 16px;
}

.section-head p {
  font-size: 16px;
  color: var(--slate-600);
  line-height: 1.65;
}

.light-on-dark .section-head h2 {
  color: #fff;
}

.light-on-dark .section-head p {
  color: var(--slate-400);
}

/* ===== SERVICES ===== */

.services {
  background: var(--navy-950);
  position: relative;
  overflow: hidden;
}

.services::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 178, 255, .4), transparent);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(124, 178, 255, .1);
  border: 1px solid rgba(124, 178, 255, .1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.svc-card {
  background: var(--navy-900);
  padding: 38px 32px;
  transition: background .3s var(--ease);
  position: relative;
}

.svc-card:hover {
  background: var(--navy-800);
}

.svc-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-500);
  letter-spacing: .1em;
  margin-bottom: 22px;
  display: block;
}

.svc-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(47, 127, 255, .18), rgba(47, 127, 255, .04));
  border: 1px solid rgba(124, 178, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-300);
  margin-bottom: 22px;
}

.svc-icon svg {
  width: 22px;
  height: 22px;
}

.svc-card h3 {
  color: #fff;
  font-size: 18.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

.svc-card p {
  color: var(--slate-400);
  font-size: 14px;
  line-height: 1.65;
}

.svc-card.wide {
  grid-column: span 1;
}

/* ===== APPROACH / WHY ===== */

.why {
  background: var(--ice-50);
}

.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.why-visual {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.why-visual .rings {
  position: absolute;
  inset: 0;
}

.why-visual .core {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blue-400), var(--navy-900) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px rgba(47, 127, 255, .5);
}

.why-visual .core svg {
  width: 46px;
  height: 46px;
  color: #fff;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.why-item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(15, 30, 59, .08);
}

.why-item:last-child {
  border-bottom: none;
}

.why-item .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--blue-500);
  font-weight: 600;
  width: 64px;
  flex-shrink: 0;
  padding-top: 2px;
}

.why-item h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.why-item p {
  font-size: 14.5px;
  color: var(--slate-600);
  line-height: 1.6;
  max-width: 460px;
}

/* ===== TESTIMONALS ===== */

.trusted-section{

    padding:110px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;

}

.trusted-section::before{

    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(rgba(47,127,255,.12),transparent 70%);
    top:-220px;
    right:-150px;

}

.section-header{

    max-width:700px;
    margin:0 auto 70px;
    text-align:center;

}

.section-tag{

    display:inline-block;
    padding:8px 18px;
    background:#edf4ff;
    color:#2f7fff;
    border-radius:100px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:18px;

}

.section-header h2{

    font-size:2.7rem;
    color:#0f1e3b;
    margin-bottom:20px;
    line-height:1.2;

}

.section-header p{

    color:#5b6780;
    font-size:1.08rem;
    line-height:1.8;

}

.trusted-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:28px;

}

.trust-card{

    background:#fff;
    padding:38px 30px;
    border-radius:22px;
    text-align:center;
    border:1px solid rgba(15,30,59,.06);

    transition:.35s ease;

    position:relative;
    overflow:hidden;

}

.trust-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;

    background:linear-gradient(90deg,#2f7fff,#5ba8ff);

    transform:scaleX(0);
    transition:.35s;

}

.trust-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(15,30,59,.10);

}

.trust-card:hover::before{

    transform:scaleX(1);

}

.trust-icon{

    width:75px;
    height:75px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2rem;

    border-radius:20px;

    background:#edf4ff;

    margin-bottom:25px;

    transition:.35s;

}

.trust-card:hover .trust-icon{

    transform:rotate(-8deg) scale(1.08);

    background:#2f7fff;
    color:#fff;

}

.trust-card h3{

    color:#0f1e3b;
    font-size:1.25rem;
    margin-bottom:10px;

}

.trust-card span{

    color:#6b7285;
    font-size:.95rem;

}

@media(max-width:768px){

.section-header h2{

font-size:2rem;

}

.trusted-section{

padding:80px 0;

}

}


/* ====== FOR CHOSE US ====== */

.why-choose{

    padding:110px 0;
    background:#fff;
    position:relative;

}

.why-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;
    margin-top:70px;

}

.why-card{

    background:#fff;
    border:1px solid rgba(15,30,59,.08);
    border-radius:22px;
    padding:35px;
    transition:.35s;
    position:relative;
    overflow:hidden;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 60px rgba(15,30,59,.08);

}

.why-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#2f7fff;
    transform:scaleY(0);
    transition:.35s;

}

.why-card:hover::before{

    transform:scaleY(1);

}

.featured{

    background:linear-gradient(135deg,#0f1e3b,#19345f);
    color:#fff;

}

.featured p{

    color:rgba(255,255,255,.75);

}

.badge{

    display:inline-block;
    background:rgba(255,255,255,.12);
    color:#7cc2ff;
    padding:8px 16px;
    border-radius:100px;
    margin-bottom:18px;
    font-size:.85rem;
    font-weight:700;

}

.why-icon{
    width:72px;
    height:72px;
    border-radius:18px;
    background:#edf4ff;
    color:#2f7fff;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:22px;

    transition:.35s ease;
}

.why-icon svg{
    width:34px;
    height:34px;
}

.why-card:hover .why-icon{
    background:#2f7fff;
    color:#fff;
    transform:rotate(-8deg) scale(1.08);
}

.why-card h3{

    margin-bottom:16px;
    color:#0f1e3b;

}

.featured h3{

    color:#fff;

}

.why-card p{

    color:#68758d;
    line-height:1.8;

}

.stats-grid{

    margin-top:80px;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:24px;

}

.stat-box{

    text-align:center;
    padding:35px;
    border-radius:20px;

    background:#f7faff;

    transition:.6s;

}

.stat-box:hover{

    background:#2f7fff;
    color:#fff;
    transform:translateY(-8px);

}

.stat-box h2{

    font-size:2.5rem;
    color:#2f7fff;
    margin-bottom:10px;

}

.stat-box:hover h2{

    color:#fff;

}

.stat-box span{

    color:#68758d;
    font-weight:500;

}

.stat-box:hover span{

    color:#fff;

}

@media(max-width:768px){

.why-choose{

padding:80px 0;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}


/* ===== CTA BAND ===== */

.cta-band {
  background: linear-gradient(120deg, var(--blue-500), #1b5fe0);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.cta-band h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}

.cta-band p {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  position: relative;
}

.cta-band .actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  position: relative;
}

.cta-band .btn-white {
  background: #fff;
  color: var(--navy-900);
}

.cta-band .btn-white:hover {
  background: var(--ice-100);
  transform: translateY(-2px);
}

/* ===== CONTACT ===== */

.contact {
  background: var(--navy-950);
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
}

.contact-info h2 {
  color: #fff;
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 18px;
}

.contact-info p {
  color: var(--slate-400);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 400px;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.contact-line:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.contact-line .ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(47, 127, 255, .14);
  border: 1px solid rgba(124, 178, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-300);
  flex-shrink: 0;
}

.contact-line .ic svg {
  width: 18px;
  height: 18px;
}

.contact-line a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.contact-line small {
  display: block;
  font-size: 11px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 3px;
}

.form-card {
  background: var(--navy-900);
  border: 1px solid rgba(124, 178, 255, .14);
  border-radius: var(--radius-lg);
  padding: 42px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field.full {
  grid-column: 1/-1;
}

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-400);
  letter-spacing: .02em;
}

.field input, .field select, .field textarea {
  background: var(--navy-800);
  border: 1px solid rgba(124, 178, 255, .16);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #fff;
  outline: none;
  transition: border-color .2s;
}

.field input::placeholder, .field textarea::placeholder {
  color: var(--slate-500);
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-500);
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.form-card .btn-primary {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
}


/*==================================================
    FAQ SECTION
==================================================*/

.faq-section{
    padding:110px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}

.faq-section::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:radial-gradient(rgba(47,127,255,.08),transparent 70%);
    top:-250px;
    right:-180px;
}

.faq-wrapper{
    display:grid;
    grid-template-columns:480px 1fr;
    gap:70px;
    align-items:center;
}

/*==================================================
    IMAGE
==================================================*/

.faq-left{
    position:relative;
}

.faq-image{
    position:sticky;
    top:120px;
}

.faq-image img{
    width:100%;
    height:700px;
    object-fit:cover;
    display:block;
    border-radius:28px;

    box-shadow:
        0 30px 70px rgba(15,30,59,.15);

    transition:.5s;
}

.faq-image:hover img{
    transform:scale(1.03);
}

/*==================================================
    FLOATING CARD
==================================================*/

.floating-card{

    position:absolute;

    bottom:30px;
    right:-50px;

    width:320px;

    background:rgba(15,30,59,.92);

    backdrop-filter:blur(18px);

    color:#fff;

    border-radius:22px;

    padding:30px;

    box-shadow:
        0 30px 80px rgba(15,30,59,.35);

    border:1px solid rgba(255,255,255,.08);

}

.fc-top{

    display:flex;
    align-items:center;
    gap:10px;

    color:#7cc2ff;

    font-size:.9rem;
    font-weight:700;

    margin-bottom:18px;

}

.floating-card h3{

    font-size:1.4rem;

    margin-bottom:15px;

    line-height:1.3;

}

.floating-card p{

    color:rgba(255,255,255,.75);

    line-height:1.7;

    margin-bottom:25px;

}

.floating-card ul{

    margin:0;
    padding:0;
    list-style:none;

}

.floating-card li{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:15px;

    color:#fff;

}

.floating-card svg{

    width:18px;
    height:18px;

    color:#3ea2ff;

    flex-shrink:0;

}

/*==================================================
    FAQ
==================================================*/

.faq-right{
    position:relative;
}

.section-header.left{
    text-align:left;
    margin-bottom:50px;
}

.faq-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-item{

    background:#fff;

    border-radius:18px;

    border:1px solid rgba(15,30,59,.08);

    overflow:hidden;

    transition:.35s;

}

.faq-item:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(15,30,59,.08);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 30px;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    font-size:1.05rem;

    font-weight:600;

    color:#0f1e3b;

}

.faq-icon{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#edf4ff;

    color:#2f7fff;

    border-radius:50%;

    font-size:1.5rem;

    transition:.35s;

    flex-shrink:0;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 30px 28px;

    color:#667085;

    line-height:1.9;

}

.faq-item.active{

    border-color:#2f7fff22;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-item.active .faq-icon{

    background:#2f7fff;

    color:#fff;

    transform:rotate(45deg);

}

/*==================================================
    PULSE
==================================================*/

.pulse-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#32d74b;

    position:relative;

}

.pulse-dot::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:#32d74b;

    animation:pulse 1.8s infinite;

}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:.8;
    }

    100%{
        transform:scale(3);
        opacity:0;
    }

}

/*==================================================
    MOBILE
==================================================*/

@media(max-width:1100px){

    .faq-wrapper{

        grid-template-columns:1fr;

    }

    .faq-image{

        position:relative;

        top:0;

        max-width:650px;

        margin:auto;

    }

    .floating-card{

        right:25px;

        bottom:25px;

    }

}

@media(max-width:768px){

    .faq-section{

        padding:80px 0;

    }

    .faq-image img{

        height:450px;

    }

    .floating-card{

        position:relative;

        right:auto;

        bottom:auto;

        width:100%;

        margin-top:20px;

    }

    .faq-question{

        padding:22px;

        font-size:1rem;

    }

    .faq-answer p{

        padding:0 22px 22px;

    }

}


/*==========================================
    MAINTENANCE PLANS
==========================================*/

.plans-section{
    padding:110px 0;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.plans-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    background:radial-gradient(rgba(47,127,255,.08),transparent 70%);
    top:-250px;
    left:-180px;
}

.plans-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:70px;

}

.plan-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:40px;

    border:1px solid rgba(15,30,59,.08);

    transition:.35s;

    overflow:hidden;

}

.plan-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:linear-gradient(90deg,#2f7fff,#63b3ff);

    transform:scaleX(0);

    transition:.35s;

}

.plan-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 70px rgba(15,30,59,.10);

}

.plan-card:hover::before{

    transform:scaleX(1);

}

.plan-type{

    display:inline-block;

    padding:8px 18px;

    border-radius:100px;

    background:#edf4ff;

    color:#2f7fff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    margin-bottom:22px;

}

.plan-card h3{

    color:#0f1e3b;

    font-size:1.6rem;

    margin-bottom:15px;

}

.plan-card p{

    color:#667085;

    line-height:1.8;

    margin-bottom:28px;

}

.plan-card ul{

    list-style:none;

    margin:0 0 35px;

    padding:0;

}

.plan-card li{

    padding:14px 0;

    border-bottom:1px solid rgba(15,30,59,.06);

    color:#475467;

}

.plan-card li:last-child{

    border:none;

}

.plan-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:54px;

    background:#0f1e3b;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    border-radius:14px;

    transition:.3s;

}

.plan-btn:hover{

    background:#2f7fff;

    transform:translateY(-2px);

}

/*==========================================
    FEATURED CARD
==========================================*/

.plan-card.featured{

    background:linear-gradient(160deg,#0f1e3b,#193a67);

    color:#fff;

    transform:scale(1.05);

    border:none;

}

.plan-card.featured p{

    color:rgba(255,255,255,.75);

}

.plan-card.featured h3{

    color:#fff;

}

.plan-card.featured li{

    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.10);

}

.plan-card.featured .plan-type{

    background:rgba(255,255,255,.12);

    color:#8fd0ff;

}

.plan-card.featured .plan-btn{

    background:#2f7fff;

}

.plan-card.featured .plan-btn:hover{

    background:#fff;

    color:#0f1e3b;

}

/*==========================================
    POPULAR BADGE
==========================================*/

.popular{

    position:absolute;

    top:20px;

    right:-45px;

    background:#2f7fff;

    color:#fff;

    padding:10px 55px;

    transform:rotate(45deg);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/*==========================================
    RESPONSIVE
==========================================*/

@media(max-width:992px){

    .plans-grid{

        grid-template-columns:1fr;

    }

    .plan-card.featured{

        transform:none;

    }

}

@media(max-width:768px){

    .plans-section{

        padding:80px 0;

    }

    .plan-card{

        padding:30px;

    }

    .popular{

        right:-55px;

        font-size:.7rem;

    }

}



/*==========================================
    FEATURED PROJECTS
==========================================*/

.projects-section{
    padding:110px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}

.projects-section::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:550px;
    height:550px;
    border-radius:50%;
    background:radial-gradient(rgba(47,127,255,.08),transparent 70%);
}

.projects-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:70px;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    height:330px;

    cursor:pointer;

    box-shadow:0 18px 45px rgba(15,30,59,.08);

    transition:.45s;

}

.project-card.large{

    height:450px;

}

.project-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    color:#fff;

    background:
    linear-gradient(
    to top,
    rgba(7,20,40,.92),
    rgba(7,20,40,.45),
    transparent
    );

    transition:.4s;

}

.project-card:hover .project-overlay{

    background:
    linear-gradient(
    to top,
    rgba(15,30,59,.95),
    rgba(47,127,255,.30),
    transparent
    );

}

.project-category{

    display:inline-block;

    width:max-content;

    padding:8px 18px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    border-radius:100px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.project-overlay h3{

    font-size:1.8rem;

    margin-bottom:14px;

    line-height:1.25;

}

.project-overlay p{

    color:rgba(255,255,255,.82);

    line-height:1.8;

    margin-bottom:22px;

}

.project-tags{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.project-tags span{

    padding:8px 15px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

    font-size:.82rem;

    transition:.3s;

}

.project-card:hover .project-tags span{

    background:#2f7fff;

}

.project-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-radius:24px;

    transition:.4s;

}

.project-card:hover::after{

    border-color:rgba(47,127,255,.45);

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 80px rgba(15,30,59,.18);

}

/*==========================================
    LAST ROW
==========================================*/

.project-card:nth-child(3),
.project-card:nth-child(4),
.project-card:nth-child(5){

    height:280px;

}

/*==========================================
    RESPONSIVE
==========================================*/

@media(max-width:992px){

.projects-grid{

grid-template-columns:1fr;

}

.project-card.large{

height:380px;

}

}

@media(max-width:768px){

.projects-section{

padding:80px 0;

}

.project-card,
.project-card.large{

height:320px;

}

.project-overlay{

padding:24px;

}

.project-overlay h3{

font-size:1.4rem;

}

}


/*==================================================
    TESTIMONIALS
==================================================*/

.testimonials-section{
    padding:110px 0;
    background:#f8fbff;
    overflow:hidden;
    position:relative;
}

.testimonials-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-220px;
    top:-250px;
    border-radius:50%;
    background:radial-gradient(rgba(47,127,255,.08),transparent 70%);
}

/*==================================================
    CAROUSEL
==================================================*/

.testimonial-carousel{

    position:relative;

    margin-top:70px;

}

.testimonial-wrapper{

    overflow:hidden;

}

.testimonial-track{

    display:flex;

    gap:30px;

    transition:transform .7s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

/*==================================================
    CARD
==================================================*/

.testimonial-card{

    flex:0 0 calc((100% - 60px)/3);

    background:#fff;

    border-radius:24px;

    padding:40px;

    border:1px solid rgba(15,30,59,.08);

    box-shadow:
        0 20px 45px rgba(15,30,59,.08);

    transition:.35s;

    position:relative;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 70px rgba(15,30,59,.14);

}

.testimonial-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#2f7fff,#65b8ff);

    transform:scaleX(0);

    transition:.35s;

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

/*==================================================
    QUOTE
==================================================*/

.quote-mark{

    font-size:4rem;

    color:#2f7fff;

    line-height:1;

    margin-bottom:10px;

    font-family:Georgia,serif;

}

/*==================================================
    STARS
==================================================*/

.stars{

    color:#ffc107;

    letter-spacing:4px;

    font-size:1.2rem;

    margin-bottom:22px;

}

/*==================================================
    TEXT
==================================================*/

.testimonial-card p{

    color:#667085;

    line-height:1.9;

    margin-bottom:35px;

    min-height:140px;

}

/*==================================================
    CLIENT
==================================================*/

.client{

    display:flex;

    align-items:center;

    gap:16px;

}

.client img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #edf4ff;

}

.client h4{

    color:#0f1e3b;

    margin-bottom:4px;

    font-size:1rem;

}

.client span{

    color:#7a8799;

    font-size:.9rem;

}

/*==================================================
    BUTTONS
==================================================*/

.carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#2f7fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 15px 40px rgba(15,30,59,.10);

    transition:.3s;

    z-index:5;

}

.carousel-btn:hover{

    background:#2f7fff;

    color:#fff;

    transform:translateY(-50%) scale(1.08);

}

.carousel-btn svg{

    width:22px;

    height:22px;

}

.prev{

    left:-28px;

}

.next{

    right:-28px;

}

/*==================================================
    DOTS
==================================================*/

.testimonial-dots{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:45px;

}

.testimonial-dots button{

    width:14px;

    height:14px;

    border:none;

    border-radius:50%;

    background:#cfd9e9;

    cursor:pointer;

    transition:.3s;

}

.testimonial-dots button.active{

    width:42px;

    border-radius:20px;

    background:#2f7fff;

}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1024px){

.testimonial-card{

flex:0 0 calc((100% - 30px)/2);

}

}

@media(max-width:768px){

.testimonials-section{

padding:80px 0;

}

.testimonial-card{

flex:0 0 100%;

padding:30px;

}

.testimonial-card p{

min-height:auto;

}

.carousel-btn{

width:46px;

height:46px;

}

.prev{

left:5px;

}

.next{

right:5px;

}

}


/* ===== FOOTER ===== */

footer {
  background: var(--navy-950);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 44px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

footer .brand {
  color: #fff;
}

footer .brand small {
  color: var(--slate-500);
}

.footer-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13.5px;
  color: var(--slate-400);
}

.footer-links a:hover {
  color: var(--blue-300);
}

.copy {
  font-size: 12.5px;
  color: var(--slate-500);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 980px) {
  .hero-dark {
    display: none;
  }
  .hero {
    min-height: auto;
    background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-left {
    padding: 70px 0 40px;
    max-width: 100%;
  }
  .hero-left .eyebrow, .hero-left h1, .hero-left p.lede {
    color: #fff;
  }
  .hero-left p.lede {
    color: var(--slate-400);
  }
  .hero-right {
    padding: 0 0 60px;
  }
  .status-card {
    margin: 0 auto;
  }
  .why-grid, .contact-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .cta-band {
    flex-direction: column;
    text-align: center;
    padding: 44px 30px;
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 20px;
  }
  .svc-grid {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 80px 0;
  }
  .nav-phone {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after {
    animation: none;
  }
  .grid-cell {
    transition: none;
  }
}