/* Auto-extracted from index.html for consistent design across pages */

/* ===== Brand tokens ===== */
  :root {
   --brand: 0 117 255;     /* Brand RGB */
   --brand-500: 0 117 255;   /* Brand 500 */
   --brand-600: 0 92 204;   /* Brand 600 */
   --brand-700: 0 76 170;   /* Brand 700 */
   --brand-50: 239 246 255;   /* Brand 50 */
  }
  html, body { font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell; }

  /* Headings use display font */
  h1, h2, h3, .font-display { font-family: "Unbounded","Nunito",ui-sans-serif,system-ui; }

  /* Smooth theming */
  .theme-anim * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }

  /* Global ornaments background */
  body.bg-ornaments {
   background:
    /* top glows */
    radial-gradient(1200px 600px at 10% -10%, rgba(var(--brand-500)/0.24), transparent 62%),
    radial-gradient(900px 500px at 110% 10%, rgba(var(--brand-700)/0.22), transparent 62%),
    /* mid-page soft glows */
    radial-gradient(700px 380px at 20% 45%, rgba(var(--brand-500)/0.12), transparent 60%),
    radial-gradient(700px 380px at 80% 55%, rgba(var(--brand-600)/0.10), transparent 60%),
    /* mid extra near payment */
    radial-gradient(640px 360px at 38% 72%, rgba(var(--brand-500)/0.10), transparent 62%),
    /* bottom perimeter glows */
    radial-gradient(900px 520px at 0% 100%, rgba(var(--brand-700)/0.12), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(var(--brand-500)/0.14), transparent 62%),
    radial-gradient(700px 420px at 50% 100%, rgba(var(--brand-600)/0.12), transparent 62%),
    /* minimal depth (avoid grey) */
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%);
  }
  .dark.bg-ornaments {
   background:
    /* top glows */
    radial-gradient(1200px 600px at 0% -10%, rgba(var(--brand-500)/0.18), transparent 62%),
    radial-gradient(900px 500px at 100% 0%, rgba(var(--brand-700)/0.16), transparent 62%),
    /* mid-page soft glows */
    radial-gradient(720px 420px at 22% 48%, rgba(var(--brand-500)/0.16), transparent 62%),
    radial-gradient(720px 420px at 78% 58%, rgba(var(--brand-700)/0.14), transparent 62%),
    /* bottom perimeter glows */
    radial-gradient(900px 520px at 0% 100%, rgba(var(--brand-700)/0.16), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(var(--brand-500)/0.18), transparent 62%),
    radial-gradient(700px 420px at 50% 100%, rgba(var(--brand-600)/0.16), transparent 62%),
    /* softer dark tail (no black hole) */
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(9,9,11,0.28) 100%);
  }
  /* subtle grid overlay */
  .bg-grid::before {
   content:""; position: fixed; inset:0; pointer-events:none;
   background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
   background-size: 36px 36px;
   mix-blend-mode: multiply; z-index: 0;
  }
  .dark .bg-grid::before {
   background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  }

  .reveal { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
  .revealed { opacity: 1; transform: none; }

  .nav-link { position: relative; transition: color .2s ease, opacity .2s ease; }
  .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: #0075ff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  will-change: transform;
  border-radius: 999px;
}
.nav-link:hover::after {
  transform: scaleX(1);
}
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-link:hover { filter: brightness(.9); }

  .hover-float { transition: transform .25s ease, box-shadow .25s ease; }
  .hover-float:hover { transform: translateY(-4px); }

  /* ==== Buttons (variants + animations) ==== */
  .btn { position: relative; overflow: hidden; transition: transform .15s ease, filter .2s ease, box-shadow .25s ease; border-radius: .75rem; will-change: transform; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
  .btn:active { transform: translateY(0) scale(.99); filter: brightness(.98); }
  .btn-primary { background: #0075ff; color:#fff; border:0; }
  .btn-outline { background: transparent; color: rgb(var(--brand)); border: 1px solid rgba(var(--brand)/.6); }
.dark .btn-outline { color: rgb(244 244 245); border: 1px solid rgba(244,244,245,.26); }
  .btn-outline:hover { background: #0075ff; color: #fff; border-color: #0075ff; }
  .btn-ghost { background: transparent; color: inherit; border: 0; }
  /* Glow */
  .btn-glow:hover { box-shadow: 0 10px 30px rgba(0, 117, 255,.35), 0 0 0 1px rgba(0, 117, 255,.35) inset; }
  /* Shine */
  .btn-shine::after {
   content:""; position:absolute; top:0; left:-120%; width:120%; height:100%;
   background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 30%, transparent 60%);
   transform: skewX(-20deg);
   transition: left .5s ease;
  }
  .btn-shine:hover::after { left: 120%; }

  /* Swipe-fill (Webflow-like) */
  .btn-swipe::before{
   content:""; position:absolute; inset:0; transform:translateX(-110%);
   background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.0) 35%);
   transition: transform .45s ease;
   display: none !important; }
  .btn-swipe:hover::before{ transform:translateX(0); }

  /* Underline slide for links styled as buttons */
  .btn-underline::after{
   content:""; position:absolute; left:10%; right:10%; bottom:8px; height:2px; border-radius:999px;
   background: rgba(255,255,255,.55);
   transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
  }
  .btn-underline:hover::after{ transform: scaleX(1); }

  /* Magnetic hover (opt-in with data-mag=\"1\") */
  [data-mag=\"1\"]{ transition: transform .15s ease; will-change: transform; }

  /* Ripple (simple) */
  .btn-ripple { --ripple-x: 50%; --ripple-y: 50%; --ripple-color: rgba(255,255,255,.35); }
  .btn-ripple:focus-visible::before, .btn-ripple:active::before {
   content:""; position:absolute; left:var(--ripple-x); top:var(--ripple-y); width:8px; height:8px;
   transform: translate(-50%,-50%); background: var(--ripple-color); border-radius:999px;
   animation: ripple .6s ease-out;
  }
  @keyframes ripple { from{opacity:.6; transform:translate(-50%,-50%) scale(1);} to{opacity:0; transform:translate(-50%,-50%) scale(18);} }

  @keyframes softPulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
  .pulse { animation: softPulse 2.2s ease-in-out infinite; }

  /* continuous floating image */
  @keyframes floatY { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
  .floaty { animation: floatY 4.5s ease-in-out infinite alternate; }

  /* Custom dropdown */
  .dd { position: relative; }
  .dd-btn { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; border-radius:.5rem; padding:.5rem .75rem; border:1px solid rgb(228 228 231); background: transparent; }
  .dark .dd-btn { border-color: rgb(63 63 70); }
  .dd-menu { position:absolute; top:calc(100% + .5rem); right:0; min-width: 12rem; background: white; color: #09090b; border: 1px solid rgb(228 228 231); border-radius:.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); transform-origin: top right; transform: scale(.97) translateY(-6px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; overflow:hidden; }
  .dark .dd-menu { background: rgb(24 24 27); color: rgb(244 244 245); border-color: rgb(63 63 70); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .dd.open .dd-menu { transform: none; opacity: 1; pointer-events: auto; }
  .dd-item { padding:.6rem .85rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
  .dd-item:hover { background: rgb(244 244 245); }
  .dark .dd-item:hover { background: rgb(39 39 42); }

  /* FAQ improvements */
  .faq-item > .content { overflow: hidden; height: 0; transition: height .3s ease; }
  .faq-item.open > .content { height: var(--target-h); }
  .faq-item .chev { transition: transform .25s ease; }
  .faq-item.open .chev { transform: rotate(180deg); }

  /* Blog cards */
  .post-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); }

  /* Logos marquee */
  .marquee { overflow: hidden; position: relative; }
  .marquee-track { display:flex; gap:2.5rem; width: max-content; animation: marquee 18s linear infinite; }
  @keyframes marquee { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

  /* Language chips – red tint */
  .lang-chip { position: relative; display:inline-flex; align-items:center; justify-content:center; height:2rem; min-width:2.4rem; padding:0 .75rem; border-radius:999px; border:1px solid rgb(228 228 231); background: linear-gradient(180deg, rgba(0, 117, 255,.10), rgba(0, 117, 255,0)); font-weight:700; letter-spacing:.02em; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
  .dark .lang-chip { border-color: rgb(63 63 70); background: linear-gradient(180deg, rgba(0, 117, 255,.14), rgba(0, 117, 255,0)); }
  .lang-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 117, 255,.18); }
  .lang-chip:active { transform: translateY(0); }
  .lang-chip::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(60% 60% at 50% 0%, rgba(0, 117, 255,.2), transparent 60%); opacity:.0; transition: opacity .2s ease; }
  .lang-chip:hover::after { opacity:1; }

  /* Theme switch thumb uses RED */
  #themeBtn { --thumb-size: 1.2rem; }
  #thumb { width: var(--thumb-size); height: var(--thumb-size); box-shadow: 0 4px 14px rgba(0,0,0,.18); background: linear-gradient(135deg, rgba(0, 117, 255,1), rgba(0, 117, 255,.88)); }
  .dark #thumb { background: linear-gradient(135deg, rgba(0, 117, 255,.9), rgba(0, 117, 255,.85)); }

  /* CTA-as-link styles (underline color) */
  .link-underline { text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: #0075ff; }

  /* ====== Floating Feedback Menu (FAB + Panel) ====== */
  #fbFab { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
  #fbPanel { position: fixed; right: 1rem; bottom: 5rem; width: 340px; max-width: calc(100vw - 2rem);
   background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
   color: #09090b; border: 1px solid rgb(228 228 231); border-radius: 1rem;
   transform-origin: bottom right; transform: translateY(8px) scale(.98); opacity: 0; pointer-events: none;
   transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
   box-shadow: 0 14px 40px rgba(0,0,0,.15);
  }
  .dark #fbPanel { background: rgba(24,24,27,.9); color: rgb(244,244,245); border-color: rgb(63,63,70); box-shadow: 0 14px 50px rgba(0,0,0,.5); }
  #fbPanel.open { transform: none; opacity: 1; pointer-events: auto; }

  .chip { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(0,0,0,.08); padding:.5rem .75rem; border-radius:.75rem; font-size:.9rem; transition: transform .15s ease, box-shadow .25s ease; }
  .chip:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 117, 255,.12);}
  .dark .chip { border-color: rgba(255,255,255,.15); }

  /* Replace green gradients (legacy) */
  .badge-grad, .logo-grad { background-image: linear-gradient(to bottom right, rgb(var(--brand-500)), rgb(var(--brand-700))); }


  /* Language segmented control */
  .lang-seg{ display:inline-flex; align-items:center; gap:.25rem; padding:.25rem; border-radius:999px; border:1px solid rgb(228 228 231); background: rgba(255,255,255,.6); backdrop-filter:saturate(140%) blur(6px); }
  .dark .lang-seg{ border-color: rgb(63 63 70); background: rgba(24,24,27,.6); }
  .lang-seg a{ position:relative; min-width:2.5rem; padding:.35rem .8rem; border-radius:999px; font-weight:700; letter-spacing:.02em; transition: color .2s ease, transform .15s ease; }
  .lang-seg a:hover{ transform: translateY(-1px); }
  .lang-seg a.active{ color:white; }
  .lang-seg .pill{ position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 6px); border-radius:999px; background: #0075ff; box-shadow: 0 8px 22px rgba(0, 117, 255,.25); transition: transform .25s ease; }
  .lang-seg[data-act="UA"] .pill{ transform: translateX(0); }
  .lang-seg[data-act="EN"] .pill{ transform: translateX(100%); }
  .lang-seg a span{ position:relative; z-index:1; }


  /* Language dropdown badge */
  .lang-dd{ display:inline-flex; align-items:center; gap:.5rem; }
  .lang-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:.75rem;
   border:1px solid rgb(228 228 231); background: rgba(255,255,255,.65); backdrop-filter: saturate(140%) blur(6px);
   font-weight:700; letter-spacing:.02em; }
  .dark .lang-badge{ border-color: rgb(63 63 70); background: rgba(24,24,27,.65); }
  .lang-ico{ width:1rem; height:1rem; border-radius:999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 40%), linear-gradient(135deg, rgba(var(--brand-500)/1), rgba(var(--brand-700)/1)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
  .lang-code{ font-variant-numeric: tabular-nums; }


  /* Decorative subtle pattern overlay */
  .::after{
   content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.06;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="rgb(0,117,255)" stop-opacity="0.6"/><stop offset="1" stop-color="rgb(0,92,204)" stop-opacity="0.6"/></linearGradient></defs><g fill="none" stroke="url(%23g)" stroke-width="1.2" opacity="0.4"><path d="M0,30 C40,10 100,50 140,30"/><path d="M0,70 C40,50 100,90 140,70"/><path d="M0,110 C40,90 100,130 140,110"/></g><g fill="none" stroke="url(%23g)" stroke-width="0.8" opacity="0.25"><circle cx="20" cy="20" r="6"/><circle cx="120" cy="40" r="5"/><circle cx="70" cy="100" r="7"/></g></svg>');
   background-size: 360px 360px;
   mix-blend-mode: multiply;
  }
  .dark.::after{ opacity:.08; mix-blend-mode: screen; }


  /* Language inline switch */
  .lang-inline{ display:inline-flex; align-items:center; gap:.25rem; font-weight:800; letter-spacing:.02em; font-size:.85rem; }
  .lang-inline a{ position:relative; padding:.15rem .12rem; border-radius:.3rem; transition: color .2s ease; }
  .lang-inline a::after{
   content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:999px;
   background: #0075ff;
   transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
  }
  .lang-inline a:hover::after{ transform: scaleX(1); }
  .lang-inline .sep{ opacity:.6; padding:0 .12rem; }
  .lang-inline a.active{ color: rgb(var(--brand)); }
  .dark .lang-inline a.active{ color: rgb(248 250 252); }
  .lang-inline a:focus-visible{ outline: 2px solid rgba(var(--brand)/.5); outline-offset: 2px; border-radius:.35rem; }

 
  :root{
   --pat-opacity: .12;
   --stripe-alpha1: .16;
   --stripe-alpha2: .08;
   --stripe-w1: 2px;
   --stripe-gap1: 22px;
   --stripe-w2: 1px;
   --stripe-gap2: 8px;
  }
  
  .dark.::after{
   opacity: calc(var(--pat-opacity) + .09);
   mix-blend-mode: screen;
  }


  /* === Smooth anchor scrolling + offset for sticky header === */
  html { scroll-behavior: smooth; }
  /* Account for sticky header (~64-80px) so anchors aren't hidden */
  section[id], [id^="section-"] { scroll-margin-top: 88px; }


/* === Fix for plus/minus hover === */
.qty-btn { background: rgb(244 244 245); }          /* zinc-100 */
.dark .qty-btn { background: rgb(39 39 42); }       /* zinc-800 */
.qty-btn.hovered { background: rgb(228 228 231); }  /* zinc-200 */
.dark .qty-btn.hovered { background: rgb(63 63 70); } /* zinc-700 */


h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 100%;
  background: #0075ff;
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(.2);
  transition: transform .35s ease;
}

