/* ============================================================================
   Family-G engine layer.

   The theme stylesheet styles the marketing sections it shipped with. This file
   styles everything the FAMILY adds: the language picker, the mobile drawer,
   the contact rail, the tier switch, the plan card internals, the footer
   columns and the sub-page templates (legal prose, contact, 404).

   It is a separate file rather than edits inside style.css so a future theme
   refresh can replace style.css wholesale without taking the engine with it.
   Everything here uses the theme's own custom properties, so a palette change
   in :root reaches both layers.
   ========================================================================== */

/* The theme asked for Sora + Plus Jakarta Sans from the Google CDN. Dropped:
   an external font request on every page load is a third-party dependency and
   a render-blocking round trip, and NEITHER face ships a Greek subset — so el
   fell back to a system font anyway while the other eleven paid the cost. A
   system stack covers all twelve languages natively at zero bytes. */
:root {
  --font-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- a11y --- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* ---------------------------------------------------------------- icons -- */
/* g_icon() emits <svg class="ico"> with no intrinsic size. The theme only sizes
   SVGs inside components it shipped (.btn svg, .icon-btn svg), so an engine
   icon anywhere else rendered at the SVG default — which is how eight FAQ
   chevrons became full-width chevrons and added ~9,000px to the page. */
.ico { width: 1em; height: 1em; flex: none; }
.faq-caret { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.faq-item.open .faq-caret { transform: rotate(180deg); }
.check .ico { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- logo --- */
.logo-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-mark { flex: none; width: auto; }
.logo-word {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
}
.logo-word-a { color: #fff; }
.logo-word-b { color: var(--red); }
.logo-lockup--header .logo-mark { height: 34px; }
.logo-lockup--header .logo-word { font-size: 23px; }
.logo-lockup--drawer .logo-mark { height: 30px; }
.logo-lockup--drawer .logo-word { font-size: clamp(15px, 4.6vw, 20px); }
.logo-lockup--footer .logo-mark { height: 36px; }
.logo-lockup--footer .logo-word { font-size: 25px; }

/* ------------------------------------------------------- language picker - */
.lang-picker { position: relative; }
.lang-picker > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .05); color: var(--text); font-size: 14px; font-weight: 600;
}
.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary:hover { background: rgba(255, 255, 255, .09); }
.lang-picker .lang-name { letter-spacing: -0.01em; }
.lang-picker .lang-caret { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lang-picker[open] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 90;
  display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px;
  padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--bg-2); box-shadow: var(--shadow-lg);
}
.lang-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 14px;
}
.lang-menu a:hover { background: rgba(255, 255, 255, .07); }
.lang-menu a.is-active { background: rgba(201, 14, 14, .18); color: #fff; font-weight: 600; }
.lang-menu svg, .drawer-lang-grid svg { width: 20px; height: 14px; border-radius: 2px; flex: none; }

/* -------------------------------------------------------- mobile drawer -- */
.hamburger { display: none; }
.mobile-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px); z-index: 110;
}
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 120;
  background: var(--bg-1); border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg); padding: 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
}
.mobile-drawer[hidden], .mobile-drawer-overlay[hidden] { display: none; }
.mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-drawer-close {
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px;
  display: inline-flex; border-radius: var(--r-sm);
}
.mobile-drawer-close:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: 13px 6px; color: var(--text); text-decoration: none; font-size: 16px;
  font-weight: 600; border-bottom: 1px solid var(--line);
}
.mobile-nav a[aria-current="page"] { color: var(--red); }
.drawer-lang-label {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 10px;
}
.drawer-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.drawer-lang-grid a {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font-size: 13.5px;
}
.drawer-lang-grid a.is-active { background: rgba(201, 14, 14, .18); font-weight: 600; }
.mobile-drawer-cta { display: grid; gap: 10px; margin-top: auto; }
.mobile-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 18px; border-radius: var(--r-pill); background: var(--red); color: #fff;
  font-weight: 700; text-decoration: none;
}
.mobile-nav-cta--tg { background: #229ED9; }

/* --------------------------------------------------------- contact rail -- */
.contact-rail {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
}
.rail-btn {
  width: 52px; height: 52px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff;
  box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform .18s var(--ease);
}
.rail-btn:hover { transform: translateY(-2px) scale(1.04); }
.rail-btn svg { width: 26px; height: 26px; }
.rail-wa { background: #25D366; }
.rail-tg { background: #229ED9; }

/* ----------------------------------------------------------- hero extras - */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.badge-icon--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #1a1213 !important;
}

/* ------------------------------------------------------------ tier switch */
/* Equal grid columns, not flex: flex sizes each button to its own label, so the
   middle button's centre drifts off the section's centre by however much the
   words differ in length — and it differs again in all twelve languages. */
.tier-switch {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  justify-content: center; gap: 6px; margin: 0 auto 34px; width: max-content;
  max-width: 100%; padding: 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
}
.tier-btn {
  padding: 11px 26px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 14.5px;
  font-weight: 700; white-space: nowrap; transition: background .18s var(--ease);
}
.tier-btn:hover { color: var(--text); }
.tier-btn.is-active { background: var(--red); color: #fff; }
@media (max-width: 430px) { .tier-btn { padding: 10px 12px; font-size: 13.5px; letter-spacing: -0.01em; } }

/* ----------------------------------------------------------- plan cards -- */
/* The theme's .pricing-card sets overflow:hidden, which clips a badge that
   overhangs the top edge. Only the featured card carries one, so lift the clip
   there and give the grid room for the overhang instead of letting it collide
   with the tier switch above. */
.pricing-grid { padding-top: 14px; }
.pricing-card.is-featured { overflow: visible; }

.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1a1213;
  padding: 6px 16px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800;
  letter-spacing: .03em; white-space: nowrap; box-shadow: var(--shadow-sm);
}
.price-per { color: var(--muted); font-size: 14px; margin-top: -4px; margin-bottom: 18px; }
.plan-features { list-style: none; display: grid; gap: 11px; margin: 18px 0 24px; text-align: left; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); }
.plan-features .check {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(106, 156, 137, .22); color: var(--teal-2);
}
.plan-features .check svg { width: 12px; height: 12px; }
.plan-cta { width: 100%; justify-content: center; }
.pricing-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 26px; }

