/* =========================================================================
   TRUST LEAP — Onepager design system
   Premium dark/light SaaS. Green #3FB488 (trust/growth) · Coral #F07F5E (CTA).
   Type: Manrope (display+body) · Space Mono (eyebrows, data labels).
   ========================================================================= */

:root {
  /* Brand */
  --green:      #3FB488;
  --green-2:    #36c592;
  --coral:      #F07F5E;
  --coral-2:    #f7916f;

  /* Dark surfaces (default page tone — premium, cool, not pitch black) */
  --bg:         #080b10;
  --bg-2:       #0a0e14;
  --surface:    #10151d;
  --surface-2:  #0c1118;
  --line:       rgba(255,255,255,0.09);
  --line-soft:  rgba(255,255,255,0.055);
  --text:       #e9f0ee;
  --text-2:     #aebcbb;
  --muted:      #748583;

  /* Glass */
  --glass:        rgba(255,255,255,0.045);
  --glass-2:      rgba(255,255,255,0.07);
  --glass-line:   rgba(255,255,255,0.10);
  --glass-hi:     rgba(255,255,255,0.16);

  /* Accent washes */
  --green-08: rgba(63,180,136,0.08);
  --green-14: rgba(63,180,136,0.14);
  --green-22: rgba(63,180,136,0.22);
  --green-40: rgba(63,180,136,0.40);
  --coral-10: rgba(240,127,94,0.10);
  --coral-18: rgba(240,127,94,0.18);
  --coral-30: rgba(240,127,94,0.30);

  /* Gradients */
  --grad-brand: linear-gradient(115deg, var(--green) 0%, var(--coral) 100%);
  --grad-text:  linear-gradient(110deg, #eafff6 0%, var(--green) 55%, var(--coral) 120%);
  --grad-cta:   linear-gradient(120deg, var(--coral) 0%, #f2693f 100%);

  /* Glow */
  --glow-green: 0 0 60px rgba(63,180,136,0.28);
  --glow-coral: 0 0 50px rgba(240,127,94,0.32);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 24px 60px -28px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-float: 0 40px 90px -30px rgba(0,0,0,0.85);

  /* Layout */
  --maxw: 1200px;
  --pad-x: clamp(20px, 5vw, 64px);
  --sec-y: clamp(90px, 11vw, 168px);
  --sec-y-md: clamp(72px, 9vw, 120px);  /* feature / quote sections */
  --sec-y-sm: clamp(52px, 7vw, 88px);   /* compact strips & bands */

  /* Type scale */
  --t-eyebrow: 0.78rem;
  --t-h1: clamp(2.7rem, 6.2vw, 4.6rem);
  --t-h2: clamp(2rem, 4.1vw, 3.15rem);
  --t-h2-lg: clamp(2.2rem, 4.6vw, 3.5rem);  /* emphasized "moment" heads (solution intro, momentum CTA) */
  --t-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --t-lead: clamp(1.08rem, 1.5vw, 1.34rem);
  --t-body: 1.04rem;
  --t-sm: 0.92rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* "Lighter" contrast section — blue-tinted dark (NOT white; fits the dark design) */
.band--light {
  --bg: #0d1626;
  --bg-2: #0b1320;
  --surface: #142136;
  --surface-2: #101b2d;
  --line: rgba(150,185,255,0.12);
  --line-soft: rgba(150,185,255,0.07);
  --text: #eaf0fb;
  --text-2: #aeb9d0;
  --muted: #7282a0;
  --glass: rgba(140,175,255,0.06);
  --glass-2: rgba(140,175,255,0.10);
  --glass-line: rgba(150,185,255,0.14);
  --glass-hi: rgba(180,205,255,0.16);
  --shadow-card: 0 24px 60px -28px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-float: 0 40px 90px -30px rgba(0,0,0,0.78);
}
/* smooth top-fade so the transition from a #080b10 dark section into the blue-tinted .band--light isn't a hard line */
.band--light { position: relative; }
.band--light::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(180deg, #080b10 0%, #0b121e 60%, #0d1626 100%);
  pointer-events: none;
  z-index: 0;
}
/* Bottom fade — fades INTO the next dark section (#080b10). Must NOT end darker
   than the neighbour, or a too-dark band appears as a hard seam. */
.band--light::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(180deg,
    rgba(13,22,38,0)    0%,
    rgba(11,17,26,0.45) 45%,
    rgba(9,13,18,0.82)  78%,
    #080b10            100%);
  pointer-events: none;
  z-index: 0;
}
.band--light > * { position: relative; z-index: 1; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--green); color: #04130d; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ---------- Layout helpers ---------- */
.band {
  position: relative;
  background: var(--bg);
  color: var(--text);
  overflow: clip;
}
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.sec { padding-block: var(--sec-y); }

.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Space Mono', monospace;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--green);
  opacity: 0.7;
}
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::after {
  content: "";
  width: 22px; height: 1px;
  background: var(--green);
  opacity: 0.7;
}

.h2 { font-size: var(--t-h2); }
.lead {
  font-size: var(--t-lead);
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 22px;
  font-weight: 400;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn > span, .btn > svg { position: relative; z-index: 2; }
/* glass sheen + static environment-colour reflection (green top-left, coral bottom-right) */
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 20%, transparent 50%),
    radial-gradient(78% 62% at 4% 0%, rgba(63,180,136,0.30), transparent 55%),
    radial-gradient(82% 66% at 100% 104%, rgba(240,127,94,0.26), transparent 55%);
  mix-blend-mode: screen;
  transition: opacity 0.3s var(--ease);
}
.btn:hover::before { opacity: 0.85; }
.btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); position: relative; z-index: 2; }
.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(240,127,94,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -12px rgba(240,127,94,0.72), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 26px -4px rgba(63,180,136,0.4); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost {
  background: var(--glass);
  color: var(--text);
  border-color: var(--glass-line);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover { background: var(--glass-2); border-color: var(--green-40); transform: translateY(-2px); box-shadow: 0 0 24px -6px rgba(63,180,136,0.38), 0 0 30px -10px rgba(240,127,94,0.3); }
.btn--lg { padding: 18px 32px; font-size: 1.05rem; }

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--green-08);
  border: 1px solid var(--green-22);
  color: var(--green);
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-14);
}
.pill--coral { background: var(--coral-10); border-color: var(--coral-30); color: var(--coral); }
.pill--coral .dot { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-10); }

/* ---------- Glass card ---------- */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow-card);
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--glass-hi), transparent 38%);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Mono caption ---------- */
.mono {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .float, .orbit, .pulse-ring, .flow-dot { animation: none !important; }
}

/* =========================================================================
   FLOAT / AMBIENT
   ========================================================================= */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-y-sm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: float-y 7s ease-in-out infinite; }
.float--slow { animation: float-y 10s ease-in-out infinite; }
.float--sm { animation: float-y-sm 6s ease-in-out infinite; }

@keyframes pulse-soft { 0%,100% { opacity: 0.85; } 50% { opacity: 0.45; } }

/* Aurora background glows */
.aurora {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

.band > .wrap, .band > .sec { position: relative; z-index: 1; }

/* Grid texture overlay */
.grid-tex {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%);
}

/* gradient text */
.gtext {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gtext--coral {
  background: linear-gradient(110deg, var(--coral) 0%, #ffd0bd 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* H-03 audit fix: solid coral accent in hero headline (replaces gradient) */
.coral-solid { color: var(--coral); }

/* =========================================================================
   ACCESSIBILITY — keyboard focus, skip link, screen-reader helpers
   ========================================================================= */
/* Visible focus ring only for keyboard users (not mouse clicks) */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
/* CTAs get a coral ring to match their accent */
.btn--primary:focus-visible { outline-color: var(--coral); }

/* Skip-to-content link — visually hidden until focused */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  background: var(--coral); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-weight: 600; font-size: 0.92rem;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Single safe mobile-polish carry-over: prevent iOS Safari from auto-zooming
   on form input focus by ensuring input font-size is at least 16px. */
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px !important; }
}