/* =========================================================================
   Eurotech Auto Body — Site Enhancements
   Companion stylesheet layered on top of the compiled Tailwind bundle
   (styles-Jah8bia6.css). Adds refined typography, smoother motion, richer
   depth/shadow treatment, and small polish details across all public pages
   (Home, About, Services, Blog, Blog Post, FAQs, Contact, Careers) without
   touching the generated build output.
   ========================================================================= */

/* ---------- Global refinements ---------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  letter-spacing: -0.011em;
}

::selection {
  background: color-mix(in oklch, var(--primary) 85%, transparent);
  color: #fff;
}

/* Slim, tasteful scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--primary) 35%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--primary) 55%, transparent);
  background-clip: padding-box;
}

/* ---------- Typography polish ---------- */
h1, h2, h3, h4 {
  letter-spacing: -0.025em;
}

h1 { text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Slightly richer gradient text with subtle depth */
.text-gradient {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-glow, var(--primary)) 55%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 12px color-mix(in oklch, var(--primary) 18%, transparent));
}

/* ---------- Smoother, springier motion everywhere ---------- */
a, button {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-lift {
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -18px color-mix(in oklch, var(--primary) 28%, transparent), var(--shadow-soft, 0 8px 24px -8px rgba(0,0,0,.12));
}

/* Refined animated underline for nav / inline links */
.story-link {
  position: relative;
}
.story-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-primary, var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.story-link:hover::after,
.story-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Buttons ---------- */
a.bg-gradient-primary,
button.bg-gradient-primary {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1), filter .35s ease;
}
a.bg-gradient-primary::before,
button.bg-gradient-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
a.bg-gradient-primary:hover::before,
button.bg-gradient-primary:hover::before {
  transform: translateX(120%);
}
a.bg-gradient-primary:hover,
button.bg-gradient-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 32px -10px color-mix(in oklch, var(--primary) 45%, transparent);
}
a.bg-gradient-primary:active,
button.bg-gradient-primary:active {
  transform: scale(.97);
}

/* Outline / secondary buttons */
a.border.border-border:not(.bg-gradient-primary) {
  transition: border-color .3s ease, color .3s ease, transform .3s cubic-bezier(0.22,1,0.36,1), box-shadow .3s ease;
}
a.border.border-border:not(.bg-gradient-primary):hover {
  border-color: var(--primary);
  box-shadow: 0 8px 20px -12px color-mix(in oklch, var(--primary) 40%, transparent);
  transform: translateY(-2px);
}

/* ---------- Cards ---------- */
article.rounded-2xl,
.rounded-2xl.border.border-border,
.rounded-2xl.bg-white {
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1), border-color .45s ease;
}
article.rounded-2xl:hover,
.rounded-2xl.border.border-border:hover {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
}

/* Image zoom smoothing inside cards */
.group img,
article img {
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1), filter .8s ease;
}
.group:hover img {
  filter: saturate(1.08);
}

