:root {
  --bg-0: #ffffff;
  --bg-1: #f8fafc;
  --panel: #ffffff;
  --ink: #1b1f24;
  --muted: #5c6b80;
  --line: #e2e8f0;
  --primary: #ec4e20; /* startup energy: warm coral */
  --primary-2: #c63c13;
  --accent: #ff784f;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --font: 'Segoe UI', 'Inter', sans-serif;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-0);
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.hero {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}
.headline { font-size: 40px; font-weight: 600; margin: 0 0 0.5em; }
.sub { font-size: 18px; color: var(--muted); max-width: 740px; }

.btn { display: inline-block; padding: 0.7rem 1.2rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.btn-primary:hover { background: var(--primary-2); }
.btn[43dcd9a7-70db-4a1f-b0ae-981daa162054](https://github.com/AlexMercedCoder/tutorialblog/tree/f2de19c42c0c64fc23dd6c175549f755d40455f8/content%2Fblog%2F2020%2Fwebcomp1%2Findex.md?citationMarker=43dcd9a7-70db-4a1f-b0ae-981daa162054 "1")[43dcd9a7-70db-4a1f-b0ae-981daa162054](https://github.com/ownalazzam10/maxa/tree/7304dbc2bedef695f5164e97929e70eb894792f0/node_modules%2Fmini-css-extract-plugin%2FREADME.md?citationMarker=43dcd9a7-70db-4a1f-b0ae-981daa162054 "2")[43dcd9a7-70db-4a1f-b0ae-981daa162054](https://github.com/szerintedmi/roadmap-radar-chart/tree/45ee5f9f7a1d44100313358e369abb025b935cea/README.md?citationMarker=43dcd9a7-70db-4a1f-b0ae-981daa162054 "3")