/* ============================================================
   AAPRO — Components (nav, hero, features, pricing, faq, footer)
   ============================================================ */

/* ---------- NAVBAR ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,10,0.72);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:18px;width:100%;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:0.5px;flex-shrink:0;}
.brand-mark{width:34px;height:34px;flex-shrink:0;object-fit:contain;}
.brand b{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:24px;}
.nav-links a{padding:8px 15px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--text-2);white-space:nowrap;transition:color .2s, background .2s;}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;}

.lang{position:relative;}
.lang-btn{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-2);border:1px solid var(--line);background:rgba(255,255,255,0.02);transition:all .2s;}
.lang-btn:hover{color:var(--text);border-color:var(--line-2);}
.lang-btn svg{width:16px;height:16px;}
.lang-btn .chev{width:13px;height:13px;transition:transform .25s;opacity:0.6;}
.lang.open .lang-btn .chev{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:184px;background:var(--bg-card-solid);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px;box-shadow:0 24px 60px -12px rgba(0,0,0,0.7);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s var(--ease);z-index:50;max-height:70vh;overflow-y:auto;}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none;}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 12px;border-radius:7px;font-size:14px;color:var(--text-2);text-align:left;transition:all .15s;}
.lang-menu button:hover{background:rgba(255,255,255,0.06);color:var(--text);}
.lang-menu button.active{color:var(--accent);background:var(--accent-soft);}
.lang-menu button .tick{width:14px;height:14px;opacity:0;flex-shrink:0;}
.lang-menu button.active .tick{opacity:1;}

.nav-toggle{display:none;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);align-items:center;justify-content:center;}
.nav-toggle svg{width:20px;height:20px;}

/* ---------- HERO ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px));padding-bottom:clamp(60px,8vw,110px);overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:100px;background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),0.25);font-size:13px;font-weight:500;color:var(--accent-2);margin-bottom:26px;}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2.4s ease infinite;}
.hero-badge .shiny{background-image:linear-gradient(110deg,var(--accent-2) 0%,var(--accent-2) 38%,#fff 50%,var(--accent-2) 62%,var(--accent-2) 100%);background-size:220% auto;background-position:150% center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 5.5s linear infinite;}
@keyframes shine{to{background-position:-50% center;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero h1{font-size:clamp(40px,6.4vw,78px);margin-bottom:24px;}
.hero-lead{font-size:clamp(16px,1.7vw,20px);color:var(--text-2);max-width:54ch;line-height:1.7;margin-bottom:36px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px;}
.hero-stats{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;}
.hstat .n{font-family:var(--f-display);font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1;}
.hstat .n b{color:var(--accent);}
.hstat .l{font-size:13px;color:var(--text-3);margin-top:7px;letter-spacing:0.3px;}

.hero-visual{position:relative;}
/* phone frame (iPhone-style) holding the real mobile UI screenshot */
.phone-frame{position:relative;width:330px;max-width:100%;margin:0 auto;border-radius:42px;padding:12px;background:linear-gradient(155deg,#1c1c22,#0a0a0d);border:1px solid var(--line-2);box-shadow:0 40px 100px -30px rgba(0,0,0,0.85),0 0 80px -30px var(--accent-glow);transform:perspective(1800px) rotateY(-13deg) rotateX(5deg) rotateZ(1deg);transition:transform .45s var(--ease);}
.hero-visual:hover .phone-frame{transform:perspective(1800px) rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
.phone-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:108px;height:26px;border-radius:0 0 16px 16px;background:#0a0a0d;z-index:3;}
.phone-notch::after{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,0.12);}
.phone-screen{position:relative;border-radius:30px;overflow:hidden;background:#0b0b0e;line-height:0;aspect-ratio:390/844;}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.toggle{width:38px;height:21px;border-radius:100px;background:var(--accent);position:relative;flex-shrink:0;}
.toggle::after{content:'';position:absolute;top:2.5px;right:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;}
.toggle.off{background:rgba(255,255,255,0.12);}
.toggle.off::after{right:auto;left:2.5px;}

.hero-float{position:absolute;z-index:3;}
.hf-inner{border-radius:14px;padding:12px 15px;background:var(--bg-card-solid);border:1px solid var(--line-2);box-shadow:0 20px 50px -16px rgba(0,0,0,0.7);display:flex;align-items:center;gap:11px;}
.hero-float .fi{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-float .fi svg{width:18px;height:18px;}
.hero-float .ft{font-size:13px;font-weight:600;line-height:1.2;}
.hero-float .fs{font-size:11px;color:var(--text-3);}
.hero-float.f1{top:14%;right:calc(100% + 24px);}
.hero-float.f2{bottom:16%;left:calc(100% + 24px);}
.hero-float.f1 .hf-inner{animation:float1 6s ease-in-out infinite;}
.hero-float.f2 .hf-inner{animation:float2 7s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes float2{0%,100%{transform:translateY(0);}50%{transform:translateY(12px);}}

.marquee{margin-top:clamp(52px,6vw,84px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;width:max-content;animation:scroll 30s linear infinite;}
.marquee-track .mi{font-family:var(--f-mono);font-size:14px;letter-spacing:1px;color:var(--text-3);padding:0 32px;display:flex;align-items:center;gap:32px;white-space:nowrap;}
.marquee-track .mi::after{content:'◆';color:var(--accent);opacity:0.45;font-size:8px;}
@keyframes scroll{to{transform:translateX(-50%);}}