/* =========================================================
   NASDAN — Startups solutions page
   Structure inspired by Stripe's startups page: hero with
   product proof, category grid, a named partner program,
   a testimonial spotlight, an engagement-model spectrum,
   a resources strip, and a final CTA.
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   1. HERO — fanned product mockup
   ========================================================= */
.stu-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(180deg, var(--cloud) 0%, var(--white) 60%);
  overflow: hidden;
}
.stu-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.stu-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.stu-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.stu-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--ink-900); margin-bottom: var(--sp-4); max-width: 15ch;
}
.stu-hero-lead { font-size: var(--fs-body); max-width: 46ch; margin-bottom: var(--sp-6); color: var(--ink-500); line-height: var(--lh-relaxed); }
.stu-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.stu-product { position: relative; width: 100%; max-width: 480px; margin-inline: auto; height: 380px; }
.stu-browser {
  position: absolute; top: 6%; left: 0; width: 78%; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--ink-200); box-shadow: var(--shadow-lg);
  overflow: hidden; transform: rotate(-2deg);
}
.stu-browser-bar { display: flex; gap: 5px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ink-100); }
.stu-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-200); }
.stu-browser-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.stu-browser-row { height: 10px; border-radius: 4px; background: var(--ink-100); width: 55%; }
.stu-browser-row--wide { width: 85%; height: 14px; }
.stu-browser-chart { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: var(--sp-2); }
.stu-bar { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--nasdan-navy-600); opacity: 0.85; }
.stu-bar--amber { background: var(--nasdan-amber); opacity: 1; }

.stu-phone {
  position: absolute; bottom: 0; right: 4%; width: 132px; padding: var(--sp-4) var(--sp-3);
  border-radius: 22px; background: var(--nasdan-navy); box-shadow: var(--shadow-lg);
  transform: rotate(4deg); display: flex; flex-direction: column; gap: var(--sp-2);
}
.stu-phone-notch { width: 36px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); margin: 0 auto var(--sp-2); }
.stu-phone-row { height: 9px; border-radius: 4px; background: rgba(255,255,255,0.14); width: 100%; }
.stu-phone-row--card { height: 46px; border-radius: 10px; background: rgba(255,193,7,0.18); border: 1px solid rgba(255,193,7,0.35); }

.stu-badge {
  position: absolute; padding: 0.4rem 0.75rem; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--ink-200); box-shadow: var(--shadow-md);
  font-size: 0.75rem; font-weight: var(--fw-semibold); color: var(--ink-900);
}
.stu-badge--users { top: 2%; right: 10%; color: #1a9c63; }
.stu-badge--mrr { bottom: 20%; left: -2%; color: var(--nasdan-amber-700); }
.stu-badge--speed { bottom: 0; right: 16%; color: var(--nasdan-navy); }

/* =========================================================
   1b. EARLY-STAGE CLIENT STRIP
   ========================================================= */
.stu-clients { padding-block: var(--sp-6); background: var(--white); border-bottom: 1px solid var(--ink-100); }
.stu-clients-inner { display: flex; align-items: center; gap: var(--sp-6); }
.stu-clients-label {
  flex: none; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--ink-400);
}
/* .hero-marquee/-track/-group/-logo are the sitewide sliding-logo
   component (main.css) — reused as-is here. flex:1 + min-width:0
   let the marquee's intrinsically-wide track share the row with
   the label without blowing out the flex container. */
.stu-clients-marquee { flex: 1; min-width: 0; width: 100%; }

/* =========================================================
   2. WHAT WE BUILD FOR STARTUPS — category card grid
   ========================================================= */
.stu-build { padding-block: var(--section-pad-y-lg); background: var(--nasdan-navy); }
.stu-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
.stu-cat-card {
  display: flex; flex-direction: column; padding: var(--sp-5);
  border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.stu-cat-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); }
.stu-cat-card h3 { margin: 0 0 var(--sp-2); font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--white); }
.stu-cat-card p { margin: 0 0 var(--sp-4); font-size: 0.875rem; line-height: var(--lh-relaxed); color: var(--ink-400); flex: 1; }
.stu-cat-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; font-weight: var(--fw-medium);
  color: var(--nasdan-amber); width: fit-content;
}
.stu-cat-link svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.stu-cat-card:hover .stu-cat-link svg { transform: translateX(3px); }

/* =========================================================
   3. STARTUP PARTNER PROGRAM — 4-pillar panel
   ========================================================= */