/* --------------------------------------------------------- device list --- */
.device-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 28px; }
.device-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.device-list .check {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(201, 14, 14, .18); color: var(--red-2);
}
.device-list .check svg { width: 12px; height: 12px; }
@media (max-width: 560px) { .device-list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- testimonials ---- */
.testi-text { color: var(--text); font-size: 15.5px; line-height: 1.65; margin: 14px 0 20px; }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red-deep)); flex: none;
}
.testi-name { font-weight: 700; color: #fff; font-size: 15px; }
.testi-loc { color: var(--muted-2); font-size: 13px; }

/* ------------------------------------------------------------- closing --- */
.closing-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-row.center { justify-content: center; }

/* -------------------------------------------------------------- footer --- */
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding: 64px 0 44px;
}
.footer-brand-col { max-width: 360px; }
.footer-blurb { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 16px 0 20px; }
.footer-contact { display: grid; gap: 10px; }
.footer-contact a {
  display: inline-flex; align-items: center; gap: 9px; color: var(--text);
  text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.footer-contact a:hover { color: var(--gold); }
.footer-contact svg { width: 18px; height: 18px; flex: none; }
.footer-col h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  color: var(--muted-2); font-size: 13px;
}
.footer-disclaimer { max-width: 640px; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 0 32px; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Sub-page templates (contact, legal prose, 404). These pages carry no theme
   markup of their own — they are the family's, so all of their styling is here.
   ========================================================================== */
.page-hero { padding: 130px 0 56px; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.page-hero--slim { padding-bottom: 40px; }
.page-hero-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; text-align: center; }
.page-hero-eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 14px;
}
.page-hero-title {
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 50px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.03em; color: #fff; text-wrap: balance;
}
.page-hero-lede {
  color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 700px;
  margin: 16px auto 0; text-wrap: pretty;
}

