/* Saturn Studio — Shared CSS Design System */
/* ============================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,900&display=swap');

/* ── TOKENS ── */
:root{
  color-scheme: dark;
  --dark:#0a0a0b;
  --dark-2:#141416;
  --dark-3: #252525;
  --blue:#4b72d4;
  --orange:#e84b2a;
  --grad:linear-gradient(135deg, #4b72d4 0%, #e84b2a 100%);
  --grey:#86868b;
  --grey-2: #C0C0C0;
  --border:rgba(0,0,0,.08);
  --border-dark:rgba(255,255,255,.08);
  --white:#fafafa;
  --off:#f5f5f7;
  --glass-bg:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.12);
  --glass-blur:blur(20px);
  --font-d:'Playfair Display', serif;
  --font-b:'DM Sans', sans-serif;
  --nav-h:80px;
  --max:1440px;
  --pad:5.5vw;
  --ease:cubic-bezier(0.25, 1, 0.5, 1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background-color:var(--dark)}
body{font-family:var(--font-b);font-size:15px;line-height:1.65;color:var(--white);background:var(--dark);overflow-x:hidden; width: 100%; -webkit-font-smoothing:antialiased}

/* Only hide cursor on desktops to prevent touch latency */
@media (pointer: fine) { body, button { cursor: none; } }
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{background:none;border:none;font-family:inherit}
input,textarea,select{font-family:inherit}

/* ── CURSOR ── */
#cur,#cur-r{position:fixed;border-radius:50%;pointer-events:none;top:0;left:0;will-change:transform;z-index:9999}
#cur{width:8px;height:8px;background:var(--orange);z-index:9999;transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .2s}
#cur-r{width:40px;height:40px;border:1.5px solid rgba(232,75,42,.3);z-index:9998;transition:width .4s var(--ease),height .4s var(--ease),border-color .3s}
body.cur-text #cur, body.cur-text #cur-r{opacity:0 !important;visibility:hidden !important}
input,textarea,select{cursor:text !important}

/* Prevent layout shifts/repaints on mobile by hiding these entirely */
@media (pointer: coarse) { #cur, #cur-r { display: none !important; } }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.disp{font-family:var(--font-d);font-weight:900;line-height:.92;letter-spacing:-.04em}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-grey{color:var(--grey)}
.text-sm{font-size:13px}
.text-xs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ── LAYOUT ── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:120px 0;background:var(--white);color:var(--dark)}
.section-sm{padding:80px 0;background:var(--white);color:var(--dark)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px;gap:40px}
.sec-head h2{margin-top:18px;font-size:clamp(32px,4.5vw,64px)}
.sec-label{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:14px}
.sec-label::before{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0}
.sec-label-light{color:rgba(255,255,255,.38)}
.sec-label-light::before{background:rgba(255,255,255,.25)}
.dark-s{background:var(--dark);color:#fff;box-shadow:0 0 0 2px var(--dark);margin-left:-1px;margin-right:-1px;padding-left:1px;padding-right:1px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-b);font-size:14px;font-weight:500;letter-spacing:.02em;padding:14px 30px;border-radius:100px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;cursor:none}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);flex-shrink:0}
.btn:hover svg{transform:translate(3px,-3px)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--dark-2)}
.btn-grad{background:var(--grad);color:#fff}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(232,75,42,.35)}
/* Services button specific override for contrast */
.srv-item .btn-grad { position:relative; overflow:hidden; z-index:1; }
.srv-item .btn-grad::before { content:''; position:absolute; inset:0; background:var(--dark); z-index:-1; opacity:0; transition:opacity .3s var(--ease); }
.srv-item .btn-grad:hover::before { opacity:1; }
.srv-item .btn-grad:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.35); }
.btn-ghost{background:rgba(10,10,10,.06);color:var(--dark);border:1.5px solid var(--border);padding:13px 30px}
.btn-ghost:hover{background:var(--dark);color:#fff;border-color:var(--dark);transform:translateY(-2px)}
.btn-ghost-light{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.2);padding:13px 30px}
.btn-ghost-light:hover{background:#fff;color:var(--dark);transform:translateY(-2px)}
.btn-glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background .5s,backdrop-filter .5s,box-shadow .5s}
#nav.scrolled{background:rgba(250,250,249,.93);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 0 var(--border)}
#nav.nav-dark{background:transparent}
#nav.nav-dark.scrolled{background:rgba(14,14,14,.93);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav-logo img{height:52px;width:auto;transition:opacity .25s;display:block}
.nav-logo:hover img{opacity:.75}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-size:14px;font-weight:400;color:var(--dark);position:relative;transition:color .25s;letter-spacing:.01em}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
#nav.nav-dark .nav-links a{color:rgba(255,255,255,.75)}
#nav.nav-dark .nav-links a:hover{color:#fff}
.nav-cta .btn{padding:10px 22px;font-size:13px}
.hamburger{display:none;flex-direction:column;gap:5px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s var(--ease)}
.hamburger span{display:block;width:20px;height:1.5px;background:#fff;border-radius:2px;transition:all .35s var(--ease)}
#nav:not(.nav-dark) .hamburger{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04)}
#nav:not(.nav-dark) .hamburger span{background:var(--dark)}
.hamburger:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.7px,4.7px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.7px,-4.7px)}

