/* ============================================================
   SUITE.CSS
   Styles specific to the gaspra.us suite landing page.
   Depends on tokens in base.css and classes in components.css.
   ============================================================ */

.btn-secondary {
	display:         inline-block;
	background:      var(--color-ink);
	color:           var(--color-paper);
	font-family:     var(--font-sans);
	font-size:       15px;
	font-weight:     600;
	padding:         15px 34px;
	border:          none;
	border-radius:   3px;
	cursor:          pointer;
	text-decoration: none;
	transition:
		background var(--transition-fast),
		transform  var(--transition-fast);
}

.btn-secondary:hover {
	background: #2a2a28;
	transform:  translateY(-2px);
}

.section-dark-wrap .suite-mission-title {
	color: var(--color-paper);
}

.section-dark-wrap .suite-mission-body {
	color: rgba(245, 242, 235, 0.52);
}

.section-dark-wrap .suite-mission-number {
	color: rgba(1, 85, 1, 0.7);
	opacity: 1;
}

.section-dark-wrap .suite-mission-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.section-dark-wrap .suite-product-card {
  background: #1e1e1c;
  border-color: rgba(255, 255, 255, 0.07);
}

.section-dark-wrap .suite-product-card:hover {
	background: #242422;
}

.section-dark-wrap .suite-product-card-name {
	color: var(--color-paper);
}

.section-dark-wrap .suite-product-card-label {
	color: rgba(245, 242, 235, 0.35);
}

.section-dark-wrap .suite-product-card-body {
	color: rgba(245, 242, 235, 0.46);
}

.section-dark-wrap .suite-product-card-arrow {
	color: rgba(255, 255, 255, 0.15);
}

.section-dark-wrap .suite-product-card:hover .suite-product-card-arrow {
	color: rgba(255, 255, 255, 0.45);
}

.section-dark-wrap .suite-product-card-status--coming {
	background: rgba(255, 255, 255, 0.05);
	color:      rgba(245, 242, 235, 0.35);
	border:     1px solid rgba(255, 255, 255, 0.08);
}

/* ── SUITE HERO ── */

.suite-hero {
	position:   relative;
	padding:    180px 32px 120px;
	overflow:   hidden;
	max-width:  var(--max-content-width);
	margin:     0 auto;
	text-align: center;
}

.suite-hero-inner {
	position: relative;
	z-index:  2;
}

.suite-hero-headline {
	font-size:     clamp(38px, 5.5vw, 68px);
	line-height:   1.05;
	margin-bottom: 28px;
}

.suite-hero-headline em {
	font-style: italic;
	color:      var(--color-muted-text);
}

.suite-hero-name-note {
	font-family:    var(--font-mono);
	font-size:      11px;
	letter-spacing: 0.04em;
	color:          var(--color-muted-text);
	max-width:      480px;
	margin:         0 auto 18px;
	line-height:    1.7;
	opacity:        0.7;
}

.suite-hero-subheading {
	font-size:   17px;
	color:       #3e3d3a;
	max-width:   640px;
	margin:      0 auto 24px;
	line-height: 1.8;
}

.suite-hero-cta-group {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             20px;
	flex-wrap:       wrap;
}


/* ── ORBIT DECORATION ── */

.suite-hero-orbit {
	position:       absolute;
	top:            50%;
	left:           50%;
	transform:      translate(-50%, -50%);
	width:          700px;
	height:         700px;
	pointer-events: none;
	z-index:        1;
	opacity:        0.35;
}

.suite-orbit-ring {
	position:      absolute;
	top:           50%;
	left:          50%;
	border-radius: 50%;
	border:        1px solid rgba(1, 85, 1, 0.25);
	transform:     translate(-50%, -50%);
}

.suite-orbit-ring-1 { width: 280px; height: 280px; }
.suite-orbit-ring-2 { width: 460px; height: 460px; }
.suite-orbit-ring-3 { width: 640px; height: 640px; }

/* ── PRODUCT SUITE GRID ── */

.suite-product-grid {
	max-width: var(--max-content-width);
	margin:    0 auto;
	padding:   0 32px 100px;
	display:   grid;
	grid-template-columns: repeat(2, 1fr);
	gap:       16px;
}

.suite-product-card {
	position:        relative;
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	background:      var(--color-surface-warm);
	border:          1px solid var(--color-border-strong);
	border-radius:   10px;
	padding:         0 28px 28px;
	text-decoration: none;
	color:           var(--color-ink);
	overflow:        hidden;
	transition:
		box-shadow var(--transition-base),
		transform  var(--transition-base);
}

