:root{
  --bg:#0B0E14;
  --surface:#131720;
  --surface-2:#1A1F2B;
  --line:#232838;
  --text:#E7E9EE;
  --muted:#8A90A2;
  --violet:#7C5CFC;
  --violet-dim:#4C3B9E;
  --mint:#33E6B0;
  --amber:#F5B942;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--font-mono);}

/* scroll progress bar */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  z-index:200;box-shadow:0 0 10px rgba(124,92,252,.7);
  transition:width .12s linear;
}

/* button ripple */
.btn{position:relative;overflow:hidden;}
.btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);
  transform:scale(0);opacity:1;
  animation:rippleOut .65s ease-out forwards;
}
@keyframes rippleOut{to{transform:scale(3.2);opacity:0;}}

/* background grid */
#grid{position:fixed;inset:0;z-index:0;opacity:.35;}
#particles{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none;}

/* rotating hosting logo watermark */
.bg-logo-wrap{
  position:fixed;
  top:50%;left:50%;
  width:min(70vw,900px);height:min(70vw,900px);
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  opacity:.07;
  filter:blur(.5px);
}
.bg-logo{
  width:100%;height:100%;object-fit:contain;
  animation:spinLogo 40s linear infinite;
}
@keyframes spinLogo{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.glow{
  position:fixed;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,252,.18), transparent 70%);
  pointer-events:none;z-index:0;left:0;top:0;
  transform:translate(-50%,-50%);
  transition:opacity .3s;
}

/* boot sequence */
.boot{
  position:fixed;inset:0;background:var(--bg);z-index:100;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
}
.boot-lines{width:min(560px,90vw);color:var(--mint);font-size:14px;}
.boot-lines p{opacity:0;animation:fadeIn .2s forwards;margin-bottom:6px;}
.boot.hide{animation:bootOut .5s forwards;}
@keyframes fadeIn{to{opacity:1;}}
@keyframes bootOut{to{opacity:0;visibility:hidden;}}

.page{position:relative;z-index:1;opacity:0;}
.page.show{opacity:1;transition:opacity .6s ease;}

/* nav */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,6vw,72px);
  background:rgba(11,14,20,.75);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-16px);
  animation:navIn .6s cubic-bezier(.16,.84,.44,1) .1s forwards;
}
@keyframes navIn{to{opacity:1;transform:translateY(0);}}
.nav-left{display:flex;align-items:center;gap:10px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.nav-brand{font-family:var(--font-display);font-weight:600;letter-spacing:.02em;}
.nav-avatar{
  width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);
  animation:avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,92,252,.55);}
  50%{box-shadow:0 0 0 5px rgba(124,92,252,0);}
}
@media (prefers-reduced-motion: reduce){.nav-avatar{animation:none;}}
.nav-right{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--muted);}
.nav-right a{position:relative;padding-bottom:4px;transition:color .2s;}
.nav-right a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  transition:width .3s cubic-bezier(.16,.84,.44,1);
}
.nav-right a:hover::after,.nav-right a.active::after{width:100%;}
.nav-right a:hover{color:var(--text);}
.nav-cta{color:var(--violet)!important;font-weight:500;}

/* hero */
.hero{
  padding:min(14vh,140px) clamp(20px,6vw,72px) 80px;
  max-width:1100px;
}
.hero-tag{
  font-family:var(--font-mono);color:var(--mint);font-size:13px;
  margin-bottom:18px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(38px,6.5vw,76px);
  line-height:1.05;font-weight:700;letter-spacing:-.02em;
  margin-bottom:22px;
}
.hero-title .line{display:block;opacity:0;transform:translateY(20px);animation:riseIn .7s forwards;}
.hero-title .line:nth-child(2){animation-delay:.15s;}
@keyframes riseIn{to{opacity:1;transform:translateY(0);}}
.accent{
  background:linear-gradient(90deg,var(--violet),var(--mint),var(--violet));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmerText 5s linear infinite;
}
@keyframes shimmerText{to{background-position:-200% center;}}
@media (prefers-reduced-motion: reduce){.accent{animation:none;}}
.hero-sub{color:var(--muted);font-size:17px;max-width:560px;margin-bottom:34px;}
.hero-actions{display:flex;gap:14px;margin-bottom:56px;flex-wrap:wrap;}
.hero-actions .btn{opacity:0;transform:translateY(16px);animation:btnIn .6s cubic-bezier(.16,.84,.44,1) forwards;}
.hero-actions .btn:nth-child(1){animation-delay:.45s;}
.hero-actions .btn:nth-child(2){animation-delay:.58s;}
@keyframes btnIn{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .hero-actions .btn{animation:none;opacity:1;transform:none;}
}
.btn{
  padding:13px 26px;border-radius:8px;font-size:14px;font-weight:500;
  transition:transform .2s, box-shadow .2s, background .2s;
  display:inline-block;
}
.btn-primary{background:var(--violet);color:#fff;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(124,92,252,.6);}
.btn-ghost{border:1px solid var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--violet);transform:translateY(-2px);}

