/* CiberLearn V5 Profesional */
:root{
  --bg:#0F172A;
  --bg-2:#111827;
  --text:#F1F5F9;
  --muted:#94A3B8;
  --primary:#06B6D4;
  --accent:#EC4899;
  --success:#10B981;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
img{max-width:100%;display:block}

.container{width:min(1120px,92%);margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient( to right, rgba(15,23,42,.9), rgba(17,24,39,.85));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-wrap{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--text);font-family:'Exo 2',sans-serif;letter-spacing:.2px}
.brand img{width:28px;height:28px;filter:drop-shadow(0 0 8px rgba(6,182,212,.6))}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--text)}
.dropdown{position:relative}
.dropdown button{background:transparent;border:0;color:var(--muted);font-weight:600;cursor:pointer}
.dropdown-content{position:absolute;display:none;flex-direction:column;gap:8px;background:var(--bg-2);padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;top:38px;min-width:220px}
.dropdown:hover .dropdown-content{display:flex}
.cta{padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));text-decoration:none;color:white;font-weight:700}
.nav-toggle{display:none;background:transparent;border:0;color:white;font-size:22px}

.hero{padding:80px 0;background:radial-gradient(1000px 480px at 80% -10%, rgba(6,182,212,.25), transparent 60%), radial-gradient(700px 380px at 20% 0%, rgba(236,72,153,.15), transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size: clamp(28px, 5vw, 56px);line-height:1.05;font-weight:800;font-family:'Exo 2',sans-serif}
.hero h1 span{background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:600px}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:white;border:0}
.btn.ghost{color:var(--text);background:transparent}

.section{padding:80px 0}
.chip{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(6,182,212,.12);color:var(--primary);font-weight:700;margin-bottom:16px}
h2{font-family:'Exo 2',sans-serif;font-size: clamp(26px, 4vw, 40px);margin:10px 0 26px}

.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:600}
.checks img{width:20px;filter:drop-shadow(0 0 8px rgba(16,185,129,.6))}

.services .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:24px;display:grid;gap:10px}
.card .icon{width:48px;filter:drop-shadow(0 0 6px rgba(6,182,212,.7))}
.card p{color:var(--muted)}
.card .read-more{color:var(--primary);text-decoration:none;font-weight:700}

.projects .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.projects img{border-radius:14px;border:1px solid rgba(255,255,255,.06)}

.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.stats{display:flex;gap:20px;margin:12px 0 24px}
.stat{background:linear-gradient(180deg, rgba(6,182,212,.08), rgba(236,72,153,.06));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 18px;text-align:center}
.stat strong{font-size:32px;display:block}
.actions{display:flex;gap:12px}

.pricing .price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));display:grid;gap:14px}
.price-card h3{font-family:'Exo 2',sans-serif}
.price-card ul{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:8px}
.price{font-size:40px;font-weight:800;font-family:'Exo 2',sans-serif}
.price span{font-size:16px;color:var(--muted)}
.price-card.featured{outline:2px solid transparent;background:linear-gradient(180deg, rgba(6,182,212,.08), rgba(236,72,153,.06));box-shadow:0 0 0 2px transparent}

.testimonials .t-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.t-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));display:grid;gap:12px}
.t-card img{width:36px;filter:drop-shadow(0 0 6px rgba(6,182,212,.7))}
.t-card p{color:var(--muted)}

.newsletter{text-align:center}
.newsletter h2{max-width:900px;margin:0 auto 18px}
.newsletter-form{display:flex;gap:6px;justify-content:center}
.newsletter-form input{width:min(680px,80%);padding:14px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text)}
.newsletter-form button{border:0;width:48px;height:48px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));color:white;font-size:18px;cursor:pointer}

.site-footer{border-top:1px solid rgba(255,255,255,.08);padding-top:30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.site-footer .brand{font-weight:800;font-family:'Exo 2',sans-serif;margin-bottom:8px}
.social a img{width:22px}
.copy{text-align:center;color:var(--muted);padding:24px 0}

.to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:999px;background:rgba(6,182,212,.1);backdrop-filter:blur(6px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);cursor:pointer}
.to-top img{width:22px}

/* Responsive */
@media (max-width: 1024px){
  .projects .grid{grid-template-columns:repeat(2,1fr)}
  .services .cards{grid-template-columns:repeat(2,1fr)}
  .why-grid,.about-grid,.hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;right:12px;top:60px;background:var(--bg-2);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);flex-direction:column}
  .nav-toggle{display:block}
}

@media (max-width: 640px){
  .services .cards{grid-template-columns:1fr}
  .projects .grid{grid-template-columns:1fr}
  .pricing .price-cards{grid-template-columns:1fr}
  .testimonials .t-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}