/* styles.css — Bruno & Jerry Dev Works
   Modern dark theme (black background) with blue & gold accents,
   fluid typography, responsive layout, accessible focus styles,
   animated contact bubble, and subtle motion.
*/

/* ========== Design tokens ========== */
:root{
  --bg: #050406; /* near-black */
  --panel: #0b0b0d;
  --muted: #9aa4b2;
  --accent-blue: #0ea5ff; /* bright blue */
  --accent-gold: #d4af37; /* gold */
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --radius: 14px;
  --max-width: 1200px;
  --content-padding: 1.25rem;
  --gradient: linear-gradient(120deg, rgba(14,165,255,0.12), rgba(212,175,55,0.06));
  --shadow: 0 6px 30px rgba(0,0,0,0.6);
  --text: #e6eef6;
  --muted-2: #b7c3cf;

  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background: linear-gradient(180deg, var(--bg) 0%, #020203 100%);
  color:var(--text);
  font-family:var(--ff-sans);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* container */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1.25rem;
}

/* utility */
.hidden{display:none}
.center{display:flex;align-items:center;justify-content:center}

/* ========== Header / Nav ========== */
header{position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));backdrop-filter: blur(6px);z-index:60;border-bottom:1px solid rgba(255,255,255,0.02)}
nav{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.25rem;max-width:var(--max-width);margin:0 auto}
.logo{font-weight:700;letter-spacing:0.2px;color:var(--text);font-size:1rem}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
nav a{color:var(--muted-2);text-decoration:none;padding:0.45rem 0.6rem;border-radius:8px;font-weight:600;font-size:0.95rem}
nav a:hover, nav a:focus{color:var(--text);outline: none;background: rgba(255,255,255,0.02)}
.cta-nav{
  border:1px solid rgba(14,165,255,0.18);
  padding:0.45rem 0.9rem;
  background:linear-gradient(90deg, rgba(14,165,255,0.06), rgba(212,175,55,0.04));
  color:var(--text);
  border-radius:12px;
  box-shadow: var(--shadow);
}

/* mobile nav toggle */
.nav-toggle{
  display:none;
  background:transparent;border:0;color:var(--text);font-size:1.15rem;
}

/* ========== Hero ========== */
#hero{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap:2rem;
  align-items:center;
  min-height:72vh;
  padding:2.5rem 1.25rem;
  background-image: var(--gradient);
}
.hero-content{max-width:740px}
.hero-title{
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  margin:0 0 0.6rem 0;
  line-height:1.02;
  letter-spacing:-0.6px;
  color:linear-gradient(90deg,var(--accent-blue), var(--accent-gold));
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
  -webkit-background-clip: text;
  background-clip:text;
  color:transparent;
  font-weight:800;
}
.hero-subtitle{
  color:var(--muted-2);
  font-size:1.05rem;
  margin:0 0 1.2rem 0;
}
.cta-button{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background: linear-gradient(90deg, var(--accent-blue), rgba(14,165,255,0.12));
  color: #041226;
  padding:0.75rem 1rem;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  border: none;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(14,165,255,0.08);
}
.cta-button:focus{outline:3px solid rgba(14,165,255,0.18);outline-offset:2px}

/* laptop mockup */
.laptop-mockup{display:flex;align-items:center;justify-content:center}
.laptop-image{
  width:100%;
  max-width:520px;
  border-radius:12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transform: translateY(0);
  transition: transform 600ms cubic-bezier(.2,.9,.3,1);
}
.laptop-image[loading="lazy"]{opacity:0.98}
.laptop-image:hover{transform: translateY(-8px)}

/* ========== Sections ========== */
section{padding:3rem 0}
h2{font-size:1.5rem;margin:0 0 1rem 0;color:var(--text)}
p{color:var(--muted);margin:0 0 1rem 0}

/* About */
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.about-stats{display:flex;gap:1rem;align-items:center;margin-top:0.8rem}
.stat{background:var(--glass);padding:0.8rem 1rem;border-radius:12px;text-align:center;min-width:110px}
.stat h3{margin:0;font-size:1.25rem;color:var(--text)}
.stat p{margin:0;color:var(--muted);font-size:0.9rem}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.service{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:1.2rem;border-radius:12px;min-height:160px;border:1px solid rgba(255,255,255,0.02)}
.service-icon{font-size:1.6rem;margin-bottom:0.6rem}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.project{position:relative;overflow:hidden;border-radius:12px}
.project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 480ms}
.project-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,2,2,0.2), rgba(2,2,2,0.6));
  display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;opacity:0;transform:translateY(8px);transition:all 320ms;
}
.project:hover img{transform:scale(1.06)}
.project:hover .project-overlay{opacity:1;transform:translateY(0)}
.project-link{display:inline-block;margin-top:0.6rem;padding:0.5rem 0.7rem;border-radius:8px;background:rgba(14,165,255,0.08);color:var(--accent-blue);text-decoration:none;font-weight:700}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.testimonial{background:var(--glass-2);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.testimonial p{color:var(--muted)}

/* Contact */
.contact-content{display:grid;grid-template-columns:1fr 420px;gap:1.25rem;align-items:start}
.contact-info h3{margin-top:0}
.contact-details p{margin:0.35rem 0;color:var(--muted)}
#contact-form .form-group{margin-bottom:0.75rem}
#contact-form input, #contact-form textarea{
  width:100%;padding:0.8rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02); color:var(--text);
}
#contact-form textarea{min-height:140px;resize:vertical}
#contact-form button{width:100%;padding:0.9rem;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent-blue),rgba(212,175,55,0.08));font-weight:800;color:#031424;cursor:pointer}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,0.02);padding:1.25rem 0;background:transparent}
footer p{margin:0;color:var(--muted)}
.social-links a{color:var(--muted);text-decoration:none;margin-left:1rem}

/* ========== Floating Contact Bubble ========== */
.contact-bubble{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;height:64px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 20%, rgba(14,165,255,0.14), transparent 30%), linear-gradient(135deg,var(--accent-blue), var(--accent-gold));
  box-shadow: 0 10px 30px rgba(14,165,255,0.12);
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.06);
}
.contact-bubble:focus{outline:3px solid rgba(212,175,55,0.14);outline-offset:3px}
.contact-bubble .icon{font-weight:900;color:#021022;font-size:1.1rem}

/* bubble particle */
.bubble-particle{
  position:absolute;border-radius:50%;
  pointer-events:none;opacity:0.9;
  transform:translate(-50%,-50%) scale(0.2);
  animation:rise 1800ms cubic-bezier(.2,.9,.3,1) forwards;
  mix-blend-mode:screen;
}
@keyframes rise{
  0%{transform:translate(-50%,-50%) scale(0.2);opacity:0.9}
  60%{opacity:0.7}
  100%{transform:translate(-50%,-400%) scale(1);opacity:0}
}

/* ========== Responsive ========== */
@media (max-width:1100px){
  #hero{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-content{grid-template-columns:1fr}
  .contact-content{grid-template-columns:1fr}
}
@media (max-width:760px){
  nav ul{display:none}
  .nav-toggle{display:block}
  #hero{grid-template-columns:1fr; padding-top:1.5rem; padding-bottom:1.5rem}
  .laptop-mockup{order:2}
  .portfolio-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
}

/* ========== Accessibility helpers ========== */
a:focus,button:focus,input:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(14,165,255,0.12)}
[aria-hidden="true"]{display:none !important}