:root {
  --nav-bg: rgba(23, 37, 84, 0.7);
  --nav-border: rgba(125, 211, 252, 0.25);
  --nav-shadow: rgba(15, 23, 42, 0.5);
  --nav-panel-bg: rgba(15, 23, 42, 0.95);
  --brand-blue: #60a5fa;
  --brand-cyan: #22d3ee;
  --brand-indigo: #6366f1;
  --brand-lavender: #818cf8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Poppins", "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;
  color: #e2e8f0;
  background-color: #020617;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #0ea5e9;
  color: #0f172a;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.2s ease, box-shadow 0.2s ease;
  z-index: 60;
}

.skip-link:focus-visible {
  top: 12px;
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.45);
}

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  box-shadow: 0 15px 45px var(--nav-shadow);
}

.nav-toggle {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  background: rgba(15, 23, 42, 0.4);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
}

.nav-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-toggle [data-icon="close"] {
  display: none;
}

.nav-toggle[aria-expanded="true"] [data-icon="open"] {
  display: none;
}

.nav-toggle[aria-expanded="true"] [data-icon="close"] {
  display: inline;
}

.mobile-nav-panel {
  position: absolute;
  inset: 100% 0 auto 0;
  background: var(--nav-panel-bg);
  padding: 1.25rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-top: none;
  box-shadow: 0 25px 45px rgba(2, 6, 23, 0.6);
  display: none;
}

.mobile-nav-panel[data-open="true"] {
  display: block;
}

.mobile-nav-panel a {
  display: block;
  padding: 0.8rem 0.9rem;
  border-radius: 0.75rem;
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 600;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

body.nav-open {
  overflow: hidden;
}

.gradient-flow {
  position: absolute;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(126, 203, 255, 0.45), rgba(15, 76, 129, 0) 55%),
    linear-gradient(180deg, rgba(22, 78, 139, 0.85) 0%, rgba(10, 37, 64, 0.82) 32%, rgba(2, 6, 23, 0.98) 78%);
  background-size: cover;
  animation: gradientDrift 32s ease-in-out infinite;
  overflow: hidden;
}

.gradient-flow::before,
.gradient-flow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gradient-flow::before {
  background:
    radial-gradient(55% 60% at 50% 0%, rgba(185, 231, 255, 0.45) 0%, rgba(61, 153, 210, 0.18) 35%, rgba(4, 11, 26, 0) 70%),
    linear-gradient(180deg, rgba(126, 203, 255, 0.4) 0%, rgba(7, 34, 68, 0) 50%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.gradient-flow::after {
  inset: -5% -35% 5% -35%;
  background:
    repeating-linear-gradient(180deg,
      rgba(149, 199, 255, 0.18) 0%,
      rgba(149, 199, 255, 0.08) 22%,
      rgba(149, 199, 255, 0) 55%),
    radial-gradient(80% 65% at 50% 0%, rgba(108, 192, 255, 0.22), rgba(4, 11, 26, 0) 65%);
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: blur(2px);
}

.glint-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateY(-120%);
}

.animate-glint.glint-overlay::before {
  animation: glintSweep 1.1s ease-out forwards;
}

#cta-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 640px at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(99, 102, 241, 0.65) 18%, rgba(34, 211, 238, 0.55) 38%, rgba(14, 165, 233, 0.45) 58%, rgba(2, 6, 23, 0) 78%);
  opacity: 0;
  transform: scale(0.3);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#cta-overlay[data-active="true"] {
  opacity: 0.85;
  transform: scale(1);
  pointer-events: auto;
}

#hero-menu {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

#hero-menu[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#get-started {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#get-started::after {
  content: "";
  position: absolute;
  inset: -80% -40% -80% -120%;
  background-image: url("assets/Glint.png");
  background-size: 240px 240px;
  background-repeat: repeat;
  background-position: 0 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.65;
  transform: skewX(-12deg);
  animation: buttonGlintScroll 12s linear infinite;
  mask-image: linear-gradient(120deg, transparent 5%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0.4) 52%, transparent 80%);
  -webkit-mask-image: linear-gradient(120deg, transparent 5%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0.4) 52%, transparent 80%);
  filter: brightness(1.25) saturate(1.15);
}

#get-started:hover::after,
#get-started:focus-visible::after {
  animation-duration: 8s;
}

@keyframes buttonGlintScroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.hero-cta-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.7);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 230px;
  box-shadow: 0 25px 45px rgba(2, 6, 23, 0.35);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-cta-card::after {
  content: "";
  position: absolute;
  inset: 40% -30% -30% 30%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.35), rgba(14, 165, 233, 0));
  opacity: 0.4;
  transform: rotate(15deg);
  z-index: -1;
}

#hero-menu[data-visible="true"] .hero-cta-card {
  opacity: 1;
  transform: translateY(0);
}

