/* Support24 Digital Universe 3.3 — Calm visual system, responsive, performance-first.
   Restore clean V3 layout and keep real motion focused on hero instead of every section.
   This stylesheet is intentionally loaded after the original v3.0 stylesheet. */
:root { --du-timing: cubic-bezier(.2,.7,.2,1); }
.du-hero { background:#080d19; min-height:min(790px,calc(100svh - 72px)); }
.du-hero::before { z-index:0; background:radial-gradient(ellipse at 70% 40%,rgba(35,94,148,.16),transparent 58%),linear-gradient(180deg,#080d19,#091324 76%,#080d19); }
#duUniverse { z-index:1; opacity:1; pointer-events:none; }
.du-hero::after { z-index:2; background:linear-gradient(90deg,rgba(8,13,25,.88),rgba(8,13,25,.43) 45%,rgba(8,13,25,.07) 83%); }
.du-hero-inner { z-index:3; }
.du-scene { isolation:isolate; }
.du-hero .du-hud { background:linear-gradient(135deg,rgba(17,41,67,.9),rgba(11,23,45,.91)); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 12px 34px #0005,inset 0 1px 0 #b8f5ff13; }
.du-hero .du-hud:hover { border-color:#20e1f2; box-shadow:0 12px 38px #0007,0 0 22px #20e1f225; }
.du-hero .du-central { box-shadow:0 0 0 8px #10b1dc0a,0 0 34px #00d9ff42,inset 0 0 24px #0bd5ee20; }
.du-orbit::after { box-shadow:0 0 8px #20e1f2; }
.du-orbit.orbit-two::after { box-shadow:0 0 10px #ad72ff; }
.du-ambient-orbit,.du-ambient-core,.du-ambient-dots { animation:none!important; }
.du-ambient { opacity:.25; }
.du-ambient-orbit { border-color:#6cd7fb19; }
.du-chart i { animation:none; }
.du-hero .du-bars b { animation-duration:3.8s; }
.du-motion-control { position:absolute; bottom:18px; right:max(22px,calc((100vw - 1240px)/2)); z-index:5; display:flex; align-items:center; gap:8px; background:rgba(9,23,42,.9); border:1px solid #357b9b; border-radius:999px; color:#b3e7f5; font:700 11px/1.2 Inter,system-ui,sans-serif; letter-spacing:.02em; padding:10px 13px; cursor:pointer; transition:color .2s,border-color .2s; }
.du-motion-control:hover,.du-motion-control:focus-visible { border-color:#21e9ff; color:#fff; }
.du-motion-control span { font-size:12px; color:#20e1f2; }
.du-hero.is-motion-paused .du-orbit,.du-hero.is-motion-paused .du-central,.du-hero.is-motion-paused .du-central::before,.du-hero.is-motion-paused .du-central::after,.du-hero.is-motion-paused .du-hud,.du-hero.is-motion-paused .du-bars b,.du-hero.is-motion-paused .du-status-dot,
.du-hero.is-offscreen .du-orbit,.du-hero.is-offscreen .du-central,.du-hero.is-offscreen .du-central::before,.du-hero.is-offscreen .du-central::after,.du-hero.is-offscreen .du-hud,.du-hero.is-offscreen .du-bars b { animation-play-state:paused!important; }
/* Most cards should feel tactile on desktop, not run an endless effect. */
@media(hover:hover) and (pointer:fine){
  .du-hud{transition:border-color .18s,box-shadow .18s!important}
  .service-card,.about-card,.seo-focus-card,.portfolio-card,.package-card{transition:transform .24s var(--du-timing),border-color .24s,box-shadow .24s!important}
  .service-card:hover,.about-card:hover,.seo-focus-card:hover,.portfolio-card:hover,.package-card:hover{transform:translateY(-3px)!important}
}
@media(max-width:840px){
  .du-hero{padding-top:54px;min-height:auto}
  .du-hero::after{background:linear-gradient(180deg,#080d19bd,rgba(8,13,25,.13) 51%,#080d1950)}
  .du-hero .du-hero-inner{gap:8px}
  .du-hero .du-scene{height:425px}
  .du-hero .du-hud{box-shadow:0 8px 20px #0007}
  .du-hud,.du-bars b{animation:none!important}
  .du-orbit{animation-duration:32s!important}
  .du-orbit.orbit-two{animation-duration:29s!important}
  .du-orbit.orbit-three{animation:none!important}
  .du-central{animation:duFloat 9s ease-in-out infinite!important}
  .site-header,.site-header .main-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .du-motion-control{bottom:17px;right:17px;padding:10px 11px}
  .du-reveal{opacity:1!important;transform:none!important;transition:none!important}
  body::before{background:#080d19!important;background-attachment:scroll!important}
  .du-ambient{position:absolute!important;opacity:.1}
  .du-ambient-orbit,.du-ambient-core,.du-ambient-dots{display:none!important}
  .section{padding:76px 0!important}
}
@media(max-width:520px){
  .du-hero{padding-bottom:65px}
  .du-hero .du-scene{height:345px}
  .du-central{box-shadow:0 0 22px #0adffa40,inset 0 0 16px #0bd5ee16!important}
  .du-orbit{box-shadow:none!important}
  .du-hero .du-hud{width:113px;padding:9px}
  .du-hero .du-hud:hover{transform:none}
  .du-hero .du-central::after{display:none}
  .du-hero .du-scroll-cue{display:none}
  .du-motion-control{bottom:10px;font-size:10px}
  .du-hero .du-scene::before{filter:none!important}
}
@media(prefers-reduced-motion:reduce){
  .du-hero *, .du-hero *::before,.du-hero *::after{animation:none!important;transition:none!important}
  .du-motion-control{display:none}
}
/* One brief, GPU-only contact ripple on service nodes. */
.du-hud{overflow:hidden}
.du-touch-mark{position:absolute;left:0;top:0;width:9px;height:9px;border:1.5px solid #81f5ff;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);animation:du-touch .52s ease-out forwards!important}
@keyframes du-touch{15%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(10)}}
@media(prefers-reduced-motion:reduce){.du-touch-mark{display:none}}
/* Inner pages are calm; animated canvas lives only on the homepage. */
.seo-hero::after,.du-terminal::before { animation:none!important; }

/* v3.3: visibly animated but lightweight inner sections, on desktop AND mobile. */
.du-motion-section{position:relative;isolation:isolate;overflow:hidden}
.du-motion-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint;opacity:.7}
.du-motion-section>:not(.du-motion-field){position:relative;z-index:1}
.du-mfield-ring{position:absolute;width:clamp(180px,28vw,380px);height:clamp(180px,28vw,380px);right:4%;top:9%;border:1px solid rgba(58,207,245,.27);border-radius:50%;box-shadow:inset 0 0 32px rgba(32,225,242,.06),0 0 45px rgba(93,62,220,.09);will-change:transform;animation:du-sector-spin 24s linear infinite}
.du-mfield-ring::before,.du-mfield-ring::after{content:'';position:absolute;border-radius:50%;inset:18%;border:1px dashed rgba(164,96,255,.35)}
.du-mfield-ring::after{inset:42%;border:1px solid rgba(32,225,242,.42)}
.du-mfield-ray{position:absolute;width:38%;max-width:520px;height:1px;right:2%;top:48%;background:linear-gradient(90deg,transparent,rgba(67,223,251,.55),rgba(159,87,255,.6),transparent);transform-origin:right center;will-change:transform,opacity;animation:du-sector-ray 8s ease-in-out infinite alternate}
.du-mfield-node{position:absolute;width:9px;height:9px;border:1px solid #8befff;border-radius:50%;right:9%;top:25%;box-shadow:0 0 12px #20e1f2;will-change:transform;animation:du-sector-node 9s ease-in-out infinite alternate}
.du-motion-section:not(.du-section-inview) .du-motion-field *,.du-page-hidden .du-motion-field *,.du-section-motion-paused .du-motion-field *{animation-play-state:paused!important}
@keyframes du-sector-spin{to{transform:rotate(360deg)}}
@keyframes du-sector-ray{from{transform:translate3d(0,-16px,0) rotate(-6deg);opacity:.2}to{transform:translate3d(-16px,26px,0) rotate(8deg);opacity:.85}}
@keyframes du-sector-node{from{transform:translate3d(-15px,0,0);opacity:.35}to{transform:translate3d(26px,22px,0);opacity:1}}
/* High contrast on desktop: the canvas can no longer be buried behind dark layers. */
@media(min-width:841px){
  .du-hero::after{background:linear-gradient(90deg,rgba(8,13,25,.86),rgba(8,13,25,.2) 45%,transparent 72%)}
  #duUniverse{opacity:1;mix-blend-mode:screen}
  .du-hero .du-scene{perspective:1050px}
  .du-orbit::after{width:13px;height:13px;box-shadow:0 0 15px 5px #20e1f2}
}
@media(max-width:840px){
 .du-motion-field{opacity:.35}
 .du-mfield-ring{width:185px;height:185px;top:7%;right:-35px;animation-duration:42s}
 .du-mfield-ray{animation-duration:12s;opacity:.35}
 .du-mfield-node{display:none}
}
.du-tactile-pulse{position:absolute;left:0;top:0;width:10px;height:10px;border:1px solid #75e8ff;border-radius:50%;pointer-events:none;z-index:15;transform:translate(-50%,-50%) scale(.2);animation:du-tactile-wave .55s ease-out forwards!important}
@keyframes du-tactile-wave{20%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(13)}}
@media(prefers-reduced-motion:reduce){
 .du-motion-field *{animation:none!important}
 .du-tactile-pulse{display:none}
}