/* Google Fonts are pulled in from a <link> in the layouts, not an @import.
   An @import here could only start downloading after this file had been
   fetched and parsed, putting the webfonts on a serialised request chain. */

@font-face {
  font-family: 'Jihosoft';
  src: url('../fonts/jihosoftbold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* --- DESIGN SYSTEM TOKENS --- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-white: #ffffff;
  
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-gradient: linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0);
  
  --accent: #22a4de;
  --accent-light: #e9f6fc;
  --accent-hover: #1b8cb8;
  --accent-rgb: 34, 164, 222;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
  
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
}

/* --- RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: initial; /* Lenis handles this */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

/* --- STRUCTURAL LAYOUT --- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Grid layout with border lines */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  position: relative;
}

/* --- NAVBAR BRANDING --- */
.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  z-index: 1000;
  background-color: #ffffff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
  transition: var(--transition-smooth);
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -24px;
  width: 24px;
  height: 24px;
  background: transparent;
  border-top-right-radius: 24px;
  box-shadow: 12px -12px 0 12px #ffffff;
  pointer-events: none;
}

.navbar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -24px;
  width: 24px;
  height: 24px;
  background: transparent;
  border-top-left-radius: 24px;
  box-shadow: -12px -12px 0 12px #ffffff;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .navbar {
    width: 100%;
    left: 0;
    transform: none;
    border-radius: 0;
    top: 0; /* Keep top 0 for mobile screens */
  }
  .navbar::before, .navbar::after {
    display: none;
  }
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo-text {
  font-family: 'Jihosoft', var(--font-display);
  font-size: 28px;
  font-weight: bold;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

.logo-text span {
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: 'Jihosoft', var(--font-sans);
  font-size: 14px;
  font-weight: bold;
  color: var(--text-secondary);
  position: relative;
  padding: 8px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link:hover::after {
  width: 100%;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 10001;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-primary);
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav-drawer {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 10000;
  padding: 40px 24px;
  display: none;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.mobile-nav-drawer.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- PRIMARY BUTTON ---
   One label, one meaning. The old build slid a second, unrelated word up on
   hover; the label now stays put and only the colour responds. */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  background-color: var(--text-primary);
  color: var(--text-white);
  border-radius: var(--radius-full);
  font-family: 'Jihosoft', var(--font-sans);
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid var(--text-primary);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-premium:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(var(--accent-rgb), 0.55);
}

.btn-premium:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-premium:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-secondary-premium {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary-premium:hover {
  background-color: var(--bg-secondary);
  border-color: var(--text-primary);
}

.btn-secondary-premium:hover .btn-text {
  color: var(--text-primary);
}

/* --- BADGES (APPLE/STRIPE STYLE) --- */
.badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background-color: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.badge-premium svg {
  width: 12px;
  height: 12px;
}

/* --- HERO SECTION --- */
.hero-section {
  position: relative;
  min-height: calc(100vh - 32px);
  display: flex;
  align-items: center;
  padding-top: 80px;
  overflow: hidden;
  margin: 16px;
  border-radius: 24px;
  background-color: var(--bg-primary);
}

/* --- AURORA BACKGROUND ---------------------------------------------------
   Replaces the Vanta/three.js WebGL clouds. Everything here animates on
   transform/opacity only, so the whole effect stays on the compositor and
   never touches layout, paint or the main thread. No JS, no rAF loop.
   Deliberately avoids filter: blur() -- the soft edge is baked into the
   radial-gradient, which is rasterised once instead of re-blurred per frame.

   Layer order (z-index, all positioned):
     0  base gradient on .aurora-bg
     1  colour blobs
     2  ::before  slow light sweep
     3  ::after   vignette, keeps text and navbar legible
------------------------------------------------------------------------- */
.aurora-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  /* The base carries real colour now. It used to run to #ffffff through the
     middle, which meant that on a phone -- where the blob cores sit mostly
     off-canvas -- the whole hero read as plain white. */
  background:
    linear-gradient(168deg, #d8edfa 0%, #eef8fe 38%, #f4fbff 58%, #e2f1fb 100%);
}

.aurora-blob {
  position: absolute;
  z-index: 1;
  width: 72vw;
  max-width: 940px;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.aurora-blob.a {
  top: -20%;
  left: -14%;
  background: radial-gradient(circle at 50% 50%,
              rgba(var(--accent-rgb), 0.62) 0%,
              rgba(var(--accent-rgb), 0.38) 24%,
              rgba(var(--accent-rgb), 0.15) 46%,
              rgba(var(--accent-rgb), 0) 72%);
  animation: aurora-drift-a 22s ease-in-out infinite alternate;
}

.aurora-blob.b {
  top: -10%;
  right: -18%;
  left: auto;
  background: radial-gradient(circle at 50% 50%,
              rgba(99, 132, 255, 0.46) 0%,
              rgba(99, 132, 255, 0.26) 26%,
              rgba(99, 132, 255, 0.10) 48%,
              rgba(99, 132, 255, 0) 72%);
  animation: aurora-drift-b 28s ease-in-out infinite alternate;
}

.aurora-blob.c {
  bottom: -30%;
  left: 22%;
  top: auto;
  background: radial-gradient(circle at 50% 50%,
              rgba(45, 212, 214, 0.40) 0%,
              rgba(45, 212, 214, 0.22) 28%,
              rgba(45, 212, 214, 0.08) 50%,
              rgba(45, 212, 214, 0) 74%);
  animation: aurora-drift-c 34s ease-in-out infinite alternate;
}

/* Slow light sweep. Tinted with the brand blue rather than white: a white
   band would bleach the colour we just added back in. One wide, very soft
   diagonal band crossing roughly every 19s, then a long pause. */
.aurora-bg::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -60%;
  left: 0;
  width: 46%;
  height: 220%;
  background: linear-gradient(90deg,
              rgba(var(--accent-rgb), 0) 0%,
              rgba(255, 255, 255, 0.34) 45%,
              rgba(var(--accent-rgb), 0.10) 60%,
              rgba(var(--accent-rgb), 0) 100%);
  transform: rotate(16deg) translate3d(-160%, 0, 0);
  will-change: transform, opacity;
  opacity: 0;
  animation: aurora-sweep 19s ease-in-out infinite;
}

/* Vignette. Much lighter than before -- at 0.72/0.75 white it was erasing
   most of the colour underneath, which is what made the hero look washed
   out. Just enough to keep the navbar edge and body copy comfortable. */
.aurora-bg::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(125% 72% at 50% 112%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.34) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0) 17%);
}

