:root{
  --bg:#ffffff; --muted:#6b7280; --accent:#0b74ff; --accent-2:#38d39f; --max:1100px;
  --radius:10px; --container-padding:1rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:var(--bg);color:#111}
.container{max-width:var(--max);margin:0 auto;padding:0 1rem}

/* Top bar and nav */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;font-size:.95rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.06em}
.top-contacts{display:flex;gap:1rem;align-items:center}
.btn{display:inline-block;padding:.5rem 1rem;border-radius:6px;text-decoration:none;color:inherit;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid #e6eefb;color:var(--accent)}
.btn.small{padding:.35rem .6rem;font-size:.9rem}

.navbar{background:#fff;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0}
.logo{font-weight:800;color:var(--accent);text-decoration:none}
.logo span{color:var(--accent-2)}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.nav-links a{text-decoration:none;color:var(--muted);padding:.35rem .5rem;border-radius:6px}
.nav-links a:hover{background:#f1f5f9;color:#000}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.2rem}

/* Logo image sizing */
.site-logo{height:44px;width:auto;border-radius:8px;object-fit:cover;vertical-align:middle}
.site-logo.small{height:36px}
.site-logo.footer-logo{height:32px;margin-right:.6rem}
.footer-brand{display:flex;align-items:center;gap:.5rem}

/* Hero */
.hero{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-content h1{font-size:2rem;margin:0 0 .5rem}
.hero-content p{color:var(--muted);margin:0 0 1rem}
.hero-actions{display:flex;gap:.75rem}
.hero-visual svg{width:100%;height:auto}
/* hero logo image sizing */
.hero-visual{display:flex;align-items:center;justify-content:center}
.hero-logo{max-width:100%;height:auto;border-radius:10px;box-shadow:0 10px 30px rgba(2,8,23,0.3);background:rgba(255,255,255,0.03);padding:8px}

/* Sections */
.section{padding:2.5rem 0}
.section.alt{background:#fbfdff}
.section-title{font-size:1.4rem;margin-bottom:1rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:#fff;padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(12,34,66,0.04)}
.card-icon{font-size:1.6rem}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.project .thumb{height:140px;background:linear-gradient(135deg,#eef6ff,#f0fff4);border-radius:8px}
.about-grid{display:grid;grid-template-columns:1fr 260px;gap:1.5rem;align-items:center}
.stats{display:flex;flex-direction:column;gap:.8rem}
.stat{background:#fff;padding:1rem;border-radius:10px;text-align:center}
.stat strong{display:block;font-size:1.3rem;color:var(--accent)}

.testimonials{display:flex;align-items:center;gap:1rem}
.test-slider{overflow:hidden;flex:1}
.test{min-height:80px;padding:1rem;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(12,34,66,0.04)}
.tbtn{background:transparent;border:1px solid #e6eefb;padding:.5rem;border-radius:8px}

.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1.2rem}
form label{display:block;margin-bottom:.6rem}
input,textarea{width:100%;padding:.6rem;border:1px solid #e6eefb;border-radius:6px}
.map-placeholder{height:220px;background:#eef2ff;border-radius:8px;margin-top:1rem;overflow:hidden}
.map-placeholder iframe{width:100%;height:100%;border:0;display:block}

.footer{background:#0b1220;color:#dbe9ff;padding:1rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:680px){
  .nav-links{display:none;flex-direction:column;background:#fff;position:absolute;right:1rem;top:64px;padding:.75rem;border-radius:8px;box-shadow:0 8px 30px rgba(12,34,66,0.08)}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
}

/* Visual enhancements: backgrounds, transitions, reveal */
.hero{background-image: url('../images/hero-bg.svg');background-size:cover;background-position:center;color:#fff;position:relative;padding:4rem 0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,28,0.25),rgba(6,14,28,0.45));pointer-events:none;border-radius:0}
.hero .container{position:relative;z-index:2}
.hero-content h1{color:#fff}
.hero-content p{color:rgba(255,255,255,0.9)}


.reveal{opacity:0;transform:translateY(12px);transition:opacity .65s ease,var(--transform, transform) .65s ease}
.reveal.active{opacity:1;transform:none}

/* Slide-in helpers: left/right entry for hero content and image */
.reveal .slide-left,
.reveal .slide-right{opacity:0;transition:transform .72s cubic-bezier(.2,.9,.2,1),opacity .6s ease}
.reveal .slide-left{transform:translateX(-36px)}
.reveal .slide-right{transform:translateX(36px)}
.hero.reveal .slide-left{transition-delay:.04s}
.hero.reveal .slide-right{transition-delay:.08s}
.reveal.active .slide-left,
.reveal.active .slide-right{transform:none;opacity:1}

/* Section-specific reveal variants */
/* Simple fade (useful for single-column content) */
.reveal-fade{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal-fade.active{opacity:1;transform:none}

/* Zoom-in for 'About' section */
.reveal-zoom{opacity:0;transform:scale(.96);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.2,1)}
.reveal-zoom.active{opacity:1;transform:none}

/* Grid reveal with staggered children (for Recent Projects) */
.reveal-grid .project{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .5s ease,transform .5s ease}
.reveal-grid.active .project:nth-child(1){transition-delay:.05s;opacity:1;transform:none}
.reveal-grid.active .project:nth-child(2){transition-delay:.12s;opacity:1;transform:none}
.reveal-grid.active .project:nth-child(3){transition-delay:.18s;opacity:1;transform:none}
.reveal-grid.active .project:nth-child(4){transition-delay:.24s;opacity:1;transform:none}
.reveal-grid.active .project:nth-child(5){transition-delay:.30s;opacity:1;transform:none}
.reveal-grid.active .project:nth-child(6){transition-delay:.36s;opacity:1;transform:none}

/* Slide-up reveal for testimonials (subtle lift) */
.reveal-slide-up{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal-slide-up.active{opacity:1;transform:none}
.reveal-slide-up .test{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal-slide-up.active .test:nth-child(1){transition-delay:.04s;opacity:1;transform:none}
.reveal-slide-up.active .test:nth-child(2){transition-delay:.12s;opacity:1;transform:none}
.reveal-slide-up.active .test:nth-child(3){transition-delay:.20s;opacity:1;transform:none}

.card{transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,34,66,0.08)}

.project{transition:transform .28s ease,box-shadow .28s ease}
.project:hover{transform:translateY(-6px)}
.project .thumb{height:160px;background-size:cover;background-position:center;border-radius:10px;box-shadow:0 8px 20px rgba(12,34,66,0.04)}
.project:hover .thumb{box-shadow:0 18px 40px rgba(12,34,66,0.08)}

/* Scrolling strip for about section */
.scrolling-strip{margin-top:1.5rem;padding:1rem;background:linear-gradient(90deg,#eef6ff,#f0fff4);border-radius:10px;overflow:hidden}
.scroll-content{display:flex;gap:1rem;animation:scroll-left 20s linear infinite;white-space:nowrap}
.scroll-item{flex-shrink:0;padding:.5rem 1rem;background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(12,34,66,0.04)}
@keyframes scroll-left{0%{transform:translateX(0);}100%{transform:translateX(calc(-100% - 2rem))}}
.scrolling-strip:hover .scroll-content{animation-play-state:paused}

/* small polish for buttons and links */
.btn{transition:transform .18s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}

/* smooth scroll behavior for anchor navigation */
html{scroll-behavior:smooth}