*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#0f8b87;
  --primary-dark:#0a6663;
  --primary-light:#e9f8f7;
  --text:#17212b;
  --muted:#6b7681;
  --white:#fff;
  --line:#dce8e7;
  --shadow:0 24px 70px rgba(10,78,76,.14);
}
html,body{min-height:100%}
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at top left,rgba(15,139,135,.13),transparent 34%),
    linear-gradient(135deg,#f6fbfb 0%,#eef8f7 50%,#f9fbfb 100%);
  color:var(--text);
}
.construction-page{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:48px 20px;
  overflow:hidden;
}
.background-shape{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.shape-one{width:420px;height:420px;top:-160px;right:-100px;background:rgba(15,139,135,.08)}
.shape-two{width:320px;height:320px;left:-130px;bottom:-120px;background:rgba(15,139,135,.07)}
.content-card{
  position:relative;
  z-index:2;
  width:min(920px,100%);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,139,135,.10);
  border-radius:28px;
  padding:48px 54px 30px;
  box-shadow:var(--shadow);
  text-align:center;
}
.brand{display:flex;justify-content:center;margin-bottom:20px}
.logo{width:170px;max-width:52vw;height:auto;object-fit:contain}
.status-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--primary-light);color:var(--primary-dark);
  border:1px solid rgba(15,139,135,.16);border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.2px;margin-bottom:22px
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px rgba(15,139,135,.10)}
h1{font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-2.8px;font-weight:800;margin-bottom:22px}
h1 span{color:var(--primary)}
.intro{max-width:650px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.7}
.construction-visual{width:210px;height:120px;margin:24px auto 14px;position:relative}
.gear{position:absolute;color:var(--primary);line-height:1;animation:spin 7s linear infinite}
.gear-large{font-size:74px;left:45px;top:10px}
.gear-small{font-size:46px;right:45px;top:42px;color:var(--primary-dark);animation-direction:reverse;animation-duration:5s}
.barriers{position:absolute;bottom:0;left:10px;right:10px;height:18px;border-radius:9px;overflow:hidden;display:flex;transform:skewX(-12deg);border:1px solid rgba(15,139,135,.12)}
.barriers span{flex:1;background:var(--primary)} .barriers span:nth-child(even){background:#d9eeee}
.progress-wrap{max-width:650px;margin:8px auto 26px;text-align:left}
.progress-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.progress-head strong{color:var(--primary-dark)}
.progress-track{height:10px;border-radius:999px;background:#edf3f3;overflow:hidden}
.progress-bar{width:75%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#28aaa5);box-shadow:0 0 18px rgba(15,139,135,.30)}
.message{max-width:650px;margin:0 auto 26px}
.message h2{font-size:24px;margin-bottom:8px}
.message p{color:var(--muted);line-height:1.6;font-size:15px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.contact-item{
  display:flex;align-items:center;text-align:left;gap:12px;padding:16px;
  border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;
  transition:.25s ease;background:#fff
}
.contact-item:hover{transform:translateY(-3px);border-color:rgba(15,139,135,.38);box-shadow:0 10px 24px rgba(15,139,135,.10)}
.contact-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--primary-light);color:var(--primary);font-size:18px;flex-shrink:0}
.contact-item small{display:block;color:var(--muted);margin-bottom:3px;font-size:11px}
.contact-item strong{display:block;font-size:12.5px;overflow-wrap:anywhere}
footer{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;color:#8b949d;font-size:11px;display:flex;justify-content:space-between;gap:20px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
  .content-card{padding:38px 22px 24px;border-radius:22px}
  h1{letter-spacing:-1.8px}
  .intro{font-size:15px}
  .contact-grid{grid-template-columns:1fr}
  footer{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){.gear{animation:none}}
