/* ============================================================
   Maica Forms · marketing site
   Mirrors maica.com.au: white body, light-gray alternating
   bands, teal used sparingly as accent + CTA. Poppins throughout.
   Teal #196061. Voice: confident, short, human.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens (aligned to the Maica brand kit) ---------- */
:root {
  --teal:        #196061;
  --teal-deep:   #134d4e;
  --teal-soft:   #2c7c7d;
  --mid:         #7da0a0;
  --navy:        #152c36;
  --live:        #25b18a;   /* brighter green: live / active / success pops */

  --teal-tint:   #e9f1f1;   /* soft fills, icon tiles */
  --teal-line:   #cfe0e0;   /* tinted hairline */

  --bg:          #f7f9f9;   /* off-white ground */
  --band:        #eeeeee;   /* alternating gray band */
  --surface:     #ffffff;

  --ink:         #1c2b2b;   /* headings / strong text */
  --ink-soft:    #3a4a4a;   /* body copy (high contrast) */
  --ink-muted:   #5a7070;   /* small labels / captions */
  --line:        #e4ebeb;
  --line-soft:   #eef2f2;

  --on-dark:       #ffffff;
  --on-dark-soft:  #c2d6d6;
  --on-dark-muted: #8fb0b0;
  --hair-dark:     rgba(255,255,255,.14);

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
  --gutter: 28px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --close-rad: clamp(32px, 5vw, 60px);   /* soft curve where content closes into the footer */

  --ease: cubic-bezier(.22,.68,.18,1);
  --shadow-card:  0 2px 12px rgba(25,96,97,.08);
  --shadow-hover: 0 6px 24px rgba(25,96,97,.15);
  --shadow-float: 0 30px 60px -32px rgba(21,44,54,.34);

  /* z-index scale */
  --z-header: 100;
  --z-menu: 120;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--surface);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--teal-tint); color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
/* Bands melt into the white sections above and below instead of hard seams.
   A faint green-grey carries the "faded greens" without a visible edge. */
.band { background: linear-gradient(180deg, var(--surface) 0%, #edf2f1 17%, #edf2f1 83%, var(--surface) 100%); }
.tint { background: var(--bg); }

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
/* emphasis keyword inside a heading: italic + teal + a touch heavier, so the word
   we want noticed pops while the rest of the heading sits at a lighter weight */
.mark { color: var(--teal); font-style: italic; font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); text-wrap: balance; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
p { text-wrap: pretty; }

.lead { font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: var(--ink-soft); }

.sec-head { max-width: 620px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 + p { margin-top: 16px; color: var(--ink-soft); font-size: 1.08rem; }

.kicker {
  display: inline-block; font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; color: var(--teal); margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; font-weight: 500; font-size: .95rem;
  border-radius: var(--r-pill); line-height: 1; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-down:hover svg { transform: translateY(3px); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { color: var(--teal); }
.btn-invert { background: #fff; color: var(--teal); border: 1.5px solid var(--teal-line); box-shadow: var(--shadow-card); }
.btn-invert:hover { border-color: var(--teal); background: var(--teal-tint); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ============================================================
   Header
   ============================================================ */
/* On load the header is transparent so it sits seamlessly on the hero. Once the
   page scrolls, it picks up the frosted-white bar with a hairline + soft shadow. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(21,44,54,.4);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { display: flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; }
.brand-mark svg { width: 25px; height: 25px; }
.brand img { height: 21px; width: auto; }
.brand .sub {
  padding-left: 12px; border-left: 1px solid var(--line);
  font-size: .8rem; font-weight: 500; color: var(--ink-muted); letter-spacing: .01em;
}
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-size: .94rem; font-weight: 500; padding: 9px 14px; color: var(--ink-soft);
  border-radius: var(--r-pill); transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--teal); background: var(--teal-tint); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle svg { width: 26px; height: 26px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background:
    radial-gradient(560px 460px at 28% 30%, rgba(25,96,97,.12), transparent 60%),
    radial-gradient(620px 520px at 74% 62%, rgba(125,160,160,.16), transparent 62%),
    radial-gradient(420px 360px at 60% 88%, rgba(44,124,125,.10), transparent 64%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 46%, var(--surface) 100%);
  text-align: center; position: relative; overflow: hidden;
  /* +76px clears the fixed header that now overlays the hero, so the hero's own
     background sits seamlessly behind the transparent header until you scroll. */
  padding: calc(76px + clamp(48px, 7vw, 88px)) 0 clamp(60px, 8vw, 104px);
}
.hero::before {
  content: ""; position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(25,96,97,.09), transparent 64%);
}
/* soft fade-to-white band so the ambient glows dissolve into the next section
   instead of being hard-clipped by the hero's overflow at a straight line. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 800px; margin-inline: auto; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-size: .8rem; font-weight: 500; color: var(--teal-deep);
  background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  padding: 7px 15px 7px 13px; border-radius: var(--r-pill);
  box-shadow: 0 6px 20px -10px rgba(21,44,54,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(37,177,138,.18); }
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.05; letter-spacing: -.03em;
  color: var(--ink); text-wrap: balance;
}
.hero h1 .mark { color: var(--teal); }
.hero-sub { margin: 22px auto 0; max-width: 580px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 34px; }

/* ---------- Hero scene: a floating form, drifting field types, a cursor, a sync ---------- */
.hero-stage {
  position: relative; z-index: 1;
  width: 100%; max-width: 700px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  height: clamp(480px, 46vw, 520px);
}
.stage-glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 86%; height: 80%; border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 36%, rgba(25,96,97,.20), transparent 60%),
    radial-gradient(ellipse at 68% 70%, rgba(125,160,160,.22), transparent 64%);
  filter: blur(10px); z-index: 0;
}

.hform {
  position: absolute; left: 50%; top: 50%;
  width: min(338px, 80%);
  transform: translate(-50%, -50%);
  background: linear-gradient(155deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 70px -34px rgba(21,44,54,.4), 0 0 0 1px rgba(25,96,97,.05), inset 0 1px 0 rgba(255,255,255,.95);
  padding: 22px 22px 24px; z-index: 2; text-align: left;
  animation: hformFloat 6s var(--ease) infinite;
}
.hform-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.hh-mark { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
.hh-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hh-lines i { height: 8px; border-radius: var(--r-pill); background: var(--line); display: block; }
.hh-lines .l1 { width: 62%; background: #c6d4d4; }
.hh-lines .l2 { width: 40%; }
.hh-step { font-size: .64rem; font-weight: 700; letter-spacing: .03em; color: var(--teal-deep); background: var(--teal-tint); padding: 4px 9px; border-radius: var(--r-pill); flex-shrink: 0; }

.hform-line { margin-bottom: 13px; }

.hl-label { display: block; height: 7px; width: 64px; border-radius: var(--r-pill); background: var(--line); margin-bottom: 8px; }
.hl-label.s2 { width: 90px; }
.hl-label.s3 { width: 52px; }
.hl-label.s4 { width: 44px; }

.hl-input { display: flex; align-items: center; gap: 9px; height: 40px; border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-sm); background: rgba(255,255,255,.42); padding: 0 12px; min-width: 0; }
.hl-input svg { width: 16px; height: 16px; color: var(--ink-muted); flex-shrink: 0; }
.hl-input.filled { background: rgba(255,255,255,.72); }
.hl-ava { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: cover; }
/* real profile photo used across the graphics for a pop of human colour */
.gava { border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; width: 30px; height: 30px; box-shadow: 0 1px 3px rgba(21,44,54,.22); }
.gava.mini { width: 24px; height: 24px; }
.gava.sm { width: 22px; height: 22px; }
.hl-val { font-size: .82rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-val.sm { font-size: .78rem; font-weight: 500; color: var(--ink-soft); }
.hl-ph { height: 7px; width: 58%; border-radius: var(--r-pill); background: var(--line); display: block; }

/* the email row is dragged in above the date: at runtime its reveal is animated by
   script.js (WAAPI) in lockstep with the drop, growing the form by one field. The
   default state is expanded, so no-JS / reduced-motion / mobile all show a complete
   form. .predrop is used only for an instant collapsed measurement of the drop seam. */
.hl-new { max-height: 80px; overflow: hidden; }
.hform.predrop .hl-new { max-height: 0; margin-bottom: 0; opacity: 0; }

.hl-input.sf { border-color: var(--teal); background: var(--surface); box-shadow: 0 0 0 3px rgba(25,96,97,.1); }
.hl-input.sf svg { color: var(--teal); }
.hl-input.sf em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hl-opts { display: flex; gap: 7px; }
.hl-opts i {
  flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg);
  font-style: normal; font-size: .65rem; font-weight: 500; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 7px;
}
.hl-opts i.on { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; }
.hform-btn {
  margin-top: 6px; width: 100%; height: 44px; border: 0; cursor: default;
  border-radius: var(--r-sm); background: var(--teal); color: #fff;
  font-family: inherit; font-weight: 500; font-size: .9rem; letter-spacing: .01em;
  will-change: transform, box-shadow;
}

.hsync {
  position: absolute; right: -16px; bottom: -16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); color: var(--teal-deep);
  border: 1px solid var(--teal-line); border-radius: var(--r-pill);
  padding: 8px 15px 8px 8px; font-size: .8rem; font-weight: 600;
  box-shadow: var(--shadow-hover); white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.86);
  will-change: transform, opacity;
}
.hsync-tick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--live); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hsync-tick svg { width: 13px; height: 13px; }

.hcursor {
  position: absolute; right: 26px; bottom: 30px; z-index: 5;
  width: 26px; height: 26px; opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(21,44,54,.35));
  will-change: transform, opacity;
}

/* ---------- Ambient field types orbiting the hero content ---------- */
/* Constrained to a centred band so the chips frame the headline + form
   instead of stranding themselves at the edges of a wide monitor. */
.hero-fx { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(1080px, 96%); z-index: 0; pointer-events: none; }
.afield {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(150deg, rgba(255,255,255,.66), rgba(255,255,255,.42));
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 16px; padding: 7px 16px 7px 7px;
  font-size: .78rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(21,44,54,.34), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 16px rgba(255,255,255,.16);
  white-space: nowrap; will-change: transform;
}
/* rounded icon tile, the way Apple's liquid-glass chips frame the glyph */
.afield svg {
  box-sizing: content-box; width: 15px; height: 15px; padding: 6px;
  border-radius: 9px; color: var(--teal);
  background: rgba(25,96,97,.1); border: 1px solid rgba(255,255,255,.5);
}
.afield.sf svg { color: var(--teal-deep); background: rgba(25,96,97,.16); }
.af1 { top: 17%;    left: 5%;    animation: bob 7.5s  ease-in-out infinite; }
.af2 { top: 10%;    right: 5%;   animation: sway 9s   ease-in-out infinite; }
.af3 { top: 45%;    left: 2%;    animation: drift 8s  ease-in-out infinite .4s; }
.af4 { top: 40%;    right: 3%;   animation: bob 8.5s  ease-in-out infinite 1s; }
.af5 { bottom: 26%; left: 5%;    animation: sway 10s  ease-in-out infinite .3s; }
.af6 { bottom: 33%; right: 3%;   animation: drift 7.8s ease-in-out infinite .7s; }
.af7 { bottom: 9%;  left: 20%;   animation: driftX 12s ease-in-out infinite; }
.af8 { bottom: 13%; right: 19%;  animation: driftX 13s ease-in-out infinite 1.5s; }

/* the field the cursor picks up and drops into the form (driven by script.js) */
.hdrag {
  position: absolute; left: 1%; bottom: 27%; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(150deg, rgba(255,255,255,.74), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(185%);
  -webkit-backdrop-filter: blur(16px) saturate(185%);
  border-radius: 16px; padding: 7px 16px 7px 7px;
  font-size: .78rem; font-weight: 600; color: var(--teal-deep);
  box-shadow: 0 16px 32px -14px rgba(21,44,54,.4), 0 0 0 1px rgba(25,96,97,.06), inset 0 1px 0 rgba(255,255,255,.95);
  white-space: nowrap; will-change: transform, opacity;
}
.hdrag svg {
  box-sizing: content-box; width: 15px; height: 15px; padding: 6px;
  border-radius: 9px; color: var(--teal);
  background: rgba(25,96,97,.12); border: 1px solid rgba(255,255,255,.55);
}

@keyframes hformFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 7px)); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -22px); }
}
@keyframes driftX {
  0% { transform: translate(0, 0); }
  50% { transform: translate(46px, -14px); }
  100% { transform: translate(0, 0); }
}
@keyframes sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-9px, -14px) rotate(-2.5deg); }
  65% { transform: translate(8px, -20px) rotate(2deg); }
}

/* ---------- Feature panel graphics: frosted-glass scenes (match the hero) ---------- */
.gfx {
  position: relative; width: 100%; max-width: 440px;
  height: clamp(300px, 30vw, 360px);
  display: flex; align-items: center; justify-content: center;
}
.gfx-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84%; height: 76%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 38% 36%, rgba(25,96,97,.18), transparent 60%),
              radial-gradient(ellipse at 68% 70%, rgba(125,160,160,.2), transparent 64%);
  filter: blur(12px);
}

/* shared glass surfaces (same recipe as the hero scene) */
.gcard {
  position: relative; z-index: 2;
  background: linear-gradient(155deg, rgba(255,255,255,.8), rgba(255,255,255,.56));
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 56px -30px rgba(21,44,54,.4), inset 0 1px 0 rgba(255,255,255,.95);
  padding: 20px; width: min(264px, 74%);
  display: flex; flex-direction: column; gap: 13px;
  animation: gfloat 7s var(--ease) infinite;
}
.gchip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  border: 1px solid rgba(255,255,255,.66);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 14px; padding: 7px 14px 7px 7px;
  font-size: .76rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(21,44,54,.34), inset 0 1px 0 rgba(255,255,255,.9);
  white-space: nowrap;
}
.gchip svg {
  box-sizing: content-box; width: 14px; height: 14px; padding: 6px;
  border-radius: 9px; color: var(--teal);
  background: rgba(25,96,97,.1); border: 1px solid rgba(255,255,255,.5);
}
.gln { display: block; height: 8px; border-radius: var(--r-pill); background: var(--line); }
.gln.w30 { width: 30%; } .gln.w35 { width: 35%; } .gln.w40 { width: 40%; } .gln.w45 { width: 45%; }
.gln.w50 { width: 50%; } .gln.w55 { width: 55%; } .gln.w60 { width: 60%; } .gln.w70 { width: 70%; }

.gc-head { display: flex; align-items: center; gap: 11px; }
.gc-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--teal); flex-shrink: 0; }
.gc-hl { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gc-hl i { height: 8px; border-radius: var(--r-pill); background: var(--line); display: block; }
.gc-hl i:first-child { width: 60%; background: #c6d4d4; }
.gc-hl i:last-child { width: 38%; }

.gfield {
  height: 42px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.5);
  display: flex; align-items: center; padding: 0 14px;
}
.gfield.is-on {
  border-color: var(--teal); background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 3px rgba(25,96,97,.12);
  animation: gonPulse 3.2s var(--ease) infinite;
}
.gopts { display: flex; gap: 8px; }
.gopts i { flex: 1; height: 28px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.5); }
.gopts i.on { border-color: var(--teal-line); background: var(--teal-tint); }

/* build scene: floating field chips around the form card */
.gfx-build .gchip-tr { top: 6%; right: 1%; animation: gbob 6.5s ease-in-out infinite; }
.gfx-build .gchip-bl { bottom: 8%; left: 0; animation: gsway 8s ease-in-out infinite .6s; }

/* connect scene: a form card wired to a Salesforce card with a travelling pulse */
.gcard--mini { width: min(150px, 40%); padding: 16px; gap: 10px; }
.gfx-connect .gm-left { animation: gfloat 7s var(--ease) infinite; }
.gfx-connect .gm-right { animation: gfloat 7s var(--ease) infinite 1.4s; }
.gcard--mini .gc-head { gap: 9px; }
.gcard--mini .gc-mark { width: 24px; height: 24px; border-radius: 7px; }
.gcard--sf .gsf { width: 34px; height: 34px; border-radius: 10px; background: rgba(25,96,97,.12); border: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; }
.gcard--sf .gsf svg { width: 19px; height: 19px; color: var(--teal); }
.gwire {
  position: relative; z-index: 1; flex-shrink: 0; align-self: center;
  width: clamp(38px, 9%, 68px); height: 2px; margin: 0 -6px;
  background: linear-gradient(90deg, var(--teal-line), var(--teal), var(--teal-line));
}
.gpulse {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(25,96,97,.18);
  animation: gtravel 2.6s var(--ease) infinite;
}

/* Salesforce section: a form on the left whose data flows across and populates the record */
.gfx-connect { max-width: 520px; height: clamp(330px, 33vw, 420px); }
.gfx-connect .gcard--mini { width: min(196px, 46%); padding: 18px 16px; gap: 11px; }
.gfx-connect .gwire { width: clamp(50px, 12%, 92px); height: 3px; }
.gfx-connect .gpulse { animation: gFlowDot 3.4s var(--ease) infinite; }
.gsf-head { display: flex; align-items: center; gap: 9px; }
.gsf-rows { display: flex; flex-direction: column; gap: 11px; }
.gsfrow { display: flex; align-items: center; gap: 8px; }
.gsfl { width: 22px; height: 7px; border-radius: var(--r-pill); background: rgba(25,96,97,.22); flex-shrink: 0; }
.gsfv { height: 8px; border-radius: var(--r-pill); background: var(--teal); transform: scaleX(0); transform-origin: left; animation: gFlowFill 3.4s var(--ease) infinite; }
.gsf-rows .gsfrow:nth-child(1) .gsfv { width: 66%; }
.gsf-rows .gsfrow:nth-child(2) .gsfv { width: 48%; animation-delay: .14s; }
.gsf-rows .gsfrow:nth-child(3) .gsfv { width: 58%; animation-delay: .28s; }
@keyframes gFlowDot {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  38%  { left: 100%; opacity: 1; }
  46%, 100% { left: 100%; opacity: 0; }
}
@keyframes gFlowFill {
  0%, 40%   { transform: scaleX(0); }
  56%, 92%  { transform: scaleX(1); }
  99%, 100% { transform: scaleX(0); }
}

/* share scene: a link card with toggles and floating rule chips */
.gcard--link { width: min(256px, 72%); gap: 14px; }
.glink { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid var(--teal-line); background: var(--teal-tint); }
.glink svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; }
.glink .gln { background: rgba(19,77,78,.32); }
.gtog-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gtog { width: 40px; height: 23px; border-radius: var(--r-pill); background: #cdd9d9; position: relative; flex-shrink: 0; }
.gtog i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gtog.on { background: var(--teal); }
.gtog.on i { left: 20px; }
.gtog--anim { animation: gtogTrack 3.6s var(--ease) infinite; }
.gtog--anim i { animation: gtogKnob 3.6s var(--ease) infinite; }
.gfx-share .gchip-tl { top: 4%; left: 0; animation: gbob 6.8s ease-in-out infinite; }
.gfx-share .gchip-tr { top: 14%; right: 0; animation: gsway 7.5s ease-in-out infinite .5s; }
.gfx-share .gchip-br { bottom: 8%; right: 3%; animation: gbob 8s ease-in-out infinite 1s; }

/* style scene: a branded form preview with colour swatches and an accent button */
.gfx-style .gcard { gap: 14px; }
/* logo + submit stay neutral, matching the plain field below the swatches */
.gfx-style .gc-mark { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); }
.gsw-row { position: relative; display: flex; gap: 9px; }
.gsw { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.gsw-ring { position: absolute; left: -3px; top: -3px; width: 36px; height: 36px; border-radius: 11px; border: 2px solid var(--teal); pointer-events: none; animation: gRingMove 4.8s var(--ease) infinite, gColorSwap 4.8s var(--ease) infinite; }
.gbtn-accent { height: 34px; width: 108px; border-radius: var(--r-pill); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 6px 14px -8px rgba(21,44,54,.22); }
.gstyle-cursor { position: absolute; left: 10px; top: 15px; width: 18px; height: 18px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(21,44,54,.35)); animation: gCurMove 4.8s var(--ease) infinite; z-index: 4; }
/* the chosen swatch colour flows into the floating pill icons */
.gfx-style .gchip svg { animation: gPillSwap 4.8s var(--ease) infinite; }
.gfx-style .gchip-tl { top: 5%; left: 0; animation: gsway 7.2s ease-in-out infinite .2s; }
.gfx-style .gchip-tr { top: 6%; right: 0; animation: gbob 6.6s ease-in-out infinite; }
.gfx-style .gchip-bl { bottom: 9%; left: 0; animation: gsway 8s ease-in-out infinite .5s; }
.gfx-style .gchip-br { bottom: 6%; right: 0; animation: gbob 7.4s ease-in-out infinite .8s; }

/* cursor clicks between the teal swatch and the light-green swatch; the accent swaps to match */
@keyframes gColorSwap {
  0%, 44%   { border-color: var(--teal); }
  48%, 90%  { border-color: var(--live); }
  94%, 100% { border-color: var(--teal); }
}
@keyframes gPillSwap {
  0%, 44%   { color: var(--teal); background: rgba(25,96,97,.1); }
  48%, 90%  { color: var(--live); background: rgba(37,177,138,.16); }
  94%, 100% { color: var(--teal); background: rgba(25,96,97,.1); }
}
@keyframes gRingMove {
  0%, 40%   { transform: translateX(0); }
  48%, 88%  { transform: translateX(117px); }
  96%, 100% { transform: translateX(0); }
}
@keyframes gCurMove {
  0%, 38%   { transform: translate(0, 0) scale(1); }
  45%       { transform: translate(117px, 0) scale(.82); }
  50%, 86%  { transform: translate(117px, 0) scale(1); }
  93%       { transform: translate(0, 0) scale(.82); }
  100%      { transform: translate(0, 0) scale(1); }
}

@keyframes gfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes gbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes gsway { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0, -11px) rotate(-2.5deg); } }
@keyframes gonPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(25,96,97,.3); } 50% { box-shadow: 0 0 0 6px rgba(25,96,97,0); } }
@keyframes gtravel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes gtogTrack { 0%, 32% { background: #cdd9d9; } 48%, 100% { background: var(--teal); } }
@keyframes gtogKnob { 0%, 32% { left: 3px; } 48%, 100% { left: 20px; } }

/* ============================================================
   Value triad (borderless, mirrors maica's value row)
   ============================================================ */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.value { }
.value .vico { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.value .vico svg { width: 25px; height: 25px; }
.value h3 { margin-bottom: 8px; }
.value p { font-size: .98rem; color: var(--ink-soft); }

/* ============================================================
   Features as tabs: three selectable cards + one swapping panel
   ============================================================ */
.ftabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 18px); margin-top: clamp(40px, 5vw, 56px); margin-bottom: clamp(20px, 2.6vw, 30px); }
.ftab {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 7px;
  padding: 22px 22px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.ftab:hover { transform: translateY(-3px); border-color: var(--teal-line); box-shadow: var(--shadow-card); }
.ftab-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); transition: color .3s var(--ease); }
.ftab-title { font-size: 1.16rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ftab-desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.ftab.is-active { background: var(--teal-tint); border-color: var(--teal-line); box-shadow: var(--shadow-card); }
.ftab.is-active .ftab-kicker { color: var(--teal); }

.fpanels {
  background: linear-gradient(160deg, var(--surface), var(--bg));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: clamp(26px, 4vw, 54px);
}
/* stretch + a shared min-height keep the heading at the SAME top position in every
   panel, and the copy flows from the top so switching tabs never shifts the title. */
.fpanel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: stretch; min-height: clamp(360px, 33vw, 420px); }
.js .fpanel { display: none; }
.js .fpanel.is-active { display: grid; animation: fpanelIn .45s var(--ease) both; }
.fpanel:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: var(--r-md); }
@keyframes fpanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.feature-copy { min-width: 0; max-width: 460px; }
.feature-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.feature-copy .lead { margin-top: 16px; }
.feature-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 13px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--ink-soft); }
.feature-list .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.feature-list .ck svg { width: 13px; height: 13px; }
.feature-list b { color: var(--ink); font-weight: 600; }
.feature-media { min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }

/* standalone Salesforce deep-dive: same two-column rhythm as a feature panel, without the tab card */
.sf-deepdive { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }

/* ============================================================
   How it works: a vertical accordion stepper + swapping graphic
   ============================================================ */
.stepper { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.stepper-list { display: flex; flex-direction: column; }

/* a vertical staged stepper: numbered nodes connected by a rail, clickable */
.stp { position: relative; padding: 4px 0 24px; cursor: pointer; }
.stp:last-child { padding-bottom: 4px; }
.stp::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.stp:first-child::before { top: 23px; }
.stp:last-child::before { bottom: auto; height: 23px; }
.stp-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.stp-n {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700; color: var(--ink-muted);
  background: var(--surface); border: 2px solid var(--line);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.stp:hover .stp-n { border-color: var(--teal-line); }
.stp.is-open .stp-n { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 0 0 5px rgba(25,96,97,.12); }
.stp-title { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; color: var(--ink-muted); letter-spacing: -.01em; transition: color .3s var(--ease); }
.stp.is-open .stp-title { color: var(--ink); }
.stp-body { overflow: hidden; }
.stp-body-in { padding: 6px 0 0 54px; color: var(--ink-muted); font-size: .96rem; max-width: 42ch; transition: color .3s var(--ease); }
.stp.is-open .stp-body-in { color: var(--ink-soft); }

.stepper-media { position: relative; min-height: clamp(320px, 32vw, 400px); display: flex; align-items: center; justify-content: center; }
.step-gfx { position: relative; width: 100%; }
.js .step-gfx { display: none; }
.js .step-gfx.is-active { display: flex; align-items: center; justify-content: center; animation: fpanelIn .45s var(--ease) both; }
/* this section sits on white, so the cards are firmed up: a glow behind, a solid
   fill, a tinted border and a soft shadow so they read with real depth, and they
   fill the column width. */
.step-gfx .gfx-glow { width: 98%; height: 92%; filter: blur(18px);
  background: radial-gradient(ellipse at 36% 36%, rgba(25,96,97,.16), transparent 62%),
              radial-gradient(ellipse at 68% 72%, rgba(125,160,160,.22), transparent 66%); }
.step-gfx .gcard {
  width: 100%; padding: 22px; gap: 0;
  background: linear-gradient(155deg, #ffffff, #f4f8f8);
  border: 1px solid var(--teal-line);
  box-shadow: 0 26px 50px -26px rgba(21,44,54,.32), inset 0 1px 0 #fff;
}
.step-gfx .gln { background: var(--line); }

/* ---- build: a field-type picker beside a live question preview ---- */
.sg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sg-pick { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sg-pick-search { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); margin-bottom: 5px; }
.sg-pick-search svg { width: 14px; height: 14px; color: var(--ink-muted); flex-shrink: 0; }
.sg-pick-cat { font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); padding: 4px 4px 3px; }
.sg-pick-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm); font-size: .78rem; font-weight: 500; color: var(--ink-soft); }
.sg-pick-row span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ico { width: 24px; height: 24px; border-radius: 6px; background: rgba(25,96,97,.1); border: 1px solid var(--teal-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sg-ico svg { width: 13px; height: 13px; color: var(--teal); }
.sg-pick-row.is-on { background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; animation: gonRow 3.4s var(--ease) infinite; }
.sg-check { width: 14px; height: 14px; color: var(--teal); flex-shrink: 0; }
.sg-prev { border-left: 1px solid var(--line-soft); padding-left: 18px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sg-prev-q { font-size: .92rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: 2px; }
.sg-prev-opt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: .72rem; white-space: nowrap; color: var(--ink-soft); }
.sg-prev-opt.is-on { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; }
.sg-key { width: 20px; height: 20px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: var(--ink-muted); flex-shrink: 0; }
.sg-prev-opt.is-on .sg-key { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---- publish: a live form with a share link and channels ---- */
.sg-pubhead { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.sg-pubt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-pubt .gln:first-child { background: #c6d4d4; }
.gbadge { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: .64rem; font-weight: 700; letter-spacing: .04em; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); padding: 5px 10px; border-radius: var(--r-pill); }
.gbadge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: gonPulse 2.4s var(--ease) infinite; }
.glink { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--teal-line); background: var(--teal-tint); margin-bottom: 15px; }
.glink svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; }
.glink-url { flex: 1; min-width: 0; font-size: .78rem; font-weight: 500; color: var(--teal-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcopy { flex-shrink: 0; font-size: .68rem; font-weight: 600; color: var(--teal-deep); background: var(--surface); border: 1px solid var(--teal-line); padding: 5px 11px; border-radius: var(--r-pill); }
.sg-chans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sg-chan { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 15px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.sg-chan-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(25,96,97,.1); border: 1px solid var(--teal-line); display: flex; align-items: center; justify-content: center; }
.sg-chan-ico svg { width: 16px; height: 16px; color: var(--teal); }

/* ---- sync: a submission mapped into a Salesforce record ---- */
.sg-sync2 { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 8px; align-items: center; }
.sg-sub, .sg-rec { display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); padding: 14px; }
.sg-sub-head { display: flex; align-items: center; gap: 9px; }
.gc-mark.sm { width: 22px; height: 22px; border-radius: 6px; }
.sg-line { display: flex; flex-direction: column; gap: 3px; }
.sg-line-l { font-size: .54rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.sg-line-v { font-size: .75rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-arrow { display: flex; justify-content: center; color: var(--teal); }
.sg-arrow svg { width: 18px; height: 18px; }
.sg-rec { border-color: var(--teal-line); background: var(--teal-tint); }
.sg-rec-head { display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; color: var(--teal-deep); }
.sg-rec-head svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; }
.sg-rec-row { display: flex; align-items: center; gap: 8px; }
.sg-rec-row .gln { background: rgba(19,77,78,.28); }
.sg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-soft); flex-shrink: 0; }
.gsync {
  position: absolute; right: -10px; bottom: -16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); color: var(--teal-deep);
  border: 1px solid var(--teal-line); border-radius: var(--r-pill);
  padding: 8px 15px 8px 8px; font-size: .8rem; font-weight: 600;
  box-shadow: var(--shadow-hover); white-space: nowrap;
  animation: gsyncPop 3.4s var(--ease) infinite;
}
.gsync-tick { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--live); color: #fff; display: flex; align-items: center; justify-content: center; }
.gsync-tick svg { width: 13px; height: 13px; }

@keyframes gonRow { 0%, 100% { box-shadow: 0 0 0 0 rgba(25,96,97,.2); } 50% { box-shadow: 0 0 0 5px rgba(25,96,97,0); } }
@keyframes gsyncPop { 0%, 12% { opacity: 0; transform: translateY(8px) scale(.86); } 22%, 88% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-4px) scale(.97); } }

/* ============================================================
   Workflows: three cards, each a branded sample form + a photo,
   with a floating field-type pill. Each card carries its own --acc.
   ============================================================ */
.wf-grid { margin-top: clamp(48px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px); }
.wf { --acc: var(--teal); }
.wf-graphic { position: relative; margin-bottom: 26px; }
/* floating chat bubble overlapping the top of the card (conversational form) */
.wf-bubble {
  position: absolute; top: -22px; left: -6px; z-index: 4; min-width: 62%; max-width: 82%;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: var(--r-md); box-shadow: 0 18px 36px -16px rgba(21,44,54,.4), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 13px 15px;
}
.wf-bubble-line { font-size: .95rem; font-weight: 600; color: var(--ink); }
.wf-bubble-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 500; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap; }
.wf-bubble-chip svg { width: 12px; height: 12px; opacity: .8; flex-shrink: 0; }
.wf-bubble-stars { display: inline-flex; gap: 4px; align-self: flex-start; }
.wf-bubble-stars svg { width: 19px; height: 19px; fill: var(--teal-line); }
.wf-bubble-stars svg.on { fill: var(--teal); }
.wf-card {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; height: clamp(280px, 23vw, 320px);
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-card); background: #fff;
}
.wf-panel { position: relative; background: var(--acc); color: #fff; padding: 26px 22px 24px; display: flex; flex-direction: column; min-width: 0; }
.wf-brand { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.wf-conv { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.wf-q { font-size: 1.12rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.wf-answer { width: 100%; font-size: .82rem; color: rgba(255,255,255,.66); padding-bottom: 8px; border-bottom: 1.5px solid rgba(255,255,255,.4); }
.wf-date { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .7rem; letter-spacing: .015em; color: rgba(255,255,255,.82); background: rgba(255,255,255,.16); border-radius: var(--r-sm); padding: 9px 13px; }
.wf-date svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .85; }
.wf-switch { display: inline-flex; align-items: center; gap: 11px; font-size: .84rem; font-weight: 600; color: #fff; }
.wf-switch-track { position: relative; width: 46px; height: 26px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); flex-shrink: 0; }
.wf-switch-track i { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); }
.wf-photo { min-width: 0; }
.wf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-nav { position: absolute; bottom: 14px; right: 14px; z-index: 2; display: flex; gap: 6px; }
.wf-nav i { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.88); box-shadow: 0 2px 6px rgba(21,44,54,.22); display: flex; align-items: center; justify-content: center; }
.wf-nav i svg { width: 15px; height: 15px; color: var(--ink); }
/* nav variations per card: two arrows, and one round arrow */
.wf-nav--go i.wf-go { width: 32px; height: 32px; border-radius: 50%; }
.wf-nav--go i.wf-go svg { width: 16px; height: 16px; }
.wf h3 { font-size: 1.22rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.wf > p { font-size: .96rem; color: var(--ink-soft); max-width: 38ch; }
.wf-cta { text-align: center; margin-top: clamp(40px, 5vw, 58px); }

/* ============================================================
   Powered by Maica: a quiet energy line runs from the Maica
   cloud into the Forms bulb and lights it. The scene is a
   fixed-aspect 560x420 canvas; everything inside is positioned
   in % of that canvas so the line (an SVG drawn in the same
   560x420 space) always meets the cloud and the glass.
   ============================================================ */
.pwr-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.pwr-content { max-width: 480px; }
.pwr-content p { margin: 18px 0 30px; color: var(--ink-soft); font-size: 1.04rem; }
.pwr-media { display: flex; justify-content: center; }
.pwr-scene { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; }
/* drifting glass clouds in the sky behind the scene */
.pwr-cloud { position: absolute; z-index: 0; color: rgba(125,160,160,.16); pointer-events: none; }
.pwr-cloud svg { width: 100%; height: 100%; display: block; }
.pwr-cloud-a { width: 13%; aspect-ratio: 1; top: 10%; left: 8%; animation: pwrDrift 17s var(--ease) infinite; }
.pwr-cloud-b { width: 9%; aspect-ratio: 1; top: 24%; left: 47%; color: rgba(125,160,160,.13); animation: pwrDrift 23s var(--ease) infinite reverse; }
.pwr-cloud-c { width: 15%; aspect-ratio: 1; top: 74%; left: 14%; color: rgba(125,160,160,.1); animation: pwrDrift 29s var(--ease) infinite 2s; }
.pwr-cloud-d { width: 12%; aspect-ratio: 1; top: 5%; left: 79%; color: rgba(125,160,160,.12); animation: pwrDrift 20s var(--ease) infinite 1s; }
@keyframes pwrDrift { 0%, 100% { transform: translateX(-15px); } 50% { transform: translateX(15px); } }
/* soft ambient glow behind the Forms bulb, swelling as energy lands */
.pwr-glow {
  position: absolute; left: 75.9%; top: 39.3%; transform: translate(-50%, -50%);
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(37,177,138,.22), rgba(25,96,97,.1) 50%, transparent 72%);
  filter: blur(12px); animation: pwrGlowPulse 2.6s var(--ease) infinite;
}
/* cloud, line and bulb float together so the line never detaches */
.pwr-rig { position: absolute; inset: 0; animation: gfloat 8s var(--ease) infinite; }
/* energy line drawn in the scene's own 560x420 coordinate space; its end
   slips under the frosted glass, so the spark dissolves into the bulb */
.pwr-cable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.pwr-spark { fill: var(--live); filter: drop-shadow(0 0 5px rgba(37,177,138,.7)); animation: pwrSparkFade 2.6s linear infinite; }
/* source: the Maica cloud, same soft treatment as the sky clouds; the logo
   sits on the exact centre of the drawn cloud shape (the shape doesn't fill
   its square viewBox, so this is not the box centre) */
.pwr-cloudcard { position: absolute; z-index: 2; left: 9.1%; top: 35.2%; width: 34%; }
.pwr-cloud-shape { width: 100%; height: auto; display: block; fill: rgba(125,160,160,.18); }
/* logo bottom sits level with the cable's contact point on the cloud (y=271
   in the 560x420 scene; the card starts at y=148 and is 190 tall) */
.pwr-logo { position: absolute; left: 49.5%; top: 56.8%; transform: translate(-50%, -50%); width: 56%; height: auto; }
/* target: the Forms bulb, two shapes only: a liquid-glass globe + frosted stem */
.pwr-bulb { position: absolute; z-index: 2; left: 60.9%; top: 19.3%; width: 30%; height: 47%; }
.pwr-bulb-glass {
  position: absolute; z-index: 1; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), rgba(255,255,255,.5) 58%, rgba(255,255,255,.34));
  border: 1px solid rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 28px 50px -26px rgba(21,44,54,.4), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -16px 28px rgba(125,160,160,.16);
  display: flex; align-items: center; justify-content: center;
}
/* the globe's rim catches the light when the spark lands */
.pwr-ring {
  position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(37,177,138,.55);
  box-shadow: 0 0 18px rgba(37,177,138,.35), inset 0 0 14px rgba(37,177,138,.18);
  opacity: 0; animation: pwrRing 2.6s var(--ease) infinite;
}
.pwr-bulb-ico { position: relative; z-index: 2; width: 31%; color: var(--teal); display: flex; animation: pwrIco 2.6s var(--ease) infinite; }
.pwr-bulb-ico svg { width: 100%; height: auto; }
/* slim frosted stem: just enough to read as a bulb */
.pwr-stem {
  position: absolute; z-index: 0; left: 50%; top: 81%; transform: translateX(-50%);
  width: 27%; height: 17%; border-radius: 0 0 12px 12px;
  background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  border: 1px solid rgba(231,240,240,.95); box-shadow: 0 10px 16px -8px rgba(21,44,54,.32);
}
.pwr-stem::before, .pwr-stem::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1.5px; border-radius: 1px; background: var(--teal-line); }
.pwr-stem::before { top: 52%; }
.pwr-stem::after { top: 74%; }
.pwr-bulb-glow { position: absolute; left: 50%; top: 42.6%; transform: translate(-50%, -50%); width: 140%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 50%, rgba(37,177,138,.5), rgba(25,96,97,.18) 52%, transparent 72%); opacity: .3; animation: pwrTargetGlow 2.6s var(--ease) infinite; }
/* halo ripples that breathe outward at the moment the spark is absorbed */
.pwr-ripple {
  position: absolute; z-index: 0; left: 50%; top: 42.6%; transform: translate(-50%, -50%) scale(.95);
  width: 110%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(37,177,138,.45); opacity: 0;
}
.pwr-ripple-1 { animation: pwrRipple1 2.6s var(--ease) infinite; }
.pwr-ripple-2 { animation: pwrRipple2 2.6s var(--ease) infinite; }

@keyframes pwrSparkFade { 0% { opacity: 0; } 6% { opacity: 1; } 64% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes pwrTargetGlow { 0%, 72% { opacity: .28; } 82% { opacity: .8; } 100% { opacity: .4; } }
@keyframes pwrGlowPulse { 0%, 72% { opacity: .28; } 82% { opacity: .62; } 100% { opacity: .4; } }
@keyframes pwrRing { 0%, 72% { opacity: 0; } 80% { opacity: .9; } 100% { opacity: .25; } }
@keyframes pwrIco { 0%, 72% { filter: none; } 82% { filter: drop-shadow(0 0 7px rgba(37,177,138,.55)); } 100% { filter: drop-shadow(0 0 3px rgba(37,177,138,.2)); } }
@keyframes pwrRipple1 {
  0%, 74% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
  82% { opacity: .7; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}
@keyframes pwrRipple2 {
  0%, 80% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
  88% { opacity: .45; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
  .pwr-cloud, .pwr-rig, .pwr-spark, .pwr-bulb-glow, .pwr-glow, .pwr-ring, .pwr-ripple, .pwr-bulb-ico { animation: none; }
  /* hold the lit state: glow on, rim softly lit, spark and ripples hidden */
  .pwr-bulb-glow { opacity: .7; }
  .pwr-glow { opacity: .6; }
  .pwr-ring { opacity: .5; }
  .pwr-spark, .pwr-ripple { opacity: 0; }
}

/* ============================================================
   Security (single panel, distinct from card grids)
   ============================================================ */
.sec-cards { margin-top: clamp(38px, 4.5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.sec-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 13px;
}
.sec-card .sico { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.sec-card .sico svg { width: 21px; height: 21px; }
.sec-card h4 { font-size: .92rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; min-height: 2.6em; }
.sec-card p { font-size: .9rem; color: var(--ink-soft); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { margin-top: clamp(36px, 5vw, 52px); max-width: 820px; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 26px 4px; text-align: left; }
.faq-q .qt { font-weight: 600; font-size: clamp(1.06rem, 1.7vw, 1.22rem); color: var(--ink); letter-spacing: -.01em; transition: color .25s var(--ease); }
.faq-item:hover .faq-q .qt, .faq-item.open .faq-q .qt { color: var(--teal); }
.faq-q .ic { flex-shrink: 0; width: 26px; height: 26px; color: var(--teal); transition: transform .35s var(--ease); }
.faq-q .ic svg { width: 26px; height: 26px; }
.faq-item.open .faq-q .ic { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-in { padding: 0 4px 28px; color: var(--ink-soft); font-size: 1rem; max-width: 680px; }

/* ============================================================
   CTA band (teal)
   ============================================================ */
/* the closing CTA sits on light and rounds off at the bottom; the dark footer is
   pulled up behind it so the curve reveals the footer and the site closes softly */
.cta {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  text-align: center; position: relative; z-index: 2;
  padding: clamp(72px, 9vw, 120px) 0 clamp(104px, 12vw, 156px);
  border-bottom-left-radius: var(--close-rad);
  border-bottom-right-radius: var(--close-rad);
}
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; margin-inline: auto; }
.cta p { margin: 20px auto 0; max-width: 520px; color: var(--ink-soft); font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 36px; }

/* ============================================================
   Footer
   ============================================================ */
.foot {
  background: var(--teal); color: rgba(255,255,255,.85);
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--close-rad));
  padding: calc(clamp(56px, 7vw, 78px) + var(--close-rad)) 0 34px;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(32px, 4vw, 52px); }
/* logo replicates the header lockup exactly, in white */
.foot-logo { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.foot-logo .brand-mark { color: #fff; }
.foot-logo .brand-mark svg { width: 25px; height: 25px; }
.foot-logo img { height: 21px; width: auto; filter: brightness(0) invert(1); }
.foot-logo .sub { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.34); font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.82); letter-spacing: .01em; }
.foot-brand p { font-size: .92rem; max-width: 300px; color: rgba(255,255,255,.82); }
.foot-col h5 { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 15px; }
.foot-col a { display: block; padding: 6px 0; font-size: .94rem; color: rgba(255,255,255,.85); transition: color .2s var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-bottom { margin-top: clamp(44px, 5vw, 56px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; color: rgba(255,255,255,.7); }

/* ============================================================
   Hero entrance + reveal on scroll
   ============================================================ */
.rise { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.rise.d1 { animation-delay: .06s; }
.rise.d2 { animation-delay: .16s; }
.rise.d3 { animation-delay: .28s; }
.rise.d4 { animation-delay: .4s; }
.rise.d5 { animation-delay: .54s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* reveal enhances an already-visible default */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .triad { grid-template-columns: 1fr; gap: 32px; max-width: 460px; }
  .ftabs { grid-template-columns: 1fr; }
  .fpanel { grid-template-columns: 1fr; gap: 36px; }
  .sf-deepdive { grid-template-columns: 1fr; gap: 36px; }
  .feature-copy { max-width: none; order: 1; }
  .feature-media { order: 2 !important; }
  .feature-copy .feature-list { max-width: 520px; }
  .stepper { grid-template-columns: 1fr; gap: 28px; }
  .wf-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pwr-split { grid-template-columns: 1fr; gap: 36px; }
  .pwr-content { max-width: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-right .btn-primary, .nav-right .btn-invert { display: none; }
  .nav-toggle { display: flex; }
  .site-header.open .nav-links {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 18px;
    z-index: var(--z-menu); box-shadow: var(--shadow-hover);
  }
  .site-header.open .nav-links a { padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .hero-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .foot-grid { grid-template-columns: 1fr; }
}
/* Ambient chips live in a full-bleed layer behind the centred text column.
   As the viewport narrows, thin them from the inside out so none collide with
   the headline; phones drop them entirely, leaving the form + cursor + sync. */
@media (max-width: 1100px) {
  .af3, .af4, .af7, .af8 { display: none; }
}
@media (max-width: 860px) {
  .af1, .af2 { display: none; }
}
/* Phones: the stage has no room for chips beside a centred form, so simplify
   to the floating form + clicking cursor + sync badge (still the full story). */
@media (max-width: 640px) {
  .hero-stage { height: clamp(470px, 124vw, 510px); }
  .hform { width: min(304px, 90%); padding: 20px 20px 22px; }
  .afield, .hdrag { display: none; }
  .hsync { right: -8px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  /* keep the hero scene legible without motion: form steady, sync confirmed, no cursor/drag */
  .hform { transform: translate(-50%, -50%) !important; }
  .hsync { opacity: 1 !important; transform: none !important; }
  .hcursor, .hdrag { opacity: 0 !important; }
}