/* ============================================================
   home.css — Page d'accueil premium GF Resurgence
   Préfixe "home-" pour éviter tout conflit avec style.css.
   Palette : nuit #0b1830 / abysse #060d1c / bleu #42a5f5
             doré #ffd700 / brume #b0c4de
   ============================================================ */

:root{
  --h-night:#0b1830; --h-abyss:#060d1c;
  --h-blue:#42a5f5; --h-blue-soft:#6cb8f7;
  --h-gold:#ffd700; --h-gold-soft:#ffe37a;
  --h-mist:#b0c4de; --h-ink:#eaf1fb;
  --h-card:rgba(18,30,54,.72); --h-line:rgba(108,184,247,.16);
}

/* La home passe en fond sombre premium */
body{ background:var(--h-abyss); color:var(--h-ink); }

@media (prefers-reduced-motion: reduce){
  .home-hero *, .reveal, .home-btn, .home-pillar{ animation:none !important; transition:none !important; }
}

/* ============ HERO ============ */
.home-hero{
  position:relative;
  min-height:calc(100vh - 65px);   /* header fixe = 65px */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:80px 20px;
  overflow:hidden; isolation:isolate;
}
.home-hero::before{
  content:""; position:absolute; inset:-30%; z-index:-3;
  background:
    radial-gradient(60% 50% at 25% 25%, rgba(66,165,245,.20), transparent 60%),
    radial-gradient(55% 45% at 78% 65%, rgba(255,215,0,.10), transparent 60%),
    linear-gradient(160deg,#0b1830 0%,#060d1c 60%,#0a1428 100%);
  animation:home-breathe 18s ease-in-out infinite alternate;
}
@keyframes home-breathe{0%{transform:translate(0,0) scale(1);}100%{transform:translate(2%,1.5%) scale(1.06);}}
.home-hero::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3,7,16,.75) 100%);
}
#homeDust{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;}

.home-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; border-radius:999px;
  border:1px solid rgba(255,215,0,.28); background:rgba(255,215,0,.06);
  color:var(--h-gold-soft); font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transform:translateY(16px); animation:home-rise .9s .1s cubic-bezier(.2,.7,.2,1) forwards;
}
.home-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--h-gold);box-shadow:0 0 12px var(--h-gold);animation:home-pulse 2.4s ease-in-out infinite;}
@keyframes home-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.home-title{margin:26px 0 0;font-size:clamp(2.8rem,8vw,6rem);font-weight:900;line-height:1;letter-spacing:-.02em;}
.home-title .line{
  display:inline-block;
  background:linear-gradient(100deg,var(--h-blue) 0%,#dbeafe 45%,var(--h-gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 30px rgba(66,165,245,.25));
  opacity:0; transform:translateY(28px); animation:home-rise 1s .25s cubic-bezier(.2,.7,.2,1) forwards;
}
.home-sub{max-width:600px;margin:24px auto 0;color:var(--h-mist);font-size:clamp(1rem,2vw,1.15rem);
  opacity:0;transform:translateY(20px);animation:home-rise 1s .5s cubic-bezier(.2,.7,.2,1) forwards;}

.home-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:38px;
  opacity:0;transform:translateY(20px);animation:home-rise 1s .68s cubic-bezier(.2,.7,.2,1) forwards;}
.home-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 32px;
  border-radius:14px;font-weight:800;font-size:1rem;text-decoration:none;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;}
.home-btn.primary{color:#0b1830;background:linear-gradient(135deg,var(--h-gold),#ffb300);box-shadow:0 12px 30px rgba(255,183,0,.28);}
.home-btn.primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(255,183,0,.4);}
.home-btn.primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:home-sheen 4.5s ease-in-out infinite;}
@keyframes home-sheen{0%,60%{left:-120%;}100%{left:140%;}}
.home-btn.ghost{color:var(--h-ink);background:rgba(108,184,247,.08);border:1px solid var(--h-line);}
.home-btn.ghost:hover{transform:translateY(-3px);background:rgba(108,184,247,.16);}

.home-stats{display:flex;gap:clamp(20px,6vw,64px);flex-wrap:wrap;justify-content:center;margin-top:60px;
  opacity:0;transform:translateY(20px);animation:home-rise 1s .85s cubic-bezier(.2,.7,.2,1) forwards;}
.hstat{text-align:center;}
.hstat-num{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:900;color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.hstat-num .u{color:var(--h-gold);}
.hstat-label{margin-top:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--h-mist);opacity:.8;}

