/* =========================================================
   Root tokens & base
========================================================= */
:root {
  --bg: #0b0f17;
  --fg: #e7ecf3;
  --muted: #9fb0c5;
  --card: #121828;
  --accent: #6aa2ff;
}

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 system-ui, Segoe UI, Roboto, Arial, sans-serif; }

/* =========================================================
   Generic content sections
========================================================= */
.hero { background: linear-gradient(180deg, #0b1220, #0b0f17); color: var(--fg); padding: 80px 0; }
.hero h1 { font-size: 44px; margin: 0 0 10px; }
.hero p { color: var(--muted); max-width: 640px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #04203b;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

.section { padding: 60px 0; }
.section.alt { background: #f7f9fc; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 18px; }

.list { margin: 8px 0 0 16px; color: #555; }
.footer { background: #fafafa; border-top: 1px solid #eee; padding: 24px 0; margin-top: 40px; color: #666; }
.form .row { margin-bottom: 10px; }
.form input, .form textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 10px; }

/* =========================================================
   Header (single source of truth)
========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(120%) blur(6px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
}

/* ---- Brand cluster ---- */
.brand-wrap { display: flex; align-items: center; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
  color: #111;
  font-weight: 700;
}

.brand-mark {
  height: 64px;
  width: auto;
  display: block;
  border-radius: 8px;
}

.brand-lockup { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  font-size: clamp(1.9rem, 1.1rem + 2.1vw, 2.6rem);
  color: #0f172a;
}
.brand-name .accent { color: #2563eb; }

/* Tagline with animated caret */
.brand-tagline {
  margin-top: .3rem;
  font-size: clamp(.95rem, .85rem + .25vw, 1.05rem);
  color: #475569;
}
.brand-tagline--code {
  --caret: #0b5fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 600;
  letter-spacing: .15px;
  position: relative;
  background: linear-gradient(90deg, #64748b 0%, #0ea5e9 35%, #6366f1 70%, #0b5fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand-tagline--code::after {
  content: "";
  position: absolute; left: 100%; top: 50%;
  transform: translate(.25ch, -45%);
  width: .085em; height: 1.05em; background: var(--caret);
  border-radius: 1px; animation: sf-caret-blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-tagline--code::after { animation: none; opacity: .55; }
}
@keyframes sf-caret-blink { 50% { opacity: 0; } }

/* ---- Primary nav ---- */
.primary-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.primary-nav a {
  text-decoration: none;
  font-weight: 800;
  color: #0f172a;
  padding: .55rem .8rem;
  border-radius: .8rem;
  transition: color .2s ease, background-color .2s ease;
}
.primary-nav a:hover { color: #0b5fff; background: rgba(11,95,255,.08); }
.primary-nav a.is-active { color: #0b5fff; background: rgba(11,95,255,.12); }

/* Dropdown */
.primary-nav .nav-group { position: relative; }
.primary-nav .nav-trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:800; color:#0f172a; background:transparent; border:0; padding:.55rem .8rem; border-radius:.8rem; cursor:pointer;
}
.primary-nav .nav-trigger:hover{ color:#0b5fff; background:rgba(11,95,255,.08); }

.primary-nav .nav-menu{
  position:absolute; top:calc(100% + .4rem); left:0;
  min-width: 240px; padding:.5rem; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:.8rem; box-shadow:0 10px 24px rgba(2,8,23,.08);
  display:none;
}
.primary-nav .nav-menu.open{ display:block; }
.primary-nav .nav-menu a{
  display:block; padding:.55rem .7rem; border-radius:.6rem; color:#111827; text-decoration:none; font-weight:600;
}
.primary-nav .nav-menu a:hover{ background:rgba(11,95,255,.06); color:#0b5fff; }

/* Keep active highlight consistent */
.primary-nav a.is-active,
.primary-nav .nav-menu a.is-active{
  color:#0b5fff; background:rgba(11,95,255,.12);
}

/* =========================================================
   Responsive rules
========================================================= */
@media (min-width: 1200px) { .brand-mark { height: 72px; } }
@media (max-width: 992px)  { .brand-mark { height: 56px; } }

@media (max-width: 900px) {
  .brand-name { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.7rem); }
  .brand-tagline { display: none; }
  .primary-nav { gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .primary-nav::-webkit-scrollbar { display: none; }

  /* Make dropdown stack nicely on mobile */
  .primary-nav .nav-menu{ position:static; box-shadow:none; border:0; display:block; padding:.25rem 0; }
}

/* =========================================================
   Media & helpers
========================================================= */
.hero-cloud { background: url("/static/img/hero/cloud-bg.svg") center/cover no-repeat; }

.icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}
.icon--sm { width: 20px; height: 20px; }
.icon--lg { width: 36px; height: 36px; }
.icon--muted { opacity: 0.7; }

.logo-row { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.logo-row li { display: flex; align-items: center; gap: .5rem; }

.btn-consult {
  display: inline-block;
  background: linear-gradient(135deg, #007bff, #00c3ff);
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 14px 30px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,123,255,.3);
  transition: all .3s ease-in-out;
}
.btn-consult:hover {
  background: linear-gradient(135deg, #0062cc, #00a3e0);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,123,255,.4);
}

/* Minimal helpers */
.prose { max-width: 72ch; }
.flow > * + * { margin-top: 1rem; }
.sf-container { width: min(1100px, 92%); margin: 0 auto; }
.grid-3-1 { display:grid; grid-template-columns: minmax(0,1fr) 320px; }
.gap-xxl { gap: 2.5rem; }
.radius-lg { border-radius: 14px; }
.p-lg { padding: 1.25rem; }
.hero .chip{ background:#fff1; padding:.35rem .6rem; border-radius:999px; }
.toc .list{ margin:.5rem 0 0 1rem; }
.btn--block{ display:block; width:100%; }

/* ====== Hero tuning for small screens ====== */
.sf-hero{ min-height:44vh }
.sf-hero-img{ height:44vh }
@media (max-width: 991.98px){
  .sf-hero, .sf-hero-img{ min-height:40vh; height:40vh }
}
@media (max-width: 575.98px){
  .sf-hero, .sf-hero-img{ min-height:36vh; height:36vh }
}

/* ====== Cards grid spacing on mobile ====== */
.sf-grid{ padding-inline: 2px; }
.sf-card{ border-radius:14px }



/* Toggle hidden on desktop */

.nav-toggle{display:none;width:40px;height:40px;border:1px solid rgba(0,0,0,.12);
  border-radius:10px;background:#fff;align-items:center;justify-content:center}
.nav-toggle-bar{width:20px;height:2px;background:#111;position:relative;display:block}
.nav-toggle-bar::before,.nav-toggle-bar::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#111}
.nav-toggle-bar::before{top:-6px}.nav-toggle-bar::after{top:6px}

/* collapse the primary nav under the header on phones */
@media (max-width: 900px){
  .nav-toggle{display:flex}
  .primary-nav{
    position:fixed; inset:64px 0 auto 0; display:none;
    flex-direction:column; gap:8px; padding:12px 16px;
    background:#fff; border-top:1px solid rgba(0,0,0,.08); z-index:40;
  }
  .primary-nav.open{ display:flex }
}



/* --- screen reader-only utility (hides the visible “Menu” text) --- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- mobile hamburger styles (hidden on desktop) --- */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px;height:40px;border:1px solid rgba(0,0,0,.12);
  border-radius:10px;background:#fff; cursor:pointer;
}
.nav-toggle-bar{
  width:20px;height:2px;background:#111;position:relative;display:block;
}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:#111;
}
.nav-toggle-bar::before{ top:-6px } .nav-toggle-bar::after{ top:6px }

/* --- show hamburger + slide-down nav under 900px --- */
@media (max-width:900px){
  .nav-toggle{ display:flex }
  .primary-nav{
    position:fixed; inset:64px 0 auto 0; display:none;
    flex-direction:column; gap:8px; padding:12px 16px;
    background:#fff; border-top:1px solid rgba(0,0,0,.08); z-index:40;
  }
  .primary-nav.open{ display:flex }
  .primary-nav .nav-menu{ position:static; box-shadow:none; border:0; display:block; padding:.25rem 0; }
}


/* =========================
   HERO – mobile-first fix
   ========================= */

/* Image is just content on phones; no overlay text */
.sf-hero { position: relative; }
.sf-hero-img { width: 100%; height: auto; min-height: 240px; object-fit: cover; display: block; }

/* Put text in the normal flow on phones */
.sf-hero .hero-content {
  position: static;
  transform: none;
  inset: auto;
  padding: 12px 16px;
  color: #0f172a;            /* dark text on light background */
  text-shadow: none;
}

/* Hide the dark overlay on phones so text isn’t white-on-dark */
.sf-hero-overlay { display: none; }

/* Tighter type scale + spacing for small screens */
.sf-hero h1 {
  font-size: clamp(1.35rem, 4.8vw, 1.9rem);
  line-height: 1.2;
  margin: 8px 0 10px;
}
.sf-hero .lead {
  font-size: 1rem;
  color: #334155;
  margin-bottom: 12px !important;
}

/* CTA row: wrap + spacing so buttons never collide with text */
.sf-hero .d-flex { flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }

/* =========================
   Re-enable overlay ≥576px
   ========================= */
@media (min-width: 576px) {
  .sf-hero-img { height: 44vh; min-height: 360px; }

  .sf-hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--sf-hero-grad, linear-gradient(180deg, rgba(2,6,23,.28), rgba(2,6,23,.52)));
  }

  /* Center the hero text over the image only on ≥576px */
  .sf-hero .hero-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 980px;
    width: calc(100% - 64px); /* gutters */
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
    padding: 0;
  }
}

/* Optional: slightly smaller buttons on very small screens */
@media (max-width: 360px) {
  .btn.btn-lg { padding: .6rem .9rem; font-size: .95rem; }
}