/* ══════════════════════════════════════════════════════════════
   CLAUDPHIC — HERO (wave / particle-field design)
   ──────────────────────────────────────────────────────────────
   Ported from the supplied claudphic-wave-landing design.

   Deliberately changed from the source file, so it drops into the
   existing site without disturbing anything else:
     • no :root / * / body / a resets — those would restyle the
       whole site; the hero's own faces are scoped to #hero
     • no .site-header rules — the site already has its own nav
     • no .below-fold rules — that was the demo's filler section
     • .wave-canvas and .ambient are absolute INSIDE #hero rather
       than fixed to the viewport, so they stop at the hero's edge
       instead of sitting behind every section on the page
     • every colour reads from a theme token, so the hero flips
       with the rest of the site
   ══════════════════════════════════════════════════════════════ */

#hero{
  isolation:isolate;position:relative;z-index:1;
  min-height:100svh;height:887px;max-height:1100px;overflow:hidden;
  font-family:var(--hero-sans);
  background:var(--bg);
}
/* the particle field */
#hero .wave-canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;display:block}
/* scrim: sits above the canvas, below the copy — same gradient as the design */
#hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,rgba(var(--bg-rgb),.19),transparent 40%),
             linear-gradient(180deg,rgba(var(--bg-rgb),.35),rgba(var(--bg-rgb),.04) 55%,rgba(var(--bg-rgb),.14));
}
#hero .ambient{position:absolute;z-index:0;pointer-events:none;filter:blur(90px);border-radius:50%}
#hero .ambient-blue{width:34vw;height:25vh;left:-14vw;top:30vh;background:var(--buyer-deep);opacity:.1}
#hero .ambient-teal{width:30vw;height:30vh;right:-13vw;top:45vh;background:var(--seller);opacity:.07}
html[data-theme="light"] #hero .ambient-blue{opacity:.07}
html[data-theme="light"] #hero .ambient-teal{opacity:.06}

/* ── headline block ───────────────────────────────────────── */
.hero-copy{position:absolute;z-index:2;top:14.2%;left:50%;width:min(1060px,92vw);transform:translateX(-50%);text-align:center}
.hero-eyebrow{
  height:40px;width:max-content;max-width:90%;margin:0 auto 17px;padding:0 24px;
  display:flex;align-items:center;justify-content:center;gap:17px;
  border:1px solid var(--glass-brd);border-radius:30px;background:rgba(var(--bg-rgb),.46);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:400 11px/1 var(--hero-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);
}
.hero-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--seller);
  box-shadow:0 0 13px color-mix(in srgb,var(--seller) 45%,transparent);animation:blink 1.8s infinite}
