:root{
  --bg: #0f1724;
  --card: #0b1220;
  --accent: #6EE7B7;
  --muted: #94a3b8;
  --glass: rgba(255,255,255,0.04);
  --max-width: 1100px;
  --gap: 1.25rem;
  --radius: 18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#031023 0%, #071226 60%);
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.wrap{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:20px;
  padding:40px 28px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  display:grid;
  gap:var(--gap);
  grid-template-columns: 1fr 520px;
  align-items:center;
  margin-top:60px;
  margin-bottom:60px;
}

@media (max-width:900px){
  .wrap{grid-template-columns: 1fr; padding:24px; margin-top:30px; margin-bottom:30px}
}

.hero{
  padding: 20px;
}

.badge{
  display:inline-block;
  background:linear-gradient(90deg,#1f2937,#111827);
  color:var(--accent);
  padding:8px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  margin-bottom:24px;
  letter-spacing:0.6px;
  animation: fadeInUp 0.6s ease;
}

h1{
  font-size: clamp(42px, 6.5vw, 64px);
  line-height:1.1;
  margin-bottom:16px;
  letter-spacing:-1px;
  font-weight:800;
  animation: fadeInUp 0.6s ease 0.1s backwards;
}

.typing{
  display:inline-block;
  color: var(--accent);
  white-space:nowrap;
  border-right: 3px solid var(--accent);
  padding-right:6px;
  margin-left:6px;
  font-weight:700;
  animation: typing 3s steps(20) infinite, blink 0.8s step-end infinite;
}

@keyframes typing {
  0%, 100% { width: 0 }
  50% { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

p.lead{
  color:var(--muted);
  margin-top:16px;
  font-size:20px;
  line-height:1.6;
  animation: fadeInUp 0.6s ease 0.2s backwards;
}

.cta-row{
  margin-top:32px;
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  animation: fadeInUp 0.6s ease 0.3s backwards;
}

.btn{
  background:linear-gradient(90deg,var(--accent),#34D399);
  color:#01201a;
  padding:16px 28px;
  border-radius:14px;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 6px 24px rgba(110,231,183,0.3);
  transition: all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(110,231,183,0.5);
}

.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  box-shadow: 0 4px 18px rgba(110,231,183,0.1);
}

.btn.ghost:hover{
  background:rgba(110,231,183,0.1);
  box-shadow: 0 8px 24px rgba(110,231,183,0.3);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  overflow:hidden;
  min-height:480px;
  display:flex;
  flex-direction:column;
  border: 1px solid rgba(255,255,255,0.05);
  animation: fadeInUp 0.6s ease 0.4s backwards;
}

.carousel{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: linear-gradient(180deg, #081022, #07111a);
}

.slides{
  display:flex;
  transition:transform 600ms cubic-bezier(.2,.9,.2,1);
  height:100%;
  will-change:transform;
}

.slide{
  min-width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.controls{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:20;
}

.dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(0,0,0,0.2);
  cursor:pointer;
  transition: all 0.3s ease;
}
.dot.active{
  background:var(--accent);
  transform:scale(1.3);
  box-shadow: 0 0 12px var(--accent);
}

.nav-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:var(--glass);
  border-radius:999px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition: all 0.3s ease;
  color:white;
  font-size:24px;
}
.nav-button:hover{
  background:rgba(110,231,183,0.2);
  border-color:var(--accent);
}
.nav-left{left:14px}
.nav-right{right:14px}

@media (max-width:520px){
  .card{min-height:400px}
  .btn{padding:14px 22px; font-size:15px}
  h1{font-size:36px}
  p.lead{font-size:18px}
}

/* Glow animation */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(110,231,183,0.3);
  }
  50% {
    box-shadow: 0 6px 32px rgba(110,231,183,0.6);
  }
}

.btn:not(.ghost) {
  animation: glow 2s ease-in-out infinite;
}