/* Stacked scroll headlines */
.stacked { 
  background: var(--stacked-bg); 
  padding: 16vh 20px 0; 
  --anchor: calc(12vh - 70px); 
  --h: clamp(56px, 11vw, 140px); 
  --gap: calc(var(--h) * 1.5);
  position: relative; /* Za absolute pozicioniranje boxa */
}

/* Crni box na dnu sekcije */
.stacked::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(var(--h) * 1.5 + 50px); /* 1.5x visine headinga + 30px */
  background: #0A0B08; /* Izravna boja pozadine */
  z-index: 4; /* Iznad headingsa (headings imaju z-index 1, 2, 3) */
}

/* Mobilna verzija - sticky pozicije niže */
@media (max-width: 768px) {
  .stacked { --anchor: calc(30vh); }
}
.stacked-sticky { position: relative; top: auto; height: auto; display: flex; align-items: flex-start; justify-content: center; z-index: 2; }
.stacked-list { list-style:none; padding:0; margin:0; width:100%; max-width: 1100px; display:flex; flex-direction:column; gap: 0; padding-bottom: var(--gap); }
.stacked-list::after { content: ""; display: block; height: 600px; }
.stacked-list { list-style:none; padding:0; margin:0; width:100%; max-width: 1100px; display:flex; flex-direction:column; gap: 0; }
.stacked-item { margin-top: 75vh; position: -webkit-sticky; position: sticky; display: block; }
.stacked-item:first-child { margin-top: 0; }
.stacked-item:nth-child(3) { margin-top: 30vh; }
.stacked-item:nth-child(3) .stacked-row { transform: none; }
.stacked-item:first-child { position: sticky; top: var(--anchor); z-index: 3; background: transparent; }
.stacked-item:nth-child(2) { position: sticky; top: calc(var(--anchor) + var(--gap)); z-index: 2; background: transparent; }
.stacked-item:nth-child(3) { position: sticky; top: calc(var(--anchor) + var(--gap) * 2); z-index: 1; background: transparent; }
.stacked-item { transform: none; opacity: 1; will-change: auto; }
.stacked-row { display:flex; align-items:center; gap: 18px; justify-content:center; }
.stacked-title { font-size: clamp(56px, 11vw, 140px); font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--color-text-dark); }
.stacked .stacked-title { color: var(--color-text-dark) !important; }
.stacked { padding-left: 20px; padding-right: 20px; }
.icon-card { width: clamp(44px, 6vw, 68px); height: clamp(44px, 6vw, 68px); display:grid; place-items:center; border-radius: 18px; background: var(--icon-card-bg); color: var(--color, var(--color-accent-3)); box-shadow: var(--shadow-md-alt); }
.icon-card ._icon { display:inline-flex; }
/* Per-item fade/blur kada heading napušta dno sekcije (CSS scroll-linked) */
@keyframes stackedExitFade {
  from { opacity: 1; filter: blur(0px); }
  to { opacity: 0; filter: blur(10px); }
}
/* Definiraj timeline po stavci */
.stacked-item { view-timeline-name: --stackItem; view-timeline-axis: block; view-timeline-inset: 0 0 60vh 0; }
/* Animiraj red (ikona + naslov) pri izlazu na dnu */
.stacked-item .stacked-row {
  animation-name: stackedExitFade;
  animation-timeline: --stackItem;
  animation-range: exit -10% exit 25%;
  animation-fill-mode: both;
}
/* Paleta boja definirana je u css/palette.css i dostupna globalno */

* { 
  box-sizing: border-box;
}
html { 
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body { 
  height: 100%; 
  /* width left to default to avoid layout thrash */
  user-select: none; /* Spriječi selektiranje teksta */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Strong guard against accidental horizontal overflow */
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; }

/* Omogući glavni (page) scroll uvijek */
html { overflow-y: scroll; }
body { overflow-y: auto; }

/* Fallback: slider može skrivati vlastiti višak bez utjecaja na page scroll */
.slider { overflow: hidden; }

/* Osiguraj da slider nema margin/padding koji bi uzrokovao layout bug */
.slider {
  margin: 0;
  padding: 0;
}

/* Spriječi text cursor na tekstu */
h1, h2, h3, h4, h5, h6, p, span, a, div {
  cursor: default;
}

/* Ensure obvious click affordance on buttons */
a.btn, button.btn, .btn, .btn-contact, .cta-buttons .btn {
  cursor: pointer;
}
a.btn:hover, button.btn:hover, .btn:hover, .btn-contact:hover, .cta-buttons .btn:hover {
  cursor: pointer;
}

/* Clickable links/cards should show hand cursor */
.nav-link,
.brand,
.service-card,
.service-card-modern,
.card-link,
.card-link-arrow,
.service-card a,
.services-grid-modern a {
  cursor: pointer !important;
}
body {
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--color-bg) !important;
  color: var(--color-text-dark);
  font-family: 'Poppins', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  box-sizing: border-box;
}

/* Global rule: allow only main page scroll, disable nested scroll areas */
html, body { overscroll-behavior: contain; }
/* Common layout wrappers should not create their own scrollbars */
:where(section, .section, .content, .container, .wrapper, [data-scroll], [data-scrollable]) {
  max-height: none !important;
  overflow: visible !important;
}
/* Exceptions: elementos that need overflow control for visual effects (ne stvaraju scroll) */
.hero,
.floating-objects,
.object,
.hero-tile::after,
.glass-card::after,
.slider {
  overflow: revert !important;
  max-height: revert !important;
}
/* Improve touch behavior so vertical scroll always bubbles to page */
* { touch-action: pan-y manipulation; }

/* Animated breathing gradient spots */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-with-spots);
  /* Animation enabled only on homepage to reduce compositing on subpages */
  contain: paint;
}

/* Enable subtle breathing only on homepage */
body.page-home::before {
  animation: gradientBreathe 12s ease-in-out infinite;
}

/* On other pages, keep background static to prevent flicker */
body:not(.page-home)::before {
  animation: none !important;
}

/* Kontakt: ukloni animirani background spot sloj radi maksimalne stabilnosti */
body.page-kontakt::before {
  content: none;
}

/* Pause background animations during fast scroll bursts to prevent flicker */
body.is-fast-scroll::before { animation-play-state: paused; }
body.is-fast-scroll .hero::before { animation-play-state: paused; }

/* During fast upward scroll bursts, pause costly filters/transitions on moving layers */
body.is-fast-scroll .parallax-layer,
body.is-fast-scroll .bg-orb,
body.is-fast-scroll .hero-visual,
body.is-fast-scroll .object .model-image,
body.is-fast-scroll .hero-tile::after,
body.is-fast-scroll .glass-card::after {
  transition: none !important;
  filter: none !important;
}
/* Tijekom brzog skrola, ugasi backdrop-filter globalno da se spriječi treperenje */
body.is-fast-scroll * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Svi elementi koriste isti pristup - bez razlike između homepagea i subpages */

@keyframes gradientBreathe {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}

body > * {
  position: relative;
  z-index: 1;
}

/* Fixed solid underlay behind header to decouple moving content from header compositing */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px; /* matches header height */
  background: var(--color-bg);
  z-index: 19; /* just below header (header uses z-index:20) */
  pointer-events: none;
}
@media (max-width: 768px) {
  body::after { height: 70px; }
}

/* Utility: tekst na krem pozadini (#FFE8C8) uvijek tamni poput KODEKKO headinga */
.bg-cream {
  background: var(--color-bg) !important;
  color: var(--color-text-dark) !important;
}
.bg-cream h1,
.bg-cream h2,
.bg-cream h3,
.bg-cream h4,
.bg-cream h5,
.bg-cream h6,
.bg-cream p,
.bg-cream span,
.bg-cream li,
.bg-cream a,
.bg-cream small,
.bg-cream .section-title,
.bg-cream .service-card h3,
.bg-cream .service-card p {
  color: var(--color-text-dark) !important;
}

/* Globalne tematske klase za kontrast teksta */
.theme-dark, .theme-dark :where(h1,h2,h3,h4,h5,h6,p,li,small,span,a) {
  color: var(--color-text) !important;
}
.theme-light, .theme-light :where(h1,h2,h3,h4,h5,h6,p,li,small,span,a) {
  color: var(--color-text-dark) !important;
}

