/* CRAB CRACK — UI layer on top of the Framer export.
   Glass navbar, reveal animations, mobile fixes, focus states. */

:root {
  --cc-bg: 9, 10, 13;
  --cc-accent: 225, 75, 59;
  --cc-ink: 244, 241, 234;
  --cc-nav-h: 64px;
}

/* ---------------------------------------------------------------- navbar */

/* The export ships a black rounded bar that scrolled away. Make it a sticky
   glass panel instead; JS adds .cc-scrolled once the page moves. */
nav[data-framer-name] {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  background: rgba(var(--cc-bg), 0.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

nav[data-framer-name].cc-scrolled {
  background: rgba(var(--cc-bg), 0.86) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Breathing accent line under the nav. */
nav[data-framer-name]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--cc-accent), 0.65), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
nav[data-framer-name].cc-scrolled::after { opacity: 1; }

nav[data-framer-name] a {
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
nav[data-framer-name] a:hover { transform: translateY(-1px); }
nav[data-framer-name] a:active { transform: translateY(0); }

/* The brand mark gets a soft glow on hover. */
nav[data-framer-name] [data-framer-name="App icon"] {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
nav[data-framer-name] [data-framer-name="App icon"]:hover {
  box-shadow: 0 0 0 2px rgba(var(--cc-accent), 0.55), 0 8px 24px rgba(var(--cc-accent), 0.25);
  transform: rotate(-4deg);
}

/* ------------------------------------------------------------ mobile nav */

/* The site ships its own mobile bar (.cc-mbar + .cc-burger); the Framer nav is
   desktop-only. Showing both stacked them and covered the links, so the
   desktop nav stays hidden on small screens and the mobile bar is hidden on
   large ones. Exactly one navigation is visible at any width. */
@media (max-width: 860px) {
  div.cc-desktop,
  nav[data-framer-name="Desktop"] {
    display: none !important;
    visibility: hidden !important;
  }
}

/* nav.css only shows the phone bar up to 809.98px while the desktop nav is
   hidden up to 860px — that left a dead band (≈810–860px) with no navigation
   at all. Fill it with the same phone bar, so exactly one nav is visible at
   any width. */
@media (min-width: 810px) and (max-width: 860px) {
  .cc-nav .cc-phone { display: block !important; }
}

@media (min-width: 861px) {
  .cc-mbar, .cc-burger, .cc-mmenu, .cc-lang-mobile, .cc-phone {
    display: none !important;
  }
}

/* Burger button: three bars that turn into a cross while the menu is open. */
.cc-burger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.cc-burger:hover { background: rgba(255, 255, 255, 0.12); }
.cc-burger i {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--cc-ink), 0.9);
  transition: transform 0.28s ease, opacity 0.2s ease;
}
body.cc-menu-open .cc-burger { border-color: rgba(var(--cc-accent), 0.6); }
body.cc-menu-open .cc-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.cc-menu-open .cc-burger i:nth-child(2) { opacity: 0; }
body.cc-menu-open .cc-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-down glass menu. */
.cc-mmenu {
  display: none;
  position: fixed;
  left: 10px;
  right: 10px;
  top: 66px;
  z-index: 130;
  padding: 10px;
  border-radius: 14px;
  background: rgba(var(--cc-bg), 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}
body.cc-menu-open .cc-mmenu {
  display: block;
  animation: cc-menu-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cc-mmenu a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: rgba(var(--cc-ink), 0.92);
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cc-mmenu a:hover,
.cc-mmenu a:active {
  background: rgba(var(--cc-accent), 0.16);
  transform: translateX(2px);
}

@keyframes cc-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- layout fix */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cc-nav-h) + 12px); }

body { overflow-x: hidden; }

/* ---------------------------------------------------------- reveal anims */

@media (prefers-reduced-motion: no-preference) {
  .cc-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .cc-reveal.cc-in { opacity: 1; transform: none; }

  .cc-card {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .cc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}

/* --------------------------------------------------------------- details */

::selection { background: rgba(var(--cc-accent), 0.35); }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(var(--cc-accent), 0.9);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Ticker/stat numbers keep tabular figures so they do not jump while ticking. */
[class*="stat-num"] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- 404 polish */

.cc-404 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

/* --------------------------------------------------- even card geometry */

/* Every card row is stretched to the tallest card, and all rows share one
   height, so grids never look ragged: icon on top, text below, identical
   outer size. */
.grid-3,
.grid-2,
.grid-4,
.products-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.grid-3 > .adv-card,
.grid-2 > .adv-card,
.grid-4 > .adv-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-3 > .adv-card > p,
.grid-2 > .adv-card > p,
.grid-4 > .adv-card > p {
  margin-bottom: 0;
}

/* Icons keep the same optical box regardless of the path inside. */
.adv-card .adv-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Product cards in a row share one height; the CTA settles at the bottom. */
.products-grid > article.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.products-grid > article.product-card > *:last-child {
  margin-top: auto;
}

/* The closing line of the About block reads as a caption, not a paragraph. */
#about .about-quote {
  margin-top: 28px;
  text-align: center;
  opacity: 0.9;
}