/* status card */
.status-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:22px 26px;max-width:420px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
  opacity:0;transform:translateX(40px);
  animation:statusIn .8s cubic-bezier(.16,.84,.44,1) .7s forwards;
}
@keyframes statusIn{to{opacity:1;transform:translateX(0);}}
@media (prefers-reduced-motion: reduce){
  .status-card{animation:none;opacity:1;transform:none;}
}
.status-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;}
.status-row:last-child{border-bottom:none;}
.status-key{color:var(--muted);}
.status-val{font-weight:500;}
.status-val.online{color:var(--mint);display:flex;align-items:center;gap:6px;}
.status-val.online i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 6px var(--mint);}
.link-accent{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--violet-dim);}
.link-accent:hover{color:var(--mint);}

.btn-sm{padding:8px 16px;font-size:12px;white-space:nowrap;}

/* sections */
.section{padding:90px clamp(20px,6vw,72px);border-top:1px solid var(--line);}
.section-head{margin-bottom:44px;}
.eyebrow{
  font-family:var(--font-mono);color:var(--violet);font-size:13px;
  position:relative;display:inline-block;padding-bottom:5px;
}
.eyebrow::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  transition:width .7s cubic-bezier(.16,.84,.44,1) .15s;
}
.section-head.in .eyebrow::after,.about-top.in .eyebrow::after{width:60px;}
.section-head h2{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);margin-top:8px;}

.about-top{padding-top:min(12vh,110px);border-top:none;}

/* about */
.about-grid{
  display:grid;grid-template-columns:260px 1fr;gap:52px;align-items:start;
  max-width:1000px;
}
.about-portrait{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.about-portrait-glow{
  position:absolute;inset:0;
  box-shadow:inset 0 0 60px rgba(124,92,252,.25);
  pointer-events:none;
  animation:portraitGlow 4.5s ease-in-out infinite;
}
@keyframes portraitGlow{
  0%,100%{box-shadow:inset 0 0 60px rgba(124,92,252,.25);}
  50%{box-shadow:inset 0 0 90px rgba(51,230,176,.3);}
}
@media (prefers-reduced-motion: reduce){.about-portrait-glow{animation:none;}}
.about-copy p{color:var(--muted);font-size:15px;margin-bottom:16px;max-width:620px;}
.about-copy strong{color:var(--text);font-weight:600;}
.about-links{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}
@media (max-width:640px){
  .about-grid{grid-template-columns:1fr;}
  .about-portrait{max-width:220px;}
}

/* stack */
.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 40px;max-width:900px;}
.stack-item{display:flex;flex-direction:column;gap:8px;}
.stack-name{font-size:14px;font-weight:500;}
.stack-bar{height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden;display:block;position:relative;}
.stack-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--mint));border-radius:2px;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;}
.stack-item.in-view .stack-bar i{width:var(--target,80%);}
.stack-bar i::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:barShimmer 2.6s ease-in-out infinite;animation-delay:1.5s;
}
@keyframes barShimmer{0%{left:-60%;}100%{left:130%;}}
@media (prefers-reduced-motion: reduce){.stack-bar i::after{animation:none;}}

/* hosting section */
.hosting-banner{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:32px;max-width:820px;
  position:relative;overflow:hidden;
}
.hosting-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at top left, rgba(124,92,252,.12), transparent 60%);
  pointer-events:none;
}
.hosting-banner-logo{width:80px;height:80px;object-fit:contain;flex-shrink:0;position:relative;z-index:1;}
.hosting-banner-text{flex:1;min-width:240px;position:relative;z-index:1;}
.hosting-banner-text p{color:var(--muted);font-size:15px;margin-bottom:18px;max-width:480px;}

/* log */
.log{max-width:760px;}
.log-entry{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);}
.log-entry:last-child{border-bottom:none;}
.log-time{color:var(--mint);font-size:13px;position:relative;padding-left:16px;}
.log-time::before{
  content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px var(--mint);
  animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.4);}}
@media (prefers-reduced-motion: reduce){.log-time::before{animation:none;}}
.log-body h3{font-family:var(--font-display);font-size:18px;margin-bottom:8px;}
.log-body p{color:var(--muted);font-size:14px;}

