/* ==========================================================================
   OrderHub — Motion & Responsive Enhancement Layer  (v3.0)
   Loaded AFTER style.css. Purely additive: remove this file + js/motion.js
   to return to the previous look.
   ========================================================================== */

:root {
  --oh-cyan: #22d3ee;
  --oh-sky: #0ea5e9;
  --oh-emerald: #10b981;
  --oh-violet: #8b5cf6;
  --oh-coral: #f43f5e;
  --oh-grad: linear-gradient(120deg, #38bdf8 0%, #22d3ee 30%, #10b981 60%, #38bdf8 100%);
  --oh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --oh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --oh-reveal-dur: 0.85s;
  --gutter: clamp(1rem, 4vw, 2rem);
}

/* ---------- Global polish ---------- */
::selection { background: rgba(34, 211, 238, 0.35); color: #fff; }
[data-theme="light"] ::selection { background: rgba(14, 165, 233, 0.25); color: #0f172a; }

:focus-visible {
  outline: 2px solid var(--oh-cyan) !important;
  outline-offset: 3px;
  border-radius: 10px;
}

@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(56,189,248,.55), rgba(16,185,129,.55));
    border-radius: 99px; border: 2px solid var(--bg-primary);
  }
}

.container { padding-left: var(--gutter); padding-right: var(--gutter); }
img { max-width: 100%; }

/* ---------- Living aurora background ---------- */
.oh-aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.oh-aurora span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22;
  will-change: transform;
}
.oh-aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: #0ea5e9; animation: oh-drift-a 26s ease-in-out infinite alternate; }
.oh-aurora span:nth-child(2) { width: 38vw; height: 38vw; right: -10vw; top: 25vh; background: #10b981; animation: oh-drift-b 32s ease-in-out infinite alternate; opacity: .16; }
.oh-aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 30vw; bottom: -18vw; background: #8b5cf6; animation: oh-drift-c 38s ease-in-out infinite alternate; opacity: .13; }
.oh-aurora::after { /* fine grain */
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .oh-aurora span { opacity: .10; }
[data-theme="light"] .oh-aurora::after { opacity: .025; }
body.in-admin-portal .oh-aurora { display: none; }

@keyframes oh-drift-a { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes oh-drift-b { to { transform: translate(-16vw, 20vh) scale(.9); } }
@keyframes oh-drift-c { to { transform: translate(-14vw, -22vh) scale(1.2); } }

/* ---------- Scroll progress ---------- */
.oh-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1000;
  transform-origin: 0 50%; transform: scaleX(var(--oh-p, 0));
  background: var(--oh-grad); background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(34, 211, 238, .6);
  pointer-events: none;
}

/* ---------- Header: smart shrink on scroll ---------- */
.site-header { transition: box-shadow .4s var(--oh-ease-out), background-color .4s; }
.site-header .nav-container { transition: padding .4s var(--oh-ease-out), min-height .4s var(--oh-ease-out); }
.site-header .brand-logo-img { transition: transform .4s var(--oh-ease-out); transform-origin: left center; }
.navbar-info-strip {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .45s var(--oh-ease-out), opacity .3s, border-color .3s;
}
.navbar-info-strip > .container { overflow: hidden; min-height: 0; }

.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); }
.site-header.is-scrolled .brand-logo-img { transform: scale(.9); }
.site-header.is-scrolled .navbar-info-strip { grid-template-rows: 0fr; opacity: 0; border-color: transparent; }
[data-theme="light"] .site-header.is-scrolled { box-shadow: 0 10px 30px -14px rgba(15,23,42,.25); }

/* Animated nav underline */
.nav-links .nav-link { position: relative; }
.nav-links .nav-link::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--oh-grad); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s var(--oh-ease-out);
}
.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after { transform: scaleX(1); transform-origin: left center; animation: oh-flow 3s linear infinite; }

