/* Premium UI/UX visual layer
   Content stays unchanged; this file upgrades the presentation only. */

:root {
  --premium-navy: #07142f;
  --premium-blue: #1749d4;
  --premium-red: #d71920;
  --premium-gold: #ffd84d;
  --premium-ink: #0b1220;
  --premium-muted: #667085;
  --premium-panel: rgba(255, 255, 255, 0.82);
  --premium-glass: rgba(255, 255, 255, 0.14);
  --premium-line: rgba(255, 255, 255, 0.24);
  --premium-shadow: 0 28px 80px rgba(7, 20, 47, 0.22);
  --premium-shadow-soft: 0 18px 44px rgba(7, 20, 47, 0.13);
  --premium-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

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

body {
  color: var(--premium-ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(45, 108, 255, 0.24), transparent 34vw),
    radial-gradient(circle at 88% 18%, rgba(255, 216, 77, 0.18), transparent 30vw),
    radial-gradient(circle at 70% 84%, rgba(204, 27, 27, 0.12), transparent 34vw),
    linear-gradient(180deg, #eef4ff 0%, #ffffff 520px),
    #fff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(27, 63, 160, 0.12), transparent 34%),
    linear-gradient(245deg, rgba(204, 27, 27, 0.10), transparent 38%),
    repeating-linear-gradient(90deg, rgba(7, 20, 47, 0.035) 0 1px, transparent 1px 48px);
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 216, 77, 0.86);
  outline-offset: 4px;
}

::selection {
  background: rgba(255, 216, 77, 0.75);
  color: #07142f;
}

/* Premium navigation */
.navbar {
  isolation: isolate;
}

.navbar-main {
  background:
    linear-gradient(135deg, rgba(7, 20, 47, 0.94), rgba(16, 41, 96, 0.88)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 20px 60px rgba(7, 20, 47, 0.28) !important;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

.navbar-top {
  background: #050b18 !important;
}

.navbar-top-info,
.navbar-top-info span {
  color: rgba(255, 255, 255, 0.72) !important;
}

.logo {
  padding: 4px 0;
}

.logo img {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.26));
  transition: transform 0.45s var(--premium-ease), filter 0.45s var(--premium-ease);
}

.logo:hover img {
  transform: translateY(-3px) scale(1.05) rotate(-1deg);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}

.logo-tag {
  color: rgba(255, 216, 77, 0.9) !important;
}

.nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: color 0.28s var(--premium-ease), background 0.28s var(--premium-ease), transform 0.28s var(--premium-ease), border-color 0.28s var(--premium-ease) !important;
}

.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  opacity: 0;
  transition: opacity 0.28s var(--premium-ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--premium-red), var(--premium-gold), #56ccf2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--premium-ease);
}