/* ---------- Icon badges ---------- */
.bg-gradient-primary.rounded-xl,
.bg-gradient-primary.rounded-full {
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
article:hover .bg-gradient-primary.rounded-xl {
  transform: rotate(-6deg) scale(1.08);
}

/* ---------- Section rhythm & subtle depth ---------- */
.bg-surface {
  position: relative;
}

/* Soft top/bottom fade dividers between alternating sections for a less
   abrupt, more "designed" feel */
section + section {
  position: relative;
}

/* ---------- FAQ accordion polish ---------- */
.rounded-2xl.bg-white.border.border-border.overflow-hidden button {
  transition: background-color .3s ease;
}
.rounded-2xl.bg-white.border.border-border.overflow-hidden:hover {
  box-shadow: 0 10px 30px -16px color-mix(in oklch, var(--primary) 25%, transparent);
}
.rounded-2xl.bg-white.border.border-border.overflow-hidden button:hover {
  background-color: color-mix(in oklch, var(--primary) 4%, transparent);
}
.rounded-2xl.bg-white.border.border-border.overflow-hidden span.rounded-full.bg-gradient-primary {
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rounded-2xl.bg-white.border.border-border.overflow-hidden[data-open="true"] span.rounded-full.bg-gradient-primary,
.rounded-2xl.bg-white.border.border-border.overflow-hidden.is-open span.rounded-full.bg-gradient-primary {
  transform: rotate(135deg);
}

/* ---------- Hero polish ---------- */
section.bg-surface .animate-float {
  animation-duration: 9s;
}

/* Gentle reveal refinement for elements with inline transition styles
   generated by the framework (Reveal component) */
[style*="cubic-bezier(0.22, 1, 0.36, 1)"] {
  will-change: opacity, transform;
}

/* ---------- Blog post content (prose) ---------- */
.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  color: var(--foreground);
  letter-spacing: -0.02em;
}
.prose h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
  color: var(--foreground);
}
.prose p { margin: 0 0 1.1rem; }
.prose ul {
  margin: 0 0 1.1rem 1.25rem;
  list-style: disc;
}
.prose li { margin-bottom: .4rem; }
.prose a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .25s ease;
}
.prose a:hover { color: color-mix(in oklch, var(--primary) 70%, black); }
.prose img {
  border-radius: 1rem;
  box-shadow: var(--shadow-soft, 0 8px 24px -8px rgba(0,0,0,.12));
  margin: 1.5rem 0;
}

/* ---------- Contact / form polish ---------- */
input, textarea, select {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent);
}

/* ---------- Footer polish ---------- */
footer a {
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
}
footer a:hover {
  transform: translateX(2px);
}
footer .rounded-full.bg-white\/10 {
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .35s ease;
}

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

/* ---------- Small screens: keep tap targets comfortable ---------- */
@media (max-width: 640px) {
  h1 { letter-spacing: -0.02em; }
}

/* =========================================================================
   VISIBLE AT-REST UPGRADES (not hover-dependent) — these are the changes
   that should be noticeable immediately on page load, addressing the
   "looks AI-generated" feedback with real default-state polish.
   ========================================================================= */

/* Richer, larger, more confident hero headline scale */
h1.mt-5,
h1 {
  font-size: clamp(2.25rem, 4.5vw + 1rem, 4rem);
  line-height: 1.08;
}

/* Give every hero section a subtle dotted-grid texture + stronger mesh,
   instead of a flat surface color, for real depth at rest */
section.bg-surface {
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--primary) 14%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Default (non-hover) card depth so cards read as "designed" immediately */
article.rounded-2xl,
.rounded-2xl.border.border-border,
.rounded-2xl.bg-white:not(.overflow-hidden) {
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
}

/* Eyebrow / kicker pills get a crisper ring + gradient edge at rest */
span.inline-flex.items-center.rounded-full.bg-white\/80,
span.inline-flex.items-center.rounded-full.bg-white\/80.px-3 {
  box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent);
}

/* Section eyebrow labels (e.g. "Our Story", "Our Process") get a small
   accent rule to the left for a more editorial, less "template" feel */
span.text-xs.font-semibold.uppercase.tracking-wider.text-primary {
  position: relative;
  padding-left: 18px;
  display: inline-block;
}
span.text-xs.font-semibold.uppercase.tracking-wider.text-primary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-primary, var(--primary));
  transform: translateY(-50%);
}

/* Stronger, warmer default shadow on primary CTA buttons (not just hover) */
a.bg-gradient-primary,
button.bg-gradient-primary {
  box-shadow: 0 10px 24px -10px color-mix(in oklch, var(--primary) 45%, transparent);
}

/* Numeric stat callouts (30+, 10K+, etc.) get more visual weight */
p.text-3xl.font-bold.text-gradient,
span.text-5xl.font-bold.text-gradient {
  font-size: clamp(2.25rem, 2vw + 1.5rem, 3rem);
  font-weight: 800;
}

