/* Stackquell Theme Variables */
:root {
  --sq-primary: #0d47a1; /* Primary brand color */
  --sq-primary-rgb: 13,71,161;
  --sq-secondary: #00b8d4;
  --sq-secondary-rgb: 0,184,212;
  --sq-accent: #ff6f00;
  --sq-accent-rgb: 255,111,0;
  --sq-dark: #0f1115;
  --sq-light: #f5f7fa;
  --sq-body-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sq-heading-font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --sq-radius-sm: 4px;
  --sq-radius: 8px;
  --sq-radius-lg: 16px;
}

/* Load local font definitions (downloaded from Google Fonts) */
@import url('google-fonts.css');

/* Bootstrap variable overrides via utility classes (can't override precompiled classes directly here) */
body {
  font-family: var(--sq-body-font);
  background: var(--sq-light);
  color: #1b2533;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--sq-heading-font);
  font-weight: 600;
  letter-spacing: .5px;
}

a { color: var(--sq-primary); }
a:hover { color: #082e63; }

.btn-primary {
  --bs-btn-bg: var(--sq-primary);
  --bs-btn-border-color: var(--sq-primary);
  --bs-btn-hover-bg: #0b3a85;
  --bs-btn-hover-border-color: #0b3a85;
  --bs-btn-active-bg: #072955;
  --bs-btn-active-border-color: #072955;
}

.btn-outline-primary {
  --bs-btn-color: var(--sq-primary);
  --bs-btn-border-color: var(--sq-primary);
  --bs-btn-hover-bg: var(--sq-primary);
  --bs-btn-hover-border-color: var(--sq-primary);
  --bs-btn-active-bg: #072955;
  --bs-btn-active-border-color: #072955;
}

.navbar-brand span.logo-text {
  font-weight:700;
  background: linear-gradient(90deg,var(--sq-primary),var(--sq-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
  padding: 5rem 0 3rem;
  background: radial-gradient(circle at 30% 30%, rgba(var(--sq-primary-rgb),0.15), transparent 60%),
              linear-gradient(145deg, #ffffff, #f1f5f9);
  position: relative;
  overflow: hidden;
}
.hero:before {
  content:"";
  position:absolute;
  width:420px;height:420px;
  background:rgba(var(--sq-secondary-rgb),0.18);
  top:-100px;right:-120px;
  filter:blur(60px);
  border-radius:50%;
}
.hero h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.hero .lead { font-size:1.15rem; max-width:640px; }
.hero-illustration { 
  max-width:100%;
  height:auto;
  border-radius: var(--sq-radius-lg);
  box-shadow:0 12px 36px -8px rgba(0,0,0,.18),0 4px 12px -4px rgba(0,0,0,.12);
  object-fit:cover;
}

.hero .eyebrow {
  display:inline-flex;
  align-items:center;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sq-primary);
  font-weight:600;
}
.hero-pillars {
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
}
.hero-pillars div {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius: var(--sq-radius);
  padding:1rem 1.25rem;
  min-width:150px;
  flex:1 1 140px;
}
.hero-pillars .hero-stat {
  display:block;
  font-size:1.05rem;
  font-weight:600;
  color:var(--sq-primary);
}
.hero-card ul li { line-height:1.6; }

.img-max-180 {
  max-width: 180px;
}
.section-header {
  max-width:760px;
  margin:0 auto 3rem;
  text-align:center;
}
.dark-mode .hero-illustration {
  box-shadow:0 12px 36px -8px rgba(0,0,0,.6),0 4px 12px -4px rgba(0,0,0,.5);
}

.section-title {
  margin-bottom: 1.5rem;
  position: relative;
  display:inline-block;
}
.section-title:after {
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  height:3px;width:50%;
  background:linear-gradient(90deg,var(--sq-primary),var(--sq-secondary));
  border-radius:2px;
}

.feature-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius: var(--sq-radius);
  padding:1.25rem 1.25rem 1rem;
  position:relative;
  transition:.25s ease;
  height:100%;
}
.feature-card:hover {
  box-shadow:0 8px 28px -6px rgba(0,0,0,.08),0 2px 8px -2px rgba(0,0,0,.06);
  transform:translateY(-4px);
}
.feature-card .icon-circle {
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--sq-primary-rgb),0.08);
  color:var(--sq-primary);
  border-radius:50%;
  font-size:1.4rem;
  margin-bottom:.75rem;
}

.section-highlight {
  padding:4rem 0;
  background:#f8fafc;
}
.check-list { margin:1.25rem 0; }
.check-list li {
  position:relative;
  padding-left:1.5rem;
  margin-bottom:.4rem;
}
.check-list li:before {
  content:"";
  position:absolute;
  left:0;top:.5rem;
  width:0.55rem;height:0.55rem;
  border-radius:50%;
  background:var(--sq-secondary);
}
.value-card {
  background:#fff;
  border-radius: var(--sq-radius);
  padding:2rem;
  border:1px solid #e2e8f0;
  height:100%;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.25);
}

