:root {
  --color-ink: 0 0 0;
  --color-panel: 5 8 14;
  --color-line: 255 255 255;
  --color-muted: 170 180 198;
  --color-electric: 0 92 255;
  --color-violet: 0 139 255;
  --radius-card: 1.5rem;
  --shadow-soft: 0 24px 70px rgb(0 0 0 / 0.34);
  --shadow-accent: 0 30px 90px rgb(0 92 255 / 0.28);
}

[x-cloak] {
  display: none !important;
}

.bg-ink {
  background-color: rgb(var(--color-ink));
}

.bg-ink\/45 {
  background-color: rgb(var(--color-ink) / 0.45);
}

.bg-ink\/85 {
  background-color: rgb(var(--color-ink) / 0.85);
}

.text-electric {
  color: rgb(var(--color-electric));
}

.text-ink {
  color: rgb(var(--color-ink));
}

.text-violet {
  color: rgb(var(--color-violet));
}

.border-t-electric {
  border-top-color: rgb(var(--color-electric));
}

.shadow-glow {
  box-shadow: 0 24px 80px rgb(0 92 255 / 0.3);
}

.from-electric,
.from-electric\/30 {
  --tw-gradient-from: rgb(var(--color-electric)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-electric) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-electric\/30 {
  --tw-gradient-from: rgb(var(--color-electric) / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-electric) / 0) var(--tw-gradient-to-position);
}

.to-violet {
  --tw-gradient-to: rgb(var(--color-violet)) var(--tw-gradient-to-position);
}

.to-violet\/30 {
  --tw-gradient-to: rgb(var(--color-violet) / 0.3) var(--tw-gradient-to-position);
}

.focus\:border-electric:focus {
  border-color: rgb(var(--color-electric));
}

.focus\:ring-electric:focus {
  --tw-ring-color: rgb(var(--color-electric));
}

@layer base {
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at top left, rgb(0 92 255 / 0.22), transparent 34rem),
      radial-gradient(circle at 78% 8%, rgb(255 255 255 / 0.09), transparent 22rem),
      linear-gradient(180deg, #02040a 0%, #000 52%, #03060d 100%);
    color: white;
    font-family: Inter, Geist, ui-sans-serif, system-ui, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::selection {
    background: rgb(0 92 255 / 0.42);
  }

  :focus-visible {
    outline: 2px solid rgb(0 92 255);
    outline-offset: 4px;
  }
}