@keyframes aurora-drift-a {
  from { transform: translate3d(-6%, -4%, 0) scale(1);    opacity: 0.85; }
  to   { transform: translate3d(9%, 7%, 0)  scale(1.18);  opacity: 1; }
}

@keyframes aurora-drift-b {
  from { transform: translate3d(7%, -6%, 0) scale(1.12);  opacity: 1; }
  to   { transform: translate3d(-8%, 5%, 0) scale(0.94);  opacity: 0.82; }
}

@keyframes aurora-drift-c {
  from { transform: translate3d(-10%, 5%, 0) scale(0.96); opacity: 0.9; }
  to   { transform: translate3d(8%, -6%, 0)  scale(1.2);  opacity: 1; }
}

@keyframes aurora-sweep {
  0%        { transform: rotate(16deg) translate3d(-160%, 0, 0); opacity: 0; }
  8%        { opacity: 0.9; }
  42%       { opacity: 0.9; }
  55%, 100% { transform: rotate(16deg) translate3d(320%, 0, 0);  opacity: 0; }
}

/* Phones: two layers instead of three to keep fill-rate down, but pulled
   further into view and slightly stronger, because a phone shows a much
   smaller slice of each circle than a desktop does. */
@media (max-width: 768px) {
  .aurora-bg {
    background:
      linear-gradient(170deg, #cfe8f8 0%, #e8f5fd 40%, #f2fafe 62%, #dceffa 100%);
  }
  .aurora-blob {
    width: 128vw;
  }
  .aurora-blob.a {
    top: -12%;
    left: -34%;
    background: radial-gradient(circle at 50% 50%,
                rgba(var(--accent-rgb), 0.66) 0%,
                rgba(var(--accent-rgb), 0.40) 26%,
                rgba(var(--accent-rgb), 0.14) 50%,
                rgba(var(--accent-rgb), 0) 74%);
    animation-duration: 30s;
  }
  .aurora-blob.b {
    top: auto;
    bottom: -22%;
    right: -40%;
    background: radial-gradient(circle at 50% 50%,
                rgba(99, 132, 255, 0.44) 0%,
                rgba(99, 132, 255, 0.24) 28%,
                rgba(99, 132, 255, 0.09) 50%,
                rgba(99, 132, 255, 0) 74%);
    animation-duration: 38s;
  }
  .aurora-blob.c {
    display: none;
  }
  /* A narrow screen would otherwise be crossed by the sweep almost instantly */
  .aurora-bg::before {
    width: 70%;
    animation-duration: 24s;
  }
  .aurora-bg::after {
    background:
      radial-gradient(140% 70% at 50% 114%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.26) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 15%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob,
  .aurora-bg::before {
    animation: none !important;
  }
  .aurora-bg::before {
    opacity: 0;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-content {
  grid-column: span 12;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: 64px;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.hero-title em {
  font-style: normal;
  color: var(--accent);
}

.hero-description {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.hero-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
}

.hero-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content {
    grid-column: span 12;
  }
  .hero-visual {
    grid-column: span 12;
    margin-top: 48px;
  }
  .hero-title {
    font-size: 44px;
  }
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
}

.line-grid {
  display: none !important;
}

/* --- PREMIUM CARDS (CATALIS STYLE) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 991px) {
  .card-grid,
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .card-grid,
  .card-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}

.card-premium {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: transparent;
  transition: var(--transition-fast);
}

.card-premium:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-premium:hover::before {
  background-color: var(--accent);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--accent);
  transition: var(--transition-fast);
}

.card-premium:hover .card-icon {
  background-color: var(--accent-light);
  border-color: var(--accent);
}

.card-title {
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.card-desc {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  flex-grow: 1;
}

.card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-link svg {
  transition: transform 0.3s ease;
}

.card-premium:hover .card-link svg {
  transform: translateX(4px);
}

/* --- STATS SECTION --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 60px 0;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
  border-right: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.stat-item:hover {
  transform: translateY(-6px);
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
  transition: var(--transition-smooth);
}

.stat-item:hover .stat-number {
  text-shadow: 0 10px 25px rgba(var(--accent-rgb), 0.2);
}

.stat-label {
  font-size: 15px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 40px;
  }
  .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* --- ACCORDION FAQs --- */
.faq-list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
}

.faq-item {
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: var(--transition-fast);
}

.faq-question:hover {
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  color: var(--text-secondary);
  font-size: 15px;
}

.faq-answer p {
  padding-top: 16px;
  line-height: 1.6;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-item.active .faq-answer {
  max-height: 200px;
}

/* --- FOOTER --- */
.footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding-top: 80px;
  padding-bottom: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand {
  grid-column: span 4;
}

.footer-links-col {
  grid-column: span 2;
}

.footer-contact {
  grid-column: span 4;
}

.footer-logo {
  margin-bottom: 16px;
}

.footer-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.footer-socials,
.mobile-drawer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-desktop-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 6px;
}

.social-icon-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: transform 0.25s ease, opacity 0.25s ease;
  text-decoration: none;
}

.social-icon-link:hover {
  transform: scale(1.15) translateY(-2px);
  opacity: 0.9;
}

.header-social-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
}

.header-social-icon:hover {
  transform: scale(1.15) translateY(-1px);
  opacity: 0.9;
}

.social-icon-img,
.social-icon-link img,
.header-social-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 50%;
}

