/* ══════════════════════════════════════════════
   IT-Master — Bold Cybersecurity SaaS Dark Theme
   Vibrant gradients, neon accents, premium feel
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* Dark surfaces */
  --bg-deep:#06070e;
  --bg-surface:#0c0d18;
  --bg-card:#111224;
  --bg-card-2:#161832;
  --bg-elevated:#1a1c3a;

  /* Vibrant brand colors */
  --red:#ef4444;
  --red-bright:#f87171;
  --red-glow:rgba(239,68,68,0.15);
  --red-deep:#dc2626;
  --cyan:#06b6d4;
  --cyan-bright:#22d3ee;
  --cyan-glow:rgba(6,182,212,0.15);
  --purple:#8b5cf6;
  --purple-bright:#a78bfa;
  --purple-glow:rgba(139,92,246,0.12);
  --green:#10b981;
  --green-bright:#34d399;
  --amber:#f59e0b;
  --amber-bright:#fbbf24;
  --blue:#3b82f6;
  --pink:#ec4899;

  /* Gradients */
  --grad-hero:linear-gradient(135deg,#0f0c29,#1a0a2e,#1e1145);
  --grad-red:linear-gradient(135deg,#ef4444,#f97316);
  --grad-cyan:linear-gradient(135deg,#06b6d4,#3b82f6);
  --grad-purple:linear-gradient(135deg,#8b5cf6,#ec4899);
  --grad-green:linear-gradient(135deg,#10b981,#06b6d4);
  --grad-amber:linear-gradient(135deg,#f59e0b,#ef4444);
  --grad-top:linear-gradient(90deg,#ef4444,#f59e0b,#06b6d4,#8b5cf6);

  /* Text */
  --text:#f1f1f6;
  --text-dim:#9394b0;
  --text-muted:#5c5e80;

  /* Border */
  --border:rgba(255,255,255,0.06);
  --border-hover:rgba(255,255,255,0.12);

  /* Effects */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow:0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.5);
  --radius:14px;
  --radius-lg:20px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg-deep);color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.65;
}
::selection{background:var(--purple);color:#fff;}
a{text-decoration:none;color:inherit;}

/* ═══ NAV ═══ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(6,7,14,0.8);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;height:64px;
}
.nav-brand{
  font-size:20px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:6px;letter-spacing:-0.3px;
}
.nav-brand .red{
  background:var(--grad-red);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.nav-links{display:flex;gap:4px;}
.nav-links a{
  padding:9px 16px;font-size:13px;font-weight:600;
  color:var(--text-dim);border-radius:8px;transition:all 0.25s;
}
.nav-links a:hover{color:var(--cyan-bright);background:rgba(6,182,212,0.08);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;font-size:16px;
  cursor:pointer;color:var(--text);
}

/* ═══ HERO ═══ */
.hero{
  background:var(--grad-hero);
  padding:88px 28px 76px;
  position:relative;overflow:hidden;text-align:center;
}
/* Animated mesh background */
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 50%, rgba(239,68,68,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 85% 40%, rgba(6,182,212,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(139,92,246,0.08) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(255,255,255,0.025)' stroke-width='0.5'/%3E%3C/svg%3E");
  pointer-events:none;
}
/* Top gradient bar */
.hero::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-top);
}
.hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto;}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 22px;border-radius:50px;
  background:linear-gradient(135deg,rgba(239,68,68,0.12),rgba(139,92,246,0.08));
  border:1px solid rgba(239,68,68,0.2);
  color:var(--red-bright);font-size:13px;font-weight:700;
  letter-spacing:0.3px;margin-bottom:28px;
}
.hero h1{
  font-size:clamp(30px,5.5vw,52px);font-weight:800;color:#fff;
  line-height:1.15;margin-bottom:22px;letter-spacing:-1px;
}
.hero h1 .accent{
  background:var(--grad-red);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:17px;color:var(--text-dim);line-height:1.8;
  max-width:680px;margin:0 auto 28px;
}
.hero-lang{
  display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:32px;
}
.hero-lang-item{
  font-size:12.5px;color:var(--text-muted);font-weight:500;
  padding:4px 14px;border-radius:20px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);
}
.hero-partners{
  display:flex;gap:16px;justify-content:center;margin-bottom:36px;flex-wrap:wrap;
}
.partner-logo{
  padding:16px 36px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;font-size:17px;font-weight:800;
  color:rgba(255,255,255,0.75);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:all 0.3s;
}
.partner-logo:hover{
  background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.partner-logo span{
  font-size:9px;font-weight:600;
  background:var(--grad-amber);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:1.5px;text-transform:uppercase;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-hero-primary{
  padding:14px 36px;background:var(--grad-red);color:#fff;
  font-size:15px;font-weight:700;border-radius:10px;
  transition:all 0.3s;
  box-shadow:0 4px 20px rgba(239,68,68,0.3);
}
.btn-hero-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 36px rgba(239,68,68,0.4);
}
.btn-hero-ghost{
  padding:14px 36px;color:var(--text-dim);
  font-size:15px;font-weight:600;
  border:1px solid rgba(255,255,255,0.1);border-radius:10px;
  transition:all 0.3s;background:rgba(255,255,255,0.02);
}
.btn-hero-ghost:hover{
  color:#fff;border-color:var(--cyan);
  background:rgba(6,182,212,0.06);
  box-shadow:0 4px 20px rgba(6,182,212,0.15);
}

/* ═══ ECOSYSTEM ═══ */
.ecosystem{padding:80px 28px;background:var(--bg-surface);}
.ecosystem-inner{max-width:1140px;margin:0 auto;}
.section-header{text-align:center;margin-bottom:52px;}
.section-header h2{
  font-size:32px;font-weight:800;margin-bottom:12px;letter-spacing:-0.5px;
}
.section-header p{font-size:16px;color:var(--text-dim);max-width:500px;margin:0 auto;line-height:1.7;}

.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.eco-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px 24px;
  transition:all 0.35s;color:inherit;position:relative;overflow:hidden;
}
/* Each card gets unique accent color on hover */
.eco-card:nth-child(1):hover{border-color:rgba(239,68,68,0.3);box-shadow:0 12px 40px rgba(239,68,68,0.08);}
.eco-card:nth-child(2):hover{border-color:rgba(6,182,212,0.3);box-shadow:0 12px 40px rgba(6,182,212,0.08);}
.eco-card:nth-child(3):hover{border-color:rgba(139,92,246,0.3);box-shadow:0 12px 40px rgba(139,92,246,0.08);}
.eco-card:nth-child(4):hover{border-color:rgba(16,185,129,0.3);box-shadow:0 12px 40px rgba(16,185,129,0.08);}
.eco-card:hover{transform:translateY(-8px);}
.eco-icon{
  font-size:36px;margin-bottom:16px;
  width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
}
.eco-card h3{font-size:17px;font-weight:700;margin-bottom:10px;}
.eco-card p{font-size:14px;color:var(--text-dim);line-height:1.7;flex:1;margin-bottom:16px;}
.eco-link{font-size:13px;font-weight:700;letter-spacing:0.2px;transition:color 0.2s;}
.eco-card:nth-child(1) .eco-link{color:var(--red-bright);}
.eco-card:nth-child(2) .eco-link{color:var(--cyan-bright);}
.eco-card:nth-child(3) .eco-link{color:var(--purple-bright);}
.eco-card:nth-child(4) .eco-link{color:var(--green-bright);}

/* ═══ PREMIUM ═══ */
.premium-section{padding:60px 28px;background:var(--bg-deep);}
.premium-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.premium-card{
  position:relative;display:flex;flex-direction:column;
  padding:40px 34px;border-radius:var(--radius-lg);
  color:#fff;transition:all 0.35s;overflow:hidden;
}
.premium-card::before{
  content:'';position:absolute;inset:0;opacity:0.4;
  transition:opacity 0.35s;pointer-events:none;
}
.premium-card:hover{transform:translateY(-6px);}
.premium-card:hover::before{opacity:0.6;}
.premium-card--exam{
  background:linear-gradient(145deg,#18103a,#2d1858);
  border:1px solid rgba(139,92,246,0.2);
}
.premium-card--exam::before{background:radial-gradient(circle at 80% 20%,rgba(139,92,246,0.15),transparent 60%);}
.premium-card--exam:hover{box-shadow:0 16px 48px rgba(139,92,246,0.15);}
.premium-card--elearn{
  background:linear-gradient(145deg,#0a2420,#0f3a38);
  border:1px solid rgba(6,182,212,0.2);
}
.premium-card--elearn::before{background:radial-gradient(circle at 80% 20%,rgba(6,182,212,0.12),transparent 60%);}
.premium-card--elearn:hover{box-shadow:0 16px 48px rgba(6,182,212,0.12);}
.premium-badge{
  position:absolute;top:16px;right:18px;
  font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 14px;border-radius:6px;
  background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.06);
}
.premium-icon{font-size:40px;margin-bottom:18px;}
.premium-card h3{font-size:22px;font-weight:800;margin-bottom:12px;letter-spacing:-0.3px;}
.premium-card p{font-size:15px;color:rgba(255,255,255,0.5);line-height:1.75;margin-bottom:22px;flex:1;}
.premium-link{font-size:14px;font-weight:700;transition:color 0.2s;}
.premium-card--exam .premium-link{color:var(--purple-bright);}
.premium-card--elearn .premium-link{color:var(--cyan-bright);}
.premium-card:hover .premium-link{color:#fff;}

/* ═══ SECTION DIVIDER ═══ */
.section-divider{
  padding:56px 28px;text-align:center;
  background:var(--bg-surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.section-divider h2{font-size:28px;font-weight:800;margin-bottom:8px;letter-spacing:-0.3px;}
.section-divider-sub{font-size:15px;color:var(--text-dim);margin-bottom:18px;}
.line{width:56px;height:3px;margin:0 auto;border-radius:3px;}
.line-red{background:var(--grad-red);}
.line-teal{background:var(--grad-cyan);}

/* ═══ MAIN LAYOUT ═══ */
.main-layout{
  max-width:1280px;margin:0 auto;padding:56px 28px;
  display:grid;grid-template-columns:1fr 260px;gap:40px;
}

/* ═══ CERT CARDS ═══ */
.cert-grid{display:flex;flex-direction:column;gap:20px;}
.cert-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:36px 32px;
  transition:all 0.35s;position:relative;overflow:hidden;
}
.cert-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-red);opacity:0;transition:opacity 0.3s;
}
.cert-card:hover{
  border-color:var(--border-hover);transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,0.3);
}
.cert-card:hover::before{opacity:1;}
.cert-card.ec::before{background:var(--grad-cyan);}
.cert-card.ec:hover{border-color:rgba(6,182,212,0.2);}

.cert-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:16px;flex-wrap:wrap;
}
.cert-title{
  font-size:24px;font-weight:800;color:var(--text);
  transition:color 0.2s;letter-spacing:-0.5px;
}
.cert-title:hover{color:var(--red-bright);}
.cert-level{
  font-size:10px;font-weight:700;padding:5px 12px;border-radius:6px;
  letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;
}
.level-entry{background:rgba(16,185,129,0.1);color:var(--green-bright);border:1px solid rgba(16,185,129,0.15);}
.level-core{background:var(--red-glow);color:var(--red-bright);border:1px solid rgba(239,68,68,0.15);}
.level-inter{background:rgba(59,130,246,0.1);color:var(--blue);border:1px solid rgba(59,130,246,0.12);}
.level-adv{background:rgba(245,158,11,0.1);color:var(--amber-bright);border:1px solid rgba(245,158,11,0.15);}
.level-expert{background:var(--purple-glow);color:var(--purple-bright);border:1px solid rgba(139,92,246,0.15);}

