/* umno — заглушка бренда. Палитра и типографика взяты из концепции упаковки (май 2025). */

:root{
  --paper:#ffffff;
  --ice:#eef4f8;
  --ice-deep:#dce9f1;
  --ink:#0e1116;
  --ink-soft:#59626d;
  --line:#dde6ed;
  --accent:#0e9bff;      /* буква «m» в логотипе */
  --accent-deep:#0b4fcf; /* индекс f.1 на упаковке */

  --wrap:1280px;
  --pad:clamp(20px, 5vw, 72px);
  --display:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  letter-spacing:-0.005em;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.035em; line-height:1.02}
h1{font-size:clamp(34px,4.5vw,64px); text-wrap:balance}
h2{font-size:clamp(28px,3.9vw,52px); line-height:1.06}
h3{font-size:clamp(19px,1.6vw,24px); letter-spacing:-0.02em; line-height:1.15}
p{margin:0 0 1em}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 6px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px}

/* ——— служебные ——— */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent); flex:none;
}
.mono{font-family:var(--mono); font-size:13px; letter-spacing:0}

/* ——— шапка ——— */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--pad) 0;
}
.topbar__logo img{width:clamp(96px,9vw,132px)}
.topbar__nav{display:flex; gap:clamp(14px,2vw,30px); font-size:14px; font-weight:500}
.topbar__nav a{
  text-decoration:none; color:var(--ink-soft); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.topbar__nav a:hover{color:var(--ink); border-bottom-color:var(--accent)}

/* ——— ЭКРАН 1: герой ——— */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(24px,4vw,56px);
  padding:clamp(28px,4.4vw,64px) var(--pad) clamp(28px,4vw,60px);
  background:
    radial-gradient(120% 90% at 88% 40%, var(--ice-deep) 0%, rgba(220,233,241,0) 62%),
    linear-gradient(180deg, #fff 0%, var(--ice) 100%);
}
.hero__text{position:relative; z-index:2}
.hero h1{max-width:12ch}
.hero .lead{max-width:38ch}
.hero h1{margin-bottom:24px}
.lead{
  font-size:clamp(16px,1.35vw,20px); color:var(--ink-soft); max-width:44ch;
  margin-bottom:28px;
}
.hero__status{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.02em;
  color:var(--ink-soft); background:rgba(255,255,255,.72);
  border:1px solid var(--line); border-radius:100px; padding:8px 16px 8px 12px;
  margin:0;
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(14,155,255,.55); animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(14,155,255,.5)}
  70%{box-shadow:0 0 0 9px rgba(14,155,255,0)}
  100%{box-shadow:0 0 0 0 rgba(14,155,255,0)}
}

.hero__media{margin:0 calc(var(--pad) * -1) 0 0; position:relative}
.hero__media img{
  width:100%; border-radius:2px;
  mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 100%);
}

.science__grid{position:relative}
.science__lead,.specs,.free,.science__media{position:relative; z-index:2}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }

/* ——— тикер ——— */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper); overflow:hidden; padding:14px 0;
}
.ticker__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
  animation:slide 42s linear infinite;
}
.ticker__track i{width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .ticker__track{animation:none} }

/* ——— общие секции ——— */
section{padding:clamp(56px,8vw,120px) var(--pad)}
.section-head{max-width:var(--wrap); margin:0 auto clamp(32px,4vw,56px)}
.section-head h2{max-width:18ch}
.section-head__note{color:var(--ink-soft); max-width:52ch; margin-top:18px}

/* ——— ЭКРАН 2: подход ——— */
.manifest{background:var(--paper)}
.manifest__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px); align-items:center;
}
.manifest__swatch{margin:0}
.manifest__swatch img{
  width:100%; height:clamp(300px,38vw,520px); object-fit:cover; object-position:50% 30%;
  background:var(--ice); border:1px solid var(--line);
}
.manifest__swatch figcaption{
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  letter-spacing:0.08em; margin-top:12px;
}
.manifest__body h2{margin-bottom:24px; max-width:16ch}
.manifest__body p{color:var(--ink-soft); max-width:56ch}
.manifest__body b{color:var(--ink); font-weight:600}

.claims{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin:36px 0 0; border-top:1px solid var(--line);
}
.claims > div{padding:22px 22px 0 0; border-right:1px solid var(--line)}
.claims > div:last-child{border-right:0; padding-right:0}
.claims dt{
  font-family:var(--mono); font-size:15px; font-weight:500;
  letter-spacing:0.02em; color:var(--ink); margin-bottom:8px;
}
.claims dd{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.45}

