/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v44-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/open-sans-v44-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v44-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/open-sans-v44-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ---------- Design Tokens ---------- */
:root{
  --bg: #0c2a36;  
  --bg-2: #0a2230;
  --teal: #18b3a8; 
  --teal-700:#0f8f87;
  --text: #e9f1f4;
  --muted: #a9c0c7;
  --white: #ffffff;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color: var(--text);
  background: linear-gradient(120deg, var(--bg), var(--bg-2));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.75rem 1rem; background:#000; color:#fff; border-radius:.375rem; z-index:9999; }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns: 1fr;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,42,54,.98) 0%, rgba(12,42,54,.95) 48%, rgba(12,42,54,.6) 68%, rgba(12,42,54,.2) 100%),
    url('assets/images/hero.jpg') right center / cover no-repeat;
  z-index:-1;
  filter: saturate(.9) contrast(1.02);
}

/* Subtle 'S' badge shape using layered radial gradients for atmosphere */
.hero__bg::after{
  content:'';
  position:absolute;
  right:6vw; top:10vh;
  width:min(60vw, 820px);
  height:min(60vw, 820px);
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(24,179,168,.22) 0%, transparent 55%),
    radial-gradient(closest-side, rgba(24,179,168,.12) 0%, transparent 75%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

/* ---------- Brand ---------- */
.brand{
  display:flex; align-items:center; gap:1rem;
  padding: clamp(1rem, 2vw, 2rem);
  justify-content: center;
}
.brand img {
  width: 600px;
  display: inline !important;
  text-align: center;
}

/* ---------- Content ---------- */
.hero__content{
  max-width: min(1100px, 92vw);
  margin: clamp(0rem, 6vh, 3rem) auto;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.hero__headline{
  font-weight:700;
  line-height:1.15;
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  margin: 0 0 clamp(1.2rem, 2.5vh, 2rem);
  text-wrap: balance;
  text-align: center;
}
.hero__headline .accent{ color: var(--teal); }

/* ---------- Countdown ---------- */
.countdown{
  display:grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: clamp(.75rem, 1.2vw, 1.25rem);
  margin: 40px 0px;
}
.countdown__cell{ text-align:center; }
.countdown__value{
  display:block;
  font-weight:800;
  font-size: clamp(2.6rem, 7.2vw, 6.5rem);
  line-height:1;
  letter-spacing: .02em;
  color: transparent; /* see stroke below – matches PDF Outline-Ziffern */
  -webkit-text-stroke: max(1px, .14rem) var(--teal);
  text-shadow:
    0 0 12px rgba(24,179,168,.1),
    0 0 36px rgba(24,179,168,.01);
}
.countdown__label{
  display:block;
  margin-top:.45rem;
  font-weight:500;
  letter-spacing:.06em;
  color: #fff;
}

/* ---------- Lead text ---------- */
.lead{
  color: #fff;
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  max-width: 100%;
  text-align: center;
}
.lead .teal{ color: var(--teal); }


.lead2, .lead3{
  color: #fff;
  font-size: 0.9em;
  font-weight: 300;
  max-width: 100%;
  text-align: center;
  margin-top: 50px;
}
.lead2 .teal, .lead3 .teal{ color: var(--teal); }

/* ---------- Contact bar (right) ---------- */
.contact-bar{
  position: fixed;
  right: clamp(.5rem, 1.2vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
}
.contact-bar ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.contact-bar__btn{
  position:relative;
  display:grid; place-items:center;
  width: 54px; height: 54px;
  background: var(--teal);
  color: #07333a;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .18s ease, filter .18s ease;
}
.contact-bar__btn:hover{ transform: translateY(-2px) scale(1.02); filter: brightness(2.08); }
.contact-bar__badge{
  position:absolute; bottom:-.4rem; right:-.4rem;
  width: 28px; height: 28px;
  display:grid; place-items:center;
  background:#0a2230; color: var(--teal);
  font-weight:800; font-size:.9rem; border-radius: 999px;
  border: 2px solid var(--teal);
}

.mob {display: none;}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 940px){
  .hero__headline{ font-size: clamp(2rem, 6.2vw, 3rem); }
  .countdown{ grid-template-columns: repeat(4, minmax(70px,1fr)); }
}
@media (max-width: 720px){
  .brand{ padding: 1rem; }
  .brand img {width: 300px;}
  .contact-bar{ position: static; transform:none; margin: 2rem auto 1rem; }
  .contact-bar ul{ grid-auto-flow:column; justify-content:center; gap:1rem; }
  .contact-bar__btn{ width:72px; height:72px; }
  .hero__content{ margin-top: clamp(.5rem, 2vh, 1rem); text-align:center; }
  .lead{ margin-inline:auto; }
  .hero__bg{ background-position: 70% center; }
  .mob {display: inline-block !important;}
  .lead2 {display: none;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .contact-bar__btn{ transition: none; }
  .countdown__value{ text-shadow: none; }
}