/* =========================================================
   AbsoLibre.ru — landing styles
   Полный файл: база + футер + страница документа.
   Адаптив: от 320px до 4K. Без фреймворков.
   ========================================================= */

/* ---------- Шрифты (self-host, с graceful fallback) ---------- */
@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/pt-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/pt-sans-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Переменные ---------- */
:root {
    --bg:       #000000;
    --fg:       #ffffff;
    --muted:    #9aa4b2;
    --accent:   #4fc3ff;
    --accent-2: #00b3ff;
    --maxw:     760px;

    --font: 'PT Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
    isolation: isolate;
    line-height: 1.5;
}

/* =========================================================
   Звёздное небо
   ========================================================= */
.stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 120%, #0a0e18 0%, #000 60%),
        #000;
}

.stars__layer {
    position: absolute;
    inset: -50%;
    background-repeat: repeat;
    opacity: .9;
    will-change: transform;
}

.stars__layer--sm {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 120px 80px, #cfe8ff, transparent),
        radial-gradient(1px 1px at 200px 160px, #fff, transparent),
        radial-gradient(1px 1px at 300px 40px, #bcd9ff, transparent),
        radial-gradient(1px 1px at 400px 220px, #fff, transparent);
    background-size: 500px 300px;
    animation: drift 220s linear infinite;
    opacity: .55;
}

.stars__layer--md {
    background-image:
        radial-gradient(1.5px 1.5px at 60px 90px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 260px 200px, #eaf4ff, transparent),
        radial-gradient(1.5px 1.5px at 420px 60px, #fff, transparent);
    background-size: 600px 400px;
    animation: drift 320s linear infinite reverse;
    opacity: .7;
}

.stars__layer--lg {
    background-image:
        radial-gradient(2px 2px at 100px 150px, #ffffff, transparent),
        radial-gradient(2px 2px at 500px 320px, #9fd8ff, transparent);
    background-size: 800px 500px;
    animation: drift 480s linear infinite;
    opacity: .9;
    filter: drop-shadow(0 0 3px rgba(160, 210, 255, .6));
}

@keyframes drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-300px, -200px, 0); }
}

/* =========================================================
   Топбар
   ========================================================= */
.topbar {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    padding: clamp(12px, 2.5vw, 24px) clamp(14px, 3vw, 32px);
}

.topbar__mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fg);
    text-decoration: none;
    font-size: clamp(12px, 1.4vw, 15px);
    font-weight: 400;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(6px);
    transition: border-color .2s, color .2s, background .2s, transform .2s;
    max-width: calc(100vw - 28px);
    overflow: hidden;
    white-space: nowrap;
}

.topbar__mail:hover,
.topbar__mail:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(79, 195, 255, .07);
    transform: translateY(-1px);
    outline: none;
}

.topbar__icon { flex: 0 0 auto; }

.topbar__text { text-overflow: ellipsis; overflow: hidden; }

/* =========================================================
   Сцена
   ========================================================= */
.scene {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: 60dvh;
}

/* --- Планета --- */
.earth {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:  clamp(240px, 62vmin, 620px);
    height: clamp(240px, 62vmin, 620px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 1;
}

.earth__glow {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(79, 195, 255, .35) 0%,
        rgba(79, 195, 255, .12) 35%,
        rgba(0, 0, 0, 0) 70%);
    filter: blur(14px);
    animation: pulse 6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: .8; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.04); }
}