h2:hover::after { transform: scaleX(1); }


/* === Animated underline for section titles === */
h2 {
  position: relative;
  display: inline-block;
}
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 100%;
  background: #0075ff;
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(.2);
  transition: transform .35s ease;
}

h2:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nav-link::after, h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 100%;
  background: #0075ff;
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(.2);
  transition: transform .35s ease;
}

h2:hover::after { transform: scaleX(1); }
}


/* === Patch v2025-11-12: Buttons polish === */
.btn { border-radius: .75rem; }
.btn:focus-visible { outline: 2px solid rgba(0,117,255,.45); outline-offset: 2px; }
.btn-outline { backdrop-filter: saturate(140%); }
.btn-outline:hover { filter: none; }

/* Consistent glow variant on hover */
.btn-glow:hover { box-shadow: 0 10px 30px rgba(0,117,255,.28), 0 0 0 1px rgba(0,117,255,.28) inset; }



/* === Patch v2025-11-12C: Scoped bottom-up fill just for .btn-fillY === */
.btn-fillY {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* create stacking context so ::after sits under content */
  transition: color .3s ease, border-color .3s ease;
}
.btn-fillY .btn-label { position: relative; z-index: 1; }
.btn-fillY::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s ease;
  background: #0075ff;
  z-index: 0;
  pointer-events: none;
}
.btn-fillY:hover::after { transform: scaleY(1); }
.btn-fillY:hover { color: #fff; border-color: #0075ff; }


/* === Patch v2025-11-12D: Fix enter animation (prevent instant bg on hover) === */
.btn-fillY:hover,
.btn-fillY.btn-outline:hover {
  background: transparent !important; /* keep bg transparent; fill happens via ::after */
}
/* Smoother easing for fill */
.btn-fillY::after {
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}


/* === Patch v2025-11-12E: Smooth hover lift for .btn === */
.btn {
  transition: transform .28s ease, box-shadow .28s ease, color .3s ease, border-color .3s ease;
}


/* === Patch v2025-11-12M: Clean focus style for calculator (dropdown only) === */
#calculator .dd-btn,
#calculator select {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  border-radius: .75rem;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

#calculator .dd-btn:hover,
#calculator select:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}

#calculator .dd-btn:focus,
#calculator select:focus {
  outline: none;
  border-color: #0075ff;
  box-shadow: 0 0 8px rgba(0,117,255,0.5), inset 0 0 4px rgba(0,117,255,0.3);
  background: rgba(255,255,255,0.06);
}

