body{margin:0;font-family:'Inter',sans-serif;background:#0F172A;color:#fff;} .container{width:90%;max-width:1200px;margin:auto;} .nav{padding:20px 0;background:#0F172A;} .nav .container{display:flex;justify-content:space-between;align-items:center;} .logo{font-weight:700;} .hero{padding:100px 0;} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;} .hero h1{font-size:48px;margin-bottom:20px;} .hero p{color:#CBD5E1;font-size:18px;margin-bottom:30px;} .mockup-box{background:#111827;padding:20px;text-align:center;border-radius:12px;} img{max-width:100%;height:auto;} .section{padding:80px 0;} .dark{background:#111827;} .highlight{background:linear-gradient(135deg,#00BFA6,#0284C7);} .center{text-align:center;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px;} .feature-list{list-style:none;padding:0;} .feature-list li{margin:10px 0;} .btn-primary{background:#00BFA6;color:#000;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;margin-right:10px;transition:box-shadow .3s;} .btn-primary:hover{box-shadow:0 0 10px #00BFA6;} .btn-secondary{border:1px solid #00BFA6;color:#00BFA6;padding:12px 24px;border-radius:8px;text-decoration:none;transition:background .3s;} .btn-secondary:hover{background:#00BFA6;color:#000;} .large{padding:16px 32px;font-size:18px;} footer{padding:30px;text-align:center;background:#0B1220;color:#888;} @media(max-width:900px){.hero-grid,.grid-3{grid-template-columns:1fr;}}