.hero-copy h1{margin:0;color:var(--ink);font:400 clamp(58px,5.45vw,99px)/.96 var(--hero-display);letter-spacing:-.045em}
.hero-copy h1 .grad{
  display:inline-block;padding:0 .04em .05em;
  background:linear-gradient(95deg,var(--hero-g1) 2%,var(--hero-g2) 36%,var(--hero-g3) 91%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy p{margin:22px auto 0;max-width:720px;color:var(--ink-dim);font-size:17px;line-height:1.55;letter-spacing:.025em}
:root,html[data-theme="dark"]{--hero-g1:#2e9aff;--hero-g2:#9772ff;--hero-g3:#43efcf}
html[data-theme="light"]{--hero-g1:#1565e8;--hero-g2:#6f3fd6;--hero-g3:#089b78}

/* ── decorative corner marks ──────────────────────────────── */
.hero-orbit{position:absolute;z-index:3;left:1.7%;top:10.25%;width:39px;height:39px;
  border:1px solid rgba(var(--fg-rgb),.5);border-radius:50%;display:grid;place-items:center}
.hero-orbit span{width:6px;height:6px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 10px rgba(var(--ink-rgb),.8)}
.hero-focus-note{position:absolute;z-index:3;right:2.3%;top:12.1%;display:grid;gap:9px;
  color:var(--ink-faint);font:400 9px/1 var(--hero-mono);letter-spacing:.16em;text-transform:uppercase}
.hero-focus-note i{width:24px;height:1px;margin-top:11px;background:rgba(var(--fg-rgb),.38)}

/* ── BUILD / GROWTH markers ───────────────────────────────── */
.wave-marker{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  font:600 19px/1 var(--hero-sans);letter-spacing:.1em;text-transform:uppercase}
.wave-marker i{position:relative;display:block;width:90px;height:1px;background:currentColor;opacity:.65}
.wave-marker i::before{content:"";position:absolute;top:-5px;left:-1px;width:11px;height:11px;border-radius:50%;
  background:currentColor;box-shadow:0 0 15px currentColor}
.marker-build{left:19.55%;top:37.8%;color:var(--hero-mark-b)}
.marker-growth{right:18.2%;top:40%;color:var(--hero-mark-g)}
:root,html[data-theme="dark"]{--hero-mark-b:#7183ff;--hero-mark-g:#43eed0}
html[data-theme="light"]{--hero-mark-b:#4a53e8;--hero-mark-g:#0a9a77}

/* ── service rails ────────────────────────────────────────── */
.service-list{position:absolute;z-index:2;top:47.2%;width:172px}
.service-list-left{left:7.8%}
.service-list-right{right:7.7%;width:190px}
.service-list a{position:relative;display:flex;height:53px;align-items:center;gap:17px;
  border-bottom:1px solid rgba(var(--fg-rgb),.22);
  font:400 10px/1 var(--hero-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  transition:color .2s,border-color .2s}
.service-list a:hover{color:var(--ink);border-color:var(--seller)}
.service-list a > i{position:absolute;right:-5px;width:8px;height:8px;border-radius:50%;
  background:var(--hero-mark-b);box-shadow:0 0 10px color-mix(in srgb,var(--hero-mark-b) 50%,transparent)}
.service-list-right a > i{left:-32px;right:auto;background:var(--hero-mark-g);
  box-shadow:0 0 10px color-mix(in srgb,var(--hero-mark-g) 50%,transparent)}
.service-icon{width:23px;height:23px;flex:none;display:grid;place-items:center;color:var(--hero-mark-b)}
.service-icon svg{width:100%;height:100%;display:block;overflow:visible}
.service-list-right .service-icon{color:var(--hero-mark-g)}

/* ── bottom marks ─────────────────────────────────────────── */
.side-caption{position:absolute;z-index:2;bottom:8.1%;display:flex;gap:33px;align-items:flex-start;
  color:var(--ink-faint);font:400 10px/1.75 var(--hero-mono);letter-spacing:.19em;text-transform:uppercase}
.side-caption i{display:block;width:1px;height:67px;background:rgba(var(--fg-rgb),.38)}
.side-caption-left{left:1.7%}
.side-caption-right{right:1.7%}
.journey{position:absolute;z-index:2;left:50%;bottom:17.4%;transform:translateX(-50%);
  display:flex;align-items:center;gap:22px;color:var(--ink-dim);
  font:400 10px/1 var(--hero-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.journey b{font:400 14px/1 var(--hero-sans);color:var(--seller)}
.hero-scroll{position:absolute;z-index:3;left:50%;bottom:5.9%;transform:translateX(-50%);
  width:29px;height:46px;border:1px solid rgba(var(--fg-rgb),.5);border-radius:20px;
  display:grid;place-items:start center;padding-top:13px;transition:border-color .2s}
.hero-scroll::after{content:"";position:absolute;top:calc(100% + 17px);left:50%;width:1px;height:45px;
  background:linear-gradient(rgba(var(--fg-rgb),.45),transparent)}
.hero-scroll span{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:scroll-dot 1.7s ease-in-out infinite}
.hero-scroll:hover{border-color:var(--seller)}
@keyframes scroll-dot{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(10px);opacity:.4}}

/* ── responsive (as supplied, retargeted to the new classnames) ── */
@media (min-width:1500px){
  .hero-copy{top:14.3%}
  .hero-copy h1{font-size:clamp(88px,5.45vw,104px)}
}
@media (max-width:1100px){
  .service-list-left{left:4.5%}
  .service-list-right{right:4.2%}
  .marker-build{left:22%}
  .marker-growth{right:20%}
  .hero-copy h1{font-size:clamp(60px,7.3vw,82px)}
  .hero-copy{top:16%}
  .hero-copy p{font-size:15px}
}
@media (max-width:760px){
  #hero{height:100svh;min-height:720px;max-height:980px}
  .hero-copy{top:17%;width:calc(100% - 28px)}
  .hero-eyebrow{height:34px;padding:0 14px;gap:10px;font-size:8px;letter-spacing:.14em}
  .hero-copy h1{font-size:clamp(49px,10.7vw,76px);line-height:.98}
  .hero-copy p{font-size:13px;line-height:1.65;margin-top:18px}
  .desktop-break{display:none}
  .hero-focus-note,.hero-orbit{display:none}
  .service-list{top:auto;bottom:23%;width:39%}
  .service-list-left{left:5%}
  .service-list-right{right:5%;width:39%}
  .service-list a{height:41px;gap:8px;font-size:8px;letter-spacing:.08em}
  .service-icon{width:18px;height:18px}
  .service-list a > i{display:none}
  .wave-marker{top:auto;bottom:42%;font-size:13px}
  .marker-build{left:28%}
  .marker-growth{right:26%}
  .wave-marker i{width:50px}
  .side-caption{bottom:5%;gap:10px;font-size:7px;letter-spacing:.1em;line-height:1.6}
  .side-caption i{height:49px}
  .side-caption-left{left:4%}
  .side-caption-right{right:4%}
  .journey{bottom:13%;gap:9px;font-size:7px;letter-spacing:.08em}
  .journey b{font-size:11px}
  .hero-scroll{bottom:3%;width:24px;height:36px;padding-top:9px}
  .hero-scroll::after{height:24px;top:calc(100% + 9px)}
}
@media (max-width:430px){
  #hero{min-height:700px}
  .hero-copy{top:18%}
  .hero-copy h1{font-size:48px}
  .hero-copy p{max-width:320px}
  .service-list{bottom:24%;width:42%}
  .service-list-left{left:4%}
  .service-list-right{right:3%;width:42%}
  .service-list a{font-size:7px;letter-spacing:.07em}
  .wave-marker{font-size:11px}
  .marker-build{left:25%}
  .marker-growth{right:21%}
  .side-caption{font-size:6px;gap:7px}
  .journey{gap:6px;font-size:6px}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll span,.hero-dot{animation:none}
}