.earth__sphere {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        inset -22px -18px 60px rgba(0, 0, 0, .85),
        inset 18px 14px 40px rgba(79, 195, 255, .18),
        0 0 60px rgba(79, 195, 255, .25),
        0 0 120px rgba(0, 179, 255, .12);
    transform: rotate(-15deg);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Карта Земли: если earth.jpg нет — работает градиент-фолбэк */
.earth__map {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 200%;
    /* ФОЛБЭК (если локальной картинки нет): синтетические «континенты» */
    background-color: #0b3d6b;
    background-image:
        radial-gradient(ellipse 18% 14% at 18% 32%, #2f7a3a 0%, #1f5a28 60%, transparent 62%),
        radial-gradient(ellipse 14% 20% at 30% 62%, #2f7a3a 0%, #1f5a28 60%, transparent 62%),
        radial-gradient(ellipse 22% 18% at 62% 30%, #2f7a3a 0%, #1f5a28 60%, transparent 62%),
        radial-gradient(ellipse 20% 26% at 78% 60%, #2f7a3a 0%, #1f5a28 60%, transparent 62%),
        radial-gradient(ellipse 10% 14% at 48% 78%, #2f7a3a 0%, #1f5a28 60%, transparent 62%),
        radial-gradient(ellipse 60% 40% at 50% 50%, #155b8f 0%, #0b3d6b 80%);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    animation: spin-earth 40s linear infinite;
    will-change: transform;
}

/* Если index.php обнаружил assets/img/earth.jpg — он переопределит background-image */
@keyframes spin-earth {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.earth__shade {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 35%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 35%),
        radial-gradient(circle at 72% 68%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}

.earth__spec {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 68% 28%, rgba(180, 230, 255, .55) 0%, rgba(180,230,255,0) 22%);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: var(--maxw);
    padding: clamp(16px, 4vw, 32px);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .85), 0 0 60px rgba(0, 0, 0, .6);
}

.hero__eyebrow {
    margin: 0 0 clamp(8px, 1.4vw, 14px);
    font-size: clamp(10px, 1.2vw, 13px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: .9;
    font-weight: 400;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

.hero__brand {
    margin: 0 0 clamp(10px, 1.8vw, 18px);
    font-family: var(--font);
    font-weight: 700;
    font-size: clamp(40px, 9vw, 112px);
    letter-spacing: clamp(0.5px, 0.4vw, 3px);
    line-height: 1;
    color: #fff;
    background: linear-gradient(180deg, #ffffff 0%, #cfe8ff 60%, #7fb9e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(79, 195, 255, .45));
}

.hero__tagline {
    margin: 0 auto clamp(12px, 2vw, 20px);
    font-size: clamp(14px, 2.2vw, 22px);
    font-weight: 400;
    color: #e6f3ff;
    max-width: 40ch;
    opacity: .95;
}

.hero__desc {
    margin: 0 auto clamp(20px, 3vw, 32px);
    font-size: clamp(12px, 1.5vw, 15px);
    color: var(--muted);
    max-width: 52ch;
    line-height: 1.6;
}

.hero__cta {
    display: inline-block;
    padding: clamp(10px, 1.4vw, 14px) clamp(20px, 3vw, 32px);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: #001019;
    font-weight: 700;
    font-size: clamp(13px, 1.4vw, 16px);
    text-decoration: none;
    letter-spacing: .3px;
    box-shadow: 0 8px 30px rgba(0, 179, 255, .35);
    transition: transform .2s, box-shadow .2s, filter .2s;
    text-shadow: none;
}

.hero__cta:hover,
.hero__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 179, 255, .55);
    filter: brightness(1.05);
    outline: none;
}

/* =========================================================
   Футер
   ========================================================= */
.footer {
    position: relative;
    z-index: 5;
    display: grid;
    gap: clamp(12px, 2vw, 20px);
    justify-items: center;
    text-align: center;
    padding: clamp(14px, 2.5vw, 28px);
    color: #64707f;
    font-size: clamp(11px, 1.2vw, 13px);
}

.footer__legal {
    width: 100%;
    max-width: 1100px;
    padding: 0 clamp(14px, 3vw, 32px);
}

.footer__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1.2vw, 14px) clamp(14px, 2.2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__list li { display: inline; }

.footer__list a {
    color: #8892a0;
    text-decoration: none;
    font-size: clamp(11px, 1.15vw, 13px);
    line-height: 1.4;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
    padding-bottom: 1px;
}

.footer__list a:hover,
.footer__list a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}

.footer__list li + li::before {
    content: "·";
    color: #3a414c;
    margin-right: clamp(14px, 2.2vw, 28px);
    margin-left: calc(-1 * clamp(14px, 2.2vw, 28px) + clamp(6px, 1.2vw, 14px));
    display: inline-block;
    vertical-align: middle;
}

.footer__copy {
    margin: 0;
    color: #64707f;
    font-size: clamp(11px, 1.2vw, 13px);
    text-align: center;
}

/* =========================================================
   Страница документа
   ========================================================= */
.topbar--doc {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fg);
    text-decoration: none;
    font-size: clamp(12px, 1.4vw, 15px);
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(6px);
    transition: border-color .2s, color .2s, background .2s, transform .2s;
    white-space: nowrap;
}

.topbar__back:hover,
.topbar__back:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(79, 195, 255, .07);
    transform: translateY(-1px);
    outline: none;
}

.doc {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px);
    min-height: 60dvh;
}

.doc__article {
    width: 100%;
    max-width: 760px;
    background: rgba(8, 12, 20, .55);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: clamp(14px, 2vw, 22px);
    padding: clamp(24px, 4vw, 56px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.doc__header { margin-bottom: clamp(20px, 3vw, 32px); }

.doc__eyebrow {
    margin: 0 0 clamp(8px, 1.2vw, 12px);
    font-size: clamp(10px, 1.15vw, 12px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: .9;
}

.doc__title {
    margin: 0 0 clamp(14px, 2vw, 20px);
    font-family: var(--font);
    font-weight: 700;
    font-size: clamp(24px, 4.2vw, 44px);
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 0%, #cfe8ff 70%, #7fb9e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.doc__rule {
    border: 0;
    height: 1px;
    margin: 0;
    background: linear-gradient(90deg,
        rgba(79, 195, 255, .8) 0%,
        rgba(79, 195, 255, .1) 60%,
        rgba(79, 195, 255, 0) 100%);
}

.doc__body {
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.75;
    color: #d6e2ee;
}

.doc__body p { margin: 0 0 1em; }
.doc__body p:last-child { margin-bottom: 0; }

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 520px) {
    .footer__list { gap: 8px 18px; }
    .footer__list li + li::before { display: none; }
}

@media (max-width: 360px) {
    .topbar__text { font-size: 11px; }
    .hero__brand  { letter-spacing: 0.4px; }
    .earth        { width: 78vmin; height: 78vmin; }
    .doc__article { padding: 20px 16px; border-radius: 14px; }
    .topbar--doc  { padding: 12px 14px; }
    .topbar__back span { display: none; }
    .topbar__back { padding: 8px 10px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .earth { width: 70vmin; height: 70vmin; }
    .hero  { padding: 8px; }
    .hero__desc { display: none; }
}

@media (min-width: 1024px) {
    .scene { min-height: 70dvh; }
}

/* Уважение к системным настройкам */
@media (prefers-reduced-motion: reduce) {
    .earth__map,
    .stars__layer,
    .earth__glow { animation: none !important; }
}

/* Печать */
@media print {
    .stars, .earth { display: none; }
    body { background: #fff; color: #000; }
    .hero__brand,
    .doc__title {
        -webkit-text-fill-color: #000;
        background: none;
        filter: none;
    }
}