/*
Theme Name: Pipeline Academy
Theme URI: https://pipelineacademy.dev
Author: Apex Marketing Solutions
Description: Custom theme for Pipeline Academy — Break Into DevOps
Version: 1.0
Text Domain: pipelineacademy
*/

:root {
  --cyan: #00D4FF;
  --lime: #8FE01A;
  --ink: #0A0E17;
  --dark: #111827;
  --purple: #7C3AED;
  --cream: #F8FAFC;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--ink); color:var(--cream); overflow-x:hidden; }

/* NAV */
nav.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:20px 48px; background:rgba(10,14,23,0.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,212,255,0.1); }
.nav-logo { font-family:'JetBrains Mono',monospace; font-size:1.2rem; font-weight:800; color:var(--cyan); text-decoration:none; letter-spacing:1px; }
.nav-logo span { color:var(--lime); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { color:rgba(248,250,252,0.7); text-decoration:none; font-size:0.85rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover { color:var(--cyan); }
.nav-cta { background:var(--cyan) !important; color:var(--ink) !important; padding:10px 24px; border-radius:4px; font-weight:800 !important; }
.nav-cta:hover { background:var(--lime) !important; }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.menu-toggle span { display:block; width:28px; height:3px; background:var(--cyan); margin:5px 0; border-radius:2px; }

/* HERO */
#hero { min-height:100vh; background:var(--ink); display:flex; flex-direction:column; justify-content:center; padding:120px 80px 80px; position:relative; overflow:hidden; }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px); background-size:60px 60px; }
.hero-glow { position:absolute; top:20%; right:10%; width:500px; height:500px; background:radial-gradient(circle,rgba(0,212,255,0.15) 0%,transparent 70%); pointer-events:none; }
.hero-glow2 { position:absolute; bottom:10%; left:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(124,58,237,0.1) 0%,transparent 70%); pointer-events:none; }
.hero-badge { display:inline-block; background:rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.3); color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:0.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:8px 16px; border-radius:4px; margin-bottom:32px; }
.hero-title { font-family:'JetBrains Mono',monospace; font-size:clamp(3.5rem,7vw,6.5rem); font-weight:800; line-height:1.05; color:var(--cream); margin-bottom:12px; position:relative; z-index:2; }
.hero-title .accent { color:var(--cyan); }
.hero-title .accent2 { color:var(--lime); }
.hero-sub { font-size:1.2rem; color:rgba(248,250,252,0.5); max-width:550px; line-height:1.7; margin-bottom:48px; position:relative; z-index:2; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:2; }
.btn-primary { background:var(--cyan); color:var(--ink); padding:16px 36px; font-family:'JetBrains Mono',monospace; font-size:0.9rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; text-decoration:none; display:inline-block; transition:all 0.2s; }
.btn-primary:hover { background:var(--lime); transform:translateY(-2px); }
.btn-outline { color:var(--cyan); font-size:0.9rem; font-weight:700; text-decoration:none; letter-spacing:1px; border:2px solid rgba(0,212,255,0.3); padding:14px 28px; border-radius:4px; transition:all 0.2s; }
.btn-outline:hover { border-color:var(--cyan); background:rgba(0,212,255,0.05); }
.hero-stats { display:flex; gap:48px; margin-top:64px; position:relative; z-index:2; }
.hero-stat-num { font-family:'JetBrains Mono',monospace; font-size:2.5rem; font-weight:800; color:var(--cyan); display:block; }
.hero-stat-label { font-size:0.8rem; color:rgba(248,250,252,0.4); letter-spacing:2px; text-transform:uppercase; font-weight:600; }

/* TICKER */
.ticker { background:var(--dark); padding:14px 0; overflow:hidden; white-space:nowrap; border-top:1px solid rgba(0,212,255,0.1); border-bottom:1px solid rgba(0,212,255,0.1); }
.ticker-inner { display:inline-block; animation:ticker 25s linear infinite; }
.ticker-inner span { font-family:'JetBrains Mono',monospace; font-size:0.85rem; letter-spacing:3px; color:rgba(0,212,255,0.5); margin:0 28px; text-transform:uppercase; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTIONS */
section { padding:120px 80px; }
.section-label { font-family:'JetBrains Mono',monospace; font-size:0.75rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; }
.section-title { font-family:'JetBrains Mono',monospace; font-size:clamp(2.5rem,5vw,4.5rem); font-weight:800; line-height:1.05; color:var(--cream); margin-bottom:48px; }

/* CURRICULUM */
#curriculum { background:var(--dark); }
.curriculum-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.curr-card { background:var(--ink); border:1px solid rgba(0,212,255,0.1); border-radius:8px; padding:32px; transition:all 0.2s; position:relative; overflow:hidden; }
.curr-card:hover { border-color:var(--cyan); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,212,255,0.1); }
.curr-num { font-family:'JetBrains Mono',monospace; font-size:3rem; font-weight:800; color:rgba(0,212,255,0.1); position:absolute; top:16px; right:20px; }
.curr-icon { font-size:2.5rem; margin-bottom:16px; }
.curr-title { font-family:'JetBrains Mono',monospace; font-size:1.3rem; font-weight:800; color:var(--cream); margin-bottom:8px; }
.curr-desc { font-size:0.9rem; color:rgba(248,250,252,0.5); line-height:1.6; margin-bottom:16px; }
.curr-weeks { font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--cyan); letter-spacing:1px; }

