:root{
  --bg:#0d0d0d;
  --text:#e9e9e9;
  --muted:#bdbdbd;
  --panel:#141414;
  --accent1:#8BC53F; /* WhatsApp green */
  --accent2:#0D72BA; /* Discord blue */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0b0b 0%, #0e0e0e 100%);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{width:min(100%, 92%);margin-inline:auto}

a{color:var(--accent2);text-decoration:none}
a:hover{opacity:.9}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:0.9rem 1rem;border-radius:999px;border:1px solid #2a2a2a;
  background:#111; color:var(--text); box-shadow:var(--shadow);
  font-weight:700; letter-spacing:.2px; transition:transform .08s ease, background .2s ease;
}
.btn.block{display:flex; width:100%}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:transparent; border:1px solid #2f2f2f}
.btn-contact{padding:1rem 1.25rem}

/* Brand-specific buttons */
.btn-whatsapp{background:var(--accent1); color:#0a0a0a; border-color:transparent}
.btn-discord{background:var(--accent2); color:#fff; border-color:transparent}

.site-header{
  position:sticky; top:0; z-index:1000; backdrop-filter: blur(8px);
  background:rgba(12,12,12,.65); border-bottom:1px solid #1a1a1a;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:#fff}
.brand-logo{height:64px; width:auto}
@media (min-width: 700px){ .brand-logo{height:72px} }

.nav{
  position: fixed;
  top:60px; right:1rem; left:1rem;
  display:none; flex-direction:column; gap:.6rem;
  background:#0f0f0f; border:1px solid #212121; border-radius:16px;
  padding:0.8rem;
  box-shadow: var(--shadow);
}
.nav a{color:#ddd; font-weight:600; padding:0.6rem 0.8rem; border-radius:10px}
.nav a:active{background:#161616}

.hamburger{display:block; background:none; border:0; padding:.4rem; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:#ddd; margin:5px 0; border-radius:2px}

/* Hero */
.hero{padding:3rem 0}
.hero-inner{display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center}
.hero h1{font-size:1.7rem; line-height:1.25; margin:0 0 .8rem; font-weight:800}
.hero p{color:var(--muted); max-width:65ch}
.cta-group{display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1rem}
.cta-group .btn{width:100%}

/* Ringed images */
.photo-ring{
  --ring: conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent1));
  padding:5px; border-radius:999px; background:var(--ring);
  width:min(350px, 85vw); aspect-ratio:1/1; margin-inline:auto;
}
.photo-ring img{border-radius:999px; width:100%; height:100%; object-fit:cover; display:block}
.photo-ring.small{width:min(320px, 70vw)}

/* Sections */
.section{padding:2.2rem 0}
.section.shade{background:var(--panel); border-block:1px solid #1a1a1a}

.grid.two-col{display:grid; gap:1.2rem; grid-template-columns:1fr}
.about-photo .circle{border-radius:999px; width:100%; height:100%; object-fit:cover; display:block}

h2{font-size:1.35rem; margin:0 0 .6rem}
h3{margin:.3rem 0 .4rem; font-size:1.05rem}

/* Cards */
.cards{display:grid; gap:.8rem; grid-template-columns:1fr}
.card{background:#101010; border:1px solid #1e1e1e; border-radius:18px; padding:1rem; box-shadow:var(--shadow)}
.card-icon{font-size:1.4rem; color:#eaeaea; margin-bottom:.25rem}
.card-icon img{width:36px; height:36px; display:block}

/* Discord preview */
.discord-preview{width:100%; border-radius:16px; border:1px solid #1e1e1e; box-shadow:var(--shadow)}

.subtle{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid #1a1a1a; padding:1rem 0; background:#0a0a0a}
.footer-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-nav{display:flex; gap:.9rem}
.brand.tiny .brand-logo{height:28px}

/* Modals */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1200}
.modal.open, .modal[data-open="true"]{display:flex}
.modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.modal__dialog{
  position:relative; z-index:1; background:#0f0f0f; border:1px solid #222; border-radius:20px;
  width:min(92vw, 640px); padding:1.2rem; box-shadow: var(--shadow);
}
.modal__title{margin:.2rem 0 .6rem; font-size:1.25rem}
.modal__body{color:var(--muted)}
.modal__list{margin:.6rem 0 0 1rem}
.modal__close{
  position:absolute; top:.6rem; right:.6rem; width:36px; height:36px; border-radius:10px;
  background:#121212; color:#fff; border:1px solid #222; font-size:1.2rem; cursor:pointer;
}

/* Always hug the bottom-right, including iOS safe areas */
.whatsapp-fab{
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 4px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  width: var(--wa-size, 64px);
  height: var(--wa-size, 64px);
  display: inline-block;
  z-index: 9999; /* stay above nav/footer */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.whatsapp-fab img{ width:100%; height:100%; display:block; border:0; background:transparent; }

/* Larger devices */
@media (min-width: 700px){
  .container{width:min(1100px, 92%)}
  .hero-inner{grid-template-columns: 1.2fr .8fr; gap:2.2rem}
  .hero h1{font-size:clamp(2rem, 2.8vw, 3rem)}
  .cta-group{display:flex}
  .grid.two-col{grid-template-columns:1fr 1fr; gap:2rem}
  .cards{grid-template-columns: repeat(3, 1fr)}
  .nav{position:static; display:flex !important; flex-direction:row; background:transparent; border:0; padding:0}
  .nav a{padding:0}
  .hamburger{display:none}
}
/* How I Can Help icon size */
.card-icon img{
  width:56px;   /* was 36px */
  height:56px;  /* was 36px */
}