/* ---- */

/* Убираем стандартные стрелки у input[type=number]/text для qty */
#qty::-webkit-outer-spin-button,
#qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#qty[type=text] {
  -moz-appearance: textfield;
}

/* ---- */

/* === Plus/Minus hover FIX (v3 clean) === */
.qty-btn {
  background: rgb(244 244 245); /* zinc-100 */
  transition: background 0.15s ease;
}
.dark .qty-btn { background: rgb(39 39 42); /* zinc-800 */ }

.qty-btn.hovered {
  background: rgb(228 228 231); /* zinc-200 */
}
.dark .qty-btn.hovered {
  background: rgb(63 63 70); /* zinc-700 */
}

.qty-btn:focus-visible {
  outline: none;
}

/* ---- */

/* Fix dropdown base state inside contact form */
#contact .dd-menu {
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
}
#contact .dd.open .dd-menu {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
#contact #dd-contact-form { position: relative; z-index: 30; }

/* ---- */

/* --- Contact dropdown: fade-only animation and close behavior --- */
#contact #dd-contact-form { position: relative; z-index: 40; }
#contact .dd-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
#contact .dd.open .dd-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* --- Force red theme accents in contact form (override emerald) --- */
#contact input:focus,
#contact textarea:focus,
#contact .dd-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--brand-500) / 0.35); /* Brand 500 */
  border-color: rgb(0, 117, 255);
}