#hero-menu[data-visible="true"] .hero-cta-card:nth-child(2) {
  transition-delay: 0.05s;
}

#hero-menu[data-visible="true"] .hero-cta-card:nth-child(3) {
  transition-delay: 0.1s;
}

#hero-menu[data-visible="true"] .hero-cta-card:nth-child(4) {
  transition-delay: 0.15s;
}

.hero-card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.72rem;
  color: rgba(191, 219, 254, 0.85);
  margin-bottom: 0.35rem;
}

.hero-cta-card h3 {
  margin: 0;
  font-size: 1.35rem;
  color: #fff;
}

.hero-cta-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.9);
  line-height: 1.5;
}

.hero-card-link {
  align-self: flex-start;
  text-decoration: none;
  font-weight: 600;
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.15);
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.3);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hero-card-link:hover,
.hero-card-link:focus-visible {
  background: rgba(14, 165, 233, 0.35);
  color: #082f49;
  border-color: rgba(226, 232, 240, 0.8);
}

.button-glow {
  position: relative;
  isolation: isolate;
  box-shadow: 0 18px 42px rgba(56, 189, 248, 0.38);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.button-glow::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  background: radial-gradient(60% 65% at 50% 12%, rgba(125, 211, 252, 0.55), rgba(56, 189, 248, 0));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.button-glow:hover,
.button-glow:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 24px 58px rgba(56, 189, 248, 0.48);
}

.button-glow:hover::after,
.button-glow:focus-visible::after {
  opacity: 0.9;
}

#fx-layer {
  pointer-events: none;
  mix-blend-mode: screen;
}

#nav-wave {
  position: relative;
}

.wave-layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 200% 100%;
  filter: drop-shadow(0 -6px 14px rgba(56, 189, 248, 0.22));
  animation: waveScroll var(--wave-duration, 22s) linear infinite;
  opacity: var(--wave-opacity, 1);
  mix-blend-mode: screen;
  --wave-fade: clamp(24px, 6vw, 140px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--wave-fade),
    #000 calc(100% - var(--wave-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--wave-fade),
    #000 calc(100% - var(--wave-fade)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.wave-layer-1 {
  --wave-duration: 28s;
  --wave-opacity: 0.65;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad1' x1='50%25' y1='0%25' x2='50%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f0f9ff' stop-opacity='0.6'/%3E%3Cstop offset='32%25' stop-color='%23bae6fd' stop-opacity='0.42'/%3E%3Cstop offset='68%25' stop-color='%2338bdf8' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%231e3a8a' stop-opacity='0.42'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 60 Q 120 10 240 60 T 480 60 T 720 60 T 960 60 T 1200 60 T 1440 60 Q 1380 95 1320 120 T 1080 120 T 840 120 T 600 120 T 360 120 T 120 120 Q -60 95 0 60 Z' fill='url(%23waveGrad1)'/%3E%3C/svg%3E");
}

.wave-layer-2 {
  --wave-duration: 22s;
  --wave-opacity: 0.55;
  animation-direction: reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad2' x1='50%25' y1='0%25' x2='50%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23e0f2fe' stop-opacity='0.58'/%3E%3Cstop offset='36%25' stop-color='%2360a5fa' stop-opacity='0.45'/%3E%3Cstop offset='76%25' stop-color='%230ea5e9' stop-opacity='0.34'/%3E%3Cstop offset='100%25' stop-color='%231d4ed8' stop-opacity='0.44'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 65 Q 160 18 320 65 T 640 65 T 960 65 T 1280 65 T 1600 65 Q 1520 106 1440 120 T 1120 120 T 800 120 T 480 120 T 160 120 Q -40 106 0 65 Z' fill='url(%23waveGrad2)'/%3E%3C/svg%3E");
}

.wave-layer-3 {
  --wave-duration: 32s;
  --wave-opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad3' x1='50%25' y1='0%25' x2='50%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ecfeff' stop-opacity='0.32'/%3E%3Cstop offset='38%25' stop-color='%2367e8f9' stop-opacity='0.26'/%3E%3Cstop offset='78%25' stop-color='%2360a5fa' stop-opacity='0.24'/%3E%3Cstop offset='100%25' stop-color='%23312e81' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 70 Q 120 38 240 70 T 480 70 T 720 70 T 960 70 T 1200 70 T 1440 70 Q 1360 102 1280 120 T 960 120 T 640 120 T 320 120 Q -40 102 0 70 Z' fill='url(%23waveGrad3)'/%3E%3C/svg%3E");
}

