/* TynaTech — custom polish on top of Tailwind */

:root {
  --tyna-blue: #00A2EA;
  --tyna-blue-2: #0077C3;
  --tyna-blue-3: #59C4F2;
  --tyna-green: #90C42E;
  --tyna-green-2: #21AF7F;
  --tyna-ink: #0b1120;
}

html, body {
  background-color: var(--tyna-ink);
  overflow-x: clip;
  max-width: 100%;
}
* { min-width: 0; }
img, svg, video { max-width: 100%; height: auto; }
pre { white-space: pre; }
pre code { display: block; }

::selection { background: rgba(0,162,234,.35); color: #fff; }

/* Subtle grid */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Buttons */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  color: #0b1120;
  background: linear-gradient(135deg, var(--tyna-blue), var(--tyna-green));
  border-radius: 9999px;
  box-shadow: 0 10px 30px -10px rgba(0,162,234,.5);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cta-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 40px -12px rgba(144,196,46,.55);
}

.cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9999px;
  background: rgba(255,255,255,.03);
  transition: all .2s ease;
}
.cta-ghost:hover {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.06);
}

/* Service cards */
.service-card {
  position: relative;
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(12px);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(0,162,234,.10), transparent 40%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
}
.service-card:hover::before { opacity: 1; }

.service-card--featured {
  border-color: rgba(144,196,46,.35);
  background: linear-gradient(180deg, rgba(144,196,46,.08), rgba(0,162,234,.04));
}
.service-card--featured::before {
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(144,196,46,.18), transparent 40%);
}

/* Process step */
@media (min-width: 640px) { .service-card { padding: 2rem; } }

.process-step {
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: all .25s ease;
}
.process-step:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  transform: translateY(-2px);
}

/* Contact cards */
.contact-card {
  display: block;
  padding: 1.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: all .25s ease;
}
.contact-card:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

/* Form inputs */
.input {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  font-size: .95rem;
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  transition: all .2s ease;
}
.input::placeholder { color: rgba(148,163,184,.5); }
.input:focus {
  outline: none;
  border-color: rgba(0,162,234,.5);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(0,162,234,.12);
}
.input option { background: #0b1120; }

/* Smooth scroll offset for fixed nav */
section[id] { scroll-margin-top: 5rem; }

/* Code block readability */
pre.hljs, .hljs {
  font-size: 12px;
  line-height: 1.55;
}
@media (min-width: 640px) {
  pre.hljs, .hljs { font-size: 13px; }
}
.hljs { padding: 1rem 1.25rem !important; }
@media (min-width: 640px) { .hljs { padding: 1.25rem 1.5rem !important; } }

/* Better mobile body spacing */
@media (max-width: 639px) {
  h1 { letter-spacing: -0.02em; }
  h2 { letter-spacing: -0.015em; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}