* { box-sizing: border-box; }
:root {
  --ink: #101217;
  --muted: #68707a;
  --paper: #f4f2ed;
  --orange: #ff7a00;
  --orange-dark: #db5e00;
  --line: rgba(16, 18, 23, .12);
  --card: rgba(250, 249, 246, .95);
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #0e1117;
  font-family: "DM Sans", Arial, sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(120deg, rgba(5,7,11,.82), rgba(9,13,20,.62)),
    url("Server_logo.jpg") center / cover no-repeat;
  filter: saturate(.85) blur(2px);
  transform: scale(1.03);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 50% 20%, rgba(255,122,0,.13), transparent 32%), rgba(4,7,12,.36);
}
.page-glow {
  position: fixed; width: 36rem; height: 36rem; border-radius: 50%;
  filter: blur(90px); opacity: .12; pointer-events: none; z-index: -1;
}
.glow-one { background: var(--orange); top: 20%; left: -18rem; }
.glow-two { background: #f5d476; right: -20rem; bottom: 10%; }

.topbar {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.brand-mark, .footer-logo {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--orange); color: #111; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 900;
}
.brand-mark {
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discord-button {
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.25);
  padding: 11px 17px; border-radius: 999px; font-size: 14px; transition: .25s ease;
}
.discord-button:hover { background: #fff; color: var(--ink); }

.page-shell { padding: 20px 16px 70px; }
.profile-card {
  width: min(1000px, 100%);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 35px 100px rgba(0,0,0,.36);
}
.hero {
  min-height: 530px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #11151c;
  color: #fff;
}
.hero-image-wrap { min-height: 100%; overflow: hidden; position: relative; }
.hero-image-wrap::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 60%, #11151c 100%), linear-gradient(0deg, rgba(0,0,0,.3), transparent 45%);
}
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; display:block; transform: scale(1.02); }
.hero-copy { padding: 70px 64px 60px 34px; align-self: center; }
.eyebrow { margin: 0 0 15px; font-size: 11px; letter-spacing: .16em; font-weight: 800; color: var(--orange); }
h1,h2,h3 { font-family: Montserrat, sans-serif; letter-spacing: -.045em; }
h1 { margin: 0; font-size: clamp(46px, 6vw, 74px); line-height: .95; font-weight: 900; }
h1 span { color: var(--orange); }
.intro { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.73); margin: 27px 0 30px; max-width: 470px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; padding: 14px 19px; border-radius: 10px; text-decoration:none; font-weight:700; font-size:14px; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); color: #111; }
.button-secondary { color:#fff; border:1px solid rgba(255,255,255,.25); }

.content-section {
  padding: 64px 52px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.section-label {
  color: var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-align:center;
  margin: 0 auto 12px;
}
.section-label span { display:none; }
.section-content {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}
.section-content h2, .socials-heading h2, .services-section h2 { font-size: clamp(31px, 4vw, 50px); line-height:1.08; margin:0 0 25px; }
.section-content p { color: var(--muted); font-size:17px; line-height:1.8; max-width: 700px; margin: 0 auto 1.4em; }
.section-content strong { color: var(--ink); }
.quote-section {
  padding: 78px 70px; background: var(--orange); text-align:center;
}
.quote-mark { font-family: Georgia, serif; font-size:100px; line-height:.6; }
blockquote { margin: 16px auto 12px; font-family: Montserrat, sans-serif; font-weight:800; letter-spacing:-.04em; font-size:clamp(28px,4vw,48px); max-width:800px; }
.quote-section p { margin:0; opacity:.72; }
.mission-section { background:#ece9e2; }
.topic-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:35px; }
.topic-grid article { border:1px solid var(--line); padding:25px 20px; border-radius:14px; background:rgba(255,255,255,.38); }
.topic-icon { color:var(--orange); font-weight:800; font-size:12px; }
.topic-grid h3 { font-size:17px; margin:30px 0 8px; }
.topic-grid p { margin:0; font-size:14px; line-height:1.55; }

.community-banner {
  margin: 26px;
  padding: 50px 52px;
  border-radius: 22px;
  background: #14181f url("Server_logo.jpg") right center / 48% auto no-repeat;
  color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; overflow:hidden;
}
.community-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#14181f 20%,rgba(20,24,31,.86) 53%,rgba(20,24,31,.22)); }
.community-banner > * { position:relative; z-index:1; }
.community-banner h2 { font-size:34px; margin:0 0 10px; font-family:Montserrat,sans-serif; letter-spacing:-.04em; }
.community-banner p:not(.eyebrow) { margin:0; max-width:570px; color:rgba(255,255,255,.7); line-height:1.65; }

.socials-section {
  padding: 88px 70px;
  max-width: 980px;
  margin: 0 auto;
}
.socials-heading {
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:end;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.socials-heading h2 { margin-bottom:0; }
.socials-heading > p { max-width:340px; color:var(--muted); line-height:1.6; margin:0; }
.social-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.social-link {
  min-height:72px; padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  text-decoration:none; color:var(--ink); display:grid; grid-template-columns:1fr auto; align-content:center;
  transition:.22s ease; background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.social-link:hover { transform:translateY(-2px); border-color:var(--orange); box-shadow:0 10px 18px rgba(16,18,23,.08); }
.social-link.featured { background:linear-gradient(135deg, #171c23, #10161d); color:#fff; border-color:#171c23; }
.social-type { color:var(--orange); font-size:9px; font-weight:800; letter-spacing:.1em; grid-column:1; text-transform:uppercase; }
.social-name { font-family:Montserrat,sans-serif; font-weight:800; margin-top:4px; grid-column:1; font-size:.88rem; }
.arrow {
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  font-size:18px;
  opacity:.8;
  transition: transform .2s ease;
}
.social-link:hover .arrow { transform:translateX(2px); }
.project-section { background:#f0eee9; padding-bottom:70px; }
.project-list { display:grid; gap:0; }
.project-row { display:grid; grid-template-columns:48px 1fr auto; gap:15px; padding:25px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:.2s ease; }
.project-row:hover { padding-left:8px; }
.project-row > span { color:var(--orange); font-size:12px; font-weight:800; padding-top:5px; }
.project-row h3 { margin:0 0 6px; font-size:18px; }
.project-row p { margin:0; font-size:14px; line-height:1.5; }
.project-row b { font-size:22px; align-self:center; }
.services-section { padding:85px 70px; background:#14181f; color:#fff; }
.services-section h2 { margin-bottom:34px; }
.service-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.service-cards a { min-height:150px; padding:23px; border-radius:15px; background:rgba(255,255,255,.06); color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; transition:.2s ease; border:1px solid rgba(255,255,255,.08); }
.service-cards a:hover { background:rgba(255,255,255,.1); transform:translateY(-3px); }
.service-cards span { color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.1em; }
.service-cards strong { font-family:Montserrat,sans-serif; font-size:16px; line-height:1.35; }
.service-cards b { color:var(--orange); }
footer { padding:28px 40px; display:flex; align-items:center; gap:14px; background:#0d1015; color:#fff; }
footer .footer-logo { width:38px; height:38px; }
footer strong { font-family:Montserrat,sans-serif; font-size:13px; }
footer p { margin:3px 0 0; font-size:12px; color:rgba(255,255,255,.48); }
footer > a { margin-left:auto; width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); color:#fff; text-decoration:none; border-radius:50%; }

@media (max-width: 760px) {
  .topbar { width:min(100% - 28px, 1180px); height:78px; }
  .brand > span:last-child { display:none; }
  .discord-button { padding:9px 13px; font-size:12px; }
  .page-shell { padding:10px 12px 40px; }
  .profile-card { border-radius:22px; }
  .hero { grid-template-columns:1fr; }
  .hero-image-wrap { height:330px; }
  .hero-image-wrap::after { background:linear-gradient(0deg,#11151c 0%,transparent 48%); }
  .hero-copy { padding:42px 28px 46px; }
  .content-section, .socials-section { padding:58px 28px; grid-template-columns:1fr; gap:25px; }
  .section-label { border-bottom:1px solid var(--line); padding-bottom:15px; }
  .quote-section { padding:62px 28px; }
  .topic-grid, .service-cards { grid-template-columns:1fr; }
  .community-banner { margin:14px; padding:38px 28px; flex-direction:column; align-items:flex-start; background-size:90% auto; }
  .socials-heading { flex-direction:column; align-items:flex-start; gap:18px; }
  .social-grid { grid-template-columns:1fr; }
  .services-section { padding:58px 28px; }
  footer { padding:24px 25px; }
}
@media (max-width: 420px) {
  .hero-copy { padding:35px 23px 40px; }
  .content-section, .socials-section, .services-section { padding-left:23px; padding-right:23px; }
  .project-row { grid-template-columns:35px 1fr 22px; }
}