/* Optional: hover bg for items */
#contact .dd-item { transition: background .15s ease; }
#contact .dd-item:hover { background: rgba(0, 117, 255,.06); } /* subtle red tint */

/* ---- */

/* Prevent text selection inside dropdown items */
#contact .dd-item {
  user-select: none;
  -webkit-user-select: none;
}

/* Fade animation and red theme are already included from previous step */

/* ---- */

/* Ensure ONLY the .open class controls visibility; ignore :focus-within */
#contact .dd:focus-within .dd-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
}
#contact .dd.open:focus-within .dd-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* ---- */

/* Calculator dropdown fixes */
#calculator .dd-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
#calculator .dd.open .dd-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* neutralize focus-within keeping menu open */
#calculator .dd:focus-within .dd-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
}
#calculator .dd.open:focus-within .dd-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
/* Prevent text selection in items */
#calculator .dd-item { user-select: none; -webkit-user-select: none; }

/* ---- */

/* Calculator dropdown: align style with contact (red theme + hover) */
#calculator .dd-btn:focus { outline: none; }
#calculator .dd-item { transition: background .15s ease; }
#calculator .dd-item:hover { background: rgba(0, 117, 255,.06); }

/* ---- */

/* Quick contacts hover: red outline like dropdown + subtle bounce */
#contact .grid a {
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
#contact .grid a:hover {
  border-color: rgb(0, 117, 255);
  box-shadow: 0 0 0 2px rgba(0, 117, 255,.35);
  transform: translateY(-2px);
}
#contact .grid a span.w-9 { transition: background-color .22s ease; }
#contact .grid a:hover span.w-9 { background-color: transparent; }
#contact .grid a svg { transition: opacity .22s ease; }
#contact .grid a:hover svg { opacity: 1; }

