:root {
  --color-bg: #0c0f12;
  --color-fg: #e6edf3;
  --color-accent: #67e8f9;
  --spacing: 12px;
  --radius: 10px;
}

html,
body {
  background: var(--color-bg);
  color: var(--color-fg);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--spacing);
}

.site-header,
.site-footer {
  padding: calc(var(--spacing) * 1.5) 0;
}

.logo {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.nav a {
  margin-left: var(--spacing);
  color: inherit;
  text-decoration: none;
}

.bg-card {
  background-color: #1E1E1E;
}

.gradient-border {
  border: 2px solid;
  border-image-slice: 1;
}

.border-purple-blue {
  border-image-source: linear-gradient(to bottom right, #8A2BE2, #4A90E2);
}

.border-green-yellow {
  border-image-source: linear-gradient(to bottom right, #34D399, #FBBF24);
}

.border-red-orange {
  border-image-source: linear-gradient(to bottom right, #EF4444, #F97316);
}

.border-cyan-teal {
  border-image-source: linear-gradient(to bottom right, #22D3EE, #14B8A6);
}

/* Rounded gradient border using mask (works with border radius) */
.gradient-ring { position: relative; border-radius: 1.25rem; }
.gradient-ring::before {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit;
  background: var(--ring-gradient, linear-gradient(135deg, #60a5fa, #ec4899));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ring-purple-blue { --ring-gradient: linear-gradient(135deg, #8A2BE2, #4A90E2); }
.ring-green-yellow { --ring-gradient: linear-gradient(135deg, #34D399, #FBBF24); }
.ring-red-orange  { --ring-gradient: linear-gradient(135deg, #EF4444, #F97316); }
.ring-cyan-teal   { --ring-gradient: linear-gradient(135deg, #22D3EE, #14B8A6); }

/* Alternative rounded gradient border using background-clip (very robust) */
.rounded-gradient-border {
  position: relative;
  border: 2px solid transparent;
  border-radius: 1.25rem; /* 20px approx */
  background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box,
              var(--ring-gradient, linear-gradient(135deg, #60a5fa, #ec4899)) border-box;
}

/* Reusable text gradient (blue -> pink) */
.text-gradient {
  /* Multi-stop to ensure both ends of the gradient are visible even on short widths */
  background-image: linear-gradient(90deg, #60a5fa 0%, #60a5fa 12%, #a855f7 50%, #ec4899 88%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Heartbeat animation for ECG icon */
.heartbeat { animation: heartbeat 1.25s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 20% { transform: scale(1.15); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } 80% { transform: scale(1); } }

/* Flip card for metric tiles (click to flip) */
.flip-card { perspective: 1000px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: inherit; }
.flip-back { transform: rotateY(180deg); }

/* Unified section title sizes (Inter) */
.section-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 800;
  font-size: clamp(1.875rem, 3.2vw, 2.5rem); /* ~30px → 40px */
  line-height: 1.2;
}
.section-subtitle {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); /* ~20px → 28px */
  line-height: 1.25;
}

.material-symbols-outlined {
  font-size: 3em !important;
}

/* Smaller language icon in header; hidden on mobile/tablet via 'hidden lg:inline' */
.material-symbols-outlined.lang-icon {
  font-size: 16px !important;
  line-height: 1;
}
.material-symbols-outlined.lang-caret {
  font-size: 16px !important;
  line-height: 1;
}

/* Button/element border matching site gradient (blue -> pink) */
.border-blue-pink {
  border-image-source: linear-gradient(to right, #60a5fa, #ec4899);
}

/* Thinner border helper when using gradient-border */
.border-thin { border-width: 1px; }

/* Larger outlined icon override (double size) */
.icon-xxl.material-symbols-outlined {
  font-size: 6em !important;
}

/* Even larger outlined icon */
.icon-xxxl.material-symbols-outlined {
  font-size: 12em !important;
}

/* 2x bigger again for hero icon */
.icon-xxxxl.material-symbols-outlined {
  font-size: 24em !important;
}

/* Responsive hero icon for mobile-first sizing */
.material-symbols-outlined.icon-hero {
  /* scale with viewport width but keep reasonable bounds; +30% for mobile */
  font-size: clamp(4.6rem, 23vw, 10rem) !important;
  line-height: 1;
}

/* helper to ensure slow spin when Tailwind isn't configured */
.spin-slow { animation: bp-spin 6s linear infinite; }

/* Animated gradient outline button (serpentine border) */
.btn-outline-gradient {
  position: relative;
  display: inline-block;
  color: #fff;
  background: var(--surface-color);
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-outline-gradient:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.28); }
.btn-outline-gradient:focus { outline: none; box-shadow: 0 0 0 4px rgba(96,165,250,.25); }
.btn-outline-gradient::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  /* Double-thick border via padding (4px) */
  padding: 4px;
  background: conic-gradient(from 0deg, #60a5fa, #ec4899, #60a5fa);
  /* Mask to keep only the ring area visible */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: bp-spin 6s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* Animated gradient border wrapper for buttons */
.ring-animated {
  display: inline-block;
  padding: 8px; /* thicker ring */
  border-radius: 0.75rem;
  background: conic-gradient(from 0deg, #60a5fa, #ec4899, #60a5fa);
  animation: bp-spin 6s linear infinite;
}
.ring-animated .btn-core {
  display: inline-block;
  border-radius: 0.65rem;
  background: var(--surface-color);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-core {
  background: var(--surface-color);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
.ring-animated .btn-core:hover { transform: translateY(-1px); }

/* Stroke animation around button edges (hover/focus) */
.btn-stroke-anim { position: relative; overflow: hidden; }
.btn-stroke-anim::before,
.btn-stroke-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Conic gradient stroke that can rotate */
  background: conic-gradient(from var(--rot, 0deg), #60a5fa, #ec4899, #60a5fa);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 2px; /* stroke thickness */
  transition: transform .5s ease;
  animation: btn-rot 2.2s linear infinite;
  animation-play-state: paused; /* only spin on hover/focus */
}
.btn-stroke-anim::before {
  transform: rotate(var(--rot,0deg)) scale(var(--sx1,0), var(--sy1,0));
  transform-origin: top left;
}
.btn-stroke-anim::after {
  transform: rotate(var(--rot,0deg)) scale(var(--sx2,0), var(--sy2,0));
  transform-origin: bottom right;
}
.btn-stroke-anim:hover::before,
.btn-stroke-anim:focus::before { --sx1:1; --sy1:1; animation-play-state: running; }
.btn-stroke-anim:hover::after,
.btn-stroke-anim:focus::after { --sx2:1; --sy2:1; animation-play-state: running; }
@keyframes btn-rot { to { --rot: 360deg; } }

/* Placeholder styling */
input::placeholder, textarea::placeholder {
  font-style: italic;
  font-weight: 300;
  color: rgba(230,230,250,0.4); /* lavender at 0.4 */
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-style: italic; font-weight: 300; color: rgba(230,230,250,0.4); }
input::-moz-placeholder, textarea::-moz-placeholder { font-style: italic; font-weight: 300; color: rgba(230,230,250,0.4); }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-style: italic; font-weight: 300; color: rgba(230,230,250,0.4); }
input::-ms-input-placeholder, textarea::-ms-input-placeholder { font-style: italic; font-weight: 300; color: rgba(230,230,250,0.4); }
/* Style select when placeholder (empty value) is selected and field is required */
select:invalid {
  font-style: italic;
  font-weight: 300;
  color: rgba(230,230,250,0.6);
}