/* ===========================================================
   NSS College Nilamel — Under Construction page
   Brand: navy #002147 / gold #ffb606
   Fluid layout — fits one screen, no scroll (incl. mobile)
=========================================================== */
:root {
    --navy: #002147;
    --navy-2: #013a78;
    --navy-3: #024a9a;
    --gold: #ffb606;
    --muted: #c3cfe0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #fff;
    background: radial-gradient(circle at 20% 20%, #013a78 0%, #001a39 55%, #000c1c 100%);
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: clamp(6px, 1.2vh, 22px) clamp(12px, 4vw, 24px);
}

/* ---- decorative background blobs ---- */
.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}
.blob-1 {
    width: 520px; height: 520px;
    top: -190px; right: -150px;
    background: radial-gradient(circle, rgba(255, 182, 6, 0.18) 0%, rgba(255, 182, 6, 0) 70%);
}
.blob-2 {
    width: 460px; height: 460px;
    bottom: -180px; left: -140px;
    background: radial-gradient(circle, rgba(2, 74, 154, 0.55) 0%, rgba(2, 74, 154, 0) 70%);
}

/* ---- layout ---- */
.uc-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uc-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: clamp(16px, 2.4vw, 26px);
    padding: clamp(22px, 4vh, 46px) clamp(20px, 4vw, 46px);
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* ---- brand ---- */
.uc-brand {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(14px, 2.4vh, 26px);
}
.uc-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: clamp(8px, 1.4vh, 14px) clamp(16px, 3vw, 26px);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}
.uc-logo-badge img { height: clamp(38px, 6vh, 56px); width: auto; display: block; }
.uc-logo-fallback { display: none; color: var(--navy); font-weight: 800; letter-spacing: 1px; font-size: 15px; }
.uc-logo-badge.no-img .uc-logo-fallback { display: inline; }

/* ---- animated emblem ---- */
.uc-emblem {
    position: relative;
    width: clamp(86px, 14vh, 120px);
    height: clamp(78px, 12.5vh, 110px);
    margin: 0 auto clamp(10px, 2vh, 22px);
    color: var(--gold);
}
.uc-emblem .gear { position: absolute; opacity: 0.92; }
.uc-emblem .gear-lg { font-size: clamp(50px, 9vh, 70px); top: 6%; left: 14%; animation: spin 9s linear infinite; }
.uc-emblem .gear-sm { font-size: clamp(30px, 5.6vh, 44px); top: 38%; right: 6%; color: #fff; opacity: 0.55; animation: spin-rev 6s linear infinite; }
.uc-emblem .tool {
    position: absolute;
    bottom: -4%; left: 50%;
    transform: translateX(-50%);
    font-size: clamp(22px, 4vh, 30px);
    color: var(--gold);
    animation: rock 2.6s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes rock { 0%, 100% { transform: translateX(-50%) rotate(-12deg); } 50% { transform: translateX(-50%) rotate(12deg); } }

/* ---- text ---- */
.uc-eyebrow {
    display: inline-block;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: clamp(10px, 1.4vw, 12px);
    font-weight: 700;
    margin-bottom: clamp(8px, 1.4vh, 16px);
}
.uc-title {
    font-size: clamp(22px, 4.6vw, 38px);
    line-height: 1.16;
    font-weight: 800;
    color: #fff;
    margin-bottom: clamp(10px, 1.8vh, 18px);
}
.uc-title span { color: var(--gold); }
.uc-text {
    color: var(--muted);
    font-size: clamp(12.5px, 1.6vw, 15.5px);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto clamp(12px, 2.2vh, 30px);
}
.uc-text strong { color: #fff; }

/* ---- progress ---- */
.uc-progress { max-width: 460px; margin: 0 auto clamp(16px, 3vh, 34px); }
.uc-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: clamp(10.5px, 1.3vw, 12.5px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 9px;
}
.uc-progress-pct { color: var(--gold); font-weight: 700; }
.uc-bar {
    height: 9px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}
.uc-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--gold), #ffd166);
    box-shadow: 0 0 14px rgba(255, 182, 6, 0.55);
    animation: fill 1.8s cubic-bezier(.22,.61,.36,1) forwards 0.3s;
}
@keyframes fill { to { width: 75%; } }

/* ---- contact chips ---- */
.uc-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 12px);
    margin-bottom: clamp(14px, 2.4vh, 28px);
}
.uc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e8eef7;
    font-size: clamp(11px, 1.4vw, 13.5px);
    padding: clamp(7px, 1.1vh, 9px) clamp(12px, 2vw, 16px);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
}
.uc-chip i { color: var(--gold); }
a.uc-chip:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}
a.uc-chip:hover i { color: var(--navy); }

/* ---- social ---- */
.uc-social { display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 12px); }
.uc-social a {
    width: clamp(36px, 5vh, 42px); height: clamp(36px, 5vh, 42px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    transition: all 0.3s ease;
}
.uc-social a:hover {
    background: var(--gold);
    color: var(--navy);
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(255, 182, 6, 0.35);
}

/* ---- footer ---- */
.uc-foot {
    margin-top: clamp(8px, 1.4vh, 22px);
    font-size: clamp(10.5px, 1.3vw, 12.5px);
    color: rgba(255, 255, 255, 0.55);
    padding: 0 10px;
}

/* On very short screens, drop the progress block to guarantee fit */
@media (max-height: 560px) {
    .uc-progress { display: none; }
    .uc-emblem { margin-bottom: 8px; }
}
@media (max-height: 460px) {
    .uc-emblem { display: none; }
}