/* Organic Digital BD — premium dark animated gradient theme
   Loaded last so it safely overrides the original light theme. */
:root {
  --ink: #f5fbff;
  --muted: #b7c3cf;
  --paper: #030711;
  --purple: #8a7bff;
  --orange: #f2c879;
  --line: rgba(139, 235, 221, .18);
  --aqua: #78eadb;
  --panel: rgba(8, 18, 31, .88);
  --od-teal: #73e8d7;
  --od-teal-soft: #b9fff3;
  --od-gold: #f1cb7b;
  --od-navy: #071524;
  --od-card: rgba(8, 17, 30, .78);
  --od-card-strong: rgba(7, 14, 26, .94);
  --od-border: rgba(122, 232, 215, .18);
  --od-shadow: 0 24px 70px rgba(0, 0, 0, .44);
}

html {
  background: #02050c;
  color-scheme: dark;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(32, 180, 166, .12), transparent 28%),
    radial-gradient(circle at 83% 12%, rgba(138, 123, 255, .13), transparent 31%),
    radial-gradient(circle at 52% 86%, rgba(241, 203, 123, .08), transparent 29%),
    linear-gradient(145deg, #02050c 0%, #07111e 43%, #061522 70%, #02050c 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 48vw;
  height: 48vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(86px);
  opacity: .30;
  will-change: transform;
}

body::before {
  top: -17vw;
  left: -13vw;
  background: radial-gradient(circle, rgba(78, 236, 211, .68) 0%, rgba(35, 112, 139, .22) 45%, transparent 72%);
  animation: odAuroraOne 18s ease-in-out infinite alternate;
}

