:root{
 --bg:#05030a;--panel:#090713;--panel2:#0d0918;--white:#f4f0ff;
 --muted:#afa6c0;--violet:#a84dff;--purple:#7518ff;--blue:#4d8cff;
 --pink:#e44dff;--line:rgba(185,90,255,.35);--r:28px;
}
*{box-sizing:border-box}
html,body{margin:0;background:#020205;color:var(--white);font-family:Tahoma,"Segoe UI",Arial,sans-serif;min-height:100%;overflow-x:hidden}
body{background:radial-gradient(circle at 50% 0,#130a26 0,#05030a 42%,#020205 100%)}
button,a{font:inherit}
button{color:inherit}
.ambient{position:fixed;inset:0;pointer-events:none;background:
 radial-gradient(circle at 8% 10%,rgba(40,140,255,.13),transparent 24%),
 radial-gradient(circle at 92% 18%,rgba(180,40,255,.14),transparent 26%);
 filter:blur(8px);z-index:0}
.page{display:none;position:relative;z-index:1;width:min(100%,980px);min-height:100vh;margin:auto;padding:22px 20px 48px}
.page.active{display:block;animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.start-page{display:none;align-content:center;text-align:center;overflow:hidden;min-height:100vh;padding-bottom:70px}
.start-page.active{display:grid}
.start-office{position:absolute;inset:0;background:
 linear-gradient(to bottom,rgba(0,0,0,.16),rgba(0,0,0,.75)),
 url('assets/ui/approved-office.png') center 42%/cover no-repeat;opacity:.52;filter:saturate(1.18) contrast(1.07)}
.start-grid{position:absolute;inset:0;background-image:
 linear-gradient(rgba(170,70,255,.04) 1px,transparent 1px),
 linear-gradient(90deg,rgba(170,70,255,.04) 1px,transparent 1px);
 background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.brand-stage{width:min(76vw,520px);aspect-ratio:1;margin:1vh auto 12px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 15px 35px #000)}
.brand-stage::before{content:"";position:absolute;width:82%;height:17%;bottom:12%;border-radius:50%;
 border:2px solid rgba(145,65,255,.65);box-shadow:0 0 20px #7a27ff,0 0 50px rgba(77,140,255,.55);animation:stagePulse 3s ease-in-out infinite}
.brand-logo{width:72%;height:72%;object-fit:cover;border-radius:32%;position:relative;z-index:3;box-shadow:0 0 30px rgba(85,150,255,.45)}
.brand-stage::after{content:"";position:absolute;z-index:5;width:76%;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);filter:drop-shadow(0 0 8px white);transform:rotate(-13deg);animation:sweep 4.2s ease-in-out infinite}
@keyframes sweep{0%,18%{opacity:0;translate:-55% -60px}28%{opacity:1}55%{opacity:1;translate:55% 55px}65%,100%{opacity:0;translate:55% 55px}}
@keyframes stagePulse{50%{box-shadow:0 0 35px #8a35ff,0 0 75px rgba(45,132,255,.7);transform:scaleX(1.04)}}
.orbit{position:absolute;border-radius:50%;border:2px solid transparent;z-index:2}
.orbit-a{width:86%;height:86%;border-top-color:#49b4ff;border-right-color:#9848ff;animation:spin 6s linear infinite}
.orbit-b{width:66%;height:66%;border-left-color:#d150ff;border-bottom-color:#529cff;animation:spinBack 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinBack{to{transform:rotate(-360deg)}}
.circuit{position:absolute;width:26%;height:24%;top:40%;z-index:1;opacity:.9;
 background:
 linear-gradient(#45b9ff,#45b9ff) 0 15%/66% 2px no-repeat,
 linear-gradient(#784cff,#784cff) 0 48%/92% 2px no-repeat,
 linear-gradient(#da53ff,#da53ff) 0 82%/56% 2px no-repeat;
 filter:drop-shadow(0 0 5px #6b8cff);animation:circuitPulse 1.8s ease-in-out infinite alternate}
.left-circuit{left:0}.right-circuit{right:0;transform:scaleX(-1);animation-delay:.45s}
.circuit::before,.circuit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#57c7ff;box-shadow:0 0 10px #57c7ff;animation:dotMove 1.8s ease-in-out infinite}
.circuit::before{top:12%;left:58%}.circuit::after{top:78%;left:50%;animation-delay:.7s}
@keyframes circuitPulse{to{filter:drop-shadow(0 0 10px #9d51ff);opacity:1}}
@keyframes dotMove{50%{transform:translateX(34px);background:#df4dff}}
.start-title{font-family:"Segoe UI",Tahoma,sans-serif;letter-spacing:.5em;margin:0 0 6px;font-size:clamp(24px,6vw,44px);font-weight:300;text-shadow:0 0 18px rgba(155,85,255,.7)}
.start-sub{font-size:clamp(17px,4vw,24px);margin:0 0 28px;color:#ddd}.start-sub b{color:#d95dff}
.primary-btn{width:min(86%,560px);height:74px;margin:auto;border:0;border-radius:20px;background:linear-gradient(100deg,rgba(83,22,161,.92),rgba(15,120,255,.7));font-size:24px;font-weight:700;display:flex;justify-content:center;gap:28px;align-items:center;cursor:pointer}
.arrow{font-size:35px;animation:arrowNudge 1.1s ease-in-out infinite}@keyframes arrowNudge{50%{transform:translateX(-8px)}}
.tap-hint{margin-top:18px;color:#aaa;font-size:13px}.tap-hint span{display:inline-block;animation:bob 1s infinite}@keyframes bob{50%{transform:translateY(5px)}}

.neon-frame{position:relative;isolation:isolate;border:1px solid rgba(169,100,255,.42);overflow:hidden}
.neon-frame::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:
 conic-gradient(from var(--a),transparent 0 63%,#45bfff 70%,#d94dff 78%,transparent 87%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;animation:borderSpin 5.2s linear infinite;pointer-events:none}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes borderSpin{to{--a:360deg}}
.neon-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 20px rgba(127,57,255,.08);pointer-events:none}

.topbar,.section-head{height:72px;display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
.topbar{margin-bottom:12px}
.back-home,.back{width:46px;height:46px;border:1px solid rgba(170,100,255,.35);border-radius:50%;background:#0a0712;color:#fff;cursor:pointer;font-size:22px;box-shadow:0 0 16px rgba(118,56,255,.15)}
.back-home:hover,.back:hover{box-shadow:0 0 20px #7e33ff}
.mini-logo{width:84px;height:84px;object-fit:cover;border-radius:18px;justify-self:center;box-shadow:0 0 22px rgba(96,117,255,.28)}
.office-banner{height:280px;border:1px solid rgba(168,92,255,.25);border-radius:30px;background:
 linear-gradient(90deg,rgba(4,3,9,.9),rgba(4,3,9,.28)),
 url('assets/ui/approved-office.png') center 45%/cover no-repeat;display:flex;align-items:center;padding:30px;margin-bottom:18px;overflow:hidden}
.office-banner::after{content:"";position:absolute}
.office-copy h2{font-size:28px;margin:0 0 8px}.office-copy em{font-style:normal;color:#d54eff}.office-copy p{color:#d0c8d8}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.menu-card{min-height:190px;border-radius:24px;background:linear-gradient(145deg,#0c0915,#05040a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.menu-card:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(124,56,255,.22)}
.menu-card strong{font-size:20px}.menu-card small{color:#aaa}
.iconbox{width:74px;height:74px;display:grid;place-items:center;position:relative;filter:drop-shadow(0 0 8px #8a53ff)}
.iconbox::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed #a252ff;animation:spin 4s linear infinite;opacity:.5}
.iconbox svg{width:54px;height:54px;fill:none;stroke:#b26cff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:iconGlow 1.9s ease-in-out infinite alternate}
@keyframes iconGlow{to{stroke:#58bfff;filter:drop-shadow(0 0 7px #58bfff)}}

.section-head h2{text-align:center;margin:0;font-size:25px}.section-head h2::after{content:"";display:block;width:35px;height:2px;margin:8px auto;background:#d74fff;box-shadow:0 0 8px #d74fff}
.section-lead{text-align:center;color:#aaa;margin:0 0 20px}
.about-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.glass{background:linear-gradient(145deg,rgba(18,12,30,.94),rgba(7,5,13,.94));border:1px solid rgba(161,88,255,.22);border-radius:26px}
.about-copy{padding:26px;line-height:2}.about-copy h3{margin-top:0;font-size:24px}.about-copy em{color:#d955ff;font-style:normal}.about-copy p{color:#d0c8d8}
.about-visual{min-height:360px;position:relative;overflow:hidden}.desk-scene{position:absolute;inset:0;background:url('assets/ui/approved-office.png') center 48%/cover no-repeat;opacity:.72}.about-visual img{position:absolute;width:42%;right:8%;top:22%;border-radius:22px;box-shadow:0 0 30px rgba(126,64,255,.45)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.stat{background:#090612;border-radius:18px;padding:22px 10px;text-align:center}.stat b{display:block;font-size:27px;color:#fff;text-shadow:0 0 11px #a94fff}.stat span{font-size:12px;color:#aaa}

.service-list{display:grid;gap:14px}.service{border-radius:22px;background:linear-gradient(100deg,#0b0812,#07050d);padding:18px;display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:center}.service-icon{width:62px;height:62px;border-radius:18px;border:1px solid rgba(158,80,255,.35);display:grid;place-items:center;font-size:30px;color:#bd6dff;box-shadow:inset 0 0 22px rgba(116,49,255,.1);animation:iconGlowBox 2.3s ease-in-out infinite alternate}.service h3{margin:0 0 4px;font-size:19px}.service p{margin:0 0 8px;color:#bcb3c8}.service small{color:#9e94aa}.service small b{color:#e0b6ff}
@keyframes iconGlowBox{to{box-shadow:inset 0 0 30px rgba(95,108,255,.2),0 0 15px rgba(181,67,255,.23);transform:scale(1.03)}}

.tabs{display:flex;gap:8px;overflow:auto;padding:4px 0 16px}.tab{white-space:nowrap;border:1px solid rgba(160,80,255,.24);background:#090612;color:#d5ccdf;border-radius:18px;padding:10px 18px;cursor:pointer}.tab.active{background:linear-gradient(90deg,#43107d,#7614b8);box-shadow:0 0 14px rgba(172,58,255,.3)}.tab.disabled{opacity:.36;cursor:not-allowed}
.tabpane{display:none}.tabpane.active{display:block}
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.logo-card{background:#08060d;border:1px solid rgba(150,80,255,.22);border-radius:22px;padding:12px;position:relative;overflow:hidden}.logo-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:15px}.logo-card h3{margin:10px 0 4px}.logo-card p{margin:0;color:#aaa;font-size:12px}.logo-card::after{content:"";position:absolute;left:-35%;bottom:-25%;width:55%;height:2px;background:#b24cff;box-shadow:0 0 10px #c84cff;animation:cardSweep 3.2s ease-in-out infinite}@keyframes cardSweep{50%{left:90%}}
.motion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.motion-card{border:1px solid rgba(150,80,255,.22);border-radius:22px;background:#08060d;overflow:hidden;cursor:pointer}.motion-thumb{height:200px;position:relative;background:#0e0a16;display:grid;place-items:center}.motion-thumb img{width:100%;height:100%;object-fit:cover;opacity:.72}.play{position:absolute;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(35,10,65,.75);border:1px solid #c15aff;box-shadow:0 0 25px rgba(182,60,255,.45);font-size:26px;animation:playPulse 1.8s infinite}.motion-card h3{padding:0 14px;margin:12px 0 4px}.motion-card p{padding:0 14px 14px;margin:0;color:#aaa;font-size:12px}@keyframes playPulse{50%{transform:scale(1.08);box-shadow:0 0 36px #8130ff}}
.catalog-card{display:grid;grid-template-columns:42% 1fr;gap:18px;padding:18px;background:#08060d;border-radius:24px;color:#fff;text-decoration:none}.catalog-preview{min-height:260px;border-radius:18px;background:linear-gradient(145deg,#181322,#08060d);display:grid;place-items:center;border:1px solid rgba(177,84,255,.24)}.catalog-preview span{font-size:25px;letter-spacing:.2em;color:#dba7ff;text-shadow:0 0 16px #7525ff}.catalog-card p,.catalog-card small{color:#aaa}

.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}.contact-list{display:grid;gap:14px}.contact-card{display:grid;grid-template-columns:58px 1fr 20px;gap:12px;align-items:center;background:#090612;border:1px solid rgba(146,81,255,.2);border-radius:20px;padding:13px 16px;color:#fff;text-decoration:none;animation:contactPop 8s ease-in-out infinite;transform-origin:center}.contact-card:nth-child(2){animation-delay:1.6s}.contact-card:nth-child(3){animation-delay:3.2s}.contact-card:nth-child(4){animation-delay:4.8s}
.contact-card small{display:block;color:#aaa;margin-bottom:4px}.contact-card strong{font-size:14px;word-break:break-word}
.contact-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:#0e0a17;box-shadow:inset 0 0 18px rgba(80,80,255,.18)}.ig{color:#ff64d4}.tg{color:#5bbcff}.ph{color:#59e780}.em{color:#b481ff}
@keyframes contactPop{0%,12%,100%{transform:perspective(700px) translateZ(0) scale(1)}6%{transform:perspective(700px) translateZ(55px) scale(1.07);box-shadow:0 12px 38px rgba(134,56,255,.28)}}
.contact-stage{min-height:460px;border:1px solid rgba(150,80,255,.2);border-radius:28px;background:radial-gradient(circle at 50% 56%,rgba(104,42,255,.22),transparent 33%),linear-gradient(145deg,#0b0813,#06040b);position:relative;display:grid;place-items:center;overflow:hidden}
.phone3d{width:48%;aspect-ratio:.58;border:3px solid #8058ff;border-radius:35px;transform:rotateY(-15deg) rotateX(6deg);background:linear-gradient(#111021,#030308);box-shadow:0 0 40px rgba(92,80,255,.3);display:grid;place-items:center}.phone3d img{width:68%;border-radius:22px}.orb{position:absolute;border-radius:50%;border:1px solid #a448ff}.o1{width:70%;height:25%;bottom:12%;animation:spin 8s linear infinite}.o2{width:56%;height:18%;bottom:16%;border-color:#4b9cff;animation:spinBack 7s linear infinite}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:20;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-box{width:min(94vw,760px);background:#08060d;border:1px solid rgba(179,80,255,.35);border-radius:24px;padding:16px;box-shadow:0 0 45px rgba(110,30,255,.25)}.modal-box h3{margin:0 0 12px}.modal video{width:100%;max-height:78vh;border-radius:16px;background:#000}.modal-close{position:fixed;top:16px;right:16px;width:48px;height:48px;border:0;border-radius:50%;background:#150b22;color:#fff;font-size:30px;cursor:pointer}

@media(max-width:700px){
 .page{padding:14px 12px 36px}.about-wrap,.contact-layout{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.office-banner{height:230px}.menu-card{min-height:165px}.motion-thumb{height:160px}.catalog-card{grid-template-columns:1fr}.contact-stage{min-height:330px}
}
@media(max-width:470px){
 .brand-stage{width:92vw}.start-title{letter-spacing:.34em}.menu-grid{gap:10px}.menu-card{min-height:145px}.iconbox{width:60px;height:60px}.iconbox svg{width:46px}.logo-grid,.motion-grid{grid-template-columns:1fr 1fr}.motion-thumb{height:135px}.service{grid-template-columns:60px 1fr;padding:14px}.service-icon{width:54px;height:54px}.about-copy{padding:18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

.stat.neon-frame{position:relative!important;border:1px solid rgba(160,90,255,.65)!important;box-shadow:0 0 7px rgba(130,70,255,.28)!important;overflow:hidden}
.stat.neon-frame::before{content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;border:1.5px solid #a35cff!important;box-shadow:0 0 7px #8d5cff,0 0 12px rgba(80,180,255,.4)!important;opacity:.45!important;animation:cleanNeon 2.2s ease-in-out infinite!important;pointer-events:none!important;background:none!important}
@keyframes cleanNeon{50%{opacity:1;filter:brightness(1.5)}}
.logo-card img{cursor:zoom-in}.logo-zoom-modal{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:22px}.logo-zoom-modal.show{display:flex}.logo-zoom-modal img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:20px;box-shadow:0 0 30px rgba(142,75,255,.55)}.logo-zoom-close{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:1px solid #a85cff;background:#090610;color:#fff;font-size:30px}



/* === Requested: one clean moving neon trace on About box + 4 stat rectangles === */
#about .about-copy.neon-frame,
#about .stat.neon-frame{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(142,76,210,.34)!important;
  box-shadow:0 0 5px rgba(117,58,190,.15)!important;
  isolation:isolate!important;
}
#about .about-copy.neon-frame::after,
#about .stat.neon-frame::after{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  border-radius:inherit!important;
  padding:2px!important;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 292deg,
    rgba(71,194,255,.15) 300deg,
    #58d2ff 312deg,
    #a85cff 326deg,
    #f25cff 340deg,
    transparent 354deg 360deg
  )!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  animation:novikaPerimeter 4.2s linear infinite!important;
  filter:drop-shadow(0 0 4px #6fbaff) drop-shadow(0 0 8px rgba(190,73,255,.9))!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:4!important;
}
#about .about-copy.neon-frame::before,
#about .stat.neon-frame::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:none!important;
  border:0!important;
  box-shadow:inset 0 0 16px rgba(120,54,220,.07)!important;
  animation:none!important;
  padding:0!important;
  -webkit-mask:none!important;
  mask:none!important;
  opacity:1!important;
  pointer-events:none!important;
}
@keyframes novikaPerimeter{to{transform:rotate(360deg)}}

/* === System/laptop art for the empty area on page 2 === */
.menu-laptop-scene{
  position:relative;
  width:min(94%,680px);
  height:330px;
  margin:26px auto 8px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(145,79,231,.24);
  background:
    radial-gradient(circle at 50% 52%,rgba(96,50,225,.20),transparent 34%),
    linear-gradient(180deg,#0b0714 0,#05030a 100%);
  display:grid;place-items:center;
  box-shadow:inset 0 0 45px rgba(82,43,180,.08),0 18px 44px rgba(0,0,0,.34);
}
.ml-grid{position:absolute;inset:0;opacity:.16;background-image:
  linear-gradient(rgba(123,84,255,.22) 1px,transparent 1px),
  linear-gradient(90deg,rgba(123,84,255,.22) 1px,transparent 1px);
  background-size:31px 31px;transform:perspective(420px) rotateX(62deg) scale(1.3);transform-origin:bottom}
.ml-laptop{position:relative;width:78%;max-width:480px;z-index:3;transform:perspective(900px) rotateX(4deg)}
.ml-screen{aspect-ratio:16/10;border-radius:18px 18px 8px 8px;background:#05050a;border:3px solid #252032;
  overflow:hidden;box-shadow:0 0 28px rgba(122,70,255,.32),0 0 55px rgba(65,137,255,.10)}
.ml-browser{height:28px;background:#0e0a17;display:flex;align-items:center;gap:6px;padding:0 10px;color:#817c8d}
.ml-browser span{width:7px;height:7px;border-radius:50%;background:#6d52a0}.ml-browser b{margin-right:auto;font-size:9px;letter-spacing:.18em;color:#6f6682}
.ml-screen-body{height:calc(100% - 28px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:18px;background:
  radial-gradient(circle at 50% 45%,rgba(105,64,255,.18),transparent 42%),
  linear-gradient(145deg,#080611,#030207)}
.ml-mark{font-family:Arial,sans-serif;font-weight:800;font-size:34px;letter-spacing:-.18em;color:#80d7ff;text-shadow:0 0 12px #428fff}
.ml-mark span{color:#c05dff;text-shadow:0 0 12px #a444ff}.ml-screen-body small{font-size:8px;letter-spacing:.28em;color:#8d819d;margin-top:2px}
.ml-screen-body h3{font-size:clamp(18px,4.8vw,28px);line-height:1.65;margin:13px 0 11px;color:#fff;text-shadow:0 0 13px rgba(200,91,255,.32)}
.ml-data{display:flex;gap:6px;direction:ltr}.ml-data i{width:30px;height:3px;border-radius:4px;background:linear-gradient(90deg,#52c6ff,#a957ff);
  box-shadow:0 0 7px #8e51ff;animation:mlBars 1.7s ease-in-out infinite}.ml-data i:nth-child(2){animation-delay:.15s}.ml-data i:nth-child(3){animation-delay:.3s}.ml-data i:nth-child(4){animation-delay:.45s}.ml-data i:nth-child(5){animation-delay:.6s}
@keyframes mlBars{50%{transform:scaleX(1.45);filter:brightness(1.5)}}
.ml-base{height:14px;width:113%;margin-right:-6.5%;border-radius:0 0 44px 44px;background:linear-gradient(#3a3544,#121018);box-shadow:0 10px 20px #000;position:relative}
.ml-base i{position:absolute;width:18%;height:3px;border-radius:4px;background:#5a5265;left:41%;top:3px}
.ml-floor{position:absolute;width:74%;height:25px;bottom:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(139,72,255,.62),rgba(89,67,255,.18) 38%,transparent 68%);filter:blur(7px);animation:mlFloor 2.2s ease-in-out infinite}
@keyframes mlFloor{50%{transform:scaleX(1.09);opacity:.72}}
.ml-orbit{position:absolute;border-radius:50%;border:1px solid rgba(125,77,255,.48);bottom:26px;z-index:1}
.ml-o1{width:86%;height:31%;animation:spin 10s linear infinite}.ml-o2{width:67%;height:23%;border-color:rgba(74,178,255,.45);bottom:42px;animation:spinBack 8s linear infinite}

/* === Negarestan full interactive overlay === */
.neg-overlay{position:fixed;inset:0;z-index:2147480000;background:#05030a;display:none;flex-direction:column}
.neg-overlay.open{display:flex}
.neg-topbar{height:68px;flex:0 0 68px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  background:#080510;border-bottom:1px solid rgba(157,86,255,.35);box-shadow:0 0 18px rgba(115,54,255,.18);direction:rtl}
.neg-topbar button{border:1px solid #9956ff;background:#120920;color:#fff;border-radius:14px;padding:10px 13px;
  box-shadow:0 0 12px rgba(127,62,255,.52);font-family:inherit}
.neg-topbar strong{font-size:13px;color:#d8cfe4}
#negarestanFrame{width:100%;height:calc(100vh - 68px);border:0;background:#06050a}

@media(max-width:520px){
  .menu-laptop-scene{height:285px;margin-top:22px}
  .ml-laptop{width:84%}
  .ml-screen-body h3{font-size:18px}
}



#negarestanFrame{
  width:100%!important;height:calc(100dvh - 68px)!important;
  border:0!important;background:#050505!important;display:block!important;
}
.neg-overlay{overflow:hidden!important}



/* Medium-speed moving neon exactly around key cards */
.menu-card,.service,.stat,.catalog-card{position:relative!important;overflow:hidden!important;isolation:isolate}
.menu-card::before,.service::before,.stat::before,.catalog-card::before{
  content:""!important;position:absolute!important;inset:-1px!important;border-radius:inherit!important;padding:1.5px!important;
  background:conic-gradient(from var(--revA),transparent 0 54%,#52c8ff 64%,#8e62ff 72%,#df56ff 80%,transparent 91%)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;mask-composite:exclude!important;
  animation:revBorderSpin 3.7s linear infinite!important;filter:drop-shadow(0 0 5px rgba(111,158,255,.65)) drop-shadow(0 0 8px rgba(196,75,255,.45))!important;
  pointer-events:none!important;opacity:1!important;z-index:4!important
}
@property --revA{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes revBorderSpin{to{--revA:360deg}}

/* Medium-speed neon around actual icon circles */
.iconbox,.service-icon{position:relative!important;overflow:visible!important}
.iconbox::after,.service-icon::after{content:""!important;position:absolute!important;inset:-8px!important;border-radius:50%!important;
  border:2px solid transparent!important;background:conic-gradient(from 0deg,transparent 0 230deg,#55c7ff 255deg,#a85cff 308deg,#ed58ff 342deg,transparent 360deg)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0)!important;
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0)!important;
  filter:drop-shadow(0 0 4px #5caeff) drop-shadow(0 0 7px #a755ff)!important;animation:revIconSpin 3.4s linear infinite!important;opacity:1!important;pointer-events:none!important}
@keyframes revIconSpin{to{transform:rotate(360deg)}}

/* Correct dark, clean contact icons */
.contact-icon{background:linear-gradient(145deg,#0b0912,#08060e)!important;border:1px solid rgba(151,85,255,.24)!important;box-shadow:inset 0 0 14px rgba(128,66,255,.08)!important}
.contact-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-icon.ig{color:#d55bd7!important}.contact-icon.tg{color:#5ca8d9!important}.contact-icon.ph{color:#6dcf9c!important}.contact-icon.em{color:#a98ad6!important}
.contact-card strong bdi{direction:ltr;unicode-bidi:isolate}

/* Decorative digital core fills the empty menu area without adding a button */
.menu-decor{height:220px;margin:28px auto 0;width:min(86%,440px);position:relative;display:grid;place-items:center;overflow:hidden;opacity:.95}
.menu-decor small{position:absolute;bottom:14px;letter-spacing:.28em;color:#786f8e;font-size:9px;direction:ltr}
.core-chip{position:relative;z-index:3;width:88px;height:88px;border-radius:28px;background:linear-gradient(145deg,#0a0810,#040307);border:1px solid rgba(126,79,255,.38);display:flex;align-items:center;justify-content:center;gap:0;box-shadow:0 0 24px rgba(103,71,255,.20),inset 0 0 25px rgba(132,56,255,.08);font:700 33px/1 "Segoe UI",sans-serif;transform:skewX(-7deg)}
.core-n{color:#73cfff;text-shadow:0 0 14px #4aaeff}.core-k{color:#ca63ff;text-shadow:0 0 14px #a04bff;margin-left:-3px}
.core-ring{position:absolute;border-radius:50%;border:1px solid transparent;filter:drop-shadow(0 0 5px rgba(105,90,255,.5))}
.core-r1{width:132px;height:132px;border-top-color:#53bfff;border-right-color:#a957ff;animation:revIconSpin 5s linear infinite}
.core-r2{width:172px;height:98px;border-bottom-color:#8a56ff;border-left-color:#d34fff;animation:revSpinBack 6.5s linear infinite}
.core-r3{width:204px;height:132px;border-top-color:rgba(76,171,255,.5);border-bottom-color:rgba(193,76,255,.55);animation:revIconSpin 8s linear infinite}
@keyframes revSpinBack{to{transform:rotate(-360deg)}}
.core-beam{position:absolute;height:1px;width:78%;background:linear-gradient(90deg,transparent,#6bc6ff,#b15cff,transparent);opacity:.5;filter:drop-shadow(0 0 5px #8457ff)}
.beam-a{transform:rotate(16deg);animation:beamPulse 2.4s ease-in-out infinite}.beam-b{transform:rotate(-18deg);animation:beamPulse 2.4s ease-in-out infinite .7s}
@keyframes beamPulse{50%{opacity:1;transform:scaleX(.82) rotate(16deg)}}

/* Make contact illustration cleaner and less toy-like */
.contact-stage{background:radial-gradient(circle at 50% 52%,rgba(110,52,255,.18),transparent 34%),linear-gradient(145deg,#08060d,#050408)!important}
.phone3d{border:2px solid rgba(133,92,255,.68)!important;box-shadow:0 0 28px rgba(89,73,255,.20)!important}

@media(max-width:470px){
 .menu-decor{height:190px;margin-top:20px}.core-r3{width:180px}.contact-icon{width:48px!important;height:48px!important}
}