/* Header CSS je izdvojen u css/header.css komponentu */

/* Page content - osigura da header ne prekriva sadržaj */
.page-content {
  padding-top: 80px; /* Visina headera (desktop) */
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box;
}

/* Responsive page-content padding based on header height */
@media (max-width: 968px) {
  .page-content {
    padding-top: 72px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding-top: 70px;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding-top: 68px;
  }
}

@media (max-width: 360px) {
  .page-content {
    padding-top: 66px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .page-content {
    padding-top: 60px;
  }
}

/* Homepage specific styles are now in css/homepage.css */

/* Services Section */
.services {
  padding: 80px 0;
  background: var(--color-bg);
  position: relative;
  z-index: 10;
}

/* Solutions section (hero-quality continuation) */
.solutions { 
  padding: 96px 0;
  background: var(--color-bg) !important;
}
.solutions-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.solutions .subtitle { margin: -12px 0 16px; font-size: 18px; opacity: .9; }
.bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bullet-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.bullet-list .icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--color-text-dark); background: var(--overlay-white-80); border-radius: 999px; box-shadow: var(--shadow-sm-alt); }
.cta-row { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.solutions-cards { display: grid; gap: 16px; perspective: 1000px; }
.glass-card { 
  background: var(--glass-card-bg); 
  border: var(--glass-card-border); 
  border-radius: 18px; 
  padding: 22px; 
  box-shadow: var(--glass-card-shadow); 
  transform-style: preserve-3d; 
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), opacity .6s; 
  position: relative; 
  overflow: visible; 
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* ===== STATIČAN GLOW EFEKT ZA SVE KARTICE ===== */
/* Poboljšan glow efekt - glatkiji i više kvalitete */
.hero-tile::after,
.glass-card::after,
.service-card::after,
.service-card-modern::after,
.agent-card::after,
.team-card::after,
.mission-card::after,
.value-item::after,
.timeline-item::after,
.industry-card::after,
.additional-item::after,
.benefit-item::after,
.stat-item::after {
  content: "";
  position: absolute;
  inset: -12px;
  background: radial-gradient(ellipse 600px 400px at 50% 50%, 
    rgba(var(--pastel-teal-rgb), 0.18) 0%, 
    rgba(var(--pastel-teal-rgb), 0.12) 30%,
    rgba(var(--pastel-teal-rgb), 0.06) 50%,
    rgba(var(--pastel-teal-rgb), 0.02) 70%,
    transparent 85%);
  filter: blur(18px);
  -webkit-filter: blur(18px);
  opacity: 0.4;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
  border-radius: 24px;
  transform: translateZ(0);
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero-tile:hover::after,
.glass-card:hover::after,
.service-card:hover::after,
.service-card-modern:hover::after,
.agent-card:hover::after,
.team-card:hover::after,
.mission-card:hover::after,
.value-item:hover::after,
.timeline-item:hover::after,
.industry-card:hover::after,
.additional-item:hover::after,
.benefit-item:hover::after,
.stat-item:hover::after {
  opacity: 0.6;
}

/* Osiguraj da kartice imaju position: relative za glow efekt */
.glass-card,
.service-card,
.service-card-modern,
.agent-card,
.team-card,
.mission-card,
.value-item,
.timeline-item,
.industry-card,
.additional-item,
.benefit-item,
.stat-item {
  position: relative;
}

/* Mobile optimizacija - smanjen blur ali zadržana kvaliteta */
@media (max-width: 768px) {
  .hero-tile::after,
  .glass-card::after,
  .service-card::after,
  .service-card-modern::after,
  .agent-card::after,
  .team-card::after,
  .mission-card::after,
  .value-item::after,
  .timeline-item::after,
  .industry-card::after,
  .additional-item::after,
  .benefit-item::after,
  .stat-item::after {
    inset: -10px;
    filter: blur(16px);
    -webkit-filter: blur(16px);
    opacity: 0.35;
    background: radial-gradient(ellipse 500px 350px at 50% 50%, 
      rgba(var(--pastel-teal-rgb), 0.16) 0%, 
      rgba(var(--pastel-teal-rgb), 0.10) 30%,
      rgba(var(--pastel-teal-rgb), 0.05) 50%,
      rgba(var(--pastel-teal-rgb), 0.02) 70%,
      transparent 85%);
  }
  
  .hero-tile:hover::after,
  .glass-card:hover::after,
  .service-card:hover::after,
  .service-card-modern:hover::after,
  .agent-card:hover::after,
  .team-card:hover::after,
  .mission-card:hover::after,
  .value-item:hover::after,
  .timeline-item:hover::after,
  .industry-card:hover::after,
  .additional-item:hover::after,
  .benefit-item:hover::after,
  .stat-item:hover::after {
    opacity: 0.5;
  }
}

/* Tablet optimizacija - zadržana kvaliteta */
@media (max-width: 968px) and (min-width: 769px) {
  .hero-tile::after,
  .glass-card::after,
  .service-card::after,
  .service-card-modern::after,
  .agent-card::after,
  .team-card::after,
  .mission-card::after,
  .value-item::after,
  .timeline-item::after,
  .industry-card::after,
  .additional-item::after,
  .benefit-item::after,
  .stat-item::after {
    inset: -11px;
    filter: blur(17px);
    -webkit-filter: blur(17px);
    opacity: 0.38;
    background: radial-gradient(ellipse 550px 375px at 50% 50%, 
      rgba(var(--pastel-teal-rgb), 0.17) 0%, 
      rgba(var(--pastel-teal-rgb), 0.11) 30%,
      rgba(var(--pastel-teal-rgb), 0.055) 50%,
      rgba(var(--pastel-teal-rgb), 0.02) 70%,
      transparent 85%);
  }
  
  .hero-tile:hover::after,
  .glass-card:hover::after,
  .service-card:hover::after,
  .service-card-modern:hover::after,
  .agent-card:hover::after,
  .team-card:hover::after,
  .mission-card:hover::after,
  .value-item:hover::after,
  .timeline-item:hover::after,
  .industry-card:hover::after,
  .additional-item:hover::after,
  .benefit-item:hover::after,
  .stat-item:hover::after {
    opacity: 0.55;
  }
}
.glass-card .tag { 
  display:inline-block; 
  font-size:12px; 
  font-weight:600; 
  padding:4px 10px; 
  border-radius:999px; 
  background: var(--overlay-dark-04); 
  margin-bottom:0;
  align-self: flex-start;
}
.glass-card h3 { 
  margin: 0 0 8px; 
  font-size: 20px; 
  line-height: 1.2;
  font-weight: 600;
}
.glass-card p { 
  margin: 0 0 8px; 
  opacity: .85; 
  line-height: 1.5;
  font-size: 15px;
  flex: 1;
}
.glass-card .card-link { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 20px;
  font-weight: 600; 
  font-size: 15px;
  color: var(--primary-black);
  background: var(--color-accent-3);
  border: 2px solid var(--color-accent-3);
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 2px 8px rgba(var(--pastel-teal-rgb), 0.2);
  align-self: flex-start;
  cursor: pointer;
}

.glass-card .card-link::after {
  content: '→';
  display: inline-block;
  transition: transform 0.3s ease;
}

.glass-card .card-link:hover { 
  background: rgba(var(--pastel-teal-rgb), 0.15);
  color: var(--color-accent-3);
  border-color: var(--color-accent-3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--pastel-teal-rgb), 0.3);
}

.glass-card .card-link:hover::after {
  transform: translateX(4px);
}

.glass-card .card-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(var(--pastel-teal-rgb), 0.25);
}
.tilt:hover { transform: rotateX(4deg) rotateY(-6deg) translateZ(2px); box-shadow: var(--shadow-2xl); }

