:root {
    --primary-dark: #061326;
    --primary-medium: #0b3a8d;
    --primary-light: #2dd4ff;
    --accent-soft: #dbeafe;
    --accent: #60a5fa;
    --bg-soft: #f4f8ff;
    --surface: #ffffff;
    --text-dark: #10213d;
    --text-muted: #66738f;
    --border-soft: rgba(11, 41, 97, 0.08);
    --shadow-soft: 0 20px 45px rgba(9, 33, 79, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at top left, rgba(45,212,255,.08), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    color: var(--text-dark);
}

a { text-decoration: none; }
img { max-width: 100%; }

.navbar-modern {
    background: rgba(3, 10, 24, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-logo-wrap { display: inline-flex; align-items: center; gap: .45rem; }
.brand-logo { width: 46px; height: 46px; border-radius: 16px; object-fit: cover; background: #fff; padding: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.brand-logo-secondary { margin-left: -12px; border: 2px solid rgba(255,255,255,.7); }
.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(45,212,255,.24));
    color: #fff;
    font-weight: 900;
    letter-spacing: -.05em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(0,0,0,.22);
}

.brand-small { font-size: .62rem; letter-spacing: .18em; }

.navbar-modern .nav-link {
    color: rgba(255,255,255,.84);
    font-weight: 500;
    padding: .72rem 1rem;
    border-radius: 999px;
    transition: .25s ease;
}
.navbar-modern .nav-link:hover,
.navbar-modern .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0 90px;
    background:
      radial-gradient(circle at top right, rgba(121,179,255,.35), transparent 20%),
      radial-gradient(circle at left center, rgba(78,161,255,.16), transparent 18%),
      linear-gradient(135deg, rgba(3,10,24,.98), rgba(7,38,93,.94), rgba(13,71,161,.86));
    color: #fff;
}
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
}
.hero-section::before {
    width: 240px; height: 240px; right: -60px; top: 80px;
    background: rgba(255,255,255,.06);
}
.hero-section::after {
    width: 360px; height: 360px; left: -120px; bottom: -120px;
    background: rgba(78,161,255,.08);
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    font-size: .95rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
}
.hero-lead {
    font-size: 1.08rem;
    color: rgba(255,255,255,.78);
    max-width: 640px;
}

.hero-showcase {
    position: relative;
    padding: 1.15rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 50px rgba(3, 15, 40, .22);
}

.hero-showcase .floating-card,
.card-custom,
.glass-card,
.dashboard-panel,
.contact-card {
    border-radius: 26px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.88);
    box-shadow: var(--shadow-soft);
}

.floating-card {
    padding: 1.1rem;
    animation: floatY 4s ease-in-out infinite;
}
.floating-card.delay { animation-delay: 1.2s; }
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-grid-stat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 1.5rem;
}
.hero-stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    padding: 1rem;
}
.hero-stat h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.hero-stat p { font-size: .92rem; margin-bottom: 0; color: rgba(255,255,255,.72); }

.section-space { padding: 92px 0; }
.section-title {
    color: var(--primary-dark);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    letter-spacing: -.03em;
    margin-bottom: .9rem;
}
.section-subtitle { color: var(--text-muted); max-width: 680px; }

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, var(--accent-soft), #fff);
    color: var(--primary-dark);
    font-weight: 700;
    border: 1px solid rgba(18,59,142,.08);
}

.card-custom {
    transition: transform .28s ease, box-shadow .28s ease;
    overflow: hidden;
}
.card-custom:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(9, 33, 79, 0.12);
}

.icon-box {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-dark);
    background: linear-gradient(135deg, var(--accent-soft), #fff);
}

.info-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .68rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-soft);
    color: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(9, 33, 79, 0.05);
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
    border: none;
    color: #fff;
    padding: .9rem 1.4rem;
    border-radius: 999px;
    box-shadow: 0 15px 30px rgba(18,59,142,.22);
}
.btn-primary-custom:hover { color: #fff; transform: translateY(-1px); }

.page-header {
    position: relative;
    overflow: hidden;
    padding: 92px 0 52px;
    background:
      radial-gradient(circle at top left, rgba(121,179,255,.22), transparent 22%),
      linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
    color: #fff;
}
.page-header p { color: rgba(255,255,255,.8); max-width: 680px; }

.kajur-photo {
    width: 100%;
    max-width: 460px;
    height: 500px;
    object-fit: cover;
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(4, 18, 44, .22);
}
.quote-mark { color: var(--primary-light); font-size: 3rem; }
.gallery-img {
    width: 100%;
    height: 245px;
    object-fit: cover;
}
.teacher-photo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    object-fit: cover;
}
.facility-hero {
    min-height: 100%;
    background: linear-gradient(135deg, rgba(8,31,77,.96), rgba(18,59,142,.9));
    color: #fff;
}

.metric-card h3,
.dashboard-stat h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: .25rem;
}
.metric-card p,
.dashboard-stat p { color: var(--text-muted); margin-bottom: 0; }

.footer-section {
    background: linear-gradient(135deg, #05142f, #0b255d);
}
.footer-links a { color: rgba(255,255,255,.68); }
.footer-links a:hover { color: #fff; }

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at top left, rgba(121,179,255,.2), transparent 20%), linear-gradient(135deg, #eef4ff, #dfeaff);
}
.form-control, .form-select, textarea {
    border-radius: 16px;
    border-color: rgba(10, 37, 89, .12);
    min-height: 48px;
}
textarea.form-control { min-height: 120px; }
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(18,59,142,.12);
    border-color: rgba(18,59,142,.25);
}

.table-admin th {
    background: var(--primary-dark);
    color: #fff;
    white-space: nowrap;
}
.dashboard-panel { padding: 1.4rem; }
.dashboard-sidebar { position: sticky; top: 92px; }
.dashboard-menu .list-group-item {
    border: none;
    border-radius: 16px;
    margin-bottom: .45rem;
    color: var(--text-dark);
}
.dashboard-menu .list-group-item.active {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
}
.inline-thumb {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
}

.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal-up.show {
    opacity: 1;
    transform: translateY(0);
}

.timeline-card {
    position: relative;
    padding-left: 1.2rem;
}
.timeline-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--primary-medium), var(--primary-light));
}

@media (max-width: 991.98px) {
    .hero-section { padding-top: 96px; }
    .hero-grid-stat { grid-template-columns: 1fr; }
    .section-space { padding: 72px 0; }
    .dashboard-sidebar { position: static; }
}

@media (max-width: 767.98px) {
    .hero-title { font-size: 2.35rem; }
    .hero-showcase { margin-top: 1rem; }
    .gallery-img { height: 220px; }
    .kajur-photo { height: 360px; }
}


/* Final premium DKV identity */
.brand-logo-wrap + span { line-height: 1.15; }
.navbar-brand { max-width: 55vw; }
@media (max-width: 575.98px) { .brand-logo { width: 38px; height: 38px; } .brand-small { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }