:root{
  --navy:#0b2b44;
  --navy2:#103a5c;
  --gold:#f0b429;
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#52606d;
  --shadow: 0 18px 50px rgba(2, 10, 25, .18);
  --softShadow: 0 14px 34px rgba(3, 15, 35, .12);
  --radius2: 22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.muted{color:var(--muted)}
.divider{height:1px;background: rgba(10,30,55,.08); margin:14px 0}



/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: .18s ease;
  white-space:nowrap;
}

.btn-gold{
  background: var(--gold);
  color:#132032;
  border-color: rgba(0,0,0,.08);
}
.btn-gold:hover{filter: brightness(.98)}

.btn-ghost{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,.28);
}
.btn-ghost:hover{background: rgba(255,255,255,.08)}

/* HERO */
.hero{
  position:relative;
  padding: 66px 0 42px;
  overflow:hidden;
  color:#fff;
  background: linear-gradient(180deg, var(--navy) 0%, #0a2a40 70%, #082236 100%);
}

.hero-bg{
  position:absolute;
  inset: -40px -40px auto -40px;
  height: 260px;
  background: radial-gradient(closest-side, rgba(240,180,41,.25), transparent 70%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:start;
}

.eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  opacity:.9;
  font-weight:800;
  color: rgba(255,255,255,.92);
}

.hero-title{
  margin: 10px 0 10px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}

.hero-lead{
  margin: 0 0 14px;
  font-size: 18px;
  opacity:.95;
  font-weight: 800;
}

.hero-copy p{color: rgba(255,255,255,.88); margin: 10px 0}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.hero-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.tag{
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

/* SECTIONS */
.section{padding: 44px 0 54px; background: transparent;}
.section-alt{
  padding: 56px 0 64px;
  background:
    radial-gradient(900px 320px at 10% -80px, rgba(240,180,41,.14), transparent 60%),
    radial-gradient(900px 320px at 90% 0%, rgba(11,43,68,.10), transparent 60%),
    linear-gradient(180deg, #f7fafc, #ffffff);
  border-top: 1px solid rgba(240,180,41,.20);
  border-bottom: 1px solid rgba(240,180,41,.20);
}

.section-head{padding: 2px 2px 8px; margin-bottom: 14px;}
.kicker{
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(11,43,68,.85);
  font-weight: 900;
  text-transform: uppercase;
}
.section h2{margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;}

/* GRID + CARDS */
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3, 1fr)}
.grid.two,.grid.three,.contact{align-items:stretch;}

.card{
  background: var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--softShadow);
  padding: 18px;
  border: 1px solid rgba(10,30,55,.06);
}

.card h3{margin: 0 0 10px; font-size: 18px}
.card p{margin: 10px 0}

.list{margin: 10px 0 0; padding-left: 18px}
.list li{margin: 6px 0}
.list.compact li{margin: 6px 0}

.card-media{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.card-media img{
  width:100%;
  height: clamp(220px, 28vw, 320px);
  object-fit: cover;
  border-bottom: 1px solid rgba(10,30,55,.06);
}
.card-body{padding: 16px 18px 18px; margin-top:auto;}

.card-slim{padding: 16px 18px}
.stack{display:grid; gap:16px}

.pill-link{
  display:inline-flex;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  background: rgba(240,180,41,.14);
  border: 1px solid rgba(240,180,41,.30);
  color: rgba(11,43,68,.95);
}
.pill-link:hover{background: rgba(240,180,41,.18)}

/* MEDIA GRID */
.media-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 12px;
}
.media-grid--three{grid-template-columns: repeat(3, 1fr);}
.media-grid.clinical-grid{grid-template-columns: repeat(3, 1fr);}

.media-tile{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.7);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  transition: transform .18s ease, filter .18s ease;
}
.media-tile:hover{transform: translateY(-2px); filter: brightness(1.01);}
.media-tile img{width:100%; height: 170px; object-fit: cover; display:block;}
.media-label{
  display:block;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,43,68,.94);
  border-top: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.92);
}

/* EMBED VIDEO CARDS */
.embed-card{padding:0; overflow:hidden;}
.embed{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  background: rgba(11,43,68,.06);
  border-bottom: 1px solid rgba(10,30,55,.06);
}
.embed iframe,
.embed video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.embed--video video{object-fit:cover;}

.embed-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background: rgba(11,43,68,.92);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
}

.embed-note{padding: 14px 16px 16px;}
.embed-note h3{margin: 0 0 8px; font-size: 16px;}
.embed-note p{margin: 0; color: var(--muted); font-size: 13px;}

/* CHECKLIST */
.list.checklist{list-style:none; padding-left:0; margin: 10px 0 0;}
.list.checklist li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(11,43,68,.04);
  border: 1px solid rgba(11,43,68,.08);
  margin: 8px 0;
}
.check{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(240,180,41,.20);
  border: 1px solid rgba(240,180,41,.36);
  color: rgba(11,43,68,.95);
  font-weight: 900;
  line-height:1;
}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:start;
}
.contact-meta{margin-top:14px; display:grid; gap:10px}
.meta-item{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 46px rgba(15,23,42,.08);
}
.meta-label{display:block; font-size:12px; color: var(--muted)}
.meta-value{font-weight:900; color: rgba(11,43,68,.95)}

