@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --bg1:#6176ed; --bg2:#7488f4; --bg3:#8e9cf4;
  --text:#fff; --muted:#e9edff; --line:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.095); --glass2:rgba(255,255,255,.15);
  --shadow:0 22px 70px rgba(28,45,123,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:"Poppins",sans-serif;
  background:
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.17),transparent 28%),
    radial-gradient(circle at 15% 55%,rgba(111,87,230,.18),transparent 35%),
    linear-gradient(135deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  min-height:100vh; overflow-x:hidden;
}
body:before,body:after{
  content:"";position:fixed;z-index:-1;pointer-events:none;transform:rotate(-38deg);
  width:560px;height:42px;border-radius:40px;background:rgba(255,255,255,.07)
}
body:before{left:-170px;top:28%} body:after{right:-220px;bottom:20%}
a{color:inherit}
.wrap{width:min(1160px,calc(100% - 42px));margin:auto}
header{
  position:sticky;top:0;z-index:50;background:rgba(76,96,220,.76);
  backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.32)
}
nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{width:245px;height:70px;display:flex;align-items:center;overflow:visible}
.brand img{width:230px;max-height:67px;object-fit:contain;object-position:left center}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links>a,.bots-menu-toggle{
  font:600 13px/1 "Poppins",sans-serif;color:#fff;text-decoration:none;
  background:none;border:0;padding:12px 0;cursor:pointer;opacity:.94
}
.nav-links>a:hover,.bots-menu-toggle:hover{opacity:1}
.support-btn{
  padding:12px 18px!important;border-radius:8px!important;background:rgba(137,184,255,.48)!important;
  border:1px solid rgba(255,255,255,.14)!important
}
.bots-menu{position:relative}
.bots-menu-toggle:after{content:"⌄";font-size:13px;margin-left:7px}
.bots-dropdown{
  position:absolute;top:44px;left:50%;transform:translateX(-50%) translateY(-5px);
  width:210px;padding:8px;border-radius:15px;background:rgba(58,73,177,.96);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 45px rgba(25,38,105,.26);
  backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.18s
}
.bots-menu:hover .bots-dropdown,.bots-menu:focus-within .bots-dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)
}
.bots-dropdown a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;text-decoration:none;font-size:12px;font-weight:600}
.bots-dropdown a:hover{background:rgba(255,255,255,.11)}
.bots-dropdown img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.mobile-toggle{display:none;background:none;border:0;color:white;font-size:26px}