.fx-orb {
  position: absolute;
  top: var(--start-y, 20%);
  left: var(--x, 50%);
  width: var(--size, 28px);
  height: var(--size, 28px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(241, 249, 255, 0.95) 0%, rgba(154, 210, 255, 0.45) 45%, rgba(37, 132, 196, 0.2) 68%, rgba(17, 94, 164, 0.05) 100%);
  box-shadow:
    0 0 28px rgba(123, 211, 252, 0.4),
    0 0 65px rgba(37, 132, 196, 0.25);
  animation: orbFloat var(--duration, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

.fx-particle {
  --scale: 0.82;
  --dx: 0px;
  --dy: -24px;
  --duration: 600ms;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(224, 242, 255, 0.95) 0%, rgba(125, 211, 252, 0.65) 45%, rgba(59, 130, 246, 0.18) 100%);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  transform: translate3d(-50%, -50%, 0) scale(var(--scale));
  opacity: 0;
  pointer-events: none;
  animation: particleBurst var(--duration) ease-out forwards;
}

@keyframes glintSweep {
  0% { transform: translateY(-120%); }
  100% { transform: translateY(120%); }
}

@keyframes gradientDrift {
  0% { background-position: 0% 0%, 0% 0%; }
  50% { background-position: 50% -6%, 0% 0%; }
  100% { background-position: 0% 0%, 0% 0%; }
}

@keyframes waveScroll {
  0% { background-position: 0 0; }
  100% { background-position: -50% 0; }
}

@keyframes orbFloat {
  0% {
    transform: translate3d(-50%, 6px, 0) scale(0.7);
    opacity: 0;
  }
  14% {
    opacity: 0.85;
  }
  52% {
    transform: translate3d(-50%, -18px, 0) scale(0.94);
    opacity: 0.95;
  }
  78% {
    transform: translate3d(-50%, -40px, 0) scale(1.02);
    opacity: 1;
  }
  92% {
    transform: translate3d(-50%, -54px, 0) scale(1.14);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, -58px, 0) scale(0.2);
    opacity: 0;
  }
}

@keyframes statMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes particleBurst {
  0% {
    opacity: 0.95;
    transform: translate3d(-50%, -50%, 0) scale(var(--scale, 0.82));
  }
  55% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -24px)), 0) scale(0.25);
  }
}

.stat-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.stat-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: statMarquee 42s linear infinite;
}

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

.stat-segment {
  display: flex;
  gap: 1.5rem;
}

.stat-card {
  min-width: 220px;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.65);
  padding: 1.65rem;
  text-align: center;
  box-shadow: 0 18px 35px rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(6px);
}

.stat-card dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(148, 163, 184, 0.75);
}

.stat-card dd:first-of-type {
  margin-top: 0.75rem;
  font-size: 2.2rem;
  font-weight: 600;
  color: #e0f2fe;
}

.stat-card dd:last-of-type {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(203, 213, 225, 0.78);
}

/* Shop visual treatments */
.shop-card {
  border-width: 2px;
  border-style: solid;
}

.rainbow-glow {
  position: relative;
  z-index: 0;
}

.rainbow-glow::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 1rem;
  background: conic-gradient(from -90deg,
    /* Top-heavy red, wider band at top */
    #ef4444 0deg 60deg,
    /* Orange/Yellow narrower to give room to greens/blues */
    #f97316 60deg 90deg,
    #f59e0b 90deg 120deg,
    /* Greens and cyans expanded for more visibility */
    #22c55e 120deg 200deg,
    #06b6d4 200deg 245deg,
    /* Blues expanded */
    #3b82f6 245deg 295deg,
    /* Indigo/Violet slightly narrower so they don't dominate sides */
    #6366f1 295deg 325deg,
    #8b5cf6 325deg 360deg
  );
  filter: blur(32px) saturate(1.1);
  opacity: 0.62;
  z-index: -1;
  pointer-events: none;
}

