/* devero.hr holding page - colours, type and components from the Devero brand guide v0.1 */
@font-face { font-family: "Space Grotesk"; src: url(fonts/space-grotesk.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --dv-ink: #0E1726;
  --dv-paper: #F8F8F5;
  --dv-purple: #5B2BC4;
  --dv-purple-light: #A992FF;
  --dv-signal: #FF6A3D;
  --dv-mist: #98A0AE;
  --dv-font-display: "Space Grotesk", system-ui, sans-serif;
  --dv-font-text: "Inter", system-ui, sans-serif;
  --dv-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --dv-radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--dv-ink); color: var(--dv-paper); font: 400 17px/1.6 var(--dv-font-text); -webkit-font-smoothing: antialiased; }
h1, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--dv-purple-light); }
:focus-visible { outline: 2px solid var(--dv-purple-light); outline-offset: 4px; border-radius: 4px; }

/* the brand's purple rule along the bottom, as on the share image */
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; border-bottom: 8px solid var(--dv-purple); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.label { display: block; font: 500 12px/1.4 var(--dv-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dv-mist); }

.top { display: flex; align-items: center; justify-content: space-between; height: 84px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.top img { height: 30px; width: auto; }

.hero { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 80px; }
.hero .dot { color: var(--dv-signal); margin-right: 6px; }
.hero h1 { font: 600 clamp(40px, 5.6vw, 68px)/1.1 var(--dv-font-display); letter-spacing: -0.02em; margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--dv-purple-light); }
.lead { color: var(--dv-mist); margin-top: 24px; font-size: 19px; max-width: 540px; }
.mail { display: inline-block; margin-top: 36px; font: 600 clamp(26px, 3vw, 34px)/1.2 var(--dv-font-display); letter-spacing: -0.01em; color: var(--dv-paper); text-decoration: underline; text-decoration-color: var(--dv-purple-light); text-decoration-thickness: 2px; text-underline-offset: 8px; transition: color .15s; }
.mail:hover { color: var(--dv-purple-light); }
.en { color: var(--dv-mist); font-size: 15px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); max-width: 540px; }

.term { background: #0A111D; border-radius: var(--dv-radius); padding: 22px 24px; font: 400 14px/2 var(--dv-font-mono); color: var(--dv-mist); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.term .row { display: grid; grid-template-columns: 20px 13ch minmax(0, 1fr); column-gap: 8px; }
.term .ok { color: var(--dv-purple-light); }
.term .wip { color: var(--dv-signal); }
.term .w { color: var(--dv-paper); }
.cursor { display: inline-block; width: 9px; height: 17px; background: var(--dv-signal); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,0.08); color: var(--dv-mist); font-size: 14px; }
.foot a { color: var(--dv-paper); text-decoration: none; }
.foot a:hover { color: var(--dv-purple-light); }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
  .term { max-width: 520px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .top { height: 72px; }
  .top img { height: 26px; }
  .hero { padding-top: 48px; padding-bottom: 48px; }
  .lead { font-size: 17px; }
  .term { font-size: 12.5px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}