@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    min-height:100%;
    font-family:"Segoe UI",sans-serif;
    color:#f0d9b0;
    background:#1d1812;
}

/* =========================
   BACKGROUND IMAGE
========================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at 20% 10%, rgba(212, 163, 95, .15), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(80, 160, 255, .12), transparent 24%),
        linear-gradient(
            rgba(20,14,10,.82),
            rgba(20,14,10,.88)
        );

    background-size:cover;
    background-position:center;

    z-index:-3;
}

/* =========================
   CANVAS (mesh layer)
========================= */

#mesh-background{
    position:fixed;
    inset:0;
    z-index:1; /* ВАЖНО: ниже контента */
    pointer-events:none;
}

#mesh-background canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}

/* =========================
   OVERLAY
========================= */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(10,8,6,.35);
    z-index:2;
    pointer-events:none;
}

/* =========================
   CONTENT (ВСЁ ВЫШЕ СЕТИ)
========================= */

.hero,
main{
    position:relative;
    z-index:3;
}

/* =========================
   TOP NAVIGATION
========================= */

.site-nav{
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:12px 24px;
    background:rgba(15,10,7,.92);
    border-bottom:1px solid rgba(212,163,95,.35);
    backdrop-filter:blur(10px);
}

.site-nav-brand{
    font-family:"Philosopher",serif;
    color:#e4b066;
    font-size:1.35rem;
    letter-spacing:2px;
}

.site-nav-links{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.site-nav-links a{
    padding:8px 14px;
    border:1px solid transparent;
    border-radius:8px;
    color:#c9a26a;
}

.site-nav-links a.active,
.site-nav-links a:hover{
    border-color:rgba(212,163,95,.55);
    background:rgba(212,163,95,.12);
    color:#ffd08a;
}

/* =========================
   HERO
========================= */

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
    padding:40px 20px;
    flex-wrap:wrap;
}

.logo-block img{
    width:220px;
    height:220px;
    border-radius:50%;

    box-shadow:
        0 0 25px rgba(255,180,70,.35),
        0 0 60px rgba(255,150,30,.2);
}

.title-left h1{
    font-family:"Philosopher",serif;
    font-size:4rem;
    letter-spacing:5px;
    color:#d4a35f;
}

.title-right h2{
    font-family:"Philosopher",serif;
    font-size:2rem;
    max-width:300px;
    color:#f1c98d;
}

/* =========================
   MAIN
========================= */

main{
    max-width:1200px;
    margin:auto;
    padding:20px;
}

.glass-panel{
    margin-bottom:25px;
    background:rgba(40,25,12,.55);
    backdrop-filter:blur(10px);
    border:1px solid rgba(212,163,95,.35);
    border-radius:18px;
    padding:30px;
}

.glass-panel h2{
    color:#e4b066;
    margin-bottom:15px;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,190,100,.2);
    border-radius:14px;
    padding:20px;
}

/* =========================
   TABLE
========================= */

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:15px;
    border:1px solid rgba(220,180,110,.25);
}

th{
    background:rgba(160,110,40,.35);
}

/* =========================
   FOOTER
========================= */

footer{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(15,10,7,.95);
    border-top:1px solid rgba(212,163,95,.35);

    color:#c9a26a;
    z-index:4; /* выше всего */
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){
    .site-nav{
        align-items:flex-start;
        flex-direction:column;
        padding:12px 16px;
    }

    .hero{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .title-left h1{
        font-size:3rem;
    }

    .title-right h2{
        font-size:1.4rem;
    }

    .logo-block img{
        width:180px;
        height:180px;
    }
}

/* =========================
   LINKS (MeshCore STYLE)
========================= */

a{
    color:#f1c98d;
    text-decoration:none;
    position:relative;
    transition:0.25s ease;
}

/* тонкая светящаяся линия */
a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:1px;

    background:rgba(255,190,90,0.35);
    transform:scaleX(0.4);
    transform-origin:left;

    transition:0.25s ease;
    opacity:0.6;
}

/* hover эффект — "активный узел сети" */
a:hover{
    color:#ffd08a;
    text-shadow:
        0 0 10px rgba(255,180,80,0.4),
        0 0 25px rgba(255,160,60,0.2);
}

a:hover::after{
    transform:scaleX(1);
    background:rgba(255,200,120,0.9);
    opacity:1;
}

/* активное нажатие */
a:active{
    transform:scale(0.98);
}

/* ссылки внутри карточек чуть мягче */
.card a{
    display:inline-block;
    margin-top:8px;
    font-weight:500;
}

/* ссылки в таблицах/тексте */
.glass-panel a{
    font-weight:500;
}