.prose-section { padding: 56px 0 80px; }
.prose-inner {
  max-width: 780px; margin: 0 auto; padding: 0 24px; color: var(--text);
  font-size: 16px; line-height: 1.8;
}
.prose-inner h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff;
  margin: 36px 0 12px; letter-spacing: -0.01em;
}
.prose-inner h2:first-child { margin-top: 0; }
.prose-inner p { margin-bottom: 16px; color: var(--muted); }
.prose-inner a { color: var(--gold); }

.section-header { text-align: center; max-width: 760px; margin: 0 auto 44px; padding: 0 24px; }
.section-main-title {
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px); font-weight: 800;
  color: #fff; letter-spacing: -0.02em; text-wrap: balance;
}

.services-section, .tiles-section, .faq-section, .contact-section { padding: 64px 0; }
.services-container, .tiles-inner, .faq-container, .contact-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
}
.services-grid, .tiles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.service-card, .tile {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 26px; transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.service-card:hover, .tile:hover { transform: translateY(-3px); border-color: rgba(201, 14, 14, .45); }
.service-icon {
  width: 46px; height: 46px; border-radius: var(--r-md); display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
  background: rgba(201, 14, 14, .16); color: var(--red-2);
}
.service-icon svg { width: 22px; height: 22px; }
.service-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.service-desc { color: var(--muted); font-size: 14.5px; line-height: 1.7; }

.pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pill-list li {
  padding: 9px 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2); font-size: 14px; color: var(--text);
}
.pill-list--compact li { padding: 7px 13px; font-size: 13px; }