/* Reveal: kartice ulaze jedna po jedna s desne strane uz ubrzanje/kočenje */
.solutions .glass-card.reveal-on-scroll { 
  opacity: 0; 
  transform: translateX(64px) scale(.98);
  transition: 
    transform .8s cubic-bezier(0.16, 1, 0.3, 1), /* brzo ubrzanje, meko kočenje */
    opacity .6s ease-out,
    box-shadow .6s ease-out;
}
.solutions .glass-card.reveal-on-scroll.is-visible { 
  opacity: 1; 
  transform: translateX(0) scale(1);
}
.solutions-cards .glass-card:nth-child(1) { transition-delay: .05s; }
.solutions-cards .glass-card:nth-child(2) { transition-delay: .18s; }
.solutions-cards .glass-card:nth-child(3) { transition-delay: .31s; }

/* Capabilities marquee + tiles */
.capabilities { padding: 72px 0; }
.marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, var(--primary-black) 8%, var(--primary-black) 92%, transparent); }
.marquee-track { display: inline-flex; gap: 12px; padding: 8px 0; animation: marquee 18s linear infinite; }
.chip { padding: 8px 14px; border-radius: 999px; background: var(--overlay-white-90); color: var(--color-text-dark); font-weight:600; border: 1px solid var(--border-dark-05); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 22px; }
.tile { display:block; text-decoration:none; background: var(--overlay-white-88); border: 1px solid var(--border-dark-05); border-radius:18px; padding:22px; color: var(--color-text-dark); box-shadow: var(--shadow-md-alt); transition: transform .35s var(--ease-out-quart), box-shadow .35s; }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Paths CTA */
.paths { padding: 72px 0 96px; }
.paths-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.path-card { display:block; text-decoration:none; border-radius:20px; background: linear-gradient(180deg, var(--overlay-white-90), var(--overlay-white-85)); border: 1px solid var(--border-dark-05); box-shadow: var(--shadow-lg-alt); transition: transform .35s var(--ease-out-quart), box-shadow .35s; }
.path-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl-alt); }
.path-content { padding: 28px; color: var(--color-text-dark); }
.path-content h3 { margin:0 0 6px; font-size:22px; }
.path-content p { margin:0 0 10px; opacity:.85; }
.path-cta { font-weight:700; color: var(--color-accent); }