/* ——— ЭКРАН 3: формулы ——— */
.formulas{background:linear-gradient(180deg, var(--ice) 0%, #fff 70%)}
.cards{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px);
}
.card{
  position:relative; background:var(--paper); border:1px solid var(--line);
  padding:26px 26px 30px; display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:var(--accent); transform:translateY(-3px)}
.card::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:3px;
  background:var(--accent);
}
.card__index{
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0.12em;
  color:var(--accent); margin:0 0 14px;
}
.card img{
  width:100%; max-width:190px; height:clamp(240px,26vw,320px); object-fit:contain;
  margin:0 auto 24px;
}
.card h3{margin-bottom:4px}
.card__sub{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.card p:last-child{margin:0; font-size:14.5px; color:var(--ink-soft)}

.formulas__wide{max-width:var(--wrap); margin:clamp(36px,5vw,64px) auto 0}
.formulas__wide img{width:100%; border:1px solid var(--line); background:#fff}
.formulas__wide figcaption{
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  letter-spacing:0.08em; margin-top:12px; text-align:right;
}

/* ——— ЭКРАН 4: состав ——— */
.science{background:var(--paper)}
.science__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  grid-template-areas:"lead media" "specs media" "free media";
  gap:0 clamp(28px,5vw,72px); align-items:start;
}
.science__lead{grid-area:lead; margin-bottom:34px}
.science__lead h2{margin-bottom:18px; max-width:14ch}
.science__lead p{color:var(--ink-soft); margin:0}

.specs{grid-area:specs; list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.specs li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.specs__k{font-size:15px; color:var(--ink-soft)}
.specs__v{font-family:var(--mono); font-size:14.5px; font-weight:500; text-align:right}

.free{
  grid-area:free; list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:26px 0 0; padding:0;
}
.free li{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  border:1px solid var(--line); border-radius:100px; padding:7px 15px; color:var(--ink-soft);
}
.free li::before{content:"— "; color:var(--accent)}

.science__media{grid-area:media; margin:0}
.science__media img{width:100%; border:1px solid var(--line)}

/* ——— ЭКРАН 5: статус ——— */
.status{
  background:
    radial-gradient(90% 120% at 15% 0%, var(--ice-deep) 0%, rgba(220,233,241,0) 60%),
    var(--ice);
  border-top:1px solid var(--line);
}
.status__inner{max-width:760px; margin:0 auto; text-align:center}
.status__inner .eyebrow{justify-content:center}
.status__inner h2{margin-bottom:24px}
.status__text{color:var(--ink-soft); max-width:56ch; margin-inline:auto}
.status__actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;
}
.btn{
  font-family:var(--mono); font-size:14px; letter-spacing:0.02em; text-decoration:none;
  border:1px solid var(--ink); border-radius:100px; padding:12px 24px;
  transition:background .18s, color .18s, border-color .18s;
}
.btn:hover{background:var(--ink); color:#fff}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{background:var(--accent-deep); border-color:var(--accent-deep)}

/* ——— футер ——— */
.footer{
  background:var(--ink); color:#c3ccd6;
  padding:clamp(48px,6vw,84px) var(--pad) 34px;
  font-size:14.5px;
}
.footer__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
}
.footer__brand img{width:120px; margin-bottom:18px}
.footer__brand p{color:#8b96a3; max-width:22ch; margin:0}
.footer__col h3{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; color:#7d8894; margin-bottom:16px;
}
.footer__col p{margin:0 0 10px; color:#dbe3ea}
.footer__col a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22)}
.footer__col a:hover{border-bottom-color:var(--accent); color:#fff}
.footer__hint{font-family:var(--mono); font-size:11.5px; color:#7d8894; margin-left:8px}
.footer .mono{color:#98a3af}
.footer__legal{
  max-width:var(--wrap); margin:clamp(36px,5vw,64px) auto 0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; color:#78838f; line-height:1.55;
}

/* ——— адаптив ——— */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr; padding-bottom:clamp(24px,5vw,40px)}
  .hero__text{max-width:none}
  .hero__media{order:2; margin-inline:calc(var(--pad) * -1)}
  .hero__media img{mask-image:none; -webkit-mask-image:none}
  .manifest__grid{grid-template-columns:1fr}
  .manifest__swatch{max-width:260px}
  .science__grid{grid-template-columns:1fr; grid-template-areas:"lead" "media" "specs" "free"}
  .science__media{margin:0 0 30px}
  .cards{grid-template-columns:1fr; max-width:520px}
  .card img{max-width:180px}
}
@media (max-width:640px){
  .topbar{padding-top:16px}
  .topbar{flex-wrap:wrap; gap:12px}
  .topbar__nav{
    width:100%; order:3; gap:18px; font-size:13px;
    overflow-x:auto; scrollbar-width:none;
    padding-bottom:2px; border-bottom:1px solid var(--line);
  }
  .topbar__nav::-webkit-scrollbar{display:none}
  .topbar__nav a{white-space:nowrap; padding-bottom:8px}
  .claims{grid-template-columns:1fr}
  .claims > div{border-right:0; border-bottom:1px solid var(--line); padding:16px 0}
  .claims > div:last-child{border-bottom:0}
  .footer__grid{grid-template-columns:1fr; gap:34px}
  .status__actions .btn{width:100%; text-align:center}
}

/* появление секций при скролле */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
}