.nav-link:hover,
.nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.nav-link:hover::before,
.nav-link.active::before {
  opacity: 1;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.hamburger span {
  background: #fff !important;
}

.nav-cta,
.nav-profile,
.btn-primary,
.btn-outline,
.btn-blue,
.btn-main,
.btn-sec,
.btn-red,
.form-submit {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 34px rgba(7, 20, 47, 0.24) !important;
  transition: transform 0.35s var(--premium-ease), box-shadow 0.35s var(--premium-ease), filter 0.35s var(--premium-ease), background 0.35s var(--premium-ease) !important;
}

.nav-cta,
.btn-primary,
.btn-red {
  background: linear-gradient(135deg, #ff3b3b, #c60d16) !important;
}

.nav-profile,
.btn-blue,
.form-submit {
  background: linear-gradient(135deg, #2d6cff, #113aa8) !important;
}

.btn-main {
  background: linear-gradient(135deg, #fff, #eef4ff) !important;
  color: #c60d16 !important;
}

.btn-outline,
.btn-sec {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-cta::before,
.nav-profile::before,
.btn-primary::before,
.btn-outline::before,
.btn-blue::before,
.btn-main::before,
.btn-sec::before,
.btn-red::before,
.form-submit::before {
  content: "";
  position: absolute;
  inset: -80% auto -80% -55%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: skewX(-18deg);
  transition: left 0.78s var(--premium-ease);
  pointer-events: none;
}

.nav-cta:hover::before,
.nav-profile:hover::before,
.btn-primary:hover::before,
.btn-outline:hover::before,
.btn-blue:hover::before,
.btn-main:hover::before,
.btn-sec:hover::before,
.btn-red:hover::before,
.form-submit:hover::before {
  left: 125%;
}

.nav-cta:hover,
.nav-profile:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-blue:hover,
.btn-main:hover,
.btn-sec:hover,
.btn-red:hover,
.form-submit:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 24px 52px rgba(7, 20, 47, 0.30) !important;
  filter: saturate(1.08);
}

/* Section atmosphere */
section {
  position: relative;
  overflow: hidden;
}

section > .container,
.hero-sides,
.ph-panel,
.ph-body {
  position: relative;
  z-index: 2;
}

.cats-section,
.brands-section,
.about-section,
.cats-main,
.branches-main,
.contact-section,
.directors-section,
.ceo-section,
.why-section,
.howwork-section {
  background:
    radial-gradient(circle at 14% 18%, rgba(45, 108, 255, 0.16), transparent 32%),
    radial-gradient(circle at 92% 10%, rgba(255, 216, 77, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.88)) !important;
}

.cats-section::before,
.brands-section::before,
.about-section::before,
.cats-main::before,
.branches-main::before,
.contact-section::before,
.directors-section::before,
.ceo-section::before,
.why-section::before,
.howwork-section::before,
.gallery-section::before,
.branches-section::before,
.video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(27, 63, 160, 0.08), transparent 30%),
    linear-gradient(250deg, rgba(204, 27, 27, 0.075), transparent 34%),
    repeating-linear-gradient(90deg, rgba(7, 20, 47, 0.035) 0 1px, transparent 1px 58px);
}

.video-section,
.gallery-section,
.why-section[style],
.howwork-section[style] {
  background:
    radial-gradient(circle at 22% 12%, rgba(54, 107, 255, 0.34), transparent 34%),
    radial-gradient(circle at 85% 72%, rgba(255, 216, 77, 0.12), transparent 30%),
    linear-gradient(135deg, #050b18 0%, #071d54 52%, #101826 100%) !important;
}

.branches-section[style] {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(27,63,160,0.35), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(230,51,41,0.18), transparent 50%),
    linear-gradient(135deg, #050b18 0%, #0d1f3c 52%, #0f172a 100%) !important;
}

/* Hero */
.hero {
  min-height: calc(100vh - 98px);
  background:
    linear-gradient(135deg, #8d1018 0%, #d71920 48%, #07142f 100%) !important;
}

.hero-video-bg {
  opacity: 0.38 !important;
  filter: saturate(1.18) contrast(1.08);
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(7, 20, 47, 0.34), rgba(7, 20, 47, 0.12)),
    linear-gradient(110deg, rgba(215, 25, 32, 0.78), rgba(7, 20, 47, 0.38) 56%, rgba(255, 216, 77, 0.18)) !important;
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.74;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.20), transparent 24%, transparent 70%, rgba(255, 216, 77, 0.16)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px);
  mix-blend-mode: soft-light;
}

.hero-center {
  padding-top: 18px !important;
}

.hero-logo-img {
  animation: premium-float 6.5s ease-in-out infinite;
  filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.58)) brightness(1.13) !important;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: premium-rise 0.8s var(--premium-ease) both;
}

.hero-sc-mega {
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.hero-sc-mega span {
  transition: transform 0.35s var(--premium-ease), filter 0.35s var(--premium-ease);
}

.hero-sc-mega:hover span {
  filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.38));
}

