.alex-catalog{max-width:1120px;margin:auto;padding:48px 24px}.alex-catalog h2{font-size:28px;margin-bottom:24px}.alex-catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}.alex-catalog-grid article{border:1px solid #dde3ee;border-radius:20px;padding:24px;background:#fff}.alex-catalog-grid img{width:100%;height:180px;object-fit:cover}.alex-catalog-grid h3{font-weight:700;font-size:20px}.alex-catalog-grid a{color:#0b1e3f}.wp-block-image img{max-width:100%;height:auto}main>.wp-block-paragraph,main>p,main>.wp-block-heading,main>.wp-block-image{max-width:1000px;margin:24px auto;padding:0 24px}

.alex-new-content{max-width:1100px;margin:0 auto;padding:48px 20px}.alex-new-content>h1{font-size:clamp(30px,4vw,48px);font-weight:700;margin-bottom:24px}.alex-new-content>p{margin:1em 0;line-height:1.7}

/* ============================================================================
   OTYPRO brand layer (2026-09-22)
   Dark "chrome" header that matches the metallic/electric-blue OTYPRO logo,
   logo glow + one-off shine sweep, footer logo, hero emblem watermark.
   Wins over alex-bundle.css by load order + specificity. To go back to the
   white header, delete this block.
   ============================================================================ */
:root{
  --oty-deep:#060e22;
  --oty-blue:#1e8bff;
  --oty-blue-2:#4da3ff;
  --oty-glow:rgba(30,139,255,.55);
}

/* ---- header ------------------------------------------------------------- */
body #topbar,
body.ios-chrome #topbar{
  background:rgba(6,14,34,.97);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom:0;
}
body #topbar::after{ /* thin electric edge under the bar */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(30,139,255,.15) 15%,var(--oty-blue) 50%,rgba(30,139,255,.15) 85%,transparent 100%);
  box-shadow:0 0 12px 1px rgba(30,139,255,.35);
  opacity:.8;
}
body #topbar.shadow-card,
body.ios-chrome #topbar.shadow-card{ box-shadow:0 10px 30px -14px rgba(0,0,0,.6); }

body.ios-chrome #topbar nav[aria-label="Primary"] a,
body #topbar nav[aria-label="Primary"] a{ color:rgba(255,255,255,.88); }
body.ios-chrome #topbar nav[aria-label="Primary"] a:hover,
body #topbar nav[aria-label="Primary"] a:hover{ color:var(--oty-blue-2); text-shadow:0 0 12px rgba(30,139,255,.55); }
body #topbar nav a.nav-active{ color:#fff; }
body #topbar nav a.nav-active::after{ background:var(--oty-blue); box-shadow:0 0 10px var(--oty-glow); }
body.ios-chrome #topbar [data-raxo-header-sms],
body #topbar [data-raxo-header-sms]{ color:#fff; border-color:rgba(255,255,255,.25); }
body.ios-chrome #topbar [data-raxo-header-sms]:hover,
body #topbar [data-raxo-header-sms]:hover{ color:var(--oty-blue-2); border-color:var(--oty-blue); box-shadow:0 0 14px -2px var(--oty-glow); }
body.ios-chrome #menuToggle,
body #menuToggle{ color:#fff; border-color:rgba(255,255,255,.25); }
body #topbar .raxo-navdd-caret{ color:currentColor; }

/* ---- logo --------------------------------------------------------------- */
body.ios-chrome #topbar .logo-dark,
body #topbar .logo-dark{ display:none; }
body.ios-chrome #topbar .logo-light,
body #topbar .logo-light{
  display:block; height:36px; width:auto;
  filter:drop-shadow(0 0 6px rgba(30,139,255,.35));
  transition:filter .35s ease, transform .35s ease;
}
@media (min-width:768px){ body.ios-chrome #topbar .logo-light, body #topbar .logo-light{ height:44px; } }
#topbar a[aria-label$="home"]{ position:relative; isolation:isolate; }
#topbar a[aria-label$="home"]:hover .logo-light,
#topbar a[aria-label$="home"]:focus-visible .logo-light{
  filter:drop-shadow(0 0 10px rgba(30,139,255,.75)) drop-shadow(0 0 22px rgba(30,139,255,.35));
  transform:translateY(-1px);
}
/* shine: a light band clipped to the logo's own pixels */
#topbar a[aria-label$="home"]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) no-repeat;
  background-size:250% 100%; background-position:130% 0;
  -webkit-mask:url(assets/brand/otypro-logo-light.webp) left center/auto 100% no-repeat;
          mask:url(assets/brand/otypro-logo-light.webp) left center/auto 100% no-repeat;
  mix-blend-mode:screen;
  animation:oty-shine 1.6s .5s ease-out 1 both;
}
#topbar a[aria-label$="home"]:hover::after{ animation:oty-shine 1.1s ease-out 1 both; }
@keyframes oty-shine{ from{ background-position:130% 0; } to{ background-position:-30% 0; } }

/* ---- footer ------------------------------------------------------------- */
footer a[aria-label$="home"] img{
  height:44px; width:auto;
  filter:drop-shadow(0 0 8px rgba(30,139,255,.3));
}

