/* Gloway International — Coming Soon page */
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("assets/fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 800; font-display: swap; src: url("assets/fonts/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --brand: #115759; --brand-900: #062C2E; --accent: #F6CD13; --on-dark: #E7F3F2;
  --head: "Outfit", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #062C2E; }
body {
  min-height: 100vh; font-family: var(--body); color: var(--on-dark); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 60% 55%, rgba(27, 124, 126, .55), transparent 65%),
    radial-gradient(600px 380px at 0% 100%, rgba(246, 205, 19, .07), transparent 60%),
    linear-gradient(180deg, #0B3E40 0%, #083234 55%, #062C2E 100%);
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 75%);
}
.page { position: relative; overflow: hidden; min-height: 100vh; max-width: 1200px; margin: 0 auto; padding: 32px 20px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.top { margin-bottom: 28px; animation: rise .9s var(--ease) both; }
.logo { height: 60px; width: auto; display: block; }

.intro { max-width: 760px; animation: rise .9s .1s var(--ease) both; }
.badge { display: inline-flex; align-items: center; gap: .55rem; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .45rem .95rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(246,205,19,.6); animation: blink 2s infinite; }
h1 { font-family: var(--head); font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; color: #fff; margin: 1.1rem 0 1rem; text-wrap: balance; }
.accent { background: linear-gradient(92deg, #FFE27A 0%, var(--accent) 60%, #F2B705 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro p { font-size: 1.08rem; line-height: 1.65; color: rgba(231,243,242,.78); margin: 0 auto; max-width: 600px; }

/* Map */
.map { width: min(118vw, clamp(640px, calc((100vh - 520px) * 2.09), 1080px)); margin: 4px 0 0; animation: fade 1.2s .3s both;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%); }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
.map-dots { opacity: .17; }
.arc { stroke: url(#arcGrad); stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease) forwards; animation-delay: var(--d, 0s); }
.pin circle { fill: var(--accent); }
.pin .pulse, .hub-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
.hub-ring { stroke-width: 2; animation-duration: 2s; }
.labels text { fill: rgba(231,243,242,.72); font: 600 16px var(--head); letter-spacing: .02em; }
.hub-tag rect { fill: #fff; }
.hub-tag text { fill: var(--brand-900); font: 700 14px var(--head); }

/* Contact */
.contact { margin-top: -50px; position: relative; animation: rise .9s .25s var(--ease) both; }
.contact-label { margin: 0 0 8px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(231,243,242,.65); }
.phone { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--head); font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.6rem); color: #fff; text-decoration: none; letter-spacing: -.01em; transition: color .2s; }
.phone svg { width: .8em; height: .8em; color: var(--accent); }
.phone:hover { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: 1.02rem; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn svg { width: 1.15em; height: 1.15em; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(37,211,102,.7); }
.btn-call { background: var(--accent); color: var(--brand-900); }
.btn-call:hover { background: #FFD92E; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(246,205,19,.65); }

.foot { margin-top: auto; padding-top: 40px; font-size: .85rem; color: rgba(231,243,242,.5); }

.wa-float { position: fixed; right: 20px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 14px 30px -8px rgba(37,211,102,.6); z-index: 10; }
.wa-float svg { width: 28px; height: 28px; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ring 2.4s ease-out infinite; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes blink { 0% { box-shadow: 0 0 0 0 rgba(246,205,19,.6); } 100% { box-shadow: 0 0 0 10px rgba(246,205,19,0); } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
  .page { padding-top: 24px; }
  .logo { height: 50px; }
  .top { margin-bottom: 26px; }
  .intro p { font-size: 1rem; }
  .map { width: 150vw; margin-top: 6px; }
  .labels, .hub-tag { display: none; }
  .contact { margin-top: -20px; }
  .map { width: 150vw; }
  .actions { flex-direction: column; width: 100%; }
  .btn { width: 100%; }
  .wa-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .arc { stroke-dashoffset: 0; }
}