:root{
  --bg:#000; --fg:#fff; --muted:#9ca3af; --accent1:#1e3a5f; --accent2:#5ab5b5; --accent3:#7dd5d5;
  --container:1400px; --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; height:100%}
body{height:100%; margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--fg); line-height:1.6}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.4rem; border-radius:9999px; font-weight:700; transition:all .25s ease; border:0; cursor:pointer}
.btn-primary{background:#fff; color:#000}
.btn-primary:hover{filter:brightness(.95); transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn:focus{outline:2px solid var(--accent2); outline-offset:2px}

/* Header */
header{position:fixed; inset:0 auto auto 0; right:0; height:72px; z-index:50; transition:background .35s, box-shadow .35s, backdrop-filter .35s}
@media(min-width:768px){header{height:88px}}
header.scrolled{backdrop-filter:blur(18px); background:rgba(0,0,0,.8); border-bottom:1px solid rgba(255,255,255,.1); box-shadow:0 4px 20px rgba(0,0,0,.3)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; padding-inline:16px}
@media(min-width:768px){.nav{height:88px; padding-inline:24px}}
.nav a{padding:.75rem 1rem; color:#cbd5e1; transition:color .2s; font-size:.95rem}
@media(min-width:768px){.nav a{font-size:1rem}}
.nav a.active,.nav a:hover{color:#fff}
.nav a:focus{outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px}
.logo{display:flex; align-items:center; gap:.5rem}
.logo strong{font-size:.9rem}
@media(min-width:768px){.logo strong{font-size:1rem}}
.logo svg{height:36px}
.logo img{height:24px; width:auto}
@media(min-width:768px){.logo img{height:28px}}
@media(min-width:1024px){.logo img{height:32px}}
.desktop-nav{display:none}
.menu-btn{background:transparent; border:0; color:#fff; padding:.5rem; display:grid; place-items:center; cursor:pointer; width:40px; height:40px; position:relative}
.menu-btn img{display:none !important}
.menu-btn::before, .menu-btn::after, .menu-btn span{content:''; display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s ease; position:absolute; left:8px}
.menu-btn::before{top:12px}
.menu-btn span{top:19px}
.menu-btn::after{top:26px}
.menu-btn:hover::before, .menu-btn:hover::after, .menu-btn:hover span{background:var(--accent2)}
.mobile-menu.open + .container .menu-btn::before{transform:rotate(45deg); top:19px}
.mobile-menu.open + .container .menu-btn span{opacity:0}
.mobile-menu.open + .container .menu-btn::after{transform:rotate(-45deg); top:19px}
@media(min-width:1024px){
  .desktop-nav{display:flex; align-items:center; gap:.25rem}
  .menu-btn{display:none}
}
.mobile-menu{display:none; position:fixed; top:72px; left:0; right:0; z-index:40}
@media(min-width:768px){.mobile-menu{top:88px}}
.mobile-menu.open{display:block}
.mobile-menu a:hover{background:rgba(255,255,255,.08)}
.glass{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px); border-radius:var(--radius)}

/* Hero with Video Background */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:88px 16px 60px; overflow:hidden}
@media(min-width:768px){.hero{padding:120px 24px 80px}}
.hero .container{position:relative; z-index:2; padding-inline:0}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero .bg1{display:none}
.hero .blob{display:none}
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px; margin-bottom:1rem; font-size:.85rem}
@media(min-width:768px){.badge{padding:.5rem 1rem; margin-bottom:1.5rem; font-size:.9rem}}
.badge span{color:#d1d5db}
.heading-xl{font-size:clamp(2.2rem,12vw,7rem); line-height:.95; font-weight:900; letter-spacing:-.02em; margin:0 0 1rem}
.gradient-text{background:linear-gradient(90deg,var(--accent2),var(--accent3),var(--accent2)); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradient-shift 8s ease infinite}
.lead{color:#9ca3af; font-size:clamp(.95rem,4vw,1.25rem); max-width:48rem; margin:0 auto 1.5rem; padding-inline:1rem}
@media(min-width:768px){.lead{margin:0 auto 2rem; padding-inline:0}}
.stats{display:grid; grid-template-columns:1fr; gap:1rem; max-width:20rem; margin:3rem auto 0}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr); max-width:46rem; gap:1.25rem; margin:4rem auto 0}}
.stat{border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:.9rem; backdrop-filter:blur(8px); background:rgba(0,0,0,.3)}
@media(min-width:768px){.stat{padding:1rem}}
.stat strong{display:block; font-size:clamp(1.8rem,6vw,3rem); color:#f1f5f9; font-weight:900}
.stat span{color:#94a3b8; font-size:.85rem}
@media(min-width:768px){.stat span{font-size:.9rem}}

@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Sections */
section.section{padding:3rem 0}
@media(min-width:768px){section.section{padding:4.5rem 0}}
@media(min-width:1024px){section.section{padding:6rem 0}}
.kicker{color:var(--accent2); letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:.8rem}
@media(min-width:768px){.kicker{font-size:.9rem}}
.h2{font-size:clamp(1.8rem,8vw,4rem); line-height:1.1; font-weight:900; letter-spacing:-.02em; margin:.5rem 0 0}

/* Services grid */
.grid-3{display:grid; gap:1rem}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card-service{position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; display:block}
@media(min-width:768px){.card-service{border-radius:28px}}
.card-service img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .6s ease}
.card-service:hover img{transform:scale(1.1)}
.card-service:focus{outline:2px solid var(--accent2); outline-offset:4px}
.card-service .overlay{position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,.5),rgba(0,0,0,.9)); transition:opacity .3s}
.card-service:hover .overlay{opacity:.95}
.card-service .content{position:absolute; inset:0; padding:1.5rem; display:flex; flex-direction:column; justify-content:end}
@media(min-width:768px){.card-service .content{padding:2rem}}
.card-service h3{font-size:1.5rem; margin:0 0 .25rem}
@media(min-width:768px){.card-service h3{font-size:2rem}}
.card-service p{color:#cbd5e1; margin:0 0 .75rem; font-size:.9rem}
@media(min-width:768px){.card-service p{margin:0 0 1rem; font-size:1rem}}
.learn{display:inline-flex; align-items:center; gap:.5rem; color:var(--accent2); font-weight:600; transition:gap .2s; font-size:.9rem}
@media(min-width:768px){.learn{font-size:1rem}}
.card-service:hover .learn{gap:.75rem}

/* Two-column layout */
.two-col{display:grid; gap:2rem; margin-top:2rem}
@media(min-width:1024px){.two-col{margin-top:4rem}}
.two-col:first-child{margin-top:0}
@media(min-width:1024px){.two-col{grid-template-columns:1.1fr 1fr; align-items:center; gap:3rem}}

/* CTA */
.cta{position:relative; overflow:hidden; border-radius:20px; padding:2.5rem 1.5rem; text-align:center}
@media(min-width:768px){.cta{border-radius:28px; padding:4rem 2rem}}
.cta .bg{position:absolute; inset:0; background:linear-gradient(135deg,var(--accent1),#2a5580,var(--accent2)); background-size:200% 200%; animation:gradient-shift 10s ease infinite; opacity:.9}
.cta .radial{position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.12), transparent 50%)}
.cta .inner{position:relative; z-index:1}
.cta .h2{font-size:clamp(1.8rem,6vw,3rem) !important}
.cta .lead{max-width:36rem; font-size:clamp(.95rem,3vw,1.15rem)}
.cta .btn{font-size:1rem !important; padding:.9rem 1.4rem !important}
@media(min-width:768px){.cta .btn{font-size:1.1rem !important; padding:1rem 1.6rem !important}}

/* Contact */
.grid-contact{display:grid; gap:1.25rem}
@media(min-width:1024px){.grid-contact{grid-template-columns:1fr 2fr}}
.info-tile{padding:1.25rem}
.form{display:grid; gap:1rem}
.row{display:grid; gap:1rem}
@media(min-width:768px){.row{grid-template-columns:1fr 1fr}}
.input, .textarea{width:100%; padding:1rem 1.1rem; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; transition:all .2s; font-family:inherit}
.input:focus, .textarea:focus{outline:2px solid var(--accent2); outline-offset:0; border-color:var(--accent2); background:rgba(255,255,255,.08)}
.input::placeholder, .textarea::placeholder{color:#6b7280}
.textarea{min-height:180px; resize:vertical}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden}
footer .fade{position:absolute; inset:0; background:linear-gradient(to bottom,transparent,rgba(30,58,95,.2))}
.foot{position:relative; padding:2.5rem 16px}
@media(min-width:768px){.foot{padding:3rem 24px}}
.foot-grid{display:grid; gap:2rem}
@media(min-width:1024px){.foot-grid{grid-template-columns:1fr 1fr}}
footer svg{height:40px}
@media(min-width:768px){footer svg{height:48px}}
.muted{color:#94a3b8; font-size:.9rem}
@media(min-width:768px){.muted{font-size:1rem}}
.muted:hover{color:#cbd5e1}
.chip{display:inline-block; padding:.35rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:#cbd5e1; font-size:.8rem}
@media(min-width:768px){.chip{padding:.4rem .8rem; font-size:.85rem}}

/* Buttons responsive */
.btn{font-size:.9rem; padding:.8rem 1.2rem}
@media(min-width:768px){.btn{font-size:1rem; padding:.9rem 1.4rem}}

/* Stats cards for about page */
.stat-card{padding:1.5rem; text-align:center; transition:all .3s}
.stat-card:hover{transform:translateY(-4px); border-color:rgba(90,181,181,.3)}
.stat-number{font-weight:800; font-size:2.5rem; color:#fff; margin-bottom:.25rem}

/* Services page layout */
.services-grid{display:grid; gap:3rem}
@media(min-width:768px){.services-grid{gap:4rem}}
.service-item{display:grid; gap:1.5rem; align-items:center}
@media(min-width:1024px){.service-item{grid-template-columns:1.1fr 1fr; gap:2.5rem}}
.service-content{order:1}
.service-image{order:2}
@media(min-width:1024px){
  .service-item:nth-child(even) .service-content{order:2}
  .service-item:nth-child(even) .service-image{order:1}
}
.service-number{font-size:3.5rem; font-weight:900; color:rgba(255,255,255,.06); line-height:1; margin-bottom:.75rem}
@media(min-width:768px){.service-number{font-size:5rem; margin-bottom:1rem}}
.service-list{margin:1rem 0 1.5rem; padding-left:1.25rem; line-height:1.8; color:#9ca3af; font-size:.95rem}
@media(min-width:768px){.service-list{margin:1.5rem 0 2rem; padding-left:1.5rem; line-height:2; font-size:1rem}}
.service-list li{margin-bottom:.5rem}
.image-wrapper{position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden}
@media(min-width:768px){.image-wrapper{border-radius:28px}}
.image-wrapper img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.service-item:hover .image-wrapper img{transform:scale(1.05)}
.image-overlay{position:absolute; inset:0; background:linear-gradient(135deg, rgba(30,58,95,.2), rgba(90,181,181,.2))}

/* Contact page improvements */
.contact-info-grid{display:grid; gap:1rem}
.info-tile{padding:1rem; transition:all .3s}
@media(min-width:768px){.info-tile{padding:1.25rem}}
.info-tile:hover{transform:translateY(-2px); border-color:rgba(90,181,181,.3)}
.info-title{font-weight:800; margin-bottom:.5rem; color:#fff; font-size:.95rem}
@media(min-width:768px){.info-title{font-size:1rem}}
.contact-link{display:inline-block; transition:color .2s; word-break:break-all; font-size:.9rem}
@media(min-width:768px){.contact-link{font-size:1rem}}
.contact-link:hover{color:var(--accent2)}
.contact-form-wrapper{padding:1.5rem}
@media(min-width:768px){.contact-form-wrapper{padding:2rem}}
.form-label{display:block; margin-bottom:.4rem; color:#9ca3af; font-size:.85rem}
@media(min-width:768px){.form-label{font-size:.9rem}}
.submit-btn{width:100%; justify-content:center; height:52px; font-size:.95rem}
@media(min-width:768px){.submit-btn{height:56px; font-size:1rem}}
.form-note{font-size:.8rem; margin-top:.75rem; text-align:center; color:#6b7280; line-height:1.5}
@media(min-width:768px){.form-note{font-size:.85rem}}

/* Utilities */
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mb-20{margin-bottom:5rem}
.grid{display:grid}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video{display:none}
}

/* Mobile optimizations */
@media(max-width:768px){
  .stats{grid-template-columns:1fr; max-width:20rem}
  .hero{min-height:90vh}
  .container{padding-inline:16px}
}

/* Utility spacing - mobile first */
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:2rem}
@media(min-width:768px){.mb-12{margin-bottom:3rem}}
.mb-20{margin-bottom:3rem}
@media(min-width:768px){.mb-20{margin-bottom:5rem}}
.grid{display:grid}