/* OUTCOMES */
#outcomes { background:var(--ink); }
.outcomes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.outcome-card { text-align:center; padding:32px 20px; background:rgba(0,212,255,0.03); border:1px solid rgba(0,212,255,0.08); border-radius:8px; }
.outcome-num { font-family:'JetBrains Mono',monospace; font-size:3rem; font-weight:800; color:var(--lime); display:block; margin-bottom:8px; }
.outcome-label { font-size:0.85rem; color:rgba(248,250,252,0.5); line-height:1.5; }

/* PRICING */
#pricing { background:var(--dark); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.price-card { background:var(--ink); border:1px solid rgba(0,212,255,0.1); border-radius:8px; padding:40px 32px; text-align:center; transition:all 0.2s; }
.price-card.featured { border-color:var(--cyan); position:relative; }
.price-card.featured::before { content:'MOST POPULAR'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--cyan); color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:800; letter-spacing:2px; padding:4px 16px; border-radius:4px; }
.price-name { font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:700; color:rgba(248,250,252,0.6); margin-bottom:16px; text-transform:uppercase; letter-spacing:2px; }
.price-amount { font-family:'JetBrains Mono',monospace; font-size:3.5rem; font-weight:800; color:var(--cream); margin-bottom:4px; }
.price-amount span { font-size:1rem; color:rgba(248,250,252,0.4); }
.price-period { font-size:0.85rem; color:rgba(248,250,252,0.3); margin-bottom:24px; }
.price-features { list-style:none; text-align:left; margin-bottom:32px; }
.price-features li { padding:8px 0; font-size:0.9rem; color:rgba(248,250,252,0.6); border-bottom:1px solid rgba(255,255,255,0.05); }
.price-features li::before { content:'✓'; color:var(--lime); margin-right:8px; font-weight:800; }
.price-cta { display:block; width:100%; padding:14px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:0.85rem; letter-spacing:1px; text-transform:uppercase; text-decoration:none; text-align:center; transition:all 0.2s; border:none; cursor:pointer; }
.price-cta-primary { background:var(--cyan); color:var(--ink); }
.price-cta-primary:hover { background:var(--lime); }
.price-cta-outline { background:transparent; color:var(--cyan); border:2px solid rgba(0,212,255,0.3); }
.price-cta-outline:hover { border-color:var(--cyan); background:rgba(0,212,255,0.05); }

/* FAQ */
#faq { background:var(--ink); }
.faq-list { max-width:700px; }
.faq-item { border-bottom:1px solid rgba(0,212,255,0.1); padding:24px 0; }
.faq-q { font-family:'JetBrains Mono',monospace; font-size:1.05rem; font-weight:700; color:var(--cream); margin-bottom:8px; cursor:pointer; }
.faq-a { font-size:0.95rem; color:rgba(248,250,252,0.5); line-height:1.7; }

/* CTA SECTION */
#cta-section { background:linear-gradient(135deg,var(--ink) 0%,#0f172a 50%,var(--ink) 100%); text-align:center; position:relative; overflow:hidden; }
#cta-section .section-title { margin-bottom:16px; }
#cta-section p { font-size:1.1rem; color:rgba(248,250,252,0.5); max-width:500px; margin:0 auto 40px; line-height:1.7; }

/* FOOTER */
footer.site-footer { background:var(--dark); padding:32px 80px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(0,212,255,0.1); }
.footer-logo { font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:800; color:var(--cyan); }
.footer-logo span { color:var(--lime); }
footer p { font-size:0.8rem; color:rgba(248,250,252,0.25); }

/* FADE */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.6s,transform 0.6s; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:900px) {
  nav.site-nav { padding:16px 24px; }
  .nav-links { display:none; }
  .menu-toggle { display:block; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--ink); padding:24px; border-bottom:1px solid rgba(0,212,255,0.1); }
  #hero { padding:100px 24px 60px; }
  section { padding:80px 24px; }
  .curriculum-grid,.pricing-grid { grid-template-columns:1fr; }
  .outcomes-grid { grid-template-columns:1fr 1fr; }
  .hero-stats { flex-wrap:wrap; gap:24px; }
  footer.site-footer { flex-direction:column; gap:16px; text-align:center; padding:24px; }
}