.hero{min-height:620px;display:flex;align-items:center;padding:78px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:60px}
h1,h2,h3,p{margin-top:0}
.hero h1{font-size:clamp(55px,7vw,88px);line-height:.98;letter-spacing:-4px;margin-bottom:26px}
.hero h1 span{display:block;color:#dce4ff}
.hero-copy{font-size:15px;line-height:1.8;color:var(--muted);max-width:650px}
.hero-art{display:flex;justify-content:center;align-items:center;position:relative}
.hero-art:before{content:"";position:absolute;width:76%;height:76%;border-radius:50%;background:rgba(255,255,255,.13);filter:blur(45px)}
.hero-art img{position:relative;width:min(510px,100%);filter:drop-shadow(0 28px 40px rgba(25,40,115,.18));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:10px;text-decoration:none;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.2);transition:.18s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:#fff;color:#5367d9;box-shadow:0 12px 30px rgba(33,48,124,.15)}
.btn.secondary{background:rgba(255,255,255,.10);color:#fff}
.btn.dashboard{background:rgba(36,49,137,.32);color:#fff}
.btn.topgg{background:rgba(255,255,255,.17);color:#fff}
.metrics{display:flex;gap:35px;margin-top:45px}
.metric strong{font-size:20px;display:block}.metric span{font-size:10px;color:#e5eaff}

section{padding:80px 0}
.kicker{font-size:10px;letter-spacing:2px;font-weight:800;color:#dfe6ff;margin-bottom:8px}
.section-title{font-size:clamp(34px,5vw,54px);letter-spacing:-2px;margin-bottom:10px}
.lead{color:var(--muted);font-size:14px;line-height:1.75;max-width:700px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.card,.feature-card,.glass{
  background:var(--glass);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(13px);box-shadow:0 15px 45px rgba(31,48,126,.07)
}
.card{padding:26px;transition:.2s}.card:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.bot-head{display:flex;align-items:center;gap:15px}
.bot-logo{width:74px;height:74px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.22)}
.bot-label{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#dfe6ff}
.card h3{font-size:24px;margin:3px 0 0}.card p{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0}
.card>a{font-size:11px;font-weight:700;text-decoration:none}

.community-grid{display:grid;grid-template-columns:1fr 390px;gap:55px;align-items:center}
.discord-widget{
  width:350px;max-width:100%;height:500px;border:0;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);justify-self:end
}
footer{padding:30px 0 40px;border-top:1px solid var(--line);font-size:11px;color:#e3e8ff}

/* Bot pages */
.bot-hero{padding:90px 0 65px}
.bot-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
.bot-identity{display:flex;gap:23px;align-items:center;margin-bottom:25px}
.bot-identity img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.25);box-shadow:var(--shadow)}
.bot-identity h1{font-size:clamp(48px,7vw,78px);letter-spacing:-3px;margin:0}
.bot-preview{padding:25px}
.preview-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.preview-top img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.preview-top strong,.preview-top span{display:block}.preview-top span{font-size:10px;color:var(--muted);margin-top:3px}
.preview-row{display:flex;gap:14px;padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.12);align-items:center}
.preview-row:last-child{border:0}.preview-row>span{font-size:22px}
.preview-row strong,.preview-row small{display:block}.preview-row small{color:var(--muted);margin-top:3px}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
.feature-card{padding:28px}.feature-card .icon{font-size:27px}.feature-card h3{font-size:18px;margin:13px 0 7px}.feature-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}
.step{padding:24px}.step b{font-size:10px;color:#dfe6ff}.step h3{font-size:16px;margin:10px 0 5px}.step p{font-size:11px;line-height:1.65;color:var(--muted);margin:0}
.cta{padding:35px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.cta img{width:76px;height:76px;border-radius:50%;object-fit:cover}.cta h2{font-size:30px;margin:2px 0 4px}.cta p{font-size:12px;color:var(--muted);margin:0}
.dashboard-showcase{padding:36px;display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}
.dashboard-showcase h2{font-size:34px;margin:4px 0 8px}.dashboard-showcase p{color:var(--muted);font-size:13px;line-height:1.7;max-width:680px;margin:0}

@media(max-width:900px){
  .hero-grid,.bot-hero-grid,.community-grid{grid-template-columns:1fr}
  .hero-art{order:-1}.hero-art img{width:330px}.hero{padding-top:45px}
  .discord-widget{justify-self:start}
  .cta{grid-template-columns:auto 1fr}.cta .buttons{grid-column:1/-1}
}
@media(max-width:780px){
  nav{height:70px}.brand{width:190px}.brand img{width:180px}
  .mobile-toggle{display:block}.nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;margin:0;padding:16px 22px 22px;
    flex-direction:column;align-items:stretch;gap:2px;background:rgba(63,80,190,.98);border-bottom:1px solid var(--line)
  }
  .nav-links.mobile-open{display:flex}.nav-links>a,.bots-menu-toggle{text-align:left;padding:13px 10px}
  .bots-dropdown{position:static;width:100%;transform:none!important;display:none;opacity:1;visibility:visible;background:rgba(255,255,255,.06);box-shadow:none;margin:2px 0 8px}
  .bots-menu:hover .bots-dropdown{display:none}.bots-menu.open .bots-dropdown{display:block}
  .cards,.feature-grid,.steps{grid-template-columns:1fr}
  .metrics{gap:20px;flex-wrap:wrap}.hero h1{letter-spacing:-2.5px}
  .dashboard-showcase{grid-template-columns:1fr}
}
@media(max-width:520px){
  .wrap{width:min(100% - 28px,1160px)}.hero{min-height:auto}
  .hero h1{font-size:49px}.hero-art img{width:260px}
  section{padding:62px 0}.bot-identity img{width:78px;height:78px}.bot-identity{gap:14px}
  .bot-identity h1{font-size:42px;letter-spacing:-2px}.cta{grid-template-columns:1fr}.discord-widget{width:100%}
}


/* =========================
   TEMPBOT STUDIO TEAM
   ========================= */
.team-section {
  position: relative;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  justify-content: center;
  gap: 24px;
  margin-top: 38px;
}

.team-card {
  text-align: center;
  padding: 30px 24px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 24px;
  background: rgba(255,255,255,.20);
  box-shadow: 0 18px 50px rgba(61,78,160,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 58px rgba(61,78,160,.16);
}

.team-avatar-wrap {
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  position: relative;
}

.team-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 800;
  background: rgba(255,255,255,.35);
  border: 4px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(65,82,170,.15);
}

.team-card h3 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
}

.team-discord {
  margin: 5px 0 13px;
  opacity: .70;
  font-size: .94rem;
}

.team-role {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.45);
  font-size: .78rem;
  font-weight: 700;
}

@media (max-width: 650px) {
  .team-grid {
    grid-template-columns: minmax(0, 320px);
  }
}


/* Extra repeated subtle marks throughout long pages */



/* Keep all actual website content above the decorative layer */
header,
main,
section,
footer,
nav {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  
  
}


/* ORIGINAL TEMBOT ROBOT BACKGROUND */
.tempbot-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  min-height: 100%;
}
.tempbot-bg .stripe {
  position: absolute;
  height: 46px;
  border-radius: 999px;
  transform: rotate(-31deg);
  background: rgba(255,255,255,.09);
}
.tempbot-bg .s1{width:850px;left:-250px;top:130px}
.tempbot-bg .s2{width:620px;left:-170px;top:270px;opacity:.6}
.tempbot-bg .s3{width:850px;right:-280px;top:470px;opacity:.75}
.tempbot-bg .s4{width:640px;right:-170px;top:690px;opacity:.45}
.tempbot-bg .s5{width:900px;left:-260px;top:930px;opacity:.5}
.tempbot-bg .dot {
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.24);
}
.tempbot-bg .d1{left:9%;top:37%}
.tempbot-bg .d2{left:26%;top:73%}
.tempbot-bg .d3{right:12%;top:18%}
.tempbot-bg .d4{right:31%;top:62%}
.tempbot-bg .d5{right:8%;top:84%}
.tempbot-bg .mascot-detail {
  position:absolute;
  pointer-events:none;
  user-select:none;
  opacity:.055;
}
.tempbot-bg .mascot-detail img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.tempbot-bg .md1{width:105px;height:105px;right:7%;top:8%;transform:rotate(8deg)}
.tempbot-bg .md2{width:58px;height:58px;left:5%;top:25%;transform:rotate(-12deg);opacity:.07}
.tempbot-bg .md3{width:150px;height:150px;right:18%;top:38%;transform:rotate(-7deg);opacity:.035}
.tempbot-bg .md4{width:76px;height:76px;left:15%;top:52%;transform:rotate(13deg);opacity:.06}
.tempbot-bg .md5{width:115px;height:115px;right:4%;top:67%;transform:rotate(10deg);opacity:.045}
.tempbot-bg .md6{width:62px;height:62px;left:39%;top:78%;transform:rotate(-15deg);opacity:.07}
.tempbot-bg .md7{width:135px;height:135px;left:4%;top:89%;transform:rotate(5deg);opacity:.04}
.tempbot-bg .md8{width:72px;height:72px;right:27%;top:94%;transform:rotate(-8deg);opacity:.065}

