/* ==========================================================================
   FLUID / RESPONSIVE LAYER (loaded after styles.css)
   Everything scales with the viewport (clamp, rem, %, vw) so no per-device
   edits are needed: phones, tablets, iPads, laptops, monitors, 4K.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; font-size: clamp(15px, 0.3vw + 11.5px, 22px); }
body { overflow-x: hidden; }
img, video, svg { max-width: 100%; }

.header-container { max-width: 87.5rem; padding: clamp(10px, 1.2vw, 16px) clamp(16px, 2.5vw, 36px); }
.solutions-container, .footer-container { max-width: 87.5rem; }
.hiw-container, .why-container { max-width: 85rem; }
.showcase-container { max-width: 75rem; }
.hero-container { max-width: 53.75rem; }

.brand-name { font-size: clamp(1.1rem, 1vw + 0.8rem, 1.35rem); }
@media (min-width: 861px) and (max-width: 1100px) {
  :root { --pill-pad-x: 12px; --pill-gap: 2px; }
  .pill { font-size: 0.85rem; }
  .btn-contact { padding: 10px 16px; font-size: 0.88rem; }
}
.mobile-menu-popover { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }

.hero-section { padding: clamp(36px, 5vw, 80px) clamp(16px, 3vw, 32px) clamp(44px, 6vw, 90px); }
.hero-title { font-size: clamp(1.75rem, 1rem + 3.2vw, 3.5rem); max-width: 51rem; }
.hero-subtext { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem); max-width: min(42.5rem, 100%); }

.showcase-section { padding: clamp(10px, 2vw, 30px) clamp(12px, 2.5vw, 32px) clamp(48px, 7vw, 100px); }

.solutions-section { padding: clamp(44px, 6vw, 80px) clamp(14px, 2.6vw, 36px); }
.sol-header { margin-bottom: clamp(36px, 5vw, 80px); gap: 24px; }
.sol-title, .why-title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem); }
.hiw-header .sol-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); }
.sol-h-right { max-width: min(380px, 100%); }
.sol-card { padding: clamp(20px, 2.4vw, 32px); }
.sol-col { width: clamp(240px, 25vw, 300px); gap: clamp(24px, 4vw, 60px); }
.connector { width: clamp(30px, 6vw, 80px); }

.circle-outer { width: clamp(220px, 28vw, 360px); height: clamp(220px, 28vw, 360px); }
.circle-mid   { width: 66.6%; height: 66.6%; }
.circle-inner { width: 58.3%; height: 58.3%; }
.circle-core  { width: 40%; height: 40%; min-width: 44px; min-height: 44px; }
.circle-core svg { width: 55%; height: 55%; }

.how-it-works-section { padding: clamp(56px, 7vw, 100px) clamp(14px, 4vw, 5vw); background-size: clamp(48px, 6vw, 80px) clamp(48px, 6vw, 80px); }
.hiw-header { margin-bottom: clamp(36px, 5vw, 70px); }
.hiw-desc { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); }
.hiw-grid { gap: clamp(24px, 4vw, 60px); }
.hiw-step-card { padding: clamp(18px, 2.4vw, 32px); }
.hiw-step-number { font-size: clamp(2.5rem, 4vw, 4.5rem); }
.hiw-bottom { margin-top: clamp(40px, 6vw, 80px); }
.hiw-bottom-line { font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); }
.hiw-cta-btn { padding: clamp(13px, 1.4vw, 16px) clamp(24px, 3vw, 36px); font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.1rem); }

.why-section { padding: clamp(56px, 7vw, 100px) clamp(14px, 4vw, 5vw); }
.why-container { gap: clamp(28px, 5vw, 80px); }
.why-subtitle { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }
.why-row p { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); }

.scroll-expand { padding-top: clamp(40px, 6vw, 80px); }
.cta-section { padding: clamp(64px, 9vw, 120px) clamp(16px, 5vw, 5vw) clamp(48px, 6vw, 80px); max-width: 56.25rem; }
.cta-title { font-size: clamp(2rem, 1rem + 3.8vw, 3.8rem); }
.cta-subtext { font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem); margin-bottom: clamp(28px, 4vw, 48px); }
.cta-actions { flex-wrap: wrap; gap: 14px; }
.cta-btn { padding: clamp(14px, 1.6vw, 18px) clamp(26px, 3vw, 40px); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem); }

.footer-top { gap: clamp(28px, 4vw, 60px); padding: clamp(44px, 6vw, 80px) 0; }
.footer-tagline, .footer-links a, .footer-contact p { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem); }
.footer-contact p { overflow-wrap: anywhere; }
.footer-bottom { flex-wrap: wrap; gap: 12px 24px; }

.showcase-container { height: clamp(420px, 48vw, 36rem); }
.showcase-image { border-radius: clamp(20px, 3vw, 36px); }
.showcase-image img, .showcase-image video { border-radius: inherit; }
.card { border-radius: clamp(18px, 2.4vw, 28px); padding: clamp(14px, 1.8vw, 26px) clamp(14px, 1.8vw, 24px); box-shadow: 0 0 0 clamp(10px, 1.6vw, 20px) #fff, 0 10px 32px rgba(0,0,0,.09); }
.card:hover { box-shadow: 0 0 0 clamp(10px, 1.6vw, 20px) #fff, 0 14px 40px rgba(0,0,0,.14); }
.card-tl { width: clamp(170px, 24%, 300px); }
.card-bl, .card-tr { width: clamp(150px, 21%, 250px); }
.card-br { width: clamp(280px, 43%, 520px); }
.card-stat { font-size: clamp(1.5rem, 0.7rem + 2vw, 2.6rem); }
.black-card .card-stat { font-size: clamp(1.15rem, 0.7rem + 1.2vw, 1.6rem); }
.card-desc { font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.86rem); max-width: 100%; }

@media (max-width: 1024px) {
  .showcase-container { height: clamp(400px, 56vw, 520px); }
  .showcase-image { left: 4%; right: 4%; }
  .card-tl { left: 0; width: clamp(160px, 27%, 240px); }
  .card-bl, .card-tr { width: clamp(140px, 23%, 190px); }
  .card-br { width: clamp(260px, 46%, 380px); right: 0; }
  .sol-grid { flex-direction: column; gap: 40px; }
  .sol-col { width: 100%; max-width: 32rem; }
  .sol-header { align-items: flex-start; }
  .why-image-wrapper { margin-bottom: 24px; }
}

@media (max-width: 768px) {
  .showcase-container { height: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
  .showcase-image { position: relative; inset: auto; top: auto; bottom: auto; left: auto; right: auto; width: 100%; aspect-ratio: 16 / 10; max-height: 70vh; }
  .card, .card-tl, .card-bl, .card-tr, .card-br {
    position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto;
    display: flex; width: 100%; box-shadow: 0 6px 22px rgba(0,0,0,.08); border: 1px solid #eef1f0;
  }
  .card:hover { transform: none; box-shadow: 0 8px 26px rgba(0,0,0,.1); }
  .card-tl { border-color: #111; }
  .card-br { justify-content: center; }
  .card-stat { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .black-card .card-stat { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .card-desc { font-size: 0.88rem; }
  .pill-tag { font-size: 0.78rem; }
  .hiw-step-card { flex-direction: column; align-items: flex-start; position: relative; }
  .hiw-step-number { position: absolute; right: 18px; top: 14px; }
  .hiw-step-content { padding-right: 2.5rem; }
}
@media (min-width: 520px) and (max-width: 768px) {
  .showcase-container { display: grid; grid-template-columns: 1fr 1fr; }
  .showcase-image { grid-column: 1 / -1; }
  .card-br { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-btn { width: 100%; }
  .sol-btn, .hiw-cta-btn, .why-cta-btn { max-width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 1.05rem; }
  .brand-icon-logo, .brand-logo-img { width: 34px; height: 34px; }
  .header-container { gap: 8px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .hero-section { padding-top: 24px; padding-bottom: 32px; }
  .hiw-image-col { position: relative; top: 0; }
}
@media (min-width: 1920px) {
  .showcase-container { max-width: 85rem; }
  .hero-container { max-width: 60rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (hover: none) {
  .card:hover, .sol-card:hover, .hiw-step-card:hover { transform: none; }
}
/* Hero reveal via CSS (always ends visible, no JS dependency) */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-badge { animation: heroFadeUp .6s ease-out .25s both; }
.hero-title { animation: heroFadeUp .7s ease-out .35s both; }
.hero-subtext { animation: heroFadeUp .7s ease-out .45s both; }
/* Keep text loop animating even with Reduce Motion; hide native iOS play overlay on showcase video */
.showcase-image video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.showcase-image video::-webkit-media-controls { display: none !important; }


/* Navbar reveal via CSS (GSAP fallback) */
@keyframes navFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.brand { animation: navFade .5s ease-out both; }
.pill-nav-items { animation: navFade .5s ease-out .1s both; }
.btn-contact { animation: navFade .5s ease-out .2s both; }