/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;
  font-size:16px;padding:15px 26px;border-radius:var(--radius-btn);border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .25s,background .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:0 8px 24px var(--brand-glow)}
.btn-primary:hover{background:var(--brand-600);box-shadow:0 12px 32px var(--brand-glow)}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:sheen 8s ease-in-out infinite}
@keyframes sheen{0%,88%{left:-60%}96%{left:130%}100%{left:130%}}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--brand-500);color:var(--brand-500)}
.btn-wa{background:#25D366;color:#062e14}
.btn-wa:hover{background:#1fbe5a}
.btn-lg{padding:17px 34px;font-size:17px}

/* ============ NAV ============ */
header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,border-color .3s;
  border-bottom:1px solid transparent}
header.scrolled{background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate}
.brand-badge{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:6px 12px;box-shadow:0 2px 10px rgba(10,17,40,.18)}
.brand-badge img{height:22px;display:block}
.foot-brand .brand-badge img{height:24px}
.brand .z{color:var(--signal-400)}
.brand svg{width:30px;height:30px}
.nav-links{display:flex;gap:26px;margin-inline-start:14px}
.nav-links a{font-size:15px;font-weight:500;color:var(--text-soft);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:transparent;
  color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.2s}
.icon-btn:hover{border-color:var(--brand-500);color:var(--brand-500)}
.lang-wrap{position:relative}
.lang-menu{position:absolute;top:48px;inset-inline-end:0;background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-md);padding:6px;min-width:150px;opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:.2s var(--ease);z-index:120}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:block;width:100%;text-align:start;padding:9px 12px;border:0;background:transparent;
  color:var(--text);font-family:inherit;font-size:15px;border-radius:8px;cursor:pointer}
.lang-menu button:hover,.lang-menu button.active{background:var(--bg-alt);color:var(--brand-500)}
.menu-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:transparent;
  color:var(--text);cursor:pointer;place-items:center;transition:.2s}
.menu-toggle:hover{border-color:var(--brand-500);color:var(--brand-500)}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;transition:opacity .3s}
.mobile-overlay.show{display:block;opacity:1}
.mobile-drawer{display:none;position:fixed;top:72px;inset-inline:0;background:var(--card);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-lg);z-index:101;padding:16px 24px 24px;transform:translateY(-10px);opacity:0;
  transition:transform .3s var(--ease),opacity .3s;max-height:calc(100svh - 72px);overflow-y:auto}
.mobile-drawer.open{display:block;transform:none;opacity:1}
.mobile-drawer a{display:block;padding:14px 0;font-size:17px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}
.mobile-drawer a:last-child{border-bottom:none}
.mobile-drawer .btn{width:100%;justify-content:center;margin-top:12px}

/* ============ HERO ============ */
/* ============ GRAIN TEXTURE (dark sections) ============ */
.grain{position:relative}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

.hero{padding:100px 0 60px;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:
  radial-gradient(1000px 500px at 80% -10%,rgba(46,75,255,.28),transparent 60%),
  radial-gradient(700px 450px at 10% 100%,rgba(214,219,238,.14),transparent 60%),var(--midnight-900);
  color:#EAF0FF;overflow:hidden;position:relative}
html[dir="ltr"] .hero{background:radial-gradient(1000px 500px at 20% -10%,rgba(46,75,255,.28),transparent 60%),
  radial-gradient(700px 450px at 90% 100%,rgba(214,219,238,.14),transparent 60%),var(--midnight-900)}
.hero>.wrap{width:100%}
.hero-map{position:absolute;inset:-4%;opacity:.5;pointer-events:none;animation:mapDrift 24s ease-in-out infinite}
@keyframes mapDrift{0%{transform:translate(0,0) scale(1.02)}50%{transform:translate(-1.2%,.8%) scale(1.045)}100%{transform:translate(0,0) scale(1.02)}}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;
  flex-direction:column;align-items:center;gap:8px;color:#8A99C2;font-size:12px;text-decoration:none}
.scroll-cue .chev{width:20px;height:20px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);animation:cueBounce 1.8s ease-in-out infinite}
html[dir="ltr"] .scroll-cue .chev{transform:rotate(-45deg)}
@keyframes cueBounce{0%,100%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(6px) rotate(-45deg)}}
@media(max-height:760px){.hero{min-height:auto;padding:96px 0 48px}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(36px,5.4vw,62px);color:#fff;margin-bottom:22px}
.hero h1 .hl{color:var(--signal-400)}
.hero .word{display:inline-block;opacity:0;transform:translateY(16px);animation:wordIn .6s var(--ease) forwards}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero-sub{font-size:19px;color:#B7C4E6;max-width:560px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.trust-line{font-size:14px;color:#8A99C2;display:flex;align-items:center;gap:8px}
.trust-line b{color:#C7D3F0;font-weight:500}
.hero-visual{position:relative;height:520px}
/* phones */
.phone{position:absolute;width:240px;border-radius:36px;background:#080d1e;border:4px solid #233463;
  box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 30px rgba(46,75,255,.3);overflow:hidden;animation:float 6s ease-in-out infinite}
.phone.p1{inset-inline-end:20px;top:10px;z-index:3}
.phone.p2{inset-inline-start:10px;top:110px;z-index:2;animation-delay:-3s;width:230px}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.p-notch{height:20px;background:#080d1e;position:relative;z-index:5}
.p-notch::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:50px;height:5px;border-radius:6px;background:#1e2d54}
.p-screen{padding:0;min-height:auto;background:transparent;overflow:hidden}
.p-screen img{width:100%;height:auto;display:block;border-radius:0 0 32px 32px}
.p-map{height:150px;border-radius:14px;background:
  linear-gradient(135deg,#13224a,#0e1730);position:relative;overflow:hidden;margin-bottom:12px}
.p-route{position:absolute;top:40%;left:10%;width:80%;height:3px;background:var(--brand-500);border-radius:3px;