.faq-list { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }
.faq-question {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.faq-answer { color: var(--muted); font-size: 15px; line-height: 1.75; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.contact-card {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 28px; text-align: center;
}
.contact-card--primary { border-color: rgba(37, 211, 102, .45); background: rgba(37, 211, 102, .07); }
.contact-card-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); color: var(--text);
}
.contact-card-icon svg { width: 24px; height: 24px; }
.contact-card-value { font-weight: 700; color: #fff; font-size: 16px; margin-bottom: 6px; }
.contact-card-desc { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
.contact-hours { margin-top: 34px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.8; }

.cta-band { padding: 64px 0; background: linear-gradient(135deg, var(--bg-3), var(--bg-0)); }
.cta-band-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.cta-band-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.e404-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* ---------------------------------------- whatsapp screenshot wall (wr) ---
   Ported from the Family-C section on codeiptv.store — same coverflow geometry,
   same easing, same confetti — repainted in this family's palette. The source
   was WhatsApp green throughout; here the section chrome (glow, eyebrow, dots,
   thumbs, buttons, lightbox frame) is the house red, and only ONE thing stays
   green: .wr-bar, the strip drawn across the top of each phone. That strip is
   WhatsApp's own header, sitting above a screenshot full of green chat bubbles.
   Painting it red would make the picture look edited, which is the one thing a
   section of photographs cannot afford.

   Everything is namespaced .wr- so it cannot collide with the theme, and the
   whole block sits under one .wr scope so a palette change is two lines.
   -------------------------------------------------------------------------- */
.wr {
  --wr-accent: var(--red-2);
  --wr-rgb: 229, 22, 22;              /* --red-2 as a triple, for rgba() */
  position: relative;
  overflow: hidden;
  /* Bridges the sections either side. The wall sits between the hero, whose
     gradient ends at #1d1112, and the pricing section (.section-darker), which
     opens at #1a0f10 — move this section and these two stops move with it. */
  background:
    radial-gradient(62% 78% at 50% 0%, rgba(var(--wr-rgb), .16), transparent 62%),
    linear-gradient(180deg, #1d1112 0%, #140a0b 58%, #1a0f10 100%);
}
.wr::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(var(--wr-rgb), .10) 0, transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(var(--wr-rgb), .07) 0, transparent 42%);
}
.wr > .container { position: relative; z-index: 1; }

.wr-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.wr-eyebrow .ico { width: 15px; height: 15px; }
.wr-hl { color: var(--wr-accent); text-shadow: 0 0 26px rgba(var(--wr-rgb), .45); }

.wr-meta {
  display: flex; justify-content: center; align-items: center;
  gap: 18px; margin-top: 18px; flex-wrap: wrap;
}
.wr-stars { display: inline-flex; gap: 3px; color: var(--gold); }
.wr-stars .ico { width: 18px; height: 18px; }   /* solid: see G_ICONS_FILL */

/* -- the stage ------------------------------------------------------------
   TWO layouts. The default is a plain horizontal scroll strip, which is what
   renders with JavaScript off or before main.js runs. main.js then adds .is-3d
   and the cards become the absolutely-positioned coverflow. Built the other way
   round — 3D by default, downgraded by script — a no-JS visitor gets nine cards
   stacked on the same 50%/50% origin, which is what the source template does. */
.wr-flow { position: relative; max-width: 1180px; margin: 54px auto 28px; }
.wr-stage {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.wr-card {
  flex: 0 0 auto; width: 240px; height: 480px; scroll-snap-align: center;
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  padding: 0; margin: 0; cursor: pointer; display: block; border-radius: 30px;
}
.wr-flow.is-3d { height: 620px; perspective: 1600px; perspective-origin: 50% 50%; }
.wr-flow.is-3d .wr-stage {
  display: block; overflow: visible; padding: 0; height: 100%;
  scroll-snap-type: none; transform-style: preserve-3d;
}
.wr-flow.is-3d .wr-card {
  position: absolute; top: 50%; left: 50%;
  width: 280px; height: 560px; margin: -280px 0 0 -140px;
  transform-origin: 50% 50%;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .6s, filter .6s;
}

.wr-phone {
  display: block; position: relative; width: 100%; height: 100%;
  border-radius: 30px; padding: 12px 8px 8px; overflow: hidden;
  background: linear-gradient(160deg, #2a2c35, #15161c);
  border: 2px solid #1a1b22;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
  transition: box-shadow .6s;
}
.wr-phone::before {                    /* the notch */
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 17px; background: #0a0a0c; border-radius: 0 0 12px 12px; z-index: 3;
}
.wr-screen {
  display: block; position: relative; width: 100%; height: 100%;
  border-radius: 22px; overflow: hidden; background: #0a0a0c;
}
.wr-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wr-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #075e54, #0a7568);   /* WhatsApp, on purpose */
  font-family: var(--font-body); font-weight: 600; font-size: 12px; color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.wr-bar .ico { width: 14px; height: 14px; color: #dcf8c6; }
.wr-card.is-active .wr-phone {
  box-shadow:
    0 40px 80px -10px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .10),
    0 0 80px rgba(var(--wr-rgb), .55),
    0 0 160px rgba(var(--wr-rgb), .25);
}

.wr-controls { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.wr-btn {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); color: var(--text);
  display: grid; place-items: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.wr-btn:hover { background: var(--wr-accent); border-color: var(--wr-accent); color: #fff; transform: translateY(-2px); }
.wr-btn .ico { width: 18px; height: 18px; display: block; }
/* Playing is the default state, so the button offers Pause. */
.wr-i-play { display: none; }
.wr-controls.is-paused .wr-i-play { display: block; }
.wr-controls.is-paused .wr-i-pause { display: none; }

.wr-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.wr-dots button {
  position: relative; width: 24px; height: 24px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.wr-dots button::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18);
  transition: background .25s, width .25s, border-radius .25s;
}
.wr-dots button.is-active::before { background: var(--wr-accent); width: 28px; border-radius: 5px; }

.wr-thumbs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-top: 30px; padding-top: 26px; border-top: 1px dashed rgba(var(--wr-rgb), .22);
}
.wr-thumb {
  width: 62px; height: 62px; border-radius: 12px; overflow: hidden; cursor: pointer;
  padding: 0; background: none; border: 2px solid transparent; opacity: .6;
  transition: border-color .25s, transform .25s, box-shadow .25s, opacity .25s;
}
.wr-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.wr-thumb:hover { transform: scale(1.08); opacity: 1; }
.wr-thumb.is-active {
  border-color: var(--wr-accent); opacity: 1;
  box-shadow: 0 6px 16px -4px rgba(var(--wr-rgb), .6);
}

.wr-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wr-confetti i {
  position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0;
  animation: wrConfetti 8s linear infinite;
}
.wr-confetti i:nth-child(odd)  { background: var(--wr-accent); }
.wr-confetti i:nth-child(even) { background: var(--gold); }
.wr-confetti i:nth-child(3n)   { background: var(--red); }
.wr-confetti i:nth-child(4n)   { background: var(--gold-2); transform: rotate(45deg); }
.wr-confetti i:nth-child(5n)   { width: 6px; height: 12px; }
@keyframes wrConfetti {
  0%   { transform: translateY(-20px) rotate(0);      opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(620px) rotate(540deg); opacity: 0; }
}

.wr-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 920px; margin: 52px auto 0;
}
.wr-feature {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(var(--wr-rgb), .07); border: 1px solid rgba(var(--wr-rgb), .22);
}
.wr-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--wr-rgb), .18); color: var(--wr-accent);
}
.wr-ico .ico { width: 21px; height: 21px; }
.wr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wr-txt strong { color: #fff; font-family: var(--font-display); font-size: 14.5px; }
.wr-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* -- lightbox -------------------------------------------------------------- */
.wr-lb {
  position: fixed; inset: 0; z-index: 100; padding: 40px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .92); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s;
}
.wr-lb[hidden] { display: none; }         /* [hidden] loses to display:grid */
.wr-lb.is-open { opacity: 1; }
.wr-lb img {
  max-width: 90vw; max-height: 85vh; border-radius: 18px;
  border: 4px solid var(--wr-accent);
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .8), 0 0 60px rgba(var(--wr-rgb), .4);
  transform: scale(.92); transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.wr-lb.is-open img { transform: scale(1); }
