/* ═══════════════════════════════════════════════════════════════════════════
   ENI — LANDING PAGE
   Self-contained. This page deliberately does NOT load eni.css or eni.js:
   the old build's scroll choreography was ~92KB of CSS+JS for sections this
   page no longer has. All it needs is this sheet and the showcase widget.

   Structure is one idea: wordmark, then the product running, then a way in.
   ═══════════════════════════════════════════════════════════════════════════ */

*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --void:#08060d;  --ink:#0d0916;   --ink-2:#130d22;
  --line:#241a3a;  --line-2:#33254f;
  --violet:#7b2fd5; --violet-2:#8b40ff; --orchid:#b48bff; --uv:#ddc9ff;
  --paper:#efe8ff; --mute:#9082ad;  --mute-2:#6d6088;
  --acid:#c6f24e;

  /* the loader's action gradient, verbatim — the site and the product should
     use exactly the same one */
  --act:    linear-gradient(100deg, #6E2BD0 0%, #9B3BE0 46%, #DC4FD6 100%);
  --act-lo: 0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 30px -10px rgba(150,50,220,.80);
  --act-hi: 0 0 0 1px rgba(255,255,255,.18) inset, 0 16px 44px -10px rgba(185,70,245,.95);

  --fD:"Chakra Petch","Archivo","Helvetica Neue",Arial,sans-serif;
  --fB:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --fM:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gut:clamp(18px,4vw,44px);
  --maxw:1180px;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--void); color:var(--paper);
  font-family:var(--fB); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(155,59,224,.45); color:#fff; }
:focus-visible{ outline:2px solid var(--orchid); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ── buttons ──────────────────────────────────────────────────────────────*/
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:13px 22px; border-radius:10px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line-2); background:transparent; color:var(--paper);
  font-family:var(--fD); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  cursor:pointer; white-space:nowrap;
  transition:border-color .28s, background .28s, color .28s, box-shadow .3s,
             filter .3s, transform .12s;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn:hover{ border-color:var(--violet-2); background:rgba(139,64,255,.12); color:#fff; }
.btn:active{ transform:translateY(1px); }

.btn--act{
  border-color:transparent; color:#fff;
  background:var(--act); background-size:170% 100%;
  box-shadow:var(--act-lo);
}
.btn--act:hover{
  background-position:100% 0; filter:brightness(1.07);
  border-color:transparent; color:#fff; box-shadow:var(--act-hi);
}
/* the sheen from the loader's Activate button — only ever on the primary */
.btn--act::after{
  content:""; position:absolute; inset:0 auto 0 0; width:34%; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:sheen 3.6s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes sheen{
  0%      { transform:translateX(-140%) skewX(-18deg); }
  62%,100%{ transform:translateX(430%)  skewX(-18deg); }
}
.btn--big{ padding:17px 30px; font-size:16px; border-radius:12px; }

/* ── header ───────────────────────────────────────────────────────────────*/
.hd{
  position:sticky; top:0; z-index:50;
  background:rgba(8,6,13,.72); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(36,26,58,.9);
}
.hd__in{
  display:flex; align-items:center; gap:16px; height:66px;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}
.hd__brand{
  font-family:var(--fD); font-weight:700; font-size:22px; letter-spacing:.24em;
  background:var(--act); -webkit-background-clip:text; background-clip:text;
  color:transparent; filter:drop-shadow(0 0 18px rgba(160,60,230,.55));
}
.hd__act{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.hd__act .btn{ padding:9px 16px; font-size:13.5px; }

/* ── hero ─────────────────────────────────────────────────────────────────*/
.hero{ position:relative; text-align:center; padding:clamp(52px,9vw,104px) 0 clamp(30px,4vw,44px); }
.hero::before{                      /* the bloom the loader window sits in */
  content:""; position:absolute; left:50%; top:-14%;
  width:min(1000px,110%); height:150%; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
             rgba(150,60,230,.26), rgba(120,45,205,.08) 46%, transparent 72%);
  filter:blur(30px);
  animation:bloom 15s ease-in-out infinite;
}
@keyframes bloom{
  0%,100%{ opacity:.75; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.08); }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fM); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--mute-2);
}
.eyebrow i{
  width:6px; height:6px; background:var(--acid); border-radius:1px;
  box-shadow:0 0 10px rgba(198,242,78,.7);
}
.hero__mark{
  display:block; margin:clamp(16px,2.4vw,26px) 0 0;
  font-family:var(--fD); font-weight:700; line-height:.9;
  font-size:clamp(88px,17vw,208px); letter-spacing:.10em; text-indent:.10em;
  background:var(--act); -webkit-background-clip:text; background-clip:text;
  color:transparent; filter:drop-shadow(0 0 60px rgba(160,60,230,.45));
}
.hero__sub{
  margin:clamp(14px,2vw,22px) auto 0; max-width:58ch;
  font-size:clamp(15.5px,1.5vw,18px); color:var(--mute); line-height:1.62;
}
.hero__sub b{ color:var(--uv); font-weight:600; }
.hero__acts{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(24px,3.2vw,34px);
}

/* ── preview ──────────────────────────────────────────────────────────────*/
.pv{ padding:clamp(10px,2vw,22px) 0 clamp(46px,7vw,86px); }
.pv__cap{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:clamp(16px,2.4vw,26px);
  font-family:var(--fM); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute-2); text-align:center;
}
.pv__cap span{ color:var(--orchid); }
.pv__rule{ flex:1; max-width:90px; height:1px; background:var(--line); }

/* ── footer ───────────────────────────────────────────────────────────────*/
.ft{ border-top:1px solid var(--line); padding:30px 0 44px; }
.ft__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  font-family:var(--fM); font-size:11.5px; color:var(--mute-2); letter-spacing:.04em;
}
.ft__in a{ color:var(--mute); }
.ft__in a:hover{ color:var(--orchid); }
.ft__sp{ margin-left:auto; }
.ft__law{
  margin-top:16px; padding-top:16px; border-top:1px solid rgba(36,26,58,.7);
  font-size:12.5px; line-height:1.65; color:var(--mute-2); max-width:78ch;
  font-family:var(--fB);
}
.ft__law b{ color:var(--mute); font-weight:600; }

/* ── responsive ───────────────────────────────────────────────────────────*/
@media (max-width:640px){
  .hd__in{ height:60px; gap:10px; }
  .hd__brand{ font-size:19px; letter-spacing:.2em; }
  .hd__act .btn{ padding:8px 13px; font-size:12.5px; }
  .hero__acts .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn--act::after{ animation:none; opacity:0; }
  .hero::before{ animation:none; }
}