/* ============================================
   DOCERE EDUCATION - Complete Design System
   Based on original Tailwind config
   ============================================ */

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#F8F7F2;color:#1A2744;-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:600}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* ============================================
   COLORS
   ============================================ */
.bg-navy{background:#1A2744}
.bg-crimson{background:#C41E3A}
.bg-ivory{background:#F8F7F2}
.bg-light-gray{background:#E8E8E4}
.bg-white{background:#fff}
.bg-green-600{background:#16a34a}

.text-navy{color:#1A2744}
.text-crimson{color:#C41E3A}
.text-white{color:#fff}
.text-ivory{color:#F8F7F2}
.text-warm-gray{color:#5C5C5C}
.text-amber-400{color:#fbbf24}

/* ============================================
   LAYOUT
   ============================================ */
.container{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
.w-full{width:100%}
.h-full{height:100%}
.h-10{height:40px}
.h-48{height:192px}
.min-h-screen{min-height:100vh}
.min-h-\[60vh\]{min-height:60vh}
.min-h-\[70vh\]{min-height:70vh}
.min-h-\[80vh\]{min-height:80vh}
.max-w-\[1280px\]{max-width:1280px}
.max-w-\[900px\]{max-width:900px}
.max-w-\[800px\]{max-width:800px}
.max-w-\[700px\]{max-width:700px}
.max-w-\[600px\]{max-width:600px}
.max-w-\[550px\]{max-width:550px}
.min-w-\[160px\]{min-width:160px}
.mx-auto{margin-left:auto;margin-right:auto}

/* Position */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.bottom-0{bottom:0}
.z-10{z-index:10}
.z-40{z-index:40}
.z-50{z-index:50}

/* Overflow */
.overflow-hidden{overflow:hidden}
.rounded-2xl{border-radius:16px}
.rounded-xl{border-radius:12px}
.rounded-lg{border-radius:8px}
.rounded-full{border-radius:9999px}

/* Borders */
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}
.border-l-4{border-left-width:4px}
.border-transparent{border-color:transparent}

/* Flex */
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1}
.flex-shrink-0{flex-shrink:0}
.gap-1{gap:4px}
.gap-2{gap:8px}
.gap-2\.5{gap:10px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.gap-5{gap:20px}
.gap-6{gap:24px}
.gap-8{gap:32px}
.gap-10{gap:40px}
.gap-12{gap:48px}
.gap-16{gap:64px}

/* Grid */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.col-span-2{grid-column:span 2 / span 2}

/* Text align */
.text-center{text-align:center}
.text-left{text-align:left}

/* Object fit */
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}

/* Line clamp */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Break inside */
.break-inside-avoid{break-inside:avoid}

/* Aspect ratio */
.aspect-video{aspect-ratio:16 / 9}

/* Space */
.space-y-2 > * + *{margin-top:8px}
.space-y-3 > * + *{margin-top:12px}
.space-y-4 > * + *{margin-top:16px}
.space-y-10 > * + *{margin-top:40px}

/* List */
.list-disc{list-style-type:disc}
.ml-4{margin-left:16px}
.ml-6{margin-left:24px}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.font-sans{font-family:'Inter',system-ui,-apple-system,sans-serif}
.font-serif{font-family:'Playfair Display',Georgia,serif}

.text-\[13px\]{font-size:13px}
.text-xs{font-size:12px}
.text-sm{font-size:14px}
.text-base{font-size:16px}
.text-lg{font-size:18px}
.text-xl{font-size:20px}
.text-2xl{font-size:24px}
.text-3xl{font-size:30px}
.text-\[32px\]{font-size:32px}
.text-\[36px\]{font-size:36px}
.text-\[42px\]{font-size:42px}
.text-\[48px\]{font-size:48px}
.text-\[56px\]{font-size:56px}

.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}

.italic{font-style:italic}
.leading-\[1\.0\]{line-height:1.0}
.leading-\[1\.05\]{line-height:1.05}
.leading-relaxed{line-height:1.625}
.tracking-\[-0\.02em\]{letter-spacing:-0.02em}
.tracking-\[0\.08em\]{letter-spacing:0.08em}
.tracking-\[0\.12em\]{letter-spacing:0.12em}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}
.uppercase{text-transform:uppercase}

/* ============================================
   SPACING
   ============================================ */
.p-5{padding:20px}
.p-6{padding:24px}
.p-8{padding:32px}
.p-10{padding:40px}
.px-3{padding-left:12px;padding-right:12px}
.px-4{padding-left:16px;padding-right:16px}
.px-5{padding-left:20px;padding-right:20px}
.px-6{padding-left:24px;padding-right:24px}
.px-8{padding-left:32px;padding-right:32px}
.px-10{padding-left:40px;padding-right:40px}
.py-1{padding-top:4px;padding-bottom:4px}
.py-1\.5{padding-top:6px;padding-bottom:6px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.py-6{padding-top:24px;padding-bottom:24px}
.py-8{padding-top:32px;padding-bottom:32px}
.py-16{padding-top:64px;padding-bottom:64px}
.py-20{padding-top:80px;padding-bottom:80px}
.py-24{padding-top:96px;padding-bottom:96px}
.py-32{padding-top:128px;padding-bottom:128px}
.pt-24{padding-top:96px}
.pt-32{padding-top:128px}
.pb-8{padding-bottom:32px}
.pb-16{padding-bottom:64px}
.mt-1{margin-top:4px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mt-5{margin-top:20px}
.mt-6{margin-top:24px}
.mt-8{margin-top:32px}
.mt-10{margin-top:40px}
.mt-12{margin-top:48px}
.mt-16{margin-top:64px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mb-8{margin-bottom:32px}
.mb-12{margin-bottom:48px}
.mb-16{margin-bottom:64px}
.mr-4{margin-right:16px}

/* ============================================
   COMPONENTS
   ============================================ */

/* Shadows */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.shadow-card{box-shadow:0 4px 20px rgba(26,39,58,0.06)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}

/* Backdrop blur */
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}

/* Opacity helpers */
.bg-white\/95{background:rgba(255,255,255,0.95)}
.bg-navy\/50{background:rgba(26,39,58,0.5)}
.bg-navy\/70{background:rgba(26,39,58,0.7)}
.bg-ivory\/95{background:rgba(248,247,242,0.95)}
.bg-gradient-to-b{background:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-r{background:linear-gradient(to right,var(--tw-gradient-stops))}
.from-navy\/40{--tw-gradient-from:rgba(26,39,58,0.4);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(26,39,58,0))}
.from-navy\/75{--tw-gradient-from:rgba(26,39,58,0.75);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(26,39,58,0))}
.from-navy\/80{--tw-gradient-from:rgba(26,39,58,0.8);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(26,39,58,0))}
.from-navy\/85{--tw-gradient-from:rgba(26,39,58,0.85);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(26,39,58,0))}
.from-navy\/90{--tw-gradient-from:rgba(26,39,58,0.9);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(26,39,58,0))}
.via-navy\/30{--tw-gradient-stops:var(--tw-gradient-from),rgba(26,39,58,0.3),var(--tw-gradient-to,rgba(26,39,58,0))}
.via-navy\/40{--tw-gradient-stops:var(--tw-gradient-from),rgba(26,39,58,0.4),var(--tw-gradient-to,rgba(26,39,58,0))}
.via-navy\/50{--tw-gradient-stops:var(--tw-gradient-from),rgba(26,39,58,0.5),var(--tw-gradient-to,rgba(26,39,58,0))}
.via-navy\/60{--tw-gradient-stops:var(--tw-gradient-from),rgba(26,39,58,0.6),var(--tw-gradient-to,rgba(26,39,58,0))}
.to-navy\/80{--tw-gradient-to:rgba(26,39,58,0.8)}
.to-navy\/60{--tw-gradient-to:rgba(26,39,58,0.6)}
.to-transparent{--tw-gradient-to:transparent}

/* Text opacity */
.text-navy\/80{color:rgba(26,39,58,0.8)}
.text-navy\/75{color:rgba(26,39,58,0.75)}
.text-navy\/50{color:rgba(26,39,58,0.5)}
.text-navy\/30{color:rgba(26,39,58,0.3)}
.text-ivory\/85{color:rgba(248,247,242,0.85)}
.text-ivory\/80{color:rgba(248,247,242,0.8)}
.text-ivory\/70{color:rgba(248,247,242,0.7)}
.text-ivory\/60{color:rgba(248,247,242,0.6)}
.text-ivory\/40{color:rgba(248,247,242,0.4)}
.text-ivory\/20{color:rgba(248,247,242,0.2)}

/* Border opacity */
.border-white\/10{border-color:rgba(255,255,255,0.1)}
.border-gray-100\/80{border-color:rgba(243,244,246,0.8)}

/* Crimson tint */
.text-crimson\/5{background:rgba(196,30,58,0.05)}
.bg-crimson\/10{background:rgba(196,30,58,0.1)}
.bg-amber-500\/20{background:rgba(245,158,11,0.2)}
.border-amber-400\/40{border-color:rgba(251,191,36,0.4)}
.text-amber-300{color:#fcd34d}

/* Hover */
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:scale-\[1\.03\]:hover{transform:scale(1.03)}
.hover\:-translate-y-1:hover{transform:translateY(-4px)}
.hover\:translate-x-1:hover{transform:translateX(4px)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1)}
.hover\:shadow-card-hover:hover{box-shadow:0 8px 30px rgba(26,39,58,0.1)}
.hover\:shadow-card:hover{box-shadow:0 4px 20px rgba(26,39,58,0.06)}
.hover\:bg-white\/10:hover{background:rgba(255,255,255,0.1)}
.hover\:text-white:hover{color:#fff}
.hover\:text-crimson:hover{color:#C41E3A}
.hover\:text-navy:hover{color:#1A2744}
.hover\:text-ivory\/70:hover{color:rgba(248,247,242,0.7)}
.hover\:underline:hover{text-decoration:underline}
.hover\:border-crimson:hover{border-color:#C41E3A}

/* Transition */
.transition-all{transition-property:all;transition-duration:300ms}
.transition-colors{transition-property:color,background-color,border-color;transition-duration:200ms}
.transition-transform{transition-property:transform;transition-duration:500ms}
.duration-300{transition-duration:300ms}
.duration-400{transition-duration:400ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}

/* Group hover */
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.group:hover .group-hover\:translate-x-1{transform:translateX(4px)}
.group:hover .group-hover\:shadow-card-hover{box-shadow:0 8px 30px rgba(26,39,58,0.1)}

/* ============================================
   NAVIGATION
   ============================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:80px;transition:all 0.4s}
.nav-transparent{background:linear-gradient(to bottom,rgba(26,39,58,0.4),transparent)}
.nav-solid{background:rgba(248,247,242,0.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:8px;transition:transform 0.3s}
.nav-logo:hover{transform:scale(1.02)}
.nav-links{display:none}
.nav-link{position:relative;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.025em;padding:24px 12px;transition:color 0.2s}

/* Dropdown */
.dropdown{position:relative;padding:24px 8px}
.dropdown-toggle{display:flex;align-items:center;gap:4px;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.025em;cursor:pointer;background:none;border:none;color:inherit}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(24px);border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);border:1px solid rgba(243,244,246,0.8);padding:8px 0;min-width:210px;z-index:50;overflow:hidden}
.dropdown:hover .dropdown-menu,.dropdown-menu.open{display:block}
.dropdown-item{display:block;padding:10px 16px;font-size:14px;transition:all 0.2s;white-space:nowrap;color:rgba(26,39,58,0.75)}
.dropdown-item:hover{color:#C41E3A;background:rgba(196,30,58,0.05)}
.dropdown-item.active{color:#C41E3A;font-weight:500;background:rgba(196,30,58,0.05)}

/* Language switcher */
.lang-switcher{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500}
.lang-btn{transition:all 0.2s;padding:2px 4px}
.lang-btn.active{color:#C41E3A;font-weight:600}

/* Mobile */
.mobile-toggle{display:block;padding:8px;color:#1A2744;background:none;border:none}
.mobile-menu{display:none;position:fixed;inset:0;z-index:40;background:#F8F7F2;padding:96px 24px 24px;overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-close{position:absolute;top:24px;right:24px;padding:8px;color:#1A2744;background:none;border:none}
.mobile-link{display:block;font-size:24px;font-family:'Playfair Display',Georgia,serif;font-weight:600;color:#1A2744;padding:16px 0;border-top:1px solid rgba(26,39,58,0.1)}
.mobile-sublink{display:block;font-size:18px;color:rgba(26,39,58,0.8);padding:8px 0 8px 16px}
.mobile-section-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#C41E3A;font-weight:600;padding-top:16px}

/* ============================================
   BUTTONS
   ============================================ */
.btn{display:inline-block;font-weight:600;text-align:center;transition:all 0.3s;cursor:pointer;border:none}
.btn-crimson{background:#C41E3A;color:#fff;padding:16px 32px;border-radius:8px;font-size:16px}
.btn-crimson:hover{transform:scale(1.03);box-shadow:0 20px 25px -5px rgba(0,0,0,0.1)}
.btn-crimson-lg{background:#C41E3A;color:#fff;padding:16px 40px;border-radius:8px;font-size:18px}
.btn-crimson-lg:hover{transform:scale(1.03)}
.btn-outline{border:1px solid rgba(255,255,255,0.4);color:#fff;padding:16px 32px;border-radius:8px;font-size:16px;background:transparent}
.btn-outline:hover{background:rgba(255,255,255,0.1)}
.btn-gold{background:#D4A843;color:#fff;padding:16px 40px;border-radius:100px;font-weight:600;transition:all 0.3s;box-shadow:0 4px 15px rgba(212,168,67,0.3)}
.btn-gold:hover{background:#C49A3B;transform:translateY(-2px)}

/* ============================================
   HERO
   ============================================ */
.hero-badge{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:#C41E3A;text-transform:uppercase;letter-spacing:0.12em;background:rgba(26,39,58,0.5);padding:4px 12px;border-radius:9999px;display:inline-block}
.hero-label{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.12em;display:inline-block;margin-bottom:24px}

/* Scroll indicator */
.scroll-indicator{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);animation:bounce 2s infinite}
.mouse{width:24px;height:40px;border:2px solid rgba(255,255,255,0.4);border-radius:9999px;display:flex;justify-content:center;padding-top:8px}
.dot{width:4px;height:8px;background:rgba(255,255,255,0.6);border-radius:9999px}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}

/* ============================================
   CARDS
   ============================================ */
.program-card{position:relative;height:420px;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(26,39,58,0.06);transition:all 0.5s;display:block}
.program-card:hover{box-shadow:0 8px 30px rgba(26,39,58,0.1)}
.program-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.7s}
.program-card:hover img{transform:scale(1.05)}
.program-card .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,39,58,0.9),rgba(26,39,58,0.3),transparent)}
.program-card .content{position:absolute;bottom:0;left:0;right:0;padding:32px}

.feature-card{background:#fff;border-radius:16px;padding:40px;box-shadow:0 4px 20px rgba(26,39,58,0.06);transition:all 0.3s;text-align:center}
.feature-card:hover{box-shadow:0 8px 30px rgba(26,39,58,0.1)}

.test-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 20px rgba(26,39,58,0.06);transition:all 0.3s}
.test-card:hover{box-shadow:0 8px 30px rgba(26,39,58,0.1);transform:translateY(-4px)}

.book-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:all 0.3s;border-left:4px solid transparent}
.book-card:hover{box-shadow:0 4px 20px rgba(26,39,58,0.06);border-left-color:#C41E3A}

.mission-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(26,39,58,0.06);transition:all 0.3s}
.mission-card:hover{box-shadow:0 8px 30px rgba(26,39,58,0.1)}

/* ============================================
   MASONRY GALLERY
   ============================================ */
.masonry-gallery{columns:2;gap:16px}
.masonry-gallery > *{break-inside:avoid;margin-bottom:16px;border-radius:12px;overflow:hidden}
.masonry-gallery img{width:100%;transition:transform 0.5s}
.masonry-gallery img:hover{transform:scale(1.05)}

/* ============================================
   FOOTER
   ============================================ */
.footer-heading{font-family:'Playfair Display',Georgia,serif;font-size:16px;font-weight:600;color:#fff;margin-bottom:16px}
.footer-link{display:block;font-size:14px;color:rgba(248,247,242,0.7);transition:color 0.2s;margin-bottom:10px}
.footer-link:hover{color:#fff}
.footer-legal{font-size:12px;color:rgba(248,247,242,0.4);transition:color 0.2s}
.footer-legal:hover{color:rgba(248,247,242,0.7)}

/* ============================================
   STATUS BADGES
   ============================================ */
.status-badge{display:inline-block;font-size:12px;font-weight:600;padding:6px 12px;border-radius:9999px}
.status-completed{background:#16a34a;color:#fff}
.status-upcoming{background:#C41E3A;color:#fff}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(min-width:640px){
.sm\:flex-row{flex-direction:row}
.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
.md\:flex{display:flex}
.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
.md\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
.md\:block{display:block}
.md\:hidden{display:none}
.md\:col-span-1{grid-column:span 1/span 1}
.md\:col-span-2{grid-column:span 2/span 2}
.md\:col-span-3{grid-column:span 3/span 3}
.md\:text-\[72px\]{font-size:72px}
.md\:text-\[48px\]{font-size:48px}
.md\:columns-3{columns:3}
.nav-links{display:flex;align-items:center;gap:4px;height:100%}
.mobile-toggle{display:none}
.masonry-gallery{columns:3}
}
@media(min-width:1024px){
.lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
.lg\:grid-cols-\[1fr_280px\]{grid-template-columns:1fr 280px}
.lg\:grid-cols-\[55fr_45fr\]{grid-template-columns:55fr 45fr}
.lg\:grid-cols-\[45fr_55fr\]{grid-template-columns:45fr 55fr}
.lg\:flex{display:flex}
.lg\:block{display:block}
.lg\:hidden{display:none}
.lg\:items-center{align-items:center}
.lg\:py-32{padding-top:128px;padding-bottom:128px}
.lg\:text-\[80px\]{font-size:80px}
.lg\:text-\[96px\]{font-size:96px}
.lg\:order-1{order:1}
.lg\:order-2{order:2}
.masonry-gallery{columns:4}
}
@media(max-width:1023px){
.dropdown:hover .dropdown-menu{display:none}
}

/* ============================================
   ANIMATIONS
   ============================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}