/* Keep website content above the decoration */
body > header,
body > main,
body > section,
body > footer {
  position: relative;
  z-index: 1;
}


/* =========================
   NAVIGATION STACKING FIX
   Keep Bots dropdown above hero artwork on every page.
   ========================= */
header,
.site-header,
header.site-header {
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate;
  overflow: visible !important;
}

header nav,
.site-header nav,
.nav,
.navbar,
.nav-links,
.nav-item,
.dropdown {
  position: relative;
  z-index: 10001 !important;
  overflow: visible !important;
}

.dropdown-menu,
.bots-dropdown,
.nav-dropdown,
[class*="dropdown-menu"] {
  z-index: 10050 !important;
  position: absolute;
}

.hero,
.hero-visual,
.hero-art,
.hero-logo,
.hero img,
main,
.tempbot-bg {
  z-index: auto;
}

.hero {
  position: relative;
  z-index: 1;
}

.hero-visual,
.hero-art,
.hero-logo {
  position: relative;
  z-index: 1 !important;
}

.tempbot-bg {
  z-index: 0 !important;
}


/* =========================
   MOBILE BACKGROUND FIX
   Desktop stays unchanged.
   ========================= */
@media (max-width: 700px) {
  .tempbot-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .tempbot-bg .stripe {
    height: 24px !important;
    opacity: .035 !important;
  }

  .tempbot-bg .s1 { width: 360px !important; left: -170px !important; top: 18% !important; }
  .tempbot-bg .s2 { display: none !important; }
  .tempbot-bg .s3 { width: 390px !important; right: -210px !important; top: 58% !important; }
  .tempbot-bg .s4,
  .tempbot-bg .s5 { display: none !important; }

  /* Never allow the robot art to fill/tile the phone screen */
  .tempbot-bg .mascot-detail {
    display: none !important;
  }

  /* Two small, subtle robots only */
  .tempbot-bg .md2,
  .tempbot-bg .md5 {
    display: block !important;
    position: absolute !important;
    opacity: .045 !important;
  }

  .tempbot-bg .md2 {
    width: 72px !important;
    height: 72px !important;
    left: 5% !important;
    top: 23% !important;
    transform: rotate(-10deg) !important;
  }

  .tempbot-bg .md5 {
    width: 92px !important;
    height: 92px !important;
    left: auto !important;
    right: 3% !important;
    top: 69% !important;
    transform: rotate(9deg) !important;
  }

  .tempbot-bg .mascot-detail img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .tempbot-bg .dot {
    opacity: .45;
  }
}