/* Icon buttons micro-interaction */
.cart-btn, .theme-toggle-btn, .search-trigger-btn, .header-account-btn {
  transition: transform .35s var(--oh-ease-spring), border-color .25s, background-color .25s, box-shadow .25s !important;
}
.cart-btn:hover, .theme-toggle-btn:hover { transform: translateY(-2px) rotate(-6deg); }
.theme-toggle-btn:active { transform: scale(.88) rotate(30deg); }
.cart-badge.oh-bump { animation: oh-bump .6s var(--oh-ease-spring); }
@keyframes oh-bump { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* ---------- Page transitions ---------- */
#appRoot.oh-page-enter { animation: oh-page-in .6s var(--oh-ease-out) both; }
@keyframes oh-page-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- Scroll reveal system ---------- */
html.oh-motion .oh-rv:not(.oh-in) {
  opacity: 0;
  translate: 0 34px;
  filter: blur(6px);
}
html.oh-motion .oh-rv.oh-rv-left:not(.oh-in)  { translate: -40px 0; }
html.oh-motion .oh-rv.oh-rv-right:not(.oh-in) { translate: 40px 0; }
html.oh-motion .oh-rv.oh-rv-zoom:not(.oh-in)  { translate: 0 20px; scale: .94; }
html.oh-motion .oh-rv {
  transition:
    opacity var(--oh-reveal-dur) var(--oh-ease-out),
    translate var(--oh-reveal-dur) var(--oh-ease-out),
    scale var(--oh-reveal-dur) var(--oh-ease-out),
    filter var(--oh-reveal-dur) var(--oh-ease-out),
    border-color .3s, box-shadow .4s, background-color .3s, transform .5s var(--oh-ease-out);
  transition-delay: calc(var(--oh-i, 0) * 70ms);
}
html.oh-motion .oh-rv.oh-in { transition-delay: calc(var(--oh-i, 0) * 70ms), calc(var(--oh-i, 0) * 70ms), calc(var(--oh-i, 0) * 70ms), calc(var(--oh-i, 0) * 70ms), 0s, 0s, 0s, 0s; }
html.oh-motion .oh-rv.oh-done { transition-delay: 0s !important; }
html.oh-motion .oh-instant { transition: none !important; }

/* Section badges pop */
html.oh-motion .section-header .badge.oh-rv:not(.oh-in) { scale: .6; translate: 0 10px; }
.product-card-badge { animation: oh-badge-wiggle 6s ease-in-out infinite !important; }

/* ---------- Hero ---------- */
.hero-section { position: relative; isolation: isolate; }
.hero-title {
  font-size: clamp(2.15rem, 1.1rem + 4.4vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}
.hero-title .oh-line { display: inline-block; }
html.oh-motion .oh-hero-play .hero-title .oh-word {
  display: inline-block;
  animation: oh-word-in .9s var(--oh-ease-out) both;
  animation-delay: calc(var(--w, 0) * 55ms + 120ms);
}
@keyframes oh-word-in {
  from { opacity: 0; transform: translateY(0.55em) rotate(4deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.text-gradient, .hero-title .text-gradient {
  background: var(--oh-grad) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: oh-flow 6s linear infinite;
}
html.oh-motion .oh-hero-play .hero-title .text-gradient.oh-word {
  animation: oh-word-in .9s var(--oh-ease-out) both, oh-flow 6s linear infinite;
  animation-delay: calc(var(--w, 0) * 55ms + 120ms), 0s;
}
@keyframes oh-flow { to { background-position: -220% 0; } }

html.oh-motion .oh-hero-play .hero-subtitle { animation: oh-fade-up 1s var(--oh-ease-out) .55s both; }
html.oh-motion .oh-hero-play .hero-cta-group > * { animation: oh-fade-up .9s var(--oh-ease-out) both; }
html.oh-motion .oh-hero-play .hero-cta-group > *:nth-child(1) { animation-delay: .7s; }
html.oh-motion .oh-hero-play .hero-cta-group > *:nth-child(2) { animation-delay: .8s; }
html.oh-motion .oh-hero-play .hero-cta-group > *:nth-child(3) { animation-delay: .9s; }
html.oh-motion .oh-hero-play .hero-stats-row .stat-item { animation: oh-fade-up .8s var(--oh-ease-out) both; }
html.oh-motion .oh-hero-play .hero-stats-row .stat-item:nth-child(1) { animation-delay: 1.0s; }
html.oh-motion .oh-hero-play .hero-stats-row .stat-item:nth-child(2) { animation-delay: 1.08s; }
html.oh-motion .oh-hero-play .hero-stats-row .stat-item:nth-child(3) { animation-delay: 1.16s; }
html.oh-motion .oh-hero-play .hero-stats-row .stat-item:nth-child(4) { animation-delay: 1.24s; }
html.oh-motion .oh-hero-play .hero-content .badge { animation: oh-pop .7s var(--oh-ease-spring) .05s both; }
@keyframes oh-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes oh-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Badge shine sweep (background-based: never alters badge positioning) */
.badge {
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 150% 0;
  animation: oh-shine 5s ease-in-out infinite 2s;
}
@keyframes oh-shine { 0%, 70% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* Stat icons breathe */
.stat-badge-icon { transition: transform .4s var(--oh-ease-spring); }
.stat-item:hover .stat-badge-icon { transform: translateY(-3px) rotate(-8deg) scale(1.1); }

/* Before / after showcase floats with a living border */
.before-after-wrapper { position: relative; }
html.oh-motion .before-after-wrapper { animation: oh-float 7s ease-in-out infinite 1.5s; }
.before-after-card { position: relative; isolation: isolate; }
.before-after-card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: 4; pointer-events: none;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: conic-gradient(from var(--oh-angle, 0deg), transparent 0 60%, #22d3ee, #10b981, transparent 90%);
  animation: oh-spin 6s linear infinite; opacity: .9;
}
@property --oh-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes oh-spin { to { --oh-angle: 360deg; } }
@keyframes oh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.ba-handle-button { animation: oh-pulse-ring 2.4s ease-out infinite; }
@keyframes oh-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.55); } 80%,100% { box-shadow: 0 0 0 16px rgba(34,211,238,0); } }

/* ---------- Buttons: shine + ripple + press ---------- */
.btn, .ref-btn-primary, .ref-btn-emerald, .ref-btn-orange, .ref-btn-purple, .ref-btn-wa, .ref-btn-outline,
.btn-ref-add, .btn-ref-wa, .btn-ref-details {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--oh-ease-spring), box-shadow .3s, background-color .3s, border-color .3s, filter .3s !important;
}
.btn::before, .ref-btn-primary::before, .ref-btn-emerald::before, .ref-btn-orange::before, .ref-btn-purple::before, .ref-btn-wa::before, .btn-ref-add::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--oh-ease-out);
}
.btn:hover::before, .ref-btn-primary:hover::before, .ref-btn-emerald:hover::before, .ref-btn-orange:hover::before, .ref-btn-purple:hover::before, .ref-btn-wa:hover::before, .btn-ref-add:hover::before { left: 120%; }
.btn:active, [class*="ref-btn"]:active, .btn-ref-add:active, .btn-ref-wa:active { transform: scale(.96) !important; }
.btn-primary:hover, .btn-emerald:hover, .btn-ref-add:hover { filter: brightness(1.08) saturate(1.1); }

