/* /Theme tokens */ 
  :root{
    --max-width:1200px;
    --bg:#071022;
    --muted:#9fb0c4;
    --glass:rgba(255,255,255,0.03);
    --accent:#79f2c0;
    --accent-2:#9ce0ff;
    --gold:#ffdba1;
    --radius:16px;
    --section-gap:64px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:linear-gradient(180deg,#061021 0%, #07132a 100%);color:#ecf9fb;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;line-height:1.45;padding:30px;display:flex;justify-content:center;
  }
  .wrap{width:100%;max-width:var(--max-width)}
  a{color:inherit}
  .grid{display:grid;gap:18px}
  .row{display:flex;gap:18px;align-items:center}
  h1,h2,h3{margin:0}
  p{margin:0}

  .scroll-trigger {
  position: absolute;
  top: 100px; 
  width: 100%;
  height: 1px;
}
  /*  Header */
  header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  transition:
    padding 0.3s ease,
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

/* When scrolled */
body:has(.scroll-trigger:below) header {
  padding: 10px 28px;
  background: rgba(7, 16, 34, 0.75);
  border-bottom-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; 
}

@media (max-width: 600px) {
  html {
    scroll-padding-top: 170px;
  }
}

body {
  padding-top: 80px;
}

  .brand{display:flex;gap:12px;align-items:center}
  .logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--gold));display:grid;place-items:center;color:#071022;font-weight:900}
  nav{display:flex;gap:12px;align-items:center}
  nav a{padding:8px 10px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600}
  nav a:hover{color:var(--accent)}
  .cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:10px 14px;border-radius:12px;color:#071022;font-weight:800;text-decoration:none}

  /* Section base */
  section{margin:var(--section-gap) 0;padding:28px;border-radius:20px;position:relative}
  .section-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}
  .section-title h2{font-size:20px;letter-spacing:0.4px}
  .muted{color:var(--muted)}

  /* Hero  */
  .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;overflow:visible;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:0 20px 60px rgba(2,6,23,0.6)}
  .hero-left{padding:6px 2px}
  .kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--accent);font-weight:800;font-size:13px}
  .hero-heading{font-size:40px;line-height:1;margin-top:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;color:transparent}
  .lead{color:var(--muted);margin-top:10px;max-width:58ch}
  .hero-ctas{display:flex;gap:12px;margin-top:16px}

  .hero::after{content:"";position:absolute;right:-60px;top:-40px;width:320px;height:320px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:0.06;transform:rotate(18deg);filter:blur(26px);pointer-events:none}
  .device-mock {
  width: 420px;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  box-shadow: 0 10px 40px rgba(2,6,23,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-mock img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 14px;
  display: block;
}

  .hero-heading {
  font-size: 40px;
  line-height: 1;
  margin-top: 8px;
  background: linear-gradient(270deg, var(--accent), var(--accent-2), var(--gold), var(--accent));
  background-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.kicker, .hero-ctas .cta {
  position: relative;
  animation: floatAround 6s ease-in-out infinite;
}

.cta {
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  margin: 0;
}


@keyframes floatAround {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateY(-5px) translateX(5px);
  }
  66% {
    transform: translateY(5px) translateX(-5px);
  }
}

.device-mock img {
  animation: bounceScale 6s ease-in-out infinite;
}

@keyframes bounceScale {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.03) translateY(-10px);
  }
}

.cta {
  position: relative;
  z-index: 0;
}

.cta::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 12px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  filter: blur(8px);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.cta:hover::before {
  opacity: 1;
}