/* Give the sticky header a real separation line + soft shadow once content
   scrolls under it, so it doesn't feel like it's floating undefined */
header.sticky {
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
}

/* Footer: subtle top border glow + richer background depth at rest */
footer.bg-gradient-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
footer.bg-gradient-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.10), transparent 45%);
  pointer-events: none;
}

/* Give the whole page a very subtle warm/cool vignette instead of flat
   white, so backgrounds feel intentional rather than default */
body {
  background-image: radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 40%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Blockquote / testimonial-style emphasis (in case used in content) */
blockquote {
  border-left: 3px solid var(--primary);
  padding: .25rem 0 .25rem 1.25rem;
  font-style: italic;
  color: var(--foreground);
}

/* =========================================================================
   MAJOR REDESIGN PASS — bold, structural, unmistakable visual upgrades.
   Targets the shared hero/section/card component patterns used across
   Home, About, Services, FAQs (and any future pages built the same way).
   ========================================================================= */

/* ---------- Hero: dark, dimensional, no longer flat ---------- */
main section.relative.overflow-hidden.bg-surface:first-of-type,
section.relative.overflow-hidden.bg-surface {
  background:
    radial-gradient(circle at 15% -10%, color-mix(in oklch, var(--primary) 30%, transparent), transparent 55%),
    radial-gradient(circle at 100% 10%, color-mix(in oklch, var(--primary-glow, var(--primary)) 22%, transparent), transparent 50%),
    linear-gradient(180deg, #0b1220 0%, #10192e 55%, var(--surface) 100%);
  background-size: 22px 22px, auto, auto;
  padding-bottom: 3rem;
}
section.relative.overflow-hidden.bg-surface h1,
section.relative.overflow-hidden.bg-surface > div > div > p.text-lg,
section.relative.overflow-hidden.bg-surface p.mt-5.text-lg {
  color: #e8ecf7;
}
section.relative.overflow-hidden.bg-surface .text-gradient {
  background-image: linear-gradient(120deg, #ffffff 0%, color-mix(in oklch, var(--primary-glow, var(--primary)) 80%, white) 45%, #ffffff 100%);
  filter: none;
}
section.relative.overflow-hidden.bg-surface nav.mt-6 a,
section.relative.overflow-hidden.bg-surface nav.mt-6 span,
section.relative.overflow-hidden.bg-surface nav.mt-6 svg {
  color: rgba(255,255,255,.65) !important;
}
section.relative.overflow-hidden.bg-surface nav.mt-6 span.text-foreground {
  color: #fff !important;
  font-weight: 600;
}
section.relative.overflow-hidden.bg-surface span.inline-flex.bg-white\/80 {
  background: rgba(255,255,255,.1) !important;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Floating decorative orbs for real depth (in addition to existing float div) */
section.relative.overflow-hidden.bg-surface::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--primary) 35%, transparent), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* ---------- Stat / value cards: gradient-bordered, richer ---------- */
.rounded-2xl.bg-surface.p-6.hover-lift.text-center {
  background: linear-gradient(180deg, #fff 0%, var(--surface) 100%);
  border: 1px solid color-mix(in oklch, var(--primary) 12%, var(--border));
  box-shadow: 0 6px 20px -10px color-mix(in oklch, var(--primary) 20%, transparent);
}

/* ---------- Section eyebrow + heading combo: more editorial spacing ---------- */
section .max-w-2xl > span.text-xs,
section .max-w-3xl > span.text-xs {
  color: var(--primary);
}

/* CTA-style closing bands (e.g. "Start Your Repair") get a full-bleed
   gradient panel look instead of floating on plain background */
section.bg-surface:has(> div > div.mt-12.text-center) {
  position: relative;
}

/* ---------- FAQ PAGE — full redesign ---------- */
/* Numbered, color-accented, more spacious accordion cards */
section.container.mx-auto.max-w-3xl div.space-y-4 {
  counter-reset: faq;
}
section.container.mx-auto.max-w-3xl div.space-y-4 > div {
  counter-increment: faq;
}
section.container.mx-auto.max-w-3xl .rounded-2xl.bg-white.border.border-border.overflow-hidden {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--primary) 10%, var(--border));
  border-radius: 1.25rem;
  box-shadow: 0 4px 18px -10px rgba(15,23,42,.10);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}
section.container.mx-auto.max-w-3xl .rounded-2xl.bg-white.border.border-border.overflow-hidden::before {
  content: counter(faq, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 1.6rem;
  font-weight: 800;
  color: color-mix(in oklch, var(--primary) 12%, transparent);
  letter-spacing: -0.02em;
  pointer-events: none;
  z-index: 0;
}
section.container.mx-auto.max-w-3xl .rounded-2xl.bg-white.border.border-border.overflow-hidden button {
  position: relative;
  z-index: 1;
  padding: 1.5rem 3.25rem 1.5rem 1.75rem;
}
section.container.mx-auto.max-w-3xl .rounded-2xl.bg-white.border.border-border.overflow-hidden button span.text-base {
  font-size: 1.05rem;
}
section.container.mx-auto.max-w-3xl .rounded-2xl.bg-white.border.border-border.overflow-hidden:hover {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
  box-shadow: 0 16px 34px -14px color-mix(in oklch, var(--primary) 28%, transparent);
  transform: translateY(-3px);
}
section.container.mx-auto.max-w-3xl .rounded-2xl.bg-white.border.border-border.overflow-hidden p.px-6.pb-6 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  border-top: 1px dashed color-mix(in oklch, var(--primary) 16%, var(--border));
  padding-top: 1rem;
  margin-top: -0.25rem;
}

/* FAQ page header section: add a colorful category strip above the list */
section.container.mx-auto.max-w-3xl {
  position: relative;
}
section.container.mx-auto.max-w-3xl::before {
  content: "Still have a question? Call us anytime — we're happy to help.";
  display: block;
  margin: 0 auto 2.5rem;
  max-width: 640px;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--primary) 16%, transparent);
  border-radius: 999px;
  padding: .6rem 1.25rem;
}