.oh-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: rgba(255,255,255,.55);
  animation: oh-ripple .65s ease-out forwards;
}
@keyframes oh-ripple { to { transform: scale(var(--oh-rs, 30)); opacity: 0; } }

/* ---------- Cards ---------- */
/* Products: lift, 3D tilt (fine pointers), image zoom, glare */
.product-card { transform-style: preserve-3d; will-change: transform; }
.product-card .product-image-container img { transition: transform .9s var(--oh-ease-out), filter .5s; }
.product-card:hover .product-image-container img { transform: scale(1.08); }
.product-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.13), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.product-card:hover::after { opacity: 1; }
.product-card:hover { border-color: rgba(34, 211, 238, .45) !important; box-shadow: 0 24px 50px -18px rgba(14,165,233,.35), var(--shadow-lg) !important; }
@media (pointer: fine) {
  .product-card:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important;
  }
}
.product-card-badge { animation: oh-badge-wiggle 6s ease-in-out infinite; transform-origin: left center; }
@keyframes oh-badge-wiggle { 0%, 92%, 100% { transform: rotate(0); } 95% { transform: rotate(-4deg); } 98% { transform: rotate(3deg); } }

/* Generic spotlight cards */
.category-card, .faq-card, .solution-showcase-card, .ref-bundle-card, .ref-kit-home-card, .ref-kit-corp-card, .testimonials-grid > *, .glass-panel {
  --mx: 50%; --my: 50%;
}
.category-card, .testimonials-grid > *, .faq-card { position: relative; }
.category-card::after, .testimonials-grid > *::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(34,211,238,.14), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.category-card:hover::after, .testimonials-grid > *:hover::after { opacity: 1; }

.category-card { transition: transform .45s var(--oh-ease-spring), border-color .3s, box-shadow .3s, background-color .3s !important; }
.category-card:hover { transform: translateY(-8px) !important; border-color: rgba(34,211,238,.5) !important; box-shadow: 0 20px 40px -20px rgba(14,165,233,.5) !important; }
.category-icon-box { transition: transform .55s var(--oh-ease-spring), background-color .3s, box-shadow .3s; }
.category-card:hover .category-icon-box { transform: translateY(-4px) rotate(-10deg) scale(1.12); box-shadow: 0 10px 24px -8px rgba(34,211,238,.6); }

.solution-showcase-card { transition: transform .5s var(--oh-ease-out), box-shadow .4s !important; }
.solution-showcase-card .card-bg-img { transition: transform 1.4s var(--oh-ease-out) !important; }
.solution-showcase-card:hover { transform: translateY(-6px) !important; box-shadow: 0 28px 60px -24px rgba(0,0,0,.7) !important; }
.solution-showcase-card:hover .card-bg-img { transform: scale(1.08) !important; }

.ref-bundle-card, .ref-kit-home-card, .ref-kit-corp-card { transition: transform .5s var(--oh-ease-out), box-shadow .4s !important; }
.ref-bundle-card:hover, .ref-kit-home-card:hover, .ref-kit-corp-card:hover { transform: translateY(-6px) !important; box-shadow: 0 30px 60px -28px rgba(0,0,0,.75) !important; }
.ref-bundle-header, .ref-kit-home-header, .ref-kit-corp-header { background-size: 160% 160% !important; animation: oh-header-shift 10s ease-in-out infinite alternate; }
@keyframes oh-header-shift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.ref-check-circle { transition: transform .45s var(--oh-ease-spring); }
.ref-bundle-item:hover .ref-check-circle { transform: scale(1.2) rotate(-12deg); }
.ref-save-badge { animation: oh-soft-pulse 2.6s ease-in-out infinite; }
@keyframes oh-soft-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.faq-card { transition: border-color .3s, transform .35s var(--oh-ease-out), box-shadow .3s !important; }
.faq-card:hover { transform: translateX(4px); border-color: rgba(34,211,238,.35) !important; }
.faq-icon { transition: transform .45s var(--oh-ease-spring) !important; }

/* Highlight slider polish */
.highlight-slider-container { position: relative; }
.slider-nav-btn { transition: transform .35s var(--oh-ease-spring), background-color .25s !important; }
.slider-nav-btn:hover { transform: translateY(-50%) scale(1.12) !important; }