.shop-card.color-black { border-color: #000000 !important; }
.shop-card.color-gray { border-color: #9ca3af !important; }
.shop-card.color-white { border-color: #ffffff !important; }
.shop-card.color-red { border-color: #ef4444 !important; }
.shop-card.color-orange { border-color: #f97316 !important; }
.shop-card.color-yellow { border-color: #f59e0b !important; }
.shop-card.color-green { border-color: #22c55e !important; }
.shop-card.color-blue { border-color: #3b82f6 !important; }
.shop-card.color-indigo { border-color: #6366f1 !important; }
.shop-card.color-violet { border-color: #8b5cf6 !important; }

@media (prefers-reduced-motion: reduce) {
  .gradient-flow,
  .gradient-flow::before,
  .gradient-flow::after,
  .wave-layer,
  .glint-overlay::before,
  #cta-overlay,
  #hero-menu,
  .hero-cta-card,
  .fx-orb,
  .stat-track {
    animation: none !important;
  }

  #cta-overlay {
    opacity: 0;
  }

  #hero-menu,
  .hero-cta-card {
    transition: none !important;
  }

  .fx-orb {
    display: none;
  }

  .stat-track {
    transform: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animated color-shift for Stripe Buy Button (applies to host element) */
stripe-buy-button.rainbow-shift {
  display: inline-block;
  animation: hueShift 14s linear infinite;
  filter: hue-rotate(0deg) saturate(1.15);
  will-change: filter;
}
stripe-buy-button.rainbow-shift:hover {
  animation-duration: 8s;
}
@keyframes hueShift {
  from { filter: hue-rotate(0deg) saturate(1.15); }
  to   { filter: hue-rotate(360deg) saturate(1.15); }
}

/* Simple cards fade transition on route change */
body.cards-init article.item {
  opacity: 0;
  transition: opacity 240ms ease;
}
body.cards-init.cards-show article.item {
  opacity: 1;
}

/* Contact page enhancements */
.contact-hero {
  position: relative;
}

.contact-hero__card {
  position: relative;
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 10% 10%, rgba(96, 165, 250, 0.18), rgba(2, 6, 23, 0)),
    rgba(255, 255, 255, 0.02);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.6);
  overflow: hidden;
}

.contact-hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 520px at 85% 30%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}

.contact-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.14);
  color: #fef3c7;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.contact-hero__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.9rem;
  background: linear-gradient(120deg, #facc15, #fde68a);
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 25px rgba(250, 204, 21, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.contact-cta:hover,
.contact-cta:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 35px rgba(250, 204, 21, 0.35);
  filter: saturate(1.05);
}

.contact-cta .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.contact-cta--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.contact-cta--ghost:hover,
.contact-cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.contact-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

.contact-meta dt {
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.contact-meta dd {
  color: #e2e8f0;
  font-weight: 700;
}

.contact-hero__portrait {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
}

.contact-hero__glow {
  position: absolute;
  inset: 8% 4%;
  background: radial-gradient(360px 360px at 50% 40%, rgba(99, 102, 241, 0.2), rgba(14, 165, 233, 0.12), transparent 70%);
  filter: blur(12px);
  z-index: 0;
}

.contact-portrait-image {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 25px 60px rgba(2, 6, 23, 0.75);
}

.contact-hero__quote {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 360px);
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1rem 1.1rem 1.2rem;
  color: #e2e8f0;
  box-shadow: 0 18px 35px rgba(2, 6, 23, 0.65);
  z-index: 2;
}

.quote-mark {
  font-size: 2.4rem;
  color: #fde68a;
  line-height: 1;
}

.quote-name {
  display: block;
  margin-top: 0.6rem;
  font-weight: 700;
  color: #cbd5e1;
}

.contact-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 1.25rem;
  box-shadow: 0 20px 35px rgba(2, 6, 23, 0.55);
}

.contact-card--outline {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
}

.contact-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.16);
  color: #99f6e4;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid rgba(34, 211, 238, 0.4);
}

.contact-links {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-link,
.contact-inline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.contact-inline {
  grid-template-columns: auto 1fr;
}

.contact-link:hover,
.contact-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(3px);
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(226, 232, 240, 0.35), rgba(148, 163, 184, 0.05));
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.icon-circle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.label {
  font-size: 0.9rem;
  color: #cbd5e1;
}

.value {
  font-weight: 700;
  color: #f8fafc;
}

.chevron {
  font-size: 1.4rem;
  color: rgba(226, 232, 240, 0.8);
}

.contact-form {
  position: relative;
  overflow: hidden;
}

.contact-form::before {
  content: "";
  position: absolute;
  inset: -30% 5% auto;
  height: 70%;
  background: radial-gradient(400px 400px at 25% 30%, rgba(59, 130, 246, 0.25), rgba(14, 165, 233, 0.15), transparent 55%);
  pointer-events: none;
}

.contact-form::after {
  content: "";
  position: absolute;
  inset: auto 0 -25% 40%;
  height: 60%;
  background: radial-gradient(360px 360px at 65% 60%, rgba(250, 204, 21, 0.18), transparent 60%);
  pointer-events: none;
}

.contact-input {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.contact-input:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.25);
  transform: translateY(-1px);
}

.contact-input::placeholder {
  color: #94a3b8;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  border-radius: 0.9rem;
  background: linear-gradient(120deg, #fde68a, #facc15);
  color: #0f172a;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  box-shadow: 0 15px 40px rgba(250, 204, 21, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.contact-submit .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 20px 50px rgba(250, 204, 21, 0.35);
  filter: saturate(1.05);
}

.contact-promise {
  max-width: 320px;
}

@media (max-width: 640px) {
  .contact-hero__quote {
    bottom: -6%;
    position: relative;
    transform: none;
    margin-top: 1rem;
  }
}