:root{
  --bg:#070B09;
  --bg-2:#0C1310;
  --card:#101815;
  --card-hover:#14201B;
  --line:#1E2B25;
  --text:#EAF2ED;
  --muted:#8A9A91;
  --accent:#25DD84;      /* ← фирменный зелёный, поменяй под точный бренд */
  --accent-2:#12B76A;
  --accent-ink:#04150C;
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  line-height:1.5;
  background-image:
    radial-gradient(70% 45% at 50% -5%, rgba(37,221,132,.16), transparent 70%),
    radial-gradient(50% 40% at 50% 105%, rgba(18,183,106,.10), transparent 70%);
  background-attachment:fixed;
}
.wrap{
  max-width:460px;
  margin:0 auto;
  padding:48px 20px 40px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ---- Header ---- */
header{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.mark{ width:62px; height:auto; display:block; }
.wordmark{ width:210px; max-width:64%; height:auto; display:block; }
.tagline{ color:var(--muted); font-size:14.5px; margin:2px 0 0; }
.official{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--accent);
  background:rgba(37,221,132,.10);border:1px solid rgba(37,221,132,.25);
  padding:5px 11px;border-radius:999px;letter-spacing:.02em;
}
.official svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Links ---- */
.links{ display:flex; flex-direction:column; gap:12px; }
.link{
  display:flex;align-items:center;gap:15px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 17px;
  color:var(--text);text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.link:hover,.link:focus-visible{
  background:var(--card-hover);
  border-color:rgba(37,221,132,.55);
  transform:translateY(-2px);
  box-shadow:0 10px 26px -16px rgba(37,221,132,.7);
  outline:none;
}
.link .ic{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
}
.link .ic img{ width:26px;height:26px;display:block; }
.link .ic.brand-mark img{ width:26px;height:26px; }
/* оптическое выравнивание: «плотные» марки чуть меньше, чтобы визуально совпадали */
.link .ic img[src*="logo-x"]{ width:20px;height:20px; }
.link .ic img[src*="logo-facebook"]{ width:23px;height:23px; }
.link .ic img[src*="logo-youtube"]{ width:24px;height:24px; }
.link .ic img[src*="logo-linkedin"]{ width:23px;height:23px; }
.link .txt{ display:flex;flex-direction:column;min-width:0; }
.link .txt b{ font-size:15.5px;font-weight:650;letter-spacing:.01em; }
.link .txt small{ color:var(--muted);font-size:12.5px; }
.link .arrow{ margin-left:auto;color:var(--muted);flex:none;transition:transform .16s ease,color .16s ease;}
.link .arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.link:hover .arrow,.link:focus-visible .arrow{ color:var(--accent);transform:translateX(3px); }

/* ---- Share ---- */
.share{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:none;cursor:pointer;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
  font-size:16px;font-weight:750;font-family:inherit;
  padding:16px;border-radius:var(--radius);
  box-shadow:0 12px 30px -12px rgba(37,221,132,.65);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.share:hover,.share:focus-visible{ transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 36px -12px rgba(37,221,132,.8);outline:none; }
.share:active{ transform:translateY(0); }
.share svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

footer{ text-align:center;color:var(--muted);font-size:12.5px;display:flex;flex-direction:column;gap:6px; }
footer a{ color:var(--muted);text-decoration:none;border-bottom:1px solid transparent; }
footer a:hover{ color:var(--accent);border-color:rgba(37,221,132,.4); }

/* ---- Share modal ---- */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,4,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-card{
  position:relative; width:100%; max-width:380px;
  background:#0E1613; border:1px solid var(--line); border-radius:22px;
  padding:20px 20px 24px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  animation:pop .22s ease;
}
@keyframes pop{ from{opacity:0;transform:translateY(14px) scale(.97);} to{opacity:1;transform:none;} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head span{ font-weight:700; font-size:16px; }
.modal-x{ background:transparent; border:none; color:var(--muted); cursor:pointer; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; transition:background .15s,color .15s; }
.modal-x:hover{ background:var(--bg-2); color:var(--text); }
.modal-x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; pointer-events:none; }
.modal-preview{ display:flex; flex-direction:column; align-items:center; gap:11px; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:22px 16px; margin-bottom:18px; }
.modal-preview .m-mark{ width:42px; height:auto; }
.modal-preview .m-word{ width:150px; max-width:70%; height:auto; }
.modal-url{ color:var(--muted); font-size:12px; word-break:break-all; text-align:center; }
.share-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 6px; }
.sh{ display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; cursor:pointer; padding:0; color:var(--text); text-decoration:none; font-family:inherit; }
.sh .circle{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; transition:transform .15s ease, filter .15s ease; }
.sh:hover .circle,.sh:focus-visible .circle{ transform:translateY(-2px); filter:brightness(1.08); }
.sh:focus-visible{ outline:none; }
.sh .circle img{ width:24px; height:24px; }
.sh > span{ font-size:11.5px; color:var(--muted); }
.c-copy{ background:#26332D; border:1px solid var(--line); }
.c-x{ background:#000; border:1px solid #2A2A2A; }
.c-facebook{ background:#1877F2; }
.c-whatsapp{ background:#25D366; }
.c-linkedin{ background:#0A66C2; }
.c-telegram{ background:#229ED9; }
.c-email{ background:linear-gradient(150deg,var(--accent),var(--accent-2)); }
@media (max-width:400px){ .share-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---- Toast ---- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#04150C;border:1px solid rgba(37,221,132,.4);color:var(--accent);
  padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:50;
  max-width:90vw;text-align:center;
}
.toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

.fade{ opacity:0;transform:translateY(10px);animation:in .5s ease forwards; }
.links .link{ animation-delay:calc(var(--i) * 45ms); }
@keyframes in{ to{opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce){
  .fade{animation:none;opacity:1;transform:none;}
  .link,.share,.arrow{transition:none;}
}