* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(circle at 70% 20%, rgba(100, 78, 255, 0.16), transparent 35%),
              radial-gradient(circle at 20% 90%, rgba(143, 92, 255, 0.12), transparent 35%),
              #0b1020;
  color: #fff;
  overflow-x: hidden;
}
.page { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 50px 24px; }
.glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: #7657ff; filter: blur(160px); opacity: 0.11; z-index: -1; }
.glow.one { top: -200px; right: -120px; }
.glow.two { bottom: -280px; left: -200px; background: #a855f7; }
.container { width: min(1120px, 100%); display: grid; grid-template-columns: 1fr 0.9fr; gap: 80px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); border-radius: 999px; color: #c9c9d8; font-size: 14px; margin-bottom: 28px; }
.badge-dot { width: 8px; height: 8px; background: #8b6cff; border-radius: 50%; box-shadow: 0 0 18px #8b6cff; animation: pulse 2s infinite; }
h1 { font-size: clamp(46px, 6vw, 78px); line-height: 0.98; letter-spacing: -0.055em; max-width: 750px; margin-bottom: 28px; }
.gradient-text { background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 45%, #818cf8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.description { max-width: 620px; font-size: 20px; line-height: 1.7; color: #aeb3c5; margin-bottom: 36px; }
.bottom-note { display: flex; align-items: center; gap: 14px; color: #d9dbee; font-size: 15px; }
.icon-small { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(121, 92, 255, 0.12); border: 1px solid rgba(139, 108, 255, 0.23); font-size: 20px; }
.visual { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; }
.browser { width: 100%; max-width: 470px; background: linear-gradient(145deg, rgba(29, 35, 62, .97), rgba(14, 19, 37, .97)); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; box-shadow: 0 40px 100px rgba(0,0,0,.45); overflow: hidden; transform: rotate(2deg); }
.browser-top { height: 58px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; padding: 0 20px; gap: 8px; }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15); }
.browser-dot:nth-child(1) { background: #ff6b6b; }
.browser-dot:nth-child(2) { background: #ffd166; }
.browser-dot:nth-child(3) { background: #62d392; }
.browser-content { padding: 55px 42px 46px; text-align: center; }
.code-icon { width: 88px; height: 88px; margin: 0 auto 28px; border-radius: 25px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(131, 104, 255, .2), rgba(89, 71, 188, .08)); border: 1px solid rgba(156, 134, 255, .22); }
.code-icon svg { width: 50px; height: 50px; stroke: #a78bfa; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.browser-title { font-size: 25px; font-weight: 700; margin-bottom: 13px; }
.browser-text { color: #9298ad; line-height: 1.6; font-size: 15px; }
.progress-wrapper { margin-top: 35px; }
.progress-info { display: flex; justify-content: space-between; color: #9ea4ba; font-size: 13px; margin-bottom: 10px; }
.progress { height: 9px; width: 100%; overflow: hidden; background: rgba(255,255,255,.07); border-radius: 999px; }
.progress-bar { width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #6366f1); box-shadow: 0 0 25px rgba(139,92,246,.4); animation: progress 2.3s ease-out; }
.floating-card { position: absolute; border-radius: 18px; background: rgba(21, 27, 49, .78); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(15px); box-shadow: 0 22px 60px rgba(0,0,0,.25); }
.card-one { width: 160px; padding: 18px; top: 12%; right: -25px; transform: rotate(8deg); }
.card-two { width: 175px; padding: 18px; bottom: 5%; left: -35px; transform: rotate(-7deg); }
.card-icon { font-size: 25px; margin-bottom: 10px; }
.card-title { font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.card-text { color: #878da4; font-size: 12px; line-height: 1.45; }
.shape { position: absolute; border: 1px solid rgba(132, 104, 255, .15); border-radius: 50%; pointer-events: none; z-index: -1; }
.shape.one { width: 380px; height: 380px; right: -210px; top: -100px; }
.shape.two { width: 260px; height: 260px; left: -150px; bottom: -100px; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes progress { from { width: 0; } to { width: 72%; } }
@media (max-width: 900px) { .container { grid-template-columns: 1fr; gap: 50px; text-align: center; } .description { margin: 0 auto; } .bottom-note { justify-content: center; } .visual { min-height: auto; padding: 40px 20px; } .browser { transform: none; } .card-one { right: 0; } .card-two { left: 0; } }
@media (max-width: 560px) { h1 { font-size: 48px; } .description { font-size: 17px; } .floating-card { display: none; } }