/* ValiAd: lokalne pisave in ločeni vizualni elementi. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.woff2") format("woff2"), url("assets/fonts/Inter-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-SemiBold.woff2") format("woff2"), url("assets/fonts/Inter-SemiBold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --navy: #0A1230;
  --blue: #2F6BFF;
  --light-blue: #6EC1FF;
  --cyan: #00C8FF;
  --white: #FFFFFF;
  --device-stage-height: clamp(350px, 29vw, 460px);
  font-family: "Inter", Arial, sans-serif;
  font-synthesis: none;
  font-feature-settings: "liga" 1, "calt" 1;
}
* { box-sizing: border-box; }
html { min-width: 280px; background: var(--navy); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--white);
  background-color: var(--navy);
  background-image: url("assets/valiad-ozadje.png");
  background-image: image-set(url("assets/valiad-ozadje.webp") type("image/webp"), url("assets/valiad-ozadje.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
}
.landing {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding: clamp(32px, 3vw, 52px) clamp(20px, 4vw, 64px) 34px;
}
.intro { text-align: center; }
.brand-logo {
  position: relative;
  width: clamp(250px, 24vw, 350px);
  aspect-ratio: 1626 / 472;
  margin-inline: auto;
  overflow: hidden;
}
/* Izvirni PNG ostane nespremenjen. Okvir skrije samo prosojne robove. */
.brand-logo img {
  position: absolute;
  display: block;
  width: 125.95326%;
  height: auto;
  max-width: none;
  left: -12.97663%;
  top: -103.38983%;
}
.tagline {
  display: table;
  position: relative;
  margin: 12px auto 0;
  padding-bottom: 9px;
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.tagline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 10px rgba(0, 200, 255, .65);
}
h1 {
  margin: 19px auto 0;
  font-size: clamp(32px, 3.3vw, 58px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.046em;
  text-wrap: balance;
}
.development-notice { margin-top: 21px; }
.development-title, .development-detail {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.025em;
}
.development-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.development-detail { margin-top: 2px; }
.status-dot {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan), 0 0 18px rgba(0, 200, 255, .42);
}
.audiences {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 10px;
  margin-top: 12px;
}
.audience { position: relative; min-width: 0; text-align: center; }
.device-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--device-stage-height);
}
.device-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 1%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 168, 255, .34), transparent 70%);
  filter: blur(11px);
}
.device-picture { position: relative; z-index: 1; display: block; }
.phone-picture { height: 100%; }
.laptop-picture { width: min(100%, 790px); height: 100%; }
.device { display: block; max-width: 100%; }
.phone { width: auto; height: 100%; object-fit: contain; }
.laptop { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.audience-caption {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  width: 100%;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 8, 28, .9);
}
.audience-label {
  margin: 0 0 7px;
  padding-left: .24em;
  color: var(--cyan);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .24em;
  text-align: center;
}
.audience-caption h2 {
  margin: 0;
  font-size: clamp(23px, 1.85vw, 30px);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.038em;
  text-align: center;
}
.audience-caption h2 span { display: block; }

@media (max-width: 959px) {
  body {
    background-image: radial-gradient(ellipse at 50% 2%, rgba(21, 78, 186, .18), transparent 35%);
    background-position: center top;
  }
  .landing {
    max-width: 760px;
    padding: 40px max(20px, env(safe-area-inset-left)) max(26px, env(safe-area-inset-bottom));
  }
  .brand-logo { width: clamp(208px, 53vw, 290px); }
  .tagline { margin-top: 10px; font-size: clamp(19px, 4.7vw, 25px); }
  h1 { margin-top: 20px; font-size: clamp(25px, 7.8vw, 42px); line-height: 1.14; }
  h1 span { display: block; }
  .development-notice { margin: 20px auto 0; max-width: 520px; }
  .development-title, .development-detail { font-size: clamp(14px, 3.8vw, 19px); line-height: 1.4; }
  .development-title { gap: 8px; }
  .status-dot { flex-basis: 9px; width: 9px; height: 9px; }
  .development-detail { max-width: 31em; margin: 5px auto 0; text-wrap: balance; }
  .audiences { grid-template-columns: 1fr; margin-top: 26px; gap: 39px; }
  .audience { isolation: isolate; }
  .audience::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: clamp(220px, 65vw, 440px);
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
    background: url("assets/valiad-ozadje.webp") center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 40%, #000 78%, transparent);
    mask-image: linear-gradient(transparent, #000 40%, #000 78%, transparent);
  }
  .audience-user .device-stage { height: clamp(285px, 87vw, 430px); }
  .audience-advertiser .device-stage { height: clamp(186px, 59vw, 420px); }
  .laptop-picture { width: 100%; }
  .audience-caption { margin-top: 12px; }
  .audience-label { font-size: clamp(11px, 3.2vw, 15px); margin-bottom: 8px; letter-spacing: .22em; }
  .audience-caption h2 { font-size: clamp(22px, 6.3vw, 31px); line-height: 1.16; }
}

@media (max-width: 359px) {
  .landing { padding-inline: 16px; padding-top: 32px; }
  h1 { font-size: 25px; }
  .development-title, .development-detail { font-size: 13px; }
  .audience-caption h2 { font-size: 22px; }
}