/* ============================================
   Klave — shared design system
   Used by index.html and work.html
   ============================================ */
:root{
  --orange:#E8521A;
  --charcoal:#1A1A1A;
  --off-white:#F5F5F3;
  --white:#FFFFFF;
  --muted:#7A7A78;
  --border:rgba(26,26,26,0.10);
  --border-light:rgba(245,245,243,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--off-white);
  color:var(--charcoal);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
section{padding:120px 0;}
.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:16px;
  display:block;
}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.02em;}
h2{font-size:40px;letter-spacing:-0.03em;margin-bottom:20px;}
.lede{font-size:18px;color:var(--muted);max-width:560px;}
.section-head{max-width:640px;margin-bottom:64px;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:100px;
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.01em;
  transition:all .2s ease;
  border:1px solid transparent;
  cursor:pointer;
  background:none;
}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{background:#d1470f;transform:translateY(-1px);}
.btn-dark{background:var(--charcoal);color:var(--white);}
.btn-dark:hover{background:#000;transform:translateY(-1px);}
.btn-outline{border-color:rgba(26,26,26,0.2);color:var(--charcoal);}
.btn-outline:hover{border-color:var(--charcoal);}
.btn-outline-light{border-color:rgba(245,245,243,0.3);color:var(--off-white);}
.btn-outline-light:hover{border-color:var(--off-white);}

/* NAV */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(245,245,243,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
header.scrolled{border-bottom-color:var(--border);}
nav{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:20px 32px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:20px;letter-spacing:-0.03em;
}
.logo-mark{
  width:32px;height:32px;display:block;
}
.nav-links{display:flex;gap:36px;align-items:center;}
.nav-links a{font-size:14px;font-weight:500;color:var(--charcoal);opacity:0.75;transition:opacity .15s ease;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-cta{display:flex;align-items:center;gap:20px;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:22px;height:2px;background:var(--charcoal);margin:5px 0;}

/* TABS (shared by pricing switcher + work portfolio) */
.tabs{
  display:flex;gap:8px;
  border-bottom:1px solid var(--border);
}
.tab-btn{
  background:none;border:none;cursor:pointer;
  padding:12px 20px;font-size:14px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease;
}
.tab-btn.active{color:var(--charcoal);border-bottom-color:var(--orange);}
.tab-btn:hover{color:var(--charcoal);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

footer{background:var(--charcoal);color:rgba(245,245,243,0.5);padding:32px 0;border-top:1px solid var(--border-light);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;font-size:13px;flex-wrap:wrap;gap:12px;}
.footer-inner a{color:rgba(245,245,243,0.5);}

@media (max-width:900px){
  .nav-links{display:none;}
  .burger{display:block;}
  section{padding:80px 0;}
}
@media (max-width:600px){
  h2{font-size:30px;}
  .wrap{padding:0 20px;}
}