:root {
   color-scheme: light;
   --navy: #081b35;
   --navy-2: #112d52;
   --brand-red: #c92534;
   --brand-red-hover: #ac1c29;
   --ink: #0d2544;
   --muted: #63728a;
   --page: #f1f4f9;
   --card: #fff;
   --card-soft: #f7f9fc;
   --line: #e4e9f1;
   --soft-blue: #e7f0fc;
   --icon-blue: #113562;
   --shadow:
      0 12px 34px rgba(16, 38, 68, 0.055), 0 2px 9px rgba(16, 38, 68, 0.027);
   --radius-xl: 26px;
   --focus: #ffb845;
   font-synthesis: none;
}
:root[data-theme="dark"] {
   color-scheme: dark;
   --ink: #f6f9ff;
   --muted: #adbad1;
   --page: #081426;
   --card: #102442;
   --card-soft: #162d4b;
   --line: #294467;
   --soft-blue: #1c3b62;
   --icon-blue: #c2dcff;
   --shadow: 0 12px 38px rgba(0, 0, 0, 0.19);
}
*,
*::before,
*::after {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   margin: 0;
   min-width: 320px;
   padding-bottom: max(22px, env(safe-area-inset-bottom));
   background: var(--page);
   color: var(--ink);
   font:
      16px/1.5 system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
   -webkit-font-smoothing: antialiased;
}
body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background:
      radial-gradient(
         ellipse 440px 450px at 9% 0%,
         rgba(32, 96, 154, 0.085),
         transparent 95%
      ),
      radial-gradient(
         ellipse 430px 380px at 94% 30%,
         rgba(201, 37, 52, 0.05),
         transparent 95%
      );
}
button,
input {
   font: inherit;
}
button {
   cursor: pointer;
}
a {
   color: inherit;
}
a,
button {
   -webkit-tap-highlight-color: transparent;
}
:focus-visible {
   outline: 3px solid var(--focus);
   outline-offset: 3px;
}
.svg-library {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
}
.icon {
   width: 21px;
   height: 21px;
   flex: 0 0 auto;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.9;
   stroke-linecap: round;
   stroke-linejoin: round;
}
.shell {
   width: min(100% - 32px, 600px);
   margin-inline: auto;
   padding-top: 40px;
}
.skip-link {
   position: fixed;
   top: -80px;
   left: 20px;
   z-index: 200;
   color: #fff;
   background: var(--navy);
   border-radius: 9px;
   padding: 10px 16px;
   text-decoration: none;
}
.skip-link:focus {
   top: 14px;
}

/* Branded compact header */
.topbar {
   display: flex;
   min-height: 88px;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 12px 4px;
}
.brand {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   flex: 0 1 178px;
   min-width: 0;
}
.brand img {
   display: block;
   max-width: 100%;
   width: 172px;
   height: auto;
}
.topbar-actions {
   display: flex;
   align-items: center;
   gap: 10px;
}
.place-indicator {
   display: flex;
   align-items: center;
   gap: 7px;
   color: var(--muted);
   font-weight: 700;
   font-size: 12px;
   white-space: nowrap;
}
.status-dot {
   width: 7px;
   height: 7px;
   background: var(--brand-red);
   box-shadow: 0 0 0 3px rgba(201, 37, 52, 0.09);
   border-radius: 50%;
}
.theme-switch {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: var(--card);
   color: var(--ink);
   border: 1px solid var(--line);
}
.theme-switch:hover {
   border-color: #b7c7d9;
}
.theme-switch .icon {
   width: 18px;
   height: 18px;
}
.theme-icon-light {
   display: none;
}
:root[data-theme="dark"] .theme-icon-light {
   display: block;
}
:root[data-theme="dark"] .theme-icon-dark {
   display: none;
}
:root[data-theme="dark"] .brand img {
   background: #fff;
   border-radius: 9px;
   padding: 3px;
}

