/* THEME VARIABLES - OPTIPLUS DARK */
:root {
  --op-bg: #090c13;
  --op-surface: #111625;
  --op-surface-light: #192135;
  --op-accent: #00e5ff;
  --op-accent-glow: rgba(0, 229, 255, 0.25);
  --op-text-main: #f3f4f6;
  --op-text-muted: #9ca3af;
  --op-container-width: 1180px;
  --op-radius: 16px; /* soft style style */
  --op-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 35px 0 rgba(0, 229, 255, 0.12); /* deep shadow + spread */

  /* Fonts Config */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* GENERAL STYLING */
body {
  background-color: var(--op-bg);
  color: var(--op-text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase; /* uppercase style */
}

/* HEADER BAR */
.op-header-bar {
  background-color: rgba(17, 22, 37, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  z-index: 50;
}

.op-brand-svg {
  color: var(--op-accent);
}

.op-brand-title {
  font-family: var(--font-display);
  color: var(--op-text-main);
}

.op-header-decor {
  color: var(--op-accent);
}

/* PRODUCT MAIN STAGE */
.op-stage-wrap {
  position: relative;
}

@media (min-width: 1024px) {
  .op-split-deck {
    display: flex;
    gap: 48px;
    align-items: flex-start;
  }
  .op-visual-sticky {
    flex: 0 0 42%;
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
  .op-details-panel {
    flex: 0 0 58%;
  }
}

/* Images glow card */
.op-image-glow-wrap {
  background-color: var(--op-surface);
  box-shadow: var(--op-shadow);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Elements Inside content */
.op-mini-heading {
  background-color: rgba(0, 229, 255, 0.1);
  color: var(--op-accent);
  border: 1px solid rgba(0, 229, 255, 0.2);
}

.op-main-title {
  letter-spacing: -0.5px;
  color: var(--op-text-main);
}

.op-desc-bubble {
  background-color: var(--op-surface);
  border-left: 4px solid var(--op-accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.op-neon-highlight {
  color: var(--op-accent);
}

/* Features List Inside Product section */
.op-icon-bullet {
  background-color: rgba(0, 229, 255, 0.15);
  color: var(--op-accent);
}

/* Guarantee Badge */
.op-trust-badge {
  background-color: var(--op-surface-light);
  border-color: rgba(0, 229, 255, 0.3);
}

.op-shield-wrap {
  background-color: rgba(0, 229, 255, 0.1);
  color: var(--op-accent);
}

/* Price and button block */
.op-value-bar {
  background-color: var(--op-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--op-shadow);
}

.op-badge-price {
  background-color: var(--op-accent);
  color: var(--op-bg);
}

.op-action-trigger {
  background-color: var(--op-accent);
  color: var(--op-bg);
  border-radius: var(--op-radius);
  box-shadow: 0 10px 25px var(--op-accent-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.op-action-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 229, 255, 0.5);
  background-color: #00f0ff;
}

/* Divider SVG style color */
.op-divider-pattern {
  color: var(--op-surface);
}

/* FEATURES SECTION (Benefit rows) */
.op-benefit-strip {
  background-color: var(--op-surface);
}

.op-strip-header {
  letter-spacing: 1.5px;
  color: var(--op-text-main);
}

.op-benefit-row {
  background-color: var(--op-surface-light);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: border 0.3s ease;
}

.op-benefit-row:hover {
  border-color: rgba(0, 229, 255, 0.3);
}

.op-benefit-ico-circle {
  background-color: rgba(0, 229, 255, 0.1);
  color: var(--op-accent);
}

/* TESTIMONIALS SECTION */
.op-social-wall {
  background-color: var(--op-bg);
}

.op-social-header {
  border-bottom: 3px solid var(--op-accent);
}

.op-bubble-feedback {
  background-color: var(--op-surface);
  border-top: 4px solid var(--op-accent); /* Colored top border */
  box-shadow: var(--op-shadow);
  transition: transform 0.3s ease;
}

.op-bubble-feedback:hover {
  transform: translateY(-5px);
}

.op-star {
  color: var(--op-accent);
}

.op-avatar {
  background-color: var(--op-surface-light);
  color: var(--op-accent);
  border: 1.5px solid var(--op-accent);
}

/* FOOTER SECTION */
.op-footer-strip {
  background-color: #05070c;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.op-footer-links a {
  color: var(--op-text-muted);
}

.op-footer-links a:hover {
  color: var(--op-accent);
}