.home-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(176,196,222,.4);border-radius:14px;display:flex;justify-content:center;padding-top:8px;}
.home-scroll span{width:4px;height:8px;border-radius:2px;background:var(--h-gold);animation:home-wheel 1.8s ease-in-out infinite;}
@keyframes home-wheel{0%{opacity:0;transform:translateY(-4px);}40%{opacity:1;}100%{opacity:0;transform:translateY(12px);}}

@keyframes home-rise{to{opacity:1;transform:translateY(0);}}

/* ============ SECTIONS ============ */
.home-section{padding:90px 24px;max-width:1200px;margin:0 auto;}
.home-head{text-align:center;margin-bottom:50px;}
.home-eyebrow-2{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--h-blue-soft);}
.home-section-title{margin:12px 0 0;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:#fff;letter-spacing:-.01em;}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

.home-empty{text-align:center;padding:30px;color:var(--h-mist);opacity:.75;}

/* ============ PILIERS ============ */
.home-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.home-pillar{position:relative;padding:32px 26px;border-radius:20px;background:var(--h-card);border:1px solid var(--h-line);overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.home-pillar:hover{transform:translateY(-6px);border-color:rgba(108,184,247,.4);box-shadow:0 20px 44px rgba(0,0,0,.4);}
.home-pillar::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 0%,rgba(66,165,245,.14),transparent 55%);opacity:0;transition:opacity .3s ease;}
.home-pillar:hover::before{opacity:1;}
.p-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;
  background:linear-gradient(135deg,rgba(66,165,245,.18),rgba(255,215,0,.10));border:1px solid var(--h-line);margin-bottom:18px;position:relative;}