/* Hero */
.hero {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   border-radius: var(--radius-xl);
   background: linear-gradient(135deg, #07182e 0%, #09254a 64%, #143b66 100%);
   color: #fff;
   box-shadow: 0 17px 40px rgba(6, 28, 54, 0.14);
}
.hero::before {
   content: "";
   position: absolute;
   inset: 0;
   opacity: 0.43;
   pointer-events: none;
   background:
      radial-gradient(
         circle 230px at 106% -8%,
         rgba(227, 39, 54, 0.42),
         transparent
      ),
      linear-gradient(
         142deg,
         transparent 54%,
         rgba(255, 255, 255, 0.035) 54.1%,
         transparent 55%
      );
}
.hero-orbit {
   position: absolute;
   width: 360px;
   height: 360px;
   right: -184px;
   top: -183px;
   border: 1px solid rgba(255, 255, 255, 0.085);
   border-radius: 50%;
}
.hero-orbit::before,
.hero-orbit::after {
   content: "";
   position: absolute;
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 50%;
}
.hero-orbit::before {
   inset: 29px;
}
.hero-orbit::after {
   inset: 64px;
}
.hero-watermark {
   position: absolute;
   right: -59px;
   top: 71px;
   width: 200px;
   height: 206px;
   background: url("assets/logo-mark.webp") center/contain no-repeat;
   opacity: 0.085;
   filter: grayscale(1) brightness(3);
   pointer-events: none;
}
.hero-content {
   position: relative;
   z-index: 1;
   padding: 34px 29px 29px;
}
.eyebrow {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #d9e8fa;
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.105em;
}
.eyebrow-line {
   display: block;
   width: 26px;
   height: 3px;
   background: #ed3749;
   border-radius: 10px;
}
h1 {
   max-width: 460px;
   margin: 16px 0 11px;
   color: #fff;
   font-size: clamp(30px, 7.5vw, 40px);
   line-height: 1.16;
   letter-spacing: -0.044em;
   font-weight: 850;
}
h1 span {
   display: block;
   color: #ff6672;
}
.hero-description {
   max-width: 470px;
   margin: 0;
   color: #d7e2f1;
   font-size: 15.5px;
   line-height: 1.63;
}
.quick-facts {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin-top: 20px;
}
.quick-facts span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 6px 9px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 7px;
   background: rgba(255, 255, 255, 0.075);
   color: #e5eef8;
   font-size: 11px;
   font-weight: 650;
   line-height: 1.1;
}
.quick-facts .icon {
   color: #ff6775;
   width: 14px;
   height: 14px;
   stroke-width: 3;
}
.hero-cta {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 25px;
}
.hero-bg {
   background: linear-gradient(
      146deg,
      #ff001f 0%,
      #fd364b 25%,
      #305f9a 72%,
      #155392 100%
   );

   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 52px;
   padding: 13px 15px;
   border: 1px solid transparent;
   border-radius: 13px;
   font-size: 14px;
   font-weight: 800;
   text-decoration: none;
   text-align: center;
   transition:
      transform 0.2s,
      background-color 0.2s,
      border-color 0.2s;
}
.button:hover {
   transform: translateY(-2px);
}
.button-primary {
   background: var(--brand-red);
   color: #fff;
   box-shadow: 0 7px 18px rgba(180, 28, 44, 0.24);
}
.button-primary:hover {
   background: var(--brand-red-hover);
}
.button-primary .icon {
   width: 19px;
   height: 19px;
}
.button-tail {
   margin-left: auto;
}
.button-outline {
   border-color: rgba(255, 255, 255, 0.36);
   background: rgba(255, 255, 255, 0.07);
   color: #fff;
}
.button-outline:hover {
   background: rgba(255, 255, 255, 0.14);
}
.button-outline .icon {
   width: 18px;
   height: 18px;
}

