/* ============================================================================
   EZAI Agency — page styles.
   The engine (scrollcraft.css) is the floor. This file rebrands its tokens and
   styles this page's own markup.

   TWO RULES LEARNED THE HARD WAY, both caught by the verification pass:
   1. NEVER set `position` or `height` on an element that also carries
      .sc-stage. Same specificity, later in the cascade, so it silently wins:
      `position:relative` kills the pin, `height` makes the stage as tall as the
      whole act. Style the INSIDE of a stage, never the stage's own box.
   2. `.sc-body` is the engine's BODY TEXT class, not a class for <body>. On
      <body> it caps the whole document at a 62-character measure.

   Palette is Brand Guide v1.0. One accent per screen: Blue 600 is the accent,
   Violet its gradient partner, Cyan reserved for AI-live, Amber for human.
   ========================================================================== */

:root {
  --sc-canvas:     #070b25;
  --sc-surface:    #0d1339;
  --sc-ink:        #e2e6f5;
  --sc-ink-soft:   #97a0c7;
  --sc-accent:     #2d5bff;
  --sc-accent-ink: #ffffff;

  --sc-font-display: "Sora", system-ui, sans-serif;
  --sc-font-text:    "Space Grotesk", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --ez-navy:    #0a0e2e;
  --ez-lift:    #141c52;
  --ez-violet:  #7c3aed;
  --ez-cyan:    #00d4ff;
  --ez-amber:   #f5a623;
  --ez-line:    #232c66;
  --ez-line-hi: #35407f;

  /* Lifted mesh. Ryan asked for lighter and less plain; this stays inside the
     brand's "deep navy stage" while giving the ground somewhere to go. */
  --ez-mesh:
    radial-gradient(115% 92% at 6% -4%,  rgba(45,91,255,.46), transparent 54%),
    radial-gradient(105% 95% at 96% 4%,  rgba(124,58,237,.58), transparent 58%),
    radial-gradient(80% 70% at 62% 96%,  rgba(124,58,237,.30), transparent 64%),
    radial-gradient(70% 60% at 22% 104%, rgba(0,212,255,.13), transparent 66%),
    linear-gradient(180deg, #120e3a, #0a0a28 62%, #070b25);
}

/* A fine dot field plus a hairline grid. Enough texture that a flat dark screen
   stops reading as empty, quiet enough that copy still owns the page. */
.ez-field-pattern{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(226,230,245,.16) 1px, transparent 1px),
    linear-gradient(rgba(45,91,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,91,255,.09) 1px, transparent 1px);
  background-size: 26px 26px, 104px 104px, 104px 104px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
}

.ez-eyebrow{
  font-family:var(--sc-font-mono); font-size:var(--sc-t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--sc-accent);
  margin:0 0 var(--sc-4);
}
.ez-eyebrow--amber{color:var(--ez-amber)}

h1,h2,h3{font-family:var(--sc-font-display);letter-spacing:-.02em;text-wrap:balance}
h1{font-weight:800}
h2,h3{font-weight:700}
h1 em,h2 em{font-style:normal;
  background:linear-gradient(100deg,var(--sc-ink) 22%,#6f93ff 62%,var(--ez-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.ez-wrap{max-width:var(--sc-maxw);margin-inline:auto;padding-inline:var(--sc-gutter);width:100%}
.ez-body{max-width:54ch;color:var(--sc-ink-soft);font-size:var(--sc-t-lg);line-height:1.62;margin:0}
.ez-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.ez-trio{font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);
  color:var(--sc-ink-soft);letter-spacing:.02em;display:flex;flex-wrap:wrap;
  gap:.55em;align-items:baseline;margin:0}
.ez-trio b{color:var(--sc-ink);font-weight:500}
.ez-trio span{color:var(--sc-accent)}

/* ---------------------------------------------------------------- nav ---- */
.ez-nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;
  align-items:center;gap:var(--sc-5);padding:var(--sc-4) var(--sc-gutter);
  background:linear-gradient(to bottom,rgba(7,11,37,.45),rgba(7,11,37,.14) 60%,rgba(7,11,37,0));
  pointer-events:none}
.ez-nav > *{pointer-events:auto}
.ez-nav__logo{height:42px;width:auto;display:block}
@media (max-width:640px){.ez-nav__logo{height:32px}}
/* The menu is not in the first frame: the hero owns that. It arrives once the
   reader has committed to scrolling, which is also when they start wanting it. */
.ez-nav__menu{margin-left:auto;display:flex;gap:var(--sc-5);align-items:center;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease}
.ez-nav--scrolled .ez-nav__menu{opacity:1;transform:none;pointer-events:auto}
.ez-nav__menu a{font-family:var(--sc-font-text);font-weight:500;
  font-size:var(--sc-t-sm);color:var(--sc-ink-soft);text-decoration:none;
  padding:.3em 0;border-bottom:1px solid transparent;white-space:nowrap}
.ez-nav__menu a:hover{color:var(--sc-ink);border-bottom-color:var(--sc-accent)}
.ez-nav__menu a:focus-visible{outline:2px solid var(--ez-cyan);outline-offset:3px}
@media (max-width:880px){.ez-nav__menu{display:none}}

/* ---------------------------------------------------------------- cta ---- */
.ez-cta{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sc-font-text);font-weight:600;font-size:var(--sc-t-base);
  color:var(--sc-accent-ink);text-decoration:none;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--sc-accent),var(--ez-violet));
  padding:.9em 1.6em;border-radius:var(--sc-r-pill);
  box-shadow:0 8px 26px -10px rgba(45,91,255,.85);
  transition:transform .2s ease,box-shadow .2s ease}
.ez-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(45,91,255,.95)}
.ez-cta:focus-visible{outline:2px solid var(--ez-cyan);outline-offset:3px}
.ez-cta--sm{font-size:var(--sc-t-sm);padding:.62em 1.15em}

/* ============================================================ act 1 ====== */
.ez-open{display:grid;align-content:center;background:var(--ez-mesh);overflow:clip}
.ez-open__inner{position:relative;z-index:2;display:grid;
  gap:clamp(.6rem,1.5vh,1.3rem);justify-items:center;text-align:center;
  padding-top:clamp(56px,8vh,86px)}
.ez-open__top{display:grid;justify-items:center;gap:var(--sc-3)}
.ez-open__logo{width:min(clamp(130px,12vw,190px),46vw);height:auto;display:block;
  filter:drop-shadow(0 8px 30px rgba(45,91,255,.5))}
.ez-open h1{font-size:clamp(1.6rem,.95rem+1.75vw,2.4rem);line-height:1.07;
  margin:0;max-width:26ch}
.ez-open__foot{display:flex;flex-wrap:wrap;gap:var(--sc-4) var(--sc-5);
  align-items:center;justify-content:center}

/* ==========================================================================
   A BELIEVABLE WEBSITE, drawn in DOM.
   Sized entirely in em so one font-size renders it at hero scale or plate
   scale. Light, because real websites are light. Every block carries real
   labels and photo-weight imagery: a page of empty grey bars reads as a
   wireframe, and a wireframe is not what anybody is buying.
   ========================================================================== */
