#contacts{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  /* Part of the normal page scroll (no inner scroll box), so the whole page
     scrolls in one continuous motion. At least a screen tall; grows with the
     cards when there are more of them. Content is top-aligned with a fixed
     padding all around, so the first card sits just below the top edge (no big
     centered gap) and the last card always keeps the bottom padding - however
     many cards there are, whether they fit on screen or you scroll to them. */
  min-height:100vh;
  width:100%;
  box-sizing:border-box;
  padding:clamp(40px, 6vh, 72px) 0;

  /* Gradient is pinned to one viewport height at the bottom instead of being
     stretched over the whole (now variable-height) section - keeps the green
     glow the same size no matter how many cards there are. */
  background-color:var(--layer0);
  background-image: linear-gradient(
    to top,
    var(--layer0) 0%,
    var(--main-color) 5%,
    var(--layer0) 100%);
  background-repeat:no-repeat;
  background-size:100% 100vh;
  background-position:bottom center;
}

/* Ambient particles layer: fills the whole section behind the cards. The
   canvas never takes pointer events (hover is detected from the window), so
   the cards stay fully clickable. */
#contacts-particles{
  position:absolute;
  inset:0;
  z-index:0;
}
#contacts-particles canvas{
  pointer-events:none !important;
}

/* Cursor glow-snake segments (positioned by contacts.js): soft purple blobs
   that chain into a snake behind the moving cursor and coil into a swirling
   cyclone when it rests. Screen-blended so they light up the particles. */
.contacts-glow-seg{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  pointer-events:none;

  border-radius:50%;

  background:radial-gradient(circle,
      rgba(74, 6, 125, .38) 0%,
      rgba(74, 6, 125, .14) 40%,
      transparent 68%);
  mix-blend-mode:screen;

  opacity:0;
  transition:opacity .45s ease;
  will-change:transform;
}

/* Contact cards ----------------------------------------------------------- */
#contacts-cards{
    /* Above the particles canvas. */
    position:relative;
    z-index:1;

    display:flex;
    flex-direction:column;
    align-items:center;
    /* Fixed spacing between cards, the same at every screen size. */
    gap:24px;

    /* Full window width so staggered cards reach the left/right window edges,
       with a small inset so they sit near the border without touching it.
       Top/bottom spacing is owned by #contacts's padding. */
    width:100%;
    box-sizing:border-box;
    padding:0 30px;
}

.contact-card{
    /* Per-card brand color, set inline from JSON (falls back to site accent). */
    --accent:var(--main-color);

    display:flex;
    flex-direction:row;
    align-items:center;
    gap:26px;

    width:850px;
    max-width:100%;
    box-sizing:border-box;
    padding:26px 30px;

    background:#000;
    border:1.5px solid var(--accent);
    border-radius:32px;

    box-shadow:
        0 0 22px -4px var(--accent),
        inset 0 0 26px -14px var(--accent);

    transition:box-shadow .3s ease;
}
/* Intensify the neon glow on hover. */
.contact-card:hover{
    box-shadow:
        0 0 34px 0 var(--accent),
        inset 0 0 30px -12px var(--accent);
}

/* Chessboard order: odd cards sit against the left edge, even cards against the
   right, and even cards also mirror so the logo hugs the outer edge each time. */
.contact-card:nth-child(odd){
    align-self:flex-start;
}
.contact-card:nth-child(even){
    align-self:flex-end;
    flex-direction:row-reverse;
}

.contact-card-logo{
    flex:0 0 auto;

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

    width:150px;
    height:150px;
    border-radius:50%;

    background:radial-gradient(circle at 50% 45%,
        color-mix(in srgb, var(--accent) 28%, transparent),
        transparent 72%);
}
.contact-card-logo img{
    width:95px;
    height:95px;
    object-fit:contain;
}
/* Telegram is a circular badge - let it fill the circle like before. */
.contact-card-logo.logo-telegram img{
    width:150px;
    height:150px;
}
/* Instagram and YouTube read heavier than the thin X mark - trim them a touch
   so all three look the same visual size. */
.contact-card-logo.logo-instagram img,
.contact-card-logo.logo-youtube img{
    width:110px;
    height:110px;
}

.contact-card-meta{
    flex:0 0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;

    min-width:140px;
    text-align:center;
}
.contact-meta-row{
    margin:0;
    font-size:16px;
    color:#fff;
}
.contact-meta-label{
    color:rgba(255,255,255,.5);
}
.contact-handle{
    color:var(--accent);
    text-decoration:none;
    font-weight:500;
}
.contact-handle:hover{
    text-decoration:underline;
}
.contact-write{
    margin-top:6px;
    padding:8px 26px;
    margin-top:35px;

    background:var(--accent);
    color:var(--accent-text, #fff);
    font-weight:600;
    text-decoration:none;

    border-radius:20px;
    transition:transform .2s ease, box-shadow .2s ease;
}
.contact-write:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px -4px var(--accent);
}

.contact-card-body{
    flex:1;
    min-width:0;
    align-self:stretch;

    display:flex;
    flex-direction:column;
    gap:12px;

    box-sizing:border-box;
    padding:20px 24px;

    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius:24px;
}
.contact-desc{
    margin:0;
    color:rgba(255,255,255,.9);
    line-height:1.5;
}
.contact-points{
    margin:0;
    padding-left:20px;

    display:flex;
    flex-direction:column;
    gap:4px;

    color:rgba(255,255,255,.8);
    line-height:1.5;
}
.contact-note{
    margin:0;
    color:rgba(255,255,255,.55);
    font-style:italic;
    line-height:1.5;
}

/* Tablet: smaller logos, same card layout ----------------------------------- */
@media (max-width:1024px){
    .contact-card-logo{
        width:120px;
        height:120px;
    }
    .contact-card-logo img{
        width:76px;
        height:76px;
    }
    .contact-card-logo.logo-telegram img{
        width:120px;
        height:120px;
    }
    .contact-card-logo.logo-instagram img,
    .contact-card-logo.logo-youtube img{
        width:88px;
        height:88px;
    }
    .contact-meta-row{
        font-size:15px;
    }
}

@media (max-width:680px){
    .contact-card,
    .contact-card:nth-child(even){
        flex-direction:column;
        text-align:center;

        gap:16px;
        padding:20px 16px;
        border-radius:24px;
    }
    .contact-card-body{
        align-self:auto;
        padding:16px 18px;
    }
    #contacts-cards{
        padding:0 16px;
    }
    .contact-card-logo{
        width:88px;
        height:88px;
    }
    .contact-card-logo img{
        width:56px;
        height:56px;
    }
    .contact-card-logo.logo-telegram img{
        width:88px;
        height:88px;
    }
    .contact-card-logo.logo-instagram img,
    .contact-card-logo.logo-youtube img{
        width:66px;
        height:66px;
    }
    .contact-card-meta{
        gap:10px;
    }
    .contact-meta-row{
        font-size:14px;
    }
    .contact-write{
        margin-top:8px;
    }
}