@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --primary: #153552;
  --secondary: #f4c95d;
  --bg-light: #f7f3ed;
  --bg-dark: #172026;
  --text-primary: #172026;
  --text-muted: #526166;
  --radius: .5rem;
  --transition: .3s ease;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter',Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg-light),#e0e7ff);
  color:var(--text-primary);
}

.glassy{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:clamp(20px,5vw,72px);
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1rem clamp(28px,5vw,92px);
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.logo-link img{width:66px;height:66px;object-fit:cover}
.logo-placeholder{
  display:inline-flex;align-items:center;
  min-height:56px;color:var(--primary);
  font-weight:800;font-size:1.35rem;
}

/* Navigation */
.main-nav{
  display:flex;align-items:center;gap:clamp(22px,3vw,44px);
  font-size:1.25rem;font-weight:600;
}
.main-nav a{color:#333;text-decoration:none;transition:var(--transition)}
.main-nav a:hover,.main-nav a:focus{color:var(--primary)}
.main-nav .login-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 1rem;color:#fff;
  background:var(--primary);font-size:1.05rem;border:1px solid var(--primary);
}
.main-nav .login-link:hover,.main-nav .login-link:focus{
  color:var(--primary);background:#fff;
}

/* Hero */
.hero{
  min-height:calc(100vh - 98px);display:flex;flex-direction:column;justify-content:center;  padding:4rem clamp(20px,5vw,72px);
  color:#fff;background:linear-gradient(135deg,var(--bg-dark),#2f5f5b);
}
.hero-content{max-width:760px}
.hero-content > p{margin:0 0 1rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
h1{margin:0;font-size:clamp(2.4rem,7vw,5.8rem);line-height:.98;}
.hero-text{margin-top:1.5rem;font-size:1.15rem;line-height:1.7;}

/* CTA */
.cta{display:inline-flex;align-items:center;min-height:44px;margin-top:1.25rem;padding:0 1rem;color:var(--text-primary);background:var(--secondary);font-weight:700;text-decoration:none;border-radius:var(--radius);transition:var(--transition);}
.cta:hover{background:#e5b23c;transform:translateY(-2px)}

/* Sections */
.portfolio-copy > div{margin:1rem 0;}
.contact-section{background:none}

/* Portfolio Grid */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(240px,30vw,340px),1fr));
  gap:clamp(1rem,2vw,1.5rem);
  max-width:1200px;
  margin:0 auto;
}
.portfolio-section-title{
  grid-column:1/-1;
  margin:0 0 clamp(0.5rem,1vw,0.75rem);
  font-size:clamp(1.3rem,3vw,1.6rem);
  color:var(--primary);
}

.portfolio-card{
  border:1px solid #e4ddd1;border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:var(--transition);
  background:#fff;
}
.portfolio-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.15);}

.portfolio-card-image{position:relative;overflow:hidden;}
.portfolio-card-image img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:var(--transition);}
.portfolio-card:hover .portfolio-card-image img{transform:scale(1.04);}

.portfolio-category-badge{
  position:absolute;top:clamp(8px,1.5vw,12px);right:clamp(8px,1.5vw,12px);
  padding:clamp(3px,.5vw,4px) clamp(8px,1.2vw,12px);border-radius:20px;
  background:var(--primary);color:#fff;
  font-size:clamp(.65rem,1vw,.75rem);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}

.portfolio-card-body{padding:clamp(.75rem,1.5vw,1rem) clamp(1rem,2vw,1.25rem);}
.portfolio-card-title{margin:0 0 clamp(.25rem,.5vw,.35rem);font-size:clamp(.95rem,1.8vw,1.1rem);color:var(--text-primary);}
.portfolio-card-client{margin:0 0 clamp(.35rem,.6vw,.5rem);font-size:clamp(.75rem,1.2vw,.85rem);color:var(--text-muted);}
.portfolio-card-count{
  display:inline-block;padding:2px clamp(6px,1vw,10px);
  background:var(--bg-light);border-radius:12px;
  font-size:clamp(.7rem,1vw,.8rem);color:var(--text-muted);font-weight:600;
}