@layer components {
  .logo-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0 92 255 / 0.42);
    border-radius: 1rem;
    background: #02040a;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.07) inset,
      0 18px 55px rgb(0 92 255 / 0.34);
  }

  .logo-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 28%, rgb(255 255 255 / 0.26), transparent 64%);
    opacity: 0;
    transform: translateX(-45%);
    transition: opacity 220ms ease, transform 520ms ease;
  }

  .group:hover .logo-mark::after,
  .logo-mark:hover::after {
    opacity: 1;
    transform: translateX(45%);
  }

  .site-shell {
    width: min(100% - 1.25rem, 1180px);
    margin-inline: auto;
  }

  .reveal {
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .local-proof-strip {
    display: grid;
    gap: 0.7rem;
    max-width: 42rem;
  }

  .local-proof-strip > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.1rem;
    background:
      linear-gradient(135deg, rgb(0 92 255 / 0.13), rgb(255 255 255 / 0.05));
    padding: 0.85rem;
    box-shadow: 0 16px 44px rgb(0 0 0 / 0.22);
  }

  .local-proof-strip i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .local-proof-strip span,
  .local-proof-strip strong,
  .local-proof-strip small {
    display: block;
  }

  .local-proof-strip strong {
    color: white;
    font-size: 0.92rem;
    font-weight: 900;
  }

  .local-proof-strip small {
    margin-top: 0.12rem;
    color: rgb(255 255 255 / 0.52);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .hero-action-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgb(255 255 255 / 0.62);
    font-size: 0.92rem;
    font-weight: 800;
  }

  .hero-action-note i {
    color: rgb(125 178 255);
  }

  .trust-ribbon {
    display: grid;
    gap: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background:
      linear-gradient(135deg, rgb(0 92 255 / 0.14), rgb(255 255 255 / 0.045)),
      rgb(255 255 255 / 0.025);
    padding: clamp(0.8rem, 2.4vw, 1rem);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
  }

  .trust-ribbon > div {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 1.05rem;
    background: rgb(255 255 255 / 0.045);
    padding: 0.85rem;
  }

  .trust-ribbon i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .trust-ribbon strong,
  .trust-ribbon small {
    display: block;
  }

  .trust-ribbon strong {
    color: white;
    font-weight: 900;
  }

  .trust-ribbon small {
    margin-top: 0.15rem;
    color: rgb(255 255 255 / 0.56);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .nav-link {
    position: relative;
    color: rgb(255 255 255 / 0.76);
    transition: color 180ms ease;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: white;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 1px;
    background: linear-gradient(90deg, #005cff, #ffffff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
  }

  .nav-link:hover::after,
  .nav-link:focus-visible::after {
    transform: scaleX(1);
  }

  .btn-gradient {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    border-radius: 999px;
    background-size: 180% 180%;
    background-image: linear-gradient(110deg, #005cff, #008bff, #ffffff, #005cff);
    padding: 0.75rem 1.15rem;
    color: white;
    font-weight: 700;
    box-shadow:
      0 18px 50px rgb(0 92 255 / 0.34),
      0 0 0 1px rgb(255 255 255 / 0.16) inset;
    transition: background-position 250ms ease, transform 180ms ease, box-shadow 180ms ease;
    will-change: transform;
  }

  .btn-gradient:hover {
    background-position: 100% 50%;
    box-shadow:
      0 22px 72px rgb(0 92 255 / 0.42),
      0 0 0 1px rgb(255 255 255 / 0.26) inset;
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.06);
    padding: 0.75rem 1.15rem;
    color: white;
    font-weight: 700;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
  }

  .btn-ghost:hover {
    border-color: rgb(255 255 255 / 0.28);
    background: rgb(255 255 255 / 0.1);
    transform: translateY(-1px);
  }

  .glass-card {
    border: 1px solid rgb(255 255 255 / 0.1);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.095), rgb(255 255 255 / 0.035)),
      radial-gradient(circle at top left, rgb(0 92 255 / 0.16), transparent 19rem);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(22px);
  }

  .hero-console {
    box-shadow:
      0 30px 90px rgb(0 0 0 / 0.45),
      0 0 120px rgb(0 92 255 / 0.24);
  }

  .hero-console > div {
    position: relative;
    overflow: hidden;
  }

  .hero-console > div::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, rgb(0 92 255 / 0.22), transparent 42%),
      radial-gradient(circle at 85% 15%, rgb(255 255 255 / 0.12), transparent 12rem);
    pointer-events: none;
  }

  .hero-console > div > * {
    position: relative;
    z-index: 1;
  }

  .image-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-card);
    background: #02040a;
    box-shadow:
      0 24px 70px rgb(0 0 0 / 0.34),
      0 0 90px rgb(0 92 255 / 0.18);
  }

  .image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 44%, rgb(0 0 0 / 0.42)),
      radial-gradient(circle at 20% 12%, rgb(0 92 255 / 0.28), transparent 22rem);
    pointer-events: none;
  }

  .image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    object-fit: cover;
    transition: transform 520ms ease, filter 520ms ease;
  }

  .image-frame:hover img {
    transform: scale(1.035);
    filter: saturate(1.08);
  }

  .cinematic-frame {
    isolation: isolate;
  }

  .cinematic-frame::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    background:
      linear-gradient(115deg, transparent 24%, rgb(255 255 255 / 0.18), transparent 42%),
      radial-gradient(circle at 80% 18%, rgb(0 92 255 / 0.34), transparent 17rem);
    animation: cinematicSweep 6.8s ease-in-out infinite;
    pointer-events: none;
  }

  .cinematic-frame::after {
    z-index: 2;
    background:
      repeating-linear-gradient(180deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 9px),
      linear-gradient(180deg, transparent 44%, rgb(0 0 0 / 0.5)),
      radial-gradient(circle at 20% 12%, rgb(0 92 255 / 0.24), transparent 22rem);
    opacity: 0.8;
  }

  .motion-scan {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, transparent, rgb(0 139 255 / 0.28), transparent);
    opacity: 0.65;
    transform: translateY(-100%);
    animation: scanLine 4.8s linear infinite;
    pointer-events: none;
  }

  .motion-dot {
    position: absolute;
    z-index: 4;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #69a7ff;
    box-shadow: 0 0 22px rgb(0 139 255 / 0.95);
    animation: signalFloat 4.8s ease-in-out infinite;
    pointer-events: none;
  }

  .dot-one {
    top: 18%;
    right: 21%;
  }

  .dot-two {
    top: 48%;
    right: 11%;
    animation-delay: 0.8s;
  }

  .dot-three {
    right: 34%;
    bottom: 22%;
    animation-delay: 1.5s;
  }

  .image-frame-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 1.1rem;
    background:
      linear-gradient(135deg, rgb(0 92 255 / 0.12), rgb(255 255 255 / 0.035)),
      rgb(0 0 0 / 0.82);
    padding: 0.85rem 1rem;
    box-shadow:
      0 18px 55px rgb(0 0 0 / 0.5),
      0 0 0 1px rgb(0 92 255 / 0.14) inset;
    backdrop-filter: blur(22px);
  }

  .image-frame-caption strong,
  .image-frame-caption span {
    display: block;
  }

  .image-frame-caption strong {
    color: white;
    font-size: clamp(0.95rem, 3.6vw, 1.08rem);
    font-weight: 900;
    line-height: 1.15;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.8);
  }

  .image-frame-caption span {
    margin-top: 0.22rem;
    color: rgb(255 255 255 / 0.78);
    font-size: clamp(0.78rem, 3.1vw, 0.86rem);
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 2px 14px rgb(0 0 0 / 0.75);
  }

  .demo-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-card);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.03)),
      #03060d;
    box-shadow: var(--shadow-soft);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  }

  .demo-card:hover {
    transform: translateY(-7px);
    border-color: rgb(0 92 255 / 0.5);
    box-shadow: var(--shadow-accent);
  }

  .demo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 520ms ease, filter 520ms ease;
  }

  .demo-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
  }

  .demo-card-body {
    position: relative;
    padding: clamp(1rem, 2.5vw, 1.35rem);
  }

  .demo-card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 0%, rgb(0 92 255 / 0.18), transparent 16rem);
    pointer-events: none;
  }

  .demo-card-body > * {
    position: relative;
    z-index: 1;
  }

  .demo-card h3 {
    color: white;
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 900;
    line-height: 1.15;
  }

  .demo-card p {
    margin-top: 0.65rem;
    color: rgb(255 255 255 / 0.6);
    line-height: 1.65;
  }

  .demo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
  }

  .demo-tags span {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.055);
    padding: 0.38rem 0.65rem;
    color: rgb(255 255 255 / 0.62);
    font-size: 0.76rem;
    font-weight: 800;
  }

  .motion-benefit {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.2rem;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.13), rgb(255 255 255 / 0.045));
    padding: 1rem;
    box-shadow: 0 18px 46px rgb(0 0 0 / 0.2);
  }

  .motion-benefit i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .motion-benefit strong,
  .motion-benefit small {
    display: block;
  }

  .motion-benefit strong {
    color: white;
    font-weight: 900;
  }

  .motion-benefit small {
    margin-top: 0.2rem;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .motion-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at 80% 0%, rgb(0 92 255 / 0.24), transparent 20rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.025));
    padding: clamp(0.85rem, 2.5vw, 1.35rem);
    box-shadow: var(--shadow-soft);
  }

  .motion-stage::before {
    content: "";
    position: absolute;
    inset: -30%;
    background:
      conic-gradient(from 160deg, transparent, rgb(0 92 255 / 0.26), transparent, rgb(255 255 255 / 0.12), transparent);
    animation: softRotate 14s linear infinite;
    pointer-events: none;
  }

  .motion-browser {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 1.35rem;
    background: rgb(2 4 10 / 0.9);
    box-shadow:
      0 20px 70px rgb(0 0 0 / 0.42),
      0 0 70px rgb(0 92 255 / 0.18);
    animation: motionFloat 6s ease-in-out infinite;
  }

  .motion-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.09);
    padding: 0.75rem 0.9rem;
  }

  .motion-browser-bar span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.26);
  }

  .motion-browser-bar span:first-child {
    background: rgb(0 92 255);
  }

  .motion-browser-bar strong {
    margin-left: auto;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
  }

  .motion-screen {
    position: relative;
    overflow: hidden;
  }

  .motion-screen img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transform: scale(1.04);
    animation: slowZoom 10s ease-in-out infinite alternate;
  }

  .motion-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(0 0 0 / 0.62), transparent 45%),
      repeating-linear-gradient(180deg, rgb(255 255 255 / 0.045) 0 1px, transparent 1px 10px);
  }

  .motion-line {
    position: absolute;
    left: 9%;
    height: 0.58rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #005cff, #ffffff, transparent);
    box-shadow: 0 0 24px rgb(0 92 255 / 0.55);
    animation: drawLine 3.8s ease-in-out infinite;
  }

  .line-a {
    top: 24%;
    width: 34%;
  }

  .line-b {
    top: 34%;
    width: 26%;
    animation-delay: 0.45s;
  }

  .line-c {
    top: 48%;
    width: 42%;
    animation-delay: 0.9s;
  }

  .motion-pulse {
    position: absolute;
    width: 4.4rem;
    height: 4.4rem;
    border: 1px solid rgb(0 139 255 / 0.55);
    border-radius: 999px;
    box-shadow: 0 0 35px rgb(0 92 255 / 0.4);
    animation: pulseRing 3.6s ease-out infinite;
  }

  .pulse-a {
    top: 18%;
    right: 19%;
  }

  .pulse-b {
    right: 34%;
    bottom: 18%;
    animation-delay: 1.4s;
  }

  .motion-timeline {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 0.55rem;
    padding: 0.85rem;
  }

  .motion-timeline span {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.1);
  }

  .motion-timeline span::before {
    content: "";
    display: block;
    width: 55%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #005cff, #ffffff);
    animation: timelineFill 4.4s ease-in-out infinite;
  }

  .motion-timeline span:nth-child(2)::before {
    animation-delay: 0.45s;
  }

  .motion-timeline span:nth-child(3)::before {
    animation-delay: 0.9s;
  }

  .audit-shell {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at 18% 0%, rgb(0 92 255 / 0.2), transparent 22rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.025));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
  }

  .audit-tabs {
    display: grid;
    gap: 0.55rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.09);
    padding: 0.75rem;
  }

  .audit-tabs button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.055);
    color: rgb(255 255 255 / 0.66);
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
  }

  .audit-tabs button:hover,
  .audit-tabs button.is-active {
    border-color: rgb(0 92 255 / 0.52);
    background: linear-gradient(110deg, rgb(0 92 255 / 0.34), rgb(255 255 255 / 0.1));
    color: white;
    transform: translateY(-1px);
  }

  .audit-content {
    padding: clamp(1rem, 3vw, 1.4rem);
  }

  .audit-panel {
    display: grid;
    gap: 1.25rem;
    align-items: center;
  }

  .audit-score {
    display: grid;
    min-height: 10rem;
    place-items: center;
    border: 1px solid rgb(0 92 255 / 0.28);
    border-radius: 1.45rem;
    background:
      radial-gradient(circle at center, rgb(0 92 255 / 0.34), transparent 9rem),
      rgb(0 0 0 / 0.32);
    box-shadow: 0 24px 70px rgb(0 92 255 / 0.14);
    text-align: center;
  }

  .audit-score strong {
    display: block;
    color: white;
    font-size: clamp(2.2rem, 9vw, 4.6rem);
    font-weight: 1000;
    line-height: 0.9;
  }

  .audit-score span {
    margin-top: 0.5rem;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.82rem;
    font-weight: 900;
  }

  .audit-panel h3 {
    color: white;
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 950;
    line-height: 1.1;
  }

  .audit-panel p {
    margin-top: 0.75rem;
    max-width: 46rem;
    color: rgb(255 255 255 / 0.62);
    line-height: 1.75;
  }

  .audit-checks {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
  }

  .audit-checks li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    color: rgb(255 255 255 / 0.7);
    font-weight: 750;
    line-height: 1.45;
  }

  .audit-checks i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: rgb(125 178 255);
  }

  .audit-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    justify-content: space-between;
    border-top: 1px solid rgb(255 255 255 / 0.09);
    padding: clamp(1rem, 2.8vw, 1.25rem);
  }

  .audit-cta span {
    color: rgb(255 255 255 / 0.62);
    font-weight: 800;
    line-height: 1.55;
  }

  .appointment-panel {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at 8% 0%, rgb(0 92 255 / 0.2), transparent 22rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.03));
    padding: clamp(1rem, 3vw, 1.35rem);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
  }

  .appointment-slots,
  .appointment-form {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.45rem;
    background: rgb(0 0 0 / 0.22);
    padding: clamp(1rem, 2.6vw, 1.25rem);
  }

  .appointment-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
  }

  .appointment-head strong {
    display: block;
    color: white;
    font-size: 1.2rem;
    font-weight: 950;
  }

  .appointment-head p {
    margin-top: 0.2rem;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.9rem;
  }

  .slot-grid {
    display: grid;
    gap: 0.75rem;
  }

  .calendar-slot-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .calendar-date-grid {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }

  .classic-calendar {
    display: grid;
    gap: 1rem;
  }

  .classic-calendar-month {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.25rem;
    background:
      radial-gradient(circle at top right, rgb(59 130 246 / 0.14), transparent 12rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.03));
    padding: 1rem;
  }

  .classic-calendar-month h3 {
    margin-bottom: 0.85rem;
    color: white;
    font-size: 1rem;
    font-weight: 950;
  }

  .classic-calendar-weekdays,
  .classic-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .classic-calendar-weekdays {
    margin-bottom: 0.45rem;
  }

  .classic-calendar-weekdays span {
    color: rgb(255 255 255 / 0.42);
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
  }

  .classic-calendar-empty {
    min-height: 3rem;
  }

  .classic-calendar-day {
    display: grid;
    min-width: 0;
    min-height: 3.25rem;
    place-items: center;
    gap: 0.1rem;
    border: 1px solid rgb(255 255 255 / 0.09);
    border-radius: 0.8rem;
    background: rgb(255 255 255 / 0.045);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .classic-calendar-day strong {
    color: white;
    font-weight: 950;
    line-height: 1;
  }

  .classic-calendar-day small {
    color: rgb(125 178 255);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
  }

  .classic-calendar-day:hover,
  .classic-calendar-day.is-active {
    border-color: rgb(59 130 246 / 0.85);
    background: linear-gradient(135deg, rgb(59 130 246 / 0.28), rgb(139 92 246 / 0.14));
    box-shadow: 0 14px 34px rgb(0 92 255 / 0.14);
    transform: translateY(-2px);
  }

  .classic-calendar-day:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.25;
    transform: none;
  }

  .calendar-time-grid {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    margin-top: 0.95rem;
  }

  .slot-card {
    display: grid;
    gap: 0.2rem;
    min-height: 4.25rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.05rem;
    background: rgb(255 255 255 / 0.045);
    padding: 0.9rem 1rem;
    text-align: left;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .calendar-slot-card {
    position: relative;
    overflow: hidden;
    min-height: 5.25rem;
  }

  .calendar-date-card,
  .calendar-time-card {
    min-height: 4.6rem;
  }

  .calendar-date-card.is-active,
  .calendar-time-card.is-active {
    border-color: rgb(59 130 246 / 0.85);
    background:
      linear-gradient(135deg, rgb(59 130 246 / 0.3), rgb(139 92 246 / 0.16)),
      rgb(255 255 255 / 0.06);
  }

  .calendar-slot-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgb(0 92 255 / 0.18), transparent 12rem);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
  }

  .calendar-slot-card:hover::before,
  .calendar-slot-card.is-active::before {
    opacity: 1;
  }

  .slot-card span {
    color: white;
    font-weight: 900;
  }

  .slot-card small {
    color: rgb(255 255 255 / 0.58);
    font-weight: 750;
  }

  .slot-card:hover,
  .slot-card.is-active {
    transform: translateY(-2px);
    border-color: rgb(0 92 255 / 0.56);
    background: linear-gradient(135deg, rgb(0 92 255 / 0.22), rgb(255 255 255 / 0.07));
    box-shadow: 0 18px 45px rgb(0 92 255 / 0.16);
  }

  .slot-card:disabled {
    cursor: not-allowed;
    opacity: 0.44;
    transform: none;
    box-shadow: none;
  }

  .appointment-summary {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    border: 1px solid rgb(0 92 255 / 0.36);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.18), rgb(255 255 255 / 0.055));
    padding: 0.95rem;
  }

  .appointment-summary i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .appointment-summary strong,
  .appointment-summary small {
    display: block;
  }

  .calendar-admin-card {
    min-width: 0;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.35rem;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.03)),
      radial-gradient(circle at top left, rgb(0 92 255 / 0.12), transparent 16rem);
    padding: 1.1rem;
    box-shadow: 0 18px 55px rgb(0 0 0 / 0.2);
  }

  .calendar-admin-card strong,
  .calendar-admin-card span {
    display: block;
  }

  .calendar-admin-card strong {
    color: white;
    font-weight: 950;
  }

  .calendar-admin-card span {
    margin-top: 0.25rem;
    color: rgb(255 255 255 / 0.56);
    font-size: 0.86rem;
    font-weight: 750;
  }

  .owner-appointments-page {
    position: relative;
    isolation: isolate;
    padding-top: clamp(7.5rem, 12vw, 10rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
  }

  .owner-appointments-page::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 5rem -10vw auto;
    height: 26rem;
    background:
      radial-gradient(circle at 20% 20%, rgb(59 130 246 / 0.22), transparent 19rem),
      radial-gradient(circle at 78% 18%, rgb(139 92 246 / 0.18), transparent 18rem);
    filter: blur(4px);
    pointer-events: none;
  }

  .owner-appointments-hero {
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .owner-appointments-hero h1 {
    max-width: 52rem;
    color: white;
    font-size: clamp(2.15rem, 7vw, 4.7rem);
    font-weight: 1000;
    line-height: 0.98;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .owner-appointments-hero p {
    max-width: 42rem;
    color: rgb(255 255 255 / 0.6);
    font-size: 1rem;
    line-height: 1.75;
  }

  .owner-appointments-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .owner-appointments-stats .dashboard-card {
    min-height: 9.5rem;
    overflow: hidden;
    position: relative;
  }

  .owner-appointments-stats .dashboard-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -42% auto;
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    background: rgb(59 130 246 / 0.18);
    filter: blur(28px);
  }

  .owner-appointments-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: start;
  }

  .owner-appointments-side {
    display: grid;
    gap: 1.5rem;
  }

  .owner-appointments-page .glass-card {
    border-color: rgb(255 255 255 / 0.12);
    background:
      radial-gradient(circle at top right, rgb(59 130 246 / 0.13), transparent 18rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.088), rgb(255 255 255 / 0.032));
    box-shadow: 0 26px 80px rgb(0 0 0 / 0.34);
  }

  .owner-appointments-page h2 {
    color: white;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    font-weight: 950;
    line-height: 1.1;
  }

  .owner-appointments-page .lead-card {
    border-color: rgb(255 255 255 / 0.11);
    padding: clamp(1rem, 3vw, 1.25rem);
  }

  .owner-appointments-page .lead-card h3 {
    color: white;
    font-size: clamp(1.05rem, 3vw, 1.28rem);
    font-weight: 950;
    line-height: 1.2;
  }

  .request-action-form {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(10rem, 0.9fr) minmax(12rem, 1.35fr) auto;
    align-items: center;
  }

  .request-action-form select,
  .request-action-form input,
  .calendar-admin-card input,
  .calendar-admin-card select,
  .calendar-admin-card textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgb(255 255 255 / 0.11);
    border-radius: 1rem;
    background: rgb(0 0 0 / 0.28);
    color: white;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.025) inset;
  }

  .request-action-form select,
  .request-action-form input,
  .calendar-admin-card input,
  .calendar-admin-card select {
    min-height: 3rem;
    padding-inline: 0.9rem;
  }

  .calendar-admin-card textarea {
    min-height: 6.5rem;
    resize: vertical;
    padding: 0.85rem 0.9rem;
  }

  .request-action-form select:focus,
  .request-action-form input:focus,
  .calendar-admin-card input:focus,
  .calendar-admin-card select:focus,
  .calendar-admin-card textarea:focus {
    border-color: rgb(59 130 246 / 0.78);
    box-shadow: 0 0 0 4px rgb(59 130 246 / 0.18);
    outline: none;
  }

  .slot-admin-section {
    overflow: hidden;
  }

  .slots-admin-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-admin-card {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .calendar-admin-card:hover {
    border-color: rgb(59 130 246 / 0.4);
    box-shadow: 0 24px 70px rgb(0 92 255 / 0.14);
    transform: translateY(-3px);
  }

  .workday-toggle {
    position: relative;
    display: grid;
    cursor: pointer;
  }

  .workday-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .workday-toggle span {
    display: grid;
    min-height: 2.6rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 0.95rem;
    background: rgb(255 255 255 / 0.045);
    color: rgb(255 255 255 / 0.62);
    font-weight: 900;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .workday-toggle input:checked + span {
    border-color: rgb(0 92 255 / 0.55);
    background: linear-gradient(110deg, rgb(0 92 255 / 0.36), rgb(139 92 246 / 0.18));
    color: white;
    box-shadow: 0 14px 34px rgb(0 92 255 / 0.14);
  }

  .appointment-summary strong {
    color: white;
    font-weight: 950;
  }

  .appointment-summary small {
    margin-top: 0.15rem;
    color: rgb(255 255 255 / 0.6);
    font-size: 0.82rem;
    font-weight: 750;
  }

  .customer-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.05rem;
    background: rgb(255 255 255 / 0.04);
    padding: 0.35rem;
  }

  .customer-toggle button {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.85rem;
    color: rgb(255 255 255 / 0.62);
    font-weight: 900;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .customer-toggle button.is-active {
    background: linear-gradient(110deg, rgb(0 92 255 / 0.45), rgb(255 255 255 / 0.12));
    color: white;
    box-shadow: 0 14px 34px rgb(0 92 255 / 0.18);
  }

  .portal-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.12), rgb(255 255 255 / 0.045));
    padding: 1rem;
  }

  .portal-card strong,
  .portal-card span,
  .portal-card b {
    display: block;
  }

  .portal-card strong,
  .portal-card b {
    color: white;
    font-weight: 950;
  }

  .portal-card span {
    margin-top: 0.18rem;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.86rem;
    font-weight: 750;
  }

  .ticket-message {
    border: 1px solid rgb(255 255 255 / 0.09);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.045);
    padding: 0.9rem;
  }

  .ticket-message.is-admin {
    border-color: rgb(0 92 255 / 0.22);
    background: linear-gradient(135deg, rgb(0 92 255 / 0.14), rgb(255 255 255 / 0.045));
  }

  .ticket-message strong {
    display: block;
    color: rgb(159 197 255);
    font-size: 0.84rem;
    font-weight: 950;
  }

  .ticket-message small {
    display: block;
    margin-top: 0.2rem;
    color: rgb(255 255 255 / 0.42);
    font-size: 0.75rem;
    font-weight: 800;
  }

  .ticket-message p {
    margin-top: 0.35rem;
    color: rgb(255 255 255 / 0.7);
    line-height: 1.6;
    white-space: pre-wrap;
  }

  .owner-portrait {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at 18% 0%, rgb(0 92 255 / 0.24), transparent 20rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.025));
    padding: 0.65rem;
    box-shadow:
      0 30px 90px rgb(0 0 0 / 0.42),
      0 0 90px rgb(0 92 255 / 0.16);
  }

  .owner-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 48%, rgb(0 0 0 / 0.72)),
      radial-gradient(circle at 80% 12%, rgb(0 92 255 / 0.22), transparent 16rem);
    pointer-events: none;
  }

  .owner-portrait img {
    display: block;
    width: 100%;
    min-height: 30rem;
    max-height: 42rem;
    border-radius: 1.35rem;
    object-fit: cover;
    object-position: center top;
    filter: saturate(1.03) contrast(1.02);
  }

  .owner-badge {
    position: absolute;
    z-index: 1;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 1.2rem;
    background:
      linear-gradient(135deg, rgb(0 92 255 / 0.16), rgb(255 255 255 / 0.045)),
      rgb(0 0 0 / 0.76);
    padding: 1rem;
    box-shadow: 0 18px 55px rgb(0 0 0 / 0.46);
    backdrop-filter: blur(18px);
  }

  .owner-badge strong,
  .owner-badge span {
    display: block;
  }

  .owner-badge strong {
    color: white;
    font-size: 1.15rem;
    font-weight: 950;
  }

  .owner-badge span {
    margin-top: 0.18rem;
    color: rgb(255 255 255 / 0.68);
    font-size: 0.86rem;
    font-weight: 800;
  }

  .owner-values {
    display: grid;
    gap: 0.75rem;
  }

  .owner-values > div {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.13), rgb(255 255 255 / 0.045));
    padding: 1rem;
    box-shadow: 0 18px 46px rgb(0 0 0 / 0.2);
  }

  .owner-values i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .owner-values strong,
  .owner-values small {
    display: block;
  }

  .owner-values strong {
    color: white;
    font-weight: 950;
  }

  .owner-values small {
    margin-top: 0.18rem;
    color: rgb(255 255 255 / 0.6);
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .service-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: 1px solid rgb(255 255 255 / 0.1);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.035)),
      rgb(255 255 255 / 0.03);
    padding: clamp(1.05rem, 2.4vw, 1.45rem);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
  }

  .quick-contact-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 4.25rem;
    border: 1px solid rgb(0 92 255 / 0.28);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.14), rgb(255 255 255 / 0.055));
    padding: 0.95rem 1rem;
    color: white;
    box-shadow: 0 18px 46px rgb(0 0 0 / 0.22);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  }

  .quick-contact-card:hover {
    transform: translateY(-2px);
    border-color: rgb(0 92 255 / 0.48);
    background: linear-gradient(135deg, rgb(0 92 255 / 0.2), rgb(255 255 255 / 0.075));
  }

  .quick-contact-card strong,
  .quick-contact-card small {
    display: block;
  }

  .quick-contact-card small {
    margin-top: 0.1rem;
    color: rgb(255 255 255 / 0.55);
    font-size: 0.78rem;
  }

  .contact-info-panel {
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at top left, rgb(0 92 255 / 0.13), transparent 20rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015));
    padding: clamp(1rem, 2.8vw, 1.5rem);
    box-shadow: 0 24px 70px rgb(0 0 0 / 0.22);
  }

  .contact-meta-list {
    display: grid;
    gap: 0.75rem;
  }

  .contact-meta-list > div {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.15rem;
    background: rgb(255 255 255 / 0.055);
    padding: 0.9rem;
  }

  .contact-meta-list i {
    color: rgb(125 178 255);
    flex: 0 0 auto;
  }

  .contact-meta-list small,
  .contact-meta-list strong {
    display: block;
  }

  .contact-meta-list small {
    color: rgb(255 255 255 / 0.45);
    font-size: 0.78rem;
    font-weight: 800;
  }

  .contact-meta-list strong {
    margin-top: 0.12rem;
    color: white;
    font-size: 0.95rem;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .contact-form-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.11);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at 88% 0%, rgb(0 92 255 / 0.2), transparent 18rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.105), rgb(255 255 255 / 0.035));
    padding: clamp(1rem, 3vw, 2rem);
    box-shadow: 0 32px 90px rgb(0 0 0 / 0.36), 0 0 90px rgb(0 92 255 / 0.12);
    backdrop-filter: blur(22px);
  }

  .contact-form-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.09);
    padding-bottom: 1.1rem;
  }

  .contact-form-head strong {
    display: block;
    color: white;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
  }

  .contact-form-head p {
    margin-top: 0.22rem;
    color: rgb(255 255 255 / 0.52);
    font-size: 0.92rem;
  }

  .contact-intent {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.15rem;
    background: rgb(255 255 255 / 0.045);
    padding: 0.95rem;
    color: rgb(255 255 255 / 0.64);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .contact-intent.is-active {
    border-color: rgb(0 92 255 / 0.46);
    background: linear-gradient(135deg, rgb(0 92 255 / 0.16), rgb(255 255 255 / 0.06));
    box-shadow: 0 18px 45px rgb(0 92 255 / 0.12);
  }

  .contact-intent i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .contact-intent strong,
  .contact-intent small {
    display: block;
  }

  .contact-intent strong {
    color: white;
    font-weight: 900;
  }

  .contact-intent small {
    margin-top: 0.16rem;
    color: rgb(255 255 255 / 0.6);
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .contact-field {
    display: grid;
    gap: 0.48rem;
    color: rgb(255 255 255 / 0.72);
    font-size: 0.9rem;
    font-weight: 800;
  }

  .contact-field > span:first-child {
    padding-left: 0.15rem;
  }

  .contact-field input,
  .contact-field textarea,
  .contact-field select {
    width: 100%;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.05rem;
    background: rgb(0 0 0 / 0.24);
    color: white;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.025) inset;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }

  .contact-field input,
  .contact-field select {
    min-height: 3.2rem;
    padding-inline: 1rem;
  }

  .contact-field textarea {
    min-height: 10.5rem;
    resize: vertical;
    padding: 0.9rem 1rem;
  }

  .contact-field input:focus,
  .contact-field textarea:focus,
  .contact-field select:focus {
    border-color: rgb(0 92 255 / 0.72);
    background: rgb(0 0 0 / 0.32);
    box-shadow: 0 0 0 4px rgb(0 92 255 / 0.18);
    outline: none;
  }

  .location-map {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background:
      radial-gradient(circle at top left, rgb(0 92 255 / 0.14), transparent 16rem),
      rgb(255 255 255 / 0.045);
    box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
  }

  .location-map iframe {
    display: block;
    width: 100%;
    height: 19rem;
    border: 0;
    filter: saturate(0.95) contrast(1.05);
  }

  .location-map > div {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
  }

  .location-map strong {
    color: white;
    font-weight: 900;
  }

  .location-map span {
    color: rgb(255 255 255 / 0.58);
    font-size: 0.92rem;
  }

  .location-map a {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    color: rgb(125 178 255);
    font-size: 0.88rem;
    font-weight: 900;
  }

  .package-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgb(255 255 255 / 0.11);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at top right, rgb(0 92 255 / 0.24), transparent 16rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.03));
    padding: 1.35rem;
    box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }

  .package-card:hover {
    transform: translateY(-6px);
    border-color: rgb(0 92 255 / 0.46);
    box-shadow: 0 30px 90px rgb(0 92 255 / 0.18);
  }

  .process-grid {
    display: grid;
    gap: 1rem;
  }

  .process-step {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 0.045);
    padding: 1.25rem;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  }

  .process-step:hover {
    transform: translateY(-4px);
    border-color: rgb(0 92 255 / 0.35);
    background: rgb(255 255 255 / 0.06);
  }

  .process-step span {
    display: inline-flex;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgb(0 92 255 / 0.18);
    padding: 0.35rem 0.7rem;
    color: #dceaff;
    font-size: 0.78rem;
    font-weight: 900;
  }

  .process-step h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 900;
  }

  .process-step p {
    margin-top: 0.6rem;
    color: rgb(255 255 255 / 0.58);
    line-height: 1.65;
  }

  .dashboard-card,
  .lead-card,
  .idea-card {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.35rem;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03)),
      radial-gradient(circle at top left, rgb(0 92 255 / 0.12), transparent 14rem);
    box-shadow: 0 18px 55px rgb(0 0 0 / 0.24);
  }

  .dashboard-card {
    padding: 1.1rem;
  }

  .dashboard-card strong {
    display: block;
    margin-top: 0.85rem;
    color: white;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
  }

  .dashboard-card span {
    display: block;
    margin-top: 0.35rem;
    color: rgb(255 255 255 / 0.55);
    font-size: 0.85rem;
    font-weight: 700;
  }

  .admin-metric-card small {
    display: block;
    margin-top: 0.65rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    padding-top: 0.65rem;
    color: rgb(125 178 255);
    font-size: 0.78rem;
    font-weight: 900;
  }

  .admin-action-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-action-card,
  .admin-next-item {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.85rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.12), rgb(255 255 255 / 0.045));
    padding: 1rem;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .admin-action-card:hover,
  .admin-next-item:hover {
    border-color: rgb(0 92 255 / 0.42);
    background: linear-gradient(135deg, rgb(0 92 255 / 0.2), rgb(255 255 255 / 0.06));
    box-shadow: 0 20px 58px rgb(0 92 255 / 0.14);
    transform: translateY(-3px);
  }

  .admin-action-card i,
  .admin-next-item i,
  .admin-health-list i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .admin-action-card strong,
  .admin-action-card small,
  .admin-next-item strong,
  .admin-next-item small {
    display: block;
  }

  .admin-action-card strong,
  .admin-next-item strong {
    color: white;
    font-weight: 950;
    line-height: 1.2;
  }

  .admin-action-card small,
  .admin-next-item small {
    margin-top: 0.22rem;
    color: rgb(255 255 255 / 0.56);
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.45;
  }

  .admin-health-list {
    display: grid;
    gap: 0.85rem;
  }

  .admin-health-list > div {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.15rem;
    background: rgb(255 255 255 / 0.045);
    padding: 1rem;
  }

  .admin-health-list strong,
  .admin-health-list small {
    display: block;
  }

  .admin-health-list strong {
    color: white;
    font-weight: 950;
  }

  .admin-health-list small {
    margin-top: 0.2rem;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .push-panel {
    display: grid;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgb(59 130 246 / 0.28);
    border-radius: 1.5rem;
    background:
      radial-gradient(circle at top right, rgb(59 130 246 / 0.22), transparent 18rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.035));
    padding: clamp(1rem, 3vw, 1.35rem);
    box-shadow: 0 26px 80px rgb(0 92 255 / 0.16);
  }

  .push-panel h2 {
    margin-top: 0.8rem;
    color: white;
    font-size: clamp(1.35rem, 4vw, 1.9rem);
    font-weight: 950;
    line-height: 1.1;
  }

  .push-panel p {
    margin-top: 0.65rem;
    max-width: 48rem;
    color: rgb(255 255 255 / 0.62);
    line-height: 1.7;
  }

  .push-panel small,
  .push-panel-actions span {
    display: block;
    margin-top: 0.75rem;
    color: rgb(125 178 255);
    font-size: 0.84rem;
    font-weight: 900;
  }

  .push-panel-actions {
    display: grid;
    gap: 0.7rem;
  }

  .push-feature-grid {
    display: grid;
    gap: 0.65rem;
  }

  .push-feature-grid > div {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.045);
    padding: 0.8rem;
  }

  .push-feature-grid i {
    flex: 0 0 auto;
    color: rgb(125 178 255);
  }

  .push-feature-grid strong,
  .push-feature-grid small {
    display: block;
  }

  .push-feature-grid strong {
    color: white;
    font-size: 0.88rem;
    font-weight: 950;
  }

  .push-feature-grid small {
    margin-top: 0.15rem;
    color: rgb(255 255 255 / 0.56);
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .lead-card {
    padding: 1rem;
  }

  .idea-card {
    padding: 1rem;
  }

  .idea-card.is-done {
    border-color: rgb(34 197 94 / 0.25);
    background:
      linear-gradient(180deg, rgb(34 197 94 / 0.08), rgb(255 255 255 / 0.025)),
      radial-gradient(circle at top left, rgb(0 92 255 / 0.1), transparent 14rem);
  }

  .idea-toggle {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
  }

  .idea-card strong {
    color: white;
    font-weight: 900;
  }

  .idea-card p {
    margin-top: 0.45rem;
    color: rgb(255 255 255 / 0.58);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .lead-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0 92 255 / 0.28);
    border-radius: 999px;
    background: rgb(0 92 255 / 0.12);
    padding: 0.45rem 0.75rem;
    color: rgb(224 238 255);
    font-size: 0.78rem;
    font-weight: 900;
  }

  .legal-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-title {
    max-width: 100%;
    color: white;
    font-size: clamp(2.25rem, 11vw, 4.5rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
    text-wrap: balance;
    word-break: normal;
  }

  .legal-card {
    min-width: 0;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03)),
      radial-gradient(circle at top left, rgb(0 92 255 / 0.12), transparent 16rem);
    padding: 1.2rem;
    box-shadow: 0 18px 55px rgb(0 0 0 / 0.22);
  }

  .legal-card h2 {
    color: white;
    font-size: clamp(1.05rem, 4vw, 1.25rem);
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .legal-card p {
    margin-top: 0.75rem;
    color: rgb(255 255 255 / 0.66);
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .legal-card a {
    color: rgb(125 178 255);
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .service-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    opacity: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(0 92 255 / 0.28), transparent 17rem);
    transition: opacity 220ms ease;
    pointer-events: none;
  }

  .service-card:hover {
    transform: translateY(-8px);
    border-color: rgb(0 92 255 / 0.48);
    background: rgb(255 255 255 / 0.075);
    box-shadow: var(--shadow-accent);
  }

  .service-card:hover::before {
    opacity: 1;
  }

  .service-card:hover .icon-badge {
    transform: scale(1.08) rotate(-4deg);
  }

  .icon-badge {
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background:
      linear-gradient(135deg, rgb(0 92 255 / 0.26), rgb(255 255 255 / 0.09)),
      #05080f;
    color: white;
    box-shadow: 0 14px 36px rgb(0 92 255 / 0.2);
    transition: transform 240ms ease;
  }

  .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 999px;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.13), rgb(255 255 255 / 0.055));
    padding: 0.35rem 0.75rem;
    color: rgb(235 242 255);
    font-size: 0.82rem;
    font-weight: 700;
  }

  .brand-pill {
    border: 1px solid rgb(93 160 255 / 0.58);
    border-radius: 999px;
    background: linear-gradient(135deg, rgb(0 92 255 / 0.52), rgb(255 255 255 / 0.14));
    color: white;
    box-shadow:
      0 14px 36px rgb(0 92 255 / 0.28),
      0 0 0 1px rgb(255 255 255 / 0.08) inset;
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.65);
  }

  .gradient-text {
    background: linear-gradient(90deg, #ffffff, #eaf2ff 34%, #005cff 68%, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .grid-pattern {
    background-image:
      linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
  }

  .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  }

  .marquee-track {
    display: flex;
    min-width: max-content;
    animation: marquee 26s linear infinite;
  }

  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