/* =========================
   MOBILE NAVIGATION FIX
   ========================= */
@media (max-width: 760px) {
  header,
  .site-header,
  header.site-header {
    overflow: visible !important;
  }

  .nav,
  .navbar,
  .nav-links {
    z-index: 11000 !important;
  }

  /* Main opened mobile menu */
  .nav-links.active,
  .nav-links.open,
  .nav-links.show,
  .nav-links[data-open="true"] {
    width: min(86vw, 330px) !important;
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    padding: 16px !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 100px) !important;
  }

  /* Bots item must not create a desktop-style second floating box */
  .nav-links .dropdown,
  .nav-links .nav-item {
    width: 100% !important;
  }

  .nav-links .dropdown-menu,
  .nav-links .bots-dropdown,
  .nav-links .nav-dropdown,
  .nav-links [class*="dropdown-menu"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 8px 0 4px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    z-index: auto !important;
    overflow: hidden !important;
  }

  .nav-links .dropdown-menu a,
  .nav-links .bots-dropdown a,
  .nav-links .nav-dropdown a,
  .nav-links [class*="dropdown-menu"] a {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
  }

  .nav-links .dropdown-menu img,
  .nav-links .bots-dropdown img,
  .nav-links .nav-dropdown img {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  /* Hero starts below the header cleanly */
  .hero {
    overflow: hidden !important;
  }

  .hero-visual,
  .hero-art {
    max-width: 100% !important;
  }
}