:root {
  --navy: #06152d;
  --blue: #0878f9;
  --cyan: #18d8e8;
  --lime: #9be52f;
  --purple: #7938e8;
  --orange: #ff9d2e;
  --white: #ffffff;
  --offwhite: #f5f8fc;
  --ink: #101827;
  --muted: #647084;
  --line: rgba(16, 24, 39, .1);
  --shadow: 0 22px 60px rgba(7, 31, 65, .14);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(16,24,39,.07);
}
.nav-wrap { min-height: 86px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand img { width: 180px; max-height: 68px; object-fit: contain; }
.site-nav { display:flex; align-items:center; gap:32px; font-weight:700; font-size:.95rem; }
.site-nav a { position:relative; }
.site-nav a:not(.nav-cta)::after {
  content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px;
  background: linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .25s;
}
.site-nav a:not(.nav-cta):hover::after { width:100%; }
.nav-cta {
  padding: 12px 20px; border-radius:999px; color:#fff;
  background: linear-gradient(100deg,var(--blue),var(--purple));
  box-shadow: 0 8px 22px rgba(8,120,249,.25);
}
.menu-toggle { display:none; border:0; background:none; width:44px; height:44px; padding:8px; cursor:pointer; }
.menu-toggle span { display:block; height:3px; margin:5px 0; border-radius:5px; background:var(--navy); transition:.25s; }

.hero {
  position:relative; min-height:720px; display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(24,216,232,.24), transparent 26%),
    radial-gradient(circle at 72% 72%, rgba(121,56,232,.18), transparent 28%),
    linear-gradient(135deg,#06152d 0%,#092c61 48%,#073f74 100%);
  color:#fff;
}
.hero-grid { display:grid; grid-template-columns: 1.02fr .98fr; align-items:center; gap:50px; padding:85px 0 105px; position:relative; z-index:2; }
.eyebrow { margin:0 0 18px; text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:800; color:var(--cyan); }
.eyebrow span { display:inline-block; width:30px; height:2px; vertical-align:middle; margin-right:10px; background:currentColor; }
.hero h1, h2, h3 { font-family:"Montserrat",sans-serif; }
.hero h1 { font-size:clamp(2.4rem, 4vw, 4.4rem); line-height:.99; letter-spacing:-.055em; margin:0; max-width:700px; }
em {
  font-style: normal;
  background: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--lime) 50%,
    var(--blue) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-text { max-width:610px; color:#d7e6fa; font-size:1.15rem; margin:25px 0 30px; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 24px; border-radius:999px; font-weight:800; transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:linear-gradient(100deg,var(--blue),#23b7e8); box-shadow:0 13px 30px rgba(0,0,0,.2); }
.button-ghost { color:#fff; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); }
.button-light { background:#fff; color:var(--navy); }
.hero-proof { display:flex; gap:30px; margin-top:48px; padding-top:25px; border-top:1px solid rgba(255,255,255,.17); }
.hero-proof div { display:flex; align-items:center; gap:10px; }
.hero-proof strong { font-family:"Montserrat"; font-size:1.45rem; color:var(--lime); }
.hero-proof span { color:#c7d8ee; font-size:.72rem; line-height:1.25; }
.hero-art { position:relative; min-height:480px; display:flex; align-items:center; justify-content:center; }
.logo-card { width:min(570px,100%); padding:18px; border-radius:34px; background:rgba(255,255,255,.97); box-shadow:0 35px 90px rgba(0,0,0,.35); transform:rotate(2deg); border:1px solid rgba(255,255,255,.8); }
.logo-card img { width:100%; border-radius:18px; }
.floating-card { position:absolute; padding:13px 17px; border-radius:14px; background:rgba(4,17,39,.84); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 40px rgba(0,0,0,.22); font-weight:700; font-size:.85rem; backdrop-filter:blur(12px); }
.card-top { top:55px; right:-5px; }
.card-bottom { bottom:50px; left:-5px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; }
.cyan { background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.lime { background:var(--lime); box-shadow:0 0 14px var(--lime); }
.hero-glow { position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; }
.glow-one { width:330px; height:330px; background:rgba(0,207,255,.14); left:-130px; top:30%; }
.glow-two { width:280px; height:280px; background:rgba(155,229,47,.11); right:10%; bottom:-100px; }
.wave-divider { position:absolute; bottom:-1px; left:-2%; width:104%; height:75px; background:#fff; clip-path:ellipse(62% 55% at 50% 100%); }

.marquee { overflow:hidden; background:var(--navy); color:#fff; border-bottom:1px solid rgba(255,255,255,.1); }
.marquee-track { display:flex; width:max-content; align-items:center; gap:28px; padding:17px 0; font-family:"Montserrat"; font-size:.82rem; letter-spacing:.14em; animation:scroll 24s linear infinite; }
.marquee b { color:var(--cyan); }
@keyframes scroll { to { transform:translateX(-50%); } }

.section { padding:115px 0; }
.section-heading { max-width:750px; margin-bottom:55px; }
.section-heading h2, .about-copy h2, .contact-box h2 { font-size:clamp(2.2rem,4vw,4rem); line-height:1.05; letter-spacing:-.045em; margin:0 0 18px; }
.section-heading > p:last-child, .about-copy > p { color:var(--muted); font-size:1.08rem; max-width:680px; }
.services { background:var(--offwhite); }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card { position:relative; overflow:hidden; min-height:350px; padding:29px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:0 8px 30px rgba(8,25,54,.04); transition:transform .25s, box-shadow .25s; }
.service-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); }
.service-card::before { content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:var(--accent); }
.card-blue { --accent:var(--blue); }
.card-purple { --accent:var(--purple); }
.card-cyan { --accent:var(--cyan); }
.card-lime { --accent:var(--lime); }
.service-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:color-mix(in srgb, var(--accent) 12%, white); color:var(--accent); font-size:1.6rem; font-weight:900; }
.service-number { position:absolute; right:27px; top:28px; color:#cbd3df; font-family:"Montserrat"; font-size:.75rem; }
.service-card h3 { font-size:1.55rem; margin:30px 0 10px; }
.service-card p { color:var(--muted); font-size:.94rem; }
.service-card a { position:absolute; left:29px; bottom:27px; color:var(--accent); font-weight:800; font-size:.88rem; }

.about { background:#fff; }
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.about-visual { min-height:470px; position:relative; display:grid; place-items:center; }
.about-visual::before { content:""; position:absolute; width:330px; height:330px; border-radius:50%; background:linear-gradient(135deg,#eafaff,#eef0ff); }
.color-orbit { position:absolute; border-radius:50%; border:2px solid; opacity:.55; transform:rotate(-25deg); }
.orbit-one { width:430px; height:180px; border-color:var(--cyan); }
.orbit-two { width:430px; height:180px; border-color:var(--lime); transform:rotate(28deg); }
.about-logo { width:350px; position:relative; z-index:2; background:#fff; border-radius:25px; padding:12px; box-shadow:var(--shadow); transform:rotate(-2deg); }
.signature { margin:28px 0 18px; font-family:cursive; font-size:1.5rem; color:var(--purple); }
.text-link { font-weight:800; color:var(--blue); }

.process { background:#f6f8fb; }
.centered { text-align:center; margin-left:auto; margin-right:auto; }
.centered .eyebrow { justify-content:center; }
.process-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:25px; }
.process-step { text-align:center; }
.process-step > span { display:inline-grid; place-items:center; width:55px; height:55px; border-radius:50%; color:#fff; font-family:"Montserrat"; background:linear-gradient(135deg,var(--blue),var(--purple)); }
.process-step h3 { font-size:1.4rem; margin:17px 0 7px; }
.process-step p { color:var(--muted); margin:0 auto; max-width:280px; }
.process-line { height:1px; width:70px; background:linear-gradient(90deg,var(--cyan),var(--purple)); }

.contact-section { padding:95px 0; background:linear-gradient(120deg,#06152d,#123b73 60%,#0d7183); color:#fff; }
.contact-box { display:flex; justify-content:space-between; align-items:center; gap:50px; }
.contact-box .eyebrow { color:var(--lime); }
.contact-box > div:first-child { max-width:700px; }
.contact-box h2 { margin-bottom:15px; }
.contact-box p:not(.eyebrow) { color:#cfdef0; font-size:1.05rem; }
.contact-actions { min-width:255px; display:flex; flex-direction:column; gap:12px; }
.contact-actions small { text-align:center; color:#b7c9df; }
.site-footer { padding:38px 0; background:#030b19; color:#b7c6da; }
.footer-wrap { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-logo { width:190px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.site-footer p { margin:10px 0 0; font-size:.82rem; }
.footer-right { display:flex; gap:24px; flex-wrap:wrap; justify-content:flex-end; font-size:.8rem; }
.footer-right a { color:#fff; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns:1fr; padding-top:70px; }
  .hero-art { min-height:390px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid { grid-template-columns:1fr; gap:55px; }
  .about-visual { min-height:390px; }
  .contact-box { flex-direction:column; align-items:flex-start; }
  .contact-actions { width:100%; max-width:390px; }
}

@media (max-width: 720px) {
  .container { width:min(100% - 28px, 1160px); }
  .nav-wrap { min-height:72px; }
  .brand img { width:150px; }
  .menu-toggle { display:block; }
  .site-nav {
    position:absolute; top:72px; left:0; right:0; display:flex; flex-direction:column; align-items:stretch;
    gap:0; padding:10px 14px 18px; background:rgba(255,255,255,.98); backdrop-filter:blur(15px);
    border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(5,22,48,.1);
    transform:translateY(-130%); opacity:0; pointer-events:none; transition:.25s;
  }
  .site-nav.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .site-nav a { padding:14px 10px; }
  .nav-cta { text-align:center; margin-top:7px; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

  .hero { min-height:auto; }
  .hero-grid { padding:60px 0 90px; gap:35px; }
  .hero h1 { font-size:clamp(2.5rem,12vw,4rem); }
  .hero-text { font-size:1rem; }
  .hero-proof { gap:13px; justify-content:space-between; }
  .hero-proof div { gap:5px; }
  .hero-proof strong { font-size:1.05rem; }
  .hero-proof span { font-size:.62rem; }
  .hero-art { min-height:270px; }
  .logo-card { padding:13px; border-radius:22px; }
  .floating-card { font-size:.68rem; padding:9px 11px; }
  .card-top { top:3px; right:0; }
  .card-bottom { bottom:4px; left:0; }
  .section { padding:78px 0; }
  .section-heading { margin-bottom:38px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:320px; }
  .about-visual { min-height:300px; }
  .about-logo { width:260px; }
  .color-orbit { width:330px; height:140px; }
  .process-grid { grid-template-columns:1fr; gap:16px; }
  .process-line { width:1px; height:35px; margin:auto; }
  .contact-section { padding:70px 0; }
  .footer-wrap { flex-direction:column; align-items:flex-start; }
  .footer-right { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .marquee-track { animation:none; }
  *, *::before, *::after { transition:none !important; }
}