* { box-sizing: border-box; }
:root { --navy: #142c4d; --blue: #087de0; --muted: #6680a6; }
html, body { margin: 0; width: 100%; height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--navy); background: #fff; }
.page {
  position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100svh;
  min-height: 430px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 10px 16px;
}
.content {
  position: relative; z-index: 2; width: min(100%, 760px); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: auto; text-align: center;
}
.brand { margin: 0; font-size: clamp(1.45rem, 3.2vw, 2.45rem); font-weight: 650; letter-spacing: .17em; line-height: 1.15; }
.brand span { color: var(--blue); }
.tagline { margin: 8px 0 0; color: #8b96a7; font-size: clamp(.76rem, 1.2vw, .95rem); letter-spacing: .1em; }
.tech-art { width: min(100%, 300px); height: clamp(90px, 17vh, 145px); margin: 0 auto; flex: 0 1 auto; }
.tech-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-gear { transform-box: fill-box; transform-origin: center; animation: spin 12s linear infinite; }
.socials { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 15px; }
.social { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; text-decoration: none; flex: 0 0 auto; transition: transform .2s ease; }
.social svg { display: block; width: 17px; height: 17px; }
.social:hover { color: #fff; transform: translateY(-2px); }
.youtube { background: #f20d18; }
.facebook { background: #1877f2; }
.facebook svg, .tiktok svg, .linkedin svg { fill: #fff; }
.tiktok { background: #151820; }
.linkedin { background: #0a82b9; }
.whatsapp { background: #25D366; }
.construction { margin: 0 0 6px; font-size: clamp(.78rem, 1.25vw, .95rem); font-weight: 650; letter-spacing: .24em; }
.message { color: #8b96a7; font-size: clamp(.72rem, 1.05vw, .84rem); letter-spacing: .045em; margin: 0 auto 10px; }
.progress-track { width: min(100%, 230px); height: 8px; overflow: hidden; border-radius: 20px; background: #edf1f6; }
.progress-track span { display: block; height: 100%; width: 68%; border-radius: inherit; background: linear-gradient(90deg, #008cf4, #438be3); animation: progress 3s ease-in-out infinite alternate; }
.thanks { margin-top: 13px; color: #6680a6; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.small-gear { width: 19px; height: 19px; animation: spin 8s linear infinite; }
.thanks p { margin: 0; font-size: .63rem; letter-spacing: .15em; }
.ribbon { position: absolute; z-index: 1; width: 100%; height: clamp(120px, 24vh, 230px); top: 49%; left: 0; transform: translateY(-25%); pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress { from { width: 42%; } to { width: 70%; } }
@media (max-height: 600px) {
  .page { min-height: 0; padding: 5px 12px; }
  .brand { font-size: clamp(1.25rem, 4vh, 1.9rem); }
  .tagline { margin-top: 4px; }
  .tech-art { height: clamp(72px, 15vh, 95px); }
  .socials { margin-bottom: 9px; gap: 10px; }
  .social { width: 25px; height: 25px; }
  .social svg { width: 15px; height: 15px; }
  .thanks { margin-top: 8px; }
  .small-gear { width: 16px; height: 16px; }
}
@media (max-width: 575px) {
  .page { padding: 10px; }
  .brand { font-size: clamp(1.25rem, 6vw, 1.8rem); letter-spacing: .06em; }
  .tagline { letter-spacing: .035em; }
  .tech-art { width: min(100%, 280px); height: clamp(90px, 17vh, 125px); }
  .socials { gap: 11px; margin-bottom: 12px; }
  .social { width: 27px; height: 27px; }
  .social svg { width: 16px; height: 16px; }
  .construction { font-size: .75rem; letter-spacing: .13em; }
  .message { max-width: 300px; font-size: .72rem; letter-spacing: .01em; line-height: 1.35; }
  .ribbon { height: 145px; top: 48%; opacity: .78; }
  .thanks p { font-size: .58rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gear, .small-gear, .progress-track span { animation: none; }
}