/* =========================================================
   DNS IT Solutions, demo redesign
   Pure CSS animations (no JavaScript required)
   ========================================================= */

:root{
  --bg:#070b18;
  --bg-2:#0b1226;
  --surface:#111a35;
  --surface-2:#16224a;
  --line:rgba(255,255,255,.09);
  --text:#e8ecf8;
  --text-soft:#d5dcf2;
  --muted:#9aa6c7;
  --fill-1:rgba(255,255,255,.04);
  --fill-2:rgba(255,255,255,.08);
  --fill-3:rgba(255,255,255,.2);
  --nav-bg:rgba(7,11,24,.6);
  --menu-bg:rgba(7,11,24,.96);
  --panel-bg:rgba(7,11,24,.7);
  --shadow-c:rgba(0,0,0,.7);
  --lap-shadow:rgba(0,0,0,.6);
  --blob-o:.55;
  color-scheme:dark;
  --cyan:#22d3ee;
  --indigo:#6366f1;
  --orange:#ff8a3d;
  --grad:linear-gradient(90deg,#22d3ee,#6366f1 55%,#ff8a3d);
  --radius:20px;
  --font-head:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
}

/* ---------- light theme ---------- */
:root[data-theme="light"]{
  --bg:#f6f8fd;
  --bg-2:#e9eff9;
  --surface:#ffffff;
  --surface-2:#dfe8f8;
  --line:rgba(15,26,61,.13);
  --text:#0f1a3d;
  --text-soft:#27345f;
  --muted:#4a5878;
  --cyan:#0e7490;
  --indigo:#4f46e5;
  --orange:#d9560b;
  --grad:linear-gradient(90deg,#0891b2,#4f46e5 55%,#ea580c);
  --fill-1:rgba(15,26,61,.04);
  --fill-2:rgba(15,26,61,.07);
  --fill-3:rgba(15,26,61,.18);
  --nav-bg:rgba(255,255,255,.78);
  --menu-bg:rgba(255,255,255,.98);
  --panel-bg:rgba(255,255,255,.85);
  --shadow-c:rgba(15,26,61,.3);
  --lap-shadow:rgba(15,26,61,.28);
  --blob-o:.28;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  transition:background-color .35s, color .35s;
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,3.3vw,2.75rem);font-weight:800;line-height:1.18}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em}
.container{width:min(1480px,95%);margin-inline:auto}
.lead{font-size:1.125rem;color:var(--muted);max-width:60ch}
.lead.small{font-size:.9rem}

/* animated gradient text */
.shine{
  background:var(--grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:200% 0}}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:1rem;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:999px;font-weight:600;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;font-family:inherit;color:#fff;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn--sm{padding:.7rem 1.25rem;font-size:.95rem;background:var(--indigo)}
