:root {
  --ink: #172121;
  --muted: #64716e;
  --paper: #f4f0e8;
  --panel: #ebe6db;
  --acid: #d6f05f;
  --orange: #ec754e;
  --line: rgba(23, 33, 33, .18);
  --display: "Space Grotesk", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); }
a { color: inherit; text-decoration: none; }
.section-shell { max-width: 1240px; margin: 0 auto; padding-left: 5vw; padding-right: 5vw; }
.site-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1440px; padding: 24px 5vw; }
.brand { align-items: center; display: flex; font-size: .78rem; font-weight: 700; gap: 10px; letter-spacing: .08em; }
.brand-mark { align-items: center; background: var(--ink); color: var(--acid); display: inline-flex; font-size: 1rem; height: 30px; justify-content: center; width: 30px; }
nav { align-items: center; display: flex; font-size: .78rem; gap: 28px; }
nav a:not(.nav-cta), .text-link { color: var(--muted); }
.nav-cta { border: 1px solid var(--ink); padding: 10px 14px; }
.hero { display: grid; gap: 5vw; grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr); min-height: 680px; padding-bottom: 80px; padding-top: 72px; }
.hero-copy { align-self: center; max-width: 650px; }
.eyebrow, .offer-tag { color: var(--orange); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; margin: 0 0 22px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.2rem, 6.5vw, 6.7rem); letter-spacing: -.055em; line-height: .94; margin-bottom: 28px; max-width: 720px; }
h2 { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.045em; line-height: .98; margin-bottom: 44px; max-width: 600px; }
h3 { font-size: 1.35rem; letter-spacing: -.025em; margin-bottom: 14px; }
.hero-text { color: var(--muted); font-size: 1.08rem; line-height: 1.55; max-width: 480px; }
.hero-actions { align-items: center; display: flex; gap: 24px; margin-top: 38px; }
.button { border: 0; cursor: pointer; display: inline-flex; font-family: var(--display); font-size: .8rem; font-weight: 600; gap: 18px; justify-content: space-between; padding: 16px 19px; }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: var(--orange); color: var(--ink); }
.text-link, .arrow-link { font-size: .78rem; font-weight: 600; }
.hero-stats { border-top: 1px solid var(--line); display: flex; gap: 34px; margin-top: 74px; max-width: 560px; padding-top: 16px; }
.hero-stats div { display: grid; gap: 6px; }
dt { font-size: .76rem; font-weight: 700; } dd { color: var(--muted); font-family: var(--mono); font-size: .58rem; margin: 0; text-transform: uppercase; }
.motor-visual { align-self: center; aspect-ratio: 1; background: var(--ink); overflow: hidden; position: relative; transform: rotate(5deg); }
.motor-visual::before { background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(214,240,95,.13) 12px 13px), repeating-linear-gradient(0deg, transparent 0 11px, rgba(214,240,95,.13) 12px 13px); content: ""; inset: 0; opacity: .5; position: absolute; }
.ring, .stator { border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ring { border: 1px solid var(--orange); height: 77%; width: 77%; }
.ring-back { border-color: rgba(236,117,78,.45); height: 90%; width: 90%; }
.ring-mid { border-color: var(--acid); height: 67%; width: 67%; }
.stator { background: var(--acid); height: 49%; width: 49%; }
.stator span { background: var(--ink); height: 21%; left: 45%; position: absolute; top: 1%; transform-origin: 50% 117%; width: 10%; }
.stator span:nth-child(2) { transform: rotate(30deg); } .stator span:nth-child(3) { transform: rotate(60deg); } .stator span:nth-child(4) { transform: rotate(90deg); } .stator span:nth-child(5) { transform: rotate(120deg); } .stator span:nth-child(6) { transform: rotate(150deg); } .stator span:nth-child(7) { transform: rotate(180deg); } .stator span:nth-child(8) { transform: rotate(210deg); } .stator span:nth-child(9) { transform: rotate(240deg); } .stator span:nth-child(10) { transform: rotate(270deg); } .stator span:nth-child(11) { transform: rotate(300deg); } .stator span:nth-child(12) { transform: rotate(330deg); }
.hub { background: var(--orange); border: 8px solid var(--ink); border-radius: 50%; height: 15%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 15%; }
.visual-label { bottom: 24px; color: var(--acid); font-family: var(--mono); font-size: .7rem; left: 24px; line-height: 1.5; position: absolute; } .visual-label span { color: var(--orange); font-size: .55rem; }
.band { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding-bottom: 100px; padding-top: 100px; }
.section-heading { display: flex; justify-content: space-between; }
.steps { display: grid; gap: 25px; grid-template-columns: repeat(3, 1fr); }
.steps article { border-top: 3px solid var(--ink); padding-top: 18px; }
.step-number { color: var(--orange); font-family: var(--mono); font-size: .7rem; }
.steps p, .offer p, .brief-intro p { color: var(--muted); font-size: .92rem; line-height: 1.55; max-width: 340px; }
.offers { padding-bottom: 120px; padding-top: 120px; }
.offer-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.offer { background: var(--panel); display: flex; flex-direction: column; min-height: 390px; padding: 28px; }
.offer.featured { background: var(--acid); }
.offer-tag { color: var(--muted); margin-bottom: 62px; } .featured .offer-tag { color: var(--orange); }
.offer-meta { border-top: 1px solid var(--line); display: flex; font-family: var(--mono); font-size: .58rem; gap: 20px; margin-top: auto; padding: 13px 0 18px; text-transform: uppercase; }
.arrow-link { border-top: 1px solid var(--ink); padding-top: 13px; }
.calculator-section { background: var(--ink); color: var(--paper); padding-bottom: 100px; padding-top: 100px; }
.calculator-section .eyebrow { color: var(--acid); }
.calculator-section h2 { color: var(--paper); }
.calculator-grid { display: grid; gap: 10vw; grid-template-columns: 1fr 1fr; }
.calculator-form { display: grid; gap: 22px; }
.calculator-form label { color: var(--paper); }
.calculator-form input { border-color: rgba(244,240,232,.45); color: var(--paper); }
.calculator-form input:focus { border-color: var(--acid); }
.calculator-form .button-primary { background: var(--acid); color: var(--ink); justify-self: start; }
.calculator-form .button-primary:hover { background: var(--orange); }
.calculator-form .mono-note { color: rgba(244,240,232,.62); font-family: var(--mono); font-size: .62rem; line-height: 1.6; margin: 0; max-width: 430px; text-transform: uppercase; }
.calculator-results { align-self: end; border-top: 1px solid rgba(244,240,232,.4); }
.calculator-results > div { align-items: baseline; border-bottom: 1px solid rgba(244,240,232,.22); display: flex; justify-content: space-between; padding: 18px 0; }
.calculator-results span { color: rgba(244,240,232,.68); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.calculator-results strong { color: var(--acid); font-size: 1.5rem; }
.calculator-status { color: var(--orange); font-family: var(--mono); font-size: .65rem; margin: 22px 0 0; }
.brief-section { background: var(--orange); display: grid; gap: 10vw; grid-template-columns: .8fr 1.2fr; padding-bottom: 100px; padding-top: 100px; }
.brief-intro h2 { max-width: 440px; } .brief-intro p { color: var(--ink); } .brief-intro .mono-note { font-family: var(--mono); font-size: .62rem; margin-top: 46px; text-transform: uppercase; }
.project-form { display: grid; gap: 18px; } label { display: grid; font-size: .7rem; font-weight: 600; gap: 8px; } input, select, textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(23,33,33,.5); border-radius: 0; color: var(--ink); font: 400 .92rem var(--display); outline: none; padding: 11px 0; width: 100%; } select { cursor: pointer; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--ink); }
.form-row { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; } .project-form .button { justify-self: start; margin-top: 16px; } .form-status { font-family: var(--mono); font-size: .68rem; margin: 0; }
.site-footer { display: flex; font-family: var(--mono); font-size: .6rem; justify-content: space-between; padding-bottom: 25px; padding-top: 25px; text-transform: uppercase; }
.language-list { display: inline-flex; gap: 8px; margin-left: 14px; }
.language-list a { color: var(--muted); }
.language-list a:hover, .language-list .language-active { color: var(--orange); }
@media (max-width: 760px) { .site-header { align-items: flex-start; } nav { gap: 12px; } nav a:not(.nav-cta) { display: none; } .hero { display: flex; flex-direction: column; min-height: auto; padding-bottom: 60px; padding-top: 50px; } h1 { font-size: clamp(3rem, 15vw, 5rem); } .motor-visual { margin: 12px auto 0; max-width: 420px; width: 100%; } .hero-stats { gap: 16px; justify-content: space-between; } .section-heading { display: block; } .band, .offers, .calculator-section { padding-bottom: 75px; padding-top: 75px; } .steps, .offer-grid, .calculator-grid, .brief-section { grid-template-columns: 1fr; } .steps { gap: 40px; } .offer { min-height: 320px; } .offer-tag { margin-bottom: 42px; } .brief-section { gap: 48px; } .form-row { grid-template-columns: 1fr; } .calculator-results { margin-top: 20px; } .site-footer { gap: 15px; line-height: 1.5; } }