.wr-lb-close {
  position: absolute; top: 22px; right: 22px; width: 46px; height: 46px;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--line-2); color: #fff;
  transition: background .25s;
}
.wr-lb-close:hover { background: rgba(255, 255, 255, .2); }
.wr-lb-close .ico { width: 21px; height: 21px; }

@media (max-width: 1080px) {
  .wr-flow.is-3d { height: 545px; perspective: 1100px; }
  .wr-flow.is-3d .wr-card { width: 240px; height: 480px; margin: -240px 0 0 -120px; }
}
@media (max-width: 620px) {
  .wr-flow { margin-top: 40px; }
  .wr-flow.is-3d { height: 468px; }
  .wr-flow.is-3d .wr-card { width: 202px; height: 404px; margin: -202px 0 0 -101px; }
  .wr-card { width: 200px; height: 400px; }
  .wr-features { grid-template-columns: 1fr; margin-top: 40px; }
  .wr-thumb { width: 52px; height: 52px; }
  .wr-lb { padding: 18px; }
  .wr-lb-close { top: 12px; right: 12px; }
}

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .05); color: var(--text); cursor: pointer;
  }
  .lang-picker { display: none; }
}
@media (max-width: 620px) {
  /* The theme's header bar is a flex row with gap:24px and 24px of padding,
     sized for a desktop nav. On a 390px phone the brand, the CTA and the
     hamburger together ran 20px past the viewport and gave the whole document
     a horizontal scrollbar — the one layout bug that makes a site feel broken
     on the device most of this traffic arrives on. */
  .site-header .container-wide { gap: 10px; padding: 0 12px; }
  .nav-actions { gap: 8px; margin-left: 0; min-width: 0; }
  .nav-cta { padding: 10px 14px; margin-left: 0; font-size: 13px; white-space: nowrap; }
  .brand { min-width: 0; }
  .logo-lockup--header .logo-mark { height: 28px; }
  .logo-lockup--header .logo-word { font-size: clamp(15px, 4.8vw, 19px); }

  .page-hero { padding: 110px 0 44px; }
  .contact-rail { right: 12px; bottom: 12px; }
  .rail-btn { width: 46px; height: 46px; }
  .rail-btn svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}