/* ── MOBILE MENU ── */
#mm{display:none;position:fixed;top:0;bottom:0;right:0;width:35%;min-width:240px;z-index:490;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:var(--nav-h) var(--pad) calc(48px + env(safe-area-inset-bottom));opacity:0;transform:translateX(100%);transition:opacity .5s var(--ease), transform .5s var(--ease);gap:0;overflow-y:auto;overflow-x:hidden}
#mm.open{opacity:1;transform:translateX(0)}
@media (max-width:600px){ #mm{width:60%} }
/* Layered dark background with brand glows */
#mm::before{content:'';position:absolute;inset:0;background:rgba(12,12,12,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);z-index:0}
#mm::after{content:'';position:absolute;bottom:-120px;left:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,75,42,.12),transparent 65%);pointer-events:none;z-index:0}
.mm-glow{position:absolute;top:-100px;right:-100px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(75,114,212,.1),transparent 65%);pointer-events:none;z-index:0}
.mm-links{position:relative;z-index:1;display:flex;flex-direction:column;gap:0}
/* Numbered link items */
#mm .mm-links a{font-family:var(--font-d);font-size:clamp(36px,9vw,64px);font-weight:700;color:rgba(255,255,255,.85);transition:color .3s var(--ease),transform .3s var(--ease);letter-spacing:-.03em;line-height:1.1;display:flex;align-items:baseline;gap:14px;padding:6px 0;transform:none}
#mm .mm-links a::before{content:attr(data-num);font-family:var(--font-b);font-size:11px;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.2);margin-bottom:2px;transition:color .3s;flex-shrink:0;width:28px}
#mm .mm-links a:hover,#mm .mm-links a.active{color:#fff;transform:translateX(6px)}
#mm .mm-links a:hover::before,#mm .mm-links a.active::before{color:var(--orange)}
/* Social row */
.mm-social{display:none}
#mm .mm-social a{font-family:var(--font-b);font-size:10px;font-weight:500;color:rgba(255,255,255,.35);letter-spacing:.12em;text-transform:uppercase;transition:all .25s;padding:7px 15px;border-radius:100px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;display:inline-flex;transform:none;line-height:1}
#mm .mm-social a:hover{color:#fff;border-color:var(--orange);transform:none}

/* ── FOOTER ── */
.footer{background:var(--dark);color:#fff;padding:96px var(--pad) calc(52px + env(safe-area-inset-bottom)); overflow-x: hidden;}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:56px;padding-bottom:64px;border-bottom:1px solid var(--border-dark);margin-bottom:40px}
.footer-logo{height:220px;max-width:320px;object-fit:contain;margin-left:-20px;width:auto;filter:brightness(0) invert(1);opacity:.8;margin-bottom:22px}
.footer-desc{font-size:14px;color:rgba(255,255,255,.38);line-height:1.85;max-width:280px;font-weight:300}
.footer-col h5{font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.28);text-transform:uppercase;font-weight:500;font-family:var(--font-b);margin-bottom:24px}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,.52);margin-bottom:12px;transition:color .25s;width:fit-content}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.24);letter-spacing:.02em}
.footer-socials{display:flex;gap:20px}
.footer-socials a{font-size:12px;color:rgba(255,255,255,.38);letter-spacing:.05em;transition:color .25s}
.footer-socials a:hover{color:#fff}

/* ── REVEAL ANIMATIONS ── */
.rv,.rv-l,.rv-r,.rv-s,.stag{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv{transform:translateY(50px)}.rv-l{transform:translateX(-50px)}.rv-r{transform:translateX(50px)}.rv-s{transform:scale(.94)}
.stag{transform:translateY(40px);transition-duration:.7s}
.rv.in,.rv-l.in,.rv-r.in,.rv-s.in,.stag.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}

/* ── MARQUEE ── */
.mq-wrap{overflow:hidden;mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:mq 32s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{flex-shrink:0;width:max(20vw, 180px);display:flex;justify-content:center;padding:0 2vw;animation:logo-wave 4s ease-in-out infinite;animation-delay:calc(var(--i, 0) * 0.35s)}
@keyframes logo-wave{0%,100%{opacity:.75;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4px)}}
.mq-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0}

