/* Unitech Computer Solutions theme — custom.css
   Visual identity: warm graphite + copper + jade — deliberately moved
   away from the navy/blue/cyan "generic tech template" palette, which
   is why this file replaces the original. */

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes pulseSlow{0%,100%{opacity:.35}50%{opacity:.7}}
@keyframes bounceSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.animate-float{animation:float 6s ease-in-out infinite}
.animate-float-slow{animation:float 9s ease-in-out infinite}
.animate-pulse-slow{animation:pulseSlow 4s ease-in-out infinite}
.animate-bounce-soft{animation:bounceSoft 2.5s ease-in-out infinite}
.animate-spin{animation:spin 1s linear infinite}
.animate-ping{animation:ping 1.6s cubic-bezier(0,0,0.2,1) infinite}
.animate-scale-in{animation:scaleIn .6s ease-out forwards}

/* ===== New: scanning diagnostic line (hero) ===== */
@keyframes scanSweep{
  0%{transform:translateY(-10%);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(110%);opacity:0}
}
.scan-line{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(226,113,29,.9),transparent);
  box-shadow:0 0 12px 2px rgba(226,113,29,.55);
  animation:scanSweep 3.6s cubic-bezier(.4,0,.2,1) infinite;
}

/* ===== New: brand marquee ===== */
@keyframes marqueeScroll{ to{ transform:translateX(-50%); } }
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 28s linear infinite}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}

/* ===== New: button shimmer sweep ===== */
@keyframes shimmerSweep{ 100%{ transform:translateX(220%) skewX(-20deg); } }
.btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.6rem;background:#e2711d;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;color:#fff;box-shadow:0 10px 25px -5px rgba(226,113,29,.35);transition:all .3s}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%) skewX(-20deg)}
.btn-primary:hover{background:#ef9048;box-shadow:0 10px 25px -5px rgba(239,144,72,.45);transform:translateY(-2px)}
.btn-primary:hover::after{animation:shimmerSweep .9s ease forwards}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.6rem;border:1px solid #413b33;background:rgba(29,26,23,.5);padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;color:#ece7df;backdrop-filter:blur(4px);transition:all .3s}
.btn-ghost:hover{border-color:rgba(226,113,29,.5);background:rgba(44,40,35,.6);color:#fff}

/* ===== Cards — subtle tilt-on-hover support (rotation applied inline via JS) ===== */
.card{border-radius:.85rem;border:1px solid #3d3730;background:rgba(29,26,23,.6);backdrop-filter:blur(4px);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;transform-style:preserve-3d;will-change:transform}
.tilt-card{transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}

.section-label{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;border:1px solid rgba(226,113,29,.35);background:rgba(226,113,29,.1);padding:.375rem 1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:#f6b37c}
.text-gradient{background-image:linear-gradient(90deg,#ef9048,#f6b37c,#e2711d);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Background: asymmetric, restrained — not a generic glow-orb wash ===== */
.bg-mesh{
  background-color:#121110;
  background-image:
    radial-gradient(at 85% 8%, rgba(226,113,29,.14) 0, transparent 42%),
    radial-gradient(at 8% 92%, rgba(34,147,127,.12) 0, transparent 45%);
}
.icon-tile{background-image:radial-gradient(at 30% 30%, rgba(226,113,29,.3) 0, transparent 60%), radial-gradient(at 70% 70%, rgba(34,147,127,.22) 0, transparent 60%);}

html{scroll-behavior:smooth}
body{background:#121110;color:#ece7df;overflow-x:hidden}
::selection{background:rgba(226,113,29,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#121110}
::-webkit-scrollbar-thumb{background:#413b33;border-radius:9999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#b85a15;background-clip:content-box}

.container-x{margin-left:auto;margin-right:auto;width:100%;max-width:80rem;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container-x{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.container-x{padding-left:2rem;padding-right:2rem}}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal-left.is-visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal-right.is-visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal-scale.is-visible{opacity:1;transform:scale(1)}

[x-cloak]{display:none}

/* mobile sticky bar */
.mobilebar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#121110;border-top:1px solid #3d3730;padding-bottom:env(safe-area-inset-bottom,0px)}
.mobilebar-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr}
.mobilebar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;color:#fff;font-size:.7rem;font-weight:600;border-right:1px solid #3d3730}
.mobilebar a:last-child{border-right:none;background:#e2711d}
@media(max-width:768px){.mobilebar{display:block}body{padding-bottom:66px}}