/* Link hub */
.section {
   margin-top: 35px;
}
.section-heading {
   margin: 0 4px 16px;
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 12px;
}
.section-kicker {
   display: block;
   color: var(--brand-red);
   font-weight: 850;
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 6px;
}
h2 {
   margin: 0;
   font-size: clamp(23px, 5vw, 26px);
   line-height: 1.25;
   font-weight: 820;
   letter-spacing: -0.035em;
}
.section-heading > p {
   font-size: 12px;
   line-height: 1.5;
   color: var(--muted);
   margin: 0 0 2px;
   max-width: 142px;
   text-align: right;
}
.social-list {
   display: grid;
   gap: 10px;
}
.social-link {
   position: relative;
   display: flex;
   align-items: center;
   gap: 14px;
   min-height: 81px;
   padding: 13px 15px;
   border-radius: 18px;
   background: var(--card);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   text-decoration: none;
   color: var(--ink);
   transition:
      transform 0.18s,
      border-color 0.18s,
      box-shadow 0.18s;
}
.social-link:hover {
   border-color: #c6d3e5;
   transform: translateY(-2px);
   box-shadow: 0 12px 26px rgba(13, 44, 81, 0.09);
}
.social-link:active {
   transform: translateY(0);
}
.social-link-button {
   width: 100%;
   text-align: left;
}
.social-icon {
   width: 49px;
   height: 49px;
   display: grid;
   place-items: center;
   flex: 0 0 49px;
   border-radius: 14px;
}
.social-icon .icon {
   width: 24px;
   height: 24px;
}
.social-website {
   background: #e4eefb;
   color: #0d427a;
}
.social-instagram {
   background: linear-gradient(135deg, #fbe8f4, #fce5dd);
   color: #b3316d;
}
.social-telegram {
   background: #e0f4ff;
   color: #188fcb;
}
.social-viber {
   background: #f0e9ff;
   color: #7553bc;
}
.social-review {
   background: #fff4e2;
   color: #c78417;
}
.social-text {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
}
.social-text strong {
   font-size: 16px;
   font-weight: 790;
}
.social-text small {
   font-size: 12.5px;
   color: var(--muted);
   line-height: 1.4;
}
.social-arrow {
   display: grid;
   place-items: center;
   margin-left: auto;
   flex: 0 0 35px;
   width: 35px;
   height: 35px;
   border-radius: 11px;
   background: var(--card-soft);
   color: var(--muted);
}
.social-arrow .icon {
   width: 17px;
   height: 17px;
}
.social-link:hover .social-arrow {
   background: var(--navy);
   color: #fff;
}

/* Two real storefronts */
.stores-section {
   margin-top: 38px;
}
.store-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 13px;
}
.store-card {
   min-width: 0;
   border-radius: 19px;
   overflow: hidden;
   background: var(--card);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}
.store-photo {
   aspect-ratio: 1.39;
   overflow: hidden;
   position: relative;
   background: #d3dfed;
}
.store-photo img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   object-position: center;
   transition: transform 0.45s ease;
}
.store-photo .photo-red {
   object-position: center 62%;
}
.store-photo .photo-beige {
   object-position: center 58%;
}
.store-card:hover .store-photo img {
   transform: scale(1.035);
}
.store-photo-label {
   position: absolute;
   left: 11px;
   bottom: 11px;
   display: inline-flex;
   align-items: center;
   background: rgba(8, 27, 53, 0.9);
   color: #fff;
   padding: 5px 9px;
   border-radius: 7px;
   font-size: 11px;
   font-weight: 800;
   backdrop-filter: blur(5px);
}
.store-body {
   padding: 15px;
}
h3 {
   margin: 0 0 5px;
   font-size: 15px;
   line-height: 1.3;
   letter-spacing: -0.015em;
}
.store-address {
   display: flex;
   align-items: start;
   gap: 5px;
   margin: 0 0 12px;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.5;
}
.store-address .icon {
   width: 14px;
   height: 14px;
   margin-top: 2px;
   color: var(--brand-red);
   stroke-width: 2.4;
}
.store-route {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 35px;
   padding: 8px 10px;
   border: 1px solid var(--line);
   background: var(--card-soft);
   border-radius: 8px;
   font-size: 11.5px;
   font-weight: 780;
   text-decoration: none;
   color: var(--ink);
}
.store-route:hover {
   border-color: var(--brand-red);
   color: var(--brand-red);
}
.store-route .icon {
   width: 14px;
   height: 14px;
}