/* ── WORK CARDS ── */
.work-card{display:block;position:relative;overflow:hidden;border-radius:16px;background:var(--off);text-decoration:none;color:inherit;cursor:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.dark-s .work-card{background:var(--dark-2)}
.work-card:hover{transform:translateY(-6px);box-shadow:0 32px 80px rgba(0,0,0,.12)}
.wc-img-wrap{overflow:hidden;position:relative;background:var(--dark-2)}
.wc-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.work-card:hover .wc-img{transform:scale(1.06)}
.wc-img.tall{aspect-ratio:3/4}.wc-img.wide{aspect-ratio:16/9}.wc-img.sq{aspect-ratio:1}.wc-img.short{aspect-ratio:4/3}
.wc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,14,.88) 0%,transparent 55%);opacity:0;transition:opacity .4s var(--ease);display:flex;flex-direction:column;justify-content:flex-end;padding:28px}
.work-card:hover .wc-overlay{opacity:1}
.wc-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.wc-title{font-family:var(--font-d);font-size:clamp(16px,2.2vw,26px);font-weight:700;color:#fff;line-height:1.15}
.wc-arrow{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px) rotate(-45deg);transition:all .4s var(--ease)}
.work-card:hover .wc-arrow{opacity:1;transform:none}
.wc-arrow svg{width:16px;height:16px;stroke:var(--dark);fill:none;stroke-width:1.5}
.wc-body{padding:22px 24px 20px}
.wc-body-cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.wc-body-title{font-family:var(--font-d);font-size:clamp(15px,1.8vw,22px);font-weight:700}

