/* ================================
   DerpMachina Discord-style Landing
   Shared by all public landing pages
   ================================ */

:root{
  --dm-landing-bg:#050716;
  --dm-landing-bg-2:#121a58;
  --dm-landing-text:#ffffff;
  --dm-landing-muted:rgba(255,255,255,.78);
  --dm-landing-soft:rgba(255,255,255,.1);
  --dm-landing-line:rgba(255,255,255,.14);
  --dm-landing-card:rgba(11,14,34,.72);
  --dm-landing-radius:30px;
  --dm-landing-shadow:0 30px 90px rgba(0,0,0,.36);
}

body.dm-landing,
body.dm-landing *,
body.dm-landing *::before,
body.dm-landing *::after{
  box-sizing:border-box;
}

body.dm-landing{
  margin:0;
  min-height:100vh;
  color:var(--dm-landing-text);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--dm-accent) 46%, transparent), transparent 24%),
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--dm-accent-2) 36%, transparent), transparent 28%),
    linear-gradient(135deg, #040611 0%, #0b1140 42%, color-mix(in srgb, var(--dm-accent-2) 42%, #111827) 100%);
}

body.dm-landing::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.38) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.24) 0 1px, transparent 1.5px);
  background-size:120px 120px, 74px 74px;
  background-position:10px 20px, 44px 58px;
  opacity:.42;
  mask-image:linear-gradient(to bottom, black 0%, rgba(0,0,0,.75) 60%, transparent 100%);
}

body.dm-landing::after{
  content:"";
  position:fixed;
  right:-120px;
  top:110px;
  width:360px;
  height:360px;
  z-index:0;
  pointer-events:none;
  border-radius:46% 54% 50% 50%;
  background:color-mix(in srgb, var(--dm-accent) 26%, transparent);
  filter:blur(8px);
  opacity:.42;
  transform:rotate(-16deg);
}

.dm-landing-page{
  position:relative;
  z-index:1;
  padding-top:92px;
}

.dm-landing-shell{
  width:min(1240px, calc(100% - 44px));
  margin:0 auto;
}

.dm-discord-hero{
  min-height:calc(100vh - 92px);
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  align-items:center;
  gap:48px;
  padding:54px 0 64px;
}

.dm-hero-copy{
  max-width:640px;
}

.dm-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  padding:9px 14px;
  border:1px solid var(--dm-landing-line);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.dm-kicker::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--dm-accent);
  box-shadow:0 0 18px var(--dm-accent);
}

.dm-discord-hero h1{
  margin:0;
  font-size:clamp(52px, 7.4vw, 112px);
  line-height:.86;
  letter-spacing:-.075em;
  text-transform:uppercase;
  max-width:760px;
  text-wrap:balance;
  text-shadow:0 14px 44px rgba(0,0,0,.28);
}

.dm-hero-lead{
  margin:26px 0 0;
  max-width:610px;
  color:var(--dm-landing-muted);
  font-size:clamp(18px, 2vw, 23px);
  line-height:1.48;
  font-weight:720;
}

.dm-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:34px;
}

.dm-landing-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 28px;
  border-radius:18px;
  text-decoration:none;
  font-weight:950;
  font-size:17px;
  color:#101320;
  background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.dm-landing-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 54px rgba(0,0,0,.28);
}

.dm-landing-btn.secondary{
  color:#fff;
  background:color-mix(in srgb, var(--dm-accent) 82%, white 18%);
}

.dm-landing-btn.dark{
  color:#fff;
  background:#20233a;
}

.dm-hero-art{
  position:relative;
  min-height:570px;
}

.dm-hero-blob{
  position:absolute;
  inset:44px 8px 44px 80px;
  border-radius:38% 62% 45% 55%;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--dm-accent) 84%, white 16%),
      color-mix(in srgb, var(--dm-accent-2) 78%, black 22%)
    );
  box-shadow:0 34px 100px color-mix(in srgb, var(--dm-accent) 38%, transparent);
  transform:rotate(-8deg);
  opacity:.96;
}

.dm-monitor{
  position:absolute;
  left:28px;
  right:74px;
  top:70px;
  min-height:340px;
  border-radius:28px;
  background:#141827;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--dm-landing-shadow);
  overflow:hidden;
  transform:perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.dm-monitor-top{
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dm-monitor-top span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--dm-accent);
  opacity:.95;
}

.dm-monitor-body{
  padding:20px;
  display:grid;
  grid-template-columns:130px 1fr;
  gap:16px;
}

.dm-sidebar-mock{
  border-radius:18px;
  background:rgba(255,255,255,.05);
  padding:14px;
}

.dm-sidebar-pill{
  height:14px;
  border-radius:999px;
  margin-bottom:13px;
  background:rgba(255,255,255,.12);
}

.dm-sidebar-pill:nth-child(1){background:var(--dm-accent);}
.dm-sidebar-pill:nth-child(2){width:74%;}
.dm-sidebar-pill:nth-child(3){width:88%;}
.dm-sidebar-pill:nth-child(4){width:62%;}
.dm-sidebar-pill:nth-child(5){width:80%;}

.dm-main-mock{
  display:grid;
  gap:13px;
}

.dm-mock-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}

.dm-mock-avatar{
  width:30px;
  height:30px;
  flex:0 0 auto;
  border-radius:12px;
  background:var(--dm-accent);
  box-shadow:0 0 18px color-mix(in srgb, var(--dm-accent) 60%, transparent);
}

.dm-mock-lines{flex:1;}
.dm-mock-line{height:10px;border-radius:999px;background:rgba(255,255,255,.2);margin:5px 0;}
.dm-mock-line.short{width:54%;}
.dm-mock-line.med{width:74%;}