.cert-desc{font-size:15px;color:var(--text-dim);line-height:1.8;margin-bottom:22px;}

.cert-sections{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px;}
.cert-section-title{
  font-size:11px;font-weight:700;color:var(--text-muted);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;
}
.cert-list{list-style:none;}
.cert-list li{
  font-size:14px;color:var(--text-dim);
  padding:5px 0 5px 20px;position:relative;line-height:1.6;
}
.cert-list li::before{
  content:'';position:absolute;left:0;top:12px;
  width:6px;height:6px;border-radius:50%;
  background:var(--red);opacity:0.6;
}
.cert-card.ec .cert-list li::before{background:var(--cyan);}

.cert-buttons{display:flex;flex-wrap:wrap;gap:10px;}
.btn-certmaster{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;color:#fff;
  font-size:13px;font-weight:700;border-radius:9px;
  transition:all 0.3s;letter-spacing:0.2px;
  background:var(--grad-red);
  box-shadow:0 4px 16px rgba(239,68,68,0.2);
}
.btn-certmaster:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(239,68,68,0.3);
}
.btn-certmaster::before{content:'📘';}
.btn-ec{
  background:var(--grad-cyan);
  box-shadow:0 4px 16px rgba(6,182,212,0.2);
}
.btn-ec:hover{box-shadow:0 8px 28px rgba(6,182,212,0.3);}
.btn-ec::before{content:'🔰';}