.mobile-leadbar {
  position: fixed;
  z-index: 60;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 1.25rem;
  background: rgb(0 0 0 / 0.78);
  padding: 0.45rem;
  box-shadow: 0 22px 70px rgb(0 0 0 / 0.46), 0 0 60px rgb(0 92 255 / 0.18);
  backdrop-filter: blur(18px);
}

.legal-title {
  max-width: 100%;
  color: white;
  font-size: clamp(2.1rem, 9vw, 4.5rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-wrap: balance;
  word-break: normal;
}

@media (max-width: 767px) {
  section {
    scroll-margin-top: 5.5rem;
  }

  .btn-gradient,
  .btn-ghost {
    width: 100%;
    min-height: 3.35rem;
  }

  .hero-console {
    margin-inline: -0.15rem;
  }

  .icon-badge {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.9rem;
  }

  .marquee {
    margin-inline: -0.35rem;
    border-radius: 1.1rem;
  }

  .process-grid {
    gap: 0.75rem;
  }

  .owner-appointments-hero {
    align-items: stretch;
  }

  .owner-appointments-stats,
  .owner-appointments-layout,
  .slots-admin-grid,
  .request-action-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-appointments-stats .dashboard-card {
    min-height: 7.5rem;
  }

  .request-action-form .btn-gradient {
    justify-content: center;
  }

  .admin-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#leistungen,
#warum-wir,
#referenzen,
#termin,
#kontakt {
  scroll-margin-top: 6.5rem;
}

.cookie-banner {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 6rem;
  left: 1rem;
  display: grid;
  gap: 1rem;
  max-width: 920px;
  margin-inline: auto;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 1.4rem;
  background:
    linear-gradient(135deg, rgb(0 92 255 / 0.18), rgb(255 255 255 / 0.07)),
    rgb(0 0 0 / 0.86);
  padding: 1rem;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.5), 0 0 70px rgb(0 92 255 / 0.22);
  backdrop-filter: blur(20px);
}

