/* Анализ имени — дизайн, портированный из проекта analiz_imeni (landing (3).html).
   Светлая тема по умолчанию; тёмная — под html[data-theme="dark"] (app-webview).
   Всё скоупится под .nm-scope, чтобы не течь на numerology/taro. */

.nm-scope {
  --bg:#ffffff; --band:#efeaf9; --band2:#f6f2fc; --card:#ffffff;
  --ink:#2a2340; --muted:#655d80; --violet:#6a3fa8; --violet-deep:#4a2b78;
  --violet-soft:#a983df; --gold:#d68a2e; --line:#e7e0f3;
  --shadow:rgba(74,43,120,.10); --chip:#f0e9fb;

  --font-head:'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui:'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] .nm-scope {
  --bg:#15111f; --band:#1c1730; --band2:#191428; --card:#221b35;
  --ink:#ece7f7; --muted:#a99fc4; --violet:#b590e6; --violet-deep:#c9aef0;
  --violet-soft:#7b5aa8; --gold:#e2a751; --line:#322948;
  --shadow:rgba(0,0,0,.35); --chip:#2a2140;
}

.nm-scope *{box-sizing:border-box;}
.nm-scope h1,.nm-scope h2,.nm-scope h3{
  font-family:var(--font-head); font-weight:600; line-height:1.15;
  text-wrap:balance; margin:0;
}
.nm-scope .em{font-style:italic; color:var(--violet);}
.nm-scope .container{max-width:1120px; margin:0 auto; padding:0 24px;}
.nm-scope .label{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); font-weight:600;
}
.nm-scope a{color:inherit;}

/* ─── Hero ─────────────────────────────────────────────────────────── */
.nm-hero{position:relative; overflow:hidden;}
.nm-hero .container{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  padding-top:34px; padding-bottom:52px;
}
.nm-hero h1{font-size:clamp(2.1rem,4.6vw,3.35rem); margin:14px 0 18px;}
.nm-lead{color:var(--muted); font-size:1.04rem; max-width:34em; margin:0 0 22px;}
.nm-lead b{color:var(--ink); font-weight:600;}