/* ═══ SIDEBAR ═══ */
.sidebar{display:flex;flex-direction:column;gap:10px;position:sticky;top:80px;align-self:start;}
.sidebar-title{
  font-size:11px;font-weight:700;color:var(--text-muted);
  letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:6px;
}
.sidebar-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;transition:all 0.3s;
}
.sidebar-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.sidebar-card a{display:block;padding:20px 16px;}
.sidebar-card-icon{font-size:24px;margin-bottom:8px;}
.sidebar-card-name{font-size:14px;font-weight:700;margin-bottom:4px;}
.sidebar-card-desc{font-size:12px;color:var(--text-muted);line-height:1.5;}
/* Unique hover color per card */
.sidebar-card:nth-child(2):hover{border-color:rgba(239,68,68,0.25);}
.sidebar-card:nth-child(3):hover{border-color:rgba(6,182,212,0.25);}
.sidebar-card:nth-child(4):hover{border-color:rgba(139,92,246,0.25);}
.sidebar-card:nth-child(5):hover{border-color:rgba(16,185,129,0.25);}
.sidebar-card:nth-child(6):hover{border-color:rgba(245,158,11,0.25);}

/* ═══ FINAL CTA ═══ */
.final-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0a0820,#1a0a2e,#0a1525);
  padding:96px 28px;text-align:center;
}
.final-cta-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:600px;border-radius:50%;
  background:
    radial-gradient(ellipse at 30% 40%,rgba(239,68,68,0.1),transparent 50%),
    radial-gradient(ellipse at 70% 60%,rgba(6,182,212,0.08),transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(139,92,246,0.06),transparent 60%);
  pointer-events:none;animation:ctaPulse 8s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  50%{transform:translate(-50%,-50%) scale(1.1);opacity:0.7;}
}
.final-cta-inner{position:relative;z-index:1;max-width:660px;margin:0 auto;}
.final-cta-badge{
  display:inline-block;font-size:12px;color:var(--text-muted);
  letter-spacing:0.5px;margin-bottom:24px;font-weight:500;
}
.final-cta h2{
  font-size:clamp(26px,4.5vw,42px);font-weight:800;color:#fff;
  line-height:1.2;margin-bottom:20px;letter-spacing:-0.5px;
}
.final-cta p{
  font-size:16px;color:var(--text-dim);
  line-height:1.8;max-width:540px;margin:0 auto 36px;
}
.final-cta-actions{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px;
}
.btn-cta-primary{
  padding:16px 40px;background:var(--grad-red);color:#fff;
  font-size:15px;font-weight:800;border-radius:11px;
  transition:all 0.3s;box-shadow:0 6px 24px rgba(239,68,68,0.3);
}
.btn-cta-primary:hover{
  transform:translateY(-3px);box-shadow:0 10px 40px rgba(239,68,68,0.4);
}
.btn-cta-secondary{
  padding:16px 30px;background:rgba(255,255,255,0.04);
  color:var(--text-dim);font-size:14px;font-weight:600;
  border:1px solid rgba(255,255,255,0.08);border-radius:11px;
  transition:all 0.3s;
}
.btn-cta-secondary:hover{
  color:#fff;border-color:var(--cyan);
  background:rgba(6,182,212,0.06);
  box-shadow:0 4px 20px rgba(6,182,212,0.12);
}
.final-cta-trust{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:12px;color:var(--text-muted);letter-spacing:0.3px;
}

