section_boundary {
  display: block;
  unicode-bidi: isolate;
}

:root {
  --fr33roll-ink: #111114;
  --fr33roll-muted: #66606f;
  --fr33roll-line: #e8e3f2;
  --fr33roll-panel: #ffffff;
  --fr33roll-violet: #7436f4;
  --fr33roll-violet-dark: #5120c9;
  --fr33roll-violet-soft: #f5f0ff;
  --fr33roll-green: #16a34a;
  --fr33roll-gold: #f4b400;
}

* {
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--fr33roll-ink);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 34%, #ffffff 72%), #ffffff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.section-space {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

@media (min-width: 768px) {
  .section-space {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.glass-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(121, 82, 179, 0.16);
  box-shadow: 0 24px 70px rgba(67, 45, 109, 0.11);
  backdrop-filter: blur(18px);
}

.fr33roll-btn-primary {
  background: linear-gradient(135deg, var(--fr33roll-violet), var(--fr33roll-violet-dark));
  color: white;
  box-shadow: 0 12px 28px rgba(116, 54, 244, 0.26);
}

/* Keep old class name for backward compat within theme */
.violet-button {
  background: linear-gradient(135deg, var(--fr33roll-violet), var(--fr33roll-violet-dark));
  color: white;
  box-shadow: 0 12px 28px rgba(116, 54, 244, 0.26);
}

.fr33roll-logo-chip,
.logo-chip {
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(42, 32, 74, 0.18));
}

.chart-line {
  stroke-dasharray: 580;
  stroke-dashoffset: 0;
}

/* Hero collage layout */
.hero-collage {
  position: absolute;
  left: 50%;
  top: -1rem;
  z-index: 20;
  width: 44rem;
  max-width: none;
  aspect-ratio: 810 / 572;
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: none;
}

.hero-collage::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  content: "";
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(116, 54, 244, 0.14) 0%, rgba(116, 54, 244, 0.07) 45%, rgba(116, 54, 244, 0) 70%);
  pointer-events: none;
}

.hero-layer {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.hero-avatar {
  left: 20.99%;
  top: 1.4%;
  z-index: 34;
  width: 34.32%;
}

.hero-card {
  filter: drop-shadow(0 18px 24px rgba(42, 32, 74, 0.12));
}

.hero-card-instagram {
  left: 6.17%;
  top: 19.93%;
  z-index: 12;
  width: 22.72%;
}

.hero-card-revenue {
 left: 47.8%;
 top: 4.55%;
 z-index: 38;
 width: 22.65%;
}

.hero-card-pay {
 left: 49.85%;
  top: 46%;
  z-index: 35;
  width: 25.65%;
}

.hero-card-app-top {
  left: 68.56%;
  top: 20.28%;
  z-index: 36;
  width: 21.73%;
}

.hero-card-app-bottom {
 left: 73.56%;
 top: 54.9%;
 z-index: 34;
 width: 21.73%;
}

.hero-card-payout {
  left: 11.85%;
  top: 76.47%;
  z-index: 42;
  width: 47.9%;
  filter: drop-shadow(0 16px 22px rgba(42, 32, 74, 0.14));
}

.hero-social-tiktok {
  left: 24.2%;
  top: 7.34%;
  z-index: 8;
  width: 7.16%;
  filter: drop-shadow(0 10px 12px rgba(42, 32, 74, 0.12));
}

.hero-chip-top {
  left: 80.67%;
  top: 11.74%;
  z-index: 10;
  width: 10.37%;
  filter: drop-shadow(0 10px 12px rgba(42, 32, 74, 0.16));
}

.hero-chip-bottom {
  left: 0;
  top: 69.93%;
  z-index: 10;
  width: 11.85%;
  filter: drop-shadow(0 10px 12px rgba(42, 32, 74, 0.16));
}

@media (min-width: 640px) {
  .hero-collage {
    width: 48rem;
  }
}

@media (min-width: 1024px) {
  .hero-collage {
    left: 0;
    top: -2rem;
    width: 50.625rem;
    transform: none;
  }
}

/* Modal form styles */
.formbuilder-required {
  color: var(--fr33roll-violet);
  margin-left: 2px;
}

.formbuilder-text-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fr33roll-ink);
}

.theme-input:focus {
  border-color: var(--fr33roll-violet) !important;
  box-shadow: 0 0 0 3px rgba(116, 54, 244, 0.12) !important;
}

/* FAQ details marker */
details summary::-webkit-details-marker {
  display: none;
}

/* Header sticky */
.fr33roll-header {
  position: sticky;
  top: 0;
  z-index: 40;
}