/* Trust strip */
.trust { padding: 36px 0; }
.trust-row { display:flex; gap: 18px; align-items:center; justify-content:center; flex-wrap:wrap; }
.trust-k { font-weight:700; opacity:.7; }
.trust-line { display:flex; gap:16px; flex-wrap:wrap; }
.trust-line span { padding: 8px 14px; border-radius:999px; background: var(--overlay-dark-04); border: 1px solid var(--border-dark-05); }

/* Impact metrics */
.impact { padding: 64px 0; }
.impact-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
.impact-card { background: var(--overlay-white-92); border: 1px solid var(--border-dark-05); border-radius:16px; padding:22px; text-align:center; box-shadow: var(--shadow-md-alt); }
.impact-num { font-size: 44px; font-weight: 800; letter-spacing: -1px; }
.impact-num::after { content:"%"; font-size:24px; margin-left:4px; }
.impact-card:nth-child(3) .impact-num::after { content:" tjedna"; font-size:18px; }
.impact-caption { opacity:.85; margin-top:6px; }

/* (teaser zamijenjen tile-ovima iznad) */

/* (uklonjen pristup na početnoj; CTA ide direktno na usluge) */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 60px;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.service-card {
  background: var(--overlay-white-90);
  padding: 40px 30px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--color-text-dark);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--overlay-white-20);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--overlay-white-40), transparent);
  transition: left 0.5s ease;
}

.service-card:hover::before {
  left: 100%;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-15);
}

.service-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.service-card h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--color-text-dark);
}

.service-card p {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.service-arrow {
  font-size: 20px;
  color: var(--color-accent);
  transition: transform 0.3s ease;
}

.service-card:hover .service-arrow {
  transform: translateX(5px);
}

/* CTA Section */
.cta {
  padding: 80px 0;
  background: var(--color-bg);
  color: var(--color-text-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(120px 120px at 50% 50%, var(--overlay-white-10), transparent 60%);
  opacity: 1;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta h2 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 20px;
}

.cta p {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.9;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--btn-primary-hover-shadow);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-accent);
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-text);
  transform: translateY(-2px);
}

.btn-large {
  padding: 20px 40px;
  font-size: 18px;
}

/* ===== COMPREHENSIVE RESPONSIVE DESIGN ===== */

/* Tablet & Small Desktop */
@media (max-width: 1200px) {
  .container {
    padding: 0 24px;
    max-width: 100%;
  }
  
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
}

