/* RAWBIT — style.css
   Red / black aesthetic, responsive, animated.
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Inter:wght@300;600&display=swap');

:root{
  --bg:#050202;
  --red:#ff1b1b;
  --muted:#8a1919;
  --glass: rgba(255,27,27,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- Intro splash ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:40}
#intro{background:#000}
.intro-inner{display:flex;align-items:center;justify-content:center;flex-direction:column}
.logo{
  font-family: 'Orbitron', sans-serif;
  color:var(--red);
  font-size:7.5vw;
  letter-spacing:0.35em;
  transform-origin:center;
  text-transform:uppercase;
  filter:drop-shadow(0 0 18px rgba(255,27,27,0.18));
}

/* subtle glitch layers */
.logo::before,.logo::after{
  content:attr(data-text);
  position:absolute;
  left:0;right:0;top:0;
  color:var(--red);
  mix-blend-mode:screen;
  pointer-events:none;
}
.logo::before{transform:translateX(6px);opacity:0.85;filter:blur(.3px)}
.logo::after{transform:translateX(-6px);opacity:0.7;filter:blur(1px)}

/* spinning micro glitch */
@keyframes logoPulse {
  0%{transform:scale(1)}
  50%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

/* ---------- Site layout ---------- */
.hidden{display:none}
.site{position:relative;min-height:100vh;z-index:10}
canvas#particles{position:fixed;inset:0;z-index:1;pointer-events:none}
.topbar{
  position:fixed;top:18px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:8px 22px;z-index:30;
}
.brand{font-family:'Orbitron',sans-serif;color:var(--red);letter-spacing:4px}
.nav a{color:#fff;text-decoration:none;margin:0 12px;opacity:.9}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--red),#ff3636);border:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

main{position:relative;z-index:10}

/* HERO */
.hero{min-height:80vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:5}
.hero-inner{text-align:center;padding:40px 18px}
.hero-title{
  font-family:'Orbitron',sans-serif;
  color:var(--red);
  font-size:clamp(28px,6.5vw,72px);
  letter-spacing:0.25em;
  margin-bottom:12px;
  text-transform:uppercase;
  filter:drop-shadow(0 8px 28px rgba(255,27,27,0.08));
}
.hero-sub{max-width:760px;margin:8px auto 20px;color:#f1d1d1;opacity:.85}
.hero-actions{display:flex;gap:12px;justify-content:center}

/* SERVICES */
.section-title{font-family:'Orbitron',sans-serif;color:var(--red);text-transform:uppercase;letter-spacing:4px;margin:30px 0 16px;text-align:center}
.services{padding:24px 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.card{background:linear-gradient(180deg, rgba(255,27,27,0.02), transparent);border:1px solid rgba(255,255,255,0.03);padding:18px;border-radius:12px;backdrop-filter:blur(6px);min-height:120px}

/* PORTFOLIO */
.portfolio{padding:22px 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.item{background:#080606;border-radius:12px;padding:18px;min-height:140px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.thumb{background:linear-gradient(90deg,#1a0a0a,#2a0a0a);width:100%;height:86px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--red);font-weight:700}

/* CONTACT */
.contact{padding:30px 18px;max-width:700px;margin:0 auto}
.form{display:flex;flex-direction:column;gap:10px}
.form input,.form textarea{background:#080606;border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;color:#fff}
.form textarea{min-height:110px}
.form-msg{color:#ff9999;margin-top:8px}

/* FOOTER */
.footer{padding:28px 18px;text-align:center;color:#b9b9b9;background:linear-gradient(0deg, rgba(0,0,0,.04), transparent)}

/* ---------- small interactions ---------- */
.card:hover{transform:translateY(-6px);transition:transform .28s}
.btn{transition:all .18s}
.btn:hover{transform:translateY(-3px)}

/* responsive adjustments */
@media (max-width:640px){
  .topbar{padding:10px}
  .nav{display:none}
  .logo{font-size:14vw}
              }