/* Phone and native sharing */
.contact-strip {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 17px 18px;
   margin-top: 23px;
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: 19px;
   box-shadow: var(--shadow);
}
.contact-ic {
   display: grid;
   place-items: center;
   flex: 0 0 43px;
   width: 43px;
   height: 43px;
   border-radius: 12px;
   background: var(--soft-blue);
   color: var(--icon-blue);
}
.contact-details {
   display: grid;
   gap: 1px;
}
.contact-details span {
   font-size: 12px;
   color: var(--muted);
}
.contact-details a {
   font-size: 17px;
   font-weight: 820;
   line-height: 1.3;
   letter-spacing: -0.02em;
   text-decoration: none;
}
.contact-details a:hover {
   color: var(--brand-red);
}
.copy-phone {
   width: 39px;
   height: 39px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   border-radius: 11px;
   background: var(--card-soft);
   color: var(--muted);
   margin-left: auto;
}
.copy-phone:hover {
   color: var(--brand-red);
   border-color: var(--brand-red);
}
.copy-phone .icon {
   width: 18px;
   height: 18px;
}
.share-button {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   gap: 9px;
   min-height: 47px;
   margin-top: 13px;
   color: var(--muted);
   font-weight: 750;
   font-size: 13px;
   border: 1px dashed #b9c6d6;
   border-radius: 13px;
   background: transparent;
}
.share-button:hover {
   color: var(--ink);
   border-color: var(--brand-red);
}
.share-button .icon {
   width: 17px;
   height: 17px;
}
.footer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
   padding: 30px 0 9px;
   color: var(--muted);
   font-size: 12px;
}
.footer img {
   width: 21px;
   height: 21px;
   object-fit: contain;
}
.footer span {
   color: var(--ink);
   font-weight: 820;
}
.footer small {
   flex-basis: 100%;
   text-align: center;
   font-size: 11px;
}

/* Accessible native modal */
dialog {
   width: min(100% - 32px, 460px);
   max-height: min(640px, calc(100dvh - 30px));
   overflow: auto;
   padding: 0;
   background: var(--card);
   color: var(--ink);
   border: 1px solid var(--line);
   border-radius: 23px;
   box-shadow: 0 28px 85px rgba(0, 9, 21, 0.32);
}
dialog::backdrop {
   background: rgba(3, 13, 30, 0.66);
   backdrop-filter: blur(5px);
}
.dialog-content {
   position: relative;
   padding: 28px 23px 23px;
}
.dialog-close {
   position: absolute;
   top: 16px;
   right: 16px;
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   background: var(--card-soft);
   border: 1px solid var(--line);
   border-radius: 10px;
   color: var(--muted);
}
.dialog-close .icon {
   width: 18px;
   height: 18px;
}
.dialog-symbol {
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   border-radius: 13px;
   background: #fff1db;
   color: #c78417;
   margin-bottom: 14px;
}
.dialog-symbol .icon {
   width: 24px;
   height: 24px;
}
.dialog-content h2 {
   max-width: 320px;
   font-size: 23px;
}
.dialog-content > p {
   color: var(--muted);
   font-size: 14px;
   margin: 9px 0 17px;
   line-height: 1.58;
}
.review-locations {
   display: grid;
   gap: 9px;
}
.review-locations a {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 13px;
   text-decoration: none;
}
.review-locations a:hover {
   border-color: var(--brand-red);
}
.review-pin {
   display: grid;
   place-items: center;
   flex: 0 0 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--card-soft);
   color: var(--brand-red);
}
.review-pin .icon {
   width: 20px;
   height: 20px;
}
.review-locations a span:nth-child(2) {
   min-width: 0;
   display: grid;
   gap: 1px;
}
.review-locations strong {
   font-size: 14px;
}
.review-locations small {
   font-size: 12px;
   color: var(--muted);
}
.review-out {
   margin-left: auto;
   width: 17px;
   height: 17px;
   color: var(--muted);
}
.dialog-content .dialog-footnote {
   margin: 16px 0 0;
   font-size: 12px;
   text-align: center;
}
.toast {
   position: fixed;
   left: 50%;
   bottom: 28px;
   translate: -50% 20px;
   z-index: 300;
   display: block;
   max-width: min(88vw, 400px);
   width: max-content;
   opacity: 0;
   pointer-events: none;
   padding: 11px 16px;
   border-radius: 11px;
   background: #092340;
   color: #fff;
   font-size: 13px;
   box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
   transition:
      opacity 0.2s,
      translate 0.2s;
}
.toast.visible {
   translate: -50% 0;
   opacity: 1;
}
.mobile-dock {
   display: none;
}

