/* RESET & ROOT */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
    --bg:#0a0a0a;
    --card:#111;
    --neon:#00e5ff;
    --text:#e4e4e4;
    --muted:#888;
}
body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
}

.neon {
  display: block;   /* puts it on its own line */
}

/* TYPOGRAPHY */
h1,h2,h3{font-weight:700;line-height:1.3}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:2rem;text-align:center}
h3{font-size:1.25rem;margin-bottom:.5rem}
p{line-height:1.7;margin-bottom:1rem;color:var(--muted)}
.neon{color:var(--neon);text-shadow:0 0 6px var(--neon)}

/* BACKGROUND GRID */
canvas#bg-grid{
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
    pointer-events:none;
}

/* CONTAINER */
.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}

/* BUTTONS */
.btn-primary{
    display:inline-block;
    background:transparent;
    border:2px solid var(--neon);
    color:var(--neon);
    padding:.9rem 2rem;
    border-radius:4px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:all .3s;
}
.btn-primary:hover{
    background:var(--neon);
    color:#000;
    box-shadow:0 0 12px var(--neon);
}


/* HEADER */
header{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.8);backdrop-filter:saturate(180%) blur(10px)}
nav{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem}
.logo{font-family:'JetBrains Mono',mono;font-weight:600;font-size:1.5rem;color:var(--neon)}
.nav-links{display:flex;gap:1.8rem;list-style:none}
.nav-links a{color:var(--text);font-size:.95rem;transition:color .2s}
.nav-links a:hover{color:var(--neon)}

.nav-links a {
  color: var(--neon);
  text-decoration: none;  
}

.nav-links a:hover {
  color: #ffffff;
}



/* HERO */
#hero{padding:4rem 1rem 1rem;text-align:center}
.hero-inner{max-width:700px;margin:0 auto}
.hero-inner p{font-size:1.1rem;margin:1.5rem 0 2.2rem}

/* SECTIONS */

section{padding:1rem 0}

#services .grid,#work .grid{display:grid;gap:2rem}
#services .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

#services .grid {
  display: flex;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* smooth swipe on iOS */
  padding: 0 0.5rem;
}
.card{background:var(--card);
      border:1px solid #222;
      border-radius:8px;
      scroll-snap-align: start;
      flex: 0 0 220px;        /* fixed-width cards */
      padding:2rem;transition:transform .3s, border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--neon)}
#work{background:#090909}
#work .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem}
.case{background:var(--card);border-radius:8px;overflow:hidden;border:1px solid #222}
.case img{filter:grayscale(40%) brightness(.8);transition:filter .4s}
.case:hover img{filter:grayscale(0) brightness(1)}
.case h3{padding:.8rem 1rem 0;color:#fff}
.case p{padding:0 1rem 1rem;font-size:.9rem;color:var(--muted)}
#work .case {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}



.card {
  font-size: 0.9rem;   /* smaller base font */
  position: relative;

}
.card h3 {
  font-size: 1rem;   /* proportionally smaller heading */
  
}

/* emoji badge */
.card h3::before {
  content: attr(data-emoji);
  position: absolute;
  top: 1rem;
  right: 0.2rem;
  font-size: 1.20rem;
}

img#overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;           /* full viewport height */
  object-fit: cover;
  object-position: 0 -220px; /* shift the visible slice down 80 px */
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

#services .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-auto-rows: 1fr;                   /* 2 rows auto-fit */
  gap: 1.5rem;
  margin: 0 auto;
}
/* STATS */
.stats{display:flex;flex-wrap:wrap;justify-content:space-around;margin-top:2rem}
.stats li{list-style:none;text-align:center}
.stats strong{display:block;font-size:2rem;color:var(--neon);font-family:'JetBrains Mono',mono}

/* CONTACT */
#contact{background:#000}
form{max-width:600px;margin:0 auto;display:grid;gap:1.2rem}
label{display:grid;font-size:.9rem}
input,textarea{
    padding:.8rem;
    border:1px solid #333;
    border-radius:4px;
    background:#111;
    color:#fff;
    resize:vertical;
}
input:focus,textarea:focus{outline:2px solid var(--neon)}
button{cursor:pointer;font-size:1rem}
.form-thanks{color:var(--neon);text-align:center}

/* FOOTER */
footer{background:#000;color:#555;text-align:center;padding:1.5rem 0;font-size:.9rem}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-cta {
  margin-left: 1.2rem;
  padding: 0.5rem 0.5rem;
  font-size: 0.9rem;
  line-height: 1;
  border: 1px solid var(--neon);
  border-radius: 3px;
  transform: translateY(2px);   /* nudge it down 1 px */
    text-decoration: none;

}




#work .case img {
  width: 100%;
  height: auto;
  max-height: 210px;   /* shrink vertical size */
  object-fit: cover;
}
/* TAB BUTTONS */
.center-box{
  display:flex;
  flex-direction:column;
  align-items:center;   /* horizontal center */
  justify-content:center; /* vertical center if pane is tall */
  text-align:center;
  gap:1rem;             /* space between image & text */
}
.tab-btn{
  background:transparent;
  border:1px solid #333;
  color:var(--text);
  padding:.6rem 1.2rem;
  border-radius:4px;
  cursor:pointer;
  transition:all .3s;
}
.tab-btn.active,
.tab-btn:hover{
  border-color:var(--neon);
  color:var(--neon);
}

.tab-image{
  width:100%;
  max-width:420px;
  margin:0 auto 1.5rem;
  display:block;
  border-radius:8px;
}
.tab-buttons{
  display:flex;
  justify-content:center;   /* ← centers the buttons */
  gap:1rem;
  margin-bottom:2rem;
}
/* TAB PANES */
.tab-content{position:relative;}
.tab-pane{
  display:none;
}
.tab-pane.active{
  display:block;
  animation:fadeIn .4s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}