/* Hero CTA styling ligger i assets/css/components/cta.css (Sektion 1) */
/* heroes */
/* =========================================
   HEROES (Home, Servicepage, Services, Om os)
   Forventer variabler fra global.css:
   --ceylan-gold, --ceylan-gold-dark, --text, --text-2
========================================= */

/* Fælles grundlag */
.hero-base {
  position: relative;
  width: 100%;
  padding: clamp(60px, 10vw, 140px) clamp(20px, 3vw, 40px);
  overflow: hidden;
  text-align: center;
}
.hero-base::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 2px 2px,
    rgba(176, 0, 23, 0.04) 1px,
    transparent 0
  );
  background-size: 50px 50px;
  opacity: 0.35;
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: clamp(12px, 1.5vw, 20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

/* Typografi fælles */
.hero-title {
  font-size: clamp(2rem, 4.8vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 clamp(12px, 2.2vw, 18px);
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.hero-text {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  max-width: 800px;
  margin: 0 auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* hero-cta styling samlet i assets/css/components/cta.css (Sektion 1) */

/* ---------- HOME ---------- */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 4vw, 48px);
  background: #000000;
  overflow: hidden;
  text-align: center;
  margin-top: -2rem;
  margin-bottom: -4rem;
}

/* ---------- PRISER ---------- */
.priser-hero {
  padding: clamp(72px, 12vw, 140px) clamp(20px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(180deg, #000000 0%, #0f0f0f 100%);
}

.priser-hero__inner {
  max-width: 900px;
  margin: 0 auto;
}

.priser-eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: #d2ab2b;
  margin: 0 0 12px;
}

.priser-title {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 54px);
  color: #e2c86c;
}

.priser-lead {
  margin: 0 auto;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

@media (max-width: 768px) {
  .priser-hero {
    text-align: left;
  }
}

/* Filmisk korn/vignette */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size:
    60px 60px,
    40px 40px;
  opacity: 0.3;
  z-index: 1;
}

/* Gold glow — TOP */
.home-hero::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -54px;
  height: 96px;
  background: linear-gradient(90deg, #d2ab2b, #e2c86c, #d2ab2b);
  background-size: 220% 100%;
  filter: blur(26px) saturate(1.08);
  opacity: 0.15;
  clip-path: polygon(0 0, 100% 58%, 100% 100%, 0 100%);
  animation: ceylanLightSweep 13.5s linear infinite;
  pointer-events: none;
}

@keyframes ceylanLightSweep {
  to {
    background-position: 220% 0;
  }
}

/* Scroll-reaktion (kun moderne browsere) */
@supports (animation-timeline: auto) {
  .home-hero {
    view-timeline-name: --hero;
    view-timeline-axis: block;
  }

  .home-hero::after {
    animation-name: ceylanLightSweep, ceylanParallax;
    animation-duration: 13.5s, 1s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, 1;
    animation-timeline: auto, --hero;
    animation-range:
      normal,
      entry 0% exit 85%;
  }

  @keyframes ceylanParallax {
    from {
      transform: translateY(0);
      opacity: 0.26;
    }
    to {
      transform: translateY(20px);
      opacity: 0.18;
    }
  }
}

/* Glasplade bag tekst */
.home-herocontainer {
  position: relative;
  max-width: 900px;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px) saturate(1.06);
  border: 1px solid #d8cec4 !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  text-align: center !important;
}

.home-herocontainer::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  border-radius: 2px;
  opacity: 0.7;
}

/* Hero Title */
.home-herotitle {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Montserrat",
    sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000000 !important;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  max-width: 900px;
  text-shadow: none;
  position: relative;
}

.home-herotitle::after {
  content: none;
  display: none;
}

/* Hero Text */
.home-herotext {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.4;
  letter-spacing: 0;
  color: #333333 !important;
  margin: 0 0 32px;
  text-align: left;
  max-width: 700px;
  text-shadow: none;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .home-hero {
    padding: 70px 20px !important;
  }

  .home-herocontainer {
    padding: 26px 22px !important;
  }

  .home-herotitle {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
  }

  .home-herotext {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
  }
}

/* Hero CTA Button - styling i assets/css/components/cta.css (Sektion 1) */

/* ---------- SERVICES (bilservice oversigt) ---------- */
.services-hero {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  max-width: 1400px !important;
  margin: 0 auto 96px !important;
  padding: clamp(110px, 18vw, 190px) clamp(22px, 4vw, 68px) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  text-align: center !important;
  min-height: auto !important;

  border: 1px solid #d8cec4 !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 40px rgba(0, 0, 0, 0.06) !important;

  background:
    radial-gradient(
      700px 420px at 88% 6%,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0) 65%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 238, 230, 0.92)
    ),
    radial-gradient(
      1200px 680px at 85% -12%,
      rgba(210, 171, 43, 0.1),
      transparent 60%
    ) !important;
  background-size: auto, auto, auto !important;
  background-position:
    center,
    center,
    85% -10% !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll, scroll, scroll !important;
}

.services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      rgba(255, 255, 255, 0) 1px 18px
    ),
    radial-gradient(1200px 600px at 50% 0, rgba(0, 0, 0, 0.07), transparent 70%);
  opacity: 0.22 !important;
}

.services-hero::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -54px;
  height: 96px !important;

  background: linear-gradient(90deg, #b00017, #d62a3a, #b00017);
  background-size: 220% 100% !important;
  filter: blur(26px) saturate(1.08) !important;
  opacity: 0.26 !important;

  clip-path: polygon(0 0, 100% 58%, 100% 100%, 0 100%) !important;

  animation: hodjaLightSweep 13.5s linear infinite !important;
}

.services-herocontainer {
  position: relative;
  max-width: 900px;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px) saturate(1.06);
  border: 1px solid #d8cec4 !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  text-align: center !important;
}

