/* Prime Computers — design system
   Ported from the Prime Computers.dc.html design.
   Most layout/colour lives inline (mirroring the design exactly); this file
   provides the global theme, interactive :hover/:focus states, and responsive
   breakpoints. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #08080A;
  color: #F5F6F8;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(77,124,255,0.35); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #08080A; }
::-webkit-scrollbar-thumb { background: #23232a; border-radius: 8px; border: 3px solid #08080A; }
::-webkit-scrollbar-thumb:hover { background: #33333d; }
input::placeholder, textarea::placeholder { color: #54555E; }
a { color: inherit; }

@keyframes primeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes primeGlow  { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

/* Fixed top background glow */
.bg-glow {
  position: fixed; top: -260px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 680px;
  background: radial-gradient(ellipse at center, rgba(77,124,255,0.14), rgba(77,124,255,0) 68%);
  pointer-events: none; z-index: 0;
  animation: primeGlow 9s ease-in-out infinite;
}

/* ---- interactive states (replace the design's style-hover / style-focus) ---- */
.nav-link { transition: color .15s, background .15s; }
.nav-link:hover { background: rgba(255,255,255,0.05); color: #F5F6F8 !important; }

.btn-primary { transition: background .2s, box-shadow .2s; }
.btn-primary:hover { background: #5d88ff !important; box-shadow: 0 8px 28px rgba(77,124,255,0.4); }
.btn-primary.lg:hover { box-shadow: 0 10px 34px rgba(77,124,255,0.4); }
.btn-primary.xl:hover { box-shadow: 0 10px 34px rgba(77,124,255,0.45); }

.btn-ghost { transition: border-color .2s, background .2s; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.4) !important; background: rgba(255,255,255,0.03); }

.link-arrow { transition: gap .15s; }
.link-arrow:hover { gap: 12px; }

.foot-link { transition: color .15s; }
.foot-link:hover { color: #F5F6F8 !important; }

/* product card */
.card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover { border-color: rgba(77,124,255,0.5) !important; transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.55); }

/* reasons cell */
.reason-cell { transition: background .2s; }
.reason-cell:hover { background: #0F0F14 !important; }

/* admin / misc subtle buttons */
.btn-soft { transition: background .15s; }
.btn-soft:hover { background: rgba(255,255,255,0.12) !important; }
.btn-danger-soft { transition: background .15s; }
.btn-danger-soft:hover { background: rgba(255,90,90,0.08) !important; }
.btn-outline { transition: border-color .15s, color .15s; }
.btn-outline:hover { border-color: rgba(255,255,255,0.3) !important; color: #F5F6F8 !important; }

/* focusable inputs */
.inp { transition: border-color .15s, box-shadow .15s; }
.inp:focus { border-color: rgba(77,124,255,0.6) !important; }
.inp.ring:focus { box-shadow: 0 0 0 4px rgba(77,124,255,0.1); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none !important; }
  .home-hero { grid-template-columns: 1fr !important; gap: 36px !important; padding-top: 56px !important; }
  .reasons-grid { grid-template-columns: 1fr !important; }
  .featured-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .inv-layout { grid-template-columns: 1fr !important; }
  .inv-aside { position: static !important; }
  .prod-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .about-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  .admin-row { grid-template-columns: 1fr auto !important; }
  .admin-row .col-hide { display: none !important; }
}
@media (max-width: 560px) {
  .featured-grid { grid-template-columns: 1fr !important; }
  .pad-x { padding-left: 18px !important; padding-right: 18px !important; }
  .h1-hero { font-size: 38px !important; }
  .draft-grid { grid-template-columns: 1fr !important; }
}