@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

:root { --navy: #102a43; --blue: #1677be; --cyan: #42c2d5; --ink: #1c3852; --soft: #eaf5fb; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f8fcfe; color: var(--navy); font-family: 'DM Sans', Arial, sans-serif; }
.construction-page { align-items: center; display: grid; min-height: 100svh; overflow: hidden; padding: 42px clamp(28px, 9vw, 150px); position: relative; }
.hero { max-width: 680px; position: relative; z-index: 2; }
.brand { display: inline-block; text-decoration: none; }
.brand img { display: block; height: auto; width: 165px; }
.content { margin-top: clamp(68px, 14vh, 145px); }
.eyebrow { align-items: center; color: #2783bd; display: flex; font-size: .74rem; font-weight: 700; gap: 9px; letter-spacing: .13em; margin: 0 0 18px; text-transform: uppercase; }
.eyebrow span { animation: pulse 2.4s infinite; background: #48c7d8; border-radius: 50%; height: 8px; width: 8px; }
h1 { font-family: Outfit, sans-serif; font-size: clamp(2.9rem, 6vw, 5.6rem); font-weight: 600; letter-spacing: -.058em; line-height: .98; margin: 0; }
h1 em { color: var(--blue); font-style: normal; }
.intro { color: #547086; font-size: 1.05rem; line-height: 1.65; margin: 28px 0 34px; max-width: 490px; }
.contact-card { align-items: center; background: #fff; border: 1px solid #d7e9f1; border-radius: 14px; box-shadow: 0 15px 35px rgba(22, 97, 142, .11); color: var(--navy); display: flex; gap: 15px; max-width: 390px; padding: 15px 17px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.contact-card:hover { box-shadow: 0 20px 42px rgba(22, 97, 142, .18); transform: translateY(-4px); }
.mail-icon { align-items: center; background: #e8f7fb; border-radius: 10px; color: var(--blue); display: flex; font-size: 1.25rem; height: 42px; justify-content: center; width: 42px; }
.contact-card small { color: #7890a1; display: block; font-size: .71rem; font-weight: 700; letter-spacing: .07em; margin-bottom: 3px; text-transform: uppercase; }
.contact-card strong { font-size: .96rem; font-weight: 700; }
.arrow { color: var(--blue); font-size: 1.35rem; margin-left: auto; transition: transform .2s ease; }.contact-card:hover .arrow { transform: translateX(4px); }
footer { align-items: center; color: #7890a1; display: flex; font-size: .78rem; gap: 10px; margin-top: clamp(70px, 14vh, 150px); }.footer-dot { background: #a5bbc8; border-radius: 50%; height: 3px; width: 3px; }
.orbit { height: min(58vw, 730px); pointer-events: none; position: absolute; right: clamp(-300px, -11vw, -100px); top: 50%; transform: translateY(-50%); width: min(58vw, 730px); }
.orbit-ring { border: 1px solid rgba(40, 153, 201, .16); border-radius: 50%; inset: 0; position: absolute; }.ring-one { animation: rotate 25s linear infinite; border-style: dashed; }.ring-two { animation: rotate-reverse 35s linear infinite; inset: 12%; }
.orbit-core { align-items: center; animation: float 5s ease-in-out infinite; background: #fff; border-radius: 50%; box-shadow: 0 26px 65px rgba(24, 119, 190, .22); display: flex; height: 30%; justify-content: center; left: 35%; overflow: hidden; position: absolute; top: 35%; width: 30%; }.orbit-core img { display: block; height: auto; width: 89%; }
.satellite { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 8px rgba(66,194,213,.1); height: 11px; position: absolute; width: 11px; }.satellite-one { animation: drift 7s ease-in-out infinite; left: 8%; top: 30%; }.satellite-two { animation: drift 7s ease-in-out -2s infinite; bottom: 19%; right: 14%; }
.glow { border-radius: 50%; filter: blur(4px); position: absolute; }.glow-one { background: #dff7fb; height: 440px; right: -190px; top: -210px; width: 440px; }.glow-two { background: #e7f4fb; bottom: -340px; height: 520px; left: -260px; width: 520px; }
@keyframes rotate { to { transform: rotate(360deg); } } @keyframes rotate-reverse { to { transform: rotate(-360deg); } } @keyframes float { 50% { transform: translateY(-15px); } } @keyframes drift { 50% { transform: translate(16px, -20px); } } @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(72,199,216,0); transform: scale(.8); } }
@media (max-width: 720px) { .construction-page { align-items: start; padding: 32px 26px; }.content { margin-top: 70px; }.orbit { opacity: .34; right: -180px; top: 19%; width: 480px; height: 480px; } footer { margin-top: 80px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }