/* ------------------------------------------------------------------ fresh
   The front page's look: emerald on a deep blue-black, a faint grid, slow
   colour blobs, rings and floating particles behind the hero, a spinning
   light around the terminal shot, a logo ribbon, sections that rise in as
   they scroll into view, cards that lift and light their edge.
   The motion runs regardless of the system's "reduce motion": the owner
   asked for it on purpose; only the scroll reveal is skipped there. */
:root:not([data-theme="light"]){
  --em:#10b981; --em-2:#34d399; --em-3:#059669;
  --up:#10b981;
}
:root:not([data-theme="light"]) body{
  background-color:#0b0f14;
  background-image:
    linear-gradient(rgba(16,185,129,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,185,129,.03) 1px,transparent 1px);
  background-size:56px 56px;
}
h1,h2,.sec-h,.big-num,.count b{font-family:Inter,system-ui,sans-serif;letter-spacing:-.02em}

/* hero background ------------------------------------------------------ */
/* Everything behind the hero fades out towards its edges, so a narrow
   window never shows a hard line where the hero box ends. */
.hero-glow,.fr-particles,.fr-rings{
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%,#000 45%,transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 40%,#000 45%,transparent 100%);
}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-glow i{position:absolute;border-radius:50%;animation:fr-blob 18s ease-in-out infinite;will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.hero-glow i:nth-child(1){width:46%;aspect-ratio:1;left:4%;top:0;background:#10b981 !important;opacity:.2 !important}
.hero-glow i:nth-child(2){width:38%;aspect-ratio:1;right:4%;top:14%;background:#0ea5e9 !important;opacity:.14 !important;animation-delay:-6s}
.hero-glow i:nth-child(3){width:34%;aspect-ratio:1;left:34%;top:44%;background:#14b8a6 !important;opacity:.14 !important;animation-delay:-12s}
@keyframes fr-blob{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(40px,-50px) scale(1.1)}50%{transform:translate(-20px,30px) scale(.95)}75%{transform:translate(30px,40px) scale(1.05)}}

/* Rings turning slowly around the headline, one dot orbiting. */
.fr-rings{position:absolute;left:62%;top:300px;width:0;height:0;pointer-events:none;z-index:0}
.fr-rings i{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(16,185,129,.1);translate:-50% -50%}
.fr-rings i:nth-child(1){width:300px;height:300px;animation:fr-spin 30s linear infinite;border-style:dashed;border-color:rgba(16,185,129,.16)}
.fr-rings i:nth-child(2){width:520px;height:520px;animation:fr-spin 45s linear infinite reverse}
.fr-rings i:nth-child(3){width:760px;height:760px;border-color:rgba(16,185,129,.06);animation:fr-spin 60s linear infinite}
.fr-rings b{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px;border-radius:50%;background:#34d399;box-shadow:0 0 16px #10b981;animation:fr-orbit 16s linear infinite}
.fr-rings b+b{width:7px;height:7px;margin:-3.5px;background:#2dd4bf;animation:fr-orbit2 24s linear infinite}
@keyframes fr-spin{to{rotate:360deg}}
@keyframes fr-orbit{from{transform:rotate(0) translateX(260px) rotate(0)}to{transform:rotate(360deg) translateX(260px) rotate(-360deg)}}
@keyframes fr-orbit2{from{transform:rotate(180deg) translateX(150px)}to{transform:rotate(-180deg) translateX(150px)}}

.fr-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
.fr-particles span{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--em-2);box-shadow:0 0 12px var(--em);opacity:.6;animation:fr-p 7s ease-in-out infinite}
.fr-particles span:nth-child(3n){width:4px;height:4px;animation-duration:9s}
.fr-particles span:nth-child(4n){border-radius:2px;background:transparent;border:1.5px solid var(--em-2);box-shadow:none;width:9px;height:9px;animation-name:fr-p2}
@keyframes fr-p{0%,100%{transform:translate(0,0) scale(1);opacity:.35}50%{transform:translate(28px,-40px) scale(1.4);opacity:.9}}
@keyframes fr-p2{0%,100%{transform:translate(0,0) rotate(0);opacity:.4}50%{transform:translate(20px,22px) rotate(180deg);opacity:.9}}
.hero-in{position:relative;z-index:2}

/* headline ------------------------------------------------------------- */
.hero h1{font-size:clamp(38px,5.6vw,68px);line-height:1.04;font-weight:800}
.hero h1 .fr-w{display:inline-block;animation:fr-reveal .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .fr-acc{
  background:linear-gradient(90deg,#34d399,#10b981,#2dd4bf,#6ee7b7,#34d399);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fr-reveal .9s cubic-bezier(.2,.7,.2,1) both,fr-shimmer 4s linear infinite;
}
@keyframes fr-reveal{from{opacity:0;transform:translateY(30px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes fr-shimmer{to{background-position:-200% center}}

/* The typing line under the headline. */
.fr-type{margin:-4px 0 18px;font:600 clamp(17px,2vw,22px)/1.3 Inter,sans-serif;color:#cbd5e1}
.fr-type b{color:var(--em-2)}
.fr-type i{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--em-2);animation:fr-blink 1s steps(1) infinite}
@keyframes fr-blink{50%{opacity:0}}

/* chips instead of dot-eyebrows ---------------------------------------- */
.eyebrow,.hero .eyebrow,.kicker,.fb-tag{
  display:inline-flex !important;align-items:center;gap:8px;width:auto !important;max-width:100%;
  padding:6px 14px;border-radius:999px;border:1px solid rgba(16,185,129,.3);
  background:rgba(16,185,129,.08);color:var(--em-2) !important;
  font:600 12.5px/1.35 Inter,system-ui,sans-serif !important;letter-spacing:.02em;text-transform:none !important;
}
.eyebrow::before,.hero .eyebrow::before{display:none !important}
.hero .eyebrow{margin-bottom:22px}

/* buttons -------------------------------------------------------------- */
.btn{border-radius:12px !important;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn.prime,.free-band .btn{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#10b981,#059669) !important;color:#fff !important;border:0 !important;
  box-shadow:0 8px 24px -8px rgba(16,185,129,.6);
}
/* A light sweeps across the main button now and then. */
.btn.prime::after,.free-band .btn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);animation:fr-sweep 3.5s ease-in-out infinite}
@keyframes fr-sweep{60%,100%{transform:translateX(120%)}}
.btn.prime:hover,.free-band .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(16,185,129,.8)}
.btn.ghost,.hero .btn.ghost{background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.12) !important;color:#e5e7eb !important}
.btn.ghost:hover{border-color:rgba(16,185,129,.55) !important;color:var(--em-2) !important;transform:translateY(-2px)}

/* live strip & hero shot ----------------------------------------------- */
.pulse{border-radius:16px;background:rgba(17,24,32,.6);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(14px)}
.pulse-live i{background:var(--em) !important}

/* The shot sits in a frame whose edge is a turning band of green light,
   tilts a little after the mouse, and carries two floating badges. */
.hero-shot{position:relative;isolation:isolate;border-radius:20px;padding:3px;overflow:visible !important;background:none !important;border:0 !important;box-shadow:none !important;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.hero-shot::before,.hero-shot::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:-1;
  background:conic-gradient(from var(--fr-a,0deg),#10b981,#34d399,#059669,#6ee7b7,#0ea5e9,#10b981);animation:fr-angle 5s linear infinite}
.hero-shot::after{display:none}
.hero-shot{box-shadow:0 0 60px -12px rgba(16,185,129,.55) !important}
@property --fr-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fr-angle{to{--fr-a:360deg}}
.hero-shot .slider{border-radius:17px;overflow:hidden;background:#0b0f14}
.fr-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  background:rgba(13,20,27,.82);border:1px solid rgba(16,185,129,.3);backdrop-filter:blur(14px);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7);animation:fr-float 6s ease-in-out infinite;pointer-events:none}
.fr-badge b{font:800 22px/1 sans-serif;color:var(--em-2)}
.fr-badge span{font-size:11.5px;line-height:1.25;color:#94a3b8;max-width:9em}
.fr-badge.a{top:-22px;right:-18px}
.fr-badge.b{bottom:-22px;left:-18px;animation-delay:-3s}
@keyframes fr-float{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-12px) rotate(1deg)}66%{transform:translateY(-6px) rotate(-1deg)}}
.slide-label{text-transform:none !important;letter-spacing:0 !important;font:600 13px Inter,sans-serif !important;
  background:rgba(11,15,20,.8) !important;color:var(--em-2) !important;border:1px solid rgba(16,185,129,.35) !important;border-radius:999px !important;box-shadow:none !important;backdrop-filter:blur(8px)}

/* A mouse that says "scroll". */
.fr-mouse{display:flex;flex-direction:column;align-items:center;gap:8px;margin:34px auto 6px;color:#64748b;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.fr-mouse i{width:22px;height:34px;border:2px solid rgba(16,185,129,.4);border-radius:12px;position:relative}
.fr-mouse i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--em-2);animation:fr-wheel 1.6s ease-in-out infinite}
@keyframes fr-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* Exchange logos running past, the demo's tech ribbon. */
.fr-marquee{position:relative;overflow:hidden;margin:26px 0 8px;padding:18px 0;border-block:1px solid rgba(255,255,255,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fr-marquee div{display:flex;gap:46px;width:max-content;animation:fr-marq 50s linear infinite}
.fr-marquee:hover div{animation-play-state:paused}
.fr-marquee span{display:flex;align-items:center;gap:9px;font:700 16px sans-serif;color:#64748b;white-space:nowrap;transition:color .25s}
.fr-marquee span:hover{color:var(--em-2)}
.fr-marquee img{width:22px;height:22px;border-radius:6px;filter:grayscale(1) opacity(.7);transition:filter .25s}
.fr-marquee span:hover img{filter:none}
@keyframes fr-marq{to{transform:translateX(-50%)}}

/* cards ---------------------------------------------------------------- */
.card,.feat,.tool,.step,.count,.plan,.free-band,.venue{
  border-radius:18px !important;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012)) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  transition:transform .4s cubic-bezier(.4,0,.2,1),border-color .4s,box-shadow .4s;
}
/* The light follows the mouse across a card. */
.fr-glow{position:relative;overflow:hidden}
.fr-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(16,185,129,.14),transparent 60%)}
.fr-glow:hover::before{opacity:1}
/* Lifting is for the marketing pages; in the account and admin a card is
   a form, and a form that jumps under the mouse is hard to fill in. */
body:not(.fr-work) :is(.card,.feat,.tool,.step,.count,.plan,.venue):hover{transform:translateY(-6px)}
.card:hover,.feat:hover,.tool:hover,.step:hover,.count:hover,.plan:hover,.venue:hover{border-color:rgba(16,185,129,.4) !important;
  box-shadow:0 0 40px rgba(16,185,129,.12),0 0 80px rgba(16,185,129,.06);
}
.count b{color:var(--em-2) !important;font-weight:800}
.ico{border-radius:12px !important;background:rgba(16,185,129,.1) !important;color:var(--em-2) !important;border:1px solid rgba(16,185,129,.25);transition:transform .4s}
.feat:hover .ico,.card:hover .ico{transform:rotate(-8deg) scale(1.1)}

/* scroll reveal: up, from the sides, zoom - like AOS ------------------- */
.fr-in{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fr-d,0s)}
.fr-in.up{transform:translateY(50px)}
.fr-in.left{transform:translateX(-60px)}
.fr-in.right{transform:translateX(60px)}
.fr-in.zoom{transform:scale(.88)}
.fr-in.fr-on{opacity:1;transform:none}

/* header glass once the page scrolls */
header.bar{transition:background .3s,backdrop-filter .3s,box-shadow .3s}
body.fr-scrolled header.bar{background:rgba(11,15,20,.72) !important;backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.06)}

/* scroll progress */
#frProg{position:fixed;left:0;top:0;height:3px;width:0;z-index:999;background:linear-gradient(90deg,#10b981,#2dd4bf);box-shadow:0 0 10px #10b981}

@media (max-width:900px){
  .fr-rings{left:50%;top:260px}
  .fr-badge{display:none}
}

/* ------------------------------------------------------------ light theme
   The rules above are drawn for the dark ground; on the light one the same
   elements take the theme's own ink and lines, and the greens go deeper so
   they read on white. */
:root[data-theme="light"]{--em:#059669;--em-2:#047857;--em-3:#065f46}
:root[data-theme="light"] .fr-type{color:var(--txt)}
:root[data-theme="light"] .btn.ghost,:root[data-theme="light"] .hero .btn.ghost{
  background:#fff !important;border:1px solid rgba(15,23,42,.16) !important;color:var(--txt) !important}
:root[data-theme="light"] .btn.ghost:hover{border-color:#059669 !important;color:#047857 !important}
:root[data-theme="light"] .hero h1 .fr-acc{background-image:linear-gradient(90deg,#047857,#059669,#0d9488,#10b981,#047857)}
:root[data-theme="light"] .eyebrow,:root[data-theme="light"] .hero .eyebrow,:root[data-theme="light"] .kicker,:root[data-theme="light"] .fb-tag{
  background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.35);color:#047857 !important}
:root[data-theme="light"] .pulse{background:rgba(255,255,255,.85);border-color:rgba(15,23,42,.1)}
:root[data-theme="light"] .fr-badge{background:rgba(255,255,255,.92);border-color:rgba(5,150,105,.35);box-shadow:0 14px 34px -14px rgba(15,23,42,.35)}
:root[data-theme="light"] .fr-badge span{color:var(--txt-2)}
:root[data-theme="light"] .fr-mouse{color:var(--txt-2)}
:root[data-theme="light"] .fr-marquee{border-color:rgba(15,23,42,.08)}
:root[data-theme="light"] .fr-marquee span{color:var(--txt-2)}
:root[data-theme="light"] .fr-marquee img{filter:grayscale(1) opacity(.85)}
:root[data-theme="light"] :is(.card,.feat,.tool,.step,.count,.plan,.free-band,.venue){
  background:#fff !important;border-color:rgba(15,23,42,.1) !important;box-shadow:0 1px 2px rgba(15,23,42,.04)}
:root[data-theme="light"] :is(.card,.feat,.tool,.step,.count,.plan,.venue):hover{border-color:rgba(5,150,105,.45) !important;box-shadow:0 18px 40px -22px rgba(5,150,105,.45)}
:root[data-theme="light"] .slide-label{background:rgba(255,255,255,.92) !important;color:#047857 !important}
:root[data-theme="light"] body.fr-scrolled header.bar{background:rgba(255,255,255,.8) !important;box-shadow:0 1px 0 rgba(15,23,42,.08)}
:root[data-theme="light"] .hero-glow i{opacity:.1 !important}
:root[data-theme="light"] .fr-particles span{background:#10b981;box-shadow:none;opacity:.45}

/* The slider's arrows and dots: always on show and big enough to find. */
.hero-shot .slide-nav{opacity:1;width:52px;height:52px;border-radius:50%;font-size:30px;font-weight:700;
  background:rgba(11,15,20,.78);border:1px solid rgba(16,185,129,.55);color:#fff;backdrop-filter:blur(8px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);transition:transform .2s,background .2s,color .2s}
.hero-shot .slide-nav:hover{background:#10b981;color:#fff;transform:translateY(-50%) scale(1.08)}
.hero-shot .slide-nav.prev{left:14px}
.hero-shot .slide-nav.next{right:14px}
.hero-shot .slide-dots{bottom:16px;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(11,15,20,.7);backdrop-filter:blur(8px)}
.hero-shot .slide-dots button{width:10px;height:10px;background:rgba(255,255,255,.45)}
.hero-shot .slide-dots button:hover{background:rgba(255,255,255,.8)}
.hero-shot .slide-dots button.on{width:28px;background:#10b981;box-shadow:0 0 10px rgba(16,185,129,.8)}
:root[data-theme="light"] .hero-shot .slide-nav{background:rgba(255,255,255,.92);color:#047857;border-color:rgba(5,150,105,.5)}
:root[data-theme="light"] .hero-shot .slide-nav:hover{background:#059669;color:#fff}
:root[data-theme="light"] .hero-shot .slide-dots{background:rgba(255,255,255,.88)}
:root[data-theme="light"] .hero-shot .slide-dots button{background:rgba(15,23,42,.3)}
@media (max-width:640px){.hero-shot .slide-nav{width:40px;height:40px;font-size:24px}}

/* Until the page has loaded only the first screenshot is drawn (js/landing.js
   adds .ready), so the other six are not fetched up front. */
.slider:not(.ready) .slide:not(:first-child){display:none}

/* The typing line keeps one line's height whatever is typed: wrapping and
   unwrapping moved everything under it, which speed tests count as shifts. */
.fr-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.3em}
/* The logo ribbon holds its height before the logos arrive. */
.fr-marquee{min-height:61px;box-sizing:border-box}

/* No ruled lines: the counts strip lost its rules above and below, and the
   hero lost its second grid (below). */
.counts{border-top:0 !important;border-bottom:0 !important}
/* One grid, not two: the hero's own grid sat a few pixels off the page's
   and drew every line twice. */
.hero-grid{display:none}
.fr-marquee{border-block:0 !important}

/* Everything drawn behind the hero fades to nothing at its left and right
   edges as well: on a narrower window the right-hand blob reached the edge
   of the content column and stopped there in a hard vertical line. */
.hero-glow,.fr-particles,.fr-rings{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),radial-gradient(80% 75% at 50% 40%,#000 50%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),radial-gradient(80% 75% at 50% 40%,#000 50%,transparent 100%);
  mask-composite:intersect;
}

/* The shot's glow falls downward only. Spread to the sides it reached the
   hero's own edges on a narrow window and was cut there in two straight
   vertical lines. */
.hero-shot{box-shadow:0 46px 70px -42px rgba(16,185,129,.55) !important}

/* The headline is one element again (js/fresh.js): the tail keeps its
   moving gradient, without a per-word entrance. */
.hero h1 .fr-acc{animation:fr-shimmer 4s linear infinite !important}

/* A phone gets the page without the heavy decoration: turning rings,
   particles and the spinning frame cost a slow processor about a second of
   repainting on load. The blobs stay, standing still. */
@media (max-width:900px){
  .fr-rings,.fr-particles{display:none}
  .hero-glow i{animation:none}
  .hero-shot::before{animation:none}
  .hero h1 .fr-acc{animation:none !important}
}

/* The green tail is ordinary inline text: as an unbreakable block it moved
   the line breaks once the script ran, and the whole first screen with them. */
.hero h1 .fr-acc{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* The first screen is on show at once, not faded in: something that starts
   transparent is never counted as the page's main content, so the headline
   and the shot were passed over for the typing line under them. The blocks
   further down still rise in as they scroll into view. */
.hero .reveal:not(.hero-shot){opacity:1 !important;transform:none !important;transition:none !important}
/* The shot keeps its tilt after the mouse, so only its fade is dropped. */
.hero .hero-shot.reveal{opacity:1 !important;transition:transform .4s cubic-bezier(.2,.7,.2,1) !important}