.home-pillar h3{font-size:1.2rem;margin-bottom:8px;color:#fff;position:relative;}
.home-pillar p{color:var(--h-mist);font-size:.95rem;position:relative;}

/* ============ CLASSEMENT JOUEURS ============ */
.home-player-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.home-player-card{position:relative;display:flex;flex-direction:column;min-height:210px;border-radius:20px;padding:18px 16px 16px;overflow:hidden;
  border:1px solid var(--h-line);background:radial-gradient(circle at top left,rgba(66,165,245,.10),transparent 35%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:0 12px 26px rgba(0,0,0,.32);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.home-player-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(0,0,0,.4);border-color:rgba(66,165,245,.3);}
.home-player-card.top1{border-color:rgba(255,215,0,.45);background:radial-gradient(circle at top left,rgba(255,215,0,.18),transparent 36%),linear-gradient(180deg,rgba(255,215,0,.08),rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(255,215,0,.1) inset,0 16px 34px rgba(255,215,0,.1),0 12px 26px rgba(0,0,0,.32);}
.home-player-card.top2{border-color:rgba(192,192,192,.3);background:radial-gradient(circle at top left,rgba(192,192,192,.16),transparent 36%),linear-gradient(180deg,rgba(192,192,192,.06),rgba(255,255,255,.02));}
.home-player-card.top3{border-color:rgba(205,127,50,.34);background:radial-gradient(circle at top left,rgba(205,127,50,.16),transparent 36%),linear-gradient(180deg,rgba(205,127,50,.06),rgba(255,255,255,.02));}
.hp-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900;color:#f5f7ff;border:1px solid var(--h-line);background:rgba(66,165,245,.06);margin-bottom:18px;align-self:flex-start;}
.home-player-card.top1 .hp-badge{background:rgba(255,215,0,.1);border-color:rgba(255,215,0,.35);}
.home-player-card.top2 .hp-badge{background:rgba(192,192,192,.08);border-color:rgba(192,192,192,.25);}
.home-player-card.top3 .hp-badge{background:rgba(205,127,50,.08);border-color:rgba(205,127,50,.28);}
.hp-name{font-size:18px;font-weight:900;color:#fff;margin-bottom:18px;letter-spacing:.2px;text-shadow:0 6px 16px rgba(0,0,0,.35);}
.home-player-card.top1 .hp-name{color:#fff3bf;}
.hp-score-box{margin-top:auto;border-radius:18px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--h-line);}
.home-player-card.top1 .hp-score-box{background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(255,215,0,.05));border-color:rgba(255,215,0,.3);}
.hp-score-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#8fa5c8;margin-bottom:8px;}
.hp-score-value{font-size:34px;line-height:1;font-weight:900;color:#fff;text-shadow:0 8px 18px rgba(0,0,0,.35);}
.home-player-card.top1 .hp-score-value{color:#ffd95e;}
.home-player-card.top2 .hp-score-value{color:#ececec;}
.home-player-card.top3 .hp-score-value{color:#e1a66d;}
.hp-score-unit{margin-top:7px;font-size:12px;color:#b7c1e4;opacity:.75;}

/* ============ RUBAN LEADER GUILDE ============ */
.home-leader-ribbon{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(255,215,0,.28);background:linear-gradient(90deg,rgba(255,215,0,.12),rgba(255,255,255,.02));box-shadow:0 10px 25px rgba(0,0,0,.25);}
.home-leader-ribbon .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--h-gold-soft);}
.home-leader-ribbon .leader-name{font-weight:900;color:#fff;}
.home-leader-ribbon .leader-money{font-weight:800;color:var(--h-gold-soft);}

/* ============ TABLE GUILDES ============ */
/* ============================================================
   TABLEAU GUILDES — ÉPURÉ & DENSE (top 5)
   Remplace les règles .home-guild-* dans home.css.
   Tableau centré, largeur contrôlée, colonnes resserrées.
   ============================================================ */

.home-guild-card{
  max-width:760px;                 /* largeur contrôlée, plus étalé */
  margin:0 auto;                   /* centré */
  background:var(--h-card);
  border:1px solid var(--h-line);
  border-radius:20px;
  padding:14px 16px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.home-guild-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  min-width:0;
}
.home-guild-table th{
  padding:8px 14px;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#8fa5c8;
  font-weight:700;
  text-align:left;
}
.home-guild-table th.right,
.home-guild-table td.right{text-align:right;}
.home-guild-table th.center,
.home-guild-table td.center{text-align:center;}

.home-guild-table td{
  padding:13px 14px;
  color:#d6def0;
  background:rgba(255,255,255,.025);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  white-space:nowrap;
}
.home-guild-table td:first-child{
  border-left:1px solid rgba(255,255,255,.05);
  border-radius:12px 0 0 12px;
  width:56px;text-align:center;
}
.home-guild-table td:last-child{
  border-right:1px solid rgba(255,255,255,.05);
  border-radius:0 12px 12px 0;
}
.home-guild-table tr:hover td{background:rgba(66,165,245,.06);}

/* Rang / médailles */
.g-rank{
  display:inline-grid;place-items:center;
  width:30px;height:30px;border-radius:9px;
  font-weight:800;font-size:.92rem;
  background:rgba(255,255,255,.05);color:#9fb0d0;
}
.g-rank-1,.g-rank-2,.g-rank-3{font-size:1.25rem;background:transparent;}

/* Nom de guilde */
.g-name{font-weight:700;color:#eaf1fb;font-size:1rem;}

/* Puces valeurs */
.g-lv{
  display:inline-block;min-width:34px;text-align:center;
  padding:4px 10px;border-radius:999px;
  background:rgba(66,165,245,.12);color:#7ab5ff;font-weight:700;font-size:.82rem;
}
.g-members{color:#b8c6de;font-weight:600;font-variant-numeric:tabular-nums;}
.g-points{color:var(--h-gold,#ffd97a);font-weight:800;font-variant-numeric:tabular-nums;}

@media (max-width: 640px){
  .home-guild-card{padding:10px;}
  .home-guild-table th,.home-guild-table td{padding:11px 10px;font-size:.88rem;}
  .home-guild-table th{font-size:9.5px;}
  .g-name{font-size:.92rem;}
}
/* ============================================================
   TOP 1 GUILDE — ligne champion (version corrigée, bloc continu)
   REMPLACE la version précédente à la fin de home.css.
   ============================================================ */

/* Ligne n°1 : fond doré CONTINU (même dégradé sur toute la ligne) */
.home-guild-table tr.is-first td{
  padding-top:20px;
  padding-bottom:20px;
  background:rgba(255,205,60,.09) !important;
  border-top:1px solid rgba(255,215,0,.35) !important;
  border-bottom:1px solid rgba(255,215,0,.35) !important;
  border-left:none !important;
  border-right:none !important;
}
/* Bordures gauche/droite uniquement aux extrémités (pas entre les cellules) */
.home-guild-table tr.is-first td:first-child{
  border-left:1px solid rgba(255,215,0,.35) !important;
  border-radius:12px 0 0 12px;
}
.home-guild-table tr.is-first td:last-child{
  border-right:1px solid rgba(255,215,0,.35) !important;
  border-radius:0 12px 12px 0;
}

/* Couronne flottante au-dessus de la médaille */
.home-guild-table tr.is-first td:first-child{position:relative;}
.home-guild-table tr.is-first td:first-child::before{
  content:"👑";
  position:absolute;
  top:-16px;left:50%;transform:translateX(-50%);
  font-size:1.7rem;
  filter:drop-shadow(0 0 10px rgba(255,215,0,.9));
  animation:crown-float 2.5s ease-in-out infinite;
  z-index:2;
}
@keyframes crown-float{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-3px);}
}

/* Nom guilde n°1 : plus grand, doré */
.home-guild-table tr.is-first .g-name{
  font-size:1.2rem !important;
  color:#ffe37a !important;
  font-weight:900 !important;
  text-shadow:0 0 14px rgba(255,215,0,.35);
}

/* Médaille or agrandie */
.home-guild-table tr.is-first .g-rank-1{
  font-size:1.5rem !important;
  filter:drop-shadow(0 0 8px rgba(255,215,0,.5));
}

/* Points n°1 : plus gros et éclatants */
.home-guild-table tr.is-first .g-points{
  font-size:1.1rem !important;
  color:#ffd700 !important;
  text-shadow:0 0 12px rgba(255,215,0,.3);
}

/* Puce niveau n°1 rehaussée */
.home-guild-table tr.is-first .g-lv{
  background:rgba(255,215,0,.18);
  color:#ffe37a;
}
.home-guild-table tr.is-first .g-members{
  color:#f0e0b0;
  font-weight:700;
}
/* Chips (base + variantes) */
.chip-lv,.chip-exp,.chip-tree,.chip-point,.chip-kill,.chip-festival,.chip-money{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid rgba(66,165,245,.25);background:rgba(66,165,245,.08);color:#cfe0f5;}
.chip-point{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.1);color:#ffe17a;}
.chip-kill{border-color:rgba(231,76,60,.3);background:rgba(231,76,60,.1);color:#ff9b8f;}
.chip-festival{border-color:rgba(150,100,255,.3);background:rgba(150,100,255,.1);color:#c7b0ff;}
.chip-exp{border-color:rgba(66,165,245,.3);background:rgba(66,165,245,.1);color:#9fcbf7;}
.chip-tree{border-color:rgba(46,204,113,.3);background:rgba(46,204,113,.1);color:#8fe3b0;}
.chip-money{border-color:rgba(255,215,0,.25);background:rgba(255,215,0,.06);color:#ffe17a;font-weight:800;}
.chip-lv{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:#e8eef7;font-weight:700;}

/* ============ BANNIÈRE DISCORD ============ */
.home-cta-band{position:relative;margin:40px auto 90px;max-width:1100px;padding:56px 40px;border-radius:26px;text-align:center;overflow:hidden;
  background:linear-gradient(120deg,#0e2245,#0a1730);border:1px solid var(--h-line);}
.home-cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 20% 0%,rgba(66,165,245,.2),transparent 55%),radial-gradient(50% 120% at 90% 100%,rgba(255,215,0,.12),transparent 55%);}
.home-cta-band>*{position:relative;}
.home-cta-band h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:#fff;}
.home-cta-band p{color:var(--h-mist);margin:12px auto 26px;max-width:520px;}

@media(max-width:768px){
  .home-section{padding:64px 20px;}
  .home-player-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .home-player-grid{grid-template-columns:1fr;}
}

/* ============================================================
   FIX MOBILE — tableau guildes qui déborde sur iPhone
   Empêche la colonne "Points totaux" de sortir de l'écran.
   ============================================================ */
@media (max-width: 560px){
  /* Le conteneur ne dépasse jamais la largeur de l'écran */
  .home-guild-card{
    max-width:100%;
    padding:8px 6px;
    overflow:hidden;
  }
  .home-guild-table{
    width:100%;
    table-layout:fixed;   /* colonnes à largeur contrôlée */
  }
  /* Paddings très réduits */
  .home-guild-table th,
  .home-guild-table td{
    padding:10px 6px !important;
    font-size:.78rem !important;
  }
  .home-guild-table th{font-size:8.5px !important;letter-spacing:.04em;}

  /* Largeurs de colonnes maîtrisées */
  .home-guild-table th:nth-child(1),
  .home-guild-table td:nth-child(1){width:34px;}      /* rang */
  .home-guild-table th:nth-child(3),
  .home-guild-table td:nth-child(3){width:44px;}      /* niveau */
  .home-guild-table th:nth-child(4),
  .home-guild-table td:nth-child(4){width:52px;}      /* personnages */
  .home-guild-table th:nth-child(5),
  .home-guild-table td:nth-child(5){width:auto;}      /* points */

  /* Le nom de guilde peut se tronquer proprement au lieu de pousser */
  .home-guild-table td.g-name,
  .home-guild-table .g-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:90px;
  }
  /* Les points restent lisibles mais compacts, sans déborder */
  .home-guild-table td:last-child{
    white-space:nowrap;
    font-size:.8rem !important;
  }
  .g-points{font-size:.8rem !important;}
  .g-lv{min-width:26px;padding:3px 6px;font-size:.72rem;}

  /* Champion : réduire un peu pour rester dans l'écran */
  .home-guild-table tr.is-first .g-name{font-size:.95rem !important;}
  .home-guild-table tr.is-first .g-points{font-size:.88rem !important;}
}

/* Très petits écrans (iPhone SE, ~320px) */
@media (max-width: 380px){
  .home-guild-table th,
  .home-guild-table td{padding:9px 4px !important;font-size:.72rem !important;}
  .home-guild-table .g-name{max-width:70px;}
}
/* ============================================================
   TABLEAU JOUEURS — harmonisation avec les guildes
   À AJOUTER à la fin de home.css.
   Couronne flottante sur le champion + score doré cohérent.
   ============================================================ */

/* Couronne flottante au-dessus de la carte champion (comme les guildes) */
.home-player-card.top1{
  position:relative;
  overflow:visible;   /* pour que la couronne dépasse en haut */
}
.home-player-card.top1::after{
  content:"👑";
  position:absolute;
  top:-28px;left:50%;transform:translateX(-50%);
  font-size:2.6rem;
  filter:drop-shadow(0 0 14px rgba(255,215,0,.95));
  animation:crown-float 2.5s ease-in-out infinite;
  z-index:3;
}
/* (l'animation crown-float est déjà définie pour les guildes, on la réutilise) */

/* Score du champion : doré éclatant cohérent avec le tableau guildes */
.home-player-card.top1 .hp-score-value{
  color:#ffd700;
  text-shadow:0 0 16px rgba(255,215,0,.4), 0 8px 18px rgba(0,0,0,.35);
}

/* Label unique bien lisible */
.hp-score-unit{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}

/* Responsive : cartes en 1 colonne sur mobile, champion pas coupé */
@media (max-width: 560px){
  .home-player-grid{grid-template-columns:1fr;gap:22px;}
  .home-player-card.top1{margin-top:8px;}  /* espace pour la couronne */
}

.home-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1200px) {
  .home-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-pillars {
    grid-template-columns: 1fr;
  }
}
.home-discord {
  position: relative;
  overflow: hidden;
  max-width: 1180px;
  margin: 90px auto 70px;
  padding: 46px 50px;
  border-radius: 24px;
  border: 1px solid rgba(76, 151, 255, 0.28);
  background:
    radial-gradient(circle at 18% 15%, rgba(78, 151, 255, 0.28), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(255, 203, 43, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(16, 48, 92, 0.94), rgba(8, 17, 34, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 38px;
  align-items: center;
}

.discord-glow {
  position: absolute;
  inset: auto auto -80px -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 203, 43, 0.12);
  filter: blur(35px);
  pointer-events: none;
}

.discord-left,
.discord-cards {
  position: relative;
  z-index: 1;
}

.discord-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(111, 176, 255, 0.28);
  background: rgba(10, 24, 48, 0.58);
  color: #9dccff;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.home-discord h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
}

.discord-main-text {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(220, 232, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.7;
}

.discord-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.discord-note {
  color: rgba(220, 232, 255, 0.66);
  font-weight: 700;
  font-size: 0.92rem;
}

.discord-cards {
  display: grid;
  gap: 14px;
}

.discord-mini-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 17px 18px;
  border-radius: 18px;
  border: 1px solid rgba(112, 174, 255, 0.2);
  background: rgba(6, 16, 34, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.discord-mini-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 207, 58, 0.42);
  background: rgba(10, 24, 50, 0.72);
}

.dm-icon {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 205, 42, 0.95), rgba(255, 151, 34, 0.95));
  box-shadow: 0 10px 24px rgba(255, 185, 35, 0.18);
  font-size: 1.35rem;
}

.discord-mini-card strong {
  color: #fff;
  font-size: 1.02rem;
}

.discord-mini-card span {
  color: rgba(220, 232, 255, 0.68);
  font-size: 0.91rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .home-discord {
    grid-template-columns: 1fr;
    padding: 34px 24px;
    margin: 70px 16px 50px;
  }

  .home-discord h2,
  .discord-main-text {
    text-align: left;
  }

  .discord-actions {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .home-discord {
    padding: 30px 18px;
    border-radius: 20px;
  }

  .discord-mini-card {
    grid-template-columns: 42px 1fr;
    padding: 14px;
  }

  .dm-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .discord-actions .home-btn {
    width: 100%;
    justify-content: center;
  }
}