/* Brighter, higher-saturation AI direction */
.dark-grid {
  background-image: linear-gradient(rgba(94,231,255,.11) 1px,transparent 1px), linear-gradient(90deg,rgba(94,231,255,.11) 1px,transparent 1px);
}
.dark-grid::after {
  background: linear-gradient(110deg,transparent 25%,rgba(94,231,255,.22) 50%,transparent 75%);
  animation-duration: 8s;
}
.hero {
  background-color: #0d2f84;
  background-image: radial-gradient(circle at 50% 43%,rgba(71,215,255,.38),transparent 31%), radial-gradient(circle at 83% 16%,rgba(72,255,235,.26),transparent 25%), radial-gradient(circle at 12% 75%,rgba(112,91,255,.25),transparent 28%), linear-gradient(rgba(94,231,255,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(94,231,255,.10) 1px,transparent 1px), linear-gradient(145deg,#0a2468 0%,#1554bd 48%,#0d3b99 75%,#10266f 100%);
  background-size: auto,auto,auto,64px 64px,64px 64px,auto;
}
.orbit {
  border: 1.5px solid rgba(145,245,255,.32);
  box-shadow: 0 0 26px rgba(52,211,255,.16), inset 0 0 26px rgba(52,211,255,.08);
}
.core {
  border: 1.5px solid rgba(165,243,252,.34);
  box-shadow: inset 0 0 100px rgba(34,211,238,.16), 0 0 70px rgba(34,211,238,.18);
}
.signal {
  width: 8px;
  height: 8px;
  background: #e7fdff;
  box-shadow: 0 0 0 10px rgba(103,232,249,.10), 0 0 32px 8px #22d3ee;
  animation-duration: 4s;
}
.services {
  background-color: #0b3184;
  background-image: radial-gradient(circle at 15% 35%,rgba(52,211,255,.30),transparent 29%), radial-gradient(circle at 90% 70%,rgba(70,111,255,.32),transparent 28%), linear-gradient(rgba(94,231,255,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(94,231,255,.09) 1px,transparent 1px), linear-gradient(180deg,#10266f 0%,#124bb0 46%,#0a2d79 100%);
}
.section-head > p,
.service-grid article > p { color: rgba(255,255,255,.78); }
.service-grid article {
  border-color: rgba(190,247,255,.30);
  background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(77,163,255,.08));
  box-shadow: 0 18px 45px rgba(3,18,80,.18), inset 0 1px rgba(255,255,255,.20);
}

/* Scale the company name down one step */
.hero h1 {
  font-size: clamp(2.15rem, 5.7vw, 4.8rem);
  line-height: 1.24;
}

/* Light sections: keep breathing room while carrying the blue identity */
.representative {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(21,84,189,.055) 1px, transparent 1px),
    linear-gradient(rgba(21,84,189,.055) 1px, transparent 1px),
    linear-gradient(145deg, #e8f2ff 0%, #d9eaff 52%, #eef6ff 100%);
  background-size: 52px 52px, 52px 52px, auto;
}
.representative::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -160px;
  top: -170px;
  border: 1px solid rgba(21,84,189,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(21,84,189,.035), 0 0 0 78px rgba(94,231,255,.025);
}
.representative .wrap,
.contact .wrap { position: relative; z-index: 1; }
.representative .message {
  border: 1px solid rgba(21,84,189,.28);
  border-left: 4px solid #1554bd;
  background: rgba(241,247,255,.88);
  box-shadow: 0 20px 55px rgba(21,63,138,.10);
}
.representative .portrait > img:first-child {
  border: 4px solid rgba(21,84,189,.18);
  box-shadow: 0 16px 38px rgba(21,63,138,.13);
}

.contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(94,231,255,.20), transparent 24%),
    linear-gradient(180deg, #edf5ff 0%, #dceaff 100%);
}
.contact::after {
  content: "";
  position: absolute;
  inset: 48px 4% auto auto;
  width: 150px;
  height: 150px;
  border-top: 2px solid rgba(21,84,189,.22);
  border-right: 2px solid rgba(21,84,189,.22);
}
.contact-grid > div:first-child,
.contact form {
  padding: 30px;
  border: 1px solid rgba(21,84,189,.28);
  border-radius: 20px;
  background: rgba(243,248,255,.88);
  box-shadow: 0 18px 45px rgba(21,63,138,.07);
}
.contact form {
  border-top: 4px solid #1554bd;
}
.contact form button {
  background: linear-gradient(120deg, #103d94, #1570c9);
  box-shadow: 0 10px 25px rgba(21,84,189,.18);
}

/* Footer mirrors the hero palette and data-grid motif */
footer {
  position: relative;
  overflow: hidden;
  background-color: #0d2f84;
  background-image:
    radial-gradient(circle at 82% 12%, rgba(72,255,235,.20), transparent 27%),
    linear-gradient(rgba(94,231,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,231,255,.08) 1px, transparent 1px),
    linear-gradient(145deg, #0a2468 0%, #1554bd 52%, #10266f 100%);
  background-size: auto, 64px 64px, 64px 64px, auto;
}
footer::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 160px;
  right: -70px;
  top: -85px;
  border: 1px solid rgba(165,243,252,.24);
  border-radius: 50%;
  transform: rotate(-12deg);
  box-shadow: 0 0 30px rgba(34,211,238,.12);
}
footer .wrap,
footer > small { position: relative; z-index: 1; }
footer p { color: rgba(255,255,255,.78); }

.service-grid .icon i {
  font-size: 1.55rem;
  line-height: 1;
}

.signature-wrap {
  position: relative;
  width: 220px;
  margin: 0 auto;
  overflow: hidden;
}
.portrait .signature-wrap .signature {
  display: block;
  width: 100%;
}
.signature-wrap b {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%) rotate(-12deg);
  width: 125%;
  color: rgba(17,56,119,.34);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  html { font-size: 14px; }
  .hero { min-height: 620px; }
  .hero-content { padding: 64px 12px; }
  .hero h1 {
    font-size: clamp(1.75rem, 7.7vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: .035em;
    white-space: nowrap;
  }
  .eyebrow { font-size: 9px; letter-spacing: .15em; padding: 7px 11px; }
  .hero-en { font-size: .88rem; letter-spacing: .09em; }
  .tagline { font-size: 1rem; }
  .cta { margin-top: 26px; padding: 12px 22px; font-size: .88rem; }
  .hero-foot { font-size: 8px; }
  .section-head h2,
  .light-section h2,
  .contact h2 { font-size: 2rem; }
  .section-head > p,
  .sub { font-size: .85rem; }
  .service-grid h3 { font-size: 1.12rem; }
  .service-grid article > p,
  .service-grid strong { font-size: .82rem; }
  .message { font-size: .82rem; }
  .message p { line-height: 1.85; }
  .contact-grid h3 { font-size: 1.05rem; }
  dl, label, input, textarea, .form-note { font-size: .82rem; }
  footer h3 { font-size: 1rem; }
  footer p, footer a { font-size: .72rem; }
  footer > small { font-size: .62rem; }
  .contact-grid > div:first-child,
  .contact form { padding: 23px; }
  .signature-wrap { width: 190px; }
  .signature-wrap b { font-size: .72rem; }
}