/* Tablet Portrait */
@media (max-width: 968px) {
  .container {
    padding: 0 20px;
  }
  
  .solutions {
    padding: 80px 20px;
  }
  
  .solutions-cards {
    gap: 20px;
  }
  
  .glass-card {
    padding: 26px;
    gap: 10px;
  }
  
  .glass-card .tag {
    font-size: 11px;
    margin-bottom: 2px;
  }
  
  .glass-card h3 {
    font-size: clamp(22px, 3.2vw, 24px);
    margin-bottom: 10px;
  }
  
  .glass-card p {
    font-size: clamp(15px, 2vw, 16px);
    margin-bottom: 12px;
    line-height: 1.6;
  }
  
  .glass-card .card-link {
    font-size: clamp(14px, 1.9vw, 15px);
    margin-top: 16px;
    padding: 11px 18px;
    white-space: nowrap;
    align-self: flex-start;
    min-height: 44px;
  }
  
  .glass-card .card-link::after {
    content: '→';
    margin-left: 4px;
  }
  
  .services {
    padding: 70px 20px;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .service-card {
    padding: 32px 28px;
  }
  
  .section-title {
    font-size: clamp(32px, 5vw, 44px);
    margin-bottom: 48px;
  }
  
  .cta {
    padding: 70px 20px;
  }
  
  .cta h2 {
    font-size: clamp(32px, 4.5vw, 42px);
  }
  
  .cta p {
    font-size: clamp(16px, 2vw, 18px);
  }
  
  .btn {
    padding: 14px 28px;
    font-size: clamp(15px, 1.8vw, 16px);
  }
  
  .btn-large {
    padding: 16px 32px;
    font-size: clamp(16px, 2vw, 18px);
  }
}

/* Mobile Landscape & Large Phones */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  
  .solutions {
    padding: 60px 16px;
  }
  
  .solutions-grid {
    gap: 40px;
  }
  
  .solutions .subtitle {
    font-size: clamp(16px, 2vw, 18px);
    margin-bottom: 20px;
  }
  
  .bullet-list {
    gap: 14px;
  }
  
  .bullet-list li {
    font-size: clamp(15px, 1.8vw, 17px);
    padding: 8px 0;
  }
  
  .bullet-list .icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }
  
  .cta-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .cta-row .btn {
    width: 100%;
    max-width: 400px;
  }
  
  .services {
    padding: 60px 16px;
  }
  
  .services-grid {
    gap: 20px;
  }
  
  .service-card {
    padding: 28px 24px;
  }
  
  .service-icon {
    width: 48px;
    height: 48px;
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .service-card h3 {
    font-size: clamp(20px, 2.6vw, 24px);
    margin-bottom: 12px;
  }
  
  .service-card p {
    font-size: clamp(15px, 1.9vw, 16px);
    margin-bottom: 16px;
  }
  
  .section-title {
    font-size: clamp(28px, 4vw, 36px);
    margin-bottom: 40px;
  }
  
  .section-title::after {
    width: 50px;
    height: 3px;
    bottom: -12px;
  }
  
  .cta {
    padding: 60px 16px;
  }
  
  .cta h2 {
    font-size: clamp(28px, 4vw, 36px);
    margin-bottom: 16px;
  }
  
  .cta p {
    font-size: clamp(15px, 1.9vw, 16px);
    margin-bottom: 28px;
  }
  
  .cta-actions {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }
  
  .cta-actions .btn {
    width: 100%;
    max-width: 400px;
  }
  
  .btn {
    padding: 13px 26px;
    font-size: clamp(14px, 1.8vw, 15px);
  }
  
  .btn-large {
    padding: 15px 30px;
    font-size: clamp(15px, 2vw, 17px);
  }
  
  .glass-card {
    padding: 24px;
    gap: 10px;
  }
  
  .glass-card .tag {
    font-size: 11px;
    padding: 3px 8px;
    margin-bottom: 2px;
  }
  
  .glass-card h3 {
    font-size: clamp(22px, 3vw, 24px);
    margin-bottom: 10px;
    line-height: 1.3;
  }
  
  .glass-card p {
    font-size: clamp(15px, 1.9vw, 16px);
    margin-bottom: 12px;
    line-height: 1.6;
    opacity: 0.9;
  }
  
  .glass-card .card-link {
    font-size: clamp(14px, 1.9vw, 15px);
    margin-top: 16px;
    padding: 11px 18px;
    white-space: nowrap;
    align-self: stretch;
    justify-content: center;
    border-radius: 10px;
    min-height: 44px;
  }
  
  .glass-card .card-link::after {
    content: '→';
    margin-left: 4px;
  }
}

