:root{
    --bg-dark:url("images/back-dark.jpg");
    --bg-light:url("images/back-light.jpg");
    --header-h:64px;

    --surface:rgba(255,255,255,.72);
    --surface-strong:rgba(255,255,255,.9);
    --text:#101114;
    --muted:#666b73;
    --accent:#007aff;
    --shadow:0 10px 30px rgba(0,0,0,.12);
    --backdrop-blur:blur(12px);
}
[data-theme="dark"]{
    --surface: rgba(44,44,46,.72);
    --surface-strong: rgba(58,58,60,.86);
    --text:#f2f2f7;
    --muted:#a1a1a6;
    --accent:#0a84ff;
    --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* База */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
    color:var(--text);
}

/* Фон */
#bg{
    position:fixed;inset:0;z-index:-1;
    background-image:var(--bg-light);
    background-size:cover;background-repeat:no-repeat;background-position:50% 50%;
    will-change:background-position;
    animation:float-bg 42s ease-in-out infinite;
}
[data-theme="dark"] #bg{ background-image:var(--bg-dark) }

/* Мягкое круговое движение */
@keyframes float-bg{
    0%{background-position:50% 50%}
    5%{background-position:51% 49%}
    10%{background-position:52% 50%}
    15%{background-position:53% 51%}
    20%{background-position:52% 52%}
    25%{background-position:51% 53%}
    30%{background-position:50% 52%}
    35%{background-position:49% 51%}
    40%{background-position:48% 50%}
    45%{background-position:49% 49%}
    50%{background-position:50% 48%}
    55%{background-position:51% 49%}
    60%{background-position:52% 50%}
    65%{background-position:51% 51%}
    70%{background-position:50% 52%}
    75%{background-position:49% 51%}
    80%{background-position:48% 50%}
    85%{background-position:49% 49%}
    90%,95%,100%{background-position:50% 50%}
}

/* Шапка */
.site-header{
    position:sticky;top:0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px clamp(12px,3vw,28px);
    backdrop-filter:var(--backdrop-blur);
    background:var(--surface);
    border-bottom:1px solid rgba(0,0,0,.06);
}
.header-left{display:flex;align-items:center;gap:12px}

/* Лого (пропорционально) */
.logo img{display:block;height:36px;width:auto;max-width:44px}

/* Бренд: въезд + «печать» */
.brand{overflow:hidden;max-width:100%}
.brand-text{
    display:inline-block;white-space:nowrap;
    transform:translateX(-12px);opacity:0;
    animation:brand-enter .7s ease-out .2s forwards,brand-type 2.8s steps(22) .35s forwards;
    border-right:2px solid transparent;
}
@keyframes brand-enter{to{transform:translateX(0);opacity:1}}
@keyframes brand-type{from{width:0;border-right-color:currentColor}85%{border-right-color:currentColor}to{width:100%;border-right-color:transparent}}

.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Единый стиль «пилюль» */
.pill{
    height:36px;padding:0 14px;
    border-radius:999px;border:1px solid rgba(0,0,0,.10);
    background:var(--surface-strong);color:var(--text);
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:var(--shadow);
    transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
    text-decoration:none;
}
.pill:hover{transform:translateY(-1px);border-color:rgba(0,0,0,.18)}
.pill:active{transform:translateY(0)}
.pill-icon{padding:0 12px}
.pill .pill-label{margin-left:4px}

/* SVG-иконки (через mask) */
.icon{width:18px;height:18px;display:inline-block;background:currentColor}
.icon.theme   {mask:url("icons/theme.svg") no-repeat center/contain;-webkit-mask:url("icons/theme.svg") no-repeat center/contain}
.icon.user    {mask:url("icons/user.svg") no-repeat center/contain;-webkit-mask:url("icons/user.svg") no-repeat center/contain}
.icon.close   {mask:url("icons/close.svg") no-repeat center/contain;-webkit-mask:url("icons/close.svg") no-repeat center/contain}
.icon.telegram{mask:url("icons/telegram.svg") no-repeat center/contain;-webkit-mask:url("icons/telegram.svg") no-repeat center/contain}
.icon.whatsapp{mask:url("icons/whatsapp.svg") no-repeat center/contain;-webkit-mask:url("icons/whatsapp.svg") no-repeat center/contain}

