/* =========================================
   Coding Experts — Global Stylesheet (Light Theme)
   assets/css/style.css
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fira+Code:wght@300;400;500&display=swap');

/* VARIABLES */
:root {
  --bg:      #f8fafc;
  --surface: #ffffff;
  --card:    #f1f5f9;
  --accent:  #0f7b55;
  --accent2: #0284c7;
  --accent3: #f97316;
  --accent-light: #d1fae5;
  --accent2-light: #e0f2fe;
  --text:    #0f172a;
  --muted:   #64748b;
  --border:  rgba(15, 123, 85, 0.15);
  --border-subtle: rgba(0,0,0,0.08);
  --shadow:  rgba(15,23,42,0.08);
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; font-weight:400; overflow-x:hidden; }

body::before {
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(15,123,85,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(15,123,85,.035) 1px,transparent 1px);
  background-size:48px 48px; pointer-events:none; z-index:0;
}

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.2rem 5vw; background:rgba(248,250,252,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border-subtle); box-shadow:0 1px 12px var(--shadow); }
.nav-logo { font-family:'Fira Code',monospace; font-size:1.1rem; font-weight:500; color:var(--accent); letter-spacing:.04em; text-decoration:none; }
.nav-logo span { color:var(--muted); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:500; transition:color .2s; font-family:'Fira Code',monospace; }
.nav-links a:hover,.nav-links a.active { color:var(--accent); }
.nav-cta { background:var(--accent)!important; color:#fff!important; padding:.5rem 1.4rem; border-radius:6px; font-weight:700!important; font-family:'Plus Jakarta Sans',sans-serif!important; font-size:.88rem!important; transition:opacity .2s,transform .2s!important; }
.nav-cta:hover { opacity:.88; transform:translateY(-1px); }

/* FOOTER */
footer { background:var(--surface); border-top:1px solid var(--border-subtle); padding:2.5rem 5vw; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-family:'Fira Code',monospace; font-size:.95rem; color:var(--accent); }
.footer-logo span { color:var(--muted); }
.footer-copy { color:var(--muted); font-size:.8rem; }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { color:var(--muted); font-size:.8rem; text-decoration:none; transition:color .2s; font-family:'Fira Code',monospace; }
.footer-links a:hover { color:var(--accent); }

/* SHARED */
section { position:relative; z-index:1; }
.section-label { font-family:'Fira Code',monospace; font-size:.72rem; color:var(--accent); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.8rem; background:var(--accent-light); display:inline-block; padding:.25rem .75rem; border-radius:4px; }
.section-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; line-height:1.2; margin-bottom:1rem; color:var(--text); }
.section-desc  { color:var(--muted); font-size:1rem; line-height:1.7; max-width:520px; }
.grad-text { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* BUTTONS */
.btn-primary  { background:var(--accent); color:#fff; padding:.9rem 2.2rem; border-radius:8px; font-size:1rem; font-weight:700; text-decoration:none; font-family:'Plus Jakarta Sans',sans-serif; transition:transform .2s,box-shadow .2s,opacity .2s; box-shadow:0 4px 20px rgba(15,123,85,.3); display:inline-block; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(15,123,85,.4); opacity:.92; }
.btn-secondary { background:transparent; color:var(--text); padding:.9rem 2.2rem; border-radius:8px; font-size:1rem; font-weight:500; text-decoration:none; font-family:'Plus Jakarta Sans',sans-serif; border:1.5px solid var(--border-subtle); transition:border-color .2s,color .2s,background .2s; display:inline-block; }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }

/* ANIMATIONS */
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }

/* TERMINAL */
.terminal { background:var(--surface); border:1.5px solid var(--border-subtle); border-radius:12px; overflow:hidden; max-width:680px; margin:0 auto; text-align:left; box-shadow:0 16px 60px var(--shadow), 0 2px 8px var(--shadow); }
.terminal-bar { background:var(--card); padding:.7rem 1rem; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--border-subtle); }
.dot { width:12px; height:12px; border-radius:50%; }
.dot.r{background:#ff5f56;} .dot.y{background:#ffbd2e;} .dot.g{background:#27c93f;}
.terminal-title { font-family:'Fira Code',monospace; font-size:.75rem; color:var(--muted); margin-left:.5rem; }
.terminal-body  { padding:1.5rem; font-family:'Fira Code',monospace; font-size:.85rem; line-height:2; background:#fafafa; }
.t-comment{color:#94a3b8;} .t-keyword{color:var(--accent2);} .t-string{color:var(--accent);} .t-fn{color:#ea580c;} .t-var{color:var(--text);}
.t-cursor { display:inline-block; width:2px; height:1em; background:var(--accent); vertical-align:middle; animation:blink 1s step-end infinite; }

/* ── INDEX: HERO ── */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; padding:8rem 5vw 4rem; overflow:hidden; }
.hero-glow  { position:absolute; width:700px; height:700px; background:radial-gradient(circle,rgba(15,123,85,.07) 0%,transparent 65%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.hero-glow2 { position:absolute; width:500px; height:500px; background:radial-gradient(circle,rgba(2,132,199,.05) 0%,transparent 65%); top:15%; right:5%; pointer-events:none; }
.hero-content { text-align:center; position:relative; z-index:1; max-width:900px; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:var(--accent-light); border:1px solid rgba(15,123,85,.25); color:var(--accent); padding:.45rem 1.1rem; border-radius:999px; font-size:.8rem; font-family:'Fira Code',monospace; margin-bottom:2rem; animation:fadeDown .8s ease both; font-weight:500; }
.hero-title { font-size:clamp(3rem,8vw,6rem); font-weight:800; line-height:1.05; margin-bottom:1.5rem; animation:fadeUp .9s .1s ease both; }
.hero-title .line1 { display:block; color:var(--text); }
.hero-title .line2 { display:block; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub  { font-size:clamp(1rem,2vw,1.2rem); color:var(--muted); font-weight:400; max-width:600px; margin:0 auto 2.5rem; line-height:1.8; animation:fadeUp .9s .2s ease both; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .9s .3s ease both; }
.terminal-wrap { margin-top:4rem; animation:fadeUp .9s .4s ease both; }

/* ── INDEX: STATS ── */
.stats { padding:4rem 5vw; position:relative; z-index:1; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--border-subtle); border:1.5px solid var(--border-subtle); border-radius:16px; overflow:hidden; max-width:900px; margin:0 auto; box-shadow:0 4px 24px var(--shadow); }
.stat-item { background:var(--surface); padding:2.5rem 2rem; text-align:center; transition:background .2s; }
.stat-item:hover { background:var(--accent-light); }
.stat-num  { font-family:'Space Mono',monospace; font-size:2.8rem; font-weight:700; color:var(--accent); display:block; }
.stat-label{ color:var(--muted); font-size:.88rem; margin-top:.3rem; font-weight:500; }

/* ── INDEX: WHY US ── */
.why { padding:6rem 5vw; background:var(--surface); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.why-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.why-features { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
.feature-item { display:flex; gap:1.2rem; align-items:flex-start; padding:1rem; border-radius:10px; transition:background .2s; }
.feature-item:hover { background:var(--card); }
.feature-icon { width:42px; height:42px; flex-shrink:0; background:var(--accent-light); border:1px solid rgba(15,123,85,.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.feature-text h4 { font-size:.95rem; font-weight:700; margin-bottom:.3rem; color:var(--text); }
.feature-text p  { color:var(--muted); font-size:.85rem; line-height:1.6; }
.code-block { background:var(--surface); border:1.5px solid var(--border-subtle); border-radius:10px; padding:1rem 1.2rem; font-family:'Fira Code',monospace; font-size:.78rem; line-height:1.9; position:relative; margin-bottom:1rem; box-shadow:0 2px 12px var(--shadow); }
.code-block .cb-lang { position:absolute; top:.5rem; right:.75rem; font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; background:var(--card); padding:.1rem .4rem; border-radius:3px; }

/* ── INDEX: TESTIMONIALS ── */
.testimonials { padding:6rem 5vw; background:var(--bg); }
.testimonials-header { text-align:center; margin-bottom:3.5rem; }
.testimonials-header .section-desc { margin:0 auto; }
.testi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; }
.testi-card { background:var(--surface); border:1.5px solid var(--border-subtle); border-radius:14px; padding:1.8rem; transition:border-color .25s,transform .25s,box-shadow .25s; }
.testi-card:hover { border-color:rgba(15,123,85,.3); transform:translateY(-3px); box-shadow:0 12px 40px var(--shadow); }
.testi-stars { color:#f59e0b; font-size:.9rem; margin-bottom:1rem; }
.testi-text  { color:var(--muted); font-size:.9rem; line-height:1.8; margin-bottom:1.5rem; }
.testi-author{ display:flex; align-items:center; gap:.8rem; }
.testi-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#fff; }
.testi-name  { font-size:.9rem; font-weight:700; color:var(--text); }
.testi-role  { font-size:.72rem; color:var(--muted); font-family:'Fira Code',monospace; }

/* ── INDEX: CONTACT ── */
.contact { padding:7rem 5vw; background:var(--surface); border-top:1px solid var(--border-subtle); }
.contact-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.contact-info h2 { font-size:clamp(2rem,4vw,3rem); font-weight:800; margin-bottom:1.2rem; }
.contact-info h2 span { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.contact-info p { color:var(--muted); font-size:1rem; line-height:1.8; margin-bottom:2rem; }
.contact-details { display:flex; flex-direction:column; gap:1.2rem; }
.contact-item { display:flex; align-items:center; gap:1rem; font-size:.95rem; }
.contact-item-icon { width:44px; height:44px; background:var(--accent-light); border:1px solid rgba(15,123,85,.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.contact-item a { color:var(--text); text-decoration:none; font-weight:600; transition:color .2s; }
.contact-item a:hover { color:var(--accent); }
.contact-item span { color:var(--muted); font-size:.8rem; display:block; margin-top:.1rem; }
.contact-form-box { background:var(--bg); border:1.5px solid var(--border-subtle); border-radius:18px; padding:2.5rem; box-shadow:0 8px 40px var(--shadow); }
.form-title { font-size:1.15rem; font-weight:800; margin-bottom:1.5rem; color:var(--text); }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.78rem; color:var(--muted); font-family:'Fira Code',monospace; margin-bottom:.5rem; font-weight:500; }
.form-group input,.form-group select,.form-group textarea { width:100%; background:var(--surface); border:1.5px solid var(--border-subtle); border-radius:8px; padding:.75rem 1rem; color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; font-size:.9rem; outline:none; transition:border-color .2s,box-shadow .2s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,123,85,.1); }
.form-group textarea { resize:vertical; min-height:90px; }
.form-group select option { background:var(--surface); }
.btn-submit { width:100%; background:var(--accent); color:#fff; border:none; padding:.95rem; border-radius:8px; font-size:1rem; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:opacity .2s,transform .2s,box-shadow .2s; margin-top:.5rem; box-shadow:0 4px 16px rgba(15,123,85,.3); }
.btn-submit:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 8px 24px rgba(15,123,85,.4); }

/* ── COURSES PAGE: HERO ── */
.page-hero-wrap { position:relative; padding:8rem 5vw 3rem; text-align:center; overflow:hidden; z-index:1; }
.page-hero-glow { position:absolute; width:600px; height:300px; background:radial-gradient(circle,rgba(15,123,85,.08) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.page-hero-title { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; margin-bottom:1rem; animation:fadeUp .8s .1s ease both; }
.page-hero-desc  { color:var(--muted); font-size:1rem; line-height:1.7; max-width:560px; margin:0 auto; animation:fadeUp .8s .2s ease both; }

/* ── COURSES PAGE: FILTER ── */
.filter-bar { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; padding:1.5rem 5vw 0; position:relative; z-index:1; }
.filter-btn { background:var(--surface); border:1.5px solid var(--border-subtle); color:var(--muted); padding:.45rem 1.1rem; border-radius:999px; font-family:'Fira Code',monospace; font-size:.75rem; cursor:pointer; transition:all .2s; font-weight:500; }
.filter-btn:hover,.filter-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }

/* ── COURSES PAGE: GRID ── */
.courses-section { padding:2.5rem 5vw 6rem; position:relative; z-index:1; }
.courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; max-width:1100px; margin:0 auto; }

.course-card { background:var(--surface); border:1.5px solid var(--border-subtle); border-radius:14px; padding:2rem; transition:transform .25s,border-color .25s,box-shadow .25s; cursor:pointer; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.course-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); opacity:0; transition:opacity .25s; }
.course-card:hover { transform:translateY(-5px); border-color:rgba(15,123,85,.25); box-shadow:0 16px 48px var(--shadow); }
.course-card:hover::before { opacity:1; }

.course-icon  { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.2rem; background:var(--card); }
.course-tag   { display:inline-block; background:var(--accent-light); color:var(--accent); font-size:.7rem; padding:.2rem .65rem; border-radius:4px; font-family:'Fira Code',monospace; margin-bottom:.8rem; font-weight:600; }
.course-name  { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--text); }
.course-desc  { color:var(--muted); font-size:.87rem; line-height:1.7; flex:1; margin-bottom:1.5rem; }
.course-meta  { display:flex; gap:1rem; align-items:center; font-family:'Fira Code',monospace; font-size:.72rem; color:var(--muted); margin-bottom:1.5rem; }
.course-level { color:var(--accent2); font-weight:600; }
.course-footer{ border-top:1px solid var(--border-subtle); padding-top:1rem; display:flex; align-items:center; justify-content:space-between; }
.course-price { font-size:1.1rem; font-weight:700; color:var(--accent); font-family:'Space Mono',monospace; }
.course-price small { font-size:.7rem; color:var(--muted); font-weight:400; margin-left:.3rem; }
.btn-enroll   { background:var(--accent); color:#fff; border:none; padding:.45rem 1.15rem; border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.85rem; font-weight:700; cursor:pointer; transition:opacity .2s,transform .2s; text-decoration:none; }
.btn-enroll:hover { opacity:.88; transform:translateY(-1px); }

/* ── COURSES PAGE: CTA BANNER ── */
.cta-banner { background:linear-gradient(135deg,var(--accent-light),var(--accent2-light)); border:1.5px solid rgba(15,123,85,.2); border-radius:18px; padding:3rem 2rem; text-align:center; max-width:700px; margin:4rem auto 0; }
.cta-banner h3 { font-size:1.6rem; font-weight:800; margin-bottom:.8rem; color:var(--text); }
.cta-banner p  { color:var(--muted); margin-bottom:1.5rem; }
.cta-banner-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* RESPONSIVE */
@media (max-width:768px) {
  .nav-links { display:none; }
  .why-inner,.contact-inner { grid-template-columns:1fr; gap:2.5rem; }
  .why-visual { display:none; }
  .courses-grid { grid-template-columns:1fr; }
}