:root{
  --bg:#050b17;
  --bg-2:#091224;
  --panel:#0b1526;
  --panel-2:#101d34;
  --text:#eef3ff;
  --muted:#a9b6ce;
  --line:rgba(255,255,255,.1);
  --red:#ef4444;
  --red-2:#ff6b6b;
  --glow:rgba(239,68,68,.35);
  --blue:#14233f;
  --radius:22px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
   radial-gradient(circle at 10% 10%, rgba(239,68,68,.18), transparent 20%),
   radial-gradient(circle at 90% 15%, rgba(59,130,246,.15), transparent 24%),
   linear-gradient(180deg, #06101f 0%, #040914 52%, #06101f 100%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px, calc(100% - 2rem)); margin-inline:auto}
.topbar{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(16px);
  background:rgba(4,10,20,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:78px;
}
.brand{display:flex; align-items:center; gap:.9rem; font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:.04em}
.brand-mark{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--red), #c1121f 70%);
  box-shadow:0 12px 24px rgba(239,68,68,.25);
}
.brand-mark span{font-size:1.1rem; font-weight:800}
.brand small{display:block; color:var(--muted); font-family:'Inter',sans-serif; font-weight:500; letter-spacing:0}
.nav-links{display:flex; gap:1.5rem; align-items:center}
.nav-links a{color:#dce6fb; font-weight:600; opacity:.9}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex; align-items:center; gap:.8rem}
.phone-pill{
  padding:.8rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:600; background:rgba(255,255,255,.04)
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 1.2rem; border-radius:999px; font-weight:700;
  transition:.25s ease; border:1px solid transparent;
}
.btn-primary{background:linear-gradient(135deg,var(--red),#d7263d); box-shadow:0 14px 28px rgba(239,68,68,.25)}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-secondary{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.btn-secondary:hover{background:rgba(255,255,255,.08)}
.hero{
  padding:5.2rem 0 2.4rem;
}
.hero-grid{display:grid; grid-template-columns:1.15fr .95fr; gap:2rem; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1rem;
  padding:.45rem .85rem; border-radius:999px; background:rgba(239,68,68,.12); color:#ffd0d0;
  border:1px solid rgba(239,68,68,.25); font-size:.88rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:999px; background:var(--red)}
.hero h1{
  font-family:'Outfit',sans-serif; font-size:clamp(2.4rem, 4.6vw, 5rem); line-height:1.02; margin:0 0 1rem;
}
.hero h1 span{color:#ff6d6d}
.hero p{
  color:var(--muted); font-size:1.08rem; line-height:1.75; max-width:640px; margin:0 0 1.6rem;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem}
.hero-points{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; color:#d8e2f5; font-weight:600; font-size:.97rem}
.hero-points span::before{content:"•"; color:#ff6d6d; margin-right:.45rem}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:1rem; box-shadow:var(--shadow);
}
.hero-visual{
  position:relative; min-height:540px; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.hero-visual::before{
  content:""; position:absolute; inset:0; background:
   linear-gradient(180deg, rgba(5,11,23,0) 0%, rgba(5,11,23,.05) 45%, rgba(5,11,23,.75) 100%),
   radial-gradient(circle at 20% 15%, rgba(239,68,68,.35), transparent 20%),
   radial-gradient(circle at 82% 18%, rgba(59,130,246,.18), transparent 22%);
  z-index:2;
}
.hero-visual-grid{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px}
.hero-visual-grid img{width:100%; height:100%; object-fit:cover; border-radius:18px}
.hero-info{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1.2rem; z-index:3;
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem;
}
.info-box{
  background:rgba(6,12,23,.76); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:1rem;
}
.info-box strong{font-size:1.4rem; font-family:'Outfit',sans-serif}
.info-box p{margin:.25rem 0 0; font-size:.93rem; color:#c7d2e7; line-height:1.5}
.logo-strip-wrap{padding:0 0 1.5rem}
.logo-strip{
  border-block:1px solid var(--line); overflow:hidden; background:rgba(255,255,255,.02);
}
.logo-track{display:flex; gap:1rem; padding:1rem 0; width:max-content; animation:marquee 24s linear infinite}
.logo-item{
  display:flex; align-items:center; gap:.75rem; padding:.95rem 1.25rem; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); min-width:180px;
}
.logo-dot{width:16px; height:16px; border-radius:999px; box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.logo-item strong{font-family:'Outfit',sans-serif; letter-spacing:.02em; font-size:1.05rem}
.section{padding:2rem 0 5rem}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:1.2rem; margin-bottom:1.8rem}
.section-head h2{margin:0; font-family:'Outfit',sans-serif; font-size:clamp(2rem, 3vw, 3rem)}
.section-head p{margin:0; color:var(--muted); max-width:560px; line-height:1.8}
.service-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.service-card{
  position:relative; min-height:385px; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.09);
  background:#08101d; box-shadow:var(--shadow); isolation:isolate;
}
.service-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.service-card::before{
  content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(4,8,16,.12) 0%, rgba(4,8,16,.25) 36%, rgba(4,8,16,.82) 62%, rgba(4,8,16,.98) 100%),
  linear-gradient(130deg, rgba(239,68,68,.32), transparent 18%);
  z-index:1;
}
.service-card:hover img{transform:scale(1.05)}
.service-content{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:1rem}
.service-tag{
  align-self:flex-start; margin-bottom:auto; padding:.45rem .72rem; border-radius:999px; font-size:.74rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg, #ff5a5f, #d51d35);
  box-shadow:0 10px 22px rgba(239,68,68,.22)
}
.service-title-shadow{font-family:'Outfit',sans-serif; font-size:2rem; line-height:1.02; margin:0 0 1rem; color:rgba(255,255,255,.34); text-shadow:0 2px 0 rgba(0,0,0,.15)}
.service-panel{
  margin:-.1rem; padding:1rem; border-radius:18px; background:linear-gradient(180deg, rgba(8,14,25,.82), rgba(8,14,25,.95));
  border:1px solid rgba(255,255,255,.08)
}
.service-panel h3{margin:0 0 .5rem; font-size:1.16rem}
.service-panel p{margin:0; color:#c8d4ea; font-size:.93rem; line-height:1.65}
.cta-band{
  margin-top:1.3rem; border-radius:28px; padding:1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:linear-gradient(135deg, rgba(239,68,68,.16), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08)
}
.cta-band h3{margin:0 0 .35rem; font-family:'Outfit',sans-serif; font-size:1.6rem}
.cta-band p{margin:0; color:var(--muted)}
.footer{border-top:1px solid var(--line); padding:2rem 0 2.4rem; color:#c4d1e8}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:1.2rem}
.footer h4{margin:.25rem 0 .8rem; font-family:'Outfit',sans-serif; color:#fff}
.footer p,.footer li{color:#b7c5dd; line-height:1.7}
.footer ul{padding:0; margin:0; list-style:none}
.footer-bottom{border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.contact-page-hero{padding:4.2rem 0 2rem}
.contact-grid{display:grid; grid-template-columns:1fr .95fr; gap:1.2rem}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.2rem 0 1.3rem}
.contact-card, .form-card, .info-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:1.15rem; box-shadow:var(--shadow);
}
.contact-card h3,.form-card h3,.info-card h3{margin:.15rem 0 .45rem; font-family:'Outfit',sans-serif}
.contact-card p,.info-card p{margin:0; color:var(--muted); line-height:1.7}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.form-grid .full{grid-column:1/-1}
label{display:block; font-size:.92rem; font-weight:700; margin-bottom:.45rem}
input, textarea{
  width:100%; padding:1rem 1rem; border-radius:16px; border:1px solid rgba(255,255,255,.09); outline:none;
  background:rgba(255,255,255,.04); color:#fff; font:inherit
}
textarea{min-height:170px; resize:vertical}
input:focus, textarea:focus{border-color:rgba(239,68,68,.6); box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.note-box{padding:1rem 1.15rem; border-radius:18px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#ffd6d6; line-height:1.7}
.back-link{display:inline-flex; align-items:center; gap:.5rem; color:#ffd1d1; margin-bottom:1rem; font-weight:700}
.mobile-toggle{display:none; background:transparent; border:0; color:#fff; font-size:1.2rem}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (max-width: 1024px){
  .hero-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .hero-visual{min-height:440px}
  .service-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav{flex-wrap:wrap; padding:1rem 0}
  .mobile-toggle{display:block}
  .nav-links{display:none; width:100%; flex-direction:column; align-items:flex-start; padding-bottom:.4rem}
  .nav-links.show{display:flex}
  .nav-cta{width:100%; justify-content:space-between}
  .hero{padding-top:3rem}
  .section-head{flex-direction:column; align-items:flex-start}
  .service-grid{grid-template-columns:1fr}
  .hero-info{grid-template-columns:1fr}
  .hero-visual{min-height:500px}
  .form-grid{grid-template-columns:1fr}
}