/* ---- */

/* === Footer sections: red outline like quick contacts, bounce; no default grey border visible === */
#footer .grid > div {
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease, background-color .22s ease;
  border: 1px solid transparent;           /* убрали светло-серую обводку */
  border-radius: .75rem;
  padding: 1rem;
  background: transparent;
}
#footer .grid > div:hover, #footer .grid > div:focus-within {
  border-color: rgb(0, 117, 255);             /* красный акцент только при наведении/фокусе */
  box-shadow: 0 0 0 2px rgba(0, 117, 255,.35);
  transform: translateY(-2px);
}
/* список оплат (если добавишь .pay-accept) */
#footer .pay-accept { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; align-items:center; }
#footer .pay-accept .badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .55rem; border:1px solid rgba(0, 117, 255,.45);
  border-radius:.5rem; font-size:.8rem;
  background: rgba(0, 117, 255,.06);
}
.dark #footer .pay-accept .badge { border-color: rgba(0, 117, 255,.55); background: rgba(0, 117, 255,.12); }

/* ---- */

/* === Patch: clean focus style ONLY for contact form === */
#contact input,
#contact textarea,
#contact select,
#contact .dd-btn {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  border-radius: .75rem;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

#contact input:hover,
#contact textarea:hover,
#contact select:hover,
#contact .dd-btn:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}

