/* ArmNewTech — effects layer on top of the base page styles (site/*.html).
 * Loaded AFTER the inline <style>, so it overrides the base.
 * Requires <div class="fx" aria-hidden="true"></div> right after <body>
 * and <script src="theme.js" defer> for scroll-reveal (everything is visible without JS). */

/* ---------- background: glows + star dust (static layer) ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(234,255,247,.55),transparent 55%),
    radial-gradient(1px 1px at 34% 62%,rgba(234,255,247,.38),transparent 55%),
    radial-gradient(1.5px 1.5px at 58% 12%,rgba(46,230,168,.50),transparent 55%),
    radial-gradient(1px 1px at 73% 44%,rgba(234,255,247,.34),transparent 55%),
    radial-gradient(1.5px 1.5px at 88% 24%,rgba(36,211,224,.45),transparent 55%),
    radial-gradient(1px 1px at 22% 84%,rgba(234,255,247,.30),transparent 55%),
    radial-gradient(1px 1px at 8% 55%,rgba(46,230,168,.30),transparent 55%),
    radial-gradient(1px 1px at 47% 38%,rgba(234,255,247,.26),transparent 55%),
    radial-gradient(1px 1px at 66% 78%,rgba(46,230,168,.30),transparent 55%),
    radial-gradient(1px 1px at 93% 66%,rgba(234,255,247,.26),transparent 55%),
    radial-gradient(900px 480px at 85% -5%,rgba(46,230,168,.18),transparent 60%),
    radial-gradient(700px 500px at -5% 40%,rgba(36,211,224,.12),transparent 55%),
    radial-gradient(60% 30% at 50% 104%,rgba(46,230,168,.15),transparent 70%),
    linear-gradient(180deg,#081916,#06110f 60%);
}

/* ---------- background: crisp neon lines + twinkling sparks ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(115deg,transparent calc(36% - 1px),rgba(46,230,168,.60) 36%,transparent calc(36% + 2px)),
    linear-gradient(115deg,transparent calc(52% - 1px),rgba(36,211,224,.40) 52%,transparent calc(52% + 2px)),
    linear-gradient(115deg,transparent calc(68% - 1px),rgba(46,230,168,.26) 68%,transparent calc(68% + 2px)),
    linear-gradient(295deg,transparent calc(24% - 1px),rgba(46,230,168,.30) 24%,transparent calc(24% + 2px)),
    radial-gradient(2px 2px at 44% 28%,rgba(234,255,247,.95),transparent 60%),
    radial-gradient(2px 2px at 79% 58%,rgba(46,230,168,.85),transparent 60%),
    radial-gradient(2px 2px at 63% 14%,rgba(234,255,247,.75),transparent 60%),
    radial-gradient(1.5px 1.5px at 15% 46%,rgba(36,211,224,.70),transparent 60%);
  animation:fx-twinkle 9s ease-in-out infinite alternate;
}
@keyframes fx-twinkle{from{opacity:.45}to{opacity:1}}

/* ---------- background: diagonal neon beams + floor grid ---------- */
.fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(340px 760px at 62% -4%,rgba(46,230,168,.36),transparent 70%),
    linear-gradient(115deg,transparent 40%,rgba(46,230,168,.40) 46%,rgba(36,211,224,.25) 50%,transparent 57%),
    linear-gradient(115deg,transparent 58%,rgba(46,230,168,.20) 64%,transparent 70%),
    linear-gradient(115deg,transparent 20%,rgba(36,211,224,.15) 26%,transparent 33%),
    linear-gradient(115deg,transparent 74%,rgba(46,230,168,.12) 80%,transparent 87%);
  filter:blur(22px);
  animation:fx-drift 18s ease-in-out infinite alternate;
}
.fx::after{
  content:"";position:absolute;left:-30%;right:-30%;bottom:-8%;height:52vh;
  background:
    linear-gradient(180deg,rgba(46,230,168,.12),transparent 45%),
    repeating-linear-gradient(90deg,rgba(46,230,168,.42) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(46,230,168,.34) 0 1px,transparent 1px 64px);
  transform:perspective(720px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
          mask-image:linear-gradient(180deg,transparent,#000 55%);
  opacity:.85;
}
@keyframes fx-drift{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}

/* ---------- pill header, as in the mockup ---------- */
header{background:transparent;border-bottom:none;backdrop-filter:none;padding:12px 0 6px}
header .hbar{
  background:rgba(8,25,22,.74);border:1px solid var(--line2);border-radius:18px;
  padding:0 18px;height:64px;
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 34px rgba(0,0,0,.38),inset 0 0 26px rgba(46,230,168,.04);
}
nav{gap:26px}
nav a{text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;font-weight:700}
.hsearch{background:transparent;border:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;transition:.15s;padding:0}
.hsearch:hover{color:var(--mint);text-shadow:0 0 14px rgba(46,230,168,.5)}
.hsearch svg{width:19px;height:19px;display:block}

/* ---------- headings and numbers — white with a soft glow (as in the mockup) ---------- */
h1{color:#fff;text-shadow:0 0 36px rgba(46,230,168,.22)}
h1 .hl{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff}
.stat b{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 26px rgba(46,230,168,.30)}

/* ---------- AI search panel: softer radii, inset button, glow pulse ---------- */
/* pulse — a separate ::before with the glow; only opacity animates (no repaints) */
.ai-card{
  position:relative;isolation:isolate;border-radius:24px;
  animation:fx-up .55s ease both;
  box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 1px rgba(46,230,168,.10),0 0 46px rgba(46,230,168,.06);
}
.ai-card::before{
  content:"";position:absolute;inset:-1px;border-radius:24px;pointer-events:none;z-index:-1;
  box-shadow:0 0 0 1px rgba(46,230,168,.24),0 0 90px rgba(46,230,168,.16);
  opacity:0;animation:fx-pulse 6.5s ease-in-out 1.2s infinite alternate;
}
@keyframes fx-pulse{from{opacity:0}to{opacity:1}}
.ai-in{
  border-radius:18px;border-color:rgba(46,230,168,.45);
  box-shadow:inset 0 0 0 1px rgba(46,230,168,.06),0 0 28px rgba(46,230,168,.10);
  transition:border-color .2s,box-shadow .2s;
}
.ai-in:focus-within{
  border-color:var(--mint);
  box-shadow:inset 0 0 0 1px rgba(46,230,168,.18),0 0 44px rgba(46,230,168,.22);
}
.ai-go{margin:8px;border-radius:14px;width:80px}

/* ---------- glide shine on gradient buttons (animate transform, not left) ---------- */
.btn-grad,.ai-go{position:relative;overflow:hidden;isolation:isolate}
.btn-grad::after,.ai-go::after{
  content:"";position:absolute;top:-130%;bottom:-130%;width:36%;left:-45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg) translateX(0);pointer-events:none;z-index:1;
}
.btn-grad::after{transition:transform .55s ease}
.btn-grad:hover::after{transform:skewX(-18deg) translateX(560%)}
.ai-go::after{animation:fx-glide 5.5s ease-in-out infinite}
.demo .btn-grad::after{animation:fx-glide 7s ease-in-out 2.4s infinite}
@keyframes fx-glide{
  0%{transform:skewX(-18deg) translateX(0)}
  14%{transform:skewX(-18deg) translateX(560%)}
  100%{transform:skewX(-18deg) translateX(560%)}
}
.btn:active{transform:translateY(0) scale(.97)}

/* ---------- card hover polish ---------- */
.cats .cat{position:relative;overflow:hidden}
.cats .cat::after{
  content:"";position:absolute;top:-120%;bottom:-120%;width:40%;left:-50%;
  background:linear-gradient(105deg,transparent,rgba(46,230,168,.15),transparent);
  transform:skewX(-18deg) translateX(0);transition:transform .6s ease;pointer-events:none;
}
.cats .cat:hover::after{transform:skewX(-18deg) translateX(510%)}
.trust .tcard,.duo .tcard{transition:.2s}
.trust .tcard:hover,.duo .tcard:hover{border-color:var(--line2);box-shadow:0 0 30px rgba(46,230,168,.08);transform:translateY(-2px)}
.scard{transition:.2s}
.scard:hover{border-color:var(--line2);box-shadow:0 0 26px rgba(46,230,168,.07)}
.card .thumb{overflow:hidden}
.card .thumb img{transition:transform .35s ease}
.card:hover .thumb img{transform:scale(1.05)}
.gthumbs img{transition:.15s}
.gthumbs img:hover{border-color:var(--line2)}

/* ---------- hero blocks entrance on load ---------- */
@keyframes fx-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.demo,.scard{animation:fx-up .55s ease both}
.scard:nth-child(2){animation-delay:.09s}

/* ---------- scroll-reveal (enabled by the .js-fx class from theme.js) ---------- */
.js-fx .cats .cat:not(.fx-in),
.js-fx .trust .tcard:not(.fx-in),
.js-fx .duo .tcard:not(.fx-in),
.js-fx .grid .card:not(.fx-in),
.js-fx .sec-h:not(.fx-in),
.js-fx .fgrid>div:not(.fx-in){opacity:0}
.js-fx .fx-in{animation:fx-up .55s ease backwards}
.js-fx .cats .cat.fx-in:nth-child(4n+2),.js-fx .trust .tcard.fx-in:nth-child(4n+2),
.js-fx .grid .card.fx-in:nth-child(4n+2),.js-fx .fgrid>div.fx-in:nth-child(2){animation-delay:.07s}
.js-fx .cats .cat.fx-in:nth-child(4n+3),.js-fx .trust .tcard.fx-in:nth-child(4n+3),
.js-fx .grid .card.fx-in:nth-child(4n+3),.js-fx .fgrid>div.fx-in:nth-child(3){animation-delay:.14s}
.js-fx .cats .cat.fx-in:nth-child(4n+4),.js-fx .trust .tcard.fx-in:nth-child(4n+4),
.js-fx .grid .card.fx-in:nth-child(4n+4){animation-delay:.21s}
.js-fx .duo .tcard.fx-in:nth-child(2){animation-delay:.09s}

/* ---------- custom SVG icon set (icons.js) ---------- */
.aicn{display:inline-flex;align-items:center;justify-content:center;color:var(--mint);
  vertical-align:-.15em;line-height:1;flex:none}
.aicn svg{width:1.07em;height:1.07em;display:block}
.btn .aicn{color:inherit}
.soc .aicn{color:#fff}
.soc .aicn svg{width:26px;height:26px}
.checks .c.aicn{font-size:17px;margin-top:3px}
.scard h3 .aicn{font-size:17px}
.cat .ic .aicn{font-size:25px}
.duo .ic-big{font-size:26px}
.thumb .ph{display:flex;flex-direction:column;align-items:center;gap:8px}
.thumb .ph .aicn{font-size:38px;filter:drop-shadow(0 0 14px rgba(46,230,168,.4))}
.card .thumb .aicn{font-size:32px;filter:drop-shadow(0 0 12px rgba(46,230,168,.4))}

/* ---------- chips: one row, as in the mockup ---------- */
.chips{gap:7px}
.chip{padding:7px 11px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.chip .aicn{font-size:14px}

/* ---------- search input: bright placeholder line, as in the mockup ---------- */
.ai-in input::placeholder{color:#cfe9df}

/* ---------- demo: full-width gradient CTA bar, as in the mockup ---------- */
.demo .btnrow .btn{width:100%}

/* ---------- stats: bigger numbers, as in the mockup ---------- */
.stats{gap:18px}
.stat b{font-size:38px}

/* ---------- brand strip: pseudo-logotypes ---------- */
.brandstrip{gap:18px;align-items:center}
.brandstrip span{color:#7d9d95;font-size:13px;transition:.15s;cursor:default}
.brandstrip span:hover{color:#bfe6da;text-shadow:0 0 18px rgba(46,230,168,.35)}
.brandstrip .b-sie{letter-spacing:.18em}
.brandstrip .b-phi{letter-spacing:.10em}
.brandstrip .b-ge{width:30px;height:30px;border:1.6px solid currentColor;border-radius:50%;
  display:inline-grid;place-items:center;font-size:11px;letter-spacing:.02em;font-style:italic}
.brandstrip .b-can{font-family:Georgia,'Times New Roman',serif;text-transform:none;font-size:16px;letter-spacing:.01em}
.brandstrip .b-ui{font-size:11px;letter-spacing:.05em;line-height:1.2;max-width:70px;display:inline-block}
.brandstrip .b-ele{text-transform:none;font-size:15px;letter-spacing:.02em}

/* ---------- catalog: sticky sidebar below the pill header ---------- */
aside{top:100px}

/* ---------- burger menu (mobile + tablet) ---------- */
.burger{display:none;background:transparent;border:1.5px solid var(--line2);border-radius:10px;
  width:42px;height:42px;cursor:pointer;position:relative;flex:none;padding:0;transition:.18s}
.burger:hover{border-color:var(--mint);box-shadow:var(--glow)}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--mint);
  transition:transform .25s ease,opacity .2s ease,top .25s ease}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
.burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

.mnav{position:fixed;left:14px;right:14px;top:88px;z-index:70;
  background:rgba(8,25,22,.96);border:1px solid var(--line2);border-radius:18px;
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(46,230,168,.08);
  padding:10px;display:none;flex-direction:column;gap:2px}
.mnav.open{display:flex;animation:fx-up .25s ease both}
.mnav a{display:block;padding:13px 14px;border-radius:12px;font-weight:700;font-size:14.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mnav a:hover,.mnav a.on{color:var(--mint);background:rgba(46,230,168,.07)}
.mnav .mnav-cta{margin-top:8px}
.mnav .mnav-cta .btn{width:100%}
.mnav .mnav-contacts{display:flex;gap:16px;flex-wrap:wrap;padding:12px 14px 6px;border-top:1px solid var(--line);margin-top:10px}
.mnav .mnav-contacts a{padding:0;display:inline;font-size:13px;text-transform:none;letter-spacing:0;color:var(--mint);font-weight:700}

@media (max-width:1080px){
  .hbar nav{display:none}
  .hbar>.btn-out{display:none}
  .burger{display:block}
}
@media (max-width:760px){
  .mnav{top:80px}
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none;opacity:.8}
  .fx::before,.ai-go::after,.demo .btn-grad::after{animation:none}
  .ai-card,.ai-card::before{animation:none}
  .demo,.scard{animation:none}
  .js-fx .cats .cat:not(.fx-in),.js-fx .trust .tcard:not(.fx-in),.js-fx .duo .tcard:not(.fx-in),
  .js-fx .grid .card:not(.fx-in),.js-fx .sec-h:not(.fx-in),.js-fx .fgrid>div:not(.fx-in){opacity:1}
  .js-fx .fx-in{animation:none}
}
@media (max-width:760px){
  header{padding:10px 0 4px}
  header .hbar{padding:0 12px}
  .fx::after{opacity:.35}
  body::after{opacity:.55;animation:none}
}

/* ---------- brand logo (real emblem) ---------- */
.brand img.logo{width:40px;height:40px;display:block;filter:drop-shadow(0 0 10px rgba(46,230,168,.35))}
@media (max-width:760px){.brand img.logo{width:34px;height:34px}}
