.nav-right{display:flex;align-items:center;gap:10px}

.lang{display:flex;gap:2px;padding:3px;background:var(--blue-50);border-radius:999px}

.lang button,.lang a{
  border:0;background:transparent;font-family:inherit;font-weight:600;font-size:13px;color:var(--ink-500);
  padding:6px 12px;border-radius:999px;cursor:pointer;transition:.2s;
}

.lang button.on,.lang a.on{background:var(--surface);color:var(--brand-strong);box-shadow:var(--shadow-sm)}

.menu-btn{display:none}


/* ============================ HERO ============================ */

.hero{position:relative;padding:64px 0 90px;overflow:hidden}

.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}

.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}

.hero-bg .b1{width:520px;height:520px;background:var(--blue-100);top:-160px;right:-120px}

.hero-bg .b2{width:420px;height:420px;background:var(--red-100);bottom:-180px;left:-120px;opacity:.55}

.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;
}

.hero-copy{max-width:560px}

.hero h1{font-size:clamp(38px,5vw,62px);font-weight:800;margin:18px 0 0}

.hero h1 .hl{position:relative;color:var(--brand);white-space:nowrap}

.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.18em;background:var(--red-100);z-index:-1;border-radius:4px}

.hero p.lead{font-size:18px;color:var(--ink-700);margin-top:22px;max-width:500px;text-wrap:pretty}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px}

.trust span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-700)}

.trust .material-symbols-rounded{font-size:19px;color:var(--brand);font-variation-settings:'FILL' 1,'wght' 500}


/* ---- Hero visual: phone + qr ---- */

.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}

.phone{
  position:relative;z-index:2;width:286px;height:580px;border-radius:42px;
  background:linear-gradient(160deg,oklch(0.28 0.02 258),oklch(0.20 0.02 258));
  padding:12px;box-shadow:var(--shadow-lg);
  transform:rotate(-3deg);
}

.phone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:oklch(0.16 0.02 258);border-radius:999px;z-index:5}

.screen{
  position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;
  background:var(--paper-2);display:flex;flex-direction:column;
}

.scr-top{padding:34px 18px 16px;background:linear-gradient(160deg,var(--blue-600),var(--blue-700));color:#fff;text-align:center;position:relative}

.scr-top .tag{position:absolute;top:18px;right:16px;font-size:10px;font-weight:600;background:oklch(1 0 0 /.18);padding:4px 9px;border-radius:999px;display:flex;align-items:center;gap:4px}

.scr-top .tag .material-symbols-rounded{font-size:13px;font-variation-settings:'FILL' 1}

.avatar{
  width:78px;height:78px;border-radius:50%;margin:6px auto 10px;
  background:
    repeating-linear-gradient(45deg,oklch(0.88 0.04 255),oklch(0.88 0.04 255) 6px,oklch(0.92 0.03 255) 6px,oklch(0.92 0.03 255) 12px);
  border:3px solid #fff;display:grid;place-items:center;box-shadow:var(--shadow-sm);
}

.avatar .material-symbols-rounded{font-size:38px;color:var(--blue-600);font-variation-settings:'FILL' 1}

.scr-top h4{color:#fff;font-size:19px}

.scr-top .sub{font-size:12px;opacity:.85;margin-top:2px;font-weight:500}

.scr-body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}

.info-row{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:10px 12px}

.info-row .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--blue-50);color:var(--brand);flex-shrink:0}

.info-row .ic .material-symbols-rounded{font-size:18px;font-variation-settings:'FILL' 1}

.info-row.alert .ic{background:var(--red-100);color:var(--red-600)}

.info-row .lbl{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500)}

.info-row .val{font-size:12.5px;font-weight:600;color:var(--ink-900);line-height:1.25}

.scr-cta{margin-top:auto;padding-top:4px}

.scr-cta .call{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-weight:700;font-size:13.5px;padding:13px;border-radius:14px;box-shadow:0 10px 22px oklch(0.61 0.22 28 /.32)}

.scr-cta .call .material-symbols-rounded{font-size:18px;font-variation-settings:'FILL' 1}


/* qr badge floating */

.qr-badge{
  position:absolute;z-index:3;right:2px;bottom:54px;
  background:var(--surface);border-radius:20px;padding:14px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;gap:7px;width:140px;
  transform:rotate(4deg);
}

#qr{width:104px;height:104px;border-radius:10px;display:block}

.qr-badge .cap{font-size:10.5px;font-weight:600;color:var(--ink-700);display:flex;align-items:center;gap:5px}

.qr-badge .cap .material-symbols-rounded{font-size:15px;color:var(--brand)}

.scan-chip{
  position:absolute;z-index:4;left:-6px;top:64px;
  background:var(--ink-900);color:#fff;border-radius:14px;padding:10px 14px;
  display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-md);transform:rotate(-4deg);
}

.scan-chip .dot{width:9px;height:9px;border-radius:50%;background:oklch(0.78 0.16 150);box-shadow:0 0 0 0 oklch(0.78 0.16 150 / .6);animation:pulse 1.8s infinite}

@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(0.78 0.16 150 / .55)}70%{box-shadow:0 0 0 11px oklch(0.78 0.16 150 / 0)}100%{box-shadow:0 0 0 0 oklch(0.78 0.16 150 / 0)}}

.scan-chip .t{font-size:11px;font-weight:600;line-height:1.2}

.scan-chip .t b{font-weight:700}

.scan-chip .t small{display:block;opacity:.7;font-size:9.5px;font-weight:500}