.pilot-steps {
  list-style:decimal;
  padding-left:1rem;
  margin-bottom:1.25rem;
}
.pilot-steps li { margin-bottom:.75rem; }
.pilot-contact-card {
  background:#fff;
  border-radius: var(--sq-radius-lg);
  padding:2rem;
  border:1px solid #e2e8f0;
  box-shadow:0 18px 36px -28px rgba(0,0,0,.4);
}

.section-current {
  padding:4rem 0;
  background:#fff;
}
.feature-stack {
  background:#fff;
  border-radius: var(--sq-radius);
  border:1px solid #e2e8f0;
  padding:1.75rem;
  height:100%;
  box-shadow:0 18px 40px -25px rgba(0,0,0,.4);
}
.feature-stack h3 {
  font-size:1.1rem;
  font-weight:600;
}
.feature-stack ul {
  list-style:none;
  padding-left:0;
  margin-bottom:0;
}
.feature-stack ul li {
  position:relative;
  padding-left:1.4rem;
  margin-bottom:.45rem;
}
.feature-stack ul li:before {
  content:"→";
  position:absolute;
  left:0;top:0;
  color:var(--sq-primary);
}

.section-platform {
  padding:4rem 0;
  background:#0f1115;
  color:#e2e8f0;
}
.platform-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--sq-radius-lg);
  padding:2rem;
  height:100%;
}
.platform-card ul {
  margin:0;
  color:#cfd6f0;
}

.section-roadmap {
  padding:4rem 0;
  background:#f5f7fa;
}
.roadmap-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;
}
.roadmap-grid article {
  background:#fff;
  border-radius: var(--sq-radius);
  padding:1.5rem;
  border:1px solid #e4e7ec;
  box-shadow:0 18px 36px -26px rgba(15,17,21,.35);
}

.section-cta {
  padding:4rem 0;
  background:linear-gradient(120deg,var(--sq-primary),#163d87);
  color:#fff;
}
.section-cta .btn {
  background:#fff;
  color:var(--sq-primary);
  border:none;
}

.legal-note {
  background:#0f1115;
  color:#cbd5f5;
  padding:1rem 0;
}
.legal-note p { text-align:center; }

.footer {
  background:#050608;
  color:#dfe3eb;
  padding:2.5rem 0 1.5rem;
  font-size:.95rem;
}
.footer h6,
.footer .brand-inline {
  color:#f7f8fb;
  font-weight:600;
}
.footer a {
  color:#dfe3eb;
  text-decoration:none;
  transition:color .2s ease;
}
.footer a:hover,
.footer a.active {
  color:#ffffff;
}

.badge-accent {
  background: var(--sq-accent);
}

/* Utility overrides */
.shadow-soft { box-shadow:0 4px 18px -4px rgba(0,0,0,.12); }
.rounded-lg { border-radius: var(--sq-radius-lg)!important; }
.text-gradient {
  background: linear-gradient(90deg,var(--sq-primary),var(--sq-secondary));
  -webkit-background-clip:text;
  background-clip: text;
  color:transparent;
}

/* Dark Mode */
.dark-mode {
  background: #181c22;
  color: #e2e8f0;
}
.dark-mode body {
  background: #181c22;
  color: #e2e8f0;
}
.dark-mode .navbar,
.dark-mode .bg-white,
.dark-mode .feature-card,
.dark-mode .hero,
.dark-mode .footer {
  background: #23272f !important;
  color: #e2e8f0 !important;
  border-color: #23272f !important;
}
.dark-mode .footer {
  background: #101217 !important;
  color: #bfc7d5 !important;
}
.dark-mode .feature-card {
  border-color: #23272f;
}
.dark-mode .section-highlight,
.dark-mode .section-roadmap {
  background:#1f232b;
}
.dark-mode .value-card,
.dark-mode .feature-stack,
.dark-mode .roadmap-grid article,
.dark-mode .pilot-contact-card {
  background:#23272f;
  border-color:#2f3541;
  color:#e2e8f0;
}
.dark-mode .section-cta {
  background:linear-gradient(120deg,#0b5ed7,#0a3167);
}
.dark-mode .legal-note {
  background:#050608;
}
.dark-mode .btn-primary {
  --bs-btn-bg: #00b8d4;
  --bs-btn-border-color: #00b8d4;
  --bs-btn-hover-bg: #0097a7;
  --bs-btn-hover-border-color: #0097a7;
}
.dark-mode .btn-outline-primary {
  --bs-btn-color: #00b8d4;
  --bs-btn-border-color: #00b8d4;
  --bs-btn-hover-bg: #00b8d4;
  --bs-btn-hover-border-color: #00b8d4;
}
.dark-mode .section-title:after {
  background: linear-gradient(90deg,#00b8d4,#0d47a1);
}
.dark-mode .text-gradient {
  background: linear-gradient(90deg,#00b8d4,#0d47a1);
  -webkit-background-clip:text;
  background-clip: text;
  color:transparent;
}
/* Dark/Light Toggle Icons */
.d-dark { display:none; }
.d-dark-none { display:inline; }
.dark-mode .d-dark { display:inline; }
.dark-mode .d-dark-none { display:none; }

/* Responsive tweaks */
@media (max-width: 575.98px) {
  .hero { padding:4rem 0 2rem; }
}