/* ── BENTO GRID ── */
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:360px;gap:24px}
.bento-item{position:relative;display:block;height:100%;border-radius:24px;overflow:hidden;background:var(--dark-2)}
.bento-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%);z-index:1;pointer-events:none;transition:opacity .4s}
.bento-item:hover::after{opacity:0.8}
.bento-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.33,1,.68,1)}
.bento-item:hover .bento-img{transform:scale(1.05)}
.bento-large{grid-column:span 2;grid-row:span 2}
.bento-glass{position:absolute;bottom:16px;left:16px;right:16px;padding:16px 20px;border-radius:18px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:flex-end;z-index:3;color:#fff;transition:border-color .4s,background .4s}
.bento-item:hover .bento-glass{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3)}
.bento-glass .cat{font-size:10px;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-weight:600}
.bento-glass .title{font-size:20px;font-weight:700;line-height:1.1;font-family:var(--font-d)}
.bento-large .bento-glass{padding:20px 24px;bottom:20px;left:20px;right:20px}
.bento-large .bento-glass .title{font-size:28px}
.bento-glass svg{transition:transform .4s cubic-bezier(.33,1,.68,1)}
.bento-item:hover .bento-glass svg{transform:translate(4px,-4px)}
.bento-tag{position:absolute;top:24px;left:24px;padding:8px 18px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}
@media(max-width:1024px){
  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:320px}
  .bento-item{grid-column: span 1 !important;}
  .bento-item:nth-child(6){grid-column:span 2 !important}
  .bento-large .bento-glass .title{font-size:28px}
}
@media(max-width:700px){
  .bento-grid{grid-template-columns:1fr;grid-auto-rows:340px}
  .bento-item{grid-column:span 1 !important; grid-row: span 1 !important;}
  .bento-large{grid-column:span 1 !important;grid-row:span 1 !important}
  .bento-item:nth-child(6), .bento-item.bento-coming{grid-column:span 1 !important}
}
.bento-coming{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;background:var(--dark-2);border:1px solid var(--border-dark);z-index:2}
.bento-coming::after{display:none}
.bento-coming h3{font-family:var(--font-d);font-size:clamp(20px, 2.5vw, 28px);font-weight:700;color:#fff;margin-bottom:24px;line-height:1.2}
.bento-coming .btn{transform:none !important}

/* ── STATS ── */
.stats-strip{background:var(--dark);padding:0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.stat-item{padding:56px 40px;border-right:1px solid var(--border-dark);transition:background .3s}
.stat-item:last-child{border-right:none}
.stat-item:hover{background:rgba(255,255,255,.03)}
.stat-num{font-family:var(--font-d);font-size:clamp(40px,5vw,72px);font-weight:900;color:#fff;line-height:1;margin-bottom:8px}
.stat-num .acc{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-lbl{font-size:13px;color:rgba(255,255,255,.4);font-weight:300;letter-spacing:.03em}

/* ── HERO SECTION ───────────────────────── */
.hero-scrub-wrap {
  position: relative;
  height: 300vh; /* Exactly 2 scrolls of scrollable distance */
  width: 100%;
  background: var(--dark);
  color: #fff;
}
.hero {
  display: block; 
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background: var(--dark);
}
.hero.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.hero-l {
  padding: calc(var(--nav-h) + 100px) var(--pad) 80px clamp(80px, 8vw, 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 55%;
  min-height: 100vh;
  z-index: 2;
  pointer-events: none; /* Let clicks pass through empty space */
}
.hero-l > * {
  pointer-events: auto; /* Re-enable for content */
}
.hero-r {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65%; /* Bleeds 15% under the text! */
  overflow: hidden;
  z-index: 1;
}
.hero-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-lbl{margin-bottom:40px}
.hero-h{font-family:var(--font-d);font-size:clamp(52px,7.5vw,128px);font-weight:900;line-height:.9;letter-spacing:-.04em;margin-bottom:32px}
.hero-h em{font-style:italic;color:var(--orange)}
.hero-p{font-size:16px;color:rgba(255,255,255,.6);line-height:1.75;max-width:440px;margin-bottom:48px;font-weight:300}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.hero-soc-wrap {
  position: absolute;
  right: var(--pad);
  bottom: 48px;
  top: auto;
  z-index: 10;
}
.hero-soc{display:flex;align-items:center;gap:18px;opacity:0;animation:fuv .7s .5s forwards;pointer-events:auto}
.hero-soc-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.hero-soc a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--glass-border);border-radius:50%;color:#fff;transition:all .3s var(--ease);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);background:var(--glass-bg);overflow:hidden;position:relative;z-index:1;transform:translateZ(0);-webkit-transform:translateZ(0)}
.hero-soc a:hover{background:#fff;color:var(--dark);border-color:#fff;transform:translateY(-2px)}
.hero-soc a svg{width:16px;height:16px}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-mask{position:absolute;inset:0;background:linear-gradient(to right,var(--dark) 0%,transparent 60%); pointer-events:none}
.hero-scroll{position:absolute;top:160px;right:var(--pad);left:auto;bottom:auto;opacity:0;animation:fuv .7s .5s forwards;z-index:20;display:flex}
@keyframes fuv{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.h-arrow{width:120px;height:120px;stroke:rgba(255,255,255,.2);stroke-width:1.5px;transition:stroke .4s var(--ease);animation:drift 3.5s infinite ease-in-out;cursor:none}
.hero-scroll:hover .h-arrow{stroke:var(--orange)}
@keyframes drift{0%, 100%{transform:translate(0,0)} 50%{transform:translate(-8px,8px)}}
.hero-scroll-txt{position:absolute;bottom:80px;left:var(--pad);display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);opacity:0;animation:fuv .7s .5s forwards;pointer-events:none}
.hero-scroll-line{width:40px;height:1px;background:rgba(255,255,255,.35)}

/* ── PAGE HERO (inner pages) ── */
.page-hero{background:var(--dark);padding:calc(var(--nav-h) + 100px) var(--pad) 100px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(75,114,212,.14),transparent 65%);pointer-events:none}
.page-hero-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.about-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-hero-img{border-radius:24px;width:100%;height:auto;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,0.4)}
.page-hero-lbl{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.3);text-transform:uppercase;margin-bottom:36px;display:flex;align-items:center;gap:14px}
.page-hero-lbl::before{content:'';width:28px;height:1px;background:rgba(255,255,255,.25)}
.page-hero-h{font-family:var(--font-d);font-size:clamp(56px,9.5vw,140px);font-weight:900;color:#fff;line-height:.9;letter-spacing:-.04em}
.page-hero-h em{color:var(--orange);font-style:italic}
@media (max-width:960px){
  .hero-scrub-wrap{height:auto}
  .hero-l{width:100%;padding-left:var(--pad);justify-content:flex-start;padding-top:140px}
  .hero-r{width:90%;right:-20%;opacity:0.75}
  .hero-mask{background:linear-gradient(to right,var(--dark) 10%,transparent 80%)}
  .nav-cta .btn{padding:8px 18px;font-size:12px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-h{font-size:clamp(44px,12vw,72px);margin-bottom:20px}
  .hero-p{font-size:14px;margin-bottom:32px}
  .hero-btns{margin-bottom:40px}
  .hero-soc-wrap{bottom:32px;right:var(--pad);left:auto}
  .hero-scroll{display:none}
}
.page-hero-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:64px}
.page-hero-p{font-size:16px;color:rgba(255,255,255,.45);line-height:1.8;font-weight:300;max-width:420px}

/* ── REEL SECTION ── */
.reel-sec{position:relative;overflow:hidden;background:var(--dark);height:70vh;min-height:460px}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.reel-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;z-index:2}
.reel-title{font-family:var(--font-d);font-size:clamp(36px,7vw,100px);font-weight:900;color:#fff;letter-spacing:-.03em;text-align:center;line-height:1}

/* ── CLIENTS ── */
.clients-sec{background:var(--dark);padding:96px 0 80px;box-shadow:0 0 0 1px var(--dark)}
.clients-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.clients-top{margin-bottom:72px}
.clients-h{font-family:var(--font-d);font-size:clamp(36px,5vw,72px);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:.95;margin:20px 0 16px}
.clients-h em{color:var(--orange);font-style:italic}
.clients-sub{font-size:15px;color:rgba(255,255,255,.35);font-weight:300;max-width:420px}
.clients-logo{height:80px;max-width:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.6;transition:opacity .4s,filter .4s}
.mq-item.lit .clients-logo{opacity:1;filter:brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(var(--logo-hue, 200deg))}
/* ── HERO → REEL SEPARATOR ── */
.hero-reel-sep{background:var(--white);padding:22px var(--pad);display:flex;align-items:center;justify-content:center;gap:32px;overflow:hidden}
.hero-reel-sep span{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.hero-reel-sep::before,.hero-reel-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── ABOUT STRIP ── */
.about-strip{background:var(--off)}
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ab-img-wrap{position:relative}
.ab-img{border-radius:20px;width:100%;aspect-ratio:4/5;object-fit:cover}
.ab-badge{position:absolute;bottom:32px;right:-28px;background:rgba(0,0,0,.55);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);color:#fff;border-radius:16px;padding:20px 28px;min-width:160px}
.ab-badge-num{font-family:var(--font-d);font-size:36px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.ab-badge-lbl{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px}
.ab-h{font-size:clamp(32px,4vw,52px);margin-bottom:24px}
.ab-p{font-size:15px;color:var(--grey);line-height:1.8;margin-bottom:36px;font-weight:300}
.ab-vals{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.ab-val{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500}
.ab-val::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);flex-shrink:0}

/* ── CTA SECTION ── */
.cta-sec{background:var(--white);padding:120px var(--pad)}
.cta-card{background:var(--dark);border-radius:24px;padding:96px 80px;display:flex;align-items:center;justify-content:space-between;gap:60px;max-width:var(--max);margin:0 auto;position:relative;overflow:hidden}
.cta-card::before{content:'';position:absolute;top:-150px;right:-150px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(75,114,212,.15),transparent 65%);pointer-events:none}
.cta-card::after{content:'';position:absolute;bottom:-100px;left:-100px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(232,75,42,.1),transparent 65%);pointer-events:none}
.cta-h{font-family:var(--font-d);font-size:clamp(32px,4.5vw,60px);font-weight:900;color:#fff;line-height:1;letter-spacing:-.025em;max-width:500px}
.cta-h em{color:var(--orange);font-style:italic}
.cta-actions{display:flex;flex-direction:column;gap:14px;flex-shrink:0;position:relative;z-index:1}
.cta-note{font-size:12px;color:rgba(255,255,255,.3);text-align:center}

/* ── SERVICES SECTION ── */
.services-sec{background:var(--white)}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border-radius:20px;overflow:hidden;margin-top:56px}
.srv-item{background:var(--white);padding:48px 36px;transition:background .3s,transform .3s}
.srv-item:hover{background:var(--dark)}
.srv-num{font-family:var(--font-d);font-size:52px;font-weight:900;line-height:1;margin-bottom:20px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.srv-title{font-family:var(--font-d);font-size:20px;font-weight:700;margin-bottom:12px;transition:color .3s}
.srv-desc{font-size:13px;color:var(--grey);line-height:1.7;transition:color .3s}
.srv-item:hover .srv-title{color:#fff}
.srv-item:hover .srv-desc{color:rgba(255,255,255,.45)}

/* ── FILTER BAR ── */
.filter-bar{padding:52px var(--pad) 44px;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border);max-width:var(--max);margin:0 auto}
.fb{padding:9px 22px;border-radius:100px;font-size:13px;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--grey);cursor:none;transition:all .25s;letter-spacing:.02em}
.fb.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.fb:hover:not(.on){border-color:var(--dark);color:var(--dark)}

/* ── WORKS GRID (works page) ── */
.works-main{padding:0 var(--pad) 80px}
.wg-top{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:56px}
.wg-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px}
.wg-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}

/* ── VIDEO WORKS ── */
.vworks{padding:100px var(--pad);background:var(--dark)}
.vw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.vw-card{border-radius:16px;overflow:hidden;position:relative;cursor:none;background:#111}
.vw-card video{width:100%;height:320px;object-fit:cover;display:block;opacity:.75;transition:opacity .3s,transform .6s var(--ease)}
.vw-card:hover video{opacity:1;transform:scale(1.03)}
.vw-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;opacity:0;transition:opacity .35s}
.vw-card:hover .vw-ov{opacity:1}
.vw-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px}
.vw-t{font-family:var(--font-d);font-size:20px;font-weight:700;color:#fff}
.vw-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:all .3s;opacity:0}
.vw-card:hover .vw-play{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
.vw-play svg{width:18px;height:18px;fill:#fff;margin-left:3px}

/* ── PROCESS ── */
.proc-sec{padding:120px var(--pad);background:var(--off);color:var(--dark)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border-radius:20px;overflow:hidden;margin-top:64px}
.proc-step{background:var(--white);padding:52px 36px;transition:background .3s}
.proc-step:hover{background:var(--dark)}
.proc-n{font-family:var(--font-d);font-size:52px;font-weight:900;line-height:1;margin-bottom:24px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity .3s}
.proc-step:hover .proc-n{background:none;-webkit-text-fill-color:#fff;opacity:.2}
.proc-t{font-family:var(--font-d);font-size:20px;font-weight:700;margin-bottom:12px;transition:color .3s}
.proc-d{font-size:14px;color:var(--grey);line-height:1.7;transition:color .3s}
.proc-step:hover .proc-n,.proc-step:hover .proc-t,.proc-step:hover .proc-d{color:#fff}

/* ── CASE STUDY ── */
.cs-hero{background:var(--dark);padding:calc(var(--nav-h) + 80px) var(--pad) 80px;position:relative;overflow:hidden}
.cs-hero-inner{max-width:var(--max);margin:0 auto}
.cs-meta{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:24px}
.cs-meta-item{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.cs-meta-item span{color:rgba(255,255,255,.75);display:block;font-size:14px;letter-spacing:0;text-transform:none;margin-top:4px}
.cs-h{font-family:var(--font-d);font-size:clamp(48px,8vw,120px);font-weight:900;color:#fff;line-height:.9;letter-spacing:-.04em}
/* Case Study Hero Carousel */
.cs-carousel-wrap{height:65vh;min-height:380px;position:relative;overflow:hidden;}
.cs-carousel{display:flex;height:100%;overflow-x:auto;scroll-snap-type:inline mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;}
.cs-carousel::-webkit-scrollbar{display:none;}
.cs-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative}
.cs-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-car-nav{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:11;}
.cs-car-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4);border:none;cursor:pointer;transition:all 0.3s var(--ease);padding:0;}
.cs-car-dot.active{background:#fff;transform:scale(1.2);}
.cs-car-btn{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,0.3);color:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.2);cursor:pointer;z-index:11;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all 0.3s var(--ease);padding:0;outline:none;}
.cs-car-btn:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-50%) scale(1.05);}
.cs-car-prev{left:32px;}
.cs-car-next{right:32px;}
@media(max-width:960px){
  .cs-car-btn{display:none;}
  .cs-carousel-wrap{height:50vh;}
}
.cs-body{max-width:var(--max);margin:0 auto;padding:96px var(--pad)}
.cs-cols{display:grid;grid-template-columns:1fr 2fr;gap:80px;margin-bottom:80px}
.cs-aside-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.cs-aside-val{font-size:15px;font-weight:500;margin-bottom:32px}
.cs-content p{font-size:16px;color:var(--grey);line-height:1.85;margin-bottom:24px;font-weight:300}
.cs-content h3{font-size:24px;margin-bottom:16px;margin-top:48px}
.cs-full-img{width:100%;display:block;border-radius:20px;margin:0 auto}

