/* =========================================================
   software.css
   Page-specific styles for the Software page.

   Uses the SAME color variables as features.css so the theme
   stays consistent — but the LAYOUT is intentionally different
   (split hero, zigzag modules, pill tags, pricing-style deploy
   cards) so this page doesn't look like a duplicate of Features.

   Keep the :root values identical to features.css if you ever
   update the palette.
   ========================================================= */

:root {
  --f-bg-dark: #0d1117;
  --f-bg-card: #161b22;
  --f-border: #232a34;
  --f-accent: #c9ff4d;
  --f-text: #f4f6f3;
  --f-text-muted: #a7b0a3;

  --f-font-heading: 'Space Grotesk', sans-serif;
  --f-font-body: 'Inter', sans-serif;
  --f-font-mono: 'JetBrains Mono', monospace;
}

.sw-hero-area,
.sw-modules-area,
.sw-integrations-area,
.sw-deployment-area,
.sw-cta-area {
  background-color: var(--f-bg-dark);
  color: var(--f-text);
  font-family: var(--f-font-body);
}

.sub-title {
  display: inline-block;
  font-family: var(--f-font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--f-accent);
  margin-bottom: 12px;
}

.default-btn {
  display: inline-block;
  padding: 14px 30px;
  background-color: var(--f-accent);
  color: var(--f-bg-dark);
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.default-btn:hover {
  opacity: 0.9;
  color: var(--f-bg-dark);
  transform: translateY(-2px);
}

.default-btn-outline {
  display: inline-block;
  padding: 14px 30px;
  background-color: transparent;
  color: var(--f-text);
  border: 1px solid var(--f-border);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.default-btn-outline:hover {
  border-color: var(--f-accent);
  color: var(--f-accent);
}

/* ---------- Split Hero ---------- */
.sw-hero-area {
  padding: 130px 0 100px;
}

.sw-hero-area h1 {
  font-family: var(--f-font-heading);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.25;
  color: var(--f-text);
  margin-bottom: 20px;
}

.sw-hero-area p {
  color: var(--f-text-muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 460px;
}

.hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mockup graphic (pure CSS, no external images) */
.sw-mockup {
  background-color: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: 14px;
  overflow: hidden;
}

.sw-mockup-topbar {
  display: flex;
  gap: 6px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--f-border);
}

.sw-mockup-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--f-border);
}

.sw-mockup-topbar span:first-child {
  background-color: var(--f-accent);
}

.sw-mockup-body {
  display: flex;
  min-height: 260px;
}

.sw-mockup-side {
  width: 30%;
  padding: 20px 14px;
  border-right: 1px solid var(--f-border);
}

.side-line {
  height: 8px;
  border-radius: 4px;
  background-color: var(--f-border);
  margin-bottom: 14px;
}

.side-line.w-70 { width: 70%; background-color: rgba(201,255,77,0.35); }
.side-line.w-40 { width: 40%; }
.side-line.w-55 { width: 55%; }
.side-line.w-30 { width: 30%; }

