/* =========================
Learnify — HOME (Sleek Dark)
Place in assets/css/home.css
Works with your global variables in styles.css
========================= */

/* Root-level adjustments */
:root { --bg-deep:#071124; --card-glass:rgba(255,255,255,0.03); --accent-start:#14b8a6; --accent-end:#00d4ff; --gold:#ffcc33; --muted:rgba(226,232,240,0.6); --text:rgba(226,232,240,0.96); }

/* Basic page */
body { background:linear-gradient(180deg,#05060b 0%,#071124 100%); color:var(--text); font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; }

/* Header */
.site-header { position:sticky; top:14px; z-index:1200; padding:10px 0; margin:0 20px; border-radius:12px; background:linear-gradient(180deg,rgba(10,14,20,0.45),rgba(6,10,16,0.22)); backdrop-filter:blur(8px) saturate(120%); box-shadow:0 12px 40px rgba(2,6,23,0.6); transition:all 220ms ease; }
.site-header.scrolled { transform:translateY(-6px) scale(0.995); box-shadow:0 18px 50px rgba(2,6,23,0.75); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 20px; }
.logo-left { display:flex; align-items:center; gap:12px; }
.logo-badge { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent-start),var(--accent-end)); box-shadow:0 8px 30px rgba(20,184,166,0.12); padding:8px; }
.logo-badge img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.brand-name { font-weight:700; color:var(--text); font-size:1.05rem; display:block; }
.brand-sub { font-size:0.82rem; color:var(--muted); display:block; margin-top:2px; }

/* Nav */
.main-nav { display:flex; gap:20px; align-items:center; }
.main-nav a { color:var(--text); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px; transition:all 200ms ease; opacity:0.95; }
.main-nav a:hover { color:#fff; text-shadow:0 6px 24px rgba(20,184,166,0.06); transform:translateY(-1px); }
.main-nav.open { display:flex; flex-direction:column; position:absolute; top:72px; right:20px; background:linear-gradient(180deg,rgba(6,10,18,0.9),rgba(6,10,18,0.85)); padding:12px; border-radius:10px; box-shadow:0 20px 60px rgba(2,6,23,0.7); }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:12px; }
.link-login { color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; }
.btn-cta { background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); color:#041017; padding:10px 16px; border-radius:10px; font-weight:800; text-decoration:none; box-shadow:0 14px 50px rgba(20,184,166,0.08); }

/* Mobile hamburger */
.hamburger { display:none; background:transparent; border:0; padding:6px; }
.hamburger span { display:block; height:2px; width:22px; background:var(--text); margin:4px 0; border-radius:2px; opacity:0.9; }

/* HERO */
.hero { position:relative; padding:84px 0 60px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; background-image:url('assets/images/hero-tech.jpg'); background-size:cover; background-position:center center; filter:contrast(0.86) saturate(1.02) brightness(0.48); transform:scale(1.02); will-change:transform; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(2,4,8,0.22) 0%,rgba(2,4,8,0.72) 60%,rgba(2,4,8,0.86) 100%); pointer-events:none; }
.hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:center; padding:18px 0; }
.hero-copy { padding:28px 0; max-width:830px; }
.hero h1 { font-size:2.3rem; line-height:1.02; margin:0 0 10px; color:var(--text); letter-spacing:-0.2px; font-weight:800; }
.hero .accent { background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.lead { color:var(--muted); font-size:1rem; margin-bottom:18px; max-width:72ch; }
.hero-actions { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.btn-primary { background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); padding:12px 18px; color:#021017; border-radius:12px; font-weight:800; text-decoration:none; box-shadow:0 20px 60px rgba(20,184,166,0.08); }
.btn-outline { padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); color:var(--text); text-decoration:none; }
.hero-decor .glow-circle { width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(20,184,166,0.08),transparent 20%),radial-gradient(circle at 70% 70%,rgba(0,212,255,0.04),transparent 26%); filter:blur(28px); margin-left:auto; }

/* SECTIONS */
.section { padding:56px 0; }
.section-head { display:flex; flex-direction:column; gap:6px; margin-bottom:22px; }
.section-head h2 { font-size:1.45rem; margin:0; color:var(--text); }
.section-head .muted { color:var(--muted); margin:0; }

/* FEATURES */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tile { background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)); border-radius:12px; padding:22px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 12px 40px rgba(2,6,23,0.6); transition:transform 200ms; }
.tile:hover { transform:translateY(-8px); }
.tile-icon { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); color:#021017; font-weight:800; margin-bottom:12px; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 460px; gap:28px; align-items:center; }
.about-text h2 { margin:0 0 8px; color:var(--text); }
.accent-line { width:64px; height:6px; border-radius:8px; background:linear-gradient(90deg,var(--accent-start),var(--gold)); margin:12px 0; }
.about-image img { width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 16px 50px rgba(2,6,23,0.7); border:1px solid rgba(255,255,255,0.03); }

/* FEATURED COURSES (Enhanced Glow) */
.courses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }

.course-card { position: relative; background: rgba(255, 255, 255, 0.05); border-radius: 16px; overflow: hidden; padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }

.course-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; padding: 1px; background: linear-gradient(135deg, #00bfa6, #00ffff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }

.course-card:hover::before { opacity: 1; }

.course-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(0, 255, 200, 0.25); }

.course-card h3 { margin-top:0.5rem; color:#fff; }
.course-card p { color:#94a3b8; }
.course-card a { color:var(--accent-start); font-weight:600; text-decoration:none; }
.course-card a:hover { color:var(--accent-end); }

/* TESTIMONIALS */
.testimonials { display: flex; gap: 18px; }
.quote { flex: 1 1 48%; padding:14px 18px; background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.02)); border-radius:10px; border:1px solid rgba(255,255,255,0.03); color:var(--muted); }
.attribution { display:block; margin-top:8px; color:var(--text); font-weight:700; }

/* FOOTER */
.site-footer { padding:28px 0; border-top:1px solid rgba(255,255,255,0.02); margin-top:40px; background:linear-gradient(180deg,rgba(2,6,23,0.3),rgba(2,4,6,0.85)); }
.footer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.footer-contacts {display: flex; gap: 14px;}
.footer-contacts a {color: var(--muted); text-decoration: none; transition: color 200ms ease;}
.footer-contacts a:hover {color: var(--accent-start);}

/* RESPONSIVE */
@media (max-width:1100px) {
.hero-inner { grid-template-columns:1fr; text-align:left; }
.hero-decor { display:none; }
.about-grid { grid-template-columns:1fr; }
.courses-grid { grid-template-columns:1fr; }
.features-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
.main-nav { display:none; }
.hamburger { display:block; }
.header-row { gap:8px; }
.logo-badge { width:48px; height:48px; }
.hero h1 { font-size:1.6rem; }
.hero { padding:56px 0 36px; }
}

@media (max-width: 600px) {
    .testimonials { 
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .footer-row {
        flex-direction: column; /* Stack all footer elements */
        text-align: center;
        gap: 12px;
    }
    .footer-contacts {
        flex-direction: column; /* Stack the contacts vertically */
    }
    .foot-links {
        display: flex;
        gap: 12px; /* Keep Privacy/Terms side-by-side */
    }
}