.dm-floating-widget{
  position:absolute;
  z-index:3;
  border-radius:24px;
  background:rgba(13,17,38,.86);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
  padding:18px;
}

.dm-widget-stat{
  left:0;
  bottom:66px;
  width:230px;
}

.dm-widget-queue{
  right:0;
  bottom:18px;
  width:260px;
}

.dm-widget-label{
  margin:0 0 8px;
  color:rgba(255,255,255,.6);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
}

.dm-widget-title{
  margin:0;
  font-size:26px;
  line-height:1;
  font-weight:950;
}

.dm-widget-title span{color:var(--dm-accent);}

.dm-queue-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.82);
}

.dm-section{
  padding:74px 0;
}

.dm-section-heading{
  max-width:780px;
  margin:0 0 30px;
}

.dm-section-heading.center{
  margin-inline:auto;
  text-align:center;
}

.dm-section-kicker{
  margin:0 0 12px;
  color:var(--dm-accent);
  font-weight:950;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:13px;
}

.dm-section h2{
  margin:0;
  font-size:clamp(38px, 5vw, 70px);
  line-height:.94;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.dm-section-text{
  margin:18px 0 0;
  color:var(--dm-landing-muted);
  font-size:19px;
  line-height:1.6;
}

.dm-product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.dm-product-card,
.dm-info-card,
.dm-stat-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--dm-landing-radius);
  background:var(--dm-landing-card);
  border:1px solid var(--dm-landing-line);
  box-shadow:0 20px 70px rgba(0,0,0,.2);
}

.dm-product-card{
  min-height:280px;
  padding:24px;
  text-decoration:none;
  color:#fff;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.dm-product-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--card-accent, var(--dm-accent)) 55%, white 20%);
  background:color-mix(in srgb, var(--card-accent, var(--dm-accent)) 16%, var(--dm-landing-card));
}

.dm-product-card::before{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-56px;
  top:-56px;
  border-radius:50%;
  background:var(--card-accent, var(--dm-accent));
  opacity:.34;
  filter:blur(2px);
}

.dm-card-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  background:var(--card-accent, var(--dm-accent));
  color:#080a14;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:18px;
  margin-bottom:28px;
}

.dm-product-card h3{
  position:relative;
  margin:0 0 12px;
  font-size:28px;
  letter-spacing:-.03em;
}

.dm-product-card p{
  position:relative;
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.55;
}

.dm-info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.dm-info-card{
  padding:28px;
}

.dm-info-number{
  color:var(--dm-accent);
  font-weight:950;
  font-size:14px;
  letter-spacing:.15em;
}

.dm-info-card h3{
  margin:18px 0 10px;
  font-size:24px;
}

.dm-info-card p{
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.6;
}

.dm-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.dm-stat-card{
  padding:26px;
}

.dm-stat-card p{
  margin:0 0 10px;
  color:rgba(255,255,255,.62);
}

.dm-stat-card h3{
  margin:0;
  font-size:34px;
  color:#fff;
}

.dm-cta-band{
  margin:40px 0 80px;
  border-radius:38px;
  padding:44px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.25), transparent 26%),
    linear-gradient(135deg, var(--dm-accent), var(--dm-accent-2));
  box-shadow:0 26px 80px color-mix(in srgb, var(--dm-accent) 28%, transparent);
}

.dm-cta-band h2{
  margin:0;
  font-size:clamp(34px, 4.6vw, 62px);
  line-height:.95;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.dm-cta-band p{
  margin:14px 0 0;
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1.5;
}

.dm-cta-band .dm-landing-btn{
  white-space:nowrap;
}

.dm-platform-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:26px;
}

.dm-platform-pill{
  border:1px solid var(--dm-landing-line);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  color:rgba(255,255,255,.86);
}

@media (max-width:980px){
  .dm-discord-hero{
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:34px;
  }

  .dm-hero-art{
    min-height:510px;
  }

  .dm-product-grid,
  .dm-stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:720px){
  .dm-landing-page{
    padding-top:78px;
  }

  .dm-landing-shell{
    width:min(100% - 28px, 1240px);
  }

  .dm-discord-hero h1{
    font-size:clamp(46px, 14vw, 72px);
  }

  .dm-hero-actions,
  .dm-cta-band{
    grid-template-columns:1fr;
  }

  .dm-landing-btn{
    width:100%;
  }

  .dm-section-heading{
    margin-bottom:24px;
  }

  .dm-section h2{
    font-size:clamp(34px, 11vw, 48px);
    line-height:.98;
  }

  .dm-section-text{
    margin-top:16px;
    font-size:17px;
    line-height:1.5;
  }

  .dm-hero-art{
    min-height:440px;
  }

  .dm-hero-blob{
    inset:48px 0 70px 28px;
  }

  .dm-monitor{
    left:0;
    right:0;
    top:70px;
    transform:none;
  }

  .dm-monitor-body{
    grid-template-columns:1fr;
  }

  .dm-sidebar-mock{
    display:none;
  }

  .dm-widget-stat,
  .dm-widget-queue{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:auto;
    margin-top:14px;
  }

  .dm-product-grid,
  .dm-info-grid,
  .dm-stats-grid{
    grid-template-columns:1fr;
  }

  .dm-product-card{
    min-height:0;
    padding:22px;
  }

  .dm-card-icon{
    margin-bottom:20px;
  }

  .dm-info-card,
  .dm-stat-card{
    padding:22px;
  }

  .dm-platform-row{
    gap:10px;
  }

  .dm-platform-pill{
    padding:10px 15px;
  }

  .dm-section{
    padding:50px 0;
  }

  .dm-cta-band{
    margin:24px 0 56px;
    padding:24px;
    border-radius:28px;
  }
}