/* ---- hero: emblem watermark + electric glow ----------------------------- */
main > section.bg-navy:first-child{ position:relative; overflow:hidden; isolation:isolate; }
main > section.bg-navy:first-child > *{ position:relative; z-index:1; }
main > section.bg-navy:first-child::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(760px,90vw); aspect-ratio:600/431;
  right:-14%; top:50%; transform:translateY(-50%) rotate(-8deg);
  background:url(assets/brand/otypro-emblem.webp) center/contain no-repeat;
  opacity:.09;
  filter:drop-shadow(0 0 40px rgba(30,139,255,.6));
  animation:oty-float 14s ease-in-out infinite alternate;
}
main > section.bg-navy:first-child::after{
  content:""; position:absolute; z-index:0; pointer-events:none; inset:auto -10% -40% auto;
  width:70%; height:90%;
  background:radial-gradient(closest-side,rgba(30,139,255,.22),transparent 70%);
}
@keyframes oty-float{ from{ transform:translateY(-52%) rotate(-8deg); } to{ transform:translateY(-46%) rotate(-5deg); } }
@media (max-width:767px){
  main > section.bg-navy:first-child::before{ right:-35%; top:18%; opacity:.07; width:110vw; }
}
@media (prefers-reduced-motion:reduce){
  #topbar a[aria-label$="home"]::after,
  main > section.bg-navy:first-child::before{ animation:none; }
}

/* ---- CTA buttons: never wrap a label (or the phone number) onto two lines ---- */
@media (min-width:768px){
  /* bottom "Need a key / Skip the article" bands: the button pair sits in a narrow
     5/12 column, so stack the two buttons instead of squeezing them side by side */
  .md\:col-span-5.grid.sm\:grid-cols-2{ grid-template-columns:1fr; max-width:26rem; margin-left:auto; }
  .raxo-actioncard a.btn, .md\:col-span-5.grid a.btn{ white-space:nowrap; }
}
a.btn.h-14{ height:auto; min-height:3.5rem; padding:.75rem 1.25rem; line-height:1.25; }
a.btn svg{ flex:none; }

/* ── Language switcher (i18n) ───────────────────────────── */
.alex-lang{display:inline-flex;align-items:center;gap:2px;margin-left:auto;margin-right:.25rem;padding:2px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font:600 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;flex:none}
.alex-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 6px;border-radius:999px;color:rgba(255,255,255,.72);text-decoration:none;transition:background-color .15s,color .15s}
.alex-lang a:hover{color:#fff;background:rgba(255,255,255,.1)}
.alex-lang a.is-current{color:#060e22;background:#fff}
@media (min-width:768px){.alex-lang{margin-left:.75rem;order:9}}

/* ── Longer ES / RU labels ─────────────────────────────── */
#topbar nav a{white-space:nowrap}
@media (min-width:768px) and (max-width:1535.98px){#topbar nav{gap:.8rem;font-size:13.5px}#topbar>div{gap:.6rem}}
@media (min-width:768px) and (max-width:1100px){#topbar nav{gap:.6rem;font-size:12.5px}}
html:not([lang="en"]) .raxo-actioncard .sm\:grid-cols-2{grid-template-columns:1fr}
html:not([lang="en"]) .raxo-actioncard a.btn{white-space:normal;text-align:center}
#topbar>div{max-width:80rem}
@media (min-width:768px) and (max-width:1280px){.alex-lang a{min-width:26px;padding:0 4px}#topbar a[href^="https://m.me"],#topbar a[href="#"]{padding-left:.6rem;padding-right:.6rem}}
@media (min-width:768px) and (max-width:1150px){#topbar>div>div:last-child>a:first-child{display:none!important}}

/* Brand tiles without a logo file: the name set in type, same square as the logo tiles. */
.logo-tile--word { aspect-ratio: 1 / 1; }
.logo-tile--word .logo-word {
  display: block; width: 100%; text-align: center; color: #0B1E3F;
  font-weight: 800; letter-spacing: .02em; line-height: 1.1;
  font-size: clamp(18px, 2.6vw, 26px); overflow-wrap: anywhere;
}
.logo-tile--word:hover .logo-word { color: #FF6B1A; }

/* Payment badge (text) — Bizum has no icon in the payment row */
.pay-row .pay-badge { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(11, 30, 63, .12); background: #fff; color: #0B1E3F; font-size: 13px; font-weight: 800; letter-spacing: .01em; line-height: 1; }

/* New compositions use the same site palette; imported fragments keep their original markup. */
.alex-visual-card{padding:24px;border:1px solid #dde3ee;border-radius:20px;background:#fff}
.alex-visual-group>p,.alex-visual-card>p{margin:1em 0}
.alex-visual-button{display:inline-flex;align-items:center;padding:14px 24px;border-radius:16px;background:#ce4700;color:#fff;font-weight:700}
.alex-visual-faq{padding:20px;border-bottom:1px solid #dde3ee}
.alex-visual-faq summary{cursor:pointer;font-weight:700}

main.alex-content-empty{padding:0!important;margin:0!important;min-height:0!important;height:auto!important}