/* Varatech - styles */
:root{
  --bg-1: #ffffff;
  --accent-1: #2563eb;
  --accent-2: #1e40af;
  --text: #1f2937;
  --muted: #6b7280;
  --card: #f8fafc;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg-1);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
.container{max-width:1200px;margin:0 auto;padding:1.5rem 1rem}
.site-header{background:var(--bg-1);padding:1.5rem 0;position:sticky;top:0;z-index:40;border-bottom:1px solid #e5e7eb}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--accent-2);text-decoration:none;font-size:1.25rem}
.nav{display:flex;gap:2rem}
.nav a{color:var(--text);text-decoration:none;padding:0.5rem 0;font-weight:500;transition:color 0.2s}
.nav a:hover{color:var(--accent-1)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;border-radius:2px}

/* Hero */
.hero{padding:5rem 0;background-image: url('imgs/photo.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-color: var(--bg-1); margin-bottom:4rem; position: relative;}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:1}
.hero-inner{display:flex;gap:3rem;align-items:center;position:relative;z-index:2}
.hero-content{flex:1}
.hero h1{font-size:3rem;margin-bottom:1rem;font-weight:700;color:#e0e0e0}
.hero p{color:#e0e0e0;margin-bottom:2rem;font-size:1.1rem}
.hero-ctas{display:flex;gap:1rem}
.btn{display:inline-block;padding:0.875rem 1.5rem;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:all 0.2s}
.btn.primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:white;box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.btn.outline{border:1px solid var(--accent-1);color:var(--accent-1);background:transparent}
.btn.outline:hover{background:var(--accent-1);color:white}

.hero-illustration{width:400px;height:300px;border-radius:var(--radius);overflow:hidden;flex-shrink:0;background:linear-gradient(135deg, var(--accent-1), var(--accent-2));display:flex;align-items:center;justify-content:center;color:white;font-size:2rem;font-weight:700}

/* Services */
.services{padding:4rem 0}
.services h2{font-size:2rem;margin-bottom:0.5rem;font-weight:700}
.services .lead{color:var(--muted);margin-bottom:2rem;font-size:1.1rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;position:relative}
.card{background:var(--card);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);transition:box-shadow 0.2s;position:relative;min-height:200px}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.card .icon{width:2.5rem;height:2.5rem;margin-bottom:1rem;color:var(--accent-1)}
.card h3{margin-bottom:0.5rem;font-weight:600}
.card p{color:var(--muted);font-size:1rem}
.details-btn{display:none;position:absolute;bottom:1rem;right:1rem;padding:0.5rem 1rem;background:var(--accent-1);color:white;border:none;border-radius:var(--radius);cursor:pointer;transition:background 0.2s}
.details-btn:hover{background:var(--accent-2)}
.card:hover .details-btn{display:block}
.details{position:absolute;top:100%;left:0;width:100%;background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:white !important;box-shadow:0 8px 16px rgba(0,0,0,0.2);z-index:10;visibility:hidden;padding:1rem;margin-top:0.5rem;border-radius:var(--radius);transform:translateY(-10px) scale(0.95);opacity:0;transition:transform 0.4s ease, opacity 0.4s ease}
.details p { color: white !important; }
.card.expanded .details{visibility:visible;transform:translateY(0) scale(1);opacity:1}
.card.expanded{transition:all 0.3s ease}

/* About & features */
.about{padding:4rem 0}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.feature{background:var(--card);padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow)}

/* Portfolio */
.portfolio{padding:4rem 0}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.thumb{background:linear-gradient(90deg, var(--accent-1), var(--accent-2));height:150px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:1.2rem}

/* Contact */
.contact{padding:4rem 0}
.contact-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.form-row{display:flex;flex-direction:column}
.form-row label{font-size:0.9rem;margin-bottom:0.5rem;color:var(--muted);font-weight:500}
.form-row input,.form-row textarea,.form-row select{padding:0.875rem;border-radius:var(--radius);border:1px solid #d1d5db;background:var(--bg-1);transition:border-color 0.2s}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--accent-1)}
.form-actions{grid-column:1/-1;display:flex;gap:1rem;align-items:center}

/* Footer */
.site-footer{padding:3rem 0;margin-top:4rem;border-top:1px solid #e5e7eb;background:var(--card)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.muted{color:var(--muted);font-size:0.9rem;margin-top:2rem}

/* Responsive */
@media (max-width:880px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero h1{font-size:2.5rem}
  .hero p{font-size:1rem}
  .nav{display:none;position:absolute;right:1rem;top:64px;background:var(--bg-1);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow)}
  .nav.show{display:flex;flex-direction:column}
  .nav-toggle{display:block}
  .container{padding:2rem 1rem}
  .services-grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width:420px){
  .hero h1{font-size:2rem}
  .hero-ctas{flex-direction:column}
}