.cookie-banner strong {
  color: white;
  font-size: 1rem;
  font-weight: 900;
}

.cookie-banner p {
  margin-top: 0.35rem;
  color: rgb(255 255 255 / 0.62);
  font-size: 0.9rem;
  line-height: 1.55;
}

.cookie-actions {
  display: grid;
  gap: 0.5rem;
}

.cookie-actions a,
.cookie-actions button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 900;
}

.cookie-actions a,
.cookie-actions button:first-of-type {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.07);
  color: white;
}

.cookie-actions button:last-of-type {
  background: linear-gradient(110deg, #005cff, #008bff);
  color: white;
  box-shadow: 0 14px 36px rgb(0 92 255 / 0.32);
}

.mobile-leadbar a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 0.95rem;
  color: white;
  font-weight: 800;
}

.mobile-leadbar a:first-child {
  background: linear-gradient(110deg, #16a34a, #22c55e);
  box-shadow: 0 12px 30px rgb(34 197 94 / 0.2);
}

.mobile-leadbar a:nth-child(2) {
  background: rgb(255 255 255 / 0.08);
}

.mobile-leadbar a:last-child {
  background: linear-gradient(110deg, #005cff, #008bff);
  box-shadow: 0 12px 30px rgb(0 92 255 / 0.34);
}

body {
  padding-bottom: 5rem;
}

@media (min-width: 420px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .site-shell {
    width: min(100% - 2rem, 1180px);
  }
}

@media (min-width: 768px) {
  .site-shell {
    width: min(100% - 3rem, 1180px);
  }

  body {
    padding-bottom: 0;
  }

  .mobile-leadbar {
    display: none;
  }

  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust-ribbon {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .audit-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audit-panel {
    grid-template-columns: 0.72fr 1.28fr;
  }

  .audit-cta {
    flex-direction: row;
    align-items: center;
  }

  .appointment-panel {
    grid-template-columns: 0.92fr 1.08fr;
    align-items: start;
  }

  .legal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cookie-banner {
    bottom: 1.25rem;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .cookie-actions {
    grid-template-columns: auto auto auto;
  }

  .push-panel {
    grid-template-columns: 1fr auto;
  }
}

@media (min-width: 1180px) {
  .site-shell {
    width: min(100% - 4rem, 1180px);
  }
}

@media (max-width: 420px) {
  .legal-page {
    padding-top: 7.5rem;
  }

  .legal-page > p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .legal-card {
    border-radius: 1.1rem;
    padding: 1rem;
  }

  .section-kicker {
    align-items: flex-start;
    border-radius: 1.15rem;
    white-space: normal;
  }

  .service-card,
  .glass-card {
    border-radius: 1.15rem;
  }

  .service-card {
    padding: 1.1rem;
  }

  .classic-calendar-month {
    padding: 0.75rem;
  }

  .classic-calendar-weekdays,
  .classic-calendar-grid {
    gap: 0.3rem;
  }

  .classic-calendar-weekdays span {
    font-size: 0.66rem;
  }

  .classic-calendar-empty {
    min-height: 2.65rem;
  }

  .classic-calendar-day {
    min-height: 2.65rem;
    border-radius: 0.65rem;
  }

  .classic-calendar-day small {
    display: none;
  }

  .image-frame-caption {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.55rem;
    padding: 0.8rem;
  }

  .image-frame-caption .brand-pill {
    margin-top: 0.1rem;
    padding: 0.34rem 0.7rem;
    font-size: 0.72rem;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes cinematicSweep {
  0%, 100% {
    opacity: 0.35;
    transform: translate3d(-18%, -8%, 0) rotate(0deg);
  }
  50% {
    opacity: 0.85;
    transform: translate3d(18%, 8%, 0) rotate(8deg);
  }
}

@keyframes scanLine {
  0% { transform: translateY(-115%); }
  100% { transform: translateY(115%); }
}

@keyframes signalFloat {
  0%, 100% {
    opacity: 0.35;
    transform: translate3d(0, 0, 0) scale(0.85);
  }
  50% {
    opacity: 1;
    transform: translate3d(0.45rem, -0.45rem, 0) scale(1.12);
  }
}

@keyframes softRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes motionFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-0.55rem) rotateX(1.4deg); }
}

@keyframes slowZoom {
  from { transform: scale(1.02) translate3d(-0.4%, 0, 0); }
  to { transform: scale(1.09) translate3d(0.8%, -0.8%, 0); }
}

@keyframes drawLine {
  0%, 100% {
    opacity: 0.35;
    transform: scaleX(0.48);
    transform-origin: left;
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes pulseRing {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }
  32% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes timelineFill {
  0%, 100% { transform: translateX(-75%); }
  50% { transform: translateX(95%); }
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cursor-ring {
  position: fixed;
  z-index: 70;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: width 180ms ease, height 180ms ease, opacity 180ms ease, border-color 180ms ease;
}

.cursor-ring.is-active {
  width: 4rem;
  height: 4rem;
  border-color: rgb(0 92 255 / 0.9);
}

@media (pointer: coarse), (max-width: 1023px) {
  .cursor-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}