/* ============================================================
   DENZA · Link-in-bio — премиальный фирменный стиль
   Цвета и типографика — по брендбуку DENZA
   ============================================================ */

:root{
  --denza-blue:        #003087;  /* RGB 0/48/135 · Pantone 287C */
  --denza-blue-light:  #2c66d2;
  --denza-dark-blue:   #021349;  /* RGB 2/19/73  · Pantone 282C */
  --glacier-white:     #ffffff;
  --starlight-silver:  #dadbdb;
  --meteorite-grey:    #565656;
  --gold:              #f4d9a0;  /* Dawning Gold — премиальный акцент */
  --gold-deep:         #b7903f;

  --ink:      #0a1f4d;  /* основной тёмно-синий текст */
  --ink-soft: #5a6477;  /* приглушённый текст */

  --font-display:"Saira Expanded","Arial Narrow",sans-serif;
  --font-body:"Saira",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --radius:18px;
  --maxw:480px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  height:100dvh;
  font-family:var(--font-body);
  color:var(--ink);
  background:#ffffff;
  background-attachment:fixed;
  display:flex; justify-content:center; align-items:center;
  padding:clamp(24px,5vh,56px) 20px;
  position:relative; overflow:hidden;
}

/* ── Фоновые слои ── */
.bg-aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:none; }
.bg-aurora span{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.4;
  will-change:transform;
}
.bg-aurora span:nth-child(1){
  width:60vw; max-width:620px; aspect-ratio:1; top:-16%; left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(120,165,235,.4), transparent 65%);
  animation:float1 16s ease-in-out infinite;
}
.bg-aurora span:nth-child(2){
  width:46vw; max-width:480px; aspect-ratio:1; bottom:-20%; right:-8%;
  background:radial-gradient(circle, rgba(170,195,230,.45), transparent 66%);
  animation:float2 20s ease-in-out infinite;
}

.bg-pattern{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%23ccd3dd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13 6 L7 19'/%3E%3Cpath d='M40 6 L34 19'/%3E%3Cpath d='M26 32 L20 45'/%3E%3Cpath d='M53 32 L47 45'/%3E%3C/g%3E%3C/svg%3E");
  background-size:54px 54px;
}

.bg-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-vignette{ display:none; }

/* ── Переключатель языка ── */
.lang-switch{
  position:fixed; top:16px; right:16px; z-index:5;
  display:flex; gap:2px; padding:3px;
  background:#ffffff; border:1px solid rgba(10,31,77,.1);
  border-radius:999px; box-shadow:0 8px 18px -12px rgba(10,31,77,.45);
}
.lang-btn{
  font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.08em;
  padding:6px 13px; border:0; cursor:pointer; border-radius:999px;
  background:transparent; color:var(--ink-soft);
  transition:background .35s ease, color .35s ease;
}
.lang-btn:hover{ color:var(--denza-blue); }
.lang-btn.is-active{
  background:linear-gradient(135deg, var(--denza-blue-light), var(--denza-blue));
  color:#fff;
}

/* ── Контейнер ── */
.page{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); max-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
}

/* ── Шапка ── */
.masthead{ text-align:center; margin-bottom:clamp(18px,3.2vh,40px); }

.logo-badge{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:clamp(70px,11vh,96px);
  padding:clamp(14px,2.4vh,24px) clamp(28px,5vw,40px);
  background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%);
  border-radius:22px;
  box-shadow:
    0 24px 50px -24px rgba(10,31,77,.35),
    0 1px 0 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(10,31,77,.06) inset;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
/* Световой блик по бейджу */
.badge-sheen{
  position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
  transform:skewX(-18deg);
  animation:sheen 6.5s ease-in-out 1.2s infinite;
}

.logo-img{ display:block; height:clamp(42px,7vh,56px); width:auto; max-width:360px; object-fit:contain; }

.eyebrow{
  display:block; margin-top:clamp(14px,2.6vh,26px);
  font-family:var(--font-display); font-weight:600;
  font-size:11px; letter-spacing:.36em; text-indent:.36em; text-transform:uppercase;
  color:var(--denza-blue);
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both .08s;
}
.slogan{
  margin-top:12px;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(10px,2.7vw,12.5px);
  letter-spacing:.30em; text-indent:.30em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both .14s;
}

/* ── Ссылки ── */
.links{ display:flex; flex-direction:column; gap:clamp(8px,1.4vh,13px); }

.link-card{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:clamp(54px,7.6vh,66px);
  padding:10px 18px 10px 92px;          /* слева место под синюю плитку-иконку + отступ текста */
  border-radius:var(--radius);
  background:#ffffff;
  color:var(--ink); text-decoration:none;
  border:1px solid rgba(10,31,77,.08);
  box-shadow:0 1px 2px rgba(10,31,77,.04), 0 14px 30px -22px rgba(10,31,77,.5);
  overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease, border-color .6s ease;
  animation:rise .55s cubic-bezier(.2,.7,.2,1) both;
}

