:root{--tg-blue:#2a8cff;--tg-blue-2:#1d73e8;--tg-dark:#0b1220;--tg-mid:#111827;--tg-text:#0f172a;--tg-muted:#64748b;--tg-border:#e5e7eb;--tg-bg:#f5f7fb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#fff;color:#111}a{color:inherit;text-decoration:none}
.header{background:#fff;border-bottom:1px solid var(--tg-border);position:sticky;top:0;z-index:50}
.nav{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 16px}
.brand{font-weight:700;letter-spacing:.1em;color:#1f2937;text-transform:uppercase;font-size:.9rem}
.nav-links{display:flex;gap:20px;font-size:.95rem;color:#475569}
.nav-links a.active{color:var(--tg-blue)}
.hero{background:linear-gradient(180deg,#f3f7ff,#fff);padding:72px 16px}
.hero-top{max-width:1120px;margin:0 auto 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.y-logo{width:96px;height:96px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#7db7ff, #2a8cff 40%, #1d4ed8 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:34px;letter-spacing:.04em;box-shadow:0 12px 32px rgba(42,140,255,.4), inset 0 2px 6px rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.35)}
.hero-top .brand-title{font-weight:700;font-size:28px;color:#0f172a}
.hero-top .brand-sub{color:#64748b}
.hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero h1{font-size:52px;margin:0 0 12px;color:#0f172a;letter-spacing:-.01em}
.hero p{color:#475569;line-height:1.75}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{padding:12px 20px;border-radius:999px;background:var(--tg-blue);color:#fff;font-weight:600;box-shadow:0 8px 24px rgba(42,140,255,.22);transition:transform .15s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(42,140,255,.28)}
.btn.ghost{background:#e8f0ff;color:#0f172a;box-shadow:none}
.section{padding:54px 16px}
.section .wrap{max-width:1120px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{border:1px solid var(--tg-border);border-radius:18px;padding:22px;background:#fff;box-shadow:0 6px 24px rgba(15,23,42,.06)}
.hero-panel{background:#fff;border:1px solid var(--tg-border);border-radius:20px;padding:22px;box-shadow:0 14px 32px rgba(15,23,42,.08)}
.badge{display:inline-flex;gap:8px;align-items:center;background:#e8f0ff;color:#1d4ed8;border-radius:999px;padding:6px 12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.app-card{border:1px solid var(--tg-border);border-radius:16px;padding:16px;background:#fff}
.icon-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:18px}
.icon-pill{display:flex;align-items:center;gap:10px;border:1px solid var(--tg-border);border-radius:999px;padding:8px 14px;background:#fff}
.icon-dot{width:10px;height:10px;border-radius:999px;background:var(--tg-blue);box-shadow:0 0 12px rgba(42,140,255,.4)}
.section-title{font-size:28px;margin:0 0 12px;color:#0f172a}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.mock-shot{height:320px;border-radius:24px;background:linear-gradient(160deg,#e2e8f0,#f8fafc);border:1px solid var(--tg-border);position:relative;overflow:hidden}
.mock-shot:after{content:"";position:absolute;inset:20px;border-radius:18px;background:linear-gradient(180deg,#fff,#f1f5f9);border:1px solid var(--tg-border)}
.hero-screens{display:flex;gap:14px;align-items:flex-end;margin-top:20px}
.hero-screen{flex:1;height:180px;border-radius:14px;background:linear-gradient(160deg,#fff,#f1f5f9);border:1px solid var(--tg-border);box-shadow:0 10px 28px rgba(15,23,42,.08)}
.hero-screen.tall{height:220px}
.download-bar{background:#0f172a;color:#e2e8f0;padding:24px 16px}
.download-bar .wrap{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.download-bar .btn{background:#2a8cff}
.faq{display:grid;gap:12px}
.faq-item{border:1px solid var(--tg-border);border-radius:16px;padding:16px;background:#fff}
.faq-item h3{margin:0 0 6px}
.footer{padding:34px 16px;border-top:1px solid var(--tg-border);background:#f8fafc}
.footer .wrap{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#64748b}
.small{font-size:.92rem;color:#64748b}
.disabled{pointer-events:none;opacity:.6}
.fade-in{animation:fadeIn .6s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:900px){.hero-inner,.split{grid-template-columns:1fr}}