/* Home page design tokens and typography, after the original page styles. */
:root {
  --primary: #2557d6;
  --primary-dark: #193fa8;
  --accent: #315dba;
  --bg-light: #f5f9ff;
  --text-main: #14243b;
  --text-muted: #526278;
  --border: #dfe6ef;
  --font: 'Manrope', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
}
body { font-size: 16px; line-height: 1.75; font-weight: 500; }
h1, h2, h3, h4, h5, h6, .brand-text, .team-name, .footer-logo {
  font-family: var(--font-display); font-weight: 700 !important;
}
button, input, select, textarea { font-family: var(--font); }
::selection { background: #dceaff; color: #14243b; }
.premium-nav { background: #ffffffed; border-bottom: 1px solid var(--border); box-shadow: 0 3px 22px #14243b06; }
.brand-text { font-size: 21px; letter-spacing: -.7px; color: var(--text-main); }
.nav-links a { font-size: 14px; font-weight: 700; }
.premium-hero { background: radial-gradient(ellipse at 65% 15%, #e2edff, transparent 60%), linear-gradient(130deg, #f8fafc, #edf5f3); }
.hero-title { font-size: clamp(2.7rem, 6.2vw, 5.5rem); line-height: 1.08; letter-spacing: -.055em !important; font-weight: 700; color: var(--text-main); text-shadow: 0 2px 0 #d9e2ed, 0 14px 28px #14243b10; text-wrap: balance; }
.hero-title span { color: var(--primary); }
.hero-tag, .section-tag { font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .17em; color: var(--accent); }
.hero-tag { margin-top: 12px; margin-bottom: 24px; }
.hero-subtitle { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.8; color: var(--text-muted); max-width: 760px; font-weight: 500; }
.section-title { font-size: clamp(1.9rem, 3.4vw, 3rem) !important; letter-spacing: -.045em !important; line-height: 1.15; text-wrap: balance; }
.premium-section p, .about-text-content { font-size: 16px !important; line-height: 1.9 !important; font-weight: 500; text-align: left !important; }
.premium-section h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem) !important; letter-spacing: -.035em; line-height: 1.25; }
.premium-section h4 { font-size: 20px; letter-spacing: -.025em; }
.glass-card { border-color: var(--border); border-radius: 24px; box-shadow: 0 10px 32px #14243b07; }
#about .glass-card { background: linear-gradient(135deg, #edf5ff, #f5f2ff) !important; color: #2557d6 !important; border: 1px solid #dbe5fa !important; box-shadow: 0 22px 45px #193fa80c !important; }
#about .glass-card h3 { color: #1742a0; }
#about .glass-card p { color: #526278 !important; }
#about .glass-card hr { border-color: #d2dff4 !important; }
#servicesCarousel .glass-card { border-bottom-color: var(--primary) !important; }
#servicesCarousel h3 span { color: var(--accent) !important; }
.text-primary { color: var(--primary) !important; }
.btn-cta { font-size: 14px; font-weight: 800; letter-spacing: .015em; background: var(--primary); border-radius: 14px; padding: 13px 26px; box-shadow: 0 5px 14px #2557d625; }
.btn-cta:hover { background: var(--primary-dark); box-shadow: 0 5px 0 #193fa8, 0 14px 28px #2557d625; }
.btn-cta:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #3975df; outline-offset: 5px; }
.team-name { font-size: 21px; letter-spacing: -.03em; }
.team-role { font-size: 12px; letter-spacing: .08em; color: var(--accent); opacity: 1; }
.project-reveal-card h3, .project-reveal-card h4 { color: var(--text-main); }
.project-link { font-size: 15px !important; font-weight: 600 !important; color: var(--text-muted) !important; }
.expand-hint { color: var(--accent) !important; opacity: 1 !important; letter-spacing: .06em; }
.project-reveal-card:hover .expand-hint { opacity: 0 !important; }
#contact .section-title span { color: var(--accent) !important; }
#contact li { font-size: 15px; line-height: 1.85; color: var(--text-muted); }
footer { background: linear-gradient(135deg, #f2f7ff, #f8faff) !important; color: #526278 !important; border-top: 1px solid #dbe8fa; }
footer p, footer li, footer a:not(.btn-cta) { color: #526278 !important; font-size: 14px !important; line-height: 1.85 !important; }
footer h5, footer h4, footer h6 { color: #1742a0 !important; letter-spacing: .06em !important; font-size: 13px !important; }
footer a:hover { color: #193fa8 !important; }
footer i { color: #3975df !important; }
footer .footer-col-brand img { filter: none !important; }
footer .footer-col-brand a { background: #e3edff !important; color: #2557d6 !important; }
footer .footer-col-brand a:hover { background: #d3e3ff !important; }
footer .footer-support { background: #e8f1ff !important; border-color: #cdddF7 !important; }
footer .footer-support a, footer .footer-support a i { color: #fff !important; }
footer .footer-support a { background: #2557d6 !important; }
footer .footer-support a:hover { background: #193fa8 !important; }
footer .footer-bottom { border-color: #dbe8fa !important; }
footer .footer-bottom .premium-container > div { color: #526278 !important; }
.modal-title { font-size: 23px; letter-spacing: -.035em !important; }
.modal-header { background: var(--primary) !important; }
.form-control { font-size: 15px; color: var(--text-main); background: #f8fafc; }
.form-control:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px #2557d61a; }
.depth-tile { font-family: var(--font-display); color: var(--primary); }
.depth-tile-two { color: var(--accent); background: linear-gradient(135deg, #f4fffc, #ceece4); box-shadow: 0 12px 0 #a8d4ca, 12px 30px 35px #087f731a; }
.depth-orb-orange { background: radial-gradient(circle at 28% 24%, #fff, #e3ddff 32%, #a6a4ed 67%, #777cc5); box-shadow: 15px 25px 35px #8c8cdd20; }
.depth-orb-blue { background: radial-gradient(circle at 30% 25%, #e4efff, #8baaf0 27%, #3969d9 63%, #183b85); }
.depth-ring { border-color: #90abe5; box-shadow: inset 5px 7px 10px #fff9, 8px 14px 0 #3b5eaa, 25px 40px 55px #2557d622; }
.blob-1 { background: #2557d626; }
.blob-2 { background: #087f731a; }
/* Lightweight SVG characters, restricted to the decorative hero layer. */
.sky-car { position: absolute; width: clamp(90px, 12vw, 165px); filter: drop-shadow(0 15px 12px #193fa81f); }
.sky-car img, .sky-robot img { display: block; width: 100%; height: auto; overflow: visible; }
.sky-car-one { top: 9%; left: 5%; animation: sky-cruise-left 12s ease-in-out infinite; }
.sky-car-two { right: 4%; bottom: 5%; width: clamp(75px, 10vw, 135px); animation: sky-cruise-right 14s ease-in-out infinite; animation-delay: -5s; }
.sky-robot { position: absolute; width: clamp(95px, 12vw, 160px); left: 3%; bottom: 4%; animation: robot-float 5s ease-in-out infinite; filter: drop-shadow(0 12px 15px #193fa818); }
.sky-robot::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 1%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, #5e9dff66, transparent 70%); filter: blur(7px); animation: robot-engine 1.2s ease-in-out infinite alternate; }
.depth-tile-one { left: 18%; bottom: 8%; }
@keyframes sky-cruise-left {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(65px, -16px) rotate(4deg); }
}
@keyframes sky-cruise-right {
  0%, 100% { transform: translate(0, 0) rotate(4deg); }
  50% { transform: translate(-60px, -24px) rotate(-5deg); }
}
@keyframes robot-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes robot-wave { 0%, 60%, 100% { transform: rotate(0); } 70%, 90% { transform: rotate(15deg); } 80% { transform: rotate(-8deg); } }
@keyframes robot-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
@keyframes robot-engine { from { opacity: .4; } to { opacity: 1; } }
@media (max-width: 767px) {
  .sky-car-one { top: 3%; left: 5%; width: 85px; }
  .sky-car-two { bottom: 2%; right: 4%; width: 80px; }
  .sky-robot { width: 82px; left: 1%; bottom: 1%; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-car, .sky-robot, .robot-wave, .robot-eyes, .robot-thrust { animation: none; }
}

/* International visual system: quiet surfaces, confident navy type, and one clear blue accent. */
:root {
  --primary: #175cd3;
  --primary-dark: #1247a6;
  --accent: #0b74c9;
  --bg-light: #f6f9fd;
  --text-main: #10233f;
  --text-muted: #53657d;
  --border: #dbe5f1;
  --surface: #ffffff;
}
body { background: #fbfdff; color: var(--text-main); font-family: var(--font); letter-spacing: -.006em; }
.premium-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.premium-nav { min-height: 76px; background: rgba(255,255,255,.92); border-color: #dbe5f1; backdrop-filter: blur(18px); }
.brand-text { color: var(--text-main); font-size: 20px; letter-spacing: -.045em; }
.nav-links { gap: 30px; }
.nav-links a { color: #3a4d68; font-size: 13px; letter-spacing: .02em; }
.nav-links a:hover { color: var(--primary); }
.premium-hero { min-height: 630px; background: radial-gradient(circle at 50% 0%, #e8f2ff 0, transparent 47%), linear-gradient(145deg, #fbfdff 0%, #f1f7ff 58%, #f8fbff 100%); }
.hero-title { max-width: 950px; margin-inline: auto; color: #0d2444; font-size: clamp(2.9rem, 6vw, 5.7rem); line-height: 1.02; letter-spacing: -.072em !important; }
.hero-title span { color: var(--primary); }
.hero-tag, .section-tag { color: #1766b7; font-size: 11px; letter-spacing: .22em; }
.hero-subtitle { max-width: 650px; color: #52657e; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.8; }
.btn-cta { background: linear-gradient(135deg, #1d63dc, #164dbd); border-radius: 12px; box-shadow: 0 12px 26px #175cd326; }
.btn-cta:hover { background: linear-gradient(135deg, #1247a6, #0f398b); box-shadow: 0 14px 30px #175cd33d; }
.section-title { color: #102b50; font-size: clamp(2rem, 3.3vw, 3.15rem) !important; letter-spacing: -.065em !important; }
.premium-section { padding-block: clamp(76px, 9vw, 132px); }
.premium-section p, .about-text-content { color: #53657d; font-size: 16px !important; line-height: 1.9 !important; }
.glass-card { background: rgba(255,255,255,.86); border: 1px solid #dbe5f1; border-radius: 20px; box-shadow: 0 18px 50px #10233f0b; }
.glass-card:hover { border-color: #b9d1f1; box-shadow: 0 24px 58px #175cd31a; }
.premium-section h3, .premium-section h4 { color: #102b50; }
.premium-section h3 span, #servicesCarousel h3 span { color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.team-role { color: #1766b7; font-weight: 800; letter-spacing: .12em; }
#contact .section-title span { color: var(--primary) !important; }
footer { background: #f2f6fc !important; border-top-color: #dbe5f1; }
footer h5, footer h4, footer h6 { color: #174d96 !important; }
footer p, footer li, footer a:not(.btn-cta) { color: #61728a !important; }
footer .footer-support { background: #e6f0ff !important; border-color: #c8daf4 !important; }
footer .footer-support a { background: var(--primary) !important; }
footer .footer-support .footer-request-service {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  background: #174dbd !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px #174dbd30;
}
footer .footer-support .footer-request-service i { color: #fff !important; }
footer .footer-support .footer-request-service:hover,
footer .footer-support .footer-request-service:focus-visible {
  background: #10388c !important;
  color: #fff !important;
}
@media (max-width: 767px) {
  .premium-container { width: min(100% - 36px, 620px); }
  .premium-nav { min-height: 68px; }
  .premium-hero { min-height: 600px; }
  .hero-title { font-size: clamp(2.45rem, 11vw, 3.65rem); letter-spacing: -.06em !important; }
  .section-title { font-size: clamp(1.85rem, 9vw, 2.5rem) !important; }
  .premium-section { padding-block: 76px; }
}
@media (max-width: 767px) {
  .premium-container { padding-left: 22px; padding-right: 22px; }
  .hero-title { font-size: clamp(2.5rem, 10vw, 3.6rem); }
  .hero-subtitle { font-size: 16px; }
  .hero-tag { font-size: 11px; }
  .team-name { font-size: 18px; }
  .team-role { font-size: 11px; }
  #servicesCarousel .glass-card { padding: 28px 24px !important; }
}
