:root {
  --background: 222 28% 5%;
  --foreground: 210 24% 96%;
  --primary: 199 100% 50%;
  --primary-foreground: 222 35% 6%;
  --secondary: 218 12% 78%;
  --secondary-foreground: 222 35% 8%;
  --muted: 220 14% 16%;
  --muted-foreground: 216 13% 72%;
  --destructive: 0 88% 64%;
  --border: 215 15% 24%;
  --card: 222 22% 9%;
  --shadow-sm: 0 8px 22px hsl(220 50% 2% / 0.35);
  --shadow-md: 0 18px 50px hsl(220 60% 2% / 0.45);
  --shadow-lg: 0 28px 80px hsl(199 100% 50% / 0.22), 0 18px 50px hsl(220 60% 2% / 0.65);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
}

.dark {
  --background: 222 28% 5%;
  --foreground: 210 24% 96%;
  --primary: 199 100% 50%;
  --secondary: 218 12% 78%;
  --muted: 220 14% 16%;
  --destructive: 0 88% 64%;
  --border: 215 15% 24%;
  --card: 222 22% 9%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.2), transparent 32%), radial-gradient(circle at 85% 12%, hsl(0 0% 100% / 0.08), transparent 26%), linear-gradient(135deg, transparent 0%, hsl(210 20% 12% / 0.5) 100%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
input, textarea, select { font-size: max(16px, 1rem); }

.logo-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)) 58%, hsl(var(--primary)));
  color: hsl(var(--primary-foreground));
  font-weight: 1000;
  box-shadow: var(--shadow-sm);
}
.section-kicker {
  margin-bottom: .65rem;
  color: hsl(var(--primary));
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.chrome-border {
  position: relative;
  border: 1px solid hsl(var(--border));
  background-clip: padding-box;
}
.chrome-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, hsl(var(--secondary) / .9), hsl(var(--primary) / .75), hsl(var(--border)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute;
  inset: -140% auto -140% -80%;
  width: 55%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .55), transparent);
  animation: shine 3.6s infinite;
}
@keyframes shine { 0%, 45% { left: -80%; } 70%, 100% { left: 140%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-rise { animation: rise .8s var(--transition-smooth) both; }

.hero-card { background: linear-gradient(145deg, hsl(var(--card)), hsl(220 18% 13%)); }
.before-after-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 330px; }
.panel-before, .panel-after { display: flex; flex-direction: column; justify-content: end; padding: 1.25rem; }
.panel-before { background: linear-gradient(160deg, #181a1f, #3b332e); filter: saturate(.7); }
.panel-after { background: linear-gradient(160deg, #07131d, #00a8ff); }
.panel-before span, .panel-after span { font-weight: 1000; text-transform: uppercase; letter-spacing: .18em; }
.panel-before b, .panel-after b { margin-top: .5rem; font-size: 1.15rem; }
.stat { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: .85rem .5rem; background: hsl(var(--muted) / .62); }
.stat b { display: block; font-size: 1.2rem; }
.stat span { color: hsl(var(--muted-foreground)); font-size: .8rem; font-weight: 800; }

.service-card { animation: rise .75s var(--transition-smooth) both; transition: transform var(--transition-smooth), border-color var(--transition-fast); }
.service-card:hover { transform: translateY(-8px); border-color: hsl(var(--primary)); }
.service-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 18px; background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--primary) / .24)); color: hsl(var(--primary)); font-size: 1.35rem; }
.gallery-card { transition: transform var(--transition-smooth); }
.gallery-card:hover { transform: translateY(-5px); }
.map-art {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 1.5rem;
  background: linear-gradient(135deg, hsl(220 22% 9%), hsl(199 100% 35% / .75)), repeating-linear-gradient(45deg, transparent 0 22px, hsl(0 0% 100% / .08) 22px 24px);
}
.map-art span { font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--primary)); }
.map-art b { margin-top: .4rem; font-size: 1.45rem; }
.contact-link { min-height: 44px; display: flex; align-items: center; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); padding: .85rem 1rem; font-weight: 900; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.contact-link:hover { border-color: hsl(var(--primary)); transform: translateX(4px); }
.form-label { display: block; margin-bottom: .5rem; font-size: .84rem; font-weight: 1000; color: hsl(var(--primary)); text-transform: uppercase; letter-spacing: .14em; }
.form-input { min-height: 48px; width: 100%; border: 1px solid hsl(var(--border)); border-radius: 18px; background: hsl(var(--card)); color: hsl(var(--foreground)); padding: .75rem 1rem; outline: none; }
.form-input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary) / .14); }
.form-input::placeholder { color: hsl(var(--muted-foreground)); }
.confirmation { background: radial-gradient(circle at 50% 0%, hsl(var(--primary) / .18), transparent 46%), hsl(var(--card)); }
.sticky-book { position: fixed; right: 1rem; bottom: calc(5.4rem + env(safe-area-inset-bottom)); z-index: 45; }
@media (min-width: 768px) { .sticky-book { bottom: 1.5rem; right: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }