*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --a:#00DBBB; --ag:rgba(0,219,187,.3); --ad:rgba(0,219,187,.1);
  --bg:#000; --bg2:#070707; --bg3:#111;
  --t:#fff; --m:rgba(255,255,255,.62); --b:rgba(255,255,255,.07);
  --f:'Satoshi',sans-serif;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--t);font-family:var(--f);overflow-x:hidden;}
a{cursor:pointer;}

/* NAV */
nav{
  position:sticky;top:0;left:0;right:0;z-index:100;
  padding:20px 56px;background:rgba(0,0,0,.88);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--b);
  display:flex;align-items:center;justify-content:space-between;
}
.n-logo{display:block;text-decoration:none;}
.n-logo img{height:26px;width:auto;display:block;}
.n-back{
  color:var(--m);font-size:13px;font-weight:500;text-decoration:none;
  display:flex;align-items:center;gap:8px;transition:color .2s;
}
.n-back:hover{color:var(--a);}

/* CASE HEADER */
.case-hero{padding:80px 56px 56px;max-width:900px;}
.case-tag{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border:1px solid rgba(0,219,187,.22);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--a);font-weight:500;margin-bottom:26px;
}
.case-title{font-size:clamp(36px,6vw,64px);font-weight:900;letter-spacing:-2.5px;line-height:1.02;margin-bottom:22px;}
.case-desc{font-size:16px;color:var(--m);line-height:1.7;font-weight:300;max-width:640px;margin-bottom:36px;}
.case-meta{display:flex;gap:36px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--b);}
.case-meta div{display:flex;flex-direction:column;gap:4px;}
.case-meta b{font-size:20px;font-weight:900;color:var(--a);letter-spacing:-.3px;}
.case-meta a{color:var(--a);text-decoration:none;}
.case-meta a:hover{text-decoration:underline;}
.case-meta span{font-size:10px;color:var(--m);letter-spacing:1.2px;text-transform:uppercase;}

/* SITE EMBED */
.case-section{padding:24px 56px 96px;}
.case-section h2{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-1px;margin-bottom:22px;}
.browser-frame{border:1px solid var(--b);background:var(--bg3);border-radius:12px;overflow:hidden;}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--b);background:#0c0c0c;}
.browser-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);}
.browser-url{
  flex:1;margin-left:8px;padding:5px 14px;background:rgba(255,255,255,.04);
  border-radius:6px;font-size:11px;color:var(--m);letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.browser-frame iframe{width:100%;height:720px;border:0;display:block;background:#fff;}

/* CAROUSELS */
.carr-block{margin-bottom:56px;}
.carr-block:last-child{margin-bottom:0;}
.carr-title{font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px;}
.carr-caption{font-size:14.5px;color:var(--m);line-height:1.6;font-weight:300;max-width:560px;margin-bottom:20px;}
.carr-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;}
.carr-strip::-webkit-scrollbar{height:6px;}
.carr-strip::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px;}
.carr-strip img{
  height:340px;width:auto;flex-shrink:0;border-radius:8px;border:1px solid var(--b);
  scroll-snap-align:start;background:var(--bg3);
}

/* CTA */
.case-cta{
  padding:96px 56px;text-align:center;border-top:1px solid var(--b);
}
.case-cta h2{font-size:clamp(28px,4.5vw,44px);font-weight:900;letter-spacing:-1.5px;margin-bottom:28px;}
.case-cta .btn-fill{
  padding:16px 38px;background:var(--a);color:#000;font-weight:700;font-size:14px;
  letter-spacing:.3px;text-decoration:none;display:inline-block;transition:box-shadow .25s;
}
.case-cta .btn-fill:hover{box-shadow:0 12px 40px var(--ag);}

/* FOOTER */
footer{padding:44px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--b);}
.f-logo img{height:24px;width:auto;display:block;}
.f-copy{color:var(--m);font-size:12px;}

@media(max-width:768px){
  nav{padding:16px 24px;}
  .case-hero{padding:48px 24px 40px;}
  .case-section{padding:16px 24px 64px;}
  .case-cta{padding:64px 24px;}
  footer{padding:32px 24px;}
  .browser-frame iframe{height:520px;}
  .carr-strip img{height:260px;}
}