@media(max-width:600px) {
  .hero-ctas {
    flex-direction: column;
    gap: 10px;
  }
  .hero-ctas a {
    width: 100%;
    text-align: center;
  }
}


  /*  Features  */
  .features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .feature{padding:18px;border-radius:14px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(6px)}
  .feature h3{color:var(--gold);margin-bottom:8px}
  .feature p{color:var(--muted);font-size:14px}
  .feature:nth-child(1)::before{content:"";position:absolute;left:-40px;top:-40px;width:200px;height:200px;background:radial-gradient(circle, rgba(156,224,255,0.08), transparent);transform:rotate(0)}
  .feature:nth-child(2)::before{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;background:radial-gradient(circle, rgba(121,242,192,0.08), transparent)}
  .feature:nth-child(3)::before{content:"";position:absolute;left:0;bottom:-20px;width:120px;height:120px;background:linear-gradient(90deg, rgba(255,219,161,0.06), transparent)}
  .feature:nth-child(4)::before{content:"";position:absolute;right: -30px;top: -20px;width:140px;height:140px;background:linear-gradient(90deg, rgba(156,224,255,0.04), transparent)}

  /* Courses  */
  .courses{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .course{padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);position:relative}
  .course .price{font-weight:900;font-size:20px;margin-top:10px}
  .course .tag{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:800;margin-top:10px}
  .course.basic{border-image:linear-gradient(90deg,var(--accent-2),var(--accent)) 1;}
  .course.premium{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));box-shadow:0 20px 40px rgba(2,6,23,0.5)}
  .course .cta-inline{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071022;font-weight:800;text-decoration:none}

  /*  Instructors  */
  .instructors{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
  .instr{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
  .instr img{width:84px;height:84px;border-radius:14px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,0.5)}
  .instr h3{font-size:18px}
  .instr p{color:var(--muted);font-size:14px}

 .stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.stats-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  box-shadow: 0 20px 40px rgba(2,6,23,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.stats-card:hover {
  box-shadow: 0 30px 60px rgba(2,6,23,0.6);
  transform: translateY(-8px);
}


.stats-icon img {
  width: 84px;
  height: 84px;
  margin-bottom: 16px;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.stats-number {
  font-weight: 900;
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 10px;
}

.stats-label {
  font-weight: 600;
  font-size: 18px;
  color: var(--muted);
}

/* Responsive for smaller devices */
@media (max-width: 1024px) {
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .stats-card {
    padding: 16px;
  }
  .stats-icon img {
    width: 64px;
    height: 64px;
  }
  .stats-number {
    font-size: 26px;
  }
  .stats-label {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
}

  /*  FAQ  */
  .faq{display:grid;gap:12px}
  .faq-item{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-radius:12px;border:1px solid rgba(255,255,255,0.03);overflow:hidden}
  .faq-item input{display:none}
  .faq-item label{display:flex;justify-content:space-between;align-items:center;padding:14px;font-weight:700;cursor:pointer}
  .faq-item .answer{max-height:0;overflow:hidden;padding:0 14px;color:var(--muted);transition:max-height .32s ease,padding .32s}
  .faq-item input:checked + label + .answer{max-height:360px;padding:12px 14px}

  /*  CTA  */
  .cta-band{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px;border-radius:12px;background:linear-gradient(90deg,rgba(121,242,192,0.06),rgba(156,224,255,0.04));border:1px solid rgba(255,255,255,0.02)}
  .cta-band h3{font-size:18px}

  /* footer */
footer {
  margin-top:36px;
  padding:32px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  font-size:14px;
}

footer .footer-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-bottom:20px;
}

footer .footer-col h4 {
  margin-bottom:10px;
  color:var(--gold);
  text-transform:uppercase;
  font-size:14px;
}

footer .footer-col ul {
  list-style:none;
  padding:0;
  margin:0;
}

footer .footer-col ul li {
  margin:6px 0;
}

footer .footer-col ul li a {
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}

footer .footer-col ul li a:hover {
  color:var(--accent);
}

footer .newsletter {
  display:flex;
  gap:8px;
  margin-top:10px;
}

footer .newsletter input {
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
  background:transparent;
  color:var(--muted);
  outline:none;
}

footer .newsletter input:focus {
  border-color:var(--accent);
}

footer .newsletter button {
  padding:10px 14px;
  border-radius:10px;
  border:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#071022;
  font-weight:700;
  cursor:pointer;
  transition:opacity .2s;
}

footer .newsletter button:hover {
  opacity:.85;
}

footer .footer-bottom {
  border-top:1px solid rgba(255,255,255,0.03);
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  flex-wrap:wrap;
  gap:12px;
}

footer .socials a {
  display:inline-block;
  width:24px;
  height:24px;
  opacity:.8;
  transition:opacity .2s;
}

footer .socials a:hover {
  opacity:1;
}

/* Responsive Footer */
@media(max-width:768px){
  footer .footer-grid {
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  footer .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
  }
}

.footer-bottom .socials a img {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  transition: filter 0.25s ease, transform 0.25s ease;
  filter: grayscale(70%);
}

.footer-bottom .socials a:hover img {
  filter: grayscale(0%) brightness(1.2);
  transform: translateY(-2px);
}

.footer-bottom .socials {
  display: flex;
  gap: 10px; 
  align-items: center;
}

  .card-hover{transition:transform .28s ease,box-shadow .28s ease}
  .card-hover:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(2,6,23,0.6)}

  /* Responsive */
  @media(max-width:1024px){
    .hero{grid-template-columns:1fr;}
    .features{grid-template-columns:repeat(2,1fr)}
    .courses{grid-template-columns:repeat(1,1fr)}
    .instructors{grid-template-columns:repeat(1,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
  }
@media(max-width:600px){
  body {
    padding-top: 130px !important; 
    padding-right: 18px;
    padding-bottom: 18px;
    padding-left: 18px;
  }
  header { flex-direction: column; gap: 10px; }
  section { padding: 20px; }
}