.hero-stats {
  background: rgba(7, 20, 47, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.stat-num {
  background: linear-gradient(135deg, #fff, #ffd84d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.hero-side,
.ph-panel {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 20px 60px rgba(0, 0, 0, 0.22);
}

.hero-side-logo,
.ph-logo-fade {
  transition: transform 0.45s var(--premium-ease), opacity 0.45s var(--premium-ease), filter 0.45s var(--premium-ease);
}

.hero-side:hover .hero-side-logo,
.ph-panel:hover .ph-logo-fade {
  opacity: 0.36;
  transform: scale(1.1) rotate(-3deg);
  filter: saturate(1.2);
}

/* Inner page heroes */
.page-hero {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.ph-red {
  background: linear-gradient(135deg, #b70f18 0%, #e22630 54%, #9d1118 100%) !important;
}

.ph-black {
  background: linear-gradient(135deg, #050b18 0%, #0a1d45 58%, #111827 100%) !important;
}

.ph-white {
  background:
    linear-gradient(135deg, #ffffff 0%, #eef4ff 58%, #ffffff 100%) !important;
}

.ph-body {
  animation: premium-rise 0.8s var(--premium-ease) both;
}

.breadcrumb {
  width: max-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ph-white .breadcrumb {
  background: rgba(7, 20, 47, 0.06);
  border-color: rgba(7, 20, 47, 0.08);
}

.page-title {
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.ph-white .page-title {
  text-shadow: none;
}

/* Premium cards */
.section-header {
  animation: premium-rise 0.7s var(--premium-ease) both;
}

.section-tag,
.branch-badge,
.branch-tag,
.dir-badge-3d,
.ceo-label {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 28px rgba(7, 20, 47, 0.10);
}

.cat-card,
.cat-img-card,
.why-card,
.brand-card,
.brand-text-card,
.gallery-item,
.branch-card,
.branch-full-card,
.ceo-photo-wrap img,
.astat,
.mv-card,
.hw-card,
.dir-card-3d,
.contact-card,
.bq-card,
.form-card,
.video-inner,
.cta-strip,
.directors-msg {
  box-shadow: var(--premium-shadow-soft) !important;
}

.cat-img-card,
.branch-full-card,
.dir-card-3d,
.form-card,
.hw-card,
.mv-card,
.contact-card,
.bq-card,
.brand-text-card,
.why-card,
.astat,
.cat-card {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(7, 20, 47, 0.08) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: relative;
  overflow: hidden;
}

.why-card[style],
.branch-card,
.directors-msg,
.cta-strip,
.video-inner {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.why-section .why-card {
  background:
    linear-gradient(145deg, rgba(15, 28, 58, 0.96), rgba(21, 37, 72, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff;
}

.why-section .why-card .why-text {
  color: rgba(255, 255, 255, 0.78) !important;
}

.why-section .why-card .why-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 30px rgba(0, 0, 0, 0.22);
}

.cat-img-card::before,
.branch-full-card::before,
.dir-card-3d::before,
.form-card::before,
.hw-card::before,
.mv-card::before,
.contact-card::before,
.bq-card::before,
.brand-text-card::before,
.why-card::before,
.astat::before,
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), transparent 32%, rgba(255, 216, 77, 0.18)),
    linear-gradient(225deg, rgba(45, 108, 255, 0.13), transparent 46%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s var(--premium-ease);
}

.cat-img-card::after,
.branch-full-card::after,
.dir-card-3d::after,
.form-card::after,
.hw-card::after,
.mv-card::after,
.contact-card::after,
.bq-card::after,
.brand-text-card::after,
.why-card::after,
.astat::after,
.cat-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--premium-red), var(--premium-gold), var(--premium-blue));
  opacity: 0;
  transform: scaleX(0.72);
  transition: opacity 0.38s var(--premium-ease), transform 0.38s var(--premium-ease);
}

.cat-img-card:hover::before,
.branch-full-card:hover::before,
.dir-card-3d:hover::before,
.form-card:hover::before,
.hw-card:hover::before,
.mv-card:hover::before,
.contact-card:hover::before,
.bq-card:hover::before,
.brand-text-card:hover::before,
.why-card:hover::before,
.astat:hover::before,
.cat-card:hover::before,
.is-tilting::before {
  opacity: 1;
}

.cat-img-card:hover::after,
.branch-full-card:hover::after,
.dir-card-3d:hover::after,
.form-card:hover::after,
.hw-card:hover::after,
.mv-card:hover::after,
.contact-card:hover::after,
.bq-card:hover::after,
.brand-text-card:hover::after,
.why-card:hover::after,
.astat:hover::after,
.cat-card:hover::after,
.is-tilting::after {
  opacity: 1;
  transform: scaleX(1);
}

.cat-card,
.cat-img-card,
.why-card,
.brand-card,
.brand-text-card,
.gallery-item,
.branch-card,
.branch-full-card,
.astat,
.mv-card,
.hw-card,
.dir-card-3d,
.contact-card,
.bq-card,
.form-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s var(--premium-ease), box-shadow 0.45s var(--premium-ease), border-color 0.45s var(--premium-ease), background 0.45s var(--premium-ease), filter 0.45s var(--premium-ease) !important;
}

.cat-card:hover,
.cat-img-card:hover,
.why-card:hover,
.brand-card:hover,
.brand-text-card:hover,
.gallery-item:hover,
.branch-card:hover,
.branch-full-card:hover,
.astat:hover,
.mv-card:hover,
.hw-card:hover,
.dir-card-3d:hover,
.contact-card:hover,
.bq-card:hover,
.form-card:hover,
.is-tilting {
  transform: translateY(-12px) scale(1.012);
  box-shadow: var(--premium-shadow) !important;
  border-color: rgba(27, 63, 160, 0.24) !important;
}

.cat-img-card img,
.branch-img img,
.branch-img-wrap img,
.brand-card img,
.gallery-item img,
.ceo-photo-wrap img,
.dir-photo-3d {
  transition: transform 0.7s var(--premium-ease), filter 0.7s var(--premium-ease) !important;
}

.cat-img-card:hover img,
.branch-full-card:hover .branch-img img,
.branch-card:hover .branch-img-wrap img,
.brand-card:hover img,
.gallery-item:hover img,
.ceo-photo-wrap:hover img {
  transform: scale(1.075);
  filter: saturate(1.16) contrast(1.04);
}

.cat-img-card:hover img {
  transform: scale(1.035) translateY(-4px);
}

.brand-card-overlay,
.branch-img-overlay,
.video-overlay {
  background:
    linear-gradient(to top, rgba(7, 20, 47, 0.94) 0%, rgba(7, 20, 47, 0.42) 58%, rgba(7, 20, 47, 0.04) 100%) !important;
}

.gallery-item {
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.gallery-item::after,
.brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%, rgba(255, 216, 77, 0.16));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s var(--premium-ease);
}

.gallery-item:hover::after,
.brand-card:hover::after {
  opacity: 1;
}

.video-inner {
  border: 1px solid rgba(255, 255, 255, 0.24);
  outline: 1px solid rgba(255, 216, 77, 0.18);
  outline-offset: -8px;
}

.video-inner,
.brand-card,
.gallery-item,
.branch-full-card,
.dir-card-3d,
.form-card,
.cta-strip,
.directors-msg {
  border: 7px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 42px 100px rgba(7, 20, 47, 0.24),
    0 0 0 1px rgba(7, 20, 47, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.brand-card,
.gallery-item,
.branch-full-card,
.dir-card-3d,
.form-card {
  border-radius: 18px !important;
}

.video-inner,
.cta-strip,
.directors-msg {
  border-radius: 28px !important;
}

.ceo-photo-badge,
.branch-hours,
.branch-hours-row,
.map-placeholder {
  box-shadow: 0 14px 34px rgba(7, 20, 47, 0.12);
}

.map-placeholder {
  transition: transform 0.32s var(--premium-ease), box-shadow 0.32s var(--premium-ease), background 0.32s var(--premium-ease);
}

.map-placeholder:hover {
  transform: translateY(-3px);
  background: #dfe8ff;
  box-shadow: 0 18px 38px rgba(27, 63, 160, 0.16);
}

/* Contact form */
.form-input,
.form-select,
.form-textarea {
  background: rgba(248, 250, 252, 0.92) !important;
  border: 1px solid rgba(7, 20, 47, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.25s var(--premium-ease), box-shadow 0.25s var(--premium-ease), background 0.25s var(--premium-ease), transform 0.25s var(--premium-ease) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: #fff !important;
  border-color: rgba(27, 63, 160, 0.7) !important;
  box-shadow: 0 0 0 5px rgba(27, 63, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

/* Mobile menu */
.mobile-menu {
  background:
    linear-gradient(135deg, rgba(7, 20, 47, 0.97), rgba(16, 41, 96, 0.95)) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.mobile-menu.open {
  animation: premium-menu 0.34s var(--premium-ease) both;
}

.mobile-menu .nav-link {
  color: #fff !important;
}

.mobile-close {
  color: #fff !important;
}

.mobile-menu.open .nav-link {
  animation: premium-rise 0.48s var(--premium-ease) both;
}

.hamburger {
  transition: transform 0.3s var(--premium-ease), background 0.3s var(--premium-ease);
}

.hamburger:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Scroll reveal added by premium-effects.js */
.premium-reveal {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1s var(--premium-ease), translate 1s var(--premium-ease);
}

.premium-animations-ready .premium-reveal:not(.in-view) {
  opacity: 0;
  translate: 0 12px;
}

.premium-reveal.in-view {
  opacity: 1;
  translate: 0 0;
}

.premium-tilt {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
}

/* High-end side glimpses on section load */
.premium-section-glimpse {
  position: relative;
}

.premium-section-glimpse.premium-reveal,
.premium-animations-ready .premium-section-glimpse.premium-reveal:not(.in-view) {
  opacity: 1;
  translate: 0 0;
}

.premium-section-glimpse::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  z-index: 1;
  width: 32%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.44), rgba(86, 204, 242, 0.20), transparent);
  filter: blur(0.5px);
  transform: skewX(-14deg);
}

.premium-section-glimpse.in-view::after {
  animation: premium-side-glimpse 1.55s var(--premium-ease) 0.05s both;
}

.premium-section-glimpse:nth-of-type(even)::after {
  left: auto;
  right: -42%;
  transform: skewX(14deg);
}

.premium-section-glimpse:nth-of-type(even).in-view::after {
  animation-name: premium-side-glimpse-reverse;
}

/* Text loads from top to bottom, with no sideways motion. */
.premium-text-wipe {
  opacity: 1;
  filter: none;
  clip-path: inset(0 0 0 0);
  translate: 0 0 !important;
  transform: none !important;
  transition:
    opacity 1s var(--premium-ease),
    filter 1s var(--premium-ease),
    clip-path 1.18s var(--premium-ease) !important;
  will-change: clip-path, opacity, filter;
}

.premium-animations-ready .premium-text-wipe:not(.in-view) {
  opacity: 0;
  filter: blur(4px);
  clip-path: inset(0 0 100% 0);
  translate: 0 0 !important;
  transform: none !important;
}

.premium-text-wipe.in-view {
  opacity: 1;
  filter: none;
  clip-path: inset(0 0 0 0);
}

.section-header .premium-text-wipe:nth-child(2),
.ph-body .premium-text-wipe:nth-child(2) {
  transition-delay: 0.12s !important;
}

.section-header .premium-text-wipe:nth-child(3),
.ph-body .premium-text-wipe:nth-child(3) {
  transition-delay: 0.26s !important;
}

/* ═══════════════════════════════════════════
   CINEMATIC SCROLL ANIMATIONS
   ═══════════════════════════════════════════ */

/* Base hidden state — all animated elements start invisible */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.75s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Revealed state */
[data-anim].anim-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* fade-up — slides up from below */
[data-anim="fade-up"]    { transform: translateY(44px); }

/* fade-down — drops in from above */
[data-anim="fade-down"]  { transform: translateY(-32px); }

/* fade-left — slides in from right */
[data-anim="fade-left"]  { transform: translateX(56px); }

/* fade-right — slides in from left */
[data-anim="fade-right"] { transform: translateX(-56px); }

/* zoom-in — scales up from slightly smaller with blur */
[data-anim="zoom-in"] {
  transform: scale(0.85);
  filter: blur(4px);
}

/* flip-up — 3D flip entrance for cards */
[data-anim="flip-up"] {
  transform: perspective(800px) rotateX(28deg) translateY(36px) scale(0.94);
  filter: blur(2px);
  transform-origin: bottom center;
}

/* Faster variant for small chips/tags */
[data-anim="fade-down"] { transition-duration: 0.6s; }

/* Hero elements get a longer, more dramatic entrance */
.hero [data-anim] { transition-duration: 1s; }

/* Cards get 3D-style longer transition */
[data-anim="flip-up"] {
  transition:
    opacity 0.82s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.82s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.82s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── Word-reveal wrapper ── */
.word-reveal {
  display: inline-block;
  transform-style: preserve-3d;
}

/* ── Glare element added by JS ── */
.sc-glare {
  mix-blend-mode: overlay;
}

/* Stat counters */
.stat-num, .astat-num {
  font-variant-numeric: tabular-nums;
}

@keyframes premium-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes premium-side-glimpse {
  0% {
    opacity: 0;
    left: -42%;
  }
  18% {
    opacity: 0.9;
  }
  62% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    left: 112%;
  }
}

@keyframes premium-side-glimpse-reverse {
  0% {
    opacity: 0;
    right: -42%;
  }
  18% {
    opacity: 0.9;
  }
  62% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    right: 112%;
  }
}

@keyframes premium-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(-0.6deg);
  }
}

@keyframes premium-menu {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .navbar-main {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .hero {
    min-height: auto;
  }

  .hero::after,
  .page-hero::after {
    opacity: 0.46;
  }

  .cat-card:hover,
  .cat-img-card:hover,
  .why-card:hover,
  .brand-card:hover,
  .brand-text-card:hover,
  .gallery-item:hover,
  .branch-card:hover,
  .branch-full-card:hover,
  .astat:hover,
  .mv-card:hover,
  .hw-card:hover,
  .dir-card-3d:hover,
  .contact-card:hover,
  .bq-card:hover,
  .form-card:hover {
    transform: translateY(-7px);
  }
}

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

  .premium-reveal {
    opacity: 1;
    translate: 0 0;
  }

  .premium-text-wipe {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
    transition: none !important;
  }
}