/* ═══ FOOTER ═══ */
.footer{
  background:var(--bg-deep);text-align:center;
  padding:48px 28px 40px;border-top:1px solid var(--border);
}
.footer-inner{max-width:620px;margin:0 auto;}
.footer-brand{
  font-size:22px;font-weight:800;color:#fff;margin-bottom:20px;letter-spacing:-0.3px;
}
.footer-brand .red{
  background:var(--grad-red);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.footer-links{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;
}
.footer-links a{font-size:13px;color:var(--text-dim);transition:all 0.2s;}
.footer-links a:hover{color:var(--cyan-bright);}
.footer-regions{margin-bottom:18px;}
.footer-regions a{font-size:12.5px;color:var(--text-muted);transition:all 0.2s;}
.footer-regions a:hover{color:#fff;}
.footer-sep{color:rgba(255,255,255,0.1);margin:0 10px;}
.footer-contact{font-size:13px;color:var(--text-muted);margin-bottom:16px;}
.footer-copy{font-size:11px;color:rgba(255,255,255,0.2);}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1080px){.eco-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:960px){
  .main-layout{grid-template-columns:1fr;}
  .sidebar{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
  .sidebar-title{grid-column:1/-1;}
  .premium-inner{grid-template-columns:1fr;}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:rgba(6,7,14,0.96);backdrop-filter:blur(16px);
    flex-direction:column;padding:16px 20px;gap:2px;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}
@media(max-width:640px){
  .hero{padding:64px 20px 56px;}.hero h1{font-size:28px;}
  .cert-sections{grid-template-columns:1fr;}.cert-card{padding:28px 22px;}
  .eco-grid{grid-template-columns:1fr;}
  .hero-partners{flex-direction:column;align-items:center;gap:10px;}
  .hero-actions,.final-cta-actions{flex-direction:column;align-items:center;}
  .final-cta{padding:64px 20px;}
}