.sw-mockup-main {
  width: 70%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mockup-stat-row {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

.mockup-stat {
  flex: 1;
  background-color: var(--f-bg-dark);
  border: 1px solid var(--f-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.mockup-stat span {
  display: block;
  font-size: 11px;
  color: var(--f-text-muted);
  margin-bottom: 4px;
}

.mockup-stat strong {
  font-family: var(--f-font-mono);
  font-size: 14px;
  color: var(--f-accent);
}

.mockup-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100px;
}

.mockup-bars .bar {
  flex: 1;
  background-color: var(--f-accent);
  opacity: 0.85;
  border-radius: 3px 3px 0 0;
}

/* ---------- Section Title (shared) ---------- */
.section-title {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

.section-title h2 {
  font-family: var(--f-font-heading);
  font-weight: 700;
  font-size: 34px;
  color: var(--f-text);
  margin-bottom: 14px;
}

.section-title p {
  color: var(--f-text-muted);
  line-height: 1.8;
  font-size: 15px;
}

/* ---------- Zigzag Modules ---------- */
.sw-modules-area {
  padding: 100px 0 60px;
}

.sw-module-row {
  padding: 46px 0;
  border-bottom: 1px solid var(--f-border);
}

.sw-module-row:last-child {
  border-bottom: none;
}

.sw-module-number {
  font-family: var(--f-font-heading);
  font-size: 110px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--f-border);
  line-height: 1;
  display: block;
}

.sw-module-row:hover .sw-module-number {
  -webkit-text-stroke: 1.5px var(--f-accent);
  transition: -webkit-text-stroke 0.3s ease;
}

.sw-module-text i {
  font-size: 30px;
  color: var(--f-accent);
  margin-bottom: 16px;
  display: inline-block;
}

.sw-module-text h3 {
  font-family: var(--f-font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--f-text);
  margin-bottom: 14px;
}

.sw-module-text p {
  color: var(--f-text-muted);
  font-size: 15px;
  line-height: 1.8;
  max-width: 460px;
}

/* ---------- Integration Pills ---------- */
.sw-integrations-area {
  background-color: var(--f-bg-card);
  padding: 80px 0;
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
}

.sw-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.sw-pill {
  padding: 12px 22px;
  border: 1px solid var(--f-border);
  border-radius: 30px;
  font-family: var(--f-font-mono);
  font-size: 13.5px;
  color: var(--f-text);
  background-color: var(--f-bg-dark);
  transition: all 0.25s ease;
}

.sw-pill:hover {
  border-color: var(--f-accent);
  color: var(--f-accent);
}

/* ---------- Deployment Pricing-Style Cards ---------- */
.sw-deployment-area {
  padding: 100px 0;
}

.sw-deploy-card {
  position: relative;
  background-color: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: 14px;
  padding: 38px 30px;
  margin-bottom: 30px;
  height: calc(100% - 30px);
}

.sw-deploy-card.featured {
  border-color: var(--f-accent);
  transform: scale(1.03);
}

.sw-deploy-card .badge {
  position: absolute;
  top: -13px;
  left: 30px;
  background-color: var(--f-accent);
  color: var(--f-bg-dark);
  font-family: var(--f-font-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 600;
}

.sw-deploy-card h4 {
  font-family: var(--f-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--f-text);
  margin-bottom: 12px;
}

.sw-deploy-card p {
  color: var(--f-text-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.sw-deploy-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sw-deploy-card ul li {
  color: var(--f-text);
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-deploy-card ul li i {
  color: var(--f-accent);
  font-size: 16px;
}

/* ---------- Split CTA ---------- */
.sw-cta-area {
  background-color: var(--f-bg-card);
  padding: 90px 0;
  border-top: 1px solid var(--f-border);
}

.sw-cta-stat {
  text-align: center;
  border-right: 1px solid var(--f-border);
}

.sw-cta-stat strong {
  display: block;
  font-family: var(--f-font-heading);
  font-size: 54px;
  color: var(--f-accent);
  line-height: 1;
  margin-bottom: 10px;
}

.sw-cta-stat span {
  color: var(--f-text-muted);
  font-size: 14px;
}

.sw-cta-text {
  padding-left: 40px;
}

.sw-cta-text h2 {
  font-family: var(--f-font-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--f-text);
  margin-bottom: 14px;
}

.sw-cta-text p {
  color: var(--f-text-muted);
  margin-bottom: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .sw-hero-area h1 { font-size: 32px; }
  .sw-hero-area p { max-width: 100%; }
  .sw-mockup { margin-top: 40px; }
  .section-title h2 { font-size: 28px; }
  .sw-module-number { font-size: 70px; margin-bottom: 10px; }
  .sw-deploy-card.featured { transform: none; }
  .sw-cta-stat { border-right: none; border-bottom: 1px solid var(--f-border); padding-bottom: 24px; margin-bottom: 24px; }
  .sw-cta-text { padding-left: 0; text-align: center; }
}

@media (max-width: 576px) {
  .sw-hero-area { padding: 100px 0 60px; }
  .hero-btns { flex-direction: column; align-items: flex-start; }
}