/* ============================================================
   Organic line texture — SVG data-URI background applied to
   section dividers and the page itself.
   All lines use brand teal at low opacity so they read in both
   light and dark mode without adjustment.
   ============================================================ */

/* Full-page subtle grid of flowing lines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cg fill='none' stroke='%230D9488' stroke-width='1'%3E%3Cpath d='M0 400 Q200 200 400 400 T800 400'/%3E%3Cpath d='M0 300 Q200 100 400 300 T800 300'/%3E%3Cpath d='M0 500 Q200 300 400 500 T800 500'/%3E%3Cpath d='M0 200 Q200 0 400 200 T800 200'/%3E%3Cpath d='M0 600 Q200 400 400 600 T800 600'/%3E%3Cpath d='M0 100 Q200 -100 400 100 T800 100'/%3E%3Cpath d='M0 700 Q200 500 400 700 T800 700'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 800px 800px;
}

@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.055; }
}

/* ============================================================
   Section-level organic dividers — wavy SVG border between
   alternating sections, positioned absolutely at the section top
   ============================================================ */

.wave-divider {
  position: relative;
  z-index: 1;
}

.wave-divider::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%230D9488' fill-opacity='0.06' d='M0,24 C240,48 480,0 720,24 C960,48 1200,0 1440,24 L1440,0 L0,0 Z'/%3E%3Cpath fill='none' stroke='%230D9488' stroke-opacity='0.12' stroke-width='1' d='M0,24 C240,48 480,0 720,24 C960,48 1200,0 1440,24'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
}

/* ============================================================
   Corner flourish on feature cards — organic arc in top-right
   ============================================================ */

.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath fill='none' stroke='%230D9488' stroke-opacity='0.12' stroke-width='1' d='M80,0 Q30,0 0,80'/%3E%3Cpath fill='none' stroke='%230D9488' stroke-opacity='0.07' stroke-width='1' d='M80,15 Q40,10 10,80'/%3E%3C/svg%3E");
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.feature-card:hover::after {
  opacity: 1.6;
}

/* ============================================================
   Hero: additional fine mesh lines layered under the orbs
   ============================================================ */

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%230D9488' stroke-width='0.75'%3E%3Ccircle cx='300' cy='300' r='240'/%3E%3Ccircle cx='300' cy='300' r='180'/%3E%3Ccircle cx='300' cy='300' r='120'/%3E%3Ccircle cx='300' cy='300' r='60'/%3E%3Cline x1='60' y1='300' x2='540' y2='300'/%3E%3Cline x1='300' y1='60' x2='300' y2='540'/%3E%3Cline x1='130' y1='130' x2='470' y2='470'/%3E%3Cline x1='470' y1='130' x2='130' y2='470'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
  background-position: center top;
  background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
  .hero-bg::after { opacity: 0.09; }
}

/* ============================================================
   Proof strip: faint diagonal hatching
   ============================================================ */

.proof-strip {
  position: relative;
  overflow: hidden;
}

.proof-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='none' stroke='%230D9488' stroke-width='0.75' d='M0,40 L40,0 M-10,10 L10,-10 M30,50 L50,30'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* ============================================================
   Pricing card: organic arc behind the price number
   ============================================================ */

.price-card::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%230D9488' stroke-opacity='0.08' stroke-width='1'%3E%3Ccircle cx='180' cy='180' r='80'/%3E%3Ccircle cx='180' cy='180' r='120'/%3E%3Ccircle cx='180' cy='180' r='160'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* ============================================================
   Steps block: vertical connector line between step numbers
   ============================================================ */

.steps {
  position: relative;
}

/* ============================================================
   Footer: thin organic line across the top
   ============================================================ */

.footer {
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-subtle) 20%,
    var(--brand-primary) 50%,
    var(--border-subtle) 80%,
    transparent 100%
  );
  opacity: 0.5;
}