.ez-ui-chrome{display:flex;align-items:center;gap:.3em;
  padding:.5em .75em;background:#e8ebf3;border-bottom:1px solid #d5dae7}
.ez-ui-chrome span{width:.42em;height:.42em;border-radius:50%;background:#bfc7d8}
.ez-ui-chrome em{flex:1;margin-left:.5em;font-style:normal;
  font-family:var(--sc-font-text);font-size:.5em;color:#79839b;
  background:#fff;border-radius:99px;padding:.36em .9em;text-align:center;
  white-space:nowrap;overflow:hidden}
.ez-ui-page{background:#fff;display:flex;flex-direction:column;text-align:left}

.ez-ui-nav{display:flex;align-items:center;gap:.7em;
  padding:.7em 1em;background:#fff;border-bottom:1px solid #edf0f7}
.ez-ui-mark{width:1.1em;height:1.1em;border-radius:.26em;flex:0 0 auto;
  background:linear-gradient(135deg,#2d5bff,#7c3aed)}
.ez-ui-word{font-family:var(--sc-font-display);font-weight:700;font-size:.62em;
  color:#131c3c;letter-spacing:-.01em;margin-right:.6em;white-space:nowrap}
.ez-ui-nav u{text-decoration:none;font-family:var(--sc-font-text);font-weight:500;
  font-size:.52em;color:#5a6480;white-space:nowrap}
.ez-ui-btn{margin-left:auto;font-style:normal;font-family:var(--sc-font-text);
  font-weight:600;font-size:.5em;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#2d5bff,#5b47e0);
  padding:.55em 1.1em;border-radius:99px}
.ez-ui-btn--lg{margin-left:0;font-size:.56em;padding:.7em 1.3em}
.ez-ui-ghost{font-style:normal;font-family:var(--sc-font-text);font-weight:600;
  font-size:.56em;color:#2d3a5e;white-space:nowrap;
  border:1px solid #cdd5e6;padding:.66em 1.2em;border-radius:99px;background:#fff}
.ez-ui-ghost--sm{font-size:.5em;padding:.5em 1em;align-self:flex-start;margin-top:.3em}
.ez-ui-ctas{display:flex;gap:.5em;align-items:center;margin-top:.25em}

.ez-ui-hero{display:grid;grid-template-columns:1fr 1fr;gap:1em;
  padding:1.2em 1em;background:linear-gradient(165deg,#f8faff,#eaf0fb);
  align-items:center}
.ez-ui-hero__copy{display:flex;flex-direction:column;gap:.45em}
.ez-ui-hero h4{font-family:var(--sc-font-display);font-weight:800;margin:0;
  font-size:1.32em;line-height:1.02;letter-spacing:-.025em;color:#0f1734}
.ez-ui-hero p{margin:0;font-family:var(--sc-font-text);font-size:.56em;
  color:#5d6782;line-height:1.5}

/* Photo-weight imagery. Layered gradients with a highlight and a warm cast
   read as photography at this size; flat fills read as a placeholder. */
.ez-ui-shot,.ez-ui-pic{border-radius:.42em;position:relative;overflow:hidden;
  box-shadow:0 .45em 1.1em -.5em rgba(16,26,60,.45)}
.ez-ui-shot--a{aspect-ratio:3/2;
  background:
    radial-gradient(85% 60% at 24% 12%, rgba(255,255,255,.5), transparent 58%),
    linear-gradient(158deg,#22345f 0%,#4a68a8 38%,#9fb0cf 62%,#d9c9ae 100%)}
.ez-ui-shot--b{aspect-ratio:16/10;
  background:
    radial-gradient(70% 60% at 78% 18%, rgba(255,255,255,.42), transparent 60%),
    linear-gradient(200deg,#1d3d4a 0%,#3f7f86 45%,#b9c9b4 100%)}
.ez-ui-pic{aspect-ratio:3/2}
.ez-ui-pic--a{background:
    radial-gradient(80% 60% at 22% 15%, rgba(255,255,255,.45), transparent 58%),
    linear-gradient(155deg,#2b4a7d,#7d93bd 60%,#cfc3ad)}
.ez-ui-pic--b{background:
    radial-gradient(80% 60% at 70% 20%, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(155deg,#20504f,#5c9a8f 55%,#c8cfae)}
.ez-ui-pic--c{background:
    radial-gradient(80% 60% at 35% 18%, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(155deg,#4b2f63,#8a6aa8 55%,#d3c2c9)}

.ez-ui-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;
  padding:.9em 1em;background:#fff}
.ez-ui-card{display:flex;flex-direction:column;gap:.34em}
.ez-ui-card h5{margin:.15em 0 0;font-family:var(--sc-font-display);font-weight:700;
  font-size:.56em;color:#16203f;letter-spacing:-.01em}
.ez-ui-card i{height:.26em;width:92%;border-radius:99px;background:#dbe0ec}
.ez-ui-card i:last-child{width:66%}

.ez-ui-band{display:grid;grid-template-columns:1.15fr 1fr;gap:1.1em;
  padding:1.2em 1em;background:#f5f7fc;align-items:center}
.ez-ui-band__copy{display:flex;flex-direction:column;gap:.32em}
.ez-ui-band h5{margin:0;font-family:var(--sc-font-display);font-weight:700;
  font-size:.72em;color:#131c3c;letter-spacing:-.02em;line-height:1.12}
.ez-ui-band i{height:.26em;width:94%;border-radius:99px;background:#d9dfec}
.ez-ui-band i:nth-of-type(3){width:72%}

.ez-ui-foot{display:flex;align-items:center;gap:.7em;
  padding:.9em 1em;background:#0f1734}
.ez-ui-foot b{width:.95em;height:.95em;border-radius:.22em;
  background:linear-gradient(135deg,#2d5bff,#7c3aed)}
.ez-ui-foot span{height:.26em;width:2.6em;border-radius:99px;background:#46527a}

/* --------------------------------------------- the hero: the centrepiece --- */
/* The site is the hero, not a decoration beside it. Copy above, action below. */
.ez-hero__art{position:relative;width:100%;display:grid;justify-items:center}
/* The canvas needs siblings (the phone, the notification) that are positioned
   against IT, not against the whole wrap, so they sit on its corners at every
   width. Perspective lives here because it only applies to direct children —
   on .ez-hero__art the canvas would be a grandchild and the tilt would flatten. */
.ez-stagewrap{position:relative;
  /* The scale lives HERE, not on .ez-canvas. The canvas is measured in em, so
     if the wrapper is sized in a different font context `68em` silently means
     something else and the whole mock doubles. One font-size, one meaning. */
  font-size:clamp(6px,1.14vh,11.5px);
  width:min(96%,68em);
  perspective:2200px;perspective-origin:50% 42%}
/* The mock is ~42em tall, so its font-size has to come from the HEIGHT the
   hero has spare, not from the width. Sized off vh, the whole act fits the
   stage and the site still reads as the centrepiece. */
.ez-canvas{position:relative;z-index:1;width:100%;font-size:inherit;
  border-radius:.6em;overflow:hidden;background:#fff;
  transform:rotateX(11deg) scale(.99);transform-origin:50% 0;
  box-shadow:0 4em 7em -2.5em rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.4),
             0 0 9em -2em rgba(124,58,237,.7)}
/* Not zero. At rest the site reads as a whole page waiting to come up, which is
   a far better first frame than an empty white rectangle; the scroll then
   brings it to full strength in three waves rather than out of nothing. */
.ez-canvas [data-ez-lay]{opacity:.34;will-change:opacity,transform}
/* While the parts are scattered they sit outside the page they belong to, so
   the frame cannot be clipping. It clips again the moment they have landed,
   which is what gives the assembly its snap. */
.ez-canvas.is-apart{overflow:visible}
/* The caption sits under the headline, not under the canvas: below it, it
   collided with the call-to-action row at every viewport height. */
.ez-canvas__cap{position:relative;margin:0;height:1.3em;width:100%;
  text-align:center;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ez-cyan)}
.ez-canvas__cap span{position:absolute;inset:0;opacity:0}
/* ============================================================ act 2 ====== */
/* The build. One surface, three layers landing in buying order. */
.ez-build{display:grid;align-content:center;background:var(--ez-mesh);overflow:clip}
.ez-build__inner{position:relative;display:grid;gap:var(--sc-5) var(--sc-7);
  align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .ez-build__inner{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}

.ez-build__narration{position:relative;min-height:14.5rem;align-self:center}
.ez-step{position:absolute;inset:0;margin:0;display:grid;
  grid-template-columns:auto 1fr;gap:.35rem var(--sc-4);
  align-content:start;opacity:0;will-change:opacity,transform}
.ez-step__n{grid-row:1/3;font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);
  color:var(--sc-accent);letter-spacing:.12em;padding-top:.42em}
.ez-step__t{font-family:var(--sc-font-display);font-weight:700;
  font-size:var(--sc-t-xl);letter-spacing:-.02em;color:var(--sc-ink);
  line-height:1.12}
.ez-step__d{grid-column:2;color:var(--sc-ink-soft);font-size:var(--sc-t-base);
  line-height:1.6;max-width:44ch}
.ez-step[data-ez-step="2"] .ez-step__n{color:var(--ez-cyan)}

/* The narration sits beside the stack now, not above it, so this needs no
   clearance — only enough headroom for the top plate's 3D bounds. */
.ez-build__viz{display:grid;justify-items:center;align-content:center;
  gap:var(--sc-5);perspective:2100px;perspective-origin:50% 50%;
  padding-top:clamp(30px,6vh,64px);min-height:clamp(340px,52vh,620px)}
.ez-stack{position:relative;width:min(560px,68vw);aspect-ratio:4/3;
  transform-style:preserve-3d;
  transform:translateX(-4%) rotateX(56deg) rotateZ(-30deg)}
.ez-plate{position:absolute;inset:0;border-radius:var(--sc-r-md);
  border:1px solid rgba(226,230,245,.18);overflow:hidden;
  box-shadow:0 34px 80px -36px rgba(0,0,0,1);
  opacity:0;will-change:transform,opacity}
.ez-plate__face{position:absolute;inset:0;padding:15px;display:flex;
  flex-direction:column;gap:9px}
.ez-p-site .ez-plate__face,.ez-p-system .ez-plate__face{padding:0;gap:0}

.ez-p-ground{background:linear-gradient(135deg,#101a4d,#080d2b);
  border-color:rgba(226,230,245,.12)}
.ez-p-site{background:#fff;border-color:rgba(255,255,255,.5)}
.ez-p-system{background:#f4f6fb;border-color:rgba(45,91,255,.55)}
.ez-p-ai{background:#152a63;border-color:rgba(0,212,255,.55);
  box-shadow:0 34px 80px -36px rgba(0,0,0,1),0 0 34px -6px rgba(0,212,255,.35)}


/* -------------------------------------------------- the website plate ----- */
.ez-site{padding:0;gap:0;font-size:19px;background:#fff;overflow:hidden}
.ez-site .ez-ui-hero{padding:.9em .8em}
.ez-site .ez-ui-cards{padding:.7em .8em}

/* ----------------------------------------- the EZAI Suite dashboard plate -- */
/* Light, like the real product. Numbers are illustrative and the plate says so. */
.ez-dash{flex-direction:row;gap:0;padding:0;overflow:hidden;background:#f4f6fb;
  font-size:19px}
.ez-dash__side{width:23%;background:#fff;padding:.5em .42em;
  display:flex;flex-direction:column;gap:.34em;border-right:1px solid #e3e8f3}
.ez-dash__logo{height:.6em;border-radius:.14em;
  background:linear-gradient(90deg,#2d5bff,#7c3aed);margin-bottom:.24em}
.ez-dash__side i{height:.26em;border-radius:99px;background:#d7dde9}
.ez-dash__side i.on{background:#2d5bff}
.ez-dash__main{flex:1;padding:.5em .6em;display:flex;flex-direction:column;gap:.44em}
.ez-dash__top{display:flex;justify-content:space-between;align-items:center;gap:.4em}
.ez-dash__tab{font-family:var(--sc-font-text);font-weight:600;font-size:.46em;color:#1d2748}
.ez-dash__range{font-family:var(--sc-font-text);font-size:.42em;color:#7b859d;
  border:1px solid #dfe4f0;border-radius:99px;padding:.22em .55em;background:#fff}
.ez-dash__chips{display:flex;flex-wrap:wrap;gap:.2em}
.ez-dash__chips span{font-family:var(--sc-font-text);font-size:.36em;
  color:#3a4569;border:1px solid #dde3f0;background:#fff;
  border-radius:99px;padding:.28em .6em;white-space:nowrap}
.ez-dash__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.36em}
.ez-card{border:1px solid #e3e8f3;border-radius:.32em;padding:.38em;
  background:#fff;display:flex;flex-direction:column;gap:.06em}
.ez-card__k{font-family:var(--sc-font-text);font-size:.36em;color:#8a93a8;
  letter-spacing:.02em;text-transform:uppercase}
.ez-card__v{font-family:var(--sc-font-display);font-weight:700;font-size:.78em;
  color:#101a3a;letter-spacing:-.02em;line-height:1.12}
.ez-card__s{font-family:var(--sc-font-text);font-size:.36em;color:#1f9d6b}
.ez-spark{display:flex;align-items:flex-end;gap:.1em;height:.85em;margin-top:.14em}
.ez-spark b{flex:1;border-radius:.06em;background:#2d5bff;opacity:.85}
.ez-dash__funnel{display:flex;flex-direction:column;gap:.18em;margin-top:auto}
.ez-dash__funnel b{height:.36em;border-radius:99px;
  background:linear-gradient(90deg,#2d5bff,#7c3aed)}
.ez-dash__tag{position:absolute;right:.4em;bottom:.3em;font-family:var(--sc-font-mono);
  font-size:.34em;letter-spacing:.1em;text-transform:uppercase;color:#9aa3b8}

/* the AI service list in the narration */
.ez-step__list{grid-column:2;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.ez-step__list b{font-family:var(--sc-font-mono);font-weight:400;
  font-size:var(--sc-t-xs);letter-spacing:.03em;color:#bff1ff;
  border:1px solid rgba(0,212,255,.42);border-radius:99px;padding:.32em .7em;
  background:rgba(0,212,255,.07)}

/* ------------------------------------------------------------ menu band --- */
.ez-menuband{background:var(--sc-canvas);border-top:1px solid var(--ez-line);
  padding-block:var(--sc-6)}
.ez-menuband__inner{display:grid;gap:var(--sc-4);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ez-menubtn{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;
  border:1px solid var(--ez-line);border-radius:var(--sc-r-md);
  padding:var(--sc-5);background:rgba(255,255,255,.03);
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.ez-menubtn:hover{border-color:rgba(124,58,237,.7);
  background:linear-gradient(160deg,rgba(124,58,237,.2),rgba(45,91,255,.08));
  transform:translateY(-2px)}
.ez-menubtn:focus-visible{outline:2px solid var(--ez-cyan);outline-offset:3px}
.ez-menubtn span{font-family:var(--sc-font-display);font-weight:700;
  font-size:var(--sc-t-lg);color:var(--sc-ink);letter-spacing:-.01em}
.ez-menubtn small{font-family:var(--sc-font-text);font-size:var(--sc-t-sm);
  color:var(--sc-ink-soft)}

/* generic chips */
.ez-chiprow{display:flex;gap:5px;flex-wrap:wrap}
.ez-chip{font-family:var(--sc-font-mono);font-size:9.5px;letter-spacing:.03em;
  padding:4px 8px;border-radius:var(--sc-r-pill);color:var(--sc-ink);
  border:1px solid rgba(226,230,245,.3);background:rgba(5,7,26,.42)}
.ez-chip--ai{border-color:rgba(0,212,255,.55);color:#bff1ff}
.ez-rows{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.ez-rows span{height:6px;border-radius:2px;background:rgba(226,230,245,.22)}
.ez-wave{width:100%;height:38px;display:block}

.ez-live{display:inline-flex;align-items:center;gap:.7em;margin:0;opacity:0;
  font-family:var(--sc-font-text);font-weight:500;font-size:var(--sc-t-base);
  color:var(--sc-ink);will-change:opacity;text-align:left;
  border:1px solid rgba(0,212,255,.4);border-radius:99px;
  padding:.6em 1.2em;background:rgba(0,212,255,.07)}
.ez-live__dot{width:7px;height:7px;border-radius:50%;background:var(--ez-cyan);
  box-shadow:0 0 0 0 rgba(0,212,255,.6);animation:ez-pulse 2.2s ease-out infinite}
@keyframes ez-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,212,255,.55)}
  70%{box-shadow:0 0 0 11px rgba(0,212,255,0)}
  100%{box-shadow:0 0 0 0 rgba(0,212,255,0)}
}


/* ============================================================ act 3 ====== */
/* The AI is the thing people ask about, so it gets a section and room to
   explain. Hover or keyboard focus opens a card. Where there is no hover
   (every phone) they are open from the start, because a card you cannot open
   is a card that does not exist. */
.ez-ai{position:relative;background:
  radial-gradient(90% 70% at 82% 0%, rgba(124,58,237,.34), transparent 60%),
  radial-gradient(70% 60% at 10% 100%, rgba(45,91,255,.22), transparent 62%),
  var(--sc-canvas);
  padding-block:var(--sc-9);overflow:hidden}
.ez-ai__inner{position:relative;z-index:2;display:grid;gap:var(--sc-7)}
.ez-ai__head h2{font-size:var(--sc-t-2xl);margin:0 0 var(--sc-4);max-width:18ch}
/* align-items:start, or every card stretches to the tallest one and a
   collapsed card becomes a big empty box. */
.ez-ai__grid{display:grid;gap:var(--sc-4);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ez-svc{border:1px solid var(--ez-line);border-radius:var(--sc-r-lg);
  padding:var(--sc-5);background:linear-gradient(160deg,rgba(124,58,237,.14),rgba(255,255,255,.03));
  display:grid;gap:0;cursor:default;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,background .25s ease}
.ez-svc h3{font-size:var(--sc-t-lg);margin:0;color:var(--sc-ink);
  display:flex;align-items:center;justify-content:space-between;gap:.6em}
.ez-svc h3::after{content:"+";font-family:var(--sc-font-mono);font-weight:400;
  font-size:var(--sc-t-base);color:var(--ez-violet);transition:transform .3s ease}
.ez-svc:hover h3::after,.ez-svc:focus-within h3::after{transform:rotate(45deg)}
@media (hover:none){.ez-svc h3::after{display:none}}
/* max-height, not the 0fr/1fr grid trick: that needs an element child and
   this description is raw text, so the grid version silently never opened. */
.ez-svc p{margin:0;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);
  line-height:1.6;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .38s ease,opacity .3s ease,margin-top .38s ease}
.ez-svc:hover,.ez-svc:focus-within{
  border-color:rgba(124,58,237,.75);transform:translateY(-3px);
  background:linear-gradient(160deg,rgba(124,58,237,.26),rgba(45,91,255,.1));
  box-shadow:0 18px 44px -22px rgba(124,58,237,.9)}
.ez-svc:hover p,.ez-svc:focus-within p{max-height:16em;opacity:1;
  margin-top:var(--sc-3)}
.ez-svc:focus-visible{outline:2px solid var(--ez-cyan);outline-offset:3px}
/* No hover means no reveal, so open everything. */
@media (hover:none),(prefers-reduced-motion:reduce){
  .ez-svc p{max-height:none;opacity:1;margin-top:var(--sc-3)}
}

/* -------------------------------------------------- how it works, really -- */
.ez-how{list-style:none;margin:0;padding:0;display:grid;gap:var(--sc-5);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));width:100%}
.ez-how li{display:grid;gap:.35rem;align-content:start;
  border-top:1px solid var(--ez-line);padding-top:var(--sc-4)}
.ez-how__n{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:.14em;color:var(--ez-violet)}
.ez-how__t{font-family:var(--sc-font-display);font-weight:700;
  font-size:var(--sc-t-lg);color:var(--sc-ink);letter-spacing:-.015em}
.ez-how__d{color:var(--sc-ink-soft);font-size:var(--sc-t-sm);line-height:1.6}

.ez-yours{display:grid;place-items:center;background:var(--sc-canvas);overflow:clip}
.ez-yours__inner{position:relative;z-index:2}
.ez-yours__inner{display:grid;gap:var(--sc-5);justify-items:start;position:relative;z-index:2}
.ez-yours h2{font-size:var(--sc-t-2xl);line-height:1.04;margin:0;max-width:20ch}

/* ============================================================ act 4 ====== */
.ez-close{display:grid;place-items:center;background:var(--sc-canvas);overflow:clip}
.ez-close__light{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46rem 30rem at
    calc(var(--sc-mx,.5) * 100%) calc(var(--sc-my,.5) * 100%),
    rgba(45,91,255,.26),transparent 62%)}
.ez-close__inner{position:relative;text-align:center;display:grid;
  gap:var(--sc-5);justify-items:center}
.ez-close h2{font-size:var(--sc-t-3xl);line-height:1.0;margin:0;max-width:15ch}
.ez-close p{margin:0;color:var(--sc-ink-soft);font-size:var(--sc-t-lg);max-width:42ch}
.ez-form{display:grid;gap:var(--sc-3);width:min(420px,100%);text-align:left;
  margin-top:var(--sc-2)}
.ez-input{padding:.9em 1.05em;border-radius:8px;font:inherit;color:var(--sc-ink);
  border:1px solid var(--ez-line-hi);background:rgba(7,11,37,.7)}
.ez-input::placeholder{color:var(--sc-ink-soft)}
.ez-input:focus-visible{outline:2px solid var(--ez-cyan);outline-offset:1px}
.ez-hp{position:absolute;left:-9999px}
.ez-note{margin:0;font-size:var(--sc-t-sm);color:var(--ez-cyan)}

/* --------------------------------------------------------------- foot ---- */
.ez-foot{border-top:1px solid var(--ez-line);background:var(--ez-navy);
  padding-block:var(--sc-7)}
.ez-foot__grid{display:flex;flex-wrap:wrap;gap:var(--sc-6);
  justify-content:space-between;align-items:flex-start}
.ez-foot__nav{display:flex;flex-direction:column;gap:.45rem}
.ez-foot__nav a{font-family:var(--sc-font-text);font-size:var(--sc-t-sm);
  color:var(--sc-ink-soft);text-decoration:none}
.ez-foot__nav a:hover{color:var(--sc-ink)}
.ez-foot p{margin:0;font-size:var(--sc-t-sm);color:var(--sc-ink-soft);line-height:1.8}
.ez-foot a{color:var(--sc-ink-soft);text-decoration:none}
.ez-foot a:hover{color:var(--sc-ink)}
.ez-foot__legal{font-family:var(--sc-font-mono);font-size:11px;
  color:var(--sc-ink-soft);opacity:.75;margin-top:var(--sc-5);line-height:1.7}

/* ------------------------------------------------------------- phones ---- */
@media (max-width:999px){
  .ez-build__inner{gap:var(--sc-4)}
  .ez-build__narration{min-height:15.5rem;order:2}
  .ez-build__viz{order:1;padding-top:clamp(70px,13vh,130px)}
  .ez-stack{width:min(250px,62vw)}
  .ez-step__t{font-size:var(--sc-t-lg)}
  .ez-step__d{font-size:var(--sc-t-sm)}
  .ez-open__logo{width:min(300px,72vw)}
}
@media (prefers-reduced-motion:reduce){
  .ez-cta:hover{transform:none}
  .ez-live__dot{animation:none}
}

/* ------------------------------------------------------- the pointer light */
/* data-sc-spotlight publishes --sc-mx/--sc-my on its stage. One soft radial
   per stage, painted behind the content. The engine already gates this to
   fine pointers and disables it under reduced motion, so it costs nothing on
   a phone and nothing for anyone who asked for less movement. */
.ez-glow{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(38rem 26rem at
    calc(var(--sc-mx,.5) * 100%) calc(var(--sc-my,.5) * 100%),
    rgba(124,58,237,.28), rgba(45,91,255,.1) 42%, transparent 68%)}
.ez-ai{position:relative}
.ez-open__inner,.ez-build__inner,.ez-yours__inner,.ez-ai__inner{position:relative;z-index:2}
@media (max-width:999px){
  .ez-open__inner{text-align:left;justify-items:start}
  .ez-open__top{justify-items:start}
  .ez-open__foot{justify-content:flex-start}
  .ez-canvas{transform:none}
}

/* -------------------------------------------- the annotated example site -- */
/* The mock is small, so annotations cannot live inside it: text at the mock's
   own scale is unreadable. They run at PAGE scale under the headline instead,
   and a ring picks out the section each one is talking about. */
.ez-ui-hero,.ez-ui-proof,.ez-ui-cards{position:relative;transition:opacity .4s ease}
[data-ez-sec]::after{content:"";position:absolute;inset:.2em;border-radius:.4em;
  border:2px solid var(--ez-cyan);opacity:0;pointer-events:none;
  box-shadow:0 0 0 .4em rgba(0,212,255,.14),0 0 3em -.4em rgba(0,212,255,.7);
  transition:opacity .35s ease}
[data-ez-sec].is-lit::after{opacity:1}
.ez-canvas.is-walking [data-ez-sec]:not(.is-lit){opacity:.42}

/* proof strip */
.ez-ui-proof{display:grid;gap:.55em;padding:1em;background:#fff;
  border-top:1px solid #edf0f7;border-bottom:1px solid #edf0f7}
.ez-ui-stars{display:flex;align-items:center;gap:.4em;color:#f5a623;
  font-size:.6em;letter-spacing:.06em}
.ez-ui-stars em{font-style:normal;color:#6b7590;
  font-family:var(--sc-font-text);font-size:.72em;letter-spacing:0}
.ez-ui-quotes{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.ez-ui-quotes blockquote{margin:0;font-family:var(--sc-font-text);
  font-size:.5em;line-height:1.45;color:#2a3350}
.ez-ui-logos{display:flex;gap:.5em}
.ez-ui-logos span{height:.85em;flex:1;border-radius:.14em;background:#e4e8f2}

/* the why-us cards now carry real copy */
.ez-ui-card p{margin:0;font-family:var(--sc-font-text);font-size:.44em;
  line-height:1.5;color:#66708c}

/* the walkthrough caption, at page scale so it can actually be read */
.ez-canvas__cap{height:auto;min-height:2.6em;display:block}
.ez-canvas__cap span{position:absolute;left:50%;translate:-50% 0;width:min(100%,58ch);
  inset-inline:auto;font-family:var(--sc-font-text);font-weight:500;
  font-size:var(--sc-t-base);letter-spacing:0;text-transform:none;
  color:var(--sc-ink);line-height:1.45}
.ez-canvas__cap span[data-ez-capn="0"]{font-family:var(--sc-font-mono);
  font-size:var(--sc-t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ez-cyan)}

/* ==========================================================================
   REAL PHOTOGRAPHY IN THE MOCK
   The gradients underneath stay as the fallback: if a photo does not load the
   block still reads as an image, not as a hole.
   ========================================================================== */
.ez-ui-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:inherit}

/* ==========================================================================
   HERO FURNITURE — the phone and the notification
   Both are absolutely positioned against .ez-stagewrap, so they add nothing to
   the act's height, and neither carries data-ez-lay: they are at full strength
   in the very first frame, which is the point of them.
   ========================================================================== */
.ez-phone,.ez-pings{display:none}

@media (min-width:1200px){
  .ez-phone{display:block;position:absolute;z-index:3;
    left:-10%;bottom:11%;width:12.5%;
    font-size:clamp(5px,.86vh,8.5px);
    border-radius:1.5em;padding:.42em;
    background:linear-gradient(160deg,#1a2149,#0a0e2e);
    border:1px solid rgba(226,230,245,.22);
    box-shadow:0 3em 5em -1.6em rgba(0,0,0,.95),
               0 0 0 1px rgba(255,255,255,.06),
               0 0 5em -1.4em rgba(45,91,255,.9);
    transform:rotate(-4deg)}
  .ez-phone__screen{border-radius:1.15em;overflow:hidden;background:#fff;
    display:flex;flex-direction:column}
  .ez-phone__bar{display:flex;align-items:center;gap:.4em;
    padding:.7em .7em .55em;background:#fff}
  .ez-phone__shot{position:relative;aspect-ratio:4/3;overflow:hidden;
    background:linear-gradient(158deg,#22345f,#9fb0cf)}
  .ez-phone__copy{padding:.7em .7em 1em;display:flex;flex-direction:column;
    gap:.6em;align-items:flex-start}
  .ez-phone__copy h4{margin:0;font-family:var(--sc-font-display);font-weight:800;
    font-size:.86em;line-height:1.06;letter-spacing:-.02em;color:#0f1734}
  .ez-phone__copy .ez-ui-btn{margin-left:0}

  /* The system, talking. Three of them, stacked, arriving one at a time after
     the site is assembled and then holding. Cyan because the brand reserves it
     for AI that is actually live. */
  .ez-pings{display:grid;position:absolute;z-index:3;
    right:-22%;top:9%;gap:.75rem;justify-items:end}
  .ez-ping{display:grid;grid-template-columns:auto 1fr;gap:.05rem .55rem;
    align-items:center;opacity:0;
    padding:.7rem 1rem;border-radius:var(--sc-r-md);
    background:rgba(10,14,46,.78);backdrop-filter:blur(14px);
    border:1px solid rgba(0,212,255,.34);
    box-shadow:0 1.4rem 3rem -1rem rgba(0,0,0,.85),
               0 0 2.4rem -1rem rgba(0,212,255,.55)}
  .ez-ping__dot{grid-row:1/3;width:.5rem;height:.5rem;border-radius:50%;
    background:var(--ez-cyan);box-shadow:0 0 0 .3rem rgba(0,212,255,.18)}
  .ez-ping__t{font-family:var(--sc-font-display);font-weight:700;
    font-size:var(--sc-t-sm);color:var(--sc-ink);letter-spacing:-.01em;
    white-space:nowrap}
  .ez-ping__s{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
    color:var(--ez-cyan);letter-spacing:.06em;white-space:nowrap}
  .ez-ping__t{white-space:nowrap}
}

/* ==========================================================================
   5 · WHO — the quiet one
   Amber, because the brand reserves it for human. Low motion by design: this
   act exists to make the close feel like a decision rather than a crescendo.
   ========================================================================== */
.ez-human{position:relative;background:linear-gradient(180deg,#080d2b,#0b1136 55%,#070b25);
  padding-block:clamp(4rem,11vh,8rem)}
.ez-human__inner{position:relative;z-index:2;display:grid;gap:var(--sc-6);
  align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .ez-human__inner{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
    gap:var(--sc-7)}
}
.ez-human__photo{margin:0;position:relative;justify-self:center;
  width:min(380px,76vw)}
/* A warm floor light rather than a cut-out floating in space. Amber, low, and
   behind him, so the photograph sits in the page instead of on it. */
.ez-human__photo::before{content:"";position:absolute;inset:auto 4% -6% 4%;
  height:62%;border-radius:50%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(245,166,35,.30),transparent 70%);
  filter:blur(14px)}
.ez-human__photo img{position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 1.6rem 2.4rem rgba(0,0,0,.75));
  /* The shoulders end on a hard horizontal cut. Fading them into the ground
     turns a crop into a decision. */
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 98%);
          mask-image:linear-gradient(180deg,#000 66%,transparent 98%)}
.ez-human__copy{display:grid;gap:var(--sc-4);justify-items:start}
.ez-human h2{margin:0;font-size:clamp(1.7rem,1rem+1.9vw,2.5rem);line-height:1.06}
.ez-human h2 em{font-style:normal;
  background:linear-gradient(100deg,var(--sc-ink) 20%,#ffcf7a 70%,var(--ez-amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ez-human .ez-body{max-width:52ch}
.ez-human__sign{margin:var(--sc-3) 0 0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.4rem 1rem;padding-top:var(--sc-4);
  border-top:1px solid var(--ez-line);width:100%}
.ez-human__sign b{font-family:var(--sc-font-display);font-weight:700;
  font-size:var(--sc-t-lg);color:var(--sc-ink)}
.ez-human__sign span{font-family:var(--sc-font-text);font-size:var(--sc-t-sm);
  color:var(--sc-ink-soft)}
.ez-human__sign a{margin-left:auto;font-family:var(--sc-font-mono);
  font-size:var(--sc-t-sm);color:var(--ez-amber);text-decoration:none;
  border-bottom:1px solid rgba(245,166,35,.4);padding-bottom:.15em}
.ez-human__sign a:hover{border-bottom-color:var(--ez-amber)}

/* ==========================================================================
   THE EMBED SLOT
   Holds a GoHighLevel form or calendar widget when one is pasted in, and the
   native form when one is not. GHL ships its own light styling inside an
   iframe, so the job here is to give it a frame that belongs to this page and
   to stop a tall widget bursting out of a pinned act.
   ========================================================================== */
.ez-embed{width:100%;display:grid;justify-items:center}
.ez-embed iframe{width:100%!important;max-width:38rem;border:0;
  border-radius:var(--sc-r-md);background:#fff;
  box-shadow:0 1.6rem 3.4rem -1.4rem rgba(0,0,0,.8)}
/* A booking calendar is much taller than a form. Inside a pinned stage it has
   to be bounded or it simply runs off the screen. */
.ez-close .ez-embed{max-height:min(62vh,640px);overflow:auto;overscroll-behavior:contain}