.nm-form{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:0 18px 40px -24px var(--shadow); max-width:460px;
}
.nm-field{display:flex; gap:10px; flex-wrap:wrap;}
.nm-field input{
  flex:1 1 100%; min-width:0; padding:13px 15px; border:1px solid var(--line);
  border-radius:11px; font-size:1rem; background:var(--bg); color:var(--ink);
  font-family:inherit;
}
.nm-field input:focus{outline:2px solid var(--violet); outline-offset:1px; border-color:transparent;}
.nm-field .nm-btn{flex:1 1 100%;}
.nm-btn{
  border:0; cursor:pointer; font-family:var(--font-ui); font-size:1rem; font-weight:600;
  color:#fff; padding:13px 22px; border-radius:11px;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  box-shadow:0 10px 22px -10px var(--violet);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nm-btn:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--violet);}
.nm-finehint{font-size:.78rem; color:var(--muted); margin:10px 2px 0;}
.nm-errors:not(:empty){font-size:.82rem; color:#b23a1f; margin:10px 2px 0;}

/* Hero art (анимация имён) */
.nm-art{position:relative; height:380px; display:flex; align-items:center; justify-content:center;}
.nm-animBox{text-align:center; transition:opacity .45s ease; opacity:1;}
.nm-animBox.out{opacity:0;}
.nm-tiles,.nm-calc{display:flex; gap:8px; justify-content:center; flex-wrap:nowrap;}
.nm-tile{
  width:44px; height:56px; border-radius:10px; background:var(--card);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:1.7rem; color:var(--ink);
  opacity:0; transform:translateY(8px) scale(.9);
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 10px 22px -16px var(--shadow);
}
.nm-tile.in{opacity:1; transform:none;}
.nm-calc{margin-top:10px;}
.nm-num{
  width:44px; text-align:center; font-family:var(--font-head); font-size:1.15rem;
  color:var(--gold); opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.nm-num.in{opacity:1; transform:none;}
.nm-result{
  margin-top:16px; font-family:var(--font-head); font-size:1.4rem; color:var(--muted);
  min-height:2.4rem; opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.nm-result.show{opacity:1; transform:none;}
.nm-result b{color:var(--gold); font-size:2.1rem; font-style:italic; margin-left:4px;}

/* ─── Sections ─────────────────────────────────────────────────────── */
.nm-scope section{padding:64px 0;}
.nm-band{background:var(--band);}
.nm-band2{background:var(--band2);}
.nm-sechead{text-align:center; max-width:640px; margin:0 auto 40px;}
.nm-sechead h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:12px 0 12px;}
.nm-sechead p{color:var(--muted); margin:0;}

.nm-basis{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.nm-bcard{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px; box-shadow:0 14px 30px -22px var(--shadow);
}
.nm-bcard .strip{
  height:40px; width:100%; border-radius:10px; background:var(--chip);
  position:relative; overflow:hidden; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; gap:3px;
}
.nm-bcard h3{font-size:1.12rem; margin-bottom:8px;}
.nm-bcard p{color:var(--muted); font-size:.94rem; margin:0;}
/* strip anims */
.c1row{display:flex; gap:1px;}
.c1l{
  font-family:var(--font-head); font-size:1.05rem; color:var(--violet-deep);
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .3s ease;
}
.c1l.in{opacity:1; transform:none;}
.c1num{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.4);
  font-family:var(--font-head); font-style:italic; font-size:1.55rem; color:var(--gold);
  opacity:0; transition:opacity .4s ease, transform .4s ease;
}
.c1num.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
.c2d{font-family:var(--font-head); font-size:1rem; color:var(--violet-deep); width:16px; text-align:center; opacity:.14;}
.c3wrap{display:flex; align-items:center; gap:12px; width:100%; padding:0 14px;}
.c3lines{display:flex; flex-direction:column; gap:5px; flex:1;}
.c3lines i{height:4px; border-radius:2px; background:var(--violet-soft); width:0; transition:width .5s ease;}
.c3lines i.f{width:100%;}
.c3lines i:nth-child(2).f{width:78%;}
.c3lines i:nth-child(3).f{width:55%;}
.c3seal{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:700;
  opacity:0; transform:scale(.3) rotate(-15deg);
  transition:opacity .35s ease, transform .45s cubic-bezier(.5,1.7,.5,1);
}
.c3seal.f{opacity:1; transform:scale(1) rotate(0);}

.nm-grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.nm-pcard{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 18px; box-shadow:0 14px 30px -24px var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nm-pcard:hover{transform:translateY(-5px); box-shadow:0 22px 40px -22px var(--shadow);}
.nm-pcard .no{font-family:var(--font-head); font-size:1.5rem; color:var(--gold); font-style:italic;}
.nm-pcard h3{font-size:1.02rem; margin:10px 0 8px;}
.nm-pcard p{color:var(--muted); font-size:.86rem; margin:0;}

.nm-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.nm-step .sn{font-family:var(--font-head); font-style:italic; color:var(--gold); font-size:1.4rem;}
.nm-step h3{font-size:1.12rem; margin:8px 0 8px;}
.nm-step p{color:var(--muted); font-size:.92rem; margin:0;}

.nm-final{background:linear-gradient(160deg,var(--band),var(--band2)); text-align:center;}
.nm-final h2{font-size:clamp(1.8rem,3.6vw,2.5rem); margin-bottom:14px;}
.nm-final p{color:var(--muted); max-width:40em; margin:0 auto 26px;}

/* ─── Short-name confirm modal (landing, до отправки формы) ─────────── */
.nm-confirm-backdrop{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(20,16,31,.55);
}
.nm-confirm-backdrop.on{display:flex;}
.nm-confirm{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:28px 30px; box-shadow:0 30px 70px -30px var(--shadow);
  max-width:520px; width:100%; text-align:center;
  max-height:calc(100vh - 40px); overflow-y:auto; /* низкие/ландшафтные экраны */
}
.nm-confirm h3{font-size:1.35rem; margin-bottom:10px;}
.nm-confirm p{color:var(--muted); margin:0 auto 20px; max-width:40em; font-size:.96rem;}
.nm-confirm .opts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.nm-obtn{
  cursor:pointer; font-family:var(--font-ui); font-size:.98rem; font-weight:600;
  padding:12px 20px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); transition:transform .15s ease, box-shadow .15s ease;
}
.nm-obtn:hover{transform:translateY(-2px);}
.nm-obtn:focus-visible{outline:2px solid var(--violet); outline-offset:2px;}
.nm-obtn.primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  box-shadow:0 10px 22px -10px var(--violet);
}

/* ─── Report (страница результата) ─────────────────────────────────── */
.nm-report{background:var(--band); position:relative; overflow:hidden; padding:56px 0;}
.nm-report #rbg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.nm-report .container{position:relative; z-index:1;}
.nm-rhead{text-align:center; margin-bottom:30px;}
.nm-namecard{
  display:flex; align-items:center; justify-content:center; gap:24px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:26px 30px; max-width:560px; margin:14px auto 14px;
  box-shadow:0 16px 36px -24px var(--shadow);
}
.nm-namecard .bignum{
  font-family:var(--font-head); font-style:italic; font-size:4.2rem; color:var(--gold);
  line-height:.9; min-width:60px; text-align:center;
}
.nm-namecard .nm-nm{text-align:left;}
.nm-namecard .rname{font-family:var(--font-head); font-size:1.75rem; display:block; line-height:1.12;}
.nm-namecard .who{color:var(--muted); font-size:.98rem; display:block; margin-top:3px;}

.nm-mathstrip{max-width:580px; margin:0 auto 16px; text-align:center; color:var(--muted); font-size:.9rem;}
.nm-mathstrip .mlab{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
  font-weight:600; display:block; margin-bottom:9px;
}
.nm-mathstrip .ml{display:inline-flex; flex-wrap:wrap; gap:6px 8px; justify-content:center; align-items:center;}
.nm-mathstrip .lt{
  background:var(--chip); border-radius:8px; padding:3px 9px; color:var(--violet-deep);
  font-weight:600; font-size:.82rem; font-family:var(--font-head);
}
.nm-mathstrip .eq{margin:0 2px;}
.nm-mathstrip b{color:var(--gold); font-weight:700; font-size:1.08rem;}

.nm-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px;}
.nm-chip{background:var(--chip); color:var(--violet-deep); border-radius:20px; padding:6px 13px; font-size:.82rem; font-weight:600;}

.nm-rsections{display:flex; flex-direction:column; gap:16px; max-width:780px; margin:26px auto 0;}
.nm-rsec{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px 26px; box-shadow:0 14px 30px -26px var(--shadow);
}
.nm-rsec .rl{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--violet); font-weight:700;}
.nm-rsec h3{font-size:1.2rem; margin:8px 0 10px;}
.nm-rsec h3 .rnum{color:var(--gold); font-style:italic; font-family:var(--font-head);}
.nm-rsec .rgen{margin:0 0 14px; color:var(--muted); font-size:.92rem; padding-bottom:12px; border-bottom:1px solid var(--line);}
.nm-rsec p{margin:0 0 12px; color:var(--ink);}
.nm-rsec p:last-child{margin-bottom:0;}
.nm-rsec.locked{position:relative;}
.nm-rsec .nm-lockrow{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.95rem;}
.nm-rsec .nm-lockrow .ico{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--chip);
  color:var(--violet-deep); display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.nm-rsec [data-reg-popup-open]{cursor:pointer;}