.stu-program { padding-block: var(--section-pad-y-lg); background: var(--cloud); }
.stu-program-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-9); align-items: center; }
.stu-program-copy .text-lead { margin-bottom: var(--sp-6); }
.stu-program-actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

.stu-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.stu-pillar {
  padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface-page);
  border: 1px solid var(--ink-100);
}
.stu-pillar-icon {
  display: inline-block; margin-bottom: var(--sp-3); font-size: 0.8125rem; font-weight: var(--fw-semibold);
  color: var(--nasdan-amber); font-variant-numeric: tabular-nums;
}
.stu-pillar h4 { margin: 0 0 var(--sp-2); font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--ink-900); }
.stu-pillar p { margin: 0; font-size: 0.8125rem; line-height: var(--lh-relaxed); color: var(--ink-500); }

/* =========================================================
   4b-d. DEEP-DIVE SERVICE SECTIONS
   ========================================================= */
.stu-deepdive { padding-block: var(--section-pad-y-lg); background: var(--white); }
.stu-deepdive--alt { background: var(--cloud); }
.stu-deepdive-top {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: end;
  padding-bottom: var(--sp-7); margin-bottom: var(--sp-7); border-bottom: 1px solid var(--ink-100);
}
.stu-deepdive-head .text-lead { margin-top: var(--sp-3); max-width: 60ch; }
.stu-deepdive-stat { flex: none; text-align: right; }
.stu-deepdive-stat strong {
  display: block; font-size: 2.25rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  color: var(--nasdan-amber); line-height: 1;
}
.stu-deepdive-stat span { display: block; margin-top: var(--sp-2); max-width: 18ch; margin-left: auto; font-size: 0.8125rem; color: var(--ink-500); }

.stu-deepdive-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-7); }
.stu-deepdive-feature h3 { margin: 0 0 var(--sp-3); font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: var(--lh-snug); }
.stu-deepdive-feature p { margin: 0 0 var(--sp-4); font-size: 0.9375rem; line-height: var(--lh-relaxed); color: var(--ink-500); }
.stu-tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stu-tag-pill {
  padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid var(--ink-200);
  background: var(--white); font-size: 0.75rem; font-weight: var(--fw-medium); color: var(--nasdan-navy-600);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.stu-tag-pill:hover { border-color: var(--nasdan-amber-700); color: var(--nasdan-amber-700); }
.stu-tag-pill--static { color: var(--ink-500); cursor: default; }
.stu-tag-pill--static:hover { border-color: var(--ink-200); color: var(--ink-500); }

.stu-deepdive-resources { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.stu-resource-card {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5);
  border-radius: var(--radius-lg); border: 1px solid var(--ink-100); background: var(--surface-page);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.stu-resource-card:hover { border-color: var(--nasdan-amber-700); transform: translateY(-3px); }
.stu-resource-card-tag {
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--nasdan-amber-700);
}
.stu-resource-card strong { font-size: 1rem; font-weight: var(--fw-medium); color: var(--ink-900); line-height: var(--lh-snug); }
.stu-resource-card-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--ink-500); }
.stu-resource-card-link svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.stu-resource-card:hover .stu-resource-card-link { color: var(--nasdan-amber-700); }
.stu-resource-card:hover .stu-resource-card-link svg { transform: translateX(3px); }

/* Guide (first card) / Case study (second card) — navy + amber duo.
   Swapped on the Cloud & data infrastructure section (.stu-deepdive--alt)
   per explicit request, so that section reads amber-guide/navy-case-study
   instead of the navy-guide/amber-case-study used everywhere else. */
.stu-deepdive-resources .stu-resource-card:first-child { background: var(--nasdan-navy); border-color: var(--nasdan-navy); }
.stu-deepdive-resources .stu-resource-card:first-child .stu-resource-card-tag { color: var(--nasdan-amber); }
.stu-deepdive-resources .stu-resource-card:first-child strong { color: var(--white); }
.stu-deepdive-resources .stu-resource-card:first-child .stu-resource-card-link { color: var(--paper-300); }
.stu-deepdive-resources .stu-resource-card:first-child:hover { border-color: var(--nasdan-amber); }
.stu-deepdive-resources .stu-resource-card:first-child:hover .stu-resource-card-link { color: var(--nasdan-amber); }