/* Lightbox Overlay */
.lightbox-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:fadeIn .25s ease;
}
.lightbox-overlay.active{display:flex;}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.lightbox-close{
  position:absolute;top:clamp(10px,2vw,16px);right:clamp(14px,2.5vw,24px);
  background:none;border:none;color:#fff;
  font-size:clamp(1.8rem,4vw,2.5rem);cursor:pointer;z-index:10;
  transition:var(--transition);line-height:1;
}
.lightbox-close:hover{color:var(--secondary);transform:scale(1.15);}

.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.12);border:none;color:#fff;
  font-size:clamp(1.2rem,2.5vw,2rem);
  padding:clamp(8px,1.5vw,12px) clamp(10px,2vw,16px);
  cursor:pointer;
  border-radius:var(--radius);transition:var(--transition);z-index:10;
}
.lightbox-prev{left:clamp(8px,2vw,16px);}
.lightbox-next{right:clamp(8px,2vw,16px);}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25);}

.lightbox-content{
  display:flex;flex-direction:column;align-items:center;
  width:90vw;max-height:72vh;
}
.lightbox-image{
  max-width:100%;max-height:60vh;object-fit:contain;border-radius:4px;
}
.lightbox-caption{
  margin-top:clamp(8px,1.5vw,12px);color:#fff;
  font-size:clamp(.9rem,1.8vw,1.1rem);font-weight:600;text-align:center;
}
.lightbox-description{
  margin-top:clamp(2px,.4vw,4px);color:rgba(255,255,255,.7);
  font-size:clamp(.8rem,1.3vw,.9rem);
  text-align:center;max-width:min(600px, 80vw);
}
.lightbox-counter{
  margin-top:clamp(4px,.8vw,8px);color:rgba(255,255,255,.5);
  font-size:clamp(.7rem,1vw,.8rem);
}

/* Thumbnail strip */
.lightbox-thumbnails{
  display:flex;gap:clamp(4px,.8vw,8px);margin-top:clamp(10px,2vw,16px);
  max-width:90vw;overflow-x:auto;padding:4px 0;
  justify-content:center;
}
.lightbox-thumb{
  width:clamp(40px,7vw,56px);height:clamp(30px,5vw,42px);
  object-fit:cover;border-radius:4px;
  cursor:pointer;border:2px solid transparent;
  transition:var(--transition);flex-shrink:0;opacity:.5;
}
.lightbox-thumb:hover{opacity:.8;}
.lightbox-thumb.active{border-color:var(--secondary);opacity:1;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;max-width:1100px;}
.contact-card{min-height:150px;padding:1.5rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:var(--radius);}
.contact-card h3{margin:0 0 .75rem;color:var(--secondary);font-size:1.1rem;}
.contact-card a{color:var(--secondary);text-decoration:underline;text-underline-offset:3px;}
.contact-card a:hover,.contact-card a:focus{color:#fff;}

/* Responsive — Tablet (< 1024px) */
@media(max-width:1024px){
  .portfolio-grid{
    grid-template-columns:repeat(auto-fit,minmax(clamp(220px,40vw,300px),1fr));
  }
}

/* Responsive — Mobile (< 760px) */
@media(max-width:760px){
  .site-header{flex-direction:column;align-items:flex-start;padding:1rem 1.5rem;}
  .logo-link img{width:58px;height:58px;}
  .logo-placeholder{min-height:44px;font-size:1.15rem;}
  .main-nav{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:1rem 1.5rem;font-size:1.05rem;}
  .hero{min-height:82vh;}

  .portfolio-grid{grid-template-columns:1fr;}

  .lightbox-prev,.lightbox-next{padding:clamp(6px,1.2vw,10px) clamp(8px,1.5vw,12px);}
  .lightbox-thumb{width:clamp(36px,8vw,48px);height:clamp(27px,6vw,36px);}
}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
section{animation:fadeInUp .6s ease-out}