/* Software page. Shares tokens and components with /styles.css. */

.sw-hero { padding: 170px 0 var(--section); border-bottom: 2px solid var(--border); }
.sw-title { max-width: 16ch; margin: 0 0 var(--s-5); font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 6.4vw, 5.8rem); line-height: .98; letter-spacing: -.025em; color: #fff; }
.sw-hero .lead { max-width: 44rem; }
.sw-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Demo vs production */
.compare { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 820px) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.compare__col { padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); }
.compare__col--good { border-color: var(--border-strong); box-shadow: var(--shadow-md) var(--shadow-md) 0 var(--purple-dark); }
.compare__col h3 { margin: 0 0 var(--s-4); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); color: #fff; }
.compare__col ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; color: var(--text-2); }
.compare__col li { position: relative; padding-left: 28px; }
.compare__col li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 12px; height: 2px; background: var(--muted); }
.compare__col--good li::before { left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--green); }
.compare__col--good li::after { content: ""; position: absolute; left: 5px; top: .58em; width: 7px; height: 4px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg); }

/* The dive: depth gauge and layers that light up as you reach them */
.sw-dive { border-bottom: 2px solid var(--border); }
.dive { position: relative; margin: var(--s-7) 0 0; padding-left: clamp(32px, 6vw, 72px); }
.dive__gauge { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--purple), rgba(168, 85, 247, .12)); }
.dive__dot {
  position: absolute; left: -5px; top: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 6px rgba(249, 115, 22, .2); will-change: transform;
}
.dive__dot b {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: var(--r-btn);
  background: var(--bg); border: 1px solid var(--orange); color: var(--orange); font: 700 .74rem/1 var(--f-mono); letter-spacing: .06em; white-space: nowrap;
}
.dive__layers { display: grid; gap: clamp(40px, 6vw, 72px); margin: 0; padding: 0; list-style: none; }
.layer { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--s-4); }
.js .layer { opacity: .62; transform: translateY(12px); transition: opacity .6s, transform .6s; }
.js .layer.is-active { opacity: 1; transform: none; }
.layer__depth { padding-top: .9em; font: 700 .85rem/1 var(--f-mono); letter-spacing: .06em; color: var(--orange); }
.layer h3 { margin: 0 0 var(--s-2); font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: #fff; }
.layer__lead { margin: 0 0 var(--s-1); font-weight: 600; color: #fff; }
.layer p { max-width: 36rem; margin: 0; color: var(--text-2); }
.bubbles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bubbles i {
  position: absolute; border-radius: 50%; opacity: 0; border: 1px solid rgba(216, 180, 254, .4);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%);
  animation: bubble linear infinite;
}
@keyframes bubble { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .8; } 100% { transform: translate3d(var(--dx, 14px), -70vh, 0); opacity: 0; } }
.sw-hero .wrap { position: relative; z-index: 1; }

/* Engagements */
.engagements { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) { .engagements { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Use cases + proof */
.uses { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .uses { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-8); } }
.uses__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--border); }
.uses__list li { display: grid; gap: 2px; padding: var(--s-5) 0; border-bottom: 2px solid var(--border); }
.uses__list b { font: 400 clamp(1.5rem, 1vw + 1.1rem, 1.9rem)/1.15 var(--f-display); color: #fff; }
.uses__list span { color: var(--text-2); }
.proof-card { padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md) var(--shadow-md) 0 var(--orange-dark); }
.proof-card .card__kicker { color: var(--orange); }
.proof-card h3 { margin: 0 0 var(--s-3); font: 400 var(--fs-h3)/1.1 var(--f-display); color: #fff; }
.proof-card p { color: var(--text-2); }

.sw-cta { padding-block: var(--section); }

@media (prefers-reduced-motion: reduce) { .js .layer { opacity: 1; transform: none; } .bubbles { display: none; } }