.nm-rsec [data-reg-popup-open]:hover .nm-lockrow{color:var(--violet);}

.nm-again{text-align:center; margin:34px 0 0;}
.nm-again a{
  display:inline-block; font-family:var(--font-ui); font-size:.98rem; font-weight:600;
  padding:12px 22px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nm-again a:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--violet);}

.nm-rdisc{text-align:center; color:var(--muted); font-size:.82rem; max-width:640px; margin:24px auto 0;}

/* ─── Reg-lock banner (страница результата, не /full) ──────────────── */
.nm-reglock{
  max-width:640px; margin:26px auto 0; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:28px 30px; box-shadow:0 16px 36px -24px var(--shadow);
}
.nm-reglock h3{font-size:1.3rem; margin-bottom:10px;}
.nm-reglock p{color:var(--muted); margin:0 auto 20px; max-width:42em; font-size:.96rem;}
.nm-reglock .num-lock-cta{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:var(--font-ui); font-size:1rem; font-weight:600; color:#fff;
  padding:13px 26px; border-radius:11px;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  box-shadow:0 10px 22px -10px var(--violet);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nm-reglock .num-lock-cta:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--violet);}

/* ─── Scroll reveal ────────────────────────────────────────────────── */
/* Прогрессивное улучшение: контент виден по умолчанию. Скрытие-до-появления
   включается классом .nm-anim, который JS добавляет только когда всё готово
   (не reduced-motion, есть IntersectionObserver). Если JS упал — видно всё. */
.nm-scope.nm-anim .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.nm-scope.nm-anim .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .nm-scope.nm-anim .reveal{opacity:1; transform:none; transition:none;}
}

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width:900px){
  .nm-hero .container{grid-template-columns:1fr; gap:20px;}
  .nm-art{height:280px; order:-1;}
  .nm-tile{width:32px; height:42px; font-size:1.25rem;}
  .nm-num{width:32px; font-size:.95rem;}
  .nm-result{font-size:1.2rem;} .nm-result b{font-size:1.7rem;}
  .nm-basis,.nm-grid5,.nm-steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .nm-basis,.nm-grid5,.nm-steps{grid-template-columns:1fr;}
  .nm-namecard{flex-direction:column; text-align:center;}
  .nm-namecard .nm-nm{text-align:center;}
}