@font-face {
            font-family: 'myfont';
            src: url('../fonts/Estedad-Regular.woff2') format('woff2'),
                 url('../fonts/Estedad-Regular.ttf') format('truetype');
        }
:root {
  --primary: #1a73e8;
  --accent: #00d2ff;
  --dark: #0b1b2b;
  --light: #f5f7fb;
  --glass: rgba(255,255,255,0.15);
  --border: rgba(255,255,255,0.2);
}

* { margin:0; padding:0; box-sizing:border-box; font-family: 'myfont'; }

body {
  background: var(--dark);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
}

.brand { display:flex; gap:12px; align-items:center; }
.logo { font-size: 2rem; }
.brand-text h1 { font-size:1.3rem; }
.brand-text p { font-size:.85rem; opacity:.7; }

.nav-btn {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  padding:10px 20px;
  border-radius: 20px;
  font-weight:600;
  transition: transform .3s ease;
}
.nav-btn:hover { transform: scale(1.05); }

.hero {
  display:flex;
  flex-wrap:wrap;
  padding:50px 8%;
  gap:40px;
}

.hero-content {
  flex:1 1 420px;
  padding:30px;
  border-radius:20px;
}

.hero-content h2 { font-size:2.2rem; margin-bottom:15px; }
.hero-content p { opacity:.8; line-height:1.9; margin-bottom:20px; }

.hero-cta { display:flex; gap:15px; margin-bottom:25px; }

.btn-primary, .btn-outline {
  padding:12px 25px;
  border-radius:20px;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition: all .3s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
}
.btn-primary:hover { filter: brightness(1.15); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  border:1px solid var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: var(--accent); color:#fff; }

.stats {
  display:flex;
  gap:20px;
  margin-top:10px;
}
.stats div { text-align:center; }
.stats strong { font-size:1.4rem; display:block; }

.hero-visual { flex:1 1 300px; display:flex; align-items:center; justify-content:center; }
.card {
  padding:25px;
  border-radius:20px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

.before-after { display:flex; justify-content:space-between; margin:20px 0; }
.before, .after {
  padding:20px;
  flex:1;
  text-align:center;
  border-radius:15px;
}
.before { background: rgba(255,255,255,0.08); margin-left:10px; }
.after { background: rgba(0,210,255,0.2); margin-right:10px; }

.smile-bar { display:flex; align-items:center; gap:10px; }
.smile-bar .bar {
  flex:1;
  height:8px;
  border-radius:10px;
  background: linear-gradient(90deg, #fff, #00d2ff);
}

.features {
  margin:40px 8%;
  padding:20px;
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.feature {
  padding:20px;
  border-radius:15px;
  background: rgba(255,255,255,0.08);
  transition: transform .3s ease;
}
.feature:hover { transform: translateY(-6px); }

.footer { text-align:center; padding:20px; opacity:.6; }

.glass {
  background: var(--glass);
  border:1px solid var(--border);
  backdrop-filter: blur(20px);
}

.bg-orbs::before, .bg-orbs::after {
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  background: radial-gradient(circle, rgba(0,210,255,.4), transparent);
  top:-80px; left:-80px;
  animation: float 8s infinite alternate;
}
.bg-orbs::after {
  width:280px; height:280px;
  right:-60px; bottom:-60px;
  left:auto;
  background: radial-gradient(circle, rgba(26,115,232,.4), transparent);
  animation-delay:3s;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(30px); }
}

.ai-container {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap:30px;
  padding:40px 8%;
}

.camera-card video {
  width:100%;
  border-radius:15px;
  margin-top:15px;
  background:#000;
}
.result-box {
  margin-top:15px;
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
}
.result-box img {
  max-width:100%;
  border-radius:15px;
}

.hidden { display:none; }

@media (max-width:768px) {
  .hero { padding:30px 6%; }
  .hero-content h2 { font-size:1.8rem; }
  .stats { flex-direction:column; }
}