/* Mobile Portrait */
@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
  
  .solutions {
    padding: 50px 12px;
  }
  
  .solutions-grid {
    gap: 32px;
  }
  
  .solutions-copy h2 {
    font-size: clamp(26px, 4vw, 32px);
    margin-bottom: 16px;
  }
  
  .bullet-list {
    gap: 12px;
  }
  
  .bullet-list li {
    font-size: clamp(14px, 1.7vw, 16px);
    padding: 6px 0;
  }
  
  .bullet-list .icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
  
  .cta-row .btn {
    max-width: 100%;
  }
  
  .services {
    padding: 50px 12px;
  }
  
  .service-card {
    padding: 24px 20px;
  }
  
  .service-icon {
    width: 44px;
    height: 44px;
    font-size: 28px;
    margin-bottom: 16px;
  }
  
  .service-card h3 {
    font-size: clamp(18px, 2.4vw, 22px);
  }
  
  .service-card p {
    font-size: clamp(14px, 1.8vw, 15px);
  }
  
  .section-title {
    font-size: clamp(24px, 3.5vw, 32px);
    margin-bottom: 32px;
  }
  
  .cta {
    padding: 50px 12px;
  }
  
  .cta h2 {
    font-size: clamp(24px, 3.5vw, 32px);
  }
  
  .cta p {
    font-size: clamp(14px, 1.8vw, 16px);
  }
  
  .btn {
    padding: 12px 24px;
    font-size: clamp(13px, 1.7vw, 14px);
    border-radius: 24px;
  }
  
  .btn-large {
    padding: 14px 28px;
    font-size: clamp(14px, 1.9vw, 16px);
  }
  
  .glass-card {
    padding: 20px 18px;
    gap: 12px;
    border-radius: 16px;
  }
  
  .glass-card .tag {
    font-size: 10px;
    padding: 3px 8px;
    margin-bottom: 0;
  }
  
  .glass-card h3 {
    font-size: clamp(20px, 2.8vw, 22px);
    margin-bottom: 12px;
    line-height: 1.3;
  }
  
  .glass-card p {
    font-size: clamp(14px, 1.9vw, 15px);
    margin-bottom: 14px;
    line-height: 1.6;
    opacity: 0.9;
  }
  
  .glass-card .card-link {
    font-size: clamp(14px, 1.9vw, 15px);
    margin-top: 14px;
    padding: 10px 16px;
    white-space: nowrap;
    align-self: stretch;
    justify-content: center;
    border-radius: 10px;
    min-height: 44px;
  }
  
  .glass-card .card-link::after {
    content: '→';
    margin-left: 4px;
  }
  
}

/* Extra Small Phones */
@media (max-width: 360px) {
  .container {
    padding: 0 10px;
  }
  
  .solutions {
    padding: 40px 10px;
  }
  
  .services {
    padding: 40px 10px;
  }
  
  .service-card {
    padding: 20px 16px;
  }
  
  .cta {
    padding: 40px 10px;
  }
  
  .cta-actions .btn,
  .cta-row .btn {
    max-width: 100%;
  }
  
  .btn {
    padding: 11px 20px;
    font-size: 13px;
  }
}

/* Landscape Orientation Adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .services,
  .solutions,
  .cta {
    padding: 40px 16px;
  }
  
  .service-card {
    padding: 20px;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .btn-contact,
  .nav-link,
  .service-card,
  .glass-card {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-link {
    padding: 12px 0;
  }
  
  .service-card,
  .glass-card {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(var(--pastel-teal-rgb), 0.1);
  }
  
  .btn:active,
  .btn-contact:active {
    transform: scale(0.98);
  }
}