@font-face{font-family:Inter;src:local("Inter")}
:root{--bg:#ffffff;--fg:#0a0e17;--muted:#64748b;--primary:#6366f1;--primary-2:#8b5cf6;--accent:#ec4899;--glass:rgba(10,14,23,.05);--card:rgba(10,14,23,.08);--border:rgba(10,14,23,.10)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 50%,#f1f5f9 100%);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{width:min(1200px,90%);margin:0 auto}
#bg{position:fixed;inset:0;z-index:-1}
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,.75));backdrop-filter:saturate(1.1) blur(12px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:.5px}
.brand-icon{display:inline-block;width:48px;height:48px;object-fit:contain}
.nav{display:flex;gap:22px}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;transition:color .2s}
.nav a:hover{color:var(--fg)}
.cta{padding:10px 16px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2));text-decoration:none;color:white;font-weight:700;box-shadow:0 10px 30px rgba(124,58,237,.4)}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 0 60px;min-height:80vh}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-content h1{font-size:56px;line-height:1.05;margin:0 0 20px;font-weight:900;letter-spacing:.5px;background:linear-gradient(135deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-content p{color:var(--muted);font-size:18px;margin:0 0 22px}
.hero-cta{display:flex;gap:16px;margin:32px 0;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:14px;text-decoration:none;font-weight:800;letter-spacing:.2px}
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 12px 36px rgba(34,211,238,.25)}
.btn.primary::before{content:"";position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.65),transparent 60%);opacity:0;transition:opacity .15s}
.btn.primary:hover{transform:translateY(-2px)}
.btn.primary:hover::before{opacity:1}
.btn.ghost{color:var(--primary);border:1px solid var(--border);background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.btn.ghost::before{content:"";position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.12),transparent 60%);opacity:0;transition:opacity .15s}
.btn.ghost:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.btn.ghost:hover::before{opacity:1}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.badge{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--border);color:#1f2a44;font-weight:700;box-shadow:0 6px 18px rgba(9,21,45,.06);transition:transform .16s ease,box-shadow .16s ease}
.badge:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(9,21,45,.1)}
.phone{width:260px;height:520px;border-radius:32px;background:linear-gradient(180deg,#f1f5ff,#e6edff);box-shadow:0 30px 60px rgba(15,23,42,.15);position:relative;padding:18px}
.phone.large{width:320px;height:640px}
.screen{border-radius:24px;overflow:hidden;height:100%;background:#ffffff;position:relative}
.screen-gradient{position:absolute;inset:0;background:conic-gradient(from 180deg at 50% 50%,rgba(60,130,246,.18),rgba(124,58,237,.18),rgba(34,211,238,.18),rgba(60,130,246,.18));filter:blur(40px)}
.screen-mock{position:absolute;inset:auto 0 0 0;height:54px;display:grid;place-items:center;background:linear-gradient(90deg,rgba(59,130,246,.10),rgba(124,58,237,.10));color:#1f2a44;font-weight:800;letter-spacing:1px}
.features{padding:80px 0}
.features h2,.product h2,.solutions h2,.gallery h2,.cta-final h2{font-size:34px;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:24px;min-height:160px;display:flex;flex-direction:column;gap:10px;transition:all .3s ease}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 60px rgba(10,14,23,.15);background:linear-gradient(135deg,var(--glass),rgba(99,102,241,.08))}
.card .icon{font-size:28px}
.product{padding:40px 0 60px}
.product-wrap{display:flex;flex-direction:column;gap:50px;align-items:center;text-align:center}
.product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.product-item{display:flex;gap:12px;align-items:flex-start;background:var(--glass);border:1px solid var(--border);padding:16px;border-radius:16px;transition:all .25s ease}
.pi-icon{font-size:22px}
.product-item:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(10,14,23,.12);background:linear-gradient(135deg,var(--glass),rgba(99,102,241,.06))}
.product-info{padding:60px 0}
.product-info .card ul{margin:8px 0 0 18px;color:var(--muted)}
.product-info .card li{margin:6px 0}
.carousel{position:absolute;inset:0;display:flex;overflow:hidden;background:#f8fafc}
.slide{min-width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;filter:saturate(1.1) contrast(1.05);display:flex;align-items:center;justify-content:center}
.solutions{padding:60px 0}
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.solution{padding:24px;border-radius:20px;background:radial-gradient(400px 260px at 10% 10%,rgba(59,130,246,.12),rgba(124,58,237,.08));border:1px solid var(--border);box-shadow:inset 0 0 40px rgba(124,58,237,.06);transition:all .3s ease}
.solution:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 24px 60px rgba(10,14,23,.18);background:radial-gradient(400px 260px at 10% 10%,rgba(99,102,241,.18),rgba(139,92,246,.12))}
.stats{padding:40px 0}
.stats .container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:20px;text-align:center}
.stat-num{font-size:36px;font-weight:900;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{color:var(--muted)}
.gallery{padding:60px 0}
.gallery-slider{border:1px solid var(--border);border-radius:22px;background:#fff;overflow:hidden}
.gs-track{display:flex;width:100%}
.gs-item{flex:0 0 25%;aspect-ratio:1/1;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#f8fafc;border-right:1px solid var(--border)}
.gs-item:last-child{border-right:none}
.app-download{padding:60px 0;text-align:center}
.app-download h2{font-size:34px;margin:0 0 10px}
.download-buttons{display:flex;gap:16px;margin:32px 0;justify-content:center}
.btn .btn-icon{font-size:24px;margin-right:12px}
.btn .btn-text{display:flex;flex-direction:column;align-items:flex-start}
.btn .btn-text-top{font-size:16px;font-weight:800}
.btn .btn-text-bottom{font-size:12px;opacity:.8}
.qrcode-section{margin-top:40px}
.qrcode{display:flex;justify-content:center}
.qrcode-placeholder{width:200px;height:200px;border-radius:20px;background:linear-gradient(135deg,var(--glass),rgba(99,102,241,.1));border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.qrcode-icon{font-size:48px}
.qrcode-text{font-weight:700;color:var(--muted)}
.qrcode-desc{margin-top:16px;color:var(--muted)}
.cta-final{padding:60px 0}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form input,.contact-form textarea{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;color:#0b132a;outline:none}
.contact-form textarea{grid-column:1/-1}
.site-footer{padding:24px 0;border-top:1px solid var(--border);background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}
.footer-brand{font-weight:900;letter-spacing:.5px}
.footer-links{display:flex;gap:18px;margin:10px 0;color:var(--muted)}
.footer-links a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--primary)}
.footer-copy a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer-copy a:hover{color:var(--primary)}
.footer-copy{color:#55627a}
@media (max-width:980px){
  .hero-content h1{font-size:42px}
  .hero-content p{font-size:16px}
  .product-list{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .solution-grid{grid-template-columns:1fr}
  .stats .container{grid-template-columns:1fr 1fr}
  .gs-item{flex:0 0 50%}
}
@media (max-width:680px){
  .nav{display:none}
  .hero-content h1{font-size:32px}
  .hero-content p{font-size:15px}
  .hero-cta{flex-direction:column;gap:12px}
  .grid{grid-template-columns:1fr}
  .stats .container{grid-template-columns:1fr}
  .gs-item{flex:0 0 50%}
  .contact-form{grid-template-columns:1fr}
  .download-buttons{flex-direction:column;gap:12px}
  .qrcode-placeholder{width:160px;height:160px}
  .qrcode-icon{font-size:40px}
}