.stu-deepdive-resources .stu-resource-card:last-child { background: var(--nasdan-amber); border-color: var(--nasdan-amber); }
.stu-deepdive-resources .stu-resource-card:last-child .stu-resource-card-tag { color: var(--nasdan-navy); }
.stu-deepdive-resources .stu-resource-card:last-child strong { color: var(--nasdan-navy); }
.stu-deepdive-resources .stu-resource-card:last-child .stu-resource-card-link { color: rgba(11,22,63,0.7); }
.stu-deepdive-resources .stu-resource-card:last-child:hover { border-color: var(--nasdan-navy); }
.stu-deepdive-resources .stu-resource-card:last-child:hover .stu-resource-card-link { color: var(--nasdan-navy); }

.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:first-child { background: var(--nasdan-amber); border-color: var(--nasdan-amber); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:first-child .stu-resource-card-tag { color: var(--nasdan-navy); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:first-child strong { color: var(--nasdan-navy); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:first-child .stu-resource-card-link { color: rgba(11,22,63,0.7); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:first-child:hover { border-color: var(--nasdan-navy); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:first-child:hover .stu-resource-card-link { color: var(--nasdan-navy); }

.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:last-child { background: var(--nasdan-navy); border-color: var(--nasdan-navy); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:last-child .stu-resource-card-tag { color: var(--nasdan-amber); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:last-child strong { color: var(--white); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:last-child .stu-resource-card-link { color: var(--paper-300); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:last-child:hover { border-color: var(--nasdan-amber); }
.stu-deepdive--alt .stu-deepdive-resources .stu-resource-card:last-child:hover .stu-resource-card-link { color: var(--nasdan-amber); }

/* =========================================================
   5. ENGAGEMENT MODELS — ascending emphasis cards
   ========================================================= */
.stu-engage { padding-block: var(--section-pad-y-lg); background: var(--cloud); }
.stu-engage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); align-items: stretch; }
.stu-engage-card {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--radius-lg); border: 1px solid var(--ink-100); background: var(--white);
  min-height: 168px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.stu-engage-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stu-engage-card:nth-child(2) { min-height: 188px; }
.stu-engage-card:nth-child(3) { min-height: 208px; }
.stu-engage-card:nth-child(4) { min-height: 228px; }
.stu-engage-card--deep {
  min-height: 248px; background: var(--nasdan-navy); border-color: var(--nasdan-navy);
}
.stu-engage-label { font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--ink-900); }
.stu-engage-card--deep .stu-engage-label { color: var(--nasdan-amber); }
.stu-engage-card p { margin: 0; font-size: 0.8125rem; line-height: var(--lh-relaxed); color: var(--ink-500); }
.stu-engage-card--deep p { color: var(--paper-300); }

/* =========================================================
   7. FINAL CTA
   ========================================================= */
.stu-final-panel { }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .stu-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .stu-product { max-width: 420px; }
  .stu-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .stu-program-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .stu-deepdive-features { grid-template-columns: 1fr 1fr; }
  .stu-engage-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-5); }
  .stu-engage-card, .stu-engage-card:nth-child(2), .stu-engage-card:nth-child(3), .stu-engage-card:nth-child(4), .stu-engage-card--deep {
    min-height: 168px;
  }
}

@media (max-width: 767.98px) {
  .stu-hero { padding-block: var(--sp-8) var(--sp-6); }
  .stu-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .stu-hero-actions { flex-direction: column; align-items: stretch; }
  .stu-hero-actions .btn-nasdan { white-space: normal; text-align: center; }
  .stu-product { max-width: 320px; height: 320px; }
  .stu-phone { width: 108px; }
  .stu-badge--speed { right: auto; left: 2%; bottom: -4%; }

  .stu-clients-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  .stu-cat-grid { grid-template-columns: 1fr 1fr; }
  .stu-pillars { grid-template-columns: 1fr; }
  .stu-program-copy .btn-nasdan { white-space: normal; text-align: center; }
  .stu-program-actions { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .stu-program-actions .btn-link-nasdan { justify-content: center; }

  .stu-deepdive-top { grid-template-columns: 1fr; align-items: start; }
  .stu-deepdive-stat { text-align: left; }
  .stu-deepdive-stat span { margin-left: 0; }
  .stu-deepdive-features { grid-template-columns: 1fr; }
  .stu-deepdive-resources { grid-template-columns: 1fr; }

  .stu-engage-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .stu-cat-grid { grid-template-columns: 1fr; }
  .stu-engage-grid { grid-template-columns: 1fr; }
  .stu-engage-card, .stu-engage-card--deep { min-height: 0; }
}