/* Case Study Video Wrap */
.cs-video-wrap{position:relative;cursor:pointer;overflow:hidden;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,0.1);margin:64px 0;aspect-ratio:16/9;display:flex}
.cs-video-wrap .cs-full-img{margin:0;width:100%;height:100%;object-fit:cover}
.cs-video-wrap:hover .cs-full-img{transform:scale(1.03);filter:brightness(0.55)!important}
.cs-video-wrap:hover .cs-play-btn{transform:scale(1.08);box-shadow:0 15px 50px rgba(232,75,42,0.6)}
.cs-play-btn{width:80px;height:80px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(232,75,42,0.4);backdrop-filter:blur(10px);transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease)}

/* Case Study Modal */
.cs-modal-container{position:relative;width:94%;max-width:1400px;aspect-ratio:16/9;z-index:1;background:#000;border-radius:24px;overflow:hidden;box-shadow:0 60px 120px rgba(0,0,0,0.6);opacity:0;transform:scale(0.94) translateY(40px);transition:all 0.85s cubic-bezier(0.16, 1, 0.3, 1)}
.video-modal.show .cs-modal-container{opacity:1;transform:scale(1) translateY(0)}
.cs-modal-container iframe{width:100%;height:100%;object-fit:cover;display:block;outline:none;border:none}

/* ── CONTACT PAGE ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start;margin-top:80px;max-width:var(--max);margin-left:auto;margin-right:auto;padding:80px var(--pad)}
.cd-h{font-family:var(--font-d);font-size:clamp(22px,2.5vw,34px);font-weight:700;color:#fff;margin-bottom:18px;letter-spacing:-.02em}
.cd-p{font-size:15px;color:rgba(255,255,255,.42);line-height:1.8;font-weight:300;margin-bottom:44px}
.cd-items{display:flex;flex-direction:column;gap:24px;margin-bottom:44px}
.cd-item{display:flex;align-items:flex-start;gap:18px}
.cd-icon{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-icon svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.5}
.cd-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:4px;font-weight:500}
.cd-val{font-size:15px;color:rgba(255,255,255,.72);line-height:1.5}
.cd-val a{color:rgba(255,255,255,.72);transition:color .25s}
.cd-val a:hover{color:#fff}
.soc-row{display:flex;gap:10px;flex-wrap:wrap}
.soc-a{padding:9px 20px;border-radius:100px;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);transition:all .25s;letter-spacing:.02em}
.soc-a:hover{border-color:var(--orange);color:var(--orange)}
.form-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:52px}
.form-title{font-family:var(--font-d);font-size:24px;font-weight:700;color:#fff;margin-bottom:36px;letter-spacing:-.02em}
.fg{margin-bottom:20px}
.flbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);display:block;margin-bottom:10px;font-weight:500}
.fi,.fsel,.fta{width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.09);border-radius:12px;padding:14px 18px;font-size:14px;color:#fff;outline:none;transition:border-color .25s,background .25s}
.fi::placeholder,.fta::placeholder{color:rgba(255,255,255,.2)}
.fi:focus,.fsel:focus,.fta:focus{border-color:rgba(75,114,212,.5);background:rgba(255,255,255,.08)}
.fsel{appearance:none;cursor:none;color:rgba(255,255,255,.6)}
.fsel option{background:#1a1a1a;color:#fff}
.fta{resize:vertical;min-height:130px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fsub{width:100%;padding:16px;border-radius:100px;background:var(--grad);color:#fff;font-size:14px;font-weight:600;border:none;cursor:none;letter-spacing:.03em;transition:all .3s var(--ease);margin-top:8px}
.fsub:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(232,75,42,.3)}
.fsub.ok{background:linear-gradient(110deg,#16a34a,#15803d)}
.fnote{font-size:12px;color:rgba(255,255,255,.25);text-align:center;margin-top:14px;line-height:1.6}

/* ── FAQ ── */
.faq-s{background:rgba(255,255,255,.02);padding:100px var(--pad);border-top:1px solid rgba(255,255,255,.06)}
.faq-inner{max-width:820px;margin:0 auto}
.faq-h{font-family:var(--font-d);font-size:clamp(36px,6vw,80px);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:.9;margin-bottom:60px;margin-top:18px}
.faq-item{border-bottom:1px solid rgba(255,255,255,.07);padding:28px 0;cursor:none}
.faq-q{font-size:16px;font-weight:500;color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:space-between;gap:20px;user-select:none}
.faq-ico{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.faq-ico svg{width:12px;height:12px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:2;transition:transform .35s var(--ease)}
.faq-item.open .faq-ico{background:var(--orange);border-color:var(--orange)}
.faq-item.open .faq-ico svg{transform:rotate(45deg);stroke:#fff}
.faq-a{font-size:15px;color:rgba(255,255,255,.35);line-height:1.85;font-weight:300;max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding .4s,opacity .5s;opacity:0}
.faq-item.open .faq-a{max-height:300px;padding-top:18px;opacity:1}

/* ── ONBOARDING FAQ GRID ── */
section.faq-sec{padding:120px var(--pad) !important;background:var(--dark);position:relative;z-index:2}
.faq-container{max-width:var(--max);margin:0 auto;position:relative}
.faq-grid{margin-top:64px;display:flex;flex-direction:column;gap:48px}
.faq-grid .faq-item{padding:0;border:none;opacity:1 !important;transform:none !important}
.faq-grid .faq-q{font-family:var(--font-d);font-size:clamp(22px,3vw,32px);font-weight:700;color:#fff;margin-bottom:16px}
.faq-grid .faq-a{font-size:16px;color:rgba(255,255,255,.42);line-height:1.8;padding:0;max-height:none;opacity:1}
@media(max-width:700px){ section.faq-sec{padding:80px var(--pad) !important} .faq-grid{gap:32px} }
@media(max-width:700px){ .faq-grid{gap:32px} }

/* ── GLASSMORPHISM CARD ── */
.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}

/* ── VIDEO MODAL ── */
.video-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.6s cubic-bezier(0.2, 1, 0.2, 1)}
.video-modal.show{opacity:1;pointer-events:auto}
.video-modal-bg{position:absolute;inset:0;background:rgba(8,8,8,0.92);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transition:0.6s opacity;}
.video-modal-close{position:absolute;top:32px;right:40px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.08);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.15);z-index:2;cursor:none;transition:all 0.4s var(--ease);font-weight:300;}
.video-modal-close:hover{background:var(--orange);border-color:var(--orange);transform:rotate(90deg) scale(1.1);}
.video-modal-container{position:relative;width:min(1600px, 94vw);aspect-ratio:16/9;z-index:1;background:#000;border-radius:20px;overflow:hidden;box-shadow:0 80px 160px rgba(0,0,0,0.8);opacity:0;transform:scale(0.92) translateY(60px);transition:all 0.9s cubic-bezier(0.2, 1, 0.2, 1);border:1px solid rgba(255,255,255,0.1);}
.video-modal.show .video-modal-container{opacity:1;transform:scale(1) translateY(0)}
.video-modal-container iframe, .video-modal-container video{width:100%;height:100%;object-fit:cover;display:block;outline:none;border:none}

/* ── WATCH FILM LOGO BUTTON ── */
.watch-logo-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 28px 10px 10px;
  border-radius: 100px;
  cursor: none;
  transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 32px;
}
.watch-logo-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--orange);
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(232,75,42,0.1);
}
.watch-logo-ico {
  width: 52px;
  height: 52px;
  background: var(--grad);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(232,75,42,0.3);
  transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.watch-logo-btn:hover .watch-logo-ico {
  transform: rotate(15deg) scale(1.1);
}
.watch-logo-txt {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  text-transform: uppercase;
  user-select: none;
}

/* ── UTILS ── */
.grad-bar{height:3px;background:var(--grad);border-radius:2px}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  :root{--pad:40px}
  .srv-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:960px){
  :root{--pad:24px;--section-gap:80px}
  /* Smaller buttons on mobile */
  .btn, .btn-ghost, .btn-ghost-light, .btn-grad {padding:10px 24px !important;font-size:13px !important}
  .fta{min-height:80px}
  #mm .mm-links a{font-size:26px}
  #nav{padding:16px var(--pad);backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:var(--dark) !important;border-bottom:1px solid rgba(255,255,255,.03)}
  .nav-dark{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:var(--dark) !important}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .hero-scrub-wrap{height:auto}
  .hero{min-height:auto}
  .hero-l{width:100%;padding:140px var(--pad) 80px;justify-content:flex-start;min-height:100vh;min-height:100dvh}
  .hero-r{width:90%;right:-20%;opacity:0.75;display:block;height:100%;top:0; overflow:hidden;}
  .hero-mask{background:linear-gradient(to right,var(--dark) 10%,transparent 80%);display:block}
  .hero-scroll{display:none}
  .hero-scroll-txt{display:none}
  .hero-l-col{display:flex;flex-direction:column;justify-content:center;flex:1;height:100%}
  .hero-lbl{margin-bottom:auto !important;padding-top:20px}
  .hero-h{font-size:clamp(44px,12vw,72px);margin-bottom:20px}
  .hero-p{font-size:14px;margin-bottom:32px}
  .hero-btns{margin-bottom:40px}
  .hero-soc-wrap{bottom:32px;right:var(--pad);left:auto}
  .hero-soc{justify-content:flex-end}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-item:nth-child(2){border-right:none}
  .about-strip .ab-grid{grid-template-columns:1fr;gap:48px}
  .ab-img{aspect-ratio:16/9;min-height:280px}
  .ab-badge{right:0;bottom:-20px}
  .cta-card{flex-direction:column;padding:60px 32px;gap:32px}
  .proc-grid,.wg-3{grid-template-columns:1fr 1fr}
  .wg-top,.wg-2,.vw-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px;padding:60px var(--pad)}
  .frow{grid-template-columns:1fr}
  .cs-cols{grid-template-columns:1fr;gap:40px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .about-hero-grid{grid-template-columns:1fr;gap:40px}
  .about-hero-img{max-height:340px;object-fit:cover;aspect-ratio:16/9;width:100%}
}
@media(max-width:600px){
  .srv-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .form-wrap{padding:32px 24px}
  .hero-r{width:120%;right:-40%}
}