:root {
        --accent: #161853;
        --accent_rgb: 22, 24, 83;
        --sub-accent: #ac3e18;
        --sub-accent_rgb: 172, 62, 24;
        --color-1_rgb: 0, 99, 141;
        --color-1: #00638d;
        --color-2: #53d4e3;
        --color-3: #ffd200;

        --logo-navy: var(--accent);
        --logo-cyan: var(--color-2);
        --logo-cyan-light: #e5f9fc;
        --logo-sky-blue: var(--color-1);
        --logo-rust: var(--sub-accent);

        --bg-gradient-start: #3ba1cf;
        --bg-gradient-end: var(--accent);
        --card-bg-white: rgba(255, 255, 255, 0.52);
        --inner-teal-bg: rgba(228, 247, 250, 0.45);
        --contact-card-bg: rgba(226, 244, 247, 0.52);
        --text-dark-navy: var(--accent);
        --text-navy-bold: #111440;
        --divider-color: rgba(190, 227, 232, 0.7);
        --icon-badge-bg: rgba(255, 255, 255, 0.92);
        --shadow-primary: 0 12px 32px rgba(var(--accent_rgb), 0.22);
        --shadow-subtle: 0 4px 12px rgba(var(--accent_rgb), 0.08);
        --radius-card: 28px;
        --radius-inner: 22px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        outline: none;
        border: none;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background: linear-gradient(135deg, #44adc7 0%, #205c8a 50%, #161853 100%);
        color: var(--text-dark-navy);
        height: 100vh;
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .app-viewport {
        width: 100%;
        max-width: 440px;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, #2b93bd 0%, #111b4d 100%);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: clamp(10px, 2vh, 20px);
        padding: clamp(12px, 2.2vh, 20px) 16px;
        box-shadow: var(--shadow-primary);
        position: relative;
        border: none;
        overflow: hidden;
    }

    .top-hero-card {
        position: relative;
        z-index: 1;
        background: var(--card-bg-white);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-card);
        padding: clamp(10px, 1.8vh, 14px);
        box-shadow: var(--shadow-primary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        animation: slideDown 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .inner-teal-box {
        background: var(--inner-teal-bg);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-inner);
        padding: clamp(10px, 2vh, 18px) 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .school-emblem-wrap {
        width: clamp(90px, 35vw, 140px);
        height: clamp(90px, 35vw, 140px);
        margin-bottom: clamp(4px, 1vh, 10px);
        position: relative;
        animation: zoomIn 0.8s ease-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .school-emblem-img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(22, 24, 83, 0.12));
    }

    .institute-title {
        font-size: clamp(0.92rem, 3.6vw, 1.1rem);
        font-weight: 800;
        color: var(--text-navy-bold);
        line-height: 1.3;
        letter-spacing: -0.01em;
        max-width: 330px;
        margin-top: 16px;
    }

    .action-bar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 0 4px;
    }

    .action-icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-decoration: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
        background-color: white;
    }

    .action-icon-link:active {
        transform: scale(0.92);
    }

    .action-divider {
        width: 1px;
        height: 32px;
        background-color: var(--divider-color);
    }

    .bottom-contact-card {
        position: relative;
        z-index: 1;
        background: var(--contact-card-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-card);
        padding: clamp(6px, 1.5vh, 14px) 14px;
        box-shadow: var(--shadow-primary);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .contact-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: clamp(8px, 1.4vh, 12px) 0;
        text-decoration: none;
        color: var(--text-dark-navy);
        transition: opacity 0.2s ease;
    }

    .contact-row:active {
        opacity: 0.8;
    }

    .contact-row:not(:last-child) {
        border-bottom: 1px solid var(--divider-color);
    }

    .contact-icon-badge {
        width: 42px;
        height: 42px;
        background: var(--icon-badge-bg);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: var(--shadow-subtle);
    }

    .contact-text-content {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-dark-navy);
        line-height: 1.35;
        word-break: break-word;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale(0.85);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (min-width: 481px) {
        body {
            padding: 12px 0;
        }

        .app-viewport {
            border-radius: 36px;
            height: 100vh;
            max-height: 840px;
            border: none;
        }
    }