.btn-sm-header {
  padding: 8px 18px !important;
  font-size: 13px !important;
  height: auto !important;
  line-height: 1.4 !important;
  border-radius: var(--radius-full) !important;
}

@media (max-width: 991px) {
  .header-desktop-socials {
    display: none !important;
  }
}

/* Solutions Detail Hero & Phone Mockup */
.solution-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 991px) {
  .solution-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
    text-align: center;
  }
}

.solution-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-phone-mockup {
  position: relative;
  width: 290px;
  height: 570px;
  background: #0f172a;
  border: 10px solid #1e293b;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  margin: 0 auto;
  flex-shrink: 0;
}

.phone-dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  background: #000000;
  border-radius: 20px;
  z-index: 10;
}

.phone-screen-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0f172a;
}

.phone-screen-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (max-width: 576px) {
  .hero-phone-mockup {
    width: 240px;
    height: 480px;
    border-width: 8px;
    border-radius: 36px;
  }
}

/* Store Download Badge Buttons */
.store-download-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 991px) {
  .store-download-badges {
    justify-content: center;
  }
}

.store-download-badge {
  display: inline-block;
  height: 48px;
  transition: transform 0.25s ease, filter 0.25s ease;
  text-decoration: none;
}

.store-download-badge:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.05);
}

.store-download-badge img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 8px;
}

/* Card Mini Phone Mockup */
.card-screenshot-wrapper {
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px 0;
}

