:root {
  --bg: #05070d;
  --line: rgba(255,255,255,.10);
  --text: #e8edf5;
  --muted: #8a94a6;
  --green: #3dba85;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(58vw, 780px);
  aspect-ratio: 1;
  right: -16vw;
  top: 10vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,186,133,.11), rgba(61,186,133,.025) 38%, transparent 70%);
  filter: blur(12px);
  animation: ambient-drift 10s ease-in-out infinite alternate;
}
a { color: inherit; text-decoration: none; }

.site-header {
  width: min(calc(100% - 48px), var(--max));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  animation: fade-down .65s ease-out both;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 760; letter-spacing: -.03em; }
.brand img { display: block; object-fit: contain; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.language-switch { display: flex; align-items: center; gap: 7px; color: #586474; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.language-switch a { padding: 6px 2px; transition: color .2s ease; }
.language-switch a:hover { color: #c3cad2; }
.language-switch a.active { color: var(--text); }
.language-switch span { color: #384250; }
.web-link { color: var(--muted); font-size: 12px; font-weight: 700; transition: color .2s ease; }
.web-link:hover { color: var(--text); }

.hero {
  width: min(calc(100% - 48px), var(--max));
  min-height: calc(100vh - 160px);
  margin: 0 auto;
  padding: 52px 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .74fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: center;
}
.hero > *, .hero-copy, .device-stage { min-width: 0; }
.hero-copy { animation: copy-enter .8s cubic-bezier(.2,.75,.25,1) .08s both; }
.eyebrow {
  margin: 0 0 20px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}
h1, p { text-wrap: pretty; }
h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(48px, 5.5vw, 74px);
  line-height: 1;
  letter-spacing: -.058em;
  font-weight: 760;
}
h1 span { color: #a8b1bc; }
.lead {
  max-width: 580px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.availability {
  width: fit-content;
  margin-top: 36px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.availability:hover { transform: translateY(-2px); border-color: rgba(61,186,133,.30); background: rgba(61,186,133,.035); }
.availability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(61,186,133,.10);
  animation: status-pulse 2.8s ease-in-out infinite;
}
.availability > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.availability strong { font-size: 13px; }
.availability small { color: var(--muted); font-size: 10px; }

.device-stage {
  position: relative;
  width: min(100%, 470px);
  justify-self: end;
  isolation: isolate;
  animation: device-enter .95s cubic-bezier(.18,.78,.24,1) .14s both;
}
.device-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,186,133,.16), rgba(61,186,133,.035) 45%, transparent 72%);
  filter: blur(22px);
  animation: device-glow 6s ease-in-out infinite alternate;
}
.device-float { animation: phone-float 6s ease-in-out 1.2s infinite; }
.device-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 48px rgba(0,0,0,.32));
  user-select: none;
  -webkit-user-drag: none;
}

footer {
  width: min(calc(100% - 48px), var(--max));
  min-height: 84px;
  margin: 0 auto;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: #66717f;
  font-size: 10px;
}
footer nav { display: flex; gap: 20px; }
footer a { transition: color .2s ease; }
footer a:hover { color: #c3cad2; }

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes copy-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes device-enter {
  from { opacity: 0; transform: translate3d(44px,30px,0) scale(.96); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes phone-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-.35deg); }
}
@keyframes device-glow {
  from { opacity: .65; transform: translate(-50%,-50%) scale(.92); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes ambient-drift {
  from { transform: translate3d(0,-2%,0) scale(.96); opacity: .72; }
  to { transform: translate3d(-5%,4%,0) scale(1.06); opacity: 1; }
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(61,186,133,.10); }
  50% { box-shadow: 0 0 0 8px rgba(61,186,133,.035); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 58px; }
  .hero-copy { text-align: center; }
  .lead, .availability { margin-left: auto; margin-right: auto; }
  .device-stage { width: min(76vw, 390px); justify-self: center; }
}

@media (max-width: 560px) {
  .site-header, .hero, footer { width: min(calc(100% - 28px), var(--max)); }
  .site-header { height: 66px; }
  .brand { font-size: 14px; }
  .header-actions { gap: 14px; }
  .web-link { font-size: 10px; }
  .hero { min-height: auto; padding: 48px 0 58px; gap: 36px; }
  .hero-copy { text-align: left; }
  h1 { max-width: 100%; font-size: clamp(39px, 11.5vw, 49px); overflow-wrap: anywhere; }
  .lead { margin-left: 0; font-size: 15px; }
  .availability { margin-left: 0; }
  .device-stage { width: min(88vw, 350px); }
  footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 390px) {
  .web-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}