body::after {
  right: -17vw;
  top: 24vh;
  background: radial-gradient(circle, rgba(139, 112, 255, .62) 0%, rgba(40, 73, 137, .20) 46%, transparent 72%);
  animation: odAuroraTwo 22s ease-in-out infinite alternate;
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

::selection {
  color: #06141d;
  background: var(--od-teal-soft);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #030711; }
::-webkit-scrollbar-thumb {
  border: 3px solid #030711;
  border-radius: 999px;
  background: linear-gradient(180deg, #52cdbd, #7667da);
}

.site-header {
  position: sticky;
  top: 10px;
  z-index: 30;
  width: calc(100% - 28px);
  height: 72px;
  margin-top: 10px;
  margin-bottom: 18px;
  padding: 0 18px;
  border: 1px solid rgba(134, 238, 222, .15);
  border-radius: 18px;
  background: rgba(3, 10, 19, .68);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px) saturate(145%);
}

.brand strong { color: #f8fcff; text-shadow: 0 1px 16px rgba(120,234,219,.18); }
.brand small { color: #8fded3; }
.brand-logo {
  filter: drop-shadow(0 8px 18px rgba(82, 220, 202, .20));
}

.header-chat {
  color: var(--od-teal-soft);
  text-shadow: 0 0 20px rgba(115,232,215,.25);
}

.account-launch,
.cart-launch {
  border-color: rgba(140, 235, 221, .18);
  color: #eefcff;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.account-launch:hover,
.account-launch:focus-visible,
.cart-launch:hover,
.cart-launch:focus-visible {
  border-color: rgba(115, 232, 215, .72);
  background: rgba(61, 184, 169, .14);
  box-shadow: 0 10px 28px rgba(18, 144, 131, .16), inset 0 1px rgba(255,255,255,.08);
  outline: 0;
}
.cart-launch span {
  color: #061520;
  background: linear-gradient(135deg, var(--od-teal-soft), var(--od-gold));
}
.admin-account-launch {
  color: #f6e7ba;
  background: linear-gradient(135deg, rgba(242,200,121,.12), rgba(138,123,255,.10));
}

main { padding: 0 14px; }

.hero {
  min-height: 540px;
  border: 1px solid rgba(122, 232, 215, .19);
  background:
    linear-gradient(115deg, rgba(3, 15, 27, .97) 0%, rgba(7, 27, 41, .94) 44%, rgba(20, 21, 54, .92) 100%);
  box-shadow: var(--od-shadow), inset 0 1px rgba(255,255,255,.06);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(115,232,215,.07), transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(138,123,255,.20), transparent 29%),
    radial-gradient(circle at 72% 85%, rgba(241,203,123,.11), transparent 25%);
}

.hero-copy,
.hero-art { position: relative; z-index: 1; }
.hero h1,
.section h2,
.contact h2,
.catalog-heading h2,
.service-card h3,
.steps h3 {
  color: #f7fbff;
  text-shadow: 0 3px 28px rgba(0,0,0,.34);
}
.hero h1 em {
  color: transparent;
  background: linear-gradient(96deg, #91f7e8 6%, #7adaca 46%, #f2d18d 94%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

.eyebrow { color: #8ff0e1; }
.eyebrow span {
  background: linear-gradient(90deg, var(--od-teal), var(--od-gold));
  box-shadow: 0 0 16px rgba(115,232,215,.34);
}
.hero-text { color: #c5d0da; }

.button {
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.button:hover,
.button:focus-visible { transform: translateY(-2px); outline: 0; }
.button-primary {
  color: #06141c;
  background: linear-gradient(105deg, #83eddd 0%, #b8f9ee 50%, #f1ce87 100%);
  box-shadow: 0 14px 34px rgba(59, 201, 184, .22);
}
.button-primary:hover,
.button-primary:focus-visible { box-shadow: 0 18px 42px rgba(59, 201, 184, .30); }
.button-quiet {
  color: #e8f6fb;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.trust-row { color: #d4e0e7; }
.trust-row b { color: var(--od-teal); text-shadow: 0 0 16px rgba(115,232,215,.35); }

.orb-one {
  background: radial-gradient(circle at 35% 30%, rgba(191,255,244,.85), rgba(80,197,185,.24) 44%, rgba(111,83,214,.32) 72%, transparent 75%);
  box-shadow: 0 0 80px rgba(94, 221, 203, .20);
  animation: odOrbFloat 9s ease-in-out infinite alternate;
}
.orb-two {
  background: radial-gradient(circle at 35% 30%, #f7d998, rgba(229,151,84,.28) 50%, transparent 74%);
  box-shadow: 0 0 60px rgba(241,203,123,.18);
  animation: odOrbFloatTwo 11s ease-in-out infinite alternate;
}
.offer-main {
  border: 1px solid rgba(140, 238, 222, .18);
  background: linear-gradient(150deg, rgba(9,31,44,.96), rgba(27,20,57,.97));
  box-shadow: 0 28px 60px rgba(0,0,0,.40), 0 0 45px rgba(105,80,210,.14), inset 0 1px rgba(255,255,255,.08);
}
.offer-main small { color: #b8cbcF; opacity: 1; }
.offer-main i { color: #91eadc; }
.spark { color: var(--od-gold); text-shadow: 0 0 18px rgba(241,203,123,.45); }
.offer-small {
  color: #f7fbff;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(8,22,34,.86);
  box-shadow: 0 18px 42px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
}
.offer-small span { color: var(--od-gold); }
.dots { background-image: radial-gradient(rgba(120,234,219,.72) 1.4px, transparent 1.4px); opacity: .74; }

.section { position: relative; }
.section-heading h2,
.catalog-heading h2 { color: #f7fbff; }
.catalog-heading > p:not(.eyebrow) { color: #afbdc9; }

.service-card {
  border-color: var(--od-border);
  color: #f4f9fc;
  background:
    radial-gradient(circle at 90% 0%, rgba(115,232,215,.09), transparent 35%),
    linear-gradient(145deg, rgba(10,24,38,.90), rgba(7,13,25,.93));
  box-shadow: 0 19px 50px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(115,232,215,.55);
  box-shadow: 0 28px 64px rgba(0,0,0,.34), 0 0 34px rgba(48,178,163,.09);
}
.service-card.featured {
  border-color: rgba(241,203,123,.38);
  background:
    radial-gradient(circle at 92% 4%, rgba(241,203,123,.16), transparent 35%),
    linear-gradient(145deg, rgba(28,25,34,.94), rgba(10,20,31,.94));
}
.service-card p { color: #b7c4ce; }
.service-card a { color: #8ff0e1; }
.label {
  color: #241707;
  background: linear-gradient(120deg, #f5d793, #e8b967);
  box-shadow: 0 8px 22px rgba(241,203,123,.18);
}
.icon {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.purple { color: #c8c0ff; background: rgba(138,123,255,.15); }
.orange { color: #f7d691; background: rgba(241,203,123,.13); }
.blue { color: #9af3e5; background: rgba(66,202,185,.13); }

.catalog-search-panel {
  border-color: rgba(115,232,215,.22);
  background:
    radial-gradient(circle at 12% 0%, rgba(115,232,215,.14), transparent 36%),
    radial-gradient(circle at 92% 100%, rgba(138,123,255,.22), transparent 42%),
    linear-gradient(145deg, rgba(7,19,33,.96), rgba(8,10,24,.97));
  box-shadow: 0 24px 64px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06);
}
.catalog-search-label { color: #f4fbff; }
.catalog-search-box {
  border-color: rgba(115,232,215,.18);
  background: rgba(1,7,14,.68);
}
.catalog-search-box:focus-within {
  border-color: rgba(115,232,215,.80);
  box-shadow: 0 0 0 4px rgba(115,232,215,.10), 0 14px 38px rgba(0,0,0,.28);
}
.catalog-search-input { color: #f7fbff; }
.catalog-search-input::placeholder { color: #81919f; }
.catalog-search-info p,
.catalog-search-suggestions > span { color: #9daeba; }
#product-search-status { color: #cbd7de; }
#product-search-status strong { color: var(--od-gold); }
.catalog-search-suggestions button {
  border-color: rgba(115,232,215,.14);
  color: #d8e8ee;
  background: rgba(255,255,255,.04);
}
.catalog-search-suggestions button:hover,
.catalog-search-suggestions button:focus-visible {
  border-color: rgba(115,232,215,.65);
  color: #07151f;
  background: linear-gradient(110deg, #86ecdc, #d8f8ef);
}
.catalog-search-clear {
  border-color: rgba(241,203,123,.26);
  color: #f4dda9;
  background: rgba(241,203,123,.08);
}

.catalog-filter {
  border-color: rgba(115,232,215,.13);
  color: #c6d4dc;
  background: rgba(255,255,255,.035);
}
.catalog-filter:hover,
.catalog-filter.is-active {
  border-color: rgba(115,232,215,.70);
  color: #06141d;
  background: linear-gradient(110deg, #83ebdb, #d9f9ef);
  box-shadow: 0 10px 28px rgba(57,183,168,.18);
}

.product-card {
  border-color: rgba(115,232,215,.17);
  background:
    radial-gradient(circle at 86% 4%, rgba(115,232,215,.11), transparent 37%),
    linear-gradient(155deg, #0c1a2a 0%, #08111f 65%, #060b15 100%);
  box-shadow: 0 20px 52px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06);
}
.product-card:hover,
.product-card:focus-within {
  border-color: rgba(115,232,215,.68);
  box-shadow: 0 29px 68px rgba(0,0,0,.44), 0 0 38px rgba(67,196,181,.10), inset 0 1px rgba(255,255,255,.08);
}
.product-card .product-image {
  background:
    radial-gradient(circle at 50% 12%, rgba(115,232,215,.16), transparent 52%),
    linear-gradient(145deg, #102235, #050b14);
}
.product-card .product-image::after {
  background: linear-gradient(90deg, transparent, rgba(241,203,123,.72), rgba(115,232,215,.72), transparent);
}
.product-card .product-info h3 { color: #f7fbff; }
.product-starting-price { color: #8ef0e0 !important; }
.product-plan-total { color: #aab9c4 !important; }
.product-details-cta {
  border-color: rgba(115,232,215,.26);
  color: #f4fbff;
  background: linear-gradient(110deg, rgba(68,192,177,.16), rgba(138,123,255,.14));
}
.product-card:hover .product-details-cta,
.product-card:focus-within .product-details-cta {
  border-color: rgba(241,203,123,.62);
  background: linear-gradient(110deg, rgba(72,207,191,.25), rgba(241,203,123,.13));
}
.load-more {
  border-color: rgba(115,232,215,.30);
  color: #e7f7fb;
  background: rgba(255,255,255,.04);
}
.load-more:hover,
.load-more:focus-visible {
  border-color: rgba(115,232,215,.72);
  background: rgba(54,180,164,.13);
  outline: 0;
}

.how-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(241,203,123,.25);
  color: #f8fbff;
  background:
    radial-gradient(circle at 95% 10%, rgba(241,203,123,.18), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(115,232,215,.14), transparent 34%),
    linear-gradient(115deg, #0a2631, #17213d 54%, #2a2037 100%);
  box-shadow: 0 24px 65px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06);
}
.how-card .eyebrow { color: #f2d492; }
.how-card h2 { color: #fff; }
.button-dark {
  color: #07151d;
  background: linear-gradient(110deg, #8df0e1, #f1ce87);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.steps { gap: 18px; }
.steps article {
  padding: 24px;
  border: 1px solid rgba(115,232,215,.13);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(9,22,35,.80), rgba(5,11,21,.86));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.steps b { color: var(--od-gold); }
.steps p { color: #aebdc8; }

.contact {
  overflow: hidden;
  border-top: 1px solid rgba(115,232,215,.17);
  border-bottom: 1px solid rgba(115,232,215,.17);
  background:
    radial-gradient(circle at 8% 50%, rgba(115,232,215,.14), transparent 32%),
    radial-gradient(circle at 92% 30%, rgba(138,123,255,.24), transparent 35%),
    linear-gradient(115deg, #061724, #101b34 54%, #211934 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.28);
}
.contact .eyebrow { color: #91eadc; }
.contact p:not(.eyebrow) { color: #bac7d0; }
.whatsapp-button {
  border: 1px solid rgba(115,232,215,.24);
  color: #07141c;
  background: linear-gradient(110deg, #f7fffd, #d9fff7 58%, #f4dfac);
  box-shadow: 0 16px 42px rgba(0,0,0,.30);
}
.whatsapp-button small { color: #49616c; }
.whatsapp-button b { color: #137b6e; }

footer {
  color: #e7f3f7;
  border-top: 1px solid rgba(115,232,215,.10);
}
footer p { color: #8fa1ae; }

/* Product details page inherits the same readable dark palette. */
.premium-hero {
  border: 1px solid rgba(115,232,215,.16);
  background: #020811;
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
}
.details-content-wrapper { color: #f4f9fc; }
.details-main-column,
.details-checkout-card,
.specs-box,
.warning-note-box,
.details-feature-card,
.related-card {
  border-color: rgba(115,232,215,.14) !important;
  background: linear-gradient(145deg, rgba(10,22,35,.91), rgba(5,11,21,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.details-section-heading h2,
.hero-title,
.spec-value,
.details-select,
.details-qty-btn,
.details-qty-num { color: #f5fbff !important; }
.details-section-heading span { background: linear-gradient(180deg, var(--od-teal), var(--od-gold)); }
.details-price-tag,
.spec-icon,
.details-live-views { color: var(--od-teal) !important; }
.details-select,
.details-qty-controller { border-color: rgba(115,232,215,.16) !important; background: rgba(255,255,255,.035) !important; }
.details-select option { color: #f5fbff; background: #07111e; }
.related-card:hover { border-color: rgba(115,232,215,.65) !important; }

@keyframes odAuroraOne {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(13vw, 8vh, 0) scale(1.13); }
  100% { transform: translate3d(5vw, 22vh, 0) scale(.94); }
}
@keyframes odAuroraTwo {
  0% { transform: translate3d(0, 0, 0) scale(.96); }
  50% { transform: translate3d(-16vw, 12vh, 0) scale(1.14); }
  100% { transform: translate3d(-7vw, -12vh, 0) scale(1.02); }
}
@keyframes odOrbFloat {
  from { transform: translate3d(0, -6px, 0) scale(.98); }
  to { transform: translate3d(-18px, 15px, 0) scale(1.06); }
}
@keyframes odOrbFloatTwo {
  from { transform: translate3d(0, 7px, 0) scale(.95); }
  to { transform: translate3d(16px, -12px, 0) scale(1.08); }
}

@media (max-width: 760px) {
  .site-header {
    top: 6px;
    width: calc(100% - 16px);
    height: 62px;
    margin-top: 6px;
    border-radius: 15px;
  }
  main { padding: 0; }
  .hero {
    margin: 0 8px;
    border-radius: 22px;
  }
  .section { padding-left: 18px; padding-right: 18px; }
  .contact { margin-left: 8px; margin-right: 8px; border-radius: 22px; }
  .steps article { padding: 20px; }
}

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