.ss-startups { --startups-muted: rgba(9,25,35,.66); --startups-rule: rgba(9,25,35,.16); }
.ss-startups .ss-page::before { display: none; }
.ss-startups .ss-nav-links a.is-active { color: var(--ss-copper); }
.ss-startups .ss-nav-links a.is-active::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; border-radius: 999px; background: var(--ss-copper); }
.startups-page { width: 100%; max-width: 100%; overflow-x: hidden; }
.startups-page h1,
.startups-page h2,
.startups-page h3,
.startups-page strong { font-family: "Cabinet Grotesk", "Segoe UI", sans-serif; }

.startups-masthead { position: relative; width: min(calc(100% - 48px),var(--ss-max)); margin: clamp(54px,7vw,96px) auto 0; padding-bottom: clamp(58px,7vw,94px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--startups-rule); }
.startups-masthead::after { content: ""; position: absolute; z-index: -1; top: 38px; right: 0; width: clamp(100px,16vw,220px); height: calc(100% - 38px); opacity: .17; background: url("assets/ankara-tech-band-v2.jpg") center / cover no-repeat; mask-image: linear-gradient(90deg,transparent,#000 82%); }
.startups-masthead-rule { padding: 14px 0; display: flex; justify-content: space-between; gap: 24px; color: var(--startups-muted); border-top: 1px solid var(--startups-rule); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.startups-masthead-grid { padding-top: clamp(52px,6vw,84px); display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.45fr); gap: clamp(38px,7vw,110px); align-items: end; }
.startups-masthead h1 { max-width: 1160px; margin: 0; font-size: clamp(3.8rem,7.2vw,7.6rem); font-weight: 600; letter-spacing: -.077em; line-height: .87; text-wrap: balance; }
.startups-title-image { width: 1.18em; height: .42em; margin: 0 .08em; display: inline-block; vertical-align: .1em; border-radius: 999px; background: url("assets/mpesa-teaser.png") center / cover no-repeat; box-shadow: inset 0 0 0 2px rgba(9,25,35,.12); }
.startups-masthead-intro { padding-bottom: 8px; }
.startups-masthead-intro p { max-width: 420px; margin: 0; color: var(--startups-muted); font-size: 16px; line-height: 1.65; }
.startups-masthead-intro a { margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; color: var(--ss-copper); border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; }
.startups-market-strip { margin-top: clamp(54px,7vw,86px); display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--startups-rule); border-bottom: 1px solid var(--startups-rule); }
.startups-market-strip p { min-width: 0; margin: 0; padding: 24px clamp(16px,3vw,38px); border-right: 1px solid var(--startups-rule); }
.startups-market-strip p:first-child { padding-left: 0; }
.startups-market-strip p:last-child { border-right: 0; }
.startups-market-strip span { display: block; margin-bottom: 8px; color: var(--ss-copper); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.startups-market-strip strong { font-size: clamp(1.8rem,3.2vw,3.4rem); font-weight: 600; letter-spacing: -.06em; line-height: 1; }

.startups-chapter { width: min(calc(100% - 48px),var(--ss-max)); margin: 0 auto; padding-block: clamp(120px,14vw,210px); }
.startups-kicker { margin: 0 0 19px; color: var(--ss-copper); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.startups-section-head,
.startups-directory-head { margin-bottom: clamp(50px,7vw,92px); display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.45fr); gap: 48px; align-items: end; }
.startups-section-head h2,
.startups-directory-head h2,
.startups-signals h2,
.startups-action h2 { max-width: 1080px; margin: 0; font-size: clamp(3.5rem,7vw,7.1rem); font-weight: 600; letter-spacing: -.075em; line-height: .87; }
.startups-section-head > p,
.startups-directory-head > p { max-width: 430px; margin: 0 0 4px; color: var(--startups-muted); font-size: 15px; line-height: 1.65; }
.startups-directory-head > p { text-align: right; }

.startups-featured-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(260px,1fr)); grid-auto-flow: dense; gap: 0; overflow: hidden; border-radius: 30px; box-shadow: 0 30px 90px rgba(9,25,35,.13); }
.startups-feature-card { position: relative; grid-column: span 4; grid-row: span 1; min-height: 280px; padding: 30px; display: flex; flex-direction: column; overflow: hidden; color: var(--ss-ink); background: #dcece7; transition: flex 700ms var(--ss-ease), filter 350ms ease; }
.startups-feature-card:nth-child(3) { background: #efd9cf; }
.startups-feature-card::after { content: ""; position: absolute; right: -14%; bottom: -30%; width: 68%; height: 80%; opacity: .15; background: url("assets/ankara-tech-band-v2.jpg") center / cover no-repeat; mask-image: linear-gradient(135deg,transparent,#000); transition: transform 850ms var(--ss-ease),opacity 400ms ease; }
.startups-feature-card:hover::after { opacity: .25; transform: scale(1.08) rotate(2deg); }
.startups-feature-primary { grid-column: span 8; grid-row: span 2; min-height: 580px; padding: clamp(36px,5vw,64px); color: var(--ss-paper); background: var(--ss-teal-deep); }
.startups-feature-primary::after { inset: 0; width: auto; height: auto; opacity: .22; background: linear-gradient(180deg,rgba(9,25,35,.05),rgba(9,25,35,.78)),url("assets/ankara-tech-band-v2.jpg") center / cover no-repeat; mask-image: none; mix-blend-mode: luminosity; }
.startups-feature-card > * { position: relative; z-index: 1; }
.startups-feature-index { align-self: flex-end; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.startups-feature-copy { margin-top: auto; }
.startups-feature-copy small { color: var(--ss-copper); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.startups-feature-primary .startups-feature-copy small { color: #f4bd69; }
.startups-feature-copy strong { max-width: 650px; margin-top: 12px; display: block; font-size: clamp(2rem,3.6vw,4.2rem); font-weight: 600; letter-spacing: -.065em; line-height: .93; }
.startups-feature-primary .startups-feature-copy strong { font-size: clamp(3rem,5.4vw,6rem); }
.startups-feature-primary .startups-feature-copy strong,
.startups-feature-primary .startups-feature-meta b { color: #f4bd69; }
.startups-feature-copy p { max-width: 620px; margin: 18px 0 0; color: var(--startups-muted); font-size: 13px; line-height: 1.55; }
.startups-feature-primary .startups-feature-copy p { color: rgba(255,250,243,.7); }
.startups-feature-meta { margin-top: 28px; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 10px; align-items: center; font-size: 10px; }
.startups-feature-meta span { color: var(--ss-copper); text-transform: uppercase; }
.startups-feature-primary .startups-feature-meta span { color: #f4bd69; }
.startups-feature-meta b { font-weight: 650; }

.startups-directory { padding-top: clamp(90px,10vw,150px); }
.startups-filter-dock { position: sticky; z-index: 20; top: 102px; margin-bottom: 42px; padding: 10px; display: grid; grid-template-columns: minmax(250px,1.5fr) repeat(4,minmax(135px,.55fr)) auto; gap: 8px; border: 1px solid rgba(9,25,35,.13); border-radius: 18px; background: rgba(255,250,243,.92); box-shadow: 0 18px 55px rgba(9,25,35,.09); backdrop-filter: blur(20px) saturate(1.2); }
.startups-filter-dock label { position: relative; min-width: 0; }
.startups-search-field svg { position: absolute; z-index: 1; top: 50%; left: 16px; width: 18px; height: 18px; color: var(--startups-muted); transform: translateY(-50%); }
.startups-filter-dock input,
.startups-filter-dock select { width: 100%; height: 50px; padding: 0 14px; color: var(--ss-ink); border: 1px solid rgba(9,25,35,.12); border-radius: 12px; outline: 0; background: rgba(255,255,255,.64); font: inherit; font-size: 11px; font-weight: 550; }
.startups-filter-dock input { padding-left: 46px; }
.startups-filter-dock select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg,transparent 50%,var(--ss-ink) 50%),linear-gradient(135deg,var(--ss-ink) 50%,transparent 50%); background-position: calc(100% - 15px) 22px,calc(100% - 10px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.startups-filter-dock input:focus,
.startups-filter-dock select:focus { border-color: rgba(15,109,104,.54); background-color: #fffaf3; }
.startups-clear { min-width: 82px; color: var(--ss-paper) !important; border: 0; border-radius: 12px; background: var(--ss-navy); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 240ms ease,transform 350ms var(--ss-ease); }
.startups-clear:hover { color: var(--ss-paper) !important; background: var(--ss-copper); transform: translateY(-2px); }

.startups-list { border-top: 1px solid var(--startups-rule); }
.startup-row { position: relative; min-height: 245px; padding: 34px 0; display: grid; grid-template-columns: 84px minmax(0,1.2fr) minmax(125px,.45fr) minmax(140px,.5fr) 150px; gap: clamp(22px,3.5vw,54px); align-items: center; border-bottom: 1px solid var(--startups-rule); transition: padding 500ms var(--ss-ease); }
.startup-row::before { content: ""; position: absolute; z-index: -1; inset: 0 -20px; border-radius: 22px; background: rgba(255,250,243,.75); opacity: 0; transform: scale(.985); transition: opacity 350ms ease,transform 500ms var(--ss-ease); }
.startup-row:hover { padding-inline: 18px; }
.startup-row:hover::before { opacity: 1; transform: scale(1); box-shadow: 0 22px 70px rgba(9,25,35,.08); }
.startup-row-mark { width: 78px; height: 78px; display: grid; place-items: center; color: var(--ss-paper); border-radius: 24px; background: var(--ss-teal-deep); font-size: 19px; font-weight: 700; }
.startup-row:nth-child(3n+2) .startup-row-mark { color: var(--ss-ink); background: #dcece7; }
.startup-row:nth-child(3n) .startup-row-mark { color: var(--ss-ink); background: #efd9cf; }
.startup-row-main > span { color: var(--ss-copper); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.startup-row-main h3 { max-width: 700px; margin: 11px 0 12px; font-size: clamp(2rem,3.2vw,3.8rem); font-weight: 600; letter-spacing: -.06em; line-height: .95; }
.startup-row-main p { max-width: 700px; margin: 0; color: var(--startups-muted); font-size: 13px; line-height: 1.55; }
.startup-row-fact span { display: block; margin-bottom: 9px; color: var(--ss-copper); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.startup-row-fact strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.startup-row-end { display: grid; justify-items: end; gap: 18px; }
.startup-row-action { justify-self: end; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 12px; color: var(--ss-paper) !important; border-radius: 12px; background: var(--ss-teal-deep); font-size: 11px; font-weight: 700; transition: background 240ms ease,transform 350ms var(--ss-ease); }
.startup-row-action:hover { color: var(--ss-paper) !important; background: var(--ss-copper); transform: translateY(-2px); }
.startups-empty { min-height: 360px; padding: 60px; display: grid; place-items: center; text-align: center; border-bottom: 1px solid var(--startups-rule); }
.startups-empty h3 { margin: 0 0 12px; font-size: 42px; font-weight: 600; letter-spacing: -.05em; }
.startups-empty p { margin: 0; color: var(--startups-muted); }
.startups-empty button { margin-top: 24px; color: var(--ss-copper); border: 0; border-bottom: 1px solid currentColor; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.startups-loading { min-height: 520px; padding: 40px 0; display: grid; gap: 12px; }
.startups-loading span { display: block; border-radius: 20px; background: linear-gradient(90deg,rgba(9,25,35,.05),rgba(9,25,35,.1),rgba(9,25,35,.05)); background-size: 200% 100%; animation: startupsLoading 1.6s ease infinite; }
@keyframes startupsLoading { to { background-position: -200% 0; } }

.startups-signals { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: clamp(60px,10vw,150px); align-items: start; }
.startups-signals-copy { position: sticky; top: 160px; }
.startups-signals-copy > p:last-child { max-width: 500px; margin: 32px 0 0; color: var(--startups-muted); font-size: 15px; line-height: 1.7; }
.startups-sector-chart { min-height: 600px; padding: clamp(34px,5vw,62px); display: grid; align-content: center; gap: 26px; color: var(--ss-paper); border-radius: 30px; background: radial-gradient(circle at 85% 18%,rgba(217,154,63,.15),transparent 30%),var(--ss-teal-deep); }
.startups-sector-row { display: grid; grid-template-columns: minmax(90px,.35fr) minmax(0,1fr) 42px; gap: 18px; align-items: center; }
.startups-sector-row span { font-size: 13px; font-weight: 650; text-transform: capitalize; }
.startups-sector-bar { height: 13px; overflow: hidden; border-radius: 999px; background: rgba(255,250,243,.12); }
.startups-sector-bar i { width: var(--sector-width); height: 100%; display: block; border-radius: inherit; background: #f4bd69; transform-origin: left; }
.startups-sector-row b { color: rgba(255,250,243,.62); font-size: 12px; text-align: right; }

.startups-action { position: relative; width: min(calc(100% - 48px),var(--ss-max)); min-height: 460px; margin: 0 auto clamp(100px,12vw,170px); padding: clamp(44px,6vw,82px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 50px; align-items: end; overflow: hidden; color: var(--ss-paper); border-radius: 32px; background: var(--ss-navy); }
.startups-action > * { position: relative; z-index: 1; }
.startups-action-pattern { position: absolute; z-index: 0; inset: 0; opacity: .42; background: linear-gradient(90deg,rgba(9,25,35,.98),rgba(9,25,35,.75) 56%,rgba(9,25,35,.25)),url("assets/ankara-tech-band-v2.jpg") center / cover no-repeat; }
.startups-action .startups-kicker { color: #f4bd69; }
.startups-action p:last-child { max-width: 650px; margin: 24px 0 0; color: rgba(255,250,243,.7); font-size: 15px; line-height: 1.65; }
.startups-action-button { min-width: 210px; min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--ss-navy) !important; border-radius: 13px; background: #f4bd69; font-size: 12px; font-weight: 750; transition: background 250ms ease,transform 450ms var(--ss-ease); }
.startups-action-button:hover { color: var(--ss-paper) !important; background: var(--ss-copper); transform: translateY(-3px); }

.ss-startups.ss-motion-ready [data-startups-reveal] { opacity: 0; transform: translateY(36px); }
.ss-startups.ss-motion-ready [data-startups-reveal].is-visible { opacity: 1; transform: none; transition: opacity 850ms ease,transform 950ms var(--ss-ease); }

@media (max-width: 1120px) {
  .startups-masthead-grid,
  .startups-section-head,
  .startups-directory-head { grid-template-columns: 1fr; }
  .startups-directory-head > p { text-align: left; }
  .startups-filter-dock { grid-template-columns: 1fr 1fr 1fr; }
  .startups-search-field { grid-column: span 2; }
  .startup-row { grid-template-columns: 80px minmax(0,1fr) 130px 140px; }
  .startup-row .startup-row-fact:nth-of-type(2) { display: none; }
}

@media (max-width: 820px) {
  .startups-market-strip { grid-template-columns: 1fr 1fr; }
  .startups-market-strip p:nth-child(2) { border-right: 0; }
  .startups-market-strip p:nth-child(-n+2) { border-bottom: 1px solid var(--startups-rule); }
  .startups-feature-primary { grid-column: span 12; grid-row: span 1; min-height: 520px; }
  .startups-feature-card:not(.startups-feature-primary) { grid-column: span 6; min-height: 340px; }
  .startups-featured-grid { grid-template-rows: auto auto; }
  .startups-filter-dock { position: relative; top: auto; grid-template-columns: 1fr 1fr; }
  .startups-search-field { grid-column: span 2; }
  .startup-row { grid-template-columns: 72px minmax(0,1fr) 130px; }
  .startup-row .startup-row-fact { display: none; }
  .startups-signals { grid-template-columns: 1fr; }
  .startups-signals-copy { position: relative; top: auto; }
  .startups-action { grid-template-columns: 1fr; }
  .startups-action-button { justify-self: start; }
}

@media (max-width: 620px) {
  .startups-masthead,
  .startups-chapter,
  .startups-action { width: calc(100% - 30px); }
  .startups-masthead { margin-top: 44px; padding-bottom: 58px; }
  .startups-masthead-rule { align-items: flex-start; font-size: 8px; line-height: 1.45; }
  .startups-masthead-rule span:first-child { max-width: 175px; }
  .startups-masthead-grid { padding-top: 46px; gap: 36px; }
  .startups-masthead h1 { font-size: clamp(2.95rem,13.5vw,4.6rem); line-height: .88; }
  .startups-masthead-intro p { font-size: 14px; }
  .startups-market-strip p { padding: 20px 12px; }
  .startups-market-strip p:nth-child(odd) { padding-left: 0; }
  .startups-market-strip strong { font-size: 2rem; }
  .startups-chapter { padding-block: 112px; }
  .startups-section-head h2,
  .startups-directory-head h2,
  .startups-signals h2,
  .startups-action h2 { font-size: clamp(3rem,14vw,4.8rem); }
  .startups-featured-grid { display: block; border-radius: 22px; box-shadow: none; }
  .startups-feature-card,
  .startups-feature-primary,
  .startups-feature-card:not(.startups-feature-primary) { min-height: 470px; margin-bottom: 12px; border-radius: 22px; }
  .startups-feature-copy strong,
  .startups-feature-primary .startups-feature-copy strong { font-size: clamp(2.4rem,11vw,4rem); }
  .startups-filter-dock { grid-template-columns: 1fr; padding: 8px; }
  .startups-search-field { grid-column: span 1; }
  .startups-clear { min-height: 48px; }
  .startup-row { min-height: 0; padding: 30px 0; grid-template-columns: 64px 1fr; gap: 18px; }
  .startup-row:hover { padding-inline: 0; }
  .startup-row-mark { width: 64px; height: 64px; border-radius: 20px; font-size: 16px; }
  .startup-row-main h3 { font-size: clamp(1.9rem,9vw,2.9rem); }
  .startup-row-main p { display: none; }
  .startup-row-end { grid-column: 2; justify-items: start; }
  .startup-row-action { justify-self: start; justify-content: space-between; }
  .startups-sector-chart { min-height: 550px; padding: 26px; }
  .startups-sector-row { grid-template-columns: 86px 1fr 26px; gap: 10px; }
  .startups-action { min-height: 600px; padding: 30px; align-content: end; border-radius: 24px; }
  .startups-action-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .startups-loading span { animation: none; }
  .ss-startups.ss-motion-ready [data-startups-reveal] { opacity: 1; transform: none; }
}