.btn--sm:hover{background:#7c7ff5}
.btn--glow{
  background:linear-gradient(135deg,var(--indigo),var(--cyan));
  box-shadow:0 10px 30px -8px rgba(99,102,241,.7);
  position:relative;overflow:hidden;
}
.btn--glow::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);animation:sweep 3.6s ease-in-out infinite;
}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
.btn--glow:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(34,211,238,.6)}
.btn--ghost{border-color:var(--line);background:var(--fill-1);color:var(--text)}
.btn--ghost:hover{background:var(--fill-2);transform:translateY(-3px)}
.btn--ghost span{transition:transform .25s}
.btn--ghost:hover span{transform:translateX(5px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 2.5%;
  background:var(--nav-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  animation:navIn .8s ease both;
}
@keyframes navIn{from{transform:translateY(-100%);opacity:0}}
.nav__logo img{height:58px;width:auto;background:#fff;border-radius:12px;padding:5px 11px}
.nav__links{display:flex;align-items:center;gap:1.9rem;font-size:1rem;font-weight:500}
.nav__links a:not(.btn){position:relative;color:var(--muted);transition:color .2s}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.nav__links a:not(.btn):hover{color:var(--text)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1)}
.nav__toggle{display:none}
.nav__burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem}
.nav__burger span{width:28px;height:2px;background:var(--text);transition:.3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:8.5rem 0 8.5rem;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-o)}
.blob--1{width:480px;height:480px;background:#4f46e5;top:-120px;left:-100px;animation:float1 16s ease-in-out infinite}
.blob--2{width:420px;height:420px;background:#06b6d4;bottom:-140px;right:-60px;animation:float2 19s ease-in-out infinite}
.blob--3{width:300px;height:300px;background:#ff8a3d;top:40%;left:46%;opacity:calc(var(--blob-o) * .45);animation:float1 22s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate(90px,70px) scale(1.15)}}
@keyframes float2{50%{transform:translate(-80px,-60px) scale(1.1)}}
.grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%);
  animation:gridMove 14s linear infinite;
}
@keyframes gridMove{to{background-position:56px 56px}}

.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero__copy > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero__copy > :nth-child(1){animation-delay:.15s}
.hero__copy > :nth-child(2){animation-delay:.3s}
.hero__copy > :nth-child(3){animation-delay:.45s}
.hero__copy > :nth-child(4){animation-delay:.6s}
.hero__copy > :nth-child(5){animation-delay:.75s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0 2.2rem}

.partners__label{margin:0 0 .8rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;padding:0;margin:0}
.trust li{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.trust__logo{display:grid;place-items:center;width:132px;height:76px;padding:8px 16px;background:#fff;border-radius:16px;box-shadow:0 14px 30px -14px var(--shadow-c);transition:transform .3s,box-shadow .3s}
.trust li:hover .trust__logo{transform:translateY(-5px);box-shadow:0 20px 34px -14px rgba(34,211,238,.5)}
.trust__logo img{height:52px;width:auto;max-width:100%;object-fit:contain}

/* hero visual, 3D laptop: underside repair -> flip -> open -> close -> flip (21s loop) */
.hero__visual{position:relative;display:grid;place-items:center;width:100%;animation:zoomIn 1.2s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes zoomIn{from{opacity:0;transform:scale(.85) rotate(-2deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes chipFloat{50%{transform:translateY(-14px)}}

.ring{position:absolute;border:1px dashed rgba(34,211,238,.35);border-radius:50%}
.ring--1{width:82%;aspect-ratio:1;animation:spin 30s linear infinite}
.ring--2{width:104%;aspect-ratio:1;border-color:rgba(99,102,241,.3);animation:spin 44s linear infinite reverse}

.stage{position:relative;z-index:2;width:100%;height:clamp(340px,42vw,480px);perspective:1700px;display:grid;place-items:center}
.rig,.lap,.base,.hinge,.lid{transform-style:preserve-3d}
.rig{position:relative;width:0;height:0;transform:translateY(34px) rotateX(56deg) rotateZ(-18deg) scale(var(--sc,1))}
.shadow{position:absolute;width:460px;height:330px;left:-230px;top:-165px;transform:translateZ(-12px);background:radial-gradient(ellipse at center,var(--lap-shadow),transparent 66%)}

.lap{position:absolute;left:0;top:0;width:0;height:0;animation:flip 21s ease-in-out infinite;transform:rotateY(180deg)}
@keyframes flip{
  0%,48.57%{transform:translateZ(0) rotateY(180deg)}
  52.38%{transform:translateZ(80px) rotateY(90deg)}
  56.19%,86.67%{transform:translateZ(0) rotateY(0deg)}
  90.48%{transform:translateZ(80px) rotateY(90deg)}
  94.29%,100%{transform:translateZ(0) rotateY(180deg)}
}

.base,.lid{position:absolute;left:0;top:0;width:0;height:0}
.hinge{position:absolute;left:0;top:-110px;width:0;height:0;transform:translateZ(8px);animation:hinge 21s ease-in-out infinite}
@keyframes hinge{
  0%,57.14%{transform:translateZ(8px) rotateX(0deg)}
  64.76%,77.14%{transform:translateZ(8px) rotateX(118deg)}
  84.76%,100%{transform:translateZ(8px) rotateX(0deg)}
}
.lid{top:110px;transform:translateZ(5px)}

.face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face svg{display:block;width:100%;height:100%}
.base-top,.base-bottom,.lid-outer,.lid-inner{width:340px;height:220px;left:-170px;top:-110px;border-radius:14px}
.base-top{transform:translateZ(8px)}
.base-bottom{transform:rotateY(180deg) translateZ(8px);overflow:visible}
.lid-outer{transform:translateZ(5px);background:linear-gradient(135deg,#34427f,#1a2350 60%,#222e63);border:2px solid #3a4a86;display:grid;place-items:center}
.lid-inner{transform:rotateX(180deg) translateZ(5px)}
.side{background:linear-gradient(#26336a,#1a2350);}
.base-front,.base-back{width:340px;height:16px;left:-170px;top:-8px}
.base-front{transform:translateY(110px) rotateX(-90deg)}
.base-back{transform:translateY(-110px) rotateX(90deg)}
.base-left,.base-right{width:16px;height:220px;left:-8px;top:-110px}
.base-left{transform:translateX(-170px) rotateY(-90deg)}
.base-right{transform:translateX(170px) rotateY(90deg)}
.lid-front,.lid-back{width:340px;height:10px;left:-170px;top:-5px}
.lid-front{transform:translateY(110px) rotateX(-90deg)}
.lid-back{transform:translateY(-110px) rotateX(90deg)}
.lid-left,.lid-right{width:10px;height:220px;left:-5px;top:-110px}
.lid-left{transform:translateX(-170px) rotateY(-90deg)}
.lid-right{transform:translateX(170px) rotateY(90deg)}

.logo{display:grid;place-items:center;background:#fff;border-radius:16px;padding:10px 20px;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.logo img{height:54px;width:auto;display:block}
.lid-outer::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 5s ease-in-out infinite}
.okpulse{transform-box:fill-box;transform-origin:center;animation:okp 2s ease-in-out infinite}
@keyframes okp{50%{transform:scale(1.35);opacity:.05}}

/* repair sequence on the underside */
.panel{animation:panel 21s ease-in-out infinite}
@keyframes panel{0%,20.00%{opacity:1;transform:translateY(0)}23.43%,42.29%{opacity:0;transform:translateY(-40px)}100%{opacity:1;transform:translateY(0)}}
.screw--1{animation:screw1 21s linear infinite;transform-origin:0 0}
@keyframes screw1{0%,6.71%{opacity:1;transform:rotate(0) scale(1)}8.43%,42.24%{opacity:0;transform:rotate(600deg) scale(1.5)}42.29%,100%{opacity:1;transform:rotate(0) scale(1)}}
.screw--2{animation:screw2 21s linear infinite;transform-origin:0 0}
@keyframes screw2{0%,10.14%{opacity:1;transform:rotate(0) scale(1)}11.86%,42.24%{opacity:0;transform:rotate(600deg) scale(1.5)}42.29%,100%{opacity:1;transform:rotate(0) scale(1)}}
.screw--3{animation:screw3 21s linear infinite;transform-origin:0 0}
@keyframes screw3{0%,13.57%{opacity:1;transform:rotate(0) scale(1)}15.29%,42.24%{opacity:0;transform:rotate(600deg) scale(1.5)}42.29%,100%{opacity:1;transform:rotate(0) scale(1)}}
.screw--4{animation:screw4 21s linear infinite;transform-origin:0 0}
@keyframes screw4{0%,17.00%{opacity:1;transform:rotate(0) scale(1)}18.71%,42.24%{opacity:0;transform:rotate(600deg) scale(1.5)}42.29%,100%{opacity:1;transform:rotate(0) scale(1)}}

.driver{animation:driver 21s ease-in-out infinite;opacity:0;transform:translate(52px,48px)}
@keyframes driver{
  0%,5.43%{opacity:0;transform:translate(52px,48px)}
  6.29%,9.07%{opacity:1;transform:translate(52px,48px)}
  9.93%,12.50%{opacity:1;transform:translate(288px,48px)}
  13.36%,15.93%{opacity:1;transform:translate(288px,172px)}
  16.79%,19.36%{opacity:1;transform:translate(52px,172px)}
  20.86%,100%{opacity:0;transform:translate(20px,205px)}
}
.bob{animation:bob2 .35s ease-in-out infinite alternate}
@keyframes bob2{to{transform:translateY(3px)}}
.warn{animation:warn 21s linear infinite}
@keyframes warn{0%,27.71%{opacity:1}28.57%,42.29%{opacity:0}100%{opacity:1}}
.blink{animation:blink .8s ease-in-out infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.15}}
.chip{animation:chip 21s ease-in-out infinite;opacity:0;transform:translateY(-130px)}
@keyframes chip{
  0%,23.43%{opacity:0;transform:translateY(-130px)}
  24.29%{opacity:1;transform:translateY(-130px)}
  28.14%{opacity:1;transform:translateY(5px)}
  29.21%,41.43%{opacity:1;transform:translateY(0)}
  42.71%{opacity:0;transform:translateY(0)}
  42.76%,100%{opacity:0;transform:translateY(-130px)}
}
.seat{animation:seat 21s linear infinite;opacity:0}
@keyframes seat{0%,29.00%{opacity:0}29.86%{opacity:1}32.86%,100%{opacity:0}}
.tick{transform-origin:0 0;animation:tick 21s ease-out infinite;opacity:0;transform:scale(0)}
@keyframes tick{0%,30.71%{opacity:0;transform:scale(0)}32.43%{opacity:1;transform:scale(1.15)}33.29%,41.43%{opacity:1;transform:scale(1)}42.71%{opacity:0;transform:scale(.9)}100%{opacity:0;transform:scale(0)}}
.pulse-ring{transform-origin:0 0;animation:pring 21s ease-out infinite;opacity:0}
@keyframes pring{0%,31.14%{opacity:0;transform:scale(.6)}31.57%{opacity:.85;transform:scale(.6)}36.29%,100%{opacity:0;transform:scale(2.2)}}


/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);padding:1.4rem 0}
.marquee__track{display:flex;gap:2.6rem;padding-right:2.6rem;width:max-content;animation:marquee 40s linear infinite;font-family:var(--font-head);font-size:1.6rem;font-weight:700;color:var(--text-soft);white-space:nowrap}
.marquee__track i{color:var(--orange);font-style:normal;font-size:1.15rem;align-self:center}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:6.5rem 0}
.section--alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.section__head{text-align:center;max-width:760px;margin:0 auto 3.5rem}
.section__head .lead{margin-inline:auto}

/* scroll reveal, CSS only where supported, always visible otherwise */
@supports (animation-timeline: view()){
  .reveal{
    animation:reveal both cubic-bezier(.2,.7,.2,1);
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
  @keyframes reveal{from{opacity:0;transform:translateY(60px) scale(.97)}}
}

/* ---------- services: sticky split-screen ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
.split__list{display:flex;flex-direction:column}
.svc{
  min-height:68vh;display:flex;flex-direction:column;justify-content:center;
  padding:2rem 0 2rem 1.6rem;border-left:2px solid var(--line);
  opacity:.38;transition:opacity .5s, border-color .5s, transform .5s;
}
.svc.is-active{opacity:1;border-left-color:var(--cyan);transform:translateX(6px)}
.svc__m{display:none}
.svc__n{font-family:var(--font-head);font-weight:800;font-size:.95rem;letter-spacing:.14em;color:var(--cyan);margin-bottom:.6rem}
.svc h3{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;margin-bottom:.7rem}
.svc p{color:var(--muted);font-size:1.05rem;max-width:46ch}
.svc__list{list-style:none;padding:0;margin:.4rem 0 1.4rem;display:grid;gap:.55rem}
.svc__list li{position:relative;padding-left:1.7rem;font-size:.97rem}
.svc__list li::before{content:"";position:absolute;left:0;top:.45em;width:.9rem;height:.9rem;border-radius:50%;background:var(--grad)}
.svc__list li::after{content:"";position:absolute;left:.3rem;top:.62em;width:.28rem;height:.5rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.8)}
.tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:99px;background:rgba(255,138,61,.15);color:var(--orange);margin-bottom:.8rem}
.more{font-weight:700;color:var(--cyan);display:inline-flex;gap:.4rem;align-items:center;align-self:flex-start}
.more span{transition:transform .25s}
.more:hover span{transform:translateX(6px)}

.split__media{position:sticky;top:calc(50vh - 220px);align-self:start}
.stack{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 90px -35px rgba(34,211,238,.35),0 30px 60px -30px var(--shadow-c);background:var(--surface);
}
.stack__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg-2);
  opacity:0;transform:scale(1.12);transition:opacity .7s ease, transform 1.3s cubic-bezier(.2,.7,.2,1);
}
.stack__img.is-active{opacity:1;transform:scale(1)}
.stack__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,11,24,.88))}
.stack::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.stack__caption{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;display:flex;align-items:baseline;gap:.9rem}
.stack__num{font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stack__title{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:#fff}
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.1rem}
.dots i{width:8px;height:8px;border-radius:99px;background:var(--fill-3);transition:width .4s, background .4s}
.dots i.is-active{width:28px;background:var(--cyan)}

/* no JS: every item stays fully readable */
html:not(.js) .svc{opacity:1}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.about__media{position:relative;display:grid;place-items:center;padding:1.5rem}
.frame{
  position:relative;z-index:2;width:min(400px,100%);aspect-ratio:1;border-radius:32px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 40px 80px -30px var(--shadow-c);
  animation:tilt 9s ease-in-out infinite;
}
.frame img{width:100%;height:100%;object-fit:cover}
@keyframes tilt{50%{transform:rotate(2.5deg) translateY(-8px)}}
.badge{
  position:absolute;z-index:3;bottom:0;right:4%;
  background:linear-gradient(135deg,var(--indigo),var(--cyan));
  padding:.9rem 1.3rem;border-radius:18px;display:flex;flex-direction:column;line-height:1.2;
  box-shadow:0 20px 40px -15px rgba(34,211,238,.6);animation:chipFloat 6s ease-in-out infinite;
}
.badge b{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.badge span{font-family:var(--font-head);font-weight:600;font-size:1.05rem}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb--a{width:120px;height:120px;top:0;left:0;background:radial-gradient(circle at 30% 30%,#22d3ee,transparent 70%);animation:float1 10s ease-in-out infinite}
.orb--b{width:90px;height:90px;bottom:10%;left:2%;background:radial-gradient(circle at 30% 30%,#ff8a3d,transparent 70%);animation:float2 12s ease-in-out infinite}

/* animated counters (CSS @property) */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.stat{padding:1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--fill-1);position:relative}
.stat .count{
  font-family:var(--font-head);font-size:2.8rem;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  counter-reset:num var(--n);animation:count 2.4s ease-out both;
}
.stat .count::after{content:counter(num)}
.stat em{font-style:normal;font-family:var(--font-head);font-size:2rem;color:var(--orange)}
.stat small{display:block;color:var(--muted);font-size:.82rem;margin-top:.2rem}
@keyframes count{from{--n:0}to{--n:var(--to)}}

/* ---------- process ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.steps::before{
  content:"";position:absolute;top:38px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--indigo),var(--orange),transparent);
  background-size:200% 100%;animation:shine 5s linear infinite;opacity:.6;
}
.step{position:relative;text-align:center;padding:0 .5rem}
.step__n{
  position:relative;z-index:1;display:grid;place-items:center;width:76px;height:76px;margin:0 auto 1.2rem;
  border-radius:50%;background:var(--surface-2);border:2px solid var(--cyan);
  font-family:var(--font-head);font-weight:700;font-size:1.3rem;
  transition:transform .4s, background .4s, box-shadow .4s;
}
.step:hover .step__n{transform:scale(1.15) rotate(-6deg);background:var(--indigo);color:#fff;box-shadow:0 0 0 10px rgba(99,102,241,.2)}
.step p{color:var(--muted);font-size:.93rem}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.review{
  margin:0;padding:2rem;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));position:relative;
  transition:transform .4s;
}
.review:hover{transform:translateY(-8px) rotate(-.6deg)}
.review::before{content:"“";position:absolute;top:.4rem;right:1.4rem;font:700 6rem/1 var(--font-head);color:rgba(99,102,241,.18)}
.stars{color:var(--orange);letter-spacing:.15em;margin-bottom:.8rem;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{filter:brightness(1.6)}}
.review blockquote{margin:0 0 1.4rem;color:var(--text);font-size:.98rem}
.review figcaption{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.92rem;flex-wrap:wrap}
.review small{color:var(--muted);font-weight:400;width:100%;padding-left:calc(40px + .7rem);margin-top:-.5rem}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--font-head)}

/* ---------- CTA / contact ---------- */
.cta{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
  padding:3.5rem;border-radius:32px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(34,211,238,.08));
}
.cta__glow{
  position:absolute;width:520px;height:520px;top:-200px;right:-160px;border-radius:50%;
  background:conic-gradient(from 0deg,#22d3ee,#6366f1,#ff8a3d,#22d3ee);
  filter:blur(110px);opacity:.28;animation:spin 18s linear infinite;
}
.cta > :not(.cta__glow){position:relative;z-index:1}
.contact{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.9rem}
.contact li{display:flex;gap:.9rem;align-items:flex-start}
.contact a{transition:color .2s}
.contact a:hover{color:var(--cyan)}
.ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--fill-2)}
.ico svg{width:22px;height:22px;fill:var(--cyan)}

.form{display:grid;gap:1rem;padding:1.8rem;border-radius:var(--radius);background:var(--panel-bg);backdrop-filter:blur(10px);border:1px solid var(--line)}
.form label{display:grid;gap:.4rem;font-size:.85rem;color:var(--muted);font-weight:500}
.form input,.form select,.form textarea{
  font:inherit;color:var(--text);background:var(--fill-1);
  border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.form select option{background:var(--bg-2)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.18);background:var(--fill-2)}
.form .btn{justify-content:center;margin-top:.4rem}

/* ---------- form status messages ---------- */
.form__status{
  display:none;
  padding:.85rem 1.1rem;
  border-radius:12px;
  font-size:.88rem;
  font-weight:500;
  text-align:center;
  line-height:1.45;
  transition:all .3s ease;
}
.form__status.is-visible{display:block}
.form__status--loading{background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);color:var(--cyan)}
.form__status--success{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.45);color:#34d399}
.form__status--error{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.45);color:#f87171}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:3rem 0 1.4rem;background:var(--bg-2)}
.footer__inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer img{background:#fff;border-radius:10px;padding:4px 8px;margin-bottom:.8rem}
.footer p{color:var(--muted);font-size:.9rem;margin:0}
.footer nav,.footer .social{display:flex;flex-direction:column;gap:.5rem;font-size:.93rem;color:var(--muted)}
.footer a:hover{color:var(--cyan)}
.copy{text-align:center;margin-top:2rem !important;font-size:.8rem !important}

/* floating WhatsApp */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.8);animation:waPulse 2.4s infinite;
  transition:transform .25s;
}
.wa:hover{transform:scale(1.12) rotate(-8deg)}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 20px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero__inner,.about,.cta{grid-template-columns:1fr}
  .hero{padding-top:7.5rem}
  .hero__visual{max-width:480px;margin-inline:auto}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .steps::before{display:none}
  .reviews{grid-template-columns:1fr}
  .cta{padding:2rem}
}
@media (max-width:760px){
  .nav__burger{display:flex}
  .nav__logo img{height:46px;padding:4px 9px}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1rem;
    padding:1.4rem 6%;background:var(--menu-bg);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;padding-block:0;opacity:0;transition:.4s;
  }
  .nav__toggle:checked ~ .nav__links{max-height:420px;padding-block:1.4rem;opacity:1}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:.6rem}
  .stat{padding:.9rem .6rem}
  .stat .count{font-size:2rem}
  .steps{grid-template-columns:1fr}
  .section{padding:4.5rem 0}
  .marquee__track{font-size:1.25rem}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media (max-width:760px){.stage{--sc:.72;height:340px}}
@media (min-width:761px) and (max-width:980px){.stage{--sc:.9}}

@media (max-width:520px){.trust{gap:.7rem}.trust__logo{width:100px;height:62px;padding:6px 10px}.trust__logo img{height:40px}}

@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:0}
  .split__media{display:none}
  .svc{min-height:0;opacity:1;transform:none !important;padding:0 0 2.4rem;border-left:0;margin-bottom:2.2rem;border-bottom:1px solid var(--line)}
  .svc__m{display:block;border-radius:22px;overflow:hidden;margin-bottom:1.3rem;aspect-ratio:16/9;border:1px solid var(--line)}
  .svc__m img{width:100%;height:100%;object-fit:contain;background:var(--bg-2)}
  .svc:last-child{border-bottom:0;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){.stack__img{transition:opacity .01ms}}

/* ---------- theme toggle ---------- */
.theme-toggle{
  flex:none;display:grid;place-items:center;width:46px;height:46px;margin-left:1rem;border-radius:50%;
  border:1px solid var(--line);background:var(--fill-1);color:var(--text);cursor:pointer;
  transition:background .25s, transform .3s, border-color .25s;
}
.theme-toggle:hover{background:var(--fill-2);transform:rotate(18deg);border-color:var(--cyan)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.theme-toggle svg{width:24px;height:24px;fill:currentColor}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
@media (max-width:760px){
  .nav__burger{order:3}
  .theme-toggle{order:2;margin-left:auto;width:42px;height:42px}
}

/* light theme touch-ups */
.badge{color:#fff}
.nav__links{margin-left:auto}
:root[data-theme="light"] .nav__logo img{border:1px solid var(--line)}
@media (max-width:760px){.nav__links{margin-left:0}}

/* services strip lives at the bottom of the hero */
.hero > .marquee{position:absolute;left:0;right:0;bottom:0;z-index:2;border-bottom:0;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}