#contact input:focus,
#contact textarea:focus,
#contact select:focus,
#contact .dd-btn:focus {
  outline: none;
  border-color: #0075ff;
  box-shadow: 0 0 8px rgba(0,117,255,0.5), inset 0 0 4px rgba(0,117,255,0.3);
  background: rgba(255,255,255,0.06);
}

/* ---- */

/* === Fixes: consistent brand color + working glow backgrounds + pattern overlay === */
  :root{
    /* Use SPACE-separated RGB to support modern `rgb(var(--x) / a)` syntax */
    --brand: 0 117 255;
    --brand-500: 0 117 255;
    --brand-600: 0 92 204;
    --brand-700: 0 76 170;
  }
  body.bg-ornaments{
    background:
      radial-gradient(1200px 600px at 10% -10%, rgb(var(--brand-500) / 0.24), transparent 62%),
      radial-gradient(900px 500px at 110% 10%, rgb(var(--brand-700) / 0.22), transparent 62%),
      radial-gradient(700px 380px at 20% 45%, rgb(var(--brand-500) / 0.12), transparent 60%),
      radial-gradient(700px 380px at 80% 55%, rgb(var(--brand-600) / 0.10), transparent 60%),
      radial-gradient(800px 450px at 50% 85%, rgb(var(--brand-700) / 0.10), transparent 62%),
      linear-gradient(#ffffff, #ffffff);
  }
  .dark body.bg-ornaments{
    background:
      radial-gradient(1200px 600px at 10% -10%, rgb(var(--brand-500) / 0.20), transparent 62%),
      radial-gradient(900px 500px at 110% 10%, rgb(var(--brand-700) / 0.18), transparent 62%),
      radial-gradient(700px 380px at 20% 45%, rgb(var(--brand-500) / 0.10), transparent 60%),
      radial-gradient(700px 380px at 80% 55%, rgb(var(--brand-600) / 0.09), transparent 60%),
      radial-gradient(800px 450px at 50% 85%, rgb(var(--brand-700) / 0.08), transparent 62%),
      linear-gradient(#0b0b0c, #0b0b0c);
  }
  body.bg-pattern::after{
    content:'';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .06;
    background-image: radial-gradient(rgb(var(--brand-500) / .32) 1px, transparent 1px);
    background-size: 26px 26px;
    mix-blend-mode: multiply;
  }
  .dark body.bg-pattern::after{
    opacity: .08;
    mix-blend-mode: screen;
  }
  /* Keep overlays behind content */
  body{ position: relative; isolation: isolate; }
  body > *{ position: relative; z-index: 1; }

  /* Replace leftover red focus rings with brand glow */
  .form-card input:focus,
  .form-card textarea:focus,
  .form-card .dd-btn:focus{
    outline: none;
    border-color: rgb(var(--brand-500) / .70) !important;
    box-shadow: 0 0 0 2px rgb(var(--brand-500) / .35) !important;
  }

/* ---- */

[data-cl-footer]{ position: relative; background-color: rgb(244 244 245 / 1); }
  .dark [data-cl-footer]{ background-color: rgb(24 24 27 / 1); }
  [data-cl-footer] .grid > *{ border-radius: 16px; padding: 8px; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
  [data-cl-footer] .grid > *:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
  [data-cl-footer] a{ position: relative; text-decoration: none !important; }
  [data-cl-footer] a::after{ content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; opacity:.6; }
  [data-cl-footer] a:hover::after{ transform: scaleX(1); }
  @keyframes cl-fade-up{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
  [data-cl-footer] .cl-anim{ opacity:0; animation: cl-fade-up .6s ease forwards; }
  @media (prefers-reduced-motion: reduce){ [data-cl-footer] .cl-anim{ animation:none; opacity:1;} [data-cl-footer] .grid > *{ transition:none; } }