/* ---------- Careers job card: richer shadow + hover depth (layered on
   top of the page's own inline <style>, additive only) ---------- */
.job-card {
  transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -18px rgba(15,23,42,.22);
}

/* ---------- Global CTA buttons: bigger, bolder presence ---------- */
a.inline-flex.items-center.gap-2.rounded-full.bg-gradient-primary,
a.inline-flex.rounded-full.bg-gradient-primary {
  padding-top: .95rem;
  padding-bottom: .95rem;
  font-size: .95rem;
  letter-spacing: -0.01em;
}

/* ---------- Homepage "Eurotech difference" carousel: shrink it down.
   The component renders each slide at aspect-[16/10] at full container
   width, which is very tall on wide screens. Cap the height so the whole
   carousel is visible without needing to scroll. Scoped narrowly to this
   carousel's unique wrapper class combo (rounded-3xl + shadow-elegant +
   bg-surface + group), which no other card on the site uses. ---------- */
.rounded-3xl.shadow-elegant.border.border-border.bg-surface.group {
  max-height: 380px;
}
.rounded-3xl.shadow-elegant.border.border-border.bg-surface.group [class*="aspect-"] {
  aspect-ratio: 16 / 6;
  max-height: 380px;
}
@media (max-width: 768px) {
  .rounded-3xl.shadow-elegant.border.border-border.bg-surface.group {
    max-height: 280px;
  }
  .rounded-3xl.shadow-elegant.border.border-border.bg-surface.group [class*="aspect-"] {
    aspect-ratio: 4 / 3;
    max-height: 280px;
  }
}