.services-herocontainer::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  border-radius: 2px;
  opacity: 0.7;
}

.services-herotitle {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Montserrat",
    sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000000 !important;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  max-width: 900px;
  text-shadow: none;
  position: relative;
}

.services-herotitle::after {
  content: none;
  display: none;
}

.services-herotext {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.4;
  letter-spacing: 0;
  color: #333333 !important;
  margin: 0 0 32px;
  text-align: left;
  max-width: 700px;
  text-shadow: none;
}

/* Hero CTA Button - styling i assets/css/components/cta.css (Sektion 1) */

/* ---------- SERVICEPAGE (enkelt service) ---------- */
.servicepage-hero {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  max-width: 1400px !important;
  margin: 0 auto 96px !important;
  padding: clamp(110px, 18vw, 190px) clamp(22px, 4vw, 68px) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  text-align: center !important;
  min-height: auto !important;

  border: 1px solid #d2ab2b !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(210, 171, 43, 0.1),
    inset 0 -10px 40px rgba(0, 0, 0, 0.06) !important;

  background:
    radial-gradient(
      700px 420px at 88% 6%,
      rgba(210, 171, 43, 0.08),
      rgba(210, 171, 43, 0) 65%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(15, 15, 15, 0.92)),
    radial-gradient(
      1200px 680px at 85% -12%,
      rgba(210, 171, 43, 0.05),
      transparent 60%
    ) !important;
  background-size: auto, auto, auto !important;
  background-position:
    center,
    center,
    85% -10% !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll, scroll, scroll !important;
}

.servicepage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      125deg,
      rgba(210, 171, 43, 0.02) 0 1px,
      rgba(210, 171, 43, 0) 1px 18px
    ),
    radial-gradient(
      1200px 600px at 50% 0,
      rgba(255, 255, 255, 0.02),
      transparent 70%
    );
  opacity: 0.22 !important;
}

.servicepage-hero::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -54px;
  height: 96px !important;

  background: linear-gradient(90deg, #d2ab2b, #e2c86c, #d2ab2b);
  background-size: 220% 100% !important;
  filter: blur(26px) saturate(1.08) !important;
  opacity: 0.15 !important;

  clip-path: polygon(0 0, 100% 58%, 100% 100%, 0 100%) !important;

  animation: ceylanLightSweep 13.5s linear infinite !important;
}

.servicepage-hero-content .hero-scroll-indicator {
  margin-top: 3rem;
}

.servicepage-hero-content .hero-scroll-icon {
  width: 1.5rem;
  height: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  animation: bounce 2s infinite;
  stroke: #d2ab2b;
}

.servicepage-herocontainer {
  position: relative;
  max-width: 900px;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px) saturate(1.06);
  border: 1px solid #d8cec4 !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  text-align: center !important;
}

.servicepage-herocontainer::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  border-radius: 2px;
  opacity: 0.7;
}

.servicepage-herotitle {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Montserrat",
    sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000000 !important;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  max-width: 900px;
  text-shadow: none;
  position: relative;
}

.servicepage-herotitle::after {
  content: none;
  display: none;
}

.servicepage-herotext {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.4;
  letter-spacing: 0;
  color: #333333 !important;
  margin: 0 0 32px;
  text-align: left;
  max-width: 700px;
  text-shadow: none;
}

/* Hero CTA Button - styling i assets/css/components/cta.css (Sektion 1) */

/* ---------- OM OS ---------- */
.about-hero {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 60vh, 720px);
  padding: clamp(32px, 6vw, 60px) clamp(16px, 4vw, 32px);
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(26, 26, 26, 0.85) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 2px 2px,
    rgba(210, 171, 43, 0.04) 1px,
    transparent 0
  );
  background-size: 50px 50px;
  opacity: 0.35;
  z-index: 1;
}
.about-herotitle::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  border-radius: 2px;
  opacity: 0.5;
}
.about-herotitle {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 18px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.about-herotext {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 32px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-inner {
    padding: 20px;
  }
  .hero-cta {
    width: 100%;
    max-width: 320px;
  }
}

/* =========================================
   FRONT PAGE HERO (Minimal luksus design)
========================================= */

.hero-section {
  margin-top: -2rem;
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  animation: fadeIn 1s ease-in 0.2s both;
}

.hero-subtitle {
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #d2ab2b;
}

.hero-headline {
  font-family: "Cormorant Garamond", serif;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: #e2c86c;
}

.hero-description {
  font-family: "Outfit", sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  line-height: 1.75;
}

.hero-scroll-indicator {
  margin-top: 6rem;
}

.hero-scroll-icon {
  width: 1.5rem;
  height: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  animation: bounce 2s infinite;
  stroke: #d2ab2b;
}

@media (min-width: 768px) {
  .hero-headline {
    font-size: 4.5rem;
  }
  .hero-description {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .hero-headline {
    font-size: 6rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Hero Background SVG (Overlays for front-page) */
.hero-background {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  overflow: hidden;
}

.hero-background-svg {
  width: 100%;
  height: 100%;
}

/* Servicepage Hero Background */
.servicepage-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
}

.servicepage-hero-bg svg {
  width: 100%;
  height: 100%;
}

/* Servicepage Hero Content */
.servicepage-hero-content {
  position: relative;
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.servicepage-hero-label {
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: #d2ab2b;
}

.servicepage-hero-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: #e2c86c;
}

@media (min-width: 768px) {
  .servicepage-hero-title {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .servicepage-hero-title {
    font-size: 4.5rem;
  }
}

.servicepage-hero-desc {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
}

@media (min-width: 768px) {
  .servicepage-hero-desc {
    font-size: 1.125rem;
  }
}