/*
Theme Name: Eave Pixels
Author: Eave Pixels
Description: Modern, code-inspired business theme for Eave Pixels, independent IT, ELV and digital solutions. Animated top slider, clickable service details, white/dark background option. Edit all text and options under Appearance > Customize > "Eave Pixels: edit text". Edit menus under Appearance > Menus.
Version: 6.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: eavepixels
*/
:root{--bg:#050607;--bg2:#0D0F11;--line:#24282C;--txt:#fff;--mute:#9AA4AB;--soft:#CFD6DA;--ac:#19E3D2;--acx:#031413;--hb:rgba(5,6,7,.92);--ib:#333A40}
[data-mode=light]{--bg:#fff;--bg2:#F1F5F6;--line:#D9E1E4;--txt:#0B1115;--mute:#4F5E66;--soft:#2B373E;--ac:#00857B;--acx:#fff;--hb:rgba(255,255,255,.94);--ib:#BFCBD0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:'Space Grotesk','Carlito',system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:20px;line-height:1.65;transition:background .3s,color .3s}
body.noscroll{overflow:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.menu,.btn,small,.det span,.foot h4,.card label,.more{font-family:'JetBrains Mono','DejaVu Sans Mono',monospace}
header.site{position:sticky;top:0;z-index:50;background:var(--hb);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar header.site{top:32px}
.bar{display:flex;justify-content:space-between;align-items:stretch;gap:24px;position:relative}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.02em;padding:16px 0}
.logo img{max-height:50px;width:auto}.logo .a{fill:var(--txt)}.logo .b{fill:var(--ac)}
nav{display:flex;align-items:stretch;gap:24px}
.menu{display:flex;align-items:stretch;list-style:none;padding:0;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.menu>li{position:relative;display:flex}
.menu>li>a{display:flex;align-items:center;padding:0 18px;color:var(--txt)}
.menu>li>a:hover,.menu>.current-menu-item>a{color:var(--ac)}
.menu>li.menu-item-has-children>a:after{content:"▾";margin-left:8px;font-size:12px}
.menu .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:300px;background:var(--bg2);border:1px solid var(--line);border-top:2px solid var(--ac);list-style:none;padding:8px 0}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.menu .sub-menu a{display:block;padding:12px 22px;font-size:15px}.menu .sub-menu a:hover{color:var(--ac);background:var(--bg)}
.mode{align-self:center;width:46px;height:46px;display:grid;place-items:center;background:none;border:1px solid var(--line);color:var(--txt);cursor:pointer}
.mode:hover{border-color:var(--ac);color:var(--ac)}
[data-mode=light] .i-sun,html:not([data-mode=light]) .i-moon{display:none}
.btn{display:inline-block;padding:16px 30px;border:2px solid var(--ac);color:var(--ac);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;background:none;transition:background .15s,color .15s}
.btn:before{content:"< ";opacity:.8}.btn:after{content:" />";opacity:.8}
.btn:hover,.btn.solid{background:var(--ac);color:var(--acx)}
.btn.solid:hover{background:var(--txt);border-color:var(--txt);color:var(--bg)}
.btn.cta{align-self:center;padding:11px 20px;font-size:15px}
.tg{display:none;background:none;border:0;width:46px;height:46px;cursor:pointer;position:relative;align-self:center}
.tg span,.tg span:before,.tg span:after{position:absolute;height:3px;background:var(--txt);content:""}
.tg span{top:22px;left:10px;right:10px}.tg span:before{left:0;right:0;top:-9px}.tg span:after{left:0;right:0;top:9px}
h1,h2,h3{text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;font-weight:700;text-wrap:balance}
/* ---- top slider ---- */
.slider{--ac:#19E3D2;--acx:#031413;--bg:#050607;--txt:#fff;--line:#24282C;--mute:#9AA4AB;position:relative;display:grid;min-height:clamp(600px,84vh,780px);background:#050607;color:#fff;overflow:hidden;border-bottom:1px solid #24282C}
.sl{grid-area:1/1;position:relative;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s}
.sl.on{opacity:1;visibility:visible}
.sbg{position:absolute;inset:0;background:radial-gradient(55% 70% at 82% 30%,rgba(25,227,210,.16),transparent),linear-gradient(rgba(25,227,210,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(25,227,210,.06) 1px,transparent 1px);background-size:auto,52px 52px,52px 52px}
.has-img .sbg{background:var(--img) center/cover}.has-img .sbg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.9),rgba(5,6,7,.5))}
.has-img.on .sbg{animation:kb 14s ease-out both}.has-img .art{display:none}.has-img .sg{grid-template-columns:1fr}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.sg{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;width:100%;padding-top:50px;padding-bottom:110px}
h1{font-size:clamp(38px,5.2vw,76px)}.big{font-size:clamp(36px,5vw,70px)}
.code{display:block;white-space:nowrap;margin:.12em 0 .05em;color:var(--ac);font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;font-size:.6em;letter-spacing:-.04em}
.lead{font-size:23px;color:#B3BEC5;margin:26px 0 36px;max-width:580px}
.btns{display:flex;gap:16px;flex-wrap:wrap}.btns .btn{padding:15px 22px;font-size:16px}
.sl.on .stx>*{animation:up .8s both}.sl.on .stx>*:nth-child(2){animation-delay:.12s}.sl.on .stx>*:nth-child(3){animation-delay:.24s}
.sl.on .art{animation:fade 1s .15s both}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.art svg{display:block;width:100%;height:auto;max-height:440px}
.ctl{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;align-items:center;gap:18px;z-index:3}
.ar{width:46px;height:46px;background:none;border:1px solid #3A464E;color:#fff;font-size:28px;line-height:1;cursor:pointer}.ar:hover{border-color:var(--ac);color:var(--ac)}
.dots{display:flex;gap:10px}.dots button{position:relative;width:54px;height:22px;background:none;border:0;cursor:pointer}
.dots button:before,.dots button:after{content:"";position:absolute;left:0;top:9px;height:4px}
.dots button:before{width:100%;background:#2E373D}.dots button:after{width:0;background:var(--ac)}
.dots button.on:after{animation:fill 7s linear forwards}.slider[data-auto="0"] .dots button.on:after{animation:none;width:100%}.slider.hold .dots button.on:after{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.term{border:1px solid #24282C;background:#0A0C0E;font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;box-shadow:0 0 80px -30px rgba(25,227,210,.5)}
.tb{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #24282C;font-size:15px;color:#9AA4AB}
.tb i{width:12px;height:12px;border-radius:50%;background:#2C3236}.tb i:first-child{background:#19E3D2}.tb span{margin-left:10px}
.tc{padding:26px 24px 30px;font-size:19px;line-height:2;color:#fff}
.tl{display:block;width:max-content;max-width:100%;overflow:hidden;white-space:nowrap;animation:type .9s steps(26) both}
.tl b{color:#19E3D2}.tl u{display:inline-block;width:11px;height:21px;background:#19E3D2;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.l1{animation-delay:.2s}.l2{animation-delay:1.2s}.l3{animation-delay:1.9s}.l4{animation-delay:2.6s}.l5{animation-delay:3.3s}.l6{animation-delay:4s}.l7{animation-delay:4.8s}
@keyframes type{from{width:0}to{width:100%}}@keyframes blink{50%{opacity:0}}
/* svg art animation */
.sweep{transform-origin:300px 161px;animation:sweep 5s ease-in-out infinite alternate}@keyframes sweep{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.rec,.led,.bl{animation:blink 1.4s steps(1) infinite}.bl.d1{animation-delay:.3s}.bl.d2{animation-delay:.7s}.bl.d3{animation-delay:1.1s}
.flow{stroke-dasharray:6 10;animation:flow 1.2s linear infinite}@keyframes flow{to{stroke-dashoffset:-32}}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
.grow{transform-box:fill-box;transform-origin:left center;animation:grow 4.5s ease-in-out infinite}@keyframes grow{0%{transform:scaleX(0)}25%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.pop{transform-box:fill-box;transform-origin:center bottom;animation:popc 4.5s ease-in-out infinite}@keyframes popc{0%,20%{transform:scale(.6);opacity:0}40%,85%{transform:scale(1);opacity:1}100%{transform:scale(.6);opacity:0}}
.grow.d1,.pop.d1{animation-delay:.4s}.grow.d2,.pop.d2{animation-delay:.9s}.pop.d3{animation-delay:1.4s}
.cur{animation:cur 4.5s ease-in-out infinite}@keyframes cur{0%{transform:translate(90px,120px)}40%{transform:translate(320px,230px)}70%{transform:translate(180px,270px)}100%{transform:translate(90px,120px)}}
.floaty{animation:fl 3s ease-in-out infinite alternate}@keyframes fl{to{transform:translateY(-10px)}}
/* ---- sections ---- */
section{padding:110px 0;border-top:1px solid var(--line)}.slider{padding:0}
.intro{background:var(--bg2)}
.st{font-size:clamp(26px,3.3vw,46px);line-height:1.25;max-width:1100px;margin-bottom:44px;color:var(--soft)}
.st strong{color:var(--ac);font-weight:700}
.sh{margin-bottom:56px}
h2.c{font-size:clamp(32px,4vw,56px)}
h2.c:before{content:"> ";color:var(--ac);font-family:'JetBrains Mono','DejaVu Sans Mono',monospace}
.sub{color:var(--mute);margin-top:18px;max-width:660px;font-size:21px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fc{display:block;border:1px solid var(--line);background:var(--bg2);padding:38px 34px 38px;transition:border-color .2s,transform .2s;cursor:pointer}
.fc:hover{border-color:var(--ac);transform:translateY(-3px)}
.fc:last-child:nth-child(3n+1){grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1.4fr;gap:14px 44px;align-items:center}
.fc:last-child:nth-child(3n+1) .ic{margin:0;grid-row:1/3}.fc:last-child:nth-child(3n+1) h3{margin:0}.fc:last-child:nth-child(3n+1) .more{grid-column:2/-1;margin-top:0}
.ic{display:block;color:var(--ac);margin-bottom:56px}
.fc h3{font-size:25px;margin-bottom:12px}
.fc h3:before,.fc h3:after,.dlg h2:before,.dlg h2:after{color:var(--ac);font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;font-weight:500}
.fc h3:before,.dlg h2:before{content:"< "}.fc h3:after,.dlg h2:after{content:" />"}
.fc p{color:var(--mute);font-size:19px}
.more{display:inline-block;margin-top:22px;font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ac)}.more:after{content:" →"}
/* service pop-up */
.dlg{margin:auto;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--txt);width:calc(100% - 32px);max-width:1000px;max-height:calc(100vh - 32px);overflow:auto}
.dlg::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(3px)}
.dlg[open]{animation:fade .35s both}
.dbox{padding:34px 44px 44px;border-top:3px solid var(--ac)}
.dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dh small{color:var(--ac);font-weight:700;font-size:16px;text-transform:uppercase}
.x{width:46px;height:46px;background:none;border:1px solid var(--line);color:var(--txt);font-size:30px;line-height:1;cursor:pointer}.x:hover{border-color:var(--ac);color:var(--ac)}
.dlg h2{font-size:clamp(28px,3.6vw,46px)}
.di{color:var(--soft);font-size:21px;margin-top:16px;max-width:760px}
.dcols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:36px 0;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dcols h3{font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;color:var(--ac);font-size:17px;margin-bottom:18px}
.ol,.hw{list-style:none;padding:0;counter-reset:s}
.ol li,.hw li{position:relative;padding:0 0 14px 40px;font-size:19px;color:var(--soft);line-height:1.5}
.ol li:before{content:"✓";position:absolute;left:0;color:var(--ac);font-weight:700}
.hw li{counter-increment:s}.hw li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;color:var(--ac);font:700 16px 'JetBrains Mono','DejaVu Sans Mono',monospace}
.df{display:flex;gap:16px;flex-wrap:wrap}
.nums{background:var(--bg2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.stats>div{padding:48px 40px}.stats>div+div{border-left:1px solid var(--line)}
.stats strong{display:block;font-size:clamp(56px,7vw,100px);line-height:1;color:var(--ac);letter-spacing:-.04em}
.stats span{display:block;margin-top:14px;font-size:20px;color:var(--soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.steps>div{padding:40px 36px 20px 0}.steps>div+div{padding-left:36px;border-left:1px solid var(--line)}
.steps small{display:block;color:var(--ac);font-size:17px;font-weight:700;text-transform:uppercase;margin-bottom:12px}
.steps h3{font-size:clamp(30px,3.4vw,46px);margin-bottom:12px}.steps h3:after{content:".";color:var(--ac)}
.steps p{color:var(--mute);font-size:19px}
.alt{background:var(--bg2)}
.wg{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.prom>div{padding:28px 0 28px 30px;border-left:2px solid var(--line)}.prom>div:hover{border-color:var(--ac)}
.prom h3{font-size:25px;margin-bottom:6px;font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;text-transform:none;letter-spacing:-.02em}
.prom h3:before{content:"// ";color:var(--ac)}
.prom p{color:var(--mute);font-size:19px}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.det{list-style:none;padding:0;margin-top:40px;border-top:1px solid var(--line)}
.det li{display:flex;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.det span{width:120px;color:var(--ac);font-weight:700;font-size:16px;text-transform:uppercase;flex:none;padding-top:3px}
.det a{font-weight:600;overflow-wrap:anywhere}.det a:hover{color:var(--ac)}
.card{border:1px solid var(--line);background:var(--bg2);padding:40px}
.card label{display:block;font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ac);margin-bottom:18px}
.card input,.card textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:19px;padding:14px 16px;border:1px solid var(--ib);background:var(--bg);color:var(--txt);border-radius:0}
.card input:focus,.card textarea:focus{outline:2px solid var(--ac)}
.hp{position:absolute!important;left:-9999px!important}
.note{padding:12px 16px;margin-bottom:18px;font-weight:600;font-size:18px}
.note.ok{background:#073B36;color:#8FF5EA}.note.er{background:#4A1515;color:#FFB4B4}
.foot{background:#000;border-top:1px solid #24282C;padding:70px 0 30px;color:#9AA4AB;font-size:19px}
.fg{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:50px}
.fb{display:block;color:#fff;font-size:28px;text-transform:uppercase;margin-bottom:8px}
.foot h4{color:#fff;font-size:16px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.foot p{margin-bottom:12px}.foot a:hover{color:#19E3D2}
.foot .menu{flex-direction:column;font-size:15px;gap:10px;color:#9AA4AB}.foot .menu>li>a{padding:0;color:inherit}
.cp{margin-top:50px;padding-top:24px;border-top:1px solid #24282C;font-size:16px}
.entry{padding-top:70px;padding-bottom:90px;max-width:860px}
.entry h1{font-size:46px;margin-bottom:24px}.entry h2{font-size:30px;margin:30px 0 10px}
.content>*+*{margin-top:1.1em}.content a{color:var(--ac);text-decoration:underline}.content img{max-width:100%;height:auto}
@media(max-width:960px){
 .wrap{padding:0 22px}.wg,.cg{grid-template-columns:1fr;gap:48px}section{padding:76px 0}
 .sg{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:120px}.art{max-width:380px;margin:0 auto;width:100%}.slider{min-height:0}
 .fgrid,.stats,.steps,.fg,.dcols{grid-template-columns:1fr}.fc:last-child:nth-child(3n+1){display:block}.fc:last-child:nth-child(3n+1) .ic{margin-bottom:56px}.fc:last-child:nth-child(3n+1) h3{margin-bottom:12px}.fc:last-child:nth-child(3n+1) .more{margin-top:22px}
 .stats>div+div{border-left:0;border-top:1px solid var(--line)}
 .steps>div,.steps>div+div{padding:30px 0 10px;border-left:0}.steps>div+div{border-top:1px solid var(--line)}
 .dbox{padding:22px 22px 30px}.dcols{gap:30px}
 .tg{display:block}.tc{font-size:16px}
 nav{display:none;position:absolute;top:100%;left:-22px;right:-22px;background:var(--bg);flex-direction:column;align-items:flex-start;padding:10px 22px 26px;gap:16px;border-bottom:1px solid var(--line)}
 body.open nav{display:flex}.menu{flex-direction:column;width:100%;font-size:18px}.menu>li{display:block}.menu>li>a{padding:12px 0}
 .menu .sub-menu{display:block;position:static;border:0;padding:0 0 0 16px;background:none}
 .admin-bar header.site{top:46px}.card{padding:26px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.tl{width:auto}}