:root{
  /* палитра Tropical Premium */
  --tq:#11B4AE;        /* бирюза */
  --gold:#E9CFAF;      /* песочное золото */
  --ink:#ffffff;
  --ink-weak:rgba(255,255,255,.82);

  /* лого-токены */
  --accent1:#11B4AE; --accent2:#E9CFAF; --accent3:#FFFFFF;
  --glow-alpha: .45;  --glow-size: 22px;
  --anim-speed: 6s;   --pulse-speed: 2.2s;
}
.theme-light{ --glow-alpha:.35; --glow-size:18px }

*{ box-sizing:border-box; }
.screen{
  min-height:100svh;
  color:var(--ink);
  background: radial-gradient(130% 100% at 50% 0%, #0c121a 0%, #0a0f16 60%, #070c12 100%);
  position:relative; overflow-x:hidden; padding-bottom:84px;
}

/* SPLASH */
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(7,12,17,.92);z-index:999;transition:.4s}
.splash--hide{opacity:0;visibility:hidden;transition:opacity .35s, visibility 0s .35s}

/* LOGO (CSS-only glow+gradient) */
.logo{ display:inline-block; }
.logo-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "SF Pro", Arial, sans-serif;
  font-weight:900; letter-spacing:1.4px; white-space:nowrap;
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3),var(--accent1));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradientMove var(--anim-speed) linear infinite, glowPulse var(--pulse-speed) ease-in-out infinite;
  text-shadow:
     0 0 var(--glow-size) rgba(17,180,174,var(--glow-alpha)),
     0 0 calc(var(--glow-size)*.7) rgba(233,207,175,calc(var(--glow-alpha)*.7));
}
.logo[data-state="intro"]{ animation: introLogo .4s cubic-bezier(.2,.7,.3,1) both }
.logo.mini .logo-text{ font-size: clamp(18px, 6.2vw, 28px) }
.splash .logo .logo-text{ font-size: clamp(42px, 10vw, 88px) }

@keyframes gradientMove{0%{background-position:0 50%}100%{background-position:100% 50%}}
@keyframes glowPulse{
  0%,100%{ text-shadow:0 0 var(--glow-size) rgba(17,180,174,var(--glow-alpha)),0 0 calc(var(--glow-size)*.7) rgba(233,207,175,calc(var(--glow-alpha)*.7)) }
  50%{     text-shadow:0 0 calc(var(--glow-size)*1.25) rgba(17,180,174,calc(var(--glow-alpha)*1.25)),0 0 calc(var(--glow-size)*.9) rgba(233,207,175,calc(var(--glow-alpha)*.9)) }
}
@keyframes introLogo{ from{opacity:0; transform:scale(.97)} 60%{transform:scale(1.035)} to{opacity:1; transform:scale(1)} }

/* HERO */
.hero{ position:relative; border-radius:18px; overflow:hidden; margin:14px; box-shadow:0 10px 34px rgba(0,0,0,.45) }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02) }
.hero__bar{
  position:absolute; inset:12px 12px auto 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; z-index:2
}
.tagline{ position:absolute; left:14px; right:14px; bottom:42px; margin:0; font-weight:900; font-size:clamp(18px,3.8vw,22px); text-shadow:0 2px 14px rgba(0,0,0,.45) }
.subtag{ position:absolute; left:14px; bottom:18px; margin:0; color:var(--ink-weak); font-weight:600; font-size:13px; text-shadow:0 1px 10px rgba(0,0,0,.35) }
.chips{ position:absolute; top:12px; right:12px; display:flex; gap:6px; z-index:2 }
.chip{
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px) saturate(1.06); box-shadow:0 10px 22px rgba(0,0,0,.28)
}

/* прозрачный микротумблер */
.theme-toggle{
  width:34px; height:20px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:radial-gradient(8px 8px at 10px 50%, rgba(255,255,255,.85), rgba(255,255,255,.35)) rgba(255,255,255,.06);
  backdrop-filter: blur(6px) saturate(1.1); cursor:pointer; transition:.25s; opacity:.55
}
.theme-toggle:hover{opacity:.85}
.theme-light .theme-toggle{ background:radial-gradient(8px 8px at 24px 50%, rgba(0,0,0,.6), rgba(0,0,0,.35)) rgba(0,0,0,.06) }

/* волна-переход */
.wave{
  position:absolute; left:0; right:0; bottom:-1px; height:80px; z-index:1;
  background:
    radial-gradient(90px 22px at 20% 0, rgba(7,12,18,0) 60%, rgba(7,12,18,.95) 61%) bottom left / 50% 100% no-repeat,
    radial-gradient(90px 22px at 80% 0, rgba(7,12,18,0) 60%, rgba(7,12,18,.95) 61%) bottom right/ 50% 100% no-repeat;
}

/* МЕНЮ */
.menu{ position:relative; z-index:2; margin:10px 14px 0; display:grid; gap:10px }
.card{
  padding:16px; border-radius:16px; font-weight:900; text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  color:#fff; cursor:pointer; transition:transform .14s, box-shadow .2s
}
.card:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.4) }
.card:active{ transform:translateY(1px) scale(.99) }