.suite-product-card:hover {
	transform:  translateY(-3px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Top color stripe per product */
.suite-product-card-stripe {
	position: absolute;
	top:      0;
	left:     0;
	right:    0;
	height:   3px;
}

.suite-product-card--labs      .suite-product-card-stripe { background: #6DD9B2; }
.suite-product-card--stockroom .suite-product-card-stripe { background: #9490E8; }
.suite-product-card--supply    .suite-product-card-stripe { background: #4D9AE8; }
.suite-product-card--production .suite-product-card-stripe { background: #E86A3A; }

/* Hover stripe glow per product */
.suite-product-card--labs:hover      { box-shadow: 0 6px 30px rgba(109, 217, 178, 0.15); }
.suite-product-card--stockroom:hover { box-shadow: 0 6px 30px rgba(148, 144, 232, 0.15); }
.suite-product-card--supply:hover    { box-shadow: 0 6px 30px rgba(77, 154, 232, 0.15); }
.suite-product-card--production:hover { box-shadow: 0 6px 30px rgba(232, 106, 58, 0.15); }

.suite-product-card-content {
	flex:       1;
	padding-top: 28px;
}

.suite-product-card-label {
	font-family:    var(--font-mono);
	font-size:      11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--color-muted-text);
	margin-bottom:  4px;
}

.suite-product-card-name {
	font-family:   var(--font-serif);
	font-size:     26px;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
	color:         var(--color-ink);
}

.suite-product-card-body {
	font-size:   14px;
	color:       #5a5a57;
	line-height: 1.65;
	margin-bottom: 18px;
	max-width:   340px;
}

.suite-product-card-status {
	display:        inline-block;
	font-family:    var(--font-mono);
	font-size:      9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding:        4px 10px;
	border-radius:  2px;
}

.section-dark-wrap .suite-product-card-status--live {
	background: rgba(109, 217, 178, 0.15);
	color:      #6DD9B2;
	border:     1px solid rgba(109, 217, 178, 0.35);
}

.suite-product-card-status--coming {
	background: rgba(14, 15, 12, 0.05);
	color:      var(--color-muted-text);
	border:     1px solid var(--color-border);
}

.suite-product-card-arrow {
	font-size:   18px;
	color:       var(--color-border-strong);
	padding-top: 28px;
	transition:  transform var(--transition-fast), color var(--transition-fast);
	flex-shrink: 0;
	margin-left: 16px;
}

.suite-product-card:hover .suite-product-card-arrow {
	transform: translateX(4px);
	color:     var(--color-muted-text);
}


/* ── MISSION SECTION ── */

.suite-mission {
	padding-bottom: var(--space-3xl);
}

.suite-mission-grid {
	max-width: var(--max-content-width);
	margin:    0 auto;
	padding:   0 32px;
}

.suite-mission-item {
	display:               grid;
	grid-template-columns: 48px 1fr;
	gap:                   24px;
	align-items:           start;
	padding:               32px 0;
	border-bottom:         1px solid var(--color-border);
}

.suite-mission-item:first-child { padding-top: 0; }

.section-dark-wrap .suite-mission-number {
	font-size:   16px;
	color:       rgba(109, 217, 178, 0.7);
	opacity:     1;
	font-weight: 500;
}

.suite-mission-title {
	font-family:   var(--font-serif);
	font-size:     22px;
	margin-bottom: 8px;
}

.suite-mission-body {
	font-size:   15px;
	color:       #4a4a47;
	line-height: 1.75;
}


/* ── CONTACT MODAL ── */

.suite-modal-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(14, 15, 12, 0.6);
	backdrop-filter: blur(4px);
	z-index:         200;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
}

.suite-modal-overlay[hidden] {
	display: none;
}

.suite-modal {
	position:   relative;
	max-width:  480px;
	width:      100%;
	animation:  fade-in-up-quick 0.25s ease;
}

.suite-modal-close {
	position:      absolute;
	top:           12px;
	right:         12px;
	background:    none;
	border:        none;
	font-size:     14px;
	color:         var(--color-muted-text);
	cursor:        pointer;
	padding:       6px 10px;
	border-radius: 3px;
	transition:    color var(--transition-fast), background var(--transition-fast);
	z-index:       1;
}

.suite-modal-close:hover {
	color:      var(--color-ink);
	background: var(--color-paper-mid);
}


/* ── RESPONSIVE ── */

@media (max-width: 820px) {

	.suite-hero {
		padding: 150px 20px 80px;
	}

	.suite-hero-orbit {
		width:   400px;
		height:  400px;
		opacity: 0.2;
	}

	.suite-product-grid {
		grid-template-columns: 1fr;
		padding: 0 20px 80px;
	}

	.suite-mission-grid {
		padding: 0 20px;
	}
}