/* Slobiq studio palette */
:root {
  color-scheme: dark;
  --canvas: #11100e;
  --panel: #1a1713;
  --panel-raised: #221c15;
  --ink: #f5efe5;
  --muted: #d3c8b8;
  --gold: #e3c682;
  --line: #51432f;
  --serif: Georgia, "Times New Roman", serif;
  font-family: system-ui, sans-serif;
  line-height: 1.55;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: var(--gold); text-underline-offset: .23em; }
a:hover { text-decoration-thickness: .13em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
p { margin: 0 0 1em; color: var(--muted); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: normal; line-height: 1.12; }
h1 { font-size: clamp(3rem, 7.6vw, 6.3rem); letter-spacing: -.045em; }
h1 em { color: var(--gold); }
h2 { font-size: clamp(2.15rem, 4.3vw, 3.65rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
.wrap { width: min(1100px, calc(100% - 3rem)); margin-inline: auto; }
.skip { position: absolute; left: .75rem; top: .75rem; transform: translateY(-150%); z-index: 1; color: #18130b; background: var(--gold); padding: .65rem; }
.skip:focus { transform: none; }

.top { border-bottom: 1px solid var(--line); background: #0d0c0b; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: .95rem; }
.brand { display: block; width: min(9rem, 100%); flex: none; }
.brand img { width: 100%; height: auto; display: block; }
nav { display: flex; gap: .35rem 1.5rem; flex-wrap: wrap; }
nav a { font-size: .88rem; padding-block: .25rem; color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--gold); text-decoration: underline; }

.hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); align-items: center; gap: 2.5rem; padding-block: clamp(3.4rem, 8vw, 7rem); }
.eyebrow, .tag { color: var(--gold); font-weight: 650; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; }
.eyebrow { margin-bottom: .8rem; }
.lead { font-size: clamp(1rem, 2vw, 1.22rem); margin-top: 1.35rem; max-width: 52ch; }
.hero-aside { border: 1px solid var(--line); padding: clamp(1.1rem, 4vw, 2.3rem); background: radial-gradient(ellipse at 80% 8%, #4b351e 0, var(--panel) 66%); }
.hero-aside .eyebrow { margin-bottom: 1.15rem; }
.hero-list { list-style: none; padding: 0; margin: 0; }
.hero-list li { display: flex; gap: .9rem; align-items: baseline; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.hero-list li:last-child { border-bottom: 0; }
.hero-list span, .index { font: italic 1.25rem var(--serif); color: var(--gold); }

.actions { display: flex; gap: .65rem 1rem; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; gap: .55rem; justify-content: center; align-items: center; min-height: 44px; max-width: 100%; padding: .58rem 1rem; border: 1px solid var(--gold); font: inherit; font-weight: 650; font-size: .91rem; text-decoration: none; color: #191309; background: var(--gold); cursor: pointer; }
.button:hover { background: #f1d9a0; }
.button.secondary { background: transparent; color: var(--gold); border-color: #8e744a; }
.button.secondary:hover { background: #382c1c; }

.section { padding-block: clamp(2.8rem, 6vw, 4.6rem); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.section-head { margin-bottom: 1.65rem; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.offer { border: 1px solid var(--line); background: var(--panel); padding: clamp(1rem, 3vw, 1.55rem); }
.offer h3, .journey h3 { margin-block: .45rem .65rem; }
.offer p, .steps p, .journey p { margin-bottom: 0; }
.steps { counter-reset: steps; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.steps li { counter-increment: steps; border-top: 1px solid var(--gold); padding: .8rem .35rem 0; }
.steps li::before { content: counter(steps, decimal-leading-zero); display: block; font: italic 1.25rem var(--serif); color: var(--gold); margin-bottom: .35rem; }
.steps h3 { margin-bottom: .55rem; }
.callout { margin: 1.5rem 0 0; padding: .85rem 1.1rem; background: var(--panel); border-inline-start: 2px solid var(--gold); }

.journey { border-bottom: 1px solid var(--line); }
.journey-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1.5fr) minmax(11rem, .7fr); gap: 1.2rem; border-top: 1px solid var(--line); padding-block: 1.35rem; align-items: start; }
.journey-row .index { padding-top: .15rem; }
.journey-row .actions { align-items: flex-start; flex-direction: column; font-size: .88rem; align-self: center; }

.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: 1.5rem 2.5rem; }
.brief h2 { margin-bottom: .75rem; }
.brief-form { background: var(--panel-raised); border: 1px solid var(--line); padding: clamp(1rem, 3vw, 1.6rem); }
.brief-form fieldset { border: 0; margin: 0; padding: 0; }
.brief-form legend { font-weight: 650; margin-bottom: .6rem; padding: 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .7rem; margin-bottom: 1rem; }
.checks label { display: flex; align-items: center; min-height: 38px; gap: .52rem; font-size: .9rem; cursor: pointer; }
input[type="checkbox"] { inline-size: 1.05rem; block-size: 1.05rem; flex: none; margin: 0; accent-color: var(--gold); }
.brief-form > label { display: block; font-size: .93rem; }
input[type="text"], textarea { display: block; width: 100%; border: 1px solid #857150; background: #15120e; color: var(--ink); font: inherit; padding: .55rem .7rem; margin-block: .35rem .7rem; }
textarea { resize: vertical; }
.field-note, .muted { color: var(--muted); font-size: .82rem; }
[data-status] { margin: .6rem 0 0; }
[data-status]:empty { display: none; }

.footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; padding-block: 1.25rem 2rem; font-size: .88rem; }

.startup-picker { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; margin: 1rem 0; }
.startup-picker[hidden], .startup-country[hidden], #startup-fallback[hidden] { display: none; }
.startup-picker label { font-weight: 700; }
.startup-picker select { max-width: 100%; min-height: 44px; padding: .5rem .65rem; border: 1px solid #857150; background: #15120e; color: var(--ink); color-scheme: dark; font: inherit; }
.startup-date { margin: 1rem 0; }
.startup-country { padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--line); background: var(--panel-raised); margin-block: 1.15rem; }
.startup-country h3 { font-size: clamp(1.45rem, 4vw, 2rem); margin-block: .4rem .65rem; }
.startup-steps { padding-inline-start: 1.45rem; }
.startup-steps li { margin-block: 1rem; padding-inline-start: .3rem; }
.startup-steps li::marker { color: var(--gold); font-weight: 700; }
.startup-steps h4 { margin: 0 0 .3rem; }
.startup-steps p, .startup-sources { max-width: 78ch; margin: 0; }
.startup-sources { margin-block: 1.1rem; overflow-wrap: anywhere; }
.startup-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hub-languages { position: relative; }
.hub-languages summary { min-height: 2rem; padding: .25rem .45rem; border: 1px solid var(--line); cursor: pointer; }
.hub-languages ul { position: absolute; z-index: 20; inset-inline-end: 0; min-width: 10rem; max-height: 60vh; overflow: auto; list-style: none; margin: .35rem 0 0; padding: .35rem; border: 1px solid var(--line); background: var(--panel-raised); }
.hub-languages a { display: block; padding: .32rem .65rem; }
.hub-languages a[aria-current="page"] { color: var(--gold); font-weight: 700; }
.hub-link-language { display: inline-block; font-size: .72em; opacity: .75; }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1.45fr) minmax(12rem, 1fr); }
  .offer-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .wrap { width: calc(100% - 2rem); }
  .header-inner { flex-wrap: wrap; }
  .hero, .brief { grid-template-columns: 1fr; gap: 1.25rem; }
  .journey-row { grid-template-columns: 1.55rem minmax(0, 1fr); gap: .75rem; }
  .journey-row .actions { grid-column: 2; }
}
@media (max-width: 420px) {
  nav { gap: .35rem .8rem; }
  nav a { font-size: .78rem; }
  .offer-grid, .steps, .checks { grid-template-columns: 1fr; }
}