/* KRKART — effect SEO pages (shared). Micrographics × Signalwave, additive, no editor dependency. */
:root{
  --bg:#08090C; --paper:#0C0E12; --paper2:#111419; --paper3:#161A20;
  --line:#23272F; --line2:#3A4150;
  --ink:#E8ECF1; --ink2:#AEB7C2; --ink3:#6B7480; --inkInv:#08090C;
  --signal:#FF2E97; --cyan:#25E7FF; --crop:#5A6470;
  --display:'Michroma',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --font:'Space Grotesk',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --gutter:clamp(20px,4vw,64px);
  --s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --scan:repeating-linear-gradient(0deg,rgba(200,210,225,.045) 0 1px,transparent 1px 3px);
  --smpte:linear-gradient(90deg,#C6CCD4 0 14.28%,#D8C24A 14.28% 28.56%,#25E7FF 28.56% 42.84%,#3FB970 42.84% 57.12%,#FF2E97 57.12% 71.4%,#E2483F 71.4% 85.68%,#3F6FE2 85.68%);
}
*{box-sizing:border-box;border-radius:0}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:#08090C}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.smpte-top{position:fixed;top:0;left:0;right:0;height:2px;background:var(--smpte);z-index:100;pointer-events:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
/* header */
.eh{display:flex;align-items:center;gap:var(--s5);padding:14px 0;border-bottom:1px solid var(--line);background:var(--bg);background-image:var(--scan)}
.eh .logo{display:flex;align-items:center;gap:9px;font:400 15px/1 var(--display);letter-spacing:1.5px}
.eh .logo img{width:26px;height:26px;object-fit:contain;mix-blend-mode:screen}
.eh nav{margin-left:auto;display:flex;gap:var(--s5);font:500 11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2)}
.eh nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--paper2);color:var(--ink);border:1px solid var(--line2);
  padding:13px 20px;cursor:pointer;font:500 12px var(--mono);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;transition:.14s}
.btn:hover{border-color:var(--ink);background:var(--paper3)}
.btn.primary{background:var(--signal);color:#08090C;border-color:var(--signal);font-weight:700}
.btn.primary:hover{background:#08090C;color:var(--signal)}
/* hero */
.ehero{padding:var(--s8) 0 var(--s7);border-bottom:1px solid var(--line)}
.eyebrow{font:500 11px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--ink2);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:var(--s5)}
.eyebrow::before{content:"";width:18px;height:7px;background:var(--smpte)}
.ehero h1{font:400 clamp(28px,5vw,52px)/1.15 var(--display);letter-spacing:-.5px;margin:0 0 .4em;max-width:18ch}
.ehero .lead{color:var(--ink2);font:400 clamp(16px,2vw,19px)/1.55 var(--font);max-width:60ch;margin:0 0 var(--s6)}
.ehero .cta{display:flex;gap:12px;flex-wrap:wrap}
/* live demo frame */
.demo{position:relative;margin:var(--s7) 0 0;aspect-ratio:16/9;border:1px solid var(--line2);background:#0C0E12;padding:10px;
  box-shadow:0 40px 110px rgba(0,0,0,.55)}
.demo::before{content:"";position:absolute;inset:0;background:var(--scan);opacity:.55;pointer-events:none;z-index:1}
.demo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 70px 26px rgba(8,9,12,.9)}
.demo iframe{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border:0;display:block;z-index:2;background:#000}
.demo .tag{position:absolute;top:14px;left:14px;z-index:6;background:rgba(8,9,12,.7);border:1px solid var(--line2);
  padding:5px 10px;font:500 10px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:7px}
.demo .tag .live{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blip 1.6s steps(1) infinite}
@keyframes blip{0%,70%{opacity:1}71%,100%{opacity:.3}}
.demo .crop{position:absolute;width:14px;height:14px;z-index:5}
.demo .crop::before,.demo .crop::after{content:"";position:absolute;background:var(--crop)}
.demo .crop::before{width:14px;height:1px}.demo .crop::after{width:1px;height:14px}
.demo .tl{left:6px;top:6px}.demo .tr{right:6px;top:6px}.demo .tr::before,.demo .tr::after{right:0}
.demo .bl{left:6px;bottom:6px}.demo .bl::before,.demo .bl::after{bottom:0}
.demo .br{right:6px;bottom:6px}.demo .br::before,.demo .br::after{right:0;bottom:0}
.demo .demohint{position:absolute;bottom:14px;right:14px;z-index:6;font:500 9px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3)}
/* content */
section{padding:var(--s8) 0}
section+section{border-top:1px solid var(--line)}
h2.st{font:400 clamp(20px,3vw,30px)/1.2 var(--display);letter-spacing:-.3px;margin:0 0 .6em}
.body p{color:var(--ink2);font-size:16px;line-height:1.7;max-width:68ch;margin:0 0 1em}
.uses{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.uses li{border:1px solid var(--line);background:var(--paper);padding:14px 16px;font-size:14px;color:var(--ink);position:relative;padding-left:34px}
.uses li::before{content:"+";position:absolute;left:14px;color:var(--signal);font-weight:700}
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:var(--s4);grid-template-columns:repeat(3,1fr)}
.steps .step{counter-increment:s;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s5)}
.steps .step .n{font:400 26px/1 var(--display);color:var(--ink3)}
.steps .step p{margin:.6em 0 0;font-size:14px;color:var(--ink2);line-height:1.5}
/* related effects */
.rel{display:grid;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.rel a{border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);padding:18px;transition:background .12s;position:relative}
.rel a:hover{background:var(--paper2)}
.rel a .ic{font-size:22px;color:var(--ink2)}
.rel a b{display:block;font:700 15px var(--font);margin:10px 0 3px}
.rel a span{color:var(--ink3);font-size:12.5px;line-height:1.4}
/* footer */
.ef{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s8);color:var(--ink3);font:500 11px var(--mono);letter-spacing:1px;text-transform:uppercase}
.ef .fnav{display:flex;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s4)}
.ef a{color:var(--ink2)}.ef a:hover{color:var(--ink)}
@media(max-width:760px){
  .eh nav a.hidem{display:none}
  .demo{margin-top:var(--s6)}
  .steps{grid-template-columns:1fr}
  section{padding:var(--s7) 0}
}