/* SerryClouds — Combined theme + hero + contrast sections */
:root{
  --bg-0:#050206;
  --bg-1:#0b0710;
  --accent:#7b3cff; /* purple */
  --accent-2:#3f00ff;
  --muted:#9aa0a6;
  --glass:rgba(255,255,255,0.03);
  --card-bg:linear-gradient(135deg, rgba(127,52,255,0.08), rgba(0,0,0,0.06));
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
  color:#e6e9ee;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width);margin:0 auto;padding:2rem}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-header{backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.02);position:sticky;top:0;z-index:60}
.site-header.small .container{padding:0.8rem 2rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand img{width:36px;height:36px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:.5rem}
.nav a.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:.5rem .9rem;border-radius:8px;color:white}
.nav-toggle{display:none;background:none;border:0;color:var(--muted);font-size:1.4rem}

/* Hero */
.hero{padding:5.5rem 0 3.5rem}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero h1{font-family:Poppins, Inter, sans-serif;font-size:2.25rem;line-height:1.05;margin:0 0 1rem;color:white;text-shadow:0 6px 28px rgba(123,60,255,0.12)}
.hero-contrast{background:linear-gradient(180deg, rgba(123,60,255,0.03), rgba(17,8,22,0.03));padding-top:3.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.02)}
.hero-title{letter-spacing:-0.3px;margin-bottom:.6rem}
.lead{color:var(--muted);max-width:56ch}
.btn{display:inline-block;text-decoration:none;border-radius:10px;padding:.7rem 1rem;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 10px 30px rgba(63,0,255,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.05);color:var(--muted)}

.glass-card{background:var(--glass);border-radius:14px;padding:1.6rem;color:var(--muted);box-shadow:0 6px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.03)}
.services-preview h2{margin-top:0}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card-bg);padding:1.25rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 30px rgba(0,0,0,0.5)}

/* Service image above card */
.service-image{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:.8rem;background:linear-gradient(180deg, rgba(127,52,255,0.06), rgba(0,0,0,0.02))}

.about-cta{padding:3rem 0}
.about-cta-row{display:flex;gap:2rem;align-items:center}
.stats{display:flex;gap:1rem}
.stat{background:transparent;padding:.9rem;border-radius:8px;text-align:center}
.stat strong{display:block;font-size:1.2rem}

.site-footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:3rem}
.footer-row{display:flex;justify-content:space-between;align-items:center}
.footer-links a{display:block;color:var(--muted);text-decoration:none}

.contact-page .contact-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem}
.contact-form label{display:block;margin-bottom:.8rem;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:.8rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.form-actions{display:flex;gap:.6rem;align-items:center;margin-top:1rem}
.form-status{margin-top:.6rem;color:var(--muted)}

.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.tech-card{background:linear-gradient(180deg,rgba(127,52,255,0.06),transparent);padding:.9rem;border-radius:8px;text-align:center}

/* Hero illustration + tech logos (from earlier additions) */
.hero-illustration{position:relative;width:100%;height:320px;display:flex;align-items:center;justify-content:center}
.laptop-img{width:420px;max-width:90%;animation:floatSlow 6s ease-in-out infinite;border-radius:12px;box-shadow:0 30px 80px rgba(11,7,16,0.6)}
.dev-img{position:absolute;right:6%;bottom:6%;width:160px;max-width:30%;transform-origin:center bottom;animation:float 4.5s ease-in-out infinite}
@keyframes float {0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes floatSlow {0%{transform:translateY(0)}50%{transform:translateY(-6px) rotate(-0.5deg)}100%{transform:translateY(0)}}
.tech-logos{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.tech-group{display:flex;gap:.6rem;align-items:center}
.tech-group img{width:40px;height:40px;border-radius:8px;padding:6px;background:rgba(255,255,255,0.02);box-shadow:0 6px 18px rgba(63,0,255,0.06);transition:transform .28s ease,filter .28s ease}
.tech-group img:hover{transform:translateY(-6px) scale(1.03);filter:brightness(1.05)}
.tech-group img{opacity:0;transform:translateY(8px);animation:logoIn .6s forwards}
.tech-group img:nth-child(1){animation-delay:.12s}
.tech-group img:nth-child(2){animation-delay:.18s}
.tech-group img:nth-child(3){animation-delay:.24s}
@keyframes logoIn{to{opacity:1;transform:translateY(0)}}

/* Contrast sections (lighter dark purple backgrounds for text-heavy areas) */
.contrast-section{background:linear-gradient(180deg, rgba(58,26,86,0.06), rgba(11,7,16,0.02));padding:1.6rem;border-radius:12px;margin:1.4rem 0}
.contrast-section .section-top-image{display:block;margin:0 auto 1rem;max-width:520px;border-radius:10px;box-shadow:0 16px 50px rgba(11,7,16,0.6)}

/* Light sections: soft light-gray / light-purple gradient for text-heavy areas */
.light-section{background:linear-gradient(180deg,#fbfbfd,#f6efff);color:#111;padding:1.6rem;border-radius:12px;margin:1.4rem 0}
.light-section .section-top-image{display:block;margin:0 auto 1rem;max-width:520px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.light-section .card{background:linear-gradient(180deg,#ffffff, #fbfbff);color:#111;border:1px solid rgba(0,0,0,0.06)}
.light-section .service-image{background:linear-gradient(180deg,#ffffff,#f3eefc)}
.light-section .logo-item{background:linear-gradient(180deg,#ffffff,#fbfbff);border:1px solid rgba(0,0,0,0.06)}

/* Tech/logo grid */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;align-items:center}
.logo-item{display:flex;gap:.75rem;align-items:center;padding:1rem;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02);transition:transform .22s ease,box-shadow .22s ease}
.logo-item img{width:44px;height:44px}
.logo-item:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(123,60,255,0.06)}
.logo-item span{color:var(--muted);font-weight:600}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .contact-page .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:block}
  .hero-illustration{height:220px}
  .dev-img{width:120px;right:4%}
  .cards-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: no-preference){
  .hero h1{transition:transform .6s cubic-bezier(.2,.9,.2,1);transform:translateY(0)}
}

/* small header/footer variants */
.site-header.small{padding:.5rem 0}
.site-footer.small{padding:1rem 0}