/* ==========================================================================
   Components — global UI (spec §4) and reusable pattern scaffolding (P1–P10)
   ========================================================================== */

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  --btn-bg:var(--accent-fill); --btn-fg:var(--accent-ink); --btn-line:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:48px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-line);
  font:600 15px/1 var(--font-body); letter-spacing:.005em; white-space:nowrap;
  transition:background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  isolation:isolate; overflow:hidden;
}
.btn::before{ /* sheen */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover::before{ transform:translateX(120%); }
.btn:hover{ background:color-mix(in srgb, var(--btn-bg) 85%, #fff); }
.btn .ti{ font-size:18px; transition:transform var(--dur-ui) var(--ease-out); }
.btn:hover .ti-arrow-right, .btn:hover .ti-arrow-up-right{ transform:translateX(3px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-line:var(--line-strong); }
.btn--ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--accent); }
.btn--sm{ min-height:40px; padding:0 16px; font-size:14px; }
.btn--lg{ min-height:60px; padding:0 30px; font-size:17px; }
.btn--evl{ --btn-bg:var(--evl-green); --btn-fg:#0A0A0B; }
/* EVL zones: one green primary per view — header CTA steps back to ghost */
.is-evl .site-header .btn{ --btn-bg:transparent; --btn-fg:var(--text); --btn-line:var(--line-strong); }
/* …except on the EVL product page: header CTA mirrors evl.company ("Talk to sales", green, Poppins) */
.evl-page :is(.site-header, .mobile-menu) .btn--evl{ --btn-bg:var(--evl-green); --btn-fg:#0A0A0B; --btn-line:var(--evl-green); border-radius:10px; font-family:"Poppins", var(--font-body); }

.link-arrow{ display:inline-flex; align-items:center; gap:.4em; color:var(--accent); font-weight:600; }
.link-arrow .ti{ transition:transform var(--dur-ui) var(--ease-out); }
.link-arrow:hover .ti{ transform:translate(2px,-2px); }

/* ---- Chips ------------------------------------------------------------ */
.chip{
  display:inline-flex; align-items:center; gap:.5em; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  font:500 13px/1 var(--font-mono); letter-spacing:.04em; color:var(--text-2);
}
.chip .ti{ color:var(--accent); font-size:16px; }

/* ---- Cards ------------------------------------------------------------ */
.card{
  position:relative; background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-3);
  padding:clamp(22px, 2.4vw, 32px); box-shadow:var(--shadow-card);
  transition:transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.card__icon{
  width:48px; height:48px; border-radius:var(--r-2); display:grid; place-items:center;
  background:rgba(42,159,216,.1); border:1px solid rgba(42,159,216,.25); color:var(--accent); font-size:24px;
}
.glass{ background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--line-strong); }

/* ---- Logo (client PNG used as a mask: exact shapes, tintable) ---------- */
.logo{ display:inline-flex; flex-direction:column; gap:6px; color:var(--logo-color); }
.logo__img{
  display:block; width:var(--logo-w, 132px); aspect-ratio:1024/328; background:currentColor;
  -webkit-mask:url("../img/brand/innovde-logo.png") center/contain no-repeat;
          mask:url("../img/brand/innovde-logo.png") center/contain no-repeat;
}
.logo__tag{ font:500 9.5px/1 var(--font-mono); letter-spacing:.2em; color:var(--text-3); text-transform:uppercase; }
.logo-mark{
  display:block; width:var(--mark-w, 48px); aspect-ratio:300/312; background:currentColor;
  -webkit-mask:url("../img/brand/innovde-mark.png") center/contain no-repeat;
          mask:url("../img/brand/innovde-mark.png") center/contain no-repeat;
}

/* ---- Header (§4.2) ---------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:500; height:var(--header-h);
  transition:transform .45s var(--ease-out), background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(5,9,18,.6); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.is-evl .site-header.is-scrolled{ background:rgba(10,10,11,.6); }
.is-hr .site-header.is-scrolled{ background:rgba(7,10,31,.62); }
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header .logo{ --logo-w:118px; flex:none; }

.nav{ position:relative; }
.nav__list{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:4px; height:40px; padding:0 11px;
  font:500 14px/1 var(--font-body); color:var(--text-2); border-radius:var(--r-1);
  transition:color var(--dur-ui) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__item.is-open > .nav__link{ color:var(--text); }
.nav__link .ti{ font-size:15px; transition:transform var(--dur-ui) var(--ease-out); }
.nav__item.is-open > .nav__toggle .ti{ transform:rotate(180deg); }
.nav__toggle{ padding:0 8px 0 2px; margin-left:-8px; }
.nav__indicator{
  position:absolute; left:0; bottom:2px; height:2px; width:0; border-radius:2px;
  background:var(--brand-bright); pointer-events:none; opacity:0;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out), opacity .2s;
}
.is-evl .nav__indicator{ background:var(--evl-green); }
.is-hr .nav__indicator{ background:var(--hr-grad); }

/* Mega menu */
.nav__item--mega{ position:static; }
.site-header__inner{ position:relative; }
/* three product cards: centred under the header container so it never runs off-screen */
.mega{
  position:absolute; top:calc(100% - 4px); left:50%; width:min(900px, calc(100vw - 32px));
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding:12px; border-radius:var(--r-3);
  background:rgba(10,17,32,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--line-strong); box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transform:translate(-50%, -8px);
  transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.mega::before{ content:""; position:absolute; inset:-16px 0 auto; height:16px; } /* hover bridge (stops below the nav link) */
.nav__item.is-open .mega{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
.mega__card{
  display:grid; gap:10px; padding:16px; border-radius:var(--r-2); border:1px solid var(--line);
  background:var(--ink-800); transition:border-color var(--dur-ui), transform var(--dur-ui) var(--ease-out);
}
.mega__card:hover, .mega__card:focus-visible{ transform:translateY(-2px); }
.mega__card--erp:hover, .mega__card--erp:focus-visible{ border-color:var(--brand-bright); }
.mega__card--hr{ background:linear-gradient(160deg, #10153a, #0b0f26); }
.mega__card--hr:hover, .mega__card--hr:focus-visible{ border-color:var(--hr-blue); }
.mega__card--hr .mega__tag{ color:var(--hr-cyan); }
.mega__card--evl{ background:#101112; }
.mega__card--evl:hover, .mega__card--evl:focus-visible{ border-color:var(--evl-green); }
.mega__visual{ height:96px; border-radius:var(--r-1); overflow:hidden; position:relative; }
.mega__tag{ font:500 11px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; }
.mega__card--erp .mega__tag{ color:var(--cyan); }
.mega__card--evl .mega__tag{ color:var(--evl-green); }
.mega__title{ display:flex; align-items:center; gap:9px; font:600 17px/1.2 var(--font-display); color:var(--text); }
.mega__mark, .mega__mark img{ display:block; flex:none; width:20px; height:20px; object-fit:contain; }
.mega__mark--evl, .mega__mark--evl img{ width:22px; height:auto; }
.mega__text{ font-size:13.5px; line-height:1.45; color:var(--text-2); }
/* mini visuals (CSS only) */
.mini-erp{ background:linear-gradient(180deg,#0d1a33,#0a1120); display:grid; grid-template-columns:22px 1fr; gap:6px; padding:8px; }
.mini-erp__side{ border-radius:4px; background:rgba(255,255,255,.05); }
.mini-erp__main{ display:grid; grid-template-rows:auto 1fr; gap:6px; }
.mini-erp__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.mini-erp__kpis i{ height:16px; border-radius:3px; background:rgba(42,159,216,.18); }
.mini-erp__bars{ display:flex; align-items:flex-end; gap:4px; }
.mini-erp__bars i{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg,var(--brand-bright),rgba(4,111,164,.3)); }
.mini-hr{ background:linear-gradient(180deg,#0e1338,#090c22); display:grid; grid-template-columns:repeat(7, 1fr); grid-auto-rows:1fr; gap:5px; padding:12px; }
.mini-hr i{ border-radius:4px; background:rgba(255,255,255,.06); }
.mini-hr i.s1{ background:linear-gradient(135deg, rgba(0,229,255,.55), rgba(77,124,255,.55)); }
.mini-hr i.s2{ background:rgba(255,184,77,.6); }
.mini-hr i.s3{ background:rgba(167,139,250,.6); }
.mini-hr i.s4{ background:rgba(255,99,99,.55); }
.mega__card--hr:hover .mini-hr i.s1{ animation:hrCell 1.6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * 60ms); }
@keyframes hrCell{ 50%{ opacity:.55; } }
.mini-evl{ background:#0A0A0B; display:grid; place-items:center; }
.mini-evl::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='52' viewBox='0 0 30 52'><path d='M7.5 0h15L30 13 22.5 26h-15L0 13zM7.5 26h15L30 39l-7.5 13h-15L0 39z' fill='none' stroke='white' stroke-opacity='.08'/></svg>"); background-size:30px 52px; }
.mini-evl svg{ position:relative; width:64px; height:64px; }

/* Header actions */
.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.lang-switch{ position:relative; }
.lang-switch summary{ display:inline-flex; align-items:center; gap:7px; list-style:none; cursor:pointer; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:8px 12px; font:500 12px/1 var(--font-mono); letter-spacing:.08em; color:var(--text); transition:background-color var(--dur-ui); }
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary:hover, .lang-switch[open] summary{ background:rgba(255,255,255,.08); }
.lang-switch summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lang-switch__caret{ font-size:12px; transition:transform var(--dur-ui); }
.lang-switch[open] .lang-switch__caret{ transform:rotate(180deg); }
.lang-switch__menu{ position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:60; min-width:150px; margin:0; padding:6px; list-style:none; background:var(--ink-800); border:1px solid var(--line-strong); border-radius:var(--r-2); box-shadow:0 20px 40px -16px rgba(0,0,0,.8); }
.lang-switch__menu a{ display:block; padding:10px 12px; border-radius:var(--r-1); font:500 14px/1.2 var(--font-body); color:var(--text-2); }
.lang-switch__menu a:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.lang-switch__menu a[aria-current="true"]{ color:var(--text); background:rgba(255,255,255,.08); }
.mobile-menu__foot .lang-switch__menu{ top:auto; bottom:calc(100% + 8px); }

.burger{ display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); place-items:center; position:relative; }
.burger span{ position:absolute; left:13px; right:13px; height:1.5px; background:var(--text); border-radius:2px; transition:transform .4s var(--ease-out), top .4s var(--ease-out); }
.burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ top:21px; transform:rotate(-45deg); }

@media (max-width:1240px){
  .nav, .header-actions .lang-switch, .header-actions .btn{ display:none; }
  .burger{ display:grid; }
}

/* Mobile overlay menu */
.mobile-menu{
  position:fixed; inset:0; z-index:490; background:rgba(5,9,18,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:calc(var(--header-h) + 24px) var(--gutter) 28px; display:flex; flex-direction:column; gap:28px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease-out), visibility 0s linear .35s;
  overflow-y:auto; overscroll-behavior:contain;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.mobile-menu__list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.mobile-menu__link{ display:flex; align-items:baseline; gap:14px; padding:8px 0; font:600 clamp(28px, 8vw, 44px)/1.1 var(--font-display); letter-spacing:-.02em; color:var(--text); }
.mobile-menu__link small{ font:500 11px/1 var(--font-mono); color:var(--cyan); letter-spacing:.14em; }
.mobile-menu__link[aria-current="page"]{ color:var(--brand-bright); }
.mobile-menu__sub{ list-style:none; margin:0 0 8px 34px; padding:0; display:grid; gap:2px; }
.mobile-menu__sub a{ display:block; padding:6px 0; font:500 18px/1.3 var(--font-display); color:var(--text-2); }
.mobile-menu__foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }

/* ---- Footer (§4.3) ---------------------------------------------------- */
.site-footer{ position:relative; overflow:hidden; background:var(--ink-950); border-top:1px solid var(--line); padding-top:clamp(64px, 8vw, 110px); }
.is-evl .site-footer{ background:var(--evl-page); }
.is-hr .site-footer{ background:var(--hr-page); }
.footer-grid{ display:grid; gap:40px; grid-template-columns:1.3fr 1fr 1.2fr .9fr .8fr; }
@media (max-width:1100px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .logo{ --logo-w:150px; }
.footer-brand p{ margin-top:18px; color:var(--text-2); font-size:15px; max-width:34ch; }
.footer-col h2{ font:500 12px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col a{ color:var(--text-2); font-size:15px; display:inline-flex; align-items:center; gap:10px; transition:color var(--dur-ui); }
.footer-col a:hover{ color:var(--text); }
.footer-col .ti{ font-size:18px; color:var(--brand-bright); }
.footer-bottom{ margin-top:64px; padding-block:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; font-size:13.5px; color:var(--text-3); }
.footer-bottom nav{ display:flex; gap:22px; }
.footer-bottom a:hover{ color:var(--text); }
.footer-wave{
  /* closing band: perspective dot-wave canvas (core.js → initFooterWave) */
  --wave:42,159,216; --wave-hi:63,208,224;
  position:relative; height:clamp(120px, 14vw, 210px); margin-top:clamp(8px, 2vw, 24px); pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent, #000 35%); mask-image:linear-gradient(transparent, #000 35%);
}
.is-evl .footer-wave{ --wave:81,255,140; --wave-hi:170,255,200; }
.is-hr .footer-wave{ --wave:77,124,255; --wave-hi:0,229,255; }
.footer-wave::before{ content:""; position:absolute; inset:auto 0 0; height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(var(--wave),.10), transparent 70%); }
.footer-wave canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---- Modal (§4.4) ----------------------------------------------------- */
.modal{
  width:min(640px, calc(100vw - 32px)); max-height:min(92vh, 900px); padding:0; border:1px solid var(--line-strong);
  border-radius:var(--r-4); background:var(--ink-900); color:var(--text); box-shadow:0 40px 120px -20px rgba(0,0,0,.9);
  overflow:auto; overscroll-behavior:contain;
}
.modal::backdrop{ background:rgba(3,6,12,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal[open]{ animation:modalIn .5s var(--ease-out); }
.modal[open]::backdrop{ animation:fadeIn .4s var(--ease-out); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.98); } }
@keyframes fadeIn{ from{ opacity:0; } }
.modal__head{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:28px 28px 8px; background:linear-gradient(var(--ink-900) 80%, transparent); }
.modal__title{ font:600 clamp(24px, 3vw, 32px)/1.1 var(--font-display); letter-spacing:-.02em; }
.modal__close{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; font-size:20px; transition:border-color var(--dur-ui), transform var(--dur-ui) var(--ease-out); }
.modal__close:hover{ border-color:var(--accent); transform:rotate(90deg); }
.modal__body{ padding:8px 28px 28px; }
@media (max-width:560px){ .modal__head{ padding:22px 20px 6px; } .modal__body{ padding:6px 20px 22px; } }

/* ---- Form fields (floating labels) ------------------------------------ */
.form{ display:grid; gap:14px; }
.form__row{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.field{ position:relative; }
.field__input{
  width:100%; min-height:58px; padding:24px 16px 8px; border-radius:var(--r-2);
  background:var(--ink-700); border:1px solid var(--line); color:var(--text); font-size:16px;
  transition:border-color var(--dur-ui), box-shadow var(--dur-ui);
  appearance:none; -webkit-appearance:none;
}
textarea.field__input{ min-height:130px; resize:vertical; padding-top:28px; line-height:1.5; }
select.field__input{ padding-right:44px; cursor:pointer; }
.field--select::after{ content:"\ea5f"; font-family:"tabler-icons"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; font-size:18px; }
.field__label{
  position:absolute; left:17px; top:19px; color:var(--text-3); font-size:15px; pointer-events:none;
  transform-origin:left top; transition:transform .25s var(--ease-out), color .25s;
}
.field__input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,159,216,.18); }
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
select.field__input + .field__label{ transform:translateY(-10px) scale(.78); color:var(--text-2); }
.field__input:focus + .field__label{ color:var(--accent); }
.field.is-invalid .field__input{ border-color:#ff6b7a; }
.field__error{ display:none; margin-top:6px; font-size:13px; color:#ff8a96; }
.is-invalid .field__error{ display:block; }
.field select option{ background:var(--ink-800); color:var(--text); }

.check{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:14px; color:var(--text-2); line-height:1.5; cursor:pointer; }
.check input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:1px 0 0; border-radius:6px; border:1px solid var(--line-strong); background:var(--ink-700); display:grid; place-items:center; cursor:pointer; transition:background-color var(--dur-ui), border-color var(--dur-ui); }
.check input::after{ content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px) scale(0); transition:transform .2s var(--ease-out); }
.check input:checked{ background:var(--brand); border-color:var(--brand); }
.check input:checked::after{ transform:rotate(-45deg) translate(1px,-1px) scale(1); }
.check a{ color:var(--brand-bright); text-decoration:underline; text-underline-offset:3px; }
.check.is-invalid input{ border-color:#ff6b7a; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } /* honeypot */

.btn.is-loading{ pointer-events:none; color:transparent; }
.btn.is-loading::after{ content:""; position:absolute; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.success{ display:grid; justify-items:center; text-align:center; gap:16px; padding:32px 8px 12px; }
.success svg{ width:84px; height:84px; }
.success circle, .success path{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.success circle{ stroke-dasharray:240; stroke-dashoffset:240; opacity:.5; }
.success path{ stroke-dasharray:60; stroke-dashoffset:60; }
.success.is-in circle{ animation:draw .7s var(--ease-out) forwards; }
.success.is-in path{ animation:draw .45s .45s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---- Preloader (§4.1) ------------------------------------------------- */
.preloader{
  --hole:0px;
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; background:var(--ink-950);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask:radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.preloader__ring{ position:relative; width:132px; height:132px; display:grid; place-items:center; }
.preloader__ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.preloader__ring circle{ fill:none; stroke-width:2; }
.preloader__ring .track{ stroke:rgba(255,255,255,.08); }
.preloader__ring .bar{ stroke:var(--brand-bright); stroke-linecap:round; stroke-dasharray:377; stroke-dashoffset:377; filter:drop-shadow(0 0 6px rgba(42,159,216,.7)); }
.preloader .logo-mark{ --mark-w:46px; color:var(--brand-bright); clip-path:inset(100% 0 0 0); }
.preloader__pct{ position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); font:500 11px/1 var(--font-mono); letter-spacing:.2em; color:var(--text-3); }
html:not(.show-preloader) .preloader{ display:none; }

/* ---- Small things (§4.7) ---------------------------------------------- */
.scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:600; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }

.to-top{
  position:fixed; right:20px; bottom:20px; z-index:480; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:rgba(10,17,32,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); color:var(--text); font-size:20px;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur-ui), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
/* pinned scenes whose bottom-right corner holds content hide the button while pinned */
.hide-to-top .to-top.is-visible{ opacity:0; visibility:hidden; transform:translateY(12px); }
.to-top svg{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); pointer-events:none; }
.to-top circle{ fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:157; stroke-dashoffset:157; }
.to-top:hover .ti{ transform:translateY(-2px); }
.to-top .ti{ transition:transform var(--dur-ui) var(--ease-out); }

.cursor{ position:fixed; left:0; top:0; z-index:1500; pointer-events:none; display:none; }
/* popover UA reset (cursor lives in the top layer so it stays above modal dialogs) */
.cursor[popover]{ inset:auto; left:0; top:0; width:0; height:0; margin:0; padding:0; border:0; background:none; overflow:visible; color:inherit; }
.cursor[popover]::backdrop{ display:none; }
.has-cursor .cursor{ display:block; }
.cursor__dot, .cursor__ring{ position:fixed; left:0; top:0; border-radius:50%; will-change:transform; }
.cursor__dot{ width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--accent); }
.cursor__ring{
  width:36px; height:36px; margin:-18px 0 0 -18px; border:1px solid rgba(234,241,251,.45);
  display:grid; place-items:center; transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .35s, border-color .35s;
}
.cursor__label{ font:600 10.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-950); opacity:0; transition:opacity .2s; }
.cursor.is-link .cursor__ring{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--accent); }
.cursor.is-drag .cursor__ring{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--accent); border-color:var(--accent); }
.cursor.is-drag .cursor__label{ opacity:1; }
.cursor.is-drag .cursor__dot{ opacity:0; }
.has-cursor, .has-cursor a, .has-cursor button{ cursor:none; }
.has-cursor input, .has-cursor textarea, .has-cursor select{ cursor:auto; }

.toast{
  position:fixed; left:50%; bottom:28px; z-index:1600; transform:translate(-50%, 20px); opacity:0;
  padding:12px 18px; border-radius:var(--r-pill); background:var(--ink-700); border:1px solid var(--line-strong);
  font:500 14px/1 var(--font-body); display:flex; gap:8px; align-items:center; pointer-events:none;
  transition:opacity var(--dur-ui), transform var(--dur-ui) var(--ease-out);
}
.toast.is-in{ opacity:1; transform:translate(-50%, 0); }
.toast .ti{ color:var(--accent); font-size:18px; }

/* Page transitions (§4.7) */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .35s var(--ease-out) both; }
::view-transition-new(root){ animation:vtIn .55s var(--ease-out) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-12px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(16px); } }
@media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none; } }
.wipe{ position:fixed; inset:0; z-index:1900; background:var(--brand); transform:scaleY(0); transform-origin:50% 100%; pointer-events:none; }

/* ---- Plexus host (§4.8) ----------------------------------------------- */
.plexus{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.plexus canvas{ width:100%; height:100%; }
.plexus--faint{ opacity:.45; }

/* ---- Hero shell ------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:grid; align-items:center; padding:calc(var(--header-h) + 40px) 0 80px; overflow:hidden; isolation:isolate; }
.hero::after{ content:""; position:absolute; inset:auto 0 0; height:30%; background:linear-gradient(transparent, var(--page)); z-index:-1; pointer-events:none; }
.hero .plexus{ z-index:-2; }
.scroll-cue{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); display:grid; justify-items:center; gap:10px; font:500 10.5px/1 var(--font-mono); letter-spacing:.24em; color:var(--text-3); text-transform:uppercase; }
.scroll-cue i{ display:block; width:1px; height:48px; background:linear-gradient(var(--accent), transparent); transform-origin:top; animation:cue 2.2s var(--ease-inout) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* ---- P1 line mask ------------------------------------------------------ */
.p1-line{ display:block; }
.p1-mask{ display:block; overflow:clip; padding-bottom:.08em; margin-bottom:-.08em; }

/* ---- P2 word fill ------------------------------------------------------ */
.p2{ font:600 clamp(2.2rem, 5.6vw, 5.6rem)/1.08 var(--font-display); letter-spacing:-.025em; }
.p2 .p2-word{ color:var(--text-3); }
/* --statement: same scrubbed word fill, sized for a full sentence instead of a 4–6 word headline */
.p2--statement{ font-size:clamp(1.3rem, 2.4vw, 2.1rem); font-weight:500; line-height:1.4; letter-spacing:-.01em; max-width:46ch; margin-top:clamp(16px, 2vw, 24px); }

/* ---- P3 clip image ---------------------------------------------------- */
.p3{ position:relative; border-radius:var(--r-4); overflow:hidden; }
.p3__inner{ position:relative; scale:1.12; } /* oversized so the ±5% inner parallax never shows an edge */
.p3__inner > img, .p3__inner > .ph, .p3__inner > picture, .p3__inner > picture img{ display:block; width:100%; object-fit:cover; }

/* ---- P5 horizontal track ---------------------------------------------- */
.p5{ position:relative; overflow:hidden; }
.p5__track{ display:flex; gap:clamp(16px, 2vw, 28px); width:max-content; will-change:transform; }
.p5__progress{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:28px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.p5__progress i{ display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }
@media (max-width:767px), (prefers-reduced-motion: reduce){
  .p5__track{ width:auto; }
  .p5__progress{ display:none; }
}
.p5.swiper{ overflow:hidden; } /* mobile Swiper fallback */
.p5.swiper .p5__track{ gap:0; width:auto; }

/* ---- P7 stacking cards ------------------------------------------------ */
.p7{ display:grid; gap:24px; }
.p7__card{
  position:sticky; top:calc(var(--header-h) + 28px + var(--i, 0) * 14px);
  min-height:min(62vh, 520px); transform-origin:50% 0;
  display:grid; grid-template-columns:auto 1fr; align-content:center; gap:20px 40px;
  padding:clamp(28px, 4vw, 64px);
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900)); border:1px solid var(--line); border-radius:var(--r-4);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.8);
}
.p7__num{ font:600 clamp(64px, 10vw, 160px)/.85 var(--font-display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px var(--line-strong); grid-row:span 2; }
.p7__shade{ position:absolute; inset:0; border-radius:inherit; background:#000; opacity:0; pointer-events:none; }
@media (max-width:767px){ .p7__card{ grid-template-columns:1fr; min-height:0; } .p7__num{ grid-row:auto; } }
@media (prefers-reduced-motion: reduce){ .p7__card{ position:relative; top:auto; } }

/* ---- P9 marquee ------------------------------------------------------- */
.p9{ display:grid; gap:14px; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.p9__row{ display:flex; width:max-content; will-change:transform; }
.p9__set{ display:flex; gap:14px; padding-right:14px; margin-inline: 7px; }
.p9__pill{ padding:16px 26px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--ink-800); font:500 clamp(15px, 1.4vw, 20px)/1 var(--font-mono); color:var(--text); white-space:nowrap; }
.p9__pill:nth-child(3n+2){ color:var(--brand-bright); }
@media (prefers-reduced-motion: reduce){ .p9__row{ flex-wrap:wrap; width:auto; } .p9__set[aria-hidden="true"]{ display:none; } .p9__set{ flex-wrap:wrap; } }

/* ---- Hex mesh (EVL zone) ---------------------------------------------- */
/* flat-top honeycomb, 34px circumradius, #fff @ 3% */
.hex-mesh{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='102' height='58.89' viewBox='0 0 102 58.89'><path d='M0 29.445L17 0h34l17 29.445L51 58.89H17z M68 29.445h34' fill='none' stroke='white' stroke-opacity='.03' stroke-width='1'/></svg>");
  background-size:102px 58.89px;
}
.is-evl .hex-mesh, .hex-mesh.is-on{ opacity:1; }
.hex-mesh{ transition:opacity .8s var(--ease-out); }

/* ---- ERP promo (§4.5) ------------------------------------------------- */
.erp-promo{ position:relative; overflow:hidden; isolation:isolate; }
.erp-promo__bg{ position:absolute; inset:0; z-index:-1; }
.erp-promo__bg .ph, .erp-promo__bg picture, .erp-promo__bg img{ position:absolute; inset:0; aspect-ratio:auto; width:100%; height:100%; object-fit:cover; opacity:.9; }
.erp-promo__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(var(--page), transparent 25%, transparent 75%, var(--page)); }
.erp-promo__head{ display:grid; gap:20px; justify-items:center; text-align:center; max-width:860px; margin:0 auto clamp(48px, 6vw, 80px); }
.erp-promo__stage{ perspective:1800px; perspective-origin:50% 0%; }
.erp-promo__frame{ transform-origin:50% 0%; will-change:transform; }

/* HTML/CSS ERP dashboard mockup (sample data only) */
.erp-ui{
  --ui-bg:#0b1324; --ui-panel:#101b31; --ui-line:rgba(255,255,255,.07);
  display:grid; grid-template-columns:220px 1fr; min-height:540px; border-radius:var(--r-3);
  background:var(--ui-bg); border:1px solid var(--line-strong); overflow:hidden;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(42,159,216,.08), 0 0 120px -40px rgba(42,159,216,.5);
  font-size:13px; color:var(--text-2); text-align:left;
}
.erp-ui__side{ border-right:1px solid var(--ui-line); padding:18px 12px; display:grid; align-content:start; gap:4px; background:#0a1120; }
.erp-ui__brand{ display:flex; align-items:center; gap:8px; padding:4px 8px 16px; color:var(--text); font:600 14px/1 var(--font-display); }
.erp-ui__brand .logo-mark{ --mark-w:20px; color:var(--brand-bright); }
.erp-ui__brand img{ flex:none; width:20px; height:20px; }
.erp-ui__nav{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; white-space:nowrap; }
.erp-ui__nav .ti{ font-size:16px; color:var(--text-3); }
.erp-ui__nav.is-active{ background:rgba(42,159,216,.12); color:var(--text); }
.erp-ui__nav.is-active .ti{ color:var(--brand-bright); }
.erp-ui__main{ padding:18px 22px; display:grid; gap:16px; align-content:start; min-width:0; }
/* the dashboard adapts to the width it actually gets (hero column, home card, products panel…) */
.erp-ui__main{ container:erpmain / inline-size; }
@container erpmain (max-width:560px){
  .erp-ui .erp-ui__kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .erp-ui .erp-ui__kpi:nth-child(n+4){ display:none; }
  .erp-ui .erp-ui__kpi{ padding:11px; }
  .erp-ui .erp-ui__kpi b{ font-size:15px; white-space:nowrap; }
  .erp-ui .erp-ui__kpi span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .erp-ui .erp-ui__row{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:8px; }
  .erp-ui .erp-ui__bar{ grid-template-columns:64px 1fr; gap:6px; font-size:10.5px; white-space:nowrap; }
  .erp-ui .erp-ui__panel h4{ font-size:11px; }
}
@container erpmain (max-width:340px){
  .erp-ui .erp-ui__kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .erp-ui .erp-ui__kpi:nth-child(4){ display:grid; }
  .erp-ui .erp-ui__row{ grid-template-columns:minmax(0,1fr); }
}
@container erpmain (max-width:360px){ .erp-ui .erp-ui__top{ flex-wrap:wrap; } }
.erp-ui__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.erp-ui__top strong{ font:600 18px/1 var(--font-display); color:var(--text); }
.erp-ui__badge{ font:500 10.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); padding:6px 10px; border:1px solid rgba(63,208,224,.3); border-radius:var(--r-pill); }
.erp-ui__kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.erp-ui__kpi{ background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:12px; padding:14px; display:grid; gap:8px; }
.erp-ui__kpi span{ font-size:11.5px; color:var(--text-3); }
.erp-ui__kpi b{ font:600 20px/1 var(--font-mono); color:var(--text); font-variant-numeric:tabular-nums; }
.erp-ui__kpi em{ font:normal 500 11px/1 var(--font-mono); color:var(--cyan); }
.erp-ui__row{ display:grid; grid-template-columns:1.6fr 1fr; gap:12px; }
.erp-ui__panel{ background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:12px; padding:14px; min-width:0; }
.erp-ui__panel h4{ font:500 12px/1 var(--font-body); color:var(--text-2); margin:0 0 12px; display:flex; justify-content:space-between; }
.erp-ui__chart{ width:100%; height:150px; }
.erp-ui__bars{ display:grid; gap:10px; }
.erp-ui__bar{ display:grid; grid-template-columns:72px 1fr; align-items:center; gap:10px; font-size:11.5px; }
.erp-ui__bar i{ height:8px; border-radius:4px; background:linear-gradient(90deg, var(--brand), var(--cyan)); transform-origin:0 50%; }
.erp-ui table{ width:100%; border-collapse:collapse; font-size:12px; }
.erp-ui th{ text-align:left; font-weight:500; color:var(--text-3); padding:6px 8px; border-bottom:1px solid var(--ui-line); }
.erp-ui td{ padding:8px; border-bottom:1px solid var(--ui-line); color:var(--text-2); white-space:nowrap; }
.erp-ui td.num{ font-family:var(--font-mono); text-align:right; color:var(--text); }
.erp-ui .pill{ font:500 10.5px/1 var(--font-mono); padding:4px 8px; border-radius:999px; background:rgba(81,255,140,.1); color:#7dffaa; }
.erp-ui .pill--open{ background:rgba(42,159,216,.12); color:var(--brand-bright); }
@media (max-width:980px){
  .erp-ui{ grid-template-columns:1fr; min-height:0; }
  .erp-ui__side{ display:none; }
  .erp-ui__kpis{ grid-template-columns:repeat(2, 1fr); }
  .erp-ui__row{ grid-template-columns:1fr; }
}
@media (max-width:560px){ .erp-ui__table-wrap{ overflow-x:auto; } .erp-ui__main{ padding:14px; } }

/* ---- Final CTA (§4.6) ------------------------------------------------- */
.cta-final{ position:relative; overflow:hidden; isolation:isolate; text-align:center; padding-block:clamp(120px, 16vw, 240px); }
.cta-final .plexus{ z-index:-1; }
.cta-final::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 60% at 50% 50%, transparent, var(--page) 85%); }
.cta-final__inner{ display:grid; justify-items:center; gap:28px; }
.cta-final h2{ font-size:clamp(2.6rem, 6.4vw, 6.4rem); max-width:16ch; }
.magnetic{ will-change:transform; }

/* Form error state (server / network) */
.form__alert{ margin:0; padding:14px 16px; border-radius:var(--r-2); border:1px solid rgba(255,107,122,.45); background:rgba(255,107,122,.08); color:#ffb3bb; font-size:14.5px; line-height:1.5; }