@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/upos/roboto-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/upos/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --orange: #ea580c;
  --ink: #151515;
  --muted: #747480;
  --footer-muted: #737373;
  --footer-surface: #f7f6f4;
  --hairline: #e3dfda;
  --page-gutter: clamp(32px, 4.62vw, 88px);
  font-family: Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; }
img { display: block; max-width: 100%; }
p, h1, figure, dl, dd { margin: 0; }
.page-width { width: min(100% - 2 * var(--page-gutter), 1600px); margin-inline: auto; }

.site-header { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 38px; }
.wordmark { width: 205px; height: auto; transform: translateX(-4%); }
.domain { padding-top: 24px; color: var(--muted); font-size: 18px; font-weight: 600; letter-spacing: -.035em; }

.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: clamp(540px, 49vw, 748px); padding-block: 70px 36px; }
.hero-copy { position: relative; z-index: 1; }
h1 { font-weight: 850; letter-spacing: -.035em; line-height: 1.07; }
.headline-intro { display: block; font-size: clamp(49px, 5.35vw, 86px); white-space: nowrap; }
.headline-accent { display: block; color: var(--orange); font-size: clamp(76px, 7.05vw, 114px); line-height: .94; letter-spacing: -.055em; margin-top: 7px; }
.promise { margin-top: 41px; font-size: clamp(20px, 2vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; white-space: nowrap; }
.description { margin-top: 18px; color: var(--muted); font-size: clamp(18px, 1.68vw, 27px); line-height: 1.28; letter-spacing: -.035em; }
.coming-soon { display: flex; align-items: center; gap: 13px; margin-top: 47px; font-size: clamp(24px, 2.2vw, 35px); font-weight: 650; letter-spacing: -.05em; line-height: 1.25; }
.status-dot { width: .55em; height: .55em; flex: 0 0 auto; border-radius: 50%; background: var(--orange); }
.hero-media { min-width: 0; width: calc(100% + var(--page-gutter)); height: 100%; position: relative; overflow-x: clip; overflow-y: visible; pointer-events: none; }
/* The illustration has transparent breathing room around its full silhouette. */
.hero-media img { position: absolute; top: 50%; width: calc((100% - var(--page-gutter)) * 1.56); max-width: none; height: auto; margin-left: calc((100% - var(--page-gutter)) * -.27); transform: translateY(calc(-50% - 16px)); }

.site-footer { background: var(--footer-surface); border-top: 1px solid var(--hairline); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 134px; padding-block: 30px; position: relative; }
.footer-inner::before { content: ""; width: 69px; height: 4px; position: absolute; top: -2px; left: 0; background: var(--orange); }
.company { display: grid; gap: 6px; }
.footer-label, dt { color: var(--footer-muted); font-size: 15px; font-weight: 400; line-height: 1.25; }
.company strong { font-size: 21px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.legal-details { display: flex; gap: 58px; }
.legal-details > div { display: grid; gap: 6px; }
.legal-details > div + div { border-left: 1px solid var(--hairline); padding-left: 58px; }
dd { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.copyright { color: var(--footer-muted); font-size: 17px; font-weight: 400; line-height: 1.4; white-space: nowrap; letter-spacing: -.015em; }

@media (min-width: 1001px) and (max-width: 1270px) {
  .site-header { padding-top: 40px; }
  .wordmark { width: 170px; }
  .hero { min-height: 640px; }
  .footer-inner { gap: 20px; }
  .legal-details { gap: 24px; }
  .legal-details > div + div { padding-left: 24px; }
  .company strong, dd { font-size: 17px; }
  .copyright { font-size: 14px; }
}

@media (max-width: 1000px) {
  :root { --page-gutter: clamp(24px, 8.45vw, 80px); }
  .site-header { padding-top: clamp(24px, 6vw, 53px); align-items: flex-start; }
  .wordmark { width: clamp(120px, 27vw, 240px); }
  .domain { padding-top: 3px; font-size: clamp(14px, 3.1vw, 27px); }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding-block: clamp(36px, 8.5vw, 75px) 0; }
  h1 { font-weight: 850; line-height: 1; }
  .headline-intro { font-size: clamp(40px, 11.45vw, 102px); line-height: .94; white-space: normal; }
  .headline-accent { font-size: clamp(49px, 14.25vw, 127px); line-height: .9; margin-top: .06em; }
  .promise { white-space: normal; margin-top: clamp(25px, 4.85vw, 43px); font-size: clamp(19px, 4.25vw, 38px); line-height: 1.3; letter-spacing: -.03em; }
  .description { margin-top: clamp(14px, 3.2vw, 29px); font-size: clamp(17px, 3.95vw, 35px); line-height: 1.3; letter-spacing: -.035em; }
  .desktop-break { display: none; }
  .coming-soon { margin-top: clamp(24px, 3.7vw, 33px); gap: .45em; font-size: clamp(23px, 4.7vw, 42px); }
  .hero-media { overflow: hidden; width: calc(100% + 2 * var(--page-gutter)); height: auto; margin-left: calc(-1 * var(--page-gutter)); margin-top: -3.8vw; margin-bottom: -2.5vw; }
  .hero-media img { position: static; width: 120%; margin-left: -10%; transform: none; }
  .footer-inner { flex-direction: column; gap: 13px; min-height: 184px; padding-block: 19px 18px; text-align: center; }
  .footer-inner::before { width: 80px; left: 50%; transform: translateX(-50%); }
  .company { gap: 5px; }
  .footer-label, dt { font-size: clamp(12px, 1.8vw, 16px); }
  .company strong { font-size: clamp(15px, 2.25vw, 20px); }
  .legal-details { gap: 30px; }
  .legal-details > div { gap: 5px; }
  .legal-details > div + div { padding-left: 30px; }
  dd { font-size: clamp(15px, 2.25vw, 20px); }
  .copyright { font-size: clamp(12px, 1.8vw, 16px); }
}