/* hero.css — hero section + phone/app-card collage */
.hero{position:relative;background:linear-gradient(180deg,#FAF1EF 0%,#FBF3F1 60%,#F8EFED 100%);overflow:hidden}
.hero-deco{position:absolute;inset:0;pointer-events:none}
.dot-grid{position:absolute;width:180px;height:120px;background-image:radial-gradient(circle,rgba(211,27,43,.28) 1.6px,transparent 1.6px);background-size:16px 16px;opacity:.7}
.dg-1{top:36px;right:44%}
.dg-2{bottom:70px;right:4%}
.blob{position:absolute;border-radius:50%}
.b-1{width:420px;height:420px;right:-90px;top:60px;background:radial-gradient(circle at 35% 30%,rgba(211,27,43,.10),transparent 65%)}
.b-3{width:56px;height:56px;left:46%;top:80px;background:rgba(211,27,43,.08)}

.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:72px}
.hero-copy h1{font-size:clamp(38px,5vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.hero-copy h1 em{font-style:normal;color:var(--red)}
.lead{margin:22px 0 28px;color:var(--body);font-size:16.5px;max-width:420px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin:38px 0 30px}
.hero-stats li{display:flex;align-items:center;gap:11px}
.hero-stats svg{width:22px;height:22px;fill:var(--red);stroke:var(--red);flex:none}
.hero-stats b{display:block;font-size:19px;font-weight:800;line-height:1.15}
.hero-stats span{font-size:12.5px;color:var(--muted)}

.trusted{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.store-logos{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.store-logos span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#4B4B52}
.store-logos svg{width:17px;height:17px;fill:#4B4B52}
.store-logos b{font-weight:800}

/* ---------- collage ---------- */
.hero-visual{position:relative}
.collage{position:relative;height:560px;max-width:520px;margin-left:auto}

.phone{background:#101014;border-radius:34px;padding:8px;box-shadow:0 30px 60px -20px rgba(20,5,5,.35)}
.phone .ph-screen{background:#fff;border-radius:27px;height:100%;overflow:hidden;position:relative}
.phone-hero{position:absolute;left:50%;top:44px;transform:translateX(-50%);width:238px;height:480px;z-index:5}
.ph-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:78px;height:20px;background:#101014;border-radius:12px;z-index:6}
.phone-hero .ph-screen{padding:44px 18px 18px;display:flex;flex-direction:column}
.ph-brand{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted)}
.phone-hero h3{font-size:21px;font-weight:800;line-height:1.25;margin-top:12px;letter-spacing:-.01em}
.phone-hero h3 em{font-style:normal;color:var(--red)}
.ph-illus{flex:1;position:relative;margin:14px 0;background:linear-gradient(180deg,#FDF2F1,#FAE4E2);border-radius:16px}
.chat-bub{position:absolute;background:#fff;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.06)}
.chat-bub.l{width:64px;height:26px;left:12px;top:18px}
.chat-bub.r{width:52px;height:22px;right:12px;top:52px;background:#F9D8D6}
.mic-fig{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;background:var(--red);box-shadow:0 0 0 10px rgba(211,27,43,.14),0 0 0 20px rgba(211,27,43,.06)}
.mic-fig{display:flex;align-items:center;justify-content:center}
.mic-fig .mic-emoji{font-style:normal;font-size:26px}
.ph-cta{background:var(--red);color:#fff;font-weight:700;font-size:13.5px;padding:12px;border-radius:12px;width:100%}

/* floating app cards */
.app-card{position:absolute;border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.ac-head{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:8px}
.ac-ico{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.ac-ico.dark{background:#2A2A30;color:#fff}
.ac-ico.red{background:var(--red);color:#fff}
.ac-ico.white{background:#fff;color:var(--red)}
.ac-ico.sm{width:20px;height:20px;border-radius:6px;font-size:10px}

.card-auth-dark{left:0;top:96px;width:172px;background:linear-gradient(160deg,#232327,#101013);color:#fff;z-index:4;transform:rotate(-5deg)}
.card-auth-dark p{font-size:11px;color:#B9B9C0;line-height:1.4}
.card-auth-dark .otp{font-size:23px;font-weight:800;letter-spacing:.06em;margin:10px 0 8px}
.otp-bar{height:4px;border-radius:2px;background:#3A3A40}
.otp-bar i{display:block;height:100%;width:62%;border-radius:2px;background:var(--red);animation:otp 8s linear infinite}
@keyframes otp{from{width:95%}to{width:5%}}

.card-aichat{right:12px;top:0;width:158px;height:170px;background:linear-gradient(160deg,#E02234,#8F0E1B);color:#fff;z-index:2;transform:rotate(7deg);overflow:hidden}
.card-aichat b{display:block;font-size:15px;margin-top:8px}
.card-aichat p{font-size:11px;opacity:.85}
.ripple{position:absolute;right:-28px;bottom:-28px;width:110px;height:110px;border-radius:50%;border:14px solid rgba(255,255,255,.14)}

.card-auth-light{right:0;top:190px;width:150px;background:#fff;z-index:4;transform:rotate(4deg)}
.card-auth-light p{font-size:10.5px;color:var(--muted);line-height:1.4}
.mini-rows{margin-top:10px;display:grid;gap:6px}
.mini-rows i{height:8px;border-radius:4px;background:#F2E4E2}
.mini-rows i:last-child{width:70%}

.card-pdf{left:6px;top:305px;width:150px;background:#fff;z-index:4;transform:rotate(-3deg)}
.card-pdf p{font-size:11px;color:var(--body);line-height:1.35;font-weight:600}
.pdf-badge{display:inline-block;margin-top:10px;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:6px 8px;border-radius:7px 7px 7px 2px}

.card-vpn{right:6px;bottom:36px;width:168px;background:linear-gradient(160deg,#C4172A,#6E0A13);color:#fff;z-index:6;transform:rotate(5deg);text-align:left}
.card-vpn b{font-size:14px}
.card-vpn p{font-size:10.5px;opacity:.85;margin:2px 0 12px}
.vpn-power{width:56px;height:56px;margin:0 auto;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(255,255,255,.06)}
.vpn-power svg{width:26px;height:26px;stroke:#fff}
.card-vpn small{display:block;text-align:center;font-size:10px;opacity:.8;margin-top:8px}

.chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:9px 12px;box-shadow:var(--shadow);z-index:6}
.chip b{font-size:11.5px;display:block;line-height:1.2}
.chip small{font-size:9.5px;color:var(--muted)}
.chip-lessons{left:34px;bottom:120px;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;padding-top:44px}
  .collage{margin:0 auto;height:520px;max-width:440px;transform:scale(.92);transform-origin:top center}
  .hero-stats{gap:24px}
}
@media(max-width:480px){
  .collage{transform:scale(.72);height:420px}
  .card-auth-dark{left:-10px}
}