/* ------------------------------------------------------- text contrast */
/* --text-dim used to be #545b6b: 2.6–2.9:1 on the dark surfaces, applied to
   .foot-wrap / .price-period / .product-ver / .stat-lbl (footer, the
   "/ forever" label, the product version chip, the stat captions). Raised to
   a grey that clears AA 4.5:1 everywhere it is used while staying muted:
   #090a0d → 5.5:1, #14161e → 5.0:1, #191c26 (card hover) → 4.7:1.
   Declared here as well as in each page so a page that only loads cc.css
   still gets the accessible value. */
:root {
  --text-dim: #7f8796;
}

.foot-wrap,
.price-period,
.product-ver,
.stat-lbl {
  color: var(--text-dim);
}

/* The contact-card <picture> replaces the bare <img>; keep it filling the
   16/10 frame so the cover crop behaves as before. */
.contact-img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------- touch targets */
/* WCAG 2.5.8: on small screens every interactive element is at least 44px
   tall — buttons, the mobile menu links, the language switch, the brand
   link and the footer links. */
@media (max-width: 860px) {
  .btn,
  .cc-mmenu a,
  .cc-lang-a,
  .cc-lang-mobile,
  .cc-mbrand,
  .foot-wrap a,
  .foot-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cc-burger {
    width: 44px;
    height: 44px;
  }
  .cc-lang-mobile {
    min-width: 44px;
    justify-content: center;
    padding: 0 6px;
  }
  .cc-mmenu a {
    min-height: 48px;
  }
  .foot-links {
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* Desktop keeps the same rule at the AA floor of 24px (WCAG 2.5.8): the Framer
   export ships its nav text links ~17px tall and the RU/EN switch at 19px.
   Padding grows the hit box; the matching negative margin leaves the layout
   byte-identical, so nothing shifts. */
@media (min-width: 861px) {
  nav[data-framer-name] a.framer-text {
    padding: 4px 6px;
    margin: -4px -6px;
  }
  .cc-lang .cc-lang-a {
    padding: 6px;
    border-radius: 8px;
  }
  .foot-links a {
    padding-block: 4px;
  }
}

/* Hero stats: four equal cells, numbers and labels on one baseline grid. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.hero-stats .stat-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-height: 76px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}
.hero-stats .stat-item:last-child { border-right: 0; padding-right: 0; }
.hero-stats .stat-num {
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hero-stats .stat-lbl { margin-top: 0; min-height: 34px; }
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .hero-stats .stat-item { min-height: 68px; }
  .hero-stats .stat-item:nth-child(2n) { border-right: 0; padding-right: 0; }
}

/* Hero catalog panel: replaces the picture card with an even price board. */
.catalog-panel {
  width: min(460px, 100%);
  margin-inline: auto;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 22, 30, 0.92), rgba(12, 13, 18, 0.92));
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.catalog-panel .cp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.catalog-panel .cp-title {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 14px;
}
.catalog-panel .cp-badge {
  font-size: 11.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.catalog-panel .cp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 64px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.catalog-panel .cp-row:hover {
  background: rgba(255, 77, 45, 0.08);
  transform: translateX(2px);
}
.catalog-panel .cp-name { font-size: 15px; font-weight: 600; }
.catalog-panel .cp-ver {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: right;
}
.catalog-panel .cp-price {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.catalog-panel .cp-price.cp-free { color: var(--text); }
.catalog-panel .cp-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
@media (max-width: 480px) {
  .catalog-panel .cp-row { grid-template-columns: minmax(0, 1fr) 70px 58px; padding: 0 8px; }
}

/* Crab emblem in the catalog panel head (the brand avatar, kept small). */
.catalog-panel .cp-head { align-items: center; }
.catalog-panel .cp-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
  margin-right: 10px;
}
.catalog-panel .cp-emblem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-panel .cp-title { flex: 1 1 auto; }