/* Floating WhatsApp: gentle bob */
html.oh-motion .floating-whatsapp { animation: oh-float-sm 4s ease-in-out infinite; }
.floating-whatsapp { transition: transform .4s var(--oh-ease-spring) !important; }
.floating-whatsapp:hover { transform: scale(1.12) rotate(-8deg) !important; animation-play-state: paused; }
@keyframes oh-float-sm { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Footer link slide */
.footer-link { display: inline-block; transition: transform .3s var(--oh-ease-out), color .2s !important; }
.footer-link:hover { transform: translateX(5px); color: var(--oh-cyan) !important; }
.footer-social-icon { transition: transform .4s var(--oh-ease-spring), box-shadow .3s !important; }
.footer-social-icon:hover { transform: translateY(-5px) rotate(-8deg) !important; box-shadow: 0 12px 24px -10px rgba(34,211,238,.6); }

/* ---------- Back to top with progress ring ---------- */
.oh-top {
  position: fixed; right: 2.35rem; bottom: 6.6rem; z-index: 98;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-glass); color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none;
  transition: opacity .4s, transform .5s var(--oh-ease-spring);
}
.oh-top.show { opacity: 1; transform: none; pointer-events: auto; }
.oh-top:hover { transform: translateY(-3px); }
.oh-top svg.ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.oh-top svg.ring circle { fill: none; stroke: url(#ohRingGrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--oh-p, 0))); }
body.in-admin-portal .oh-top { display: none; }

/* ---------- Mobile bottom nav ---------- */
.mobile-nav-item { transition: color .25s, transform .35s var(--oh-ease-spring) !important; }
.mobile-nav-item:active { transform: scale(.9); }
.mobile-nav-item.active svg { animation: oh-pop .5s var(--oh-ease-spring); }
.mobile-nav-item.active::before {
  content: ""; position: absolute; top: 4px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px;
  background: var(--oh-grad); background-size: 200% 100%; animation: oh-flow 3s linear infinite;
}
.mobile-nav-item { position: relative; }

/* ==========================================================================
   RESPONSIVE REFINEMENTS
   ========================================================================== */
.section-title { font-size: clamp(1.65rem, 1.1rem + 2.4vw, 2.75rem) !important; letter-spacing: -0.03em; }
.section-subtitle, .solutions-section-subtitle { font-size: clamp(.92rem, .85rem + .3vw, 1.08rem) !important; }

/* Comparison table: swipeable with sticky first column */
.comparison-table-wrapper { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; position: relative; }
@media (max-width: 760px) {
  .comparison-table { min-width: 600px; }
  .comparison-table th, .comparison-table td { padding: .9rem 1rem !important; font-size: .82rem !important; }
  .comparison-table th:first-child, .comparison-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--bg-secondary) !important;
    box-shadow: 6px 0 12px -8px rgba(0,0,0,.6); min-width: 120px;
  }
  .comparison-table-wrapper::after {
    content: "Swipe →"; position: sticky; left: calc(100% - 80px); bottom: 8px; display: inline-block;
    margin: 0 0 8px; padding: .2rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 700;
    color: #fff; background: rgba(14,165,233,.8); animation: oh-nudge 1.8s ease-in-out infinite;
  }
}
@keyframes oh-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* Tablets */
@media (max-width: 1024px) {
  .hero-grid { gap: 2.5rem !important; }
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Phones */
@media (max-width: 700px) {
  /* Categories become a swipeable rail — no orphan cards */
  .categories-grid {
    display: flex !important; gap: .75rem !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: .5rem var(--gutter) 1rem !important;
    scrollbar-width: none;
  }
  .categories-grid::-webkit-scrollbar { display: none; }
  .categories-grid > * { flex: 0 0 132px; scroll-snap-align: start; }

  /* Testimonials become a snap carousel */
  .testimonials-grid {
    display: flex !important; gap: 1rem !important; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1); padding: .25rem var(--gutter) 1rem !important; scrollbar-width: none;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }
  .testimonials-grid > * { flex: 0 0 86%; scroll-snap-align: center; }

  .hero-section { padding-top: 2rem !important; }
  .hero-cta-group { gap: .7rem !important; }
  .hero-stats-row { gap: 1rem .75rem !important; }
  .before-after-wrapper { animation: none !important; }

  .product-card .product-image-container { min-height: 0 !important; }
  .product-card-actions { gap: .4rem !important; }

  .oh-top { right: 1.1rem; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
  .oh-aurora span { filter: blur(70px); }

  .footer-grid { gap: 1.75rem !important; }
}

/* Small phones */
@media (max-width: 380px) {
  .products-grid { gap: .6rem !important; }
  .product-card-body { padding: .75rem !important; }
  .price-current { font-size: 1.05rem !important; }
}

/* Large screens: breathe */
@media (min-width: 1600px) {
  .container { max-width: 1480px; }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .oh-aurora { display: none; }
  html.oh-motion .oh-rv:not(.oh-in) { opacity: 1; translate: none; filter: none; scale: none; }
}

/* Admin portal stays calm & fast */
body.in-admin-portal .oh-rv { opacity: 1 !important; translate: none !important; filter: none !important; scale: none !important; }
body.in-admin-portal #appRoot.oh-page-enter { animation: none; }

/* Info strip: single tidy line on small phones */
@media (max-width: 480px) {
  .navbar-info-strip-content {
    flex-wrap: nowrap !important; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
    justify-content: flex-start !important; font-size: .7rem !important; gap: .5rem !important;
  }
  .navbar-info-strip-content::-webkit-scrollbar { display: none; }
  .navbar-info-strip-content > * { flex-shrink: 0; }
}

/* ==========================================================================
   v3.1 — Launch-status announcement bar (clickable pills)
   ========================================================================== */
.oh-ann { gap: .55rem !important; }
.oh-ann-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .14rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #fff !important; text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .35s var(--oh-ease-spring), background-color .25s, border-color .25s, box-shadow .25s;
}
.oh-ann-link:hover { transform: translateY(-1px) scale(1.05); }
.oh-ann-avail { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
.oh-ann-avail:hover { background: rgba(16,185,129,.28); box-shadow: 0 0 14px rgba(16,185,129,.45); }
.oh-ann-soon { color: #bae6fd !important; border-color: rgba(56,189,248,.4); border-style: dashed; background: rgba(56,189,248,.08); }
.oh-ann-soon:hover { background: rgba(56,189,248,.22); box-shadow: 0 0 14px rgba(56,189,248,.4); color: #fff !important; }
.oh-ann-soon-badge {
  display: inline-flex; align-items: center;
  padding: .16rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; line-height: 1.2; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #f97316, #f59e0b); background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(245,158,11,.45);
  animation: oh-flow 3s linear infinite;
}
@media (max-width: 600px) {
  .oh-ann-link { font-size: .7rem; padding: .12rem .55rem; }
  .oh-ann-soon-badge, .announcement-badge-live { font-size: .64rem !important; }
}
/* phones have no hover: let users stop the ticker by touching it */
.marquee-track:active { animation-play-state: paused; }

/* Native smooth scrolling for keyboard, anchors & phones */
html { scroll-behavior: smooth; }
html:has(body.in-admin-portal) { scroll-behavior: auto; }

/* Kit page price block: keep "+ GST" and "MRP" on one line on phones */
.kit-hero-prices { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .25rem 1rem; }
.kit-hero-price-current, .kit-hero-price-mrp { white-space: nowrap; }
.kit-hero-price-gst { white-space: nowrap; }
@media (max-width: 420px) {
  .kit-hero-price-current { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  .kit-hero-saving-badge { white-space: normal; text-align: center; line-height: 1.3; }
}
@media (max-width: 480px) {
  .navbar-info-strip-content {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 1.5rem;
  }
}

/* ==========================================================================
   v3.2 — Buttery mobile scrolling
   Touch devices: keep native momentum scrolling, remove everything that
   forces the GPU to repaint large areas while the finger is moving.
   ========================================================================== */
@supports (overflow: clip) {
  html, body { overflow-x: clip !important; }   /* 'hidden' on both breaks iOS momentum */
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-x: none; -webkit-tap-highlight-color: transparent; }

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  html { scroll-behavior: smooth; }
  .oh-aurora { display: none !important; }                      /* huge blurred layers */
  .glass-nav, .site-header, .mobile-bottom-nav, .oh-top, .account-dropdown-menu {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .glass-nav, .site-header { background: rgba(11, 15, 25, 0.97) !important; }
  [data-theme="light"] .glass-nav, [data-theme="light"] .site-header { background: rgba(255,255,255,.98) !important; }
  .mobile-bottom-nav { background: rgba(11, 15, 25, 0.98) !important; }
  [data-theme="light"] .mobile-bottom-nav { background: rgba(255,255,255,.98) !important; }

  /* reveals: compositor-only (no blur), shorter travel, quicker */
  html.oh-motion .oh-rv:not(.oh-in) { filter: none !important; translate: 0 18px; }
  html.oh-motion .oh-rv.oh-rv-left:not(.oh-in), html.oh-motion .oh-rv.oh-rv-right:not(.oh-in) { translate: 0 18px; }
  html.oh-motion .oh-rv { --oh-reveal-dur: .55s; }
  #appRoot.oh-page-enter { animation-name: oh-page-in-m; }
  @keyframes oh-page-in-m { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* stop decorative infinite animations while scrolling content */
  .badge, .product-card-badge, .ref-save-badge,
  .ref-bundle-header, .ref-kit-home-header, .ref-kit-corp-header,
  .before-after-card::before, .before-after-wrapper, .floating-whatsapp,
  .ba-handle-button, .text-gradient { animation: none !important; }
  .before-after-card::before { display: none; }
  .product-card, .product-card:hover { transform: none !important; will-change: auto; }
  .product-card::after, .category-card::after, .testimonials-grid > *::after { display: none; }
  .hero-glow-blob-1, .hero-glow-blob-2 { animation: none !important; filter: blur(60px); }

  /* hint the browser these lists scroll vertically */
  #appRoot { touch-action: pan-y pinch-zoom; }
  .categories-grid, .testimonials-grid, .comparison-table-wrapper, .navbar-info-strip-content { touch-action: pan-x pan-y; }
}

/* Header fits the smallest phones (320–374px) */
@media (max-width: 374px) {
  .site-header .nav-container { gap: .4rem !important; }
  .site-header .brand-logo-img { height: 30px !important; width: auto !important; }
  .site-header .nav-actions { gap: .3rem !important; }
  .site-header .nav-actions .search-trigger-btn,
  .site-header .nav-actions .theme-toggle-btn,
  .site-header .nav-actions .cart-btn,
  .site-header .nav-actions .header-account-btn {
    width: 34px !important; height: 34px !important; min-width: 34px !important;
    padding: 0 !important; justify-content: center !important;
  }
  .site-header .nav-actions .account-btn-label,
  .site-header .nav-actions .account-btn-chevron,
  .site-header .nav-actions .search-trigger-text { display: none !important; }
}

/* ==========================================================================
   v3.2 — Alignment polish for every phone size
   ========================================================================== */
/* Product cards: tidy price line + single-line tags */
.product-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; }
.product-price-row .price-discount { white-space: nowrap; }
.product-card-badge { max-width: calc(100% - 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card-body { display: flex; flex-direction: column; }
.product-card-actions { margin-top: auto; }
@media (max-width: 480px) {
  .product-card-badge { font-size: .62rem !important; padding: .15rem .45rem !important; letter-spacing: .02em; }
  .product-price-row .price-current { font-size: 1.1rem !important; }
  .product-price-row .price-mrp { font-size: .72rem !important; }
  .product-price-row .price-discount { font-size: .68rem !important; }
  .product-title { font-size: .86rem !important; line-height: 1.3 !important; }
  .product-desc-short { font-size: .74rem !important; }
}

/* Kit/Bundle cards: price never collides with the Save badge */
.ref-price-box { flex-wrap: wrap; gap: .75rem; }
.ref-price-line { flex-wrap: wrap; row-gap: .2rem; }
@media (max-width: 420px) {
  .ref-price-num { font-size: 1.9rem !important; }
  .ref-price-mrp { font-size: .95rem !important; }
}

/* Long text (emails, IDs) never spills out of cards */
#appRoot a[href^="mailto:"], .footer-links-list a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; }
#appRoot .glass-panel > div { min-width: 0; }

/* About hero buttons: equal width & centred on phones */
@media (max-width: 600px) {
  .about-hero-actions { display: flex !important; flex-direction: column; align-items: stretch !important; gap: .75rem !important; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  .about-hero-actions .btn { width: 100%; justify-content: center; }
  .hero-cta-group .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Before/after tags stay on one line */
.ba-tag { white-space: nowrap; }
@media (max-width: 420px) { .ba-tag { font-size: .62rem !important; padding: .3rem .5rem !important; } }

/* Section rhythm: consistent vertical spacing on phones */
@media (max-width: 600px) {
  .section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .section-header { margin-bottom: 1.75rem !important; }
  :root { --gutter: 16px; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}
#appRoot .glass-panel a[href^="mailto:"] { font-size: clamp(.68rem, 2.95vw, .95rem); letter-spacing: -.01em; }
@media (max-width: 600px) { #appRoot .glass-panel:has(a[href^="mailto:"]) { padding-left: .85rem !important; padding-right: .85rem !important; gap: .75rem !important; } }

/* ==========================================================================
   v3.3 — Info strip as a scrolling marquee
   ========================================================================== */
.navbar-info-strip > .oh-strip-marquee { overflow: hidden; min-height: 0; }
.oh-strip-marquee {
  position: relative; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.oh-strip-track {
  display: flex; width: max-content;
  animation: oh-strip-scroll 38s linear infinite;
  will-change: transform;
}
.oh-strip-marquee:hover .oh-strip-track,
.oh-strip-marquee:active .oh-strip-track,
.oh-strip-marquee:focus-within .oh-strip-track { animation-play-state: paused; }
.oh-strip-half { display: flex; align-items: center; gap: 1.6rem; padding: .55rem 1.6rem .55rem 0; white-space: nowrap; flex-shrink: 0; }
.oh-strip-item {
  display: inline-flex; align-items: center; gap: .45rem;
  color: inherit !important; text-decoration: none !important;
  font-size: .86rem; font-weight: 700;
  padding: .2rem .7rem; border-radius: 999px;
  transition: background-color .25s, transform .35s var(--oh-ease-spring);
}
.oh-strip-item:hover { background: rgba(255,255,255,.07); transform: translateY(-1px); }
[data-theme="light"] .oh-strip-item:hover { background: rgba(15,23,42,.06); }
.oh-strip-sep { color: var(--oh-cyan); opacity: .7; font-size: .8rem; }
@keyframes oh-strip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .oh-strip-item { font-size: .74rem; padding: .15rem .45rem; gap: .35rem; }
  .oh-strip-half { gap: 1rem; padding: .45rem 1rem .45rem 0; }
  .oh-strip-track { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
  .oh-strip-track { animation: oh-strip-scroll 90s linear infinite !important; }
}

/* ==========================================================================
   v3.3 — OrderHub logo in the Admin portal
   ========================================================================== */
.oh-logo { display: block; height: auto; object-fit: contain; }
.oh-logo-on-light { display: none; }
[data-theme="light"] .oh-logo-on-dark { display: none; }
[data-theme="light"] .oh-logo-on-light { display: block; }

.oh-admin-chip {
  display: inline-flex; align-items: center; gap: .3rem; width: fit-content;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-cyan); padding: .18rem .55rem; border-radius: 999px;
  background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.3);
}

/* Login gateway */
.oh-admin-auth-logo { display: flex; justify-content: center; margin: .25rem auto 1rem; }
.oh-logo-auth { width: min(230px, 70%); filter: drop-shadow(0 8px 24px rgba(14,165,233,.18)); }
html.oh-motion .oh-admin-auth-logo { animation: oh-pop .8s var(--oh-ease-spring) both; }

/* Sidebar brand */
.admin-sidebar-brand { flex: 1; min-width: 0; }
.oh-admin-brand-full { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.oh-logo-sidebar { width: 100%; max-width: 168px; }
.oh-admin-brand-mark { display: none; width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: #0b0f19; border: 1px solid var(--border-subtle); object-fit: contain; }
.admin-sidebar-brand:hover .oh-logo-sidebar { transform: scale(1.03); }
.oh-logo-sidebar { transition: transform .35s var(--oh-ease-out); transform-origin: left center; }
@media (min-width: 1025px) {
  .admin-cms-wrapper.sidebar-collapsed .oh-admin-brand-full { display: none; }
  .admin-cms-wrapper.sidebar-collapsed .oh-admin-brand-mark { display: block; }
  .admin-cms-wrapper.sidebar-collapsed .admin-sidebar-brand { flex: 0 0 auto; }
}

/* Topbar logo: shown when the sidebar is a drawer (tablet & phone) */
.oh-admin-topbar-logo { display: none; align-items: center; flex-shrink: 0; }
.oh-logo-topbar { height: 30px; width: auto; }
@media (max-width: 1024px) {
  .oh-admin-topbar-logo { display: flex; }
  .admin-cms-topbar .admin-breadcrumbs .breadcrumb-parent { display: none !important; }
  .admin-cms-topbar .admin-breadcrumbs .breadcrumb-sep:first-of-type { display: none !important; }
}
@media (max-width: 600px) {
  .oh-logo-topbar { height: 28px; }
  .admin-cms-topbar .admin-breadcrumbs { display: none !important; }
  .admin-topbar-left { gap: .6rem !important; }
}
/* v3.3.1 — orderhub-mark.png is now the full wide logo */
.oh-admin-brand-mark { width: 54px !important; height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }

/* ==========================================================================
   v3.4 — Header without layout shift
   The header is fixed; a spacer of its full (expanded) height holds its
   place. Collapsing the info strip on scroll now only reveals more content
   instead of moving it, so the page can't jitter at the threshold.
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; right: 0; }
.oh-header-spacer { height: var(--oh-header-h, 165px); }
@media (max-width: 768px) { .oh-header-spacer { height: var(--oh-header-h, 143px); } }
@media (max-width: 640px) { .oh-header-spacer { height: var(--oh-header-h, 154px); } }
body.in-admin-portal .oh-header-spacer { display: none; }
@media print { .oh-header-spacer { display: none; } }
html { scroll-padding-top: calc(var(--oh-header-h, 150px) - 40px); }

/* ==========================================================================
   v3.4 — Compositor-only motion
   Animating filter: blur() re-rasterises every frame; on a full page or a
   grid of cards that drops frames. Opacity + transform look the same and
   stay on the GPU.
   ========================================================================== */
#appRoot.oh-page-enter { animation: oh-page-in-fast .45s var(--oh-ease-out) both; }
@keyframes oh-page-in-fast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.oh-motion .oh-rv:not(.oh-in) { filter: none; }
html.oh-motion .oh-rv { --oh-reveal-dur: .7s; }

/* v3.4 — Info strip collapses fully on scroll (desktop kept an empty 44px band,
   phones kept their padding). max-height animates from both a fixed and an
   auto height; the fixed header means this never moves page content. */
.navbar-info-strip {
  max-height: 96px; overflow: hidden;
  transition: max-height .4s var(--oh-ease-out), min-height .4s var(--oh-ease-out),
              padding .4s var(--oh-ease-out), opacity .3s, border-color .3s;
}
.site-header.is-scrolled .navbar-info-strip {
  max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0;
  border-top-width: 0; border-bottom-width: 0;
}

/* ==========================================================================
   Seasonal greeting banner (home page, date-limited)
   The artwork sits behind; a gradient keeps the text readable on any image,
   and the same gradient is the fallback when no image is present.
   ========================================================================== */
.oh-fest { padding: 1.25rem 0 0; }
.oh-fest-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(240px, 26vw, 360px); border-radius: 22px;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 140% at 85% 30%, #f59e0b 0%, rgba(245,158,11,0) 45%),
    linear-gradient(115deg, #3b0a0a 0%, #6b1414 38%, #b4380b 72%, #f08a1c 100%);
  box-shadow: 0 18px 40px -18px rgba(180, 56, 11, .55);
  color: #fff;
}
.oh-fest-art { position: absolute; inset: 0; z-index: -2; }
.oh-fest-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.oh-fest-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(36,6,6,.88) 0%, rgba(36,6,6,.62) 38%, rgba(36,6,6,0) 66%);
}
.oh-fest-copy { padding: clamp(1.5rem, 4vw, 3rem); max-width: 560px; }
.oh-fest-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,214,140,.35);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd98a;
}
.oh-fest-title {
  margin: .75rem 0 .5rem; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff6dc 0%, #ffc857 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.oh-fest-msg { margin: 0 0 1.25rem; font-size: clamp(.95rem, 1.4vw, 1.08rem); line-height: 1.6; color: rgba(255,244,228,.92); }
.oh-fest-cta {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 12px;
  background: linear-gradient(180deg, #ffd166, #f59e0b); color: #3b0a0a; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(245,158,11,.8); transition: transform .2s ease, box-shadow .2s ease;
}
.oh-fest-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(245,158,11,.9); }

@media (max-width: 640px) {
  .oh-fest { padding-top: 1rem; }
  .oh-fest-card { min-height: 440px; align-items: flex-start; border-radius: 18px; }
  .oh-fest-art img { object-position: center bottom; }
  .oh-fest-card::before { background: linear-gradient(180deg, rgba(36,6,6,.9) 0%, rgba(36,6,6,.6) 45%, rgba(36,6,6,0) 72%); }
  .oh-fest-copy { padding: 1.5rem 1.25rem; }
}
@media (min-width: 641px) {
  /* closer to the 8:3 artwork so the effigy's crowns and garlands stay in frame */
  .oh-fest-card { min-height: 0; aspect-ratio: 3 / 1; max-height: 480px; }
  .oh-fest-art img { object-position: right 28%; }
}

/* Telugu headline: Telugu letters need a Telugu font and extra line height
   (vowel signs sit above and below the line) */
.oh-fest-title-te {
  font-family: "Noto Sans Telugu", "Nirmala UI", "Telugu Sangam MN", "Gautami", sans-serif;
  font-weight: 800; letter-spacing: 0; line-height: 1.4;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  margin: .6rem 0 .1rem; padding-bottom: .08em;
}
.oh-fest-title-en {
  margin: 0 0 .6rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700; color: #ffd98a; letter-spacing: .01em;
}
@media (max-width: 640px) { .oh-fest-card { min-height: 520px; } }

/* The banner always sits on dark artwork: keep its text light in both themes
   (the light theme forces h1–h6 to navy with !important and p to grey) */
.oh-fest .oh-fest-title,
[data-theme="light"] .oh-fest .oh-fest-title {
  color: #ffd98a !important;
  background: linear-gradient(180deg, #fff6dc 0%, #ffc857 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oh-fest .oh-fest-title-en,
[data-theme="light"] .oh-fest .oh-fest-title-en { color: #ffd98a !important; }
.oh-fest .oh-fest-msg,
[data-theme="light"] .oh-fest .oh-fest-msg { color: rgba(255, 244, 228, .92) !important; }
.oh-fest .oh-fest-eyebrow,
[data-theme="light"] .oh-fest .oh-fest-eyebrow { color: #ffd98a !important; }
.oh-fest .oh-fest-cta,
[data-theme="light"] .oh-fest .oh-fest-cta { color: #3b0a0a !important; }

/* ==========================================================================
   Dussehra artwork v2 — light parchment (Durga). Dark maroon text on a soft
   cream fade, identical in light and dark site themes.
   ========================================================================== */
.oh-fest-card {
  background: linear-gradient(115deg, #fbf3df 0%, #f6e6c2 55%, #efd6a0 100%);
  box-shadow: 0 18px 40px -20px rgba(122, 60, 12, .45);
  border: 1px solid rgba(160, 98, 32, .18);
}
.oh-fest-card::before {
  background: linear-gradient(90deg, rgba(251,243,223,.92) 0%, rgba(251,243,223,.7) 34%, rgba(251,243,223,0) 58%);
}
.oh-fest-art img { object-position: right center; }
.oh-fest .oh-fest-title,
[data-theme="light"] .oh-fest .oh-fest-title {
  color: #7a1c0c !important;
  background: linear-gradient(180deg, #8c1f0c 0%, #c2410c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oh-fest .oh-fest-title-en,
[data-theme="light"] .oh-fest .oh-fest-title-en { color: #9a3412 !important; }
.oh-fest .oh-fest-msg,
[data-theme="light"] .oh-fest .oh-fest-msg { color: #4a2a14 !important; }
.oh-fest .oh-fest-eyebrow,
[data-theme="light"] .oh-fest .oh-fest-eyebrow {
  color: #7a1c0c !important; background: rgba(255, 255, 255, .55); border-color: rgba(154, 52, 18, .25);
}
.oh-fest .oh-fest-cta,
[data-theme="light"] .oh-fest .oh-fest-cta {
  background: linear-gradient(180deg, #9a2a10, #7a1c0c); color: #fff7e8 !important;
  box-shadow: 0 8px 20px -10px rgba(122, 28, 12, .8);
}
.oh-fest .oh-fest-cta:hover { box-shadow: 0 12px 24px -10px rgba(122, 28, 12, .9); }

@media (max-width: 640px) {
  .oh-fest-card { min-height: 540px; }
  .oh-fest-art img { object-position: center bottom; }
  .oh-fest-card::before {
    background: linear-gradient(180deg, rgba(251,243,223,.9) 0%, rgba(251,243,223,.65) 40%, rgba(251,243,223,0) 62%);
  }
}
/* Keep the text on the empty left half so it never touches the artwork */
@media (min-width: 641px) {
  .oh-fest-copy { max-width: min(560px, 50%); }
}
/* Phone: greeting first, artwork below it (never overlapping Durga Maa).
   The artwork's empty top third is trimmed; the trishul tip, face and lion stay. */
@media (max-width: 640px) {
  .oh-fest-card { min-height: 0; flex-direction: column; align-items: stretch; background: #f9eed3; }
  .oh-fest-card::before { display: none; }
  .oh-fest-copy { order: 1; padding: 1.5rem 1.25rem .25rem; }
  .oh-fest-art {
    order: 2; position: relative; inset: auto; z-index: 0; display: block;
    aspect-ratio: 1080 / 877;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  }
  .oh-fest-art img { object-fit: cover; object-position: center bottom; }
}
@media (max-width: 640px) {
  .oh-fest-art { overflow: hidden; min-height: 0; }
  .oh-fest-art img { position: absolute; inset: 0; }
}
/* Tablet: let the banner grow with its text instead of a fixed 3:1 shape */
@media (min-width: 641px) and (max-width: 1023px) {
  .oh-fest-card { aspect-ratio: auto; min-height: 300px; }
}

/* Dussehra artwork v3 — Lord Rama, light watercolour. Near-white cream to
   match the painting's sky; maroon text stays readable on it. */
.oh-fest-card {
  background: linear-gradient(115deg, #fffaf0 0%, #fdf3e1 60%, #f6e7cb 100%);
  border-color: rgba(150, 110, 40, .16);
}
.oh-fest-card::before {
  background: linear-gradient(90deg, rgba(255,250,240,.9) 0%, rgba(255,250,240,.6) 36%, rgba(255,250,240,0) 56%);
}
@media (max-width: 640px) {
  .oh-fest-card { background: #fffaf0; }
  .oh-fest-art { aspect-ratio: 898 / 768; }
  .oh-fest-art img { object-position: center center; }
}

/* Banner text in the website's brand blue (--accent-cyan #0ea5e9 / #0284c7) */
.oh-fest .oh-fest-title,
[data-theme="light"] .oh-fest .oh-fest-title {
  color: #0369a1 !important;
  background: linear-gradient(180deg, #075985 0%, #0284c7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oh-fest .oh-fest-title-en,
[data-theme="light"] .oh-fest .oh-fest-title-en { color: #0284c7 !important; }
.oh-fest .oh-fest-msg,
[data-theme="light"] .oh-fest .oh-fest-msg { color: #1e3a5f !important; }
.oh-fest .oh-fest-eyebrow,
[data-theme="light"] .oh-fest .oh-fest-eyebrow {
  color: #0369a1 !important; background: rgba(255, 255, 255, .7); border-color: rgba(2, 132, 199, .3);
}
.oh-fest .oh-fest-cta,
[data-theme="light"] .oh-fest .oh-fest-cta {
  background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #ffffff !important;
  box-shadow: 0 8px 20px -8px rgba(14, 165, 233, .6);
}
.oh-fest .oh-fest-cta:hover { background: linear-gradient(135deg, #38bdf8, #0ea5e9); box-shadow: 0 12px 26px -8px rgba(14, 165, 233, .7); }