/* ============================================================================
   DS SIGHT — Liquid Glass buttons (dark tone)
   ----------------------------------------------------------------------------
   Loaded on every page. Gives the primary buttons an Apple-style translucent
   glass material: a frosted blue tint, a bright specular top edge, a gloss
   sheen that sweeps across on hover, a soft glow, and a satisfying press.

   Primary targets:
     .ds-glass-btn            — reusable class
     .ds-order-pill           — the nav "Order" button
     #ds-website-buy          — the "Start your website" CTA
     button[style*="radius-pill"] — the design-system <Button> (Sign in,
                                     Reserve, Enter Console, Send, …)
   ========================================================================== */

.ds-glass-btn,
.ds-order-pill,
#ds-website-buy,
button[style*="radius-pill"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(140, 190, 255, 0.28) !important;
  background:
    linear-gradient(162deg, rgba(74, 144, 226, 0.24) 0%, rgba(24, 44, 82, 0.52) 55%, rgba(10, 20, 40, 0.62) 100%) !important;
  color: #eaf3ff !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -6px 14px rgba(4, 14, 32, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(59, 158, 255, 0.22) !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, filter .28s ease !important;
}

/* Keep the label above the gloss/sheen layers. */
.ds-glass-btn > *,
.ds-order-pill > *,
#ds-website-buy > *,
button[style*="radius-pill"] > * { position: relative; z-index: 2; }

/* Top gloss — the glass reflection along the upper edge. */
.ds-glass-btn::after,
.ds-order-pill::after,
#ds-website-buy::after,
button[style*="radius-pill"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  pointer-events: none; z-index: 1;
}

/* Moving specular sheen — sweeps across on hover. */
.ds-glass-btn::before,
.ds-order-pill::before,
#ds-website-buy::before,
button[style*="radius-pill"]::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.42) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.ds-glass-btn:hover,
.ds-order-pill:hover,
#ds-website-buy:hover,
button[style*="radius-pill"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.12) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -3px 7px rgba(4, 18, 40, 0.50),
    0 14px 34px rgba(0, 0, 0, 0.50),
    0 0 36px rgba(59, 158, 255, 0.55) !important;
}
.ds-glass-btn:hover::before,
.ds-order-pill:hover::before,
#ds-website-buy:hover::before,
button[style*="radius-pill"]:hover::before { transform: translateX(130%); }

.ds-glass-btn:active,
.ds-order-pill:active,
#ds-website-buy:active,
button[style*="radius-pill"]:active { transform: translateY(0) scale(.965); }

/* Secondary buttons (mode toggles, steppers, icon buttons): a lighter touch so
   they feel responsive without competing with the primary CTAs. */
button:not([style*="radius-pill"]):not(#ds-website-buy):not(.ds-order-pill) {
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}
button:not([style*="radius-pill"]):not(#ds-website-buy):not(.ds-order-pill):hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}
button:not([style*="radius-pill"]):not(#ds-website-buy):not(.ds-order-pill):active {
  transform: translateY(0) scale(.97);
}

/* CTA text links: a soft glow on hover so they invite the click. */
.ds-link-cta:hover { text-shadow: 0 0 14px rgba(59, 158, 255, 0.6); }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .ds-glass-btn, .ds-order-pill, #ds-website-buy, button[style*="radius-pill"],
  .ds-glass-btn::before, .ds-order-pill::before, #ds-website-buy::before, button[style*="radius-pill"]::before {
    transition: none !important;
  }
}

/* ============================================================================
   Floating pill navigation (Brilliant-DanceSport style) — a rounded glass
   capsule that floats with margin from the edges: logo left, an Order pill,
   and a hamburger that opens the full menu.
   ========================================================================== */