.contact-form{
  background: rgba(255,255,255,.86);
  border-radius: var(--radius2);
  padding: 18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
}
.contact-form label{display:block; margin-bottom:12px}
.contact-form span{display:block; font-size:12px; color: var(--muted); margin-bottom:6px}
.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(240,180,41,.55);
  box-shadow: 0 0 0 4px rgba(240,180,41,.18);
}
.form-note{margin:10px 0 0; font-size:12px; color: var(--muted)}



/* MAP */
.map-card{padding:0; overflow:hidden}
.map-embed{width:100%; height: 320px;}
.map-embed iframe{width:100%; height:100%; display:block; border:0;}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr}
  .media-grid--three{grid-template-columns:1fr}
  .media-grid.clinical-grid{grid-template-columns:1fr}
  .media-tile img{height:210px}
  .map-embed{height: 280px;}
}

@media (max-width: 860px){
  .btn-cta{display:none}
  .btn-menu{display:inline-flex}

  .nav-toggle{display:inline-block}

  .main-nav{
    position: fixed;
    top: 74px;
    left: 20px;
    right: 20px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(11,43,68,.96);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--shadow);
  }

  .main-nav a{
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
  }
  .main-nav a:hover{background: rgba(255,255,255,.10)}
  .main-nav.open{display:flex}
}

/* Equal height for 3 therapy cards */
#therapies .grid.three{align-items:stretch;}
#therapies .grid.three > .card{height:100%; display:flex; flex-direction:column;}
#therapies .grid.three > .card h3{min-height:48px;}

/* убрать нижний белый блок под видео только в Hero */
.hero .embed-note{
  display:none;
}


/* clean video embed (no white line, no padding below) */
.embed--clean{
  border-bottom: none !important;
}

.embed--clean iframe{
  display:block;
}

/* =========================
   PREMIUM CLINICAL SECTION
========================= */

/* общий фон секции (если у тебя section-alt уже есть — будет красиво дополнять) */
#clinical.section-alt{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 340px at 15% -120px, rgba(240,180,41,.22), transparent 62%),
    radial-gradient(900px 340px at 92% 10%, rgba(11,43,68,.14), transparent 60%),
    linear-gradient(180deg, #f8fbff, #ffffff);
}

/* мягкий “премиум” ореол */
#clinical.section-alt::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(closest-side at 20% 25%, rgba(240,180,41,.18), transparent 60%),
    radial-gradient(closest-side at 80% 55%, rgba(11,43,68,.10), transparent 62%);
  pointer-events:none;
  filter: blur(2px);
}

/* заголовок секции — более “editorial” */
#clinical .section-head{
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
#clinical .section-head .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,43,68,.06);
  border: 1px solid rgba(11,43,68,.10);
}
#clinical .section-head h2{
  letter-spacing: -0.02em;
  font-weight: 900;
}

/* главный контейнер внутри (Phase 2 card) */
#clinical > .container > .card{
  position: relative;
  z-index: 1;
  padding: 22px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(240,180,41,.26);
  box-shadow:
    0 22px 60px rgba(2, 10, 25, .12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* тонкая золотая линия сверху */
#clinical > .container > .card::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(240,180,41,.9), transparent);
  opacity: .55;
}

/* бейдж справа сверху */
#clinical > .container > .card::after{
  content:"PHASE 2 • JAPAN";
  position:absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(11,43,68,.96);
  background: rgba(240,180,41,.18);
  border: 1px solid rgba(240,180,41,.34);
}

/* заголовок Phase 2 */
#clinical > .container > .card > h3{
  margin: 8px 0 16px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(11,43,68,.98);
}

/* внутренние 2 карточки (Study Design / Key Results) */
#clinical .grid.two > .card.card-slim{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  box-shadow:
    0 16px 44px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  position: relative;
  overflow: hidden;
}

/* лёгкий “glass glow” вверху каждой внутренней карточки */
#clinical .grid.two > .card.card-slim::before{
  content:"";
  position:absolute;
  inset: -1px -1px auto -1px;
  height: 90px;
  background:
    radial-gradient(closest-side at 20% 40%, rgba(240,180,41,.18), transparent 70%),
    radial-gradient(closest-side at 80% 50%, rgba(11,43,68,.10), transparent 70%);
  pointer-events:none;
}

/* подзаголовки внутри */
#clinical .card-slim h3{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

/* разделители — тонкие и стильные */
#clinical .divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent);
}

/* списки — чуть аккуратнее */
#clinical .list.compact{
  padding-left: 18px;
}
#clinical .list.compact li{
  margin: 8px 0;
}

/* ключевые результаты — выделить цифры */
#clinical .card-slim strong{
  color: rgba(11,43,68,.98);
  font-weight: 950;
}
#clinical .card-slim p{
  margin: 8px 0;
}


.media-tile img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}


/* ===== HERO: Light Premium Background ===== */
.hero--longevity{
  background:
    radial-gradient(900px 360px at 10% -120px, rgba(240,180,41,.18), transparent 60%),
    radial-gradient(900px 360px at 90% 0%, rgba(11,43,68,.10), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 70%);
  color: #0f172a;
}

/* текст */
.hero--longevity .hero-copy p{
  color: #334155;
}

.hero--longevity .hero-title,
.hero--longevity .hero-lead{
  color: #0b2b44;
}

/* теги */
.hero--longevity .tag{
  background: rgba(11,43,68,.06);
  border-color: rgba(11,43,68,.14);
  color: #0b2b44;
}


.embed--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* изображение полностью заполняет блок */
  border-radius: 18px;
  display: block;
}

/* если хочешь мягкий «luxury» эффект */
.embed--image img{
  filter: brightness(1.02) contrast(1.05);
}