/* styles.css - gray-lightgray theme */
:root{
  --accent: #1f2937;
  --muted: #4b5563;
  --bg-light: #575f6e;
  --bg-lighter: #72757a;
  --glass: rgba(255,255,255,0.06);
  --max-width: 1400px;
  --angle: 4deg;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui}
body{
  background:linear-gradient(180deg,var(--bg-light),var(--bg-lighter));
  color:var(--accent);
  scroll-behavior:smooth;
}

a:link,
a:visited {
  color: yellow;
  text-decoration: none;
  font-weight: bold;
}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;z-index:40;
  background:rgba(33, 33, 34, 0.7);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(31,41,55,0.1);
}
.desktop-nav{display:flex;gap:1rem}
.desktop-nav a{padding:0.5rem 0.75rem;border-radius:6px;text-decoration:none;color:whitesmoke;font-weight:600}
.desktop-nav a:hover{background:var(--bg-lighter)}

/* Hamburger */
.hamburger{display:none;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}
.hamburger .bar{width:22px;height:2px;background:whitesmoke;margin:3px 0;border-radius:2px}

/* Overlay menu */
.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;
  background:rgba(31,41,55,0.9);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.3s;
}
.overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}
.overlay-nav{display:flex;flex-direction:column;gap:1.5rem;text-align:center}
.overlay-nav a{color:white;text-decoration:none;font-size:1.4rem;font-weight:700}

/* Sections */
.sections{scroll-snap-type:y mandatory;margin-top:64px}
.panel{height:max-content;min-height:calc(100vh - 64px);display:flex;align-items:stretch;scroll-snap-align:start;overflow:hidden}
.split{display:flex;flex:1;max-width:var(--max-width);margin:0 auto;width:100%}
.half{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4rem}
.half img{max-width:100%;height:auto;display:block}
.content{max-width:520px;color: whitesmoke}

/* Angled divider */
.half::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, var(--bg-light), var(--bg-lighter));
  transform-origin:center;transform:skewX(var(--angle));opacity:.95;
}
.half > *{position:relative;z-index:2}
.panel .right::before{background:linear-gradient(180deg,var(--bg-lighter),var(--bg-light))}
.panel.reverse .split{flex-direction:row-reverse}
.panel.reverse .half::before{transform:skewX(calc(var(--angle) * -1))}
.panel.reverse .left{order:0}
.panel.reverse .right{order:1}

/* Text styles */
h2{margin-top:0;font-size:2rem}
p{color:whitesmoke;line-height:1.6}
p a{text-decoration: none;}
.contact-form{display:grid;gap:.5rem;margin-top:1rem}
.contact-form label{display:flex;flex-direction:column;font-size:.9rem;color:whitesmoke}
.contact-form input, .contact-form textarea{padding:.6rem;border-radius:8px;border:1px solid rgba(15,23,42,0.08);margin-top:.35rem;background:white}
.btn{margin-top:.5rem;padding:.6rem 1rem;border-radius:10px;border:0;background:var(--accent);color:white;font-weight:700;cursor:pointer}


/* Footer */
.site-footer{text-align:center;padding:1.25rem 0;color:whitesmoke;font-size:.9rem}

#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
}

#backToTop.show {
  display: flex;
  opacity: 1;
}

#backToTop:hover {
  background: var(--bg-lighter);
}

/* Responsive */
@media (max-width:720px){
  .desktop-nav{display:none}
  .hamburger{display:flex}
  .split{flex-direction:column}
  .panel{height:auto;min-height:auto;overflow:visible}
  .panel.reverse .split{flex-direction:column}
  .half{padding:1.5rem}
  :root{--angle:2deg}
  .panel:not(.reverse) .left{order:0}
  .panel:not(.reverse) .right{order:1}
  .panel.reverse .left{order:0}
  .panel.reverse .right{order:1}
}