/* FAB */
.fab{
  position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  height:50px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2ad371,#1e9f5a); color:#fff; font-weight:900; text-decoration:none;
  border-radius:999px; box-shadow:0 14px 28px rgba(0,0,0,.35); z-index:3
}

/* адаптив */
@media (max-width:380px){
  .hero{ border-radius:14px }
  .tagline{ bottom:48px }
  .chips{ right:8px }
}
/* === HOTFIX: вернуть высоту hero и сгладить переход === */
.hero{
  /* если есть aspect-ratio — используем его, иначе фикс-диапазон */
  height: clamp(200px, 36svh, 260px);
}
@supports (aspect-ratio: 16 / 9){
  .hero{ aspect-ratio: 16 / 9; height:auto; }
}
/* картинка точно занимает фон */
.hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }

/* волна и фон под меню — мягче и выше, чтобы стык был «дорогим» */
.wave{
  height: 92px;
  background:
    radial-gradient(120px 26px at 15% 0, rgba(7,12,18,0) 62%, rgba(7,12,18,.96) 63%) bottom left / 50% 100% no-repeat,
    radial-gradient(120px 26px at 85% 0, rgba(7,12,18,0) 62%, rgba(7,12,18,.96) 63%) bottom right/ 50% 100% no-repeat,
    linear-gradient(to bottom, rgba(7,12,18,.0) 0%, rgba(7,12,18,.96) 85%, rgba(7,12,18,1) 100%);
}

/* карточки — чуть контраста и «глубины» */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 32px rgba(0,0,0,.42);
}
.card:hover{ box-shadow: 0 18px 36px rgba(0,0,0,.46) }

/* небольшой отступ меню от волны */
.menu{ margin-top: 8px; }

/* тумблер темы — ещё незаметнее */
.theme-toggle{ opacity:.45 }
/* === HERO: плавное появление === */
@keyframes fadeSlide {
  from {opacity:0; transform:translateY(14px);}
  to   {opacity:1; transform:translateY(0);}
}
.tagline, .subtag, .chips { animation: fadeSlide .6s ease-out both; }
.chips { animation-delay: .15s; }

/* === Карточки: премиум-анимация при наведении === */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 18px 34px rgba(0,0,0,.48);
}
/* === v0.3 LAYOUT GUARDS FOR HERO =============================== */
:root{ --safe-top: env(safe-area-inset-top,0px); }

/* Контейнер hero — строгая сцена */
.hero{
  position: relative;
  height: clamp(220px, 38svh, 290px);
  padding: calc(10px + var(--safe-top)) 12px 56px;
  overflow: hidden;
}

/* Фон и картинка — под всем */
.hero__bg,
.hero__bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  z-index: 0;
}

/* Мягкая дымка снизу — чтобы переход в меню был «дорогим» */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:84px;
  background: linear-gradient(to bottom,
              rgba(0,0,0,0) 0%,
              rgba(6,10,14,.86) 72%,
              rgba(6,10,14,1) 100%);
  z-index: 1;
}

/* Логотип — всегда вверху слева, не больше 42% ширины */
.hero-logo{
  position:absolute; top:12px; left:12px;
  max-width:42%; height:auto; z-index:3;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* Мини-тумблер темы — совсем деликатный, под пальцем, но не мешает */
.theme-toggle{
  position:absolute; top:12px; right:12px;
  width:34px; height:22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:flex-start;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  opacity:.28; transition: opacity .2s ease, background .2s ease;
  z-index:3;
}
.theme-toggle:after{
  content:""; width:16px; height:16px; margin-left:3px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.theme-toggle.is-on{ background: rgba(255,255,255,.16); opacity:.36; }
.theme-toggle.is-on:after{ transform: translateX(12px); }

/* Бейджи/индикаторы (погода/курс) — компактно под тумблером */
.badges{
  position:absolute; top:44px; right:12px; z-index:3;
  display:flex; gap:6px; flex-wrap:wrap; max-width:52%;
}
.badges .chip{ padding:6px 9px; font-size:12px; }

/* Чипы-навигация — строка под логотипом, с горизонтальным скроллом */
.chips{
  position:absolute; left:12px; right:12px; top:58px;
  display:flex; gap:8px; overflow:auto; padding-bottom:6px; z-index:3;
  -ms-overflow-style:none; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }

/* Теглайн — у нижней кромки hero, над дымкой */
.hero-tagline{
  position:absolute; left:12px; right:12px; bottom:14px; margin:0; z-index:3;
  color: rgba(255,255,255,.97) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 0 24px rgba(255,200,80,.28);
  letter-spacing:.1px;
}

/* Меню под hero получает небольшой отступ и слой ниже */
.menu{ margin-top: 10px; position: relative; z-index: 0; }

/* Карточки — чуть больше глубины и ховер */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 32px rgba(0,0,0,.42);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 18px 36px rgba(0,0,0,.46);
}

/* Небольшие экраны — поджимаем размеры аккуратно */
@media (max-width: 380px){
  .hero{ padding: calc(8px + var(--safe-top)) 10px 54px; }
  .hero-logo{ max-width: 52%; }
  .chips{ top: 54px; gap:6px; }
}