/* Разделитель-пробел */
.spacer{width:56px;flex:0 0 56px}

/* Контент и плитки */
.content{
    padding:calc(var(--header-h) + 16px) clamp(18px,3vw,28px) clamp(18px,3vw,28px);
}
.tiles{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;margin:18px 0 26px;
}
.tile{
    display:block;padding:18px 18px 20px;background:var(--surface);
    border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:var(--shadow);
    text-decoration:none;color:var(--text);
    opacity:0;transform:translateY(-18px);
    animation:tile-drop .5s ease forwards;animation-delay:calc(var(--i) * .08s + .12s);
    will-change:transform,opacity;
}
.tile:hover{transform:translateY(-2px)}
@keyframes tile-drop{to{opacity:1;transform:translateY(0)}}
.tile h3{margin:0 0 6px;font-size:18px}
.tile p{margin:0;color:var(--muted)}

/* Блоки */
.block{
    background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:16px;
    padding:20px;margin:22px 0;box-shadow:var(--shadow);
    scroll-margin-top:calc(var(--header-h) + 12px);
}

/* Модалка */
.modal{position:fixed;inset:0;display:none}
.modal.open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.modal__dialog{
    position:relative;width:min(92vw,440px);margin:10vh auto;
    background:var(--surface-strong);border:1px solid rgba(0,0,0,.1);border-radius:16px;
    color:var(--text);box-shadow:var(--shadow);padding:14px;
}
.modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--surface);padding:6px;border-radius:999px;margin-bottom:12px}
.tab{border-radius:999px;padding:8px 0;border:0;background:transparent;color:inherit;cursor:pointer;transition:background .2s ease,color .2s ease}
.tab.active{background:rgba(255,255,255,.82);color:#000}
[data-theme="dark"] .tab.active{background:rgba(158,158,160,.25);color:#fff}
.tabpanes .pane{display:none}
.tabpanes .pane.active{display:grid;gap:10px}
label{display:grid;gap:6px;font-size:14px}
input{height:40px;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:var(--surface);color:var(--text);padding:0 12px}
.pill.wide{width:100%}

/* Мобильный */
@media (max-width:920px){
    .logo img{height:32px}
    .pill-l{display:none}
}
@media (max-width:520px){
    .brand{display:none}
    .spacer{display:none}
    .header-actions{gap:8px}
    .pill{height:34px;padding:0 12px}
    .pill-icon{padding:0 10px}
    .tiles{grid-template-columns:1fr;gap:14px}
}

/* SEO блок */
.seo-text{
    width:min(1100px,92vw);
    margin: clamp(28px,5vw,48px) auto;
    padding: clamp(16px,3vw,28px);
    border-radius:16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:1px solid var(--panel-border,rgba(0,0,0,.08));
    background: var(--seo-bg, rgba(255,255,255,.60));
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
html[data-theme="dark"] .seo-text{
    background: rgba(20,20,22,.55);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.seo-text .seo-container{color:var(--seo-fg,#1b1d22)}
html[data-theme="dark"] .seo-text .seo-container{color:#e8eaed}
.seo-text h2{
    font-size: clamp(20px,2.4vw,28px);
    line-height:1.25;margin:0 0 12px;letter-spacing:.2px;font-weight:700;
}
.seo-text p{margin:0 0 12px;line-height:1.65;opacity:.95}
.seo-text .seo-list{margin:10px 0 14px 0;padding-left:1.1em;display:grid;gap:6px}
.seo-text .seo-list li{list-style:disc;line-height:1.6;opacity:.95}
.seo-text a{color:#2563eb;text-decoration:none;border-bottom:1px dashed currentColor}
html[data-theme="dark"] .seo-text a{color:#7aa2ff}
.seo-text a:hover{border-bottom-style:solid}