/* =========================================================
   SCALEDAPPS SITE LAYOUT & EFFECTS
   Uses palette + tokens from assets/default.css
   ========================================================= */

/* ---------- Base layout ---------- */

html,
body {
  height: 100%;
  background: var(--sa-bg);
  color: var(--sa-text);
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
}

/* Content sits above background effects */
.shell {
  position: relative;
  z-index: 2;
}

/* ---------- Background: orbs + starfield ---------- */

.orb {
  position: fixed;
  inset: -20vmax;
  filter: blur(60px);
  opacity: .25;
  z-index: 0;
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
}

.orb::before {
  background: radial-gradient(circle at 30% 30%, var(--sa-primary), transparent 60%);
  animation: float1 18s ease-in-out infinite;
}

.orb::after {
  background: radial-gradient(circle at 70% 70%, var(--sa-accent), transparent 55%);
  mix-blend-mode: screen;
  animation: float2 22s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); }
  50%      { transform: translate3d(6%, 4%, 0) scale(1.1); }
}

@keyframes float2 {
  0%, 100% { transform: translate3d(6%, 6%, 0) scale(1); }
  50%      { transform: translate3d(-4%, -6%, 0) scale(1.06); }
}

/* Starfield canvas */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: .55;
  pointer-events: none;
}

/* ---------- Cards / surfaces ---------- */

.glass {
  background: var(--sa-card);
  border: 1px solid var(--sa-border);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 12px 40px rgba(0,0,0,.5),
    0 0 80px color-mix(in srgb, var(--sa-primary) 70%, transparent);
}

/* Logo mark */
.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: conic-gradient(from 210deg, var(--sa-primary), var(--sa-accent));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06),
    0 0 30px color-mix(in srgb, var(--sa-primary) 70%, transparent);
}

/* A softer card used inside glass sections (e.g., members, mini cards) */
.card-soft {
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  border: 1px solid var(--sa-border);
}

/* ---------- Typography ---------- */

h1,
h2,
h3 {
  font-weight: 700;
}

body p,
body li {
  color: #b7c7c2;
}

/* Stronger weight helper for key hero headings */
.fw-black {
  font-weight: 900;
}

.headline {
  font-weight: 900;
  line-height: 1.05;
}

.tagline {
  color: #b7c7c2;
  letter-spacing: .3px;
}

/* ---------- Links & neon underline ---------- */

.link-fx {
  position: relative;
  text-decoration: none;
}

.link-fx:hover {
  color: var(--bs-link-hover-color) !important;
}

.link-fx::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--sa-primary);
  transition: right .25s ease;
}

.link-fx:hover::after {
  right: 0;
}

/* Neon underline effect for special inline phrases */
.neon {
  position: relative;
  display: inline-block;
}

.neon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--sa-primary), var(--sa-accent));
  box-shadow: 0 0 20px var(--sa-primary);
  border-radius: 2px;
}

/* ---------- Buttons ---------- */

.btn-glow {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sa-accent) 15%, transparent),
    color-mix(in srgb, var(--sa-primary) 12%, transparent)
  );
  color: var(--sa-text);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 20px color-mix(in srgb, var(--sa-primary) 70%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}

.btn-glow:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 30px color-mix(in srgb, var(--sa-primary) 80%, transparent);
}

/* Used on Solutions/Services CTAs to keep consistent width */
.cta-row .btn {
  min-width: 160px;
}

/* ---------- Feature strip footer ---------- */

.features-strip {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid var(--sa-border);
  backdrop-filter: blur(8px);
}

.features-strip .item {
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

.features-strip .item i {
  font-size: 1.1rem;
}

/* =========================================================
   COMPONENTS
   ========================================================= */

/* KPI pill + icons (About, Solutions, Services) */

.kpi {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--sa-border);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}

.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--sa-border);
}

/* Step list (How we deliver) */

.step {
  position: relative;
  padding-left: 2.5rem;
}

.step .num {
  position: absolute;
  left: 0;
  top: .15rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), .12);
  border: 1px solid var(--sa-border);
  font-weight: 700;
}

/* Badges / chips */

.badge-tech,
.badge-soft {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--sa-border);
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: .8rem;
}

/* Short description rows (Solutions/Services feature bullets) */

.feature {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.feature i {
  margin-top: .1rem;
}

/* Domain-verification helpers */

code.kv {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--sa-border);
  padding: .3rem .5rem;
  border-radius: 8px;
}

.copy {
  cursor: pointer;
}

.section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.nav-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 3;
}

/* Brand styling */

.brand-text {
  letter-spacing: .6px;
  font-weight: 700;
}

.brand-accent {
  color: var(--sa-primary);
}

/* Nav links */

.navbar .nav-link {
  color: #b7c7c2;
  position: relative;
  padding: .5rem .75rem;
  transition: color .2s ease;
}

.navbar .nav-link:hover {
  color: var(--sa-primary);
}

.navbar .nav-link.active {
  color: var(--sa-primary);
  font-weight: 600;
}

/* Mobile nav drawer */

.navbar-collapse {
  background: transparent;
}

@media (max-width: 767.98px) {
  .navbar-collapse {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    margin-top: .5rem;
    padding: .75rem;
  }
}

/* Fix Bootstrap blue toggler */

.navbar-toggler {
  border-color: rgba(255,255,255,.25);
}

/* White hamburger icon for dark theme */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */

@media (max-width: 576px) {
  .headline {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .display-4 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .display-5 {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
  }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .glass {
    box-shadow: none;
    border-color: #ddd;
  }
}

/* ScaledApps logo in navbar */
.sa-logo {
  display: block;
  height: 40px;          /* adjust as needed */
  width: auto;
  object-fit: contain;   /* prevents stretching */
  
  image-rendering: -webkit-optimize-contrast; /* crisp PNG rendering */
  image-rendering: crisp-edges;

  filter: drop-shadow(0 0 4px rgba(0,0,0,0.35));
  transition: opacity .2s ease;   /* remove transform scaling */
}

/* No hover scaling */
.sa-logo:hover {
  transform: none;
  opacity: 1;
}


@media (max-width: 576px) {
  .sa-logo {
    height: 36px;        /* slightly larger than before */
  }

  .cta-row {
    flex-direction: column;      /* stack buttons vertically */
    align-items: stretch;        /* make them full width */
  }

  .cta-row .btn {
    min-width: 0;                /* remove 160px floor on phones */
    width: 100%;                 /* let them fill the card */
  }
}