/* contact / terminal */
.terminal{
  max-width:600px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);
}
.terminal-bar{display:flex;gap:7px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.terminal-bar span{width:10px;height:10px;border-radius:50%;background:var(--line);}
.terminal-bar span:nth-child(1){background:#F5695C;}
.terminal-bar span:nth-child(2){background:#F5B942;}
.terminal-bar span:nth-child(3){background:var(--mint);}
.terminal-body{padding:22px 20px;font-family:var(--font-mono);font-size:13px;}
.terminal-body p{margin-bottom:8px;color:var(--text);}
.terminal-body .prompt{color:var(--violet);margin-right:8px;}
.terminal-body .out{color:var(--mint);margin-bottom:16px;}
.terminal-body .out a{text-decoration:none;}
.terminal-body .out a:hover{text-decoration:underline;}
.cursor{animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

/* ask ai */
.ask-sub{color:var(--muted);font-size:14px;margin-top:10px;max-width:520px;}
.ask-terminal{max-width:640px;}
.terminal-label{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.ask-body{max-height:280px;overflow-y:auto;}
.ask-body .out{margin-bottom:12px;color:var(--mint);}
.ask-body .out.user-line{color:var(--text);}
.ask-body .out.user-line::before{content:'> ';color:var(--violet);}
.ask-body .out.thinking{color:var(--muted);}
.ask-body .out.error-line{color:#F5695C;}
.ask-form{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line);
  font-family:var(--font-mono);
}
.ask-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-mono);font-size:13px;
}
.ask-input::placeholder{color:var(--muted);}

/* magnetic buttons */
.magnetic{transition:transform .15s ease-out;}

/* footer */
.footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding:30px clamp(20px,6vw,72px);color:var(--muted);font-size:13px;
  border-top:1px solid var(--line);
}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);}
.reveal.in{opacity:1;transform:translateY(0);}

.reveal-left{opacity:0;transform:translateX(-70px);transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal-left.in{opacity:1;transform:translateX(0);}

.reveal-right{opacity:0;transform:translateX(70px);transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal-right.in{opacity:1;transform:translateX(0);}

.reveal-scale{opacity:0;transform:scale(.92) translateY(16px);transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);}
.reveal-scale.in{opacity:1;transform:scale(1) translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important;}
}

@media (max-width:640px){
  .log-entry{grid-template-columns:1fr;gap:6px;}
  .hero{padding-top:100px;}
}

/* ---------- connect: discord presence + social links ---------- */
.connect-section{max-width:1000px;padding-bottom:40px;padding-left:60px;}
.hosting-section{padding-top:40px;border-top:none;}

.discord-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 24px;max-width:480px;margin-bottom:36px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
  transition:transform .25s ease;
}
.discord-card-top{display:flex;align-items:center;gap:16px;}
.discord-avatar-wrap{position:relative;flex-shrink:0;}
.discord-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line);display:block;
}
.discord-status-dot{
  position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;
  border:3px solid var(--surface);transition:background .3s;
}
.discord-id{display:flex;flex-direction:column;gap:4px;min-width:0;}
.discord-username{font-family:var(--font-display);font-weight:600;font-size:17px;}
.discord-status-text{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-transform:capitalize;}
.discord-custom-status{font-size:13px;color:var(--text);margin-top:2px;display:block;}

.discord-activity{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);min-height:64px;
}
.discord-activity-icon{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--line);}
.discord-activity-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.discord-activity-name{font-size:14px;font-weight:600;color:var(--text);}
.discord-activity-details{font-size:13px;color:var(--mint);}
.discord-activity-state{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.03em;}
#discordActivity.has-activity .discord-activity-name{color:var(--violet);}

/* discord status colors — matched to discord's own official status palette */
.status-online{background:#23A55A;}
.status-idle{background:#F0B232;}
.status-dnd{background:#F23F43;}
.status-offline{background:#80848E;}

.social-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;max-width:640px;}
.social-group-title{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;
}
.social-links{display:flex;flex-direction:column;gap:10px;}
.social-link{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;
  transition:transform .2s, border-color .2s, background .2s;
}
.social-link:hover{transform:translateX(4px) translateY(-1px);border-color:var(--violet);}
.social-icon{width:20px;height:20px;flex-shrink:0;}
.social-youtube .social-icon{color:#FF0000;}
.social-instagram .social-icon{color:#E1306C;}

@media (max-width:640px){
  .discord-card{max-width:100%;}
}