.card-mini-phone-mockup {
  position: relative;
  width: 105px;
  height: 200px;
  background: #0f172a;
  border: 5px solid #1e293b;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.card-premium:hover .card-mini-phone-mockup {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 32px -8px rgba(0, 0, 0, 0.35);
}

.phone-dynamic-island-mini {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 8px;
  background: #000000;
  border-radius: 8px;
  z-index: 10;
}

.phone-screen-content-mini {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0f172a;
}

.phone-screen-content-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Floating WhatsApp Button with custom social.png */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: transparent;
  transition: transform 0.3s ease, filter 0.3s ease;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.08);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
}

.whatsapp-float-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  display: block !important;
}

.footer-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.footer-menu {
  list-style: none;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  font-size: 14px;
  color: var(--text-secondary);
}

.footer-menu a:hover {
  color: var(--accent);
  padding-left: 4px;
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 991px) {
  .footer-brand {
    grid-column: span 12;
  }
  .footer-links-col {
    grid-column: span 4;
  }
  .footer-contact {
    grid-column: span 12;
  }
}

@media (max-width: 768px) {
  .footer-links-col {
    grid-column: span 6;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* --- SECTIONS SPECIFICS --- */
.section-title-wrap {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 40px;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* --- PREMIUM FORM INPUTS --- */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  transition: var(--transition-fast);
  color: var(--text-primary);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

textarea.form-input {
  height: 120px;
  padding: 16px;
  resize: vertical;
}

/* --- PRELOADER ANIMATION --- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader .spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--accent-light);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 1.2s linear infinite;
  box-sizing: border-box;
}

.preloader-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  z-index: 2;
  animation: preloader-fade 2s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes preloader-fade {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* --- PAGE BANNER FOR HEADER BRIDGE --- */
/* Same aurora treatment as the hero, but built from pseudo-elements so the
   eight views that use .page-banner need no markup change. */
.page-banner {
  margin: 16px;
  border-radius: 24px;
  padding-top: 140px !important;
  padding-bottom: 60px !important;
  position: relative;
  overflow: hidden;
  /* Same colour weighting as the hero, so inner pages do not look like a
     different, paler site. */
  background: linear-gradient(168deg, #dcf0fb 0%, #f0f9fe 46%, #e4f2fc 100%);
}

.page-banner::before,
.page-banner::after {
  content: '';
  position: absolute;
  width: 72vw;
  max-width: 880px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.page-banner::before {
  top: -44%;
  left: -16%;
  background: radial-gradient(circle at 50% 50%,
              rgba(var(--accent-rgb), 0.54) 0%,
              rgba(var(--accent-rgb), 0.30) 26%,
              rgba(var(--accent-rgb), 0.11) 48%,
              rgba(var(--accent-rgb), 0) 72%);
  animation: aurora-drift-a 24s ease-in-out infinite alternate;
}

.page-banner::after {
  top: -36%;
  right: -18%;
  background: radial-gradient(circle at 50% 50%,
              rgba(99, 132, 255, 0.38) 0%,
              rgba(99, 132, 255, 0.20) 28%,
              rgba(99, 132, 255, 0.07) 50%,
              rgba(99, 132, 255, 0) 74%);
  animation: aurora-drift-b 30s ease-in-out infinite alternate;
}

@media (max-width: 768px) {
  .page-banner {
    background: linear-gradient(170deg, #d2eaf9 0%, #eaf6fd 46%, #ddf0fa 100%);
  }
  .page-banner::before {
    width: 120vw;
    top: -26%;
    left: -34%;
  }
  .page-banner::after {
    width: 120vw;
    top: auto;
    bottom: -34%;
    right: -40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-banner::before,
  .page-banner::after {
    animation: none !important;
  }
}

.page-banner > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  /* --- MOBILE OPTIMIZATIONS FOR ALL PAGES --- */
  .hero-section {
    margin: 8px;
    border-radius: 16px;
    /* 80px navbar + 8px margin leaves ~44px of breathing room above the
       headline, instead of it sitting tight under the bar. */
    padding-top: 116px;
    min-height: auto;
    padding-bottom: 48px;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  
  .hero-content {
    grid-column: span 12;
  }
  
  .hero-visual {
    grid-column: span 12;
    display: flex;
    justify-content: center;
  }
  
  .hero-title {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
  
  .hero-desc {
    font-size: 14px !important;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .page-banner {
    margin: 8px;
    border-radius: 16px;
    padding-top: 110px !important;
    padding-bottom: 40px !important;
    text-align: center;
  }
  
  .page-banner h1 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }
  
  /* Automatically stack all inline grids vertically on mobile viewports */
  [style*="display: grid"][style*="grid-template-columns"],
  [style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  [style*="grid-column: span"],
  [style*="grid-column:span"] {
    grid-column: span 12 !important;
  }
  
  /* Responsive Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .footer-brand, .footer-links-col, .footer-contact {
    grid-column: span 12;
  }
}

/* --- FULL HERO CAROUSEL ---------------------------------------------------
   Every slide stays mounted and stacked in a single grid cell. Nothing is ever
   display:none, so the cell is permanently as tall as the tallest slide and the
   hero height never shifts between slides -- which also means content can no
   longer overflow upward behind the fixed navbar.

   The crossfade is sequenced, not simultaneous: the outgoing slide fades out
   over 260ms while the incoming one waits 220ms before it starts. That gap is
   what stops two headlines from being legible on top of each other mid-swap.
-------------------------------------------------------------------------- */
.hero-carousel {
  position: relative;
  width: 100%;
}

.hero-carousel-inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  /* Desktop keeps the classic centred hero: the section is a full viewport
     tall and the track is as tall as its tallest slide. */
  align-items: center;
}

/* Without JS the cell falls back to the tallest slide, which is safe but
   leaves a short slide floating in the middle of a tall box. The carousel
   therefore sets an explicit height for the active slide; the transition is
   enabled only after the first measurement so the page does not visibly
   collapse from "tallest" to "first" on load. */
.hero-carousel-inner.h-anim {
  transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-carousel-slide {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
  transition:
    opacity 0.26s cubic-bezier(0.4, 0, 1, 1),
    transform 0.36s cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 0.36s;
}

/* Scoped through .hero-carousel so this outranks the .fx-* variants below.
   Both are two class selectors, so without the extra ancestor the later rule
   won and the active slide never returned to its resting position. */
.hero-carousel .hero-carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s,
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.22s,
    visibility 0s linear 0s;
}

/* --- Effect variants (admin setting: hero_slider_effect) ---
   These describe the *resting* (inactive) position only. */
.fx-slide .hero-carousel-slide  { transform: translate3d(38px, 0, 0); }
.fx-fade  .hero-carousel-slide  { transform: none; }
.fx-zoom  .hero-carousel-slide  { transform: scale(0.94); }
.fx-storm .hero-carousel-slide  { transform: scale(0.82) rotate(4deg); }

/* Centered Slide */
.hero-grid.centered-slide {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  text-align: center;
}

/* Split Column Slide */
.hero-grid.split-slide {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: center;
  width: 100%;
}

.hero-grid.split-slide .hero-content.left-align {
  grid-column: span 6;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-grid.split-slide .hero-visual-col {
  grid-column: span 6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.hero-title.font-large {
  font-size: 52px;
  line-height: 1.15;
  font-weight: 800;
}

.hero-description.left-align-desc {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 500px;
}

.solution-hero-logo-wrapper {
  margin-bottom: 28px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.solution-hero-logo {
  max-height: 88px;
  width: auto;
  object-fit: contain;
}

.hero-buttons-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.store-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.store-badge-link img {
  height: 38px;
  width: auto;
  border-radius: 6px;
}

/* Outline Pill Button */
.btn-premium-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  font-family: 'Jihosoft', var(--font-sans);
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  color: var(--text-primary);
  background: transparent;
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.btn-premium-outline:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-2px);
}

.btn-premium-outline:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-premium.btn-sm,
.btn-premium-outline.btn-sm {
  height: 44px;
  padding: 0 22px;
  font-size: 13px;
}

/* --- Controls --- */
.hero-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}

.hero-carousel-arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.hero-carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.hero-carousel-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #ffffff;
}

.hero-carousel-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(15, 23, 42, 0.22);
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.hero-carousel-dot:hover {
  background-color: rgba(15, 23, 42, 0.4);
}

.hero-carousel-dot.active {
  width: 26px;
  border-radius: 5px;
  background-color: var(--accent);
}

.hero-carousel-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Mobile --- */
@media (max-width: 991px) {
  .hero-grid.split-slide {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-grid.split-slide .hero-content.left-align,
  .hero-grid.split-slide .hero-visual-col {
    grid-column: span 12;
  }
  .hero-title.font-large {
    font-size: 40px;
  }
}

@media (max-width: 991px) {
  /* On narrow screens the hero is content-height, so a track sized to the
     tallest slide leaves the short intro slide floating ~180px down with a
     dead gap under the navbar. Pin slides to the top of the track and let
     the carousel script size the track to the slide that is actually showing.
     (Setting height on the grid container alone is not enough -- the implicit
     row keeps the tallest slide's height, hence `start` rather than `center`.) */
  .hero-carousel-inner {
    align-items: start;
  }
}

@media (max-width: 768px) {
  .hero-carousel-slide {
    align-items: flex-start;
  }
  .hero-grid.split-slide {
    text-align: center;
    gap: 28px;
  }
  .hero-grid.split-slide .hero-content.left-align {
    text-align: center;
    align-items: center;
  }
  .solution-hero-logo-wrapper {
    justify-content: center;
    margin-bottom: 20px;
  }
  .solution-hero-logo {
    max-height: 56px;
  }
  .hero-title.font-large {
    font-size: 30px !important;
    line-height: 1.22 !important;
  }
  .hero-description.left-align-desc {
    text-align: center;
    margin: 0 auto 20px auto;
    font-size: 15px;
  }
  .hero-buttons-row {
    justify-content: center;
    gap: 12px;
  }
  /* Shorter travel on small screens keeps the swap from feeling like a jolt */
  .fx-slide .hero-carousel-slide { transform: translate3d(24px, 0, 0); }
  .fx-storm .hero-carousel-slide { transform: scale(0.9) rotate(2deg); }

  .hero-carousel-controls {
    margin-top: 26px;
    gap: 14px;
  }
  .hero-carousel-arrow {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-slide,
  .hero-carousel-slide.is-active {
    transform: none !important;
    transition: opacity 0.2s linear, visibility 0s;
  }
}

/* --- PREMIUM DEVICE FRAMES --- */

/* Laptop Mockup */
/* No filter: drop-shadow() here -- the browser re-runs the filter over the
   whole subtree on every frame of a slide transition. Plain box-shadow on the
   two child rectangles gives the same look for a fraction of the paint cost. */
.device-laptop {
  position: relative;
  width: 90%;
  max-width: 480px;
  margin: 0 auto;
  perspective: 1000px;
}

/* The bezel is padding, not a border, so the viewport inside it can own the
   aspect-ratio. Putting 16:10 on the bordered box instead (as before) left the
   actual image area at ~16:9.6, which is why cropped uploads never lined up
   with the frame. The admin cropper outputs exactly 16:10, so this now fits
   edge to edge with nothing trimmed. */
.device-laptop-screen {
  position: relative;
  background: #1e293b;
  padding: 12px 12px 14px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 18px 34px -12px rgba(0, 0, 0, 0.28);
}

.device-laptop-viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: #0f172a;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.device-laptop-viewport img,
.device-laptop-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.device-laptop-base {
  position: relative;
  width: 114%;
  height: 12px;
  left: -7%;
  background: linear-gradient(to bottom, #94a3b8, #475569);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.device-laptop-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #1e293b;
  border-radius: 0 0 4px 4px;
}

/* 3-Phones Mockup */
.device-three-phones {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.phone-mockup {
  position: absolute;
  width: 175px;
  aspect-ratio: 9 / 19.5; /* iPhone Screen Aspect Ratio */
  background: #0f172a;
  border: 6px solid #1e293b;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
  /* Explicit property list: "transition: all" made the browser watch every
     computed property on a node that holds a full-bleed image. */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.phone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-grow: 1;
}

.phone-notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 11px;
  background: #1e293b;
  border-radius: 10px;
  z-index: 10;
}

.phone-mockup.left {
  transform: translateX(-130px) rotate(-8deg) scale(0.9);
  z-index: 1;
  opacity: 0.85;
}

.phone-mockup.center {
  z-index: 3;
  transform: scale(1.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32);
}

.phone-mockup.right {
  transform: translateX(130px) rotate(8deg) scale(0.9);
  z-index: 2;
  opacity: 0.85;
}

.phone-mockup:hover {
  z-index: 5;
  opacity: 1;
}

.phone-mockup.left:hover {
  transform: translateX(-130px) rotate(-4deg) scale(0.95);
}

.phone-mockup.center:hover {
  transform: scale(1.1) translateY(-5px);
}

.phone-mockup.right:hover {
  transform: translateX(110px) rotate(4deg) scale(0.95);
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .device-laptop {
    max-width: 300px;
    width: 100%;
  }
  .device-laptop-screen {
    padding: 8px 8px 10px;
    border-radius: 12px 12px 0 0;
  }
  .device-laptop-base {
    height: 8px;
  }
  .device-three-phones {
    height: 280px;
    max-width: 300px;
  }
  .phone-mockup {
    width: 95px;
    border-width: 4px;
    border-radius: 16px;
  }
  .phone-notch {
    width: 28px;
    height: 6px;
  }
  .phone-mockup.left {
    transform: translateX(-70px) rotate(-8deg) scale(0.9);
  }
  .phone-mockup.center {
    transform: scale(1.05);
  }
  .phone-mockup.right {
    transform: translateX(70px) rotate(8deg) scale(0.9);
  }
  .phone-mockup.left:hover {
    transform: translateX(-70px) rotate(-4deg) scale(0.95);
  }
  .phone-mockup.center:hover {
    transform: scale(1.1) translateY(-3px);
  }
  .phone-mockup.right:hover {
    transform: translateX(70px) rotate(4deg) scale(0.95);
  }
}

/* =========================================================================
   SHARED PAGE COMPONENTS
   Banners, forms, cards and layouts used across contact, quote, solutions,
   references, blog and about. Everything animates on transform/opacity only.
   ========================================================================= */

/* --- Page banner content --- */
.page-banner .badge-premium {
  margin-bottom: 20px;
}

.page-banner h1 {
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 20px;
  max-width: 16ch;
}

.page-banner-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
}

.section-tight-top {
  padding-top: 0;
}

.inline-link {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.inline-link:hover {
  border-bottom-color: var(--accent);
}

/* --- Scroll reveal ---
   Elements start visible and are only hidden once JS confirms it can observe
   them, so the page still reads correctly with JS off or blocked. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Buttons: block & large --- */
.btn-block {
  display: flex;
  width: 100%;
}

.btn-lg {
  height: 54px;
  font-size: 15px;
}

/* --- Form primitives --- */
.form-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-premium);
}

.form-card-lg {
  padding: 44px;
}

.form-card-title {
  font-size: 26px;
  margin-bottom: 8px;
}

.form-card-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
  min-width: 0;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.form-label .req {
  color: var(--accent);
}

.form-input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.form-input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.65;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.13);
}

.form-hint {
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-muted);
}

.form-consent {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 4px 0 22px;
}

/* --- Fieldset steps (quote form) --- */
.form-step {
  border: none;
  padding: 0;
  margin: 0 0 34px;
}

.form-step:last-of-type {
  margin-bottom: 24px;
}

.form-step-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding: 0;
}

.form-step-num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.form-step-note {
  font-size: 14px;
  color: var(--text-secondary);
  margin: -8px 0 18px;
}

/* --- Service radio picker --- */
.service-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.service-option {
  cursor: pointer;
  min-width: 0;
}

.service-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.service-option-box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.service-option:hover .service-option-box {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.service-option-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-hover);
  border-radius: 50%;
  color: transparent;
  background-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.service-option-check svg {
  width: 13px;
  height: 13px;
}

.service-option-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.service-option input:checked + .service-option-box {
  border-color: var(--accent);
  background-color: var(--accent-light);
}

.service-option input:checked + .service-option-box .service-option-check {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #ffffff;
}

.service-option input:focus-visible + .service-option-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Contact channel cards --- */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.channel-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.channel-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}

.channel-card-wide {
  grid-column: span 3;
}

.channel-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--accent-light);
  color: var(--accent);
  margin-bottom: 10px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.channel-icon svg {
  width: 21px;
  height: 21px;
}

.channel-card:hover .channel-icon {
  background-color: var(--accent);
  color: #ffffff;
}

.channel-card-wa .channel-icon {
  background-color: #e7f8ee;
  color: #128c7e;
}

.channel-card-wa:hover {
  border-color: #128c7e;
}

.channel-card-wa:hover .channel-icon {
  background-color: #128c7e;
  color: #ffffff;
}

.channel-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.channel-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}

.channel-value-sm {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.channel-hint {
  font-size: 13px;
  color: var(--text-secondary);
}

/* --- Two-column page layouts --- */
.contact-layout,
.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.contact-aside,
.quote-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 104px;
}

.aside-card {
  padding: 30px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
}

.aside-card-accent {
  background-color: var(--accent-light);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.aside-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.aside-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.aside-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.hours-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.hours-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hours-list strong {
  color: var(--text-primary);
}

.steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.steps-list li {
  display: flex;
  gap: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.steps-list strong {
  color: var(--text-primary);
}

.steps-num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* --- Map --- */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 320px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  background-color: var(--bg-secondary);
}

.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .contact-layout,
  .quote-layout {
    grid-template-columns: 1fr;
  }
  .contact-aside,
  .quote-aside {
    position: static;
  }
  .contact-channels {
    grid-template-columns: repeat(2, 1fr);
  }
  .channel-card-wide {
    grid-column: span 2;
  }
  .page-banner h1 {
    font-size: 42px;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .page-banner h1 {
    font-size: 32px !important;
  }
  .page-banner-lead {
    font-size: 16px;
  }
  .contact-channels {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .channel-card {
    padding: 22px;
  }
  .channel-card-wide {
    grid-column: span 1;
  }
  .form-card,
  .form-card-lg {
    padding: 24px 20px;
  }
  .form-card-title {
    font-size: 22px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .aside-card {
    padding: 24px 20px;
  }
  .service-picker {
    grid-template-columns: 1fr;
  }
  .map-frame {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }
  .form-step-legend {
    font-size: 17px;
  }
}

/* =========================================================================
   PAGE-LEVEL POLISH
   Guardrails so the remaining pages stay readable on small screens without
   each view having to carry its own inline breakpoints.
   ========================================================================= */

/* Section headings */
.section-title-wrap {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-title {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Editorial content coming out of the CMS */
.prose {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 72ch;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2,
.prose h3 {
  color: var(--text-primary);
  margin-top: 1.8em;
}

.prose h2 { font-size: 28px; }
.prose h3 { font-size: 21px; }

.prose img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose a {
  color: var(--accent);
  font-weight: 600;
}

/* Card hover lift, shared by every grid on the site */
.card-premium {
  transition: border-color 0.25s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}

.card-premium:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.card-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.card-premium:hover .card-link svg {
  transform: translateX(4px);
}

/* Stats */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.stat-label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Centred utility pages (404, teşekkürler) */
.page-banner h1 em,
.section-title em {
  font-style: normal;
  color: var(--accent);
}

/* --- Mobile guardrails ------------------------------------------------- */
@media (max-width: 991px) {
  .section-title {
    font-size: 32px;
  }
  .stats-row {
    gap: 20px;
  }
  .stat-number {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 26px !important;
  }
  .section-subtitle {
    font-size: 15px;
  }
  .section-title-wrap {
    margin-bottom: 32px;
  }

  .stats-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .card-premium {
    padding: 24px !important;
  }

  .prose {
    font-size: 16px;
  }
  .prose h2 { font-size: 23px; }
  .prose h3 { font-size: 19px; }

  /* Views that hard-code large display type inline still need a ceiling. */
  h1[style*="font-size: 80px"],
  h1[style*="font-size:80px"] {
    font-size: 64px !important;
  }
  h1[style*="font-size: 40px"],
  h1[style*="font-size:40px"] {
    font-size: 28px !important;
  }
  h2[style*="font-size: 36px"],
  h2[style*="font-size:36px"] {
    font-size: 24px !important;
  }
  h2[style*="font-size: 32px"],
  h2[style*="font-size:32px"] {
    font-size: 23px !important;
  }

  /* Inline paddings tuned for desktop become cramped-looking on phones. */
  [style*="padding: 48px"] {
    padding: 24px !important;
  }
  [style*="padding: 40px"] {
    padding: 24px !important;
  }
  [style*="gap: 48px"] {
    gap: 28px !important;
  }

  /* Any oversized fixed-height media block */
  [style*="height: 280px"] {
    height: 200px !important;
  }

  /* Section padding on utility pages */
  [style*="padding-top: 180px"] {
    padding-top: 120px !important;
  }
}

@media (max-width: 480px) {
  h1[style*="font-size: 80px"],
  h1[style*="font-size:80px"] {
    font-size: 52px !important;
  }
}

/* --- Form spam guard ----------------------------------------------------
   The honeypot must be unreachable for humans but still a real, filled-in
   field as far as a naive bot is concerned. Hence off-screen positioning
   rather than display:none, which the better bots check for. */
.fg-trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.turnstile-wrap {
  margin: 0 0 20px;
  min-height: 65px;
}

.turnstile-wrap .cf-turnstile {
  max-width: 100%;
  overflow: hidden;
}