/* Startups page: glowing hero with an accent word, four icon cards, two-column "why it matters"
   with an isometric illustration, and three stage plans with a "most popular" ribbon.
   Accent is the forge ember rather than the reference's blue, to stay on brand. */

.st { --st-panel: #101114; --st-line: #26282c; --st-glow: rgba(255,106,19,.16); }
.st .accent { color: var(--ember); }
.st .st-h { font: 700 clamp(26px, 3vw, 42px)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.st .st-sub { color: var(--steel); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 52ch; text-wrap: pretty; }
.st .center { text-align: center; }
.st .center .st-sub { margin-inline: auto; }

/* Ambient: a soft ember glow and a faint dotted grid, like the reference's starfield */
.st-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 85% 12%, var(--st-glow), transparent 70%),
    radial-gradient(45% 40% at 5% 70%, rgba(185,188,195,.05), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 28px 28px,
    linear-gradient(180deg, #101114 0%, #0b0b0c 60%, #0a0a0b 100%); }

/* Hero */
.st-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: 48px 40px; position: relative; }
.st-hero h1 { font: 700 clamp(32px, 4.2vw, 58px)/1.08 var(--display); letter-spacing: -.02em; text-wrap: balance; max-width: 16ch; }
.st-hero .lede { margin-top: 18px; font-size: 16px; color: var(--silver); max-width: 40ch; }
.st-hero .actions { margin-top: 26px; gap: 14px; }
.btn-ghost { background: none; color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ember); filter: none; }
.st-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.st-art::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,19,.22), transparent); filter: blur(30px); }
.st-art img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* Four cards */
.st-sec { padding-block: calc(var(--section) * .55) 0; }
.st-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.st-card { --c: 12px; padding: 26px 22px 24px; background: var(--st-panel); box-shadow: inset 0 0 0 1px var(--st-line); display: grid; gap: 12px; align-content: start; transition: transform .5s var(--ease), box-shadow .3s; }
.st-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-card.lit { background: linear-gradient(180deg, #16171b, #101114); box-shadow: inset 0 0 0 1px rgba(255,154,60,.45), 0 20px 50px -30px rgba(255,106,19,.5); }
.st-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #1c1d21, #121316); box-shadow: inset 0 0 0 1px var(--st-line), 0 0 24px -6px rgba(255,106,19,.55); color: var(--ember); }
.st-ico svg { width: 22px; height: 22px; }
.st-card h3 { font: 600 17px/1.25 var(--display); letter-spacing: -.01em; margin-top: 6px; }
.st-card p { color: var(--steel); font-size: 14px; line-height: 1.5; }

/* Two columns */
.st-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.st-why .st-sub { max-width: 44ch; }
.st-why .actions { margin-top: 24px; }
.st-iso { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.st-iso::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(closest-side, rgba(255,106,19,.14), transparent); filter: blur(24px); }
.st-iso img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* Plans */
.st-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; align-items: end; }
.st-plan { --c: 14px; position: relative; overflow: hidden; padding: 28px 26px 26px; background: var(--st-panel); box-shadow: inset 0 0 0 1px var(--st-line); display: grid; gap: 14px; align-content: start; }
.st-plan.pop { background: linear-gradient(180deg, #17181c, #101114); box-shadow: inset 0 0 0 1px rgba(255,154,60,.55), 0 30px 60px -30px rgba(255,106,19,.45); padding-bottom: 34px; margin-bottom: 12px; }
.st-plan .kind { font: 600 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.st-plan .num { display: flex; align-items: baseline; gap: 10px; }
.st-plan .num b { font: 700 clamp(36px, 3.6vw, 48px)/1 var(--display); letter-spacing: -.02em; }
.st-plan .num span { font-size: 13px; color: var(--steel); }
.st-plan h3 { font: 600 20px/1.2 var(--display); letter-spacing: -.01em; }
.st-plan > p { color: var(--steel); font-size: 14px; line-height: 1.5; }
.st-plan .inc { font: 600 12px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); margin-top: 6px; }
.st-plan ul { display: grid; gap: 9px; }
.st-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; color: var(--silver); line-height: 1.45; }
.st-plan li svg { width: 16px; height: 16px; color: var(--ember); margin-top: 2px; }
.st-plan .btn { margin-top: 10px; justify-self: start; }
.ribbon { position: absolute; top: 22px; right: -40px; transform: rotate(45deg); width: 170px; text-align: center; padding: 7px 0; font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: #1a0a02; background: linear-gradient(180deg, var(--ember), var(--orange)); }

/* FAQ / form rhythm */
.st .faq, .st .cta { margin-top: calc(var(--section) * .55); }

@media (max-width: 1024px) { .st-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .st-hero, .st-why { grid-template-columns: 1fr; }
  .st-art { max-width: 520px; margin-inline: auto; }
  .st-plans { grid-template-columns: 1fr; align-items: start; }
  .st-plan.pop { margin-bottom: 0; }
}
@media (max-width: 560px) { .st-cards { grid-template-columns: 1fr; } }