/* ═══════════════════════════════════════════════════
   BASE — v6 Premium (all 12 steps applied)
   ═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* STEP 2: Layered background depth */
body{
  background:#FAFAF9;
  background-image:
    radial-gradient(ellipse at 20% 30%,rgba(99,102,241,0.05),transparent 60%),
    radial-gradient(ellipse at 80% 70%,rgba(244,114,182,0.04),transparent 60%);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--text-body-size);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* Noise grain */
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;
}
::selection{background:rgba(251,94,71,0.12);color:var(--text-heading)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
img{max-width:100%;display:block;transition:transform .6s var(--ease-out-expo)}
img:hover{transform:scale(1.02)}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.section{padding:var(--section-pad) 0}

/* STEP 1: Typography — Syne 800 for display */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:700;letter-spacing:-0.03em}
h1{font-size:var(--text-hero);line-height:1.08;font-weight:800}
h2{font-size:var(--text-h2);line-height:1.15;font-weight:700}
h3{font-size:var(--text-h3);line-height:1.3;font-weight:700}

.section-header{text-align:center;margin-bottom:64px}

/* Pill badge */
.pill{display:inline-flex;align-items:center;border-radius:var(--radius-pill);border:1px solid var(--border);overflow:hidden;margin-bottom:20px;background:#fff}
.pill-tag{background:var(--coral);color:#fff;padding:5px 14px;font-size:var(--text-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-display)}
.pill-text{padding:5px 16px;font-size:var(--text-small);color:var(--text-body);font-weight:500}

/* STEP 5: Scroll reveal — visible by default, JS enhances */
.reveal{opacity:1;transform:none}
body.reveal-ready .reveal{opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
body.reveal-ready .reveal.visible{opacity:1;transform:translateY(0)}
body.reveal-ready .reveal.from-left{transform:translateX(-40px)}
body.reveal-ready .reveal.from-left.visible{transform:translateX(0)}
body.reveal-ready .reveal.from-right{transform:translateX(40px)}
body.reveal-ready .reveal.from-right.visible{transform:translateX(0)}
body.reveal-ready .reveal.scale{transform:scale(0.92)}
body.reveal-ready .reveal.scale.visible{transform:scale(1)}
/* Stagger */
.stagger>.reveal:nth-child(1){transition-delay:0s}
.stagger>.reveal:nth-child(2){transition-delay:.08s}
.stagger>.reveal:nth-child(3){transition-delay:.16s}
.stagger>.reveal:nth-child(4){transition-delay:.24s}
.stagger>.reveal:nth-child(5){transition-delay:.32s}
.stagger>.reveal:nth-child(6){transition-delay:.40s}

/* STEP 8: Gradient text */
.gradient-text{
  background:linear-gradient(135deg,#FB5E47 0%,#c44dff 50%,#6366F1 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* Gradient text in dark sections — brighter */
.cta-dark .gradient-text{
  background:linear-gradient(135deg,#FFB088 0%,#FF7B5C 40%,#FB5E47 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}