:root { color: #f8f4ed; background: #0e1521; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
main { max-width: 1160px; margin: auto; padding: 0 30px 88px; }
a { color: inherit; text-decoration: none; }
nav { min-height: 84px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #efb45b; color: #0e1521; font-size: 12px; }
.nav-links { display: flex; align-items: center; gap: 26px; color: #aeb6c3; font-size: 14px; }
.nav-links a:hover { color: #fff; }
.nav-cta, .button { border-radius: 999px; padding: 13px 18px; font-weight: 800; }
.nav-cta { background: #efb45b; color: #0e1521; }
.hero { max-width: 1000px; padding: 112px 0 90px; }
.eyebrow { margin: 0 0 17px; color: #efb45b; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 1000px; margin: 0 0 26px; font-size: clamp(48px, 7.2vw, 86px); line-height: .95; letter-spacing: -.075em; }
h2 { max-width: 850px; margin: 0 0 18px; font-size: clamp(33px, 4.3vw, 55px); line-height: 1; letter-spacing: -.06em; }
h3 { margin: 8px 0 10px; font-size: 21px; letter-spacing: -.035em; }
.lead { max-width: 770px; margin: 0; color: #cbd0d8; font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; gap: 9px; }
.primary { background: #efb45b; color: #0e1521; }.primary:hover { background: #ffd185; }.secondary { border: 1px solid #536074; color: #f8f4ed; }.secondary:hover { border-color: #efb45b; }
.note { margin-top: 15px; color: #8f9aaa; font-size: 13px; }
.signal { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 30px; padding: 20px 24px; border: 1px solid #354155; border-radius: 15px; background: linear-gradient(100deg, #172338, #141c2b); }
.signal-label { display: flex; align-items: center; gap: 9px; color: #bec8d5; font-size: 13px; font-weight: 800; }.signal-dot { width: 8px; height: 8px; border-radius: 50%; background: #72d19d; box-shadow: 0 0 0 5px #72d19d1c; }
.signal-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #efb45b; font-size: 14px; }.signal-flow span { color: #6e7d91; font-size: 20px; }
.problem, .steps, .first-project, .principles, .fit { padding-top: 92px; margin-top: 12px; border-top: 1px solid #2d394b; }.problem { padding-bottom: 91px; }
.problem-grid, .principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 34px; }.problem-grid article, .principle-grid article { min-height: 174px; padding: 24px; border: 1px solid #354155; border-radius: 15px; background: #151f30; }.problem-grid b, .principle-grid b { font-size: 18px; }.problem-grid p, .principle-grid p { margin: 17px 0 0; color: #afb9c8; line-height: 1.55; }
.steps { padding-bottom: 92px; }.section-heading { margin-bottom: 32px; }.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.step-grid article { min-height: 220px; padding: 23px; border: 1px solid #354155; border-radius: 15px; background: #111a29; }.step-grid span { color: #efb45b; font-size: 12px; font-weight: 900; letter-spacing: .1em; }.step-grid p { margin: 0; color: #adb7c6; font-size: 14px; line-height: 1.55; }
.first-project { padding-bottom: 93px; }.section-lead { max-width: 720px; margin: 0; color: #b8c1ce; font-size: 18px; line-height: 1.55; }.project-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }.project-panel { padding: 16px; border: 1px solid #3a4960; border-radius: 19px; background: #17253a; box-shadow: 0 28px 70px #050a1270; }.panel-top { display: flex; align-items: center; gap: 7px; padding-bottom: 15px; border-bottom: 1px solid #344259; }.panel-dot { width: 8px; height: 8px; border-radius: 50%; background: #536176; }.panel-dot.active { background: #efb45b; }.panel-top small { margin-left: auto; color: #8998ac; font-size: 11px; }.mock-content { padding: 31px 25px 22px; }.mock-kicker { color: #efb45b; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.mock-title { width: 82%; height: 33px; margin: 16px 0 12px; border-radius: 6px; background: #f8f4ed; opacity: .9; }.mock-line { width: 95%; height: 8px; margin: 9px 0; border-radius: 4px; background: #687991; }.mock-line.short { width: 60%; }.mock-button { width: 120px; height: 27px; margin-top: 24px; border-radius: 999px; background: #efb45b; }.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 26px; }.mock-cards i { display: block; height: 48px; border: 1px solid #3d4d64; border-radius: 8px; background: #1c2b41; }.project-list { display: grid; gap: 16px; }.project-list > div { display: flex; gap: 13px; align-items: flex-start; }.project-list > div > span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; color: #0e1521; background: #72d19d; font-size: 12px; font-weight: 900; }.project-list p { margin: 0; color: #aeb8c6; line-height: 1.45; }.project-list b { color: #f8f4ed; }
.principles { padding-bottom: 92px; }.fit { padding-bottom: 40px; }.fit > p:not(.eyebrow) { max-width: 720px; margin: 0 0 25px; color: #b8c1ce; font-size: 18px; line-height: 1.55; }footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 29px; border-top: 1px solid #2d394b; color: #8895a7; font-size: 13px; }
@media (max-width: 850px) { .step-grid { grid-template-columns: repeat(2, 1fr); }.project-grid { grid-template-columns: 1fr; gap: 30px; }.project-panel { max-width: 650px; }.signal { grid-template-columns: 1fr; gap: 15px; }.signal-flow { justify-content: flex-start; gap: 15px; } }
@media (max-width: 650px) { main { padding: 0 20px 60px; } nav { min-height: 72px; }.nav-links { gap: 12px; }.nav-links > a:not(.nav-cta) { display: none; }.nav-cta { padding: 10px 13px; font-size: 12px; }.hero { padding: 74px 0 68px; }h1 { font-size: 50px; }.lead { font-size: 18px; }.problem, .steps, .first-project, .principles, .fit { padding-top: 66px; }.problem-grid, .principle-grid, .step-grid { grid-template-columns: 1fr; }.problem-grid article { min-height: auto; }.signal { padding: 18px; }.signal-flow { flex-wrap: wrap; }.signal-flow span { font-size: 16px; }.mock-content { padding: 25px 16px 16px; }footer { display: block; }footer span { display: block; margin-bottom: 9px; } }