@media (max-width: 560px) {
   .topbar {
      min-height: 74px;
   }
   .brand {
      flex-basis: 155px;
   }
   .brand img {
      width: 152px;
   }
   .shell {
      width: calc(100% - 24px);
   }
   .hero {
      border-radius: 21px;
   }
   .hero-content {
      padding: 27px 21px 24px;
   }
   h1 {
      margin-top: 15px;
      font-size: clamp(29px, 7.8vw, 35px);
   }
   .hero-description {
      font-size: 14px;
   }
   .quick-facts {
      gap: 6px;
      margin-top: 18px;
   }
   .quick-facts span {
      font-size: 10px;
      padding: 6px 7px;
   }
   .hero-cta {
      grid-template-columns: 1fr;
      margin-top: 19px;
      gap: 9px;
   }
   .button {
      min-height: 51px;
      font-size: 14px;
   }
   .button-tail {
      margin-left: auto;
   }
   .section {
      margin-top: 30px;
   }
   .section-heading {
      display: block;
      margin-bottom: 13px;
   }
   .section-heading > p {
      text-align: left;
      max-width: none;
      margin-top: 5px;
   }
   .social-link {
      min-height: 74px;
      padding: 11px 12px;
      gap: 11px;
      border-radius: 16px;
   }
   .social-icon {
      width: 46px;
      height: 46px;
      flex-basis: 46px;
   }
   .social-text strong {
      font-size: 15px;
   }
   .social-text small {
      font-size: 12px;
   }
   .social-arrow {
      width: 29px;
      height: 29px;
      flex-basis: 29px;
      border-radius: 9px;
   }
   .store-grid {
      gap: 9px;
   }
   .store-body {
      padding: 11px;
   }
   .store-photo-label {
      bottom: 8px;
      left: 8px;
      font-size: 10px;
   }
   h3 {
      font-size: 13px;
   }
   .store-address {
      font-size: 11px;
   }
   .store-route {
      font-size: 10.5px;
      padding: 8px 6px;
   }
   .footer {
      padding-bottom: 75px;
   }
   .mobile-dock {
      position: fixed;
      inset: auto 0 0;
      z-index: 90;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--card) 93%, transparent);
      backdrop-filter: blur(12px);
      box-shadow: 0 -8px 26px rgba(9, 34, 65, 0.08);
      border-top: 1px solid var(--line);
      transition: translate 0.25s ease;
   }
   .mobile-dock.is-hidden {
      translate: 0 110%;
   }
   .mobile-dock a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      border-radius: 11px;
      font-weight: 780;
      font-size: 13px;
      text-decoration: none;
      color: var(--ink);
      background: var(--card-soft);
      border: 1px solid var(--line);
   }
   .mobile-dock a:last-child {
      color: #fff;
      background: var(--brand-red);
      border-color: var(--brand-red);
   }
   .mobile-dock .icon {
      width: 17px;
      height: 17px;
   }
   .toast {
      bottom: 85px;
   }
}
@media (max-width: 360px) {
   .place-indicator {
      display: none;
   }
   .hero-content {
      padding-inline: 17px;
   }
   .quick-facts span {
      font-size: 9px;
      padding: 5px;
   }
   .store-grid {
      grid-template-columns: 1fr;
   }
   .store-photo {
      aspect-ratio: 1.9;
   }
   .store-body {
      padding: 13px;
   }
   .store-route {
      font-size: 12px;
   }
}
@media (min-width: 780px) {
   .topbar {
      padding-top: 19px;
   }
   .hero-content {
      padding: 38px 36px 35px;
   }
}
@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }
   *,
   *::before,
   *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
   }
}