.ds-navbar-wrap {
  position: sticky; top: 0; z-index: 60;
  padding: 16px 20px;
  background: transparent;
}
.ds-navbar {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 22px;
  background: linear-gradient(160deg, rgba(32,38,52,0.78), rgba(18,22,31,0.86));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(154,163,184,0.22);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 32px rgba(0,0,0,0.45);
}
.ds-navbar-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.ds-navbar-logo img { height: 30px; width: auto; }
.ds-navbar-logo span {
  font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: 0.3em;
  text-transform: uppercase; background: var(--chrome-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-left: 0.3em; white-space: nowrap;
}
.ds-navbar-cta {
  display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #eaf3ff; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(150,200,255,0.35);
  background: linear-gradient(162deg, rgba(74,144,226,0.28), rgba(20,40,80,0.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 16px rgba(59,158,255,0.22);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s, filter .25s;
}
.ds-navbar-cta:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 26px rgba(59,158,255,0.45); }
.ds-navbar-cta:active { transform: translateY(0) scale(.97); }

.ds-navbar-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 42px; padding: 0 12px; border-radius: 14px; flex: 0 0 auto;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(154,163,184,0.22); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.ds-navbar-toggle:hover { background: rgba(255,255,255,0.09); border-color: rgba(59,158,255,0.4); }
.ds-navbar-toggle span { display: block; height: 1.5px; width: 100%; background: var(--text-primary); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.ds-navbar.open .ds-navbar-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ds-navbar.open .ds-navbar-toggle span:nth-child(2) { opacity: 0; }
.ds-navbar.open .ds-navbar-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.ds-navbar-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 250px;
  display: none; flex-direction: column; padding: 12px; gap: 2px;
  background: linear-gradient(160deg, rgba(32,38,52,0.94), rgba(16,20,28,0.97));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(154,163,184,0.22); border-radius: 20px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.55);
}
.ds-navbar.open .ds-navbar-menu { display: flex; }
.ds-navbar-menu a {
  padding: 13px 16px; border-radius: 12px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.ds-navbar-menu a:hover { background: rgba(59,158,255,0.12); color: var(--text-heading); }
.ds-navbar-menu a.active { color: var(--text-heading); background: rgba(59,158,255,0.10); }

@media (max-width: 480px) {
  .ds-navbar { padding-left: 16px; }
  .ds-navbar-cta { padding: 10px 16px; letter-spacing: 0.1em; }
  .ds-navbar-logo span { font-size: 12px; letter-spacing: 0.22em; }
}

/* ============================================================================
   Flowing silver lines — thin chrome streaks that drift across every page.
   A fixed, click-through overlay above the section backgrounds but below the
   sticky nav (z 50+) and any modals.
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    118deg,
    transparent 0, transparent 86px,
    rgba(206, 218, 236, 0.05) 86px,
    rgba(255, 255, 255, 0.10) 87px,
    rgba(206, 218, 236, 0.05) 88px,
    transparent 88px, transparent 172px
  );
  background-size: 340px 340px;
  animation: ds-silver-flow 26s linear infinite;
}
@keyframes ds-silver-flow {
  from { background-position: 0 0; }
  to   { background-position: 680px 680px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ============================================================================
   Softer dark theme — lift the whole site off pure black into a deep charcoal
   so it still reads premium/dark but isn't a flat black field. Overriding the
   core tokens cascades to every surface that references them; the hardcoded
   html/body blacks are lifted to match.
   ========================================================================== */
:root {
  --void-black:     #12161f !important;  /* was #060608 — primary background */
  --deep-black:     #1a1f2b !important;  /* was #0E1117 — section breaks     */
  --surface-dark:   #212734 !important;  /* cards / modals                    */
  --surface-raised: #2a3140 !important;  /* hover / elevated surfaces         */
}
html, body { background: #12161f !important; }

/* Some page wrappers / sections hardcode a solid black fill instead of the
   token — lift those to the new charcoal too. (Gradients/rgba overlays that
   fade to black are left alone so cinematic vignettes still work.) */
[style*="background: #000"], [style*="background:#000"],
[style*="background: #060608"], [style*="background:#060608"],
[style*="background: #0E1117"], [style*="background:#0E1117"],
[style*="background: rgb(0, 0, 0)"],
[style*="background: rgb(6, 6, 8)"],
[style*="background: rgb(14, 17, 23)"] {
  background-color: var(--void-black) !important;
}

/* ============================================================================
   Luxury service cards — richer glass surface, chrome-tinted edge, a soft
   inner highlight, a lift + blue glow on hover, and a chrome sheen that
   sweeps across. Targets the Order-hub cards and the homepage service tiles.
   ========================================================================== */
.ds-service-tile,
.ds-comp-card,
a[style*="min-height: 280px"] {
  position: relative;
  border: 1px solid rgba(154, 163, 184, 0.22) !important;   /* chrome hairline */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 34px rgba(0, 0, 0, 0.42) !important;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease !important;
  overflow: hidden;
}

/* The Order-hub cards are a flat fill — give them a subtle graded glass. */
a[style*="min-height: 280px"] {
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(120, 150, 205, 0.12), transparent 55%),
    linear-gradient(158deg, rgba(42, 50, 70, 0.55), rgba(24, 30, 44, 0.80)) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Chrome sheen sweep on hover. */
.ds-service-tile::after,
.ds-comp-card::after,
a[style*="min-height: 280px"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(118deg, transparent 40%, rgba(216, 220, 230, 0.10) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.ds-service-tile:hover::after,
.ds-comp-card:hover::after,
a[style*="min-height: 280px"]:hover::after { transform: translateX(120%); }

/* Keep card content above the sheen layer. */
.ds-service-tile > *,
.ds-comp-card > *,
a[style*="min-height: 280px"] > * { position: relative; z-index: 2; }

.ds-service-tile:hover,
.ds-comp-card:hover,
a[style*="min-height: 280px"]:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(59, 158, 255, 0.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 46px rgba(59, 158, 255, 0.22) !important;
}

/* "Configure" CTA inside the cards -> refined glass pill. */
.ds-service-tile .ds-link-cta,
a[style*="min-height: 280px"] .ds-link-cta {
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(59, 158, 255, 0.35);
  background: linear-gradient(160deg, rgba(59, 158, 255, 0.16), rgba(20, 40, 80, 0.24));
  color: #dcebff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ds-service-tile .ds-link-cta:hover,
a[style*="min-height: 280px"] .ds-link-cta:hover {
  border-color: rgba(59, 158, 255, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 18px rgba(59, 158, 255, 0.40);
  transform: translateY(-1px);
}