:root{
  --bg:#0B0B0D;
  --dark:#08080A;
  --cream:#F3EFE7;
  --mut:#8E887E;
  --acc:#FF5233;
  --line:#26262A;
  --card:#141417;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', system-ui, sans-serif;
  --mono:'Space Mono', monospace;
  --maxw:1440px;
  --pad:clamp(24px, 5vw, 56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;
  font-weight:500;font-size:.94rem;padding:13px 24px;transition:transform .15s ease,opacity .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--acc);color:#fff}
.btn-dark{background:#141414;color:var(--cream)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:1rem;color:var(--cream)}
.link-arrow span{color:var(--acc);transition:transform .2s ease}
.link-arrow:hover span{transform:translateX(4px)}

.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.muted{color:var(--mut)}

/* NAV */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(11,11,13,.55);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(11,11,13,.82)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo img{height:22px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-weight:500;font-size:15px;color:var(--cream);opacity:.92;transition:opacity .15s}
.nav-links a:hover{opacity:1}
.nav-links .btn-accent{color:#fff;padding:12px 20px;font-size:14px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:6px;padding:6px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--cream);transition:transform .25s,opacity .25s}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:8px var(--pad) 24px;border-bottom:1px solid var(--line)}
.nav-mobile a{padding:12px 0;font-weight:500;border-bottom:1px solid rgba(255,255,255,.05)}
.nav-mobile .btn-accent{margin-top:12px;align-self:flex-start}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:86vh;display:flex;align-items:center;padding:96px 0}
.topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;z-index:2}
.hero-title{font-family:var(--serif);font-weight:900;line-height:.98;
  font-size:clamp(2.6rem, 5.4vw, 78px);letter-spacing:-.01em;margin:20px 0 0;max-width:620px}
.hero-sub{color:var(--mut);font-size:18px;line-height:1.54;max-width:600px;margin-top:26px;text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:20px;margin-top:34px;flex-wrap:wrap}

/* generic section */
.section{position:relative;padding:104px 0}
.section-title{font-family:var(--serif);font-weight:900;line-height:1.06;
  font-size:clamp(2rem, 3.6vw, 46px);letter-spacing:-.01em;margin-bottom:44px}

/* CLIENTS (centered) */
.clients{padding-top:96px}
.clients .container{text-align:center}
.clients-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:36px clamp(56px,11vw,147px);margin:0 auto 26px}
.clients-logos .lg{height:auto}
.clients-logos .lg-piwik{width:130px}
.clients-logos .lg-ideagen{width:140px}
.clients-logos .lg-entrinsik{width:131px}
.clients-logos .lg-braineering{width:196px}
.clients .muted{font-size:17px;max-width:680px;margin:0 auto;text-wrap:balance}

/* SERVICES */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px 28px;transition:border-color .2s,transform .2s}
.card:hover{border-color:#3a3a42;transform:translateY(-2px)}
.card .num{font-family:var(--mono);font-size:13px;color:var(--acc);letter-spacing:.06em}
.card h3{font-size:21px;font-weight:600;margin:12px 0 10px}
.card p{color:var(--mut);font-size:15px;line-height:1.5}

/* STUDIO */
.studio-lead{color:var(--mut);font-size:19px;line-height:1.54;max-width:820px;margin-top:-18px}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.why-item{border-top:1px solid var(--line);padding-top:14px}
.why-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.why-item p{color:var(--mut);font-size:14px}

/* CONTACT */
.contact{background:var(--acc);overflow:hidden;padding:120px 0}
.contact-inner{position:relative;z-index:2}
.contact-title{font-family:var(--serif);font-weight:900;line-height:1.0;color:#1A0B05;
  font-size:clamp(2.4rem,5vw,68px);letter-spacing:-.01em}
.contact-sub{color:#5C2415;font-size:19px;line-height:1.52;max-width:500px;margin-top:20px}
.contact-cta{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.contact-email{color:#1A0B05;font-weight:500;font-size:17px}

/* FOOTER */
.footer{background:var(--dark);padding:56px 0 44px}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-logo{height:22px;margin-bottom:14px}
.footer-left .muted{font-size:15px;line-height:1.5}
.footer .copy{color:#5C574F;font-size:12px;margin-top:14px}
.footer-cols{display:flex;gap:72px}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-head{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#5C574F;margin-bottom:2px}
.footer-col a{color:#D3CEC4;font-size:15px;font-weight:500;transition:color .15s}
.footer-col a:hover{color:var(--cream)}

/* RESPONSIVE */
@media (max-width:860px){
  .cards{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:640px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-mobile{display:flex}
  .nav.open .nav-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav.open .nav-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .hero{min-height:auto;padding:56px 0 72px}
  .topo{opacity:.5}
  .cards{grid-template-columns:1fr}
  .clients-logos{flex-direction:column;gap:26px}
  .footer-inner{flex-direction:column;gap:32px}
  .footer-cols{gap:56px}
}