/* Синяя угловая заливка с фирменным паттерном «палочки» */
.link-card::before{
  content:""; position:absolute; z-index:0;
  top:-2px; bottom:-2px; left:-26px; width:96px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.15' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M12 5 L6 17'/%3E%3Cpath d='M34 5 L28 17'/%3E%3Cpath d='M23 27 L17 39'/%3E%3Cpath d='M45 27 L39 39'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px,
    linear-gradient(135deg, var(--denza-blue-light) 0%, var(--denza-blue) 70%, var(--denza-dark-blue) 100%);
  transform:skewX(-12deg);
  box-shadow:0 10px 24px -12px rgba(0,48,135,.9);
  transition:width .65s cubic-bezier(.2,.7,.2,1);
}
.link-card:hover::before, .link-card:focus-visible::before{ width:calc(100% + 52px); }

/* Тонкая рамка */
.link-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:3;
  background:linear-gradient(180deg, rgba(10,31,77,.12), rgba(10,31,77,.04) 60%, rgba(10,31,77,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  transition:background .5s ease;
}
.link-card:hover, .link-card:focus-visible{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 24px 46px -18px rgba(0,48,135,.5);
  outline:none;
}
.link-card:hover::after, .link-card:focus-visible::after{
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.2));
}
.link-card:active{ transform:translateY(-1px) scale(.995); }

/* Иконка в синей плитке */
.ic{
  position:absolute; left:0; top:0; bottom:0; width:64px; z-index:2;
  display:grid; place-items:center; color:#fff;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.link-card:hover .ic{ transform:scale(1.08); }
.ic svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
         filter:drop-shadow(0 1px 2px rgba(0,16,58,.5)); }

/* Текст */
.txt{
  position:relative; z-index:2; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:3px;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.link-card:hover .txt{ transform:translateX(3px); }
.title{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.04em;
  color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .5s ease;
}
.sub{
  font-size:12.5px; font-weight:400; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .5s ease;
}
.link-card:hover .title{ color:#fff; }
.link-card:hover .sub{ color:rgba(255,255,255,.85); }

/* Кнопка-стрелка */
.arrow{
  position:relative; z-index:2; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:#9aa3b4;
  background:rgba(10,31,77,.04);
  box-shadow:inset 0 0 0 1px rgba(10,31,77,.1);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), color .5s ease, background .5s ease, box-shadow .5s ease;
}
.arrow svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.link-card:hover .arrow{
  color:var(--denza-blue);
  background:#fff;
  box-shadow:inset 0 0 0 1px #fff, 0 8px 16px -8px rgba(255,255,255,.6);
  transform:translate(3px,-3px) scale(1.08);
}

/* Главная ссылка — золотая грань */
.link-card--primary::after{
  background:linear-gradient(135deg, rgba(244,217,160,.85), rgba(150,182,255,.25));
}

/* Разделитель */
.divider{
  display:flex; align-items:center; gap:14px; margin:clamp(8px,1.6vh,15px) 2px 5px;
  color:var(--ink-soft);
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
}
.divider::before, .divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(183,144,63,.5), transparent);
}

/* Подвал */
.footer{ margin-top:clamp(16px,3vh,40px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(7px,1.3vh,12px); }
.footer-rule{ width:46px; height:1px; background:linear-gradient(90deg, transparent, var(--gold-deep), transparent); }
.footer-mark{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.42em; text-indent:.42em; color:rgba(10,31,77,.45);
}
.footer-copy{ font-size:11px; font-weight:400; color:var(--ink-soft); }

/* ── Анимации ── */
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes sheen{ 0%,72%{left:-60%;} 88%,100%{left:140%;} }
@keyframes float1{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(26px);} }
@keyframes float2{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-30px);} }

.links .link-card:nth-child(1){ animation-delay:.10s; }
.links .link-card:nth-child(2){ animation-delay:.15s; }
.links .link-card:nth-child(3){ animation-delay:.20s; }
.links .link-card:nth-child(4){ animation-delay:.25s; }
.links .link-card:nth-child(5){ animation-delay:.30s; }
.links .link-card:nth-child(7){ animation-delay:.37s; }
.links .link-card:nth-child(8){ animation-delay:.42s; }
.footer{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both .5s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ── Мобильные: контент сверху + отступ под переключателем языка ── */
@media (max-width:640px){
  body{
    height:auto; min-height:100dvh; overflow-y:auto;
    align-items:flex-start;
    padding-top:72px; padding-bottom:32px;
  }
  .page{ justify-content:flex-start; max-height:none; }
  .lang-switch{ top:14px; right:14px; }
  .masthead{ margin-bottom:clamp(20px,3vh,32px); }
}

/* ── Узкие экраны ── */
@media (max-width:380px){
  .logo-badge{ padding:20px 26px; }
  .logo-img{ height:46px; }
  .link-card{ padding-left:80px; gap:12px; }
  .ic{ width:56px; }
}