@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/sora.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format('woff2')}
:root{--bg: #FFFFFF; --surface: #F7F8FA; --surface-2: #F0F1F5; --ink: #0D0D12; --muted: #5B6372; --border: rgba(13,13,18,0.08); --violet: #1E2235; --violet-deep: #111420; --violet-soft: #E9EAEF; --coral: #FF5C39; --coral-soft: #FFF0ED; --gold: #D99A33; --gold-soft: #FFF8EB; --green: #059669; --green-soft: #ECFDF5; --cream: #FFFFFF; --df: 'Sora', sans-serif; --di: 'Inter', sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);}
*, *::before, *::after{box-sizing: border-box; margin: 0; padding: 0;}
html{scroll-behavior: smooth;}
body{font-family: var(--di); background: var(--bg); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
::selection{background: var(--violet); color: var(--cream);}
a{text-decoration: none;}
img{max-width: 100%; display: block;}
a:focus-visible, button:focus-visible{outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px;}
.livecom-sec a:focus-visible, .cta-sec a:focus-visible, .about-left a:focus-visible{outline-color: var(--cream);}
#loader{position: fixed; inset: 0; z-index: 9999; background: var(--violet-deep); display: flex; align-items: center; justify-content: center; transition: opacity .5s ease, visibility .5s ease;}
#loader .scene{display: flex; align-items: center; justify-content: center; width: 100%; padding: 3rem 0; background: transparent;}
#loader .logo-wrap{position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: float-idle 4s ease-in-out 1.8s infinite;}
#loader .letters-row{display: flex; align-items: flex-end; gap: 6px;}
#loader .letter-i{display: flex; flex-direction: column; align-items: center; gap: 5px;}
#loader .dot{width: 20px; height: 20px; border-radius: 50%; background: #ffffff; opacity: 0; transform: translateY(-40px) scale(0); animation: dot-drop 0.35s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards;}
@keyframes dot-drop{to { opacity: 1; transform: translateY(0) scale(1); }}
#loader .i-body{position: relative; width: 22px; height: 62px; opacity: 0; transform: scaleY(0); transform-origin: bottom center; animation: i-grow 0.4s cubic-bezier(0.34,1.4,0.64,1) 0.4s forwards;}
@keyframes i-grow{to { opacity: 1; transform: scaleY(1); }}
#loader .i-green{position: absolute; left: 0; top: 0; width: 14px; height: 62px; background: linear-gradient(175deg, #25a85a 0%, #1d8848 40%, #0f6830 100%); border-radius: 3px 0 0 8px; clip-path: polygon(0 0, 80% 0, 100% 30%, 80% 100%, 0 100%);}
#loader .i-blue{position: absolute; right: 0; top: 8px; width: 10px; height: 40px; background: linear-gradient(180deg, #7ecfef 0%, #4ab8e8 60%, #2590c8 100%); border-radius: 0 2px 6px 0; clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); opacity: 0.9;}
#loader .letter-T{position: relative; width: 80px; height: 80px;}
#loader .T-bar{position: absolute; top: 0; left: 0; width: 80px; height: 36px; opacity: 0; transform: scaleX(0); transform-origin: center center; animation: T-bar-grow 0.4s cubic-bezier(0.34,1.4,0.64,1) 0.75s forwards; border-radius: 6px 10px 0 0; overflow: hidden;}
@keyframes T-bar-grow{to { opacity: 1; transform: scaleX(1); }}
#loader .T-bar-left{position: absolute; left: 0; top: 0; width: 55%; height: 100%; background: linear-gradient(135deg, #d93a0a 0%, #e85520 40%, #f07030 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);}
#loader .T-bar-bump{position: absolute; left: 28%; top: -2px; width: 30%; height: 60%; background: radial-gradient(ellipse at 50% 100%, #f5a020 0%, #ef8010 100%); border-radius: 50% 50% 0 0;}
#loader .T-bar-right{position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: linear-gradient(135deg, #cc2860 0%, #b03090 60%, #9038c0 100%); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);}
#loader .T-stem{position: absolute; top: 18px; left: 50%; transform: translateX(-50%) scaleY(0); transform-origin: top center; width: 26px; height: 62px; opacity: 0; animation: T-stem-grow 0.4s cubic-bezier(0.34,1.3,0.64,1) 1.05s forwards; border-radius: 0 0 4px 4px; overflow: hidden;}
@keyframes T-stem-grow{to { opacity: 1; transform: translateX(-50%) scaleY(1); }}
#loader .T-stem-left{position: absolute; left: 0; top: 0; width: 55%; height: 100%; background: linear-gradient(180deg, #c030a0 0%, #9030b8 60%, #7030d0 100%);}
#loader .T-stem-right{position: absolute; right: 0; top: 0; width: 55%; height: 100%; background: linear-gradient(180deg, #8040d0 0%, #6030c0 60%, #5020b0 100%); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);}
#loader .T-stem-purple{position: absolute; right: -2px; top: 10%; width: 8px; height: 70%; background: #c060e8; border-radius: 0 3px 3px 0; opacity: 0.6;}
#loader .brand-text{text-align: center; opacity: 0; transform: translateY(14px); animation: text-rise 0.4s ease 1.2s forwards;}
@keyframes text-rise{to { opacity: 1; transform: translateY(0); }}
#loader .brand-name{font-family: 'Segoe UI', Arial, sans-serif; font-size: 17px; font-weight: 600; color: #ffffff; letter-spacing: 1.2px;}
#loader .brand-sub{font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.72); letter-spacing: 3.5px; text-transform: uppercase;}
@keyframes float-idle{0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); }}
#loader .spark{position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;}
#loader .spark-dot{animation: spark-fly 0.5s ease-out 0.4s forwards;}
#loader .spark-i{animation: spark-fly 0.5s ease-out 0.7s forwards;}
#loader .spark-bar{animation: spark-fly 0.5s ease-out 1.0s forwards;}
#loader .spark-stem{animation: spark-fly 0.5s ease-out 1.3s forwards;}
@keyframes spark-fly{0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }}
nav{position: fixed; top: 0; left: 0; right: 0; z-index: 560; height: 64px; padding: 0 clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; opacity: 0; transform: translateY(-12px); transition: opacity .6s var(--ease), transform .6s var(--ease), background .4s, border-color .4s, backdrop-filter .4s;}
nav.visible{opacity: 1; transform: none;}
nav.solid, nav.menu-open{background: rgba(255,255,255,.96); backdrop-filter: blur(20px); border-color: var(--border);}
.logo{font-family: var(--df); font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); display: flex; align-items: center; gap: 10px;}
.logo-mark{width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ink);}
.logo-mark img{width: 100%; height: 100%; object-fit: cover; display: block;}
.nav-links{display: flex; gap: 32px; list-style: none;}
.nav-links a{font-size: .86rem; font-weight: 500; color: var(--muted); transition: color .2s;}
.nav-links a:hover{color: var(--ink);}
.nav-right{display: flex; align-items: center; gap: 10px;}
.nav-login{display: inline-flex; align-items: center; gap: 8px; font-family: var(--df); font-weight: 600; font-size: .85rem; line-height: 1; color: var(--ink); padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(13,13,18,.18); background: transparent; transition: background .2s, border-color .2s, color .2s;}
.nav-login svg{font-size: 1.05rem;}
.nav-login:hover{background: var(--surface-2); border-color: rgba(13,13,18,.32);}
.nav-cta{display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; line-height: 1; padding: 11px 20px; border-radius: 999px; font-size: .85rem; font-weight: 700; font-family: var(--df); border: 1px solid transparent; transition: background .2s, color .2s, transform .15s var(--ease-spring);}
.nav-cta:hover{background: var(--violet);}
.nav-cta:active{transform: scale(.97);}
nav:not(.solid):not(.menu-open) .logo{color: #fff;}
nav:not(.solid):not(.menu-open) .logo-suffix{color: rgba(255,255,255,.65);}
nav:not(.solid):not(.menu-open) .nav-links a{color: rgba(255,255,255,.78);}
nav:not(.solid):not(.menu-open) .nav-links a:hover{color: #fff;}
nav:not(.solid):not(.menu-open) .nav-login{color: #fff; border-color: rgba(255,255,255,.4);}
nav:not(.solid):not(.menu-open) .nav-login:hover{background: rgba(255,255,255,.12); border-color: #fff;}
nav:not(.solid):not(.menu-open) .nav-cta{background: #fff; color: var(--ink);}
nav:not(.solid):not(.menu-open) .nav-cta:hover{background: #E9EAEF;}
nav:not(.solid):not(.menu-open) a:focus-visible, nav:not(.solid):not(.menu-open) button:focus-visible{outline-color: #fff;}
.hbg{display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; padding: 0; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 12px; transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent;}
.hbg span{width: 20px; height: 2px; background: #fff; border-radius: 2px; display: block; transition: transform .3s var(--ease), opacity .2s, background .2s;}
.hbg:hover{background: rgba(255,255,255,.12);}
nav.solid .hbg, nav.menu-open .hbg{border-color: rgba(13,13,18,.18);}
nav.solid .hbg:hover, nav.menu-open .hbg:hover{background: var(--surface-2);}
nav.solid .hbg span, nav.menu-open .hbg span{background: var(--ink);}
.hbg.open span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.hbg.open span:nth-child(2){opacity: 0;}
.hbg.open span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.mm-overlay{display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(13,13,18,.5); z-index: 520;}
.mm-overlay.open{display: block;}
.mm{display: none; position: fixed; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; background: #fff; border-bottom: 1px solid var(--border); padding: 6px 20px 24px; z-index: 550; flex-direction: column;}
.mm.open{display: flex;}
.mm-link{font-family: var(--df); font-size: 1rem; font-weight: 600; color: var(--ink); padding: 16px 0; border-bottom: 1px solid var(--border); transition: color .15s;}
.mm-link:hover{color: var(--muted);}
.mm-actions{display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.mm-btn{display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-radius: 12px; line-height: 1; font-family: var(--df); font-size: .95rem; font-weight: 700;}
.mm-btn svg{font-size: 1.1rem;}
.mm-btn-outline{color: var(--ink); border: 1px solid rgba(13,13,18,.2);}
.mm-btn-outline:hover{background: var(--surface);}
.mm-btn-solid{background: var(--ink); color: #fff; border: 1px solid var(--ink);}
.mm-btn-solid:hover{background: var(--violet);}
#hero{min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0; position: relative; overflow: hidden; background: linear-gradient(145deg, #0D0D12 0%, #1a0d3d 50%, #0d0d12 100%);}
.hero-glow-2{position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,92,57,0.18) 0%, transparent 65%); border-radius: 50%; bottom: -160px; left: 30%; z-index: 0; animation: drift2 16s ease-in-out infinite alternate;}
@keyframes drift1{from { transform: translate(0,0) scale(1); } to { transform: translate(50px, 35px) scale(1.12); }}
@keyframes drift2{from { transform: translate(0,0) scale(1); } to { transform: translate(-40px, -25px) scale(1.08); }}
.hero-left{padding: 120px clamp(28px,5vw,72px) 80px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2;}
.hero-h1{font-family: var(--df); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -.045em; line-height: 1.04; margin-bottom: 24px; color: #fff;}
.hero-h1 .line{display: block; overflow: hidden;}
.hero-h1 .line-inner{display: block; transform: translateY(105%); transition: transform .9s var(--ease);}
.hero-h1 .line-inner.vis{transform: none;}
.hero-h1 .line:nth-child(2) .line-inner{transition-delay: .1s;}
.hero-h1 .line:nth-child(3) .line-inner{transition-delay: .2s;}
.hero-sub{font-size: clamp(.88rem, 1.5vw, 1rem); color: rgba(255,255,255,.78); line-height: 1.78; max-width: 440px; margin-bottom: 36px; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease) .38s, transform .8s var(--ease) .38s;}
.hero-sub.vis{opacity: 1; transform: none;}
.hero-sub strong{color: #fff; font-weight: 600;}
.hero-cta-row{display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease) .52s, transform .8s var(--ease) .52s;}
.hero-cta-row.vis{opacity: 1; transform: none;}
.btn-primary{display: inline-flex; align-items: center; gap: 8px; background: var(--violet); color: #fff; padding: 14px 28px; border-radius: 50px; font-family: var(--df); font-weight: 700; font-size: .9rem; letter-spacing: -.01em; transition: transform .2s var(--ease-spring), box-shadow .25s, background .25s;}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 16px 36px rgba(30,34,53,.28);}
.btn-primary:active{transform: scale(0.96);}
#hero .btn-primary{background: #fff; color: var(--ink);}
#hero .btn-primary:hover{background: #E9EAEF; box-shadow: none;}
.btn-ghost{display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; padding: 14px 24px; border-radius: 50px; font-size: .88rem; font-weight: 500; transition: all .25s;}
.btn-ghost:hover{border-color: var(--violet); color: #fff; background: rgba(30,34,53,.15);}
.hero-trust{display: flex; align-items: center; gap: 10px; margin-top: 28px; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) .68s, transform .8s var(--ease) .68s;}
.hero-trust.vis{opacity: 1; transform: none;}
.hero-trust-text{font-size: .82rem; color: rgba(255,255,255,.78); line-height: 1.4;}
.hero-trust-text strong{color: #fff; font-weight: 700;}
.hero-right{position: relative; z-index: 2; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px 48px 80px 24px; overflow: hidden;}
.hero-visual{width: 100%; height: 100%; background: transparent; border-radius: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; box-shadow: none; opacity: 0; transform: translateX(40px); transition: opacity .9s var(--ease) .2s, transform .9s var(--ease) .2s;}
.hero-visual.vis{opacity: 1; transform: none;}
.htc-wrap{display: flex; flex-direction: column; align-items: center; gap: 18px;}
.htc-frame{width: 250px; height: 480px; background: #0a0a0e; border-radius: 38px; padding: 10px; border: 2px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset; position: relative;}
.htc-notch{position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #000; border-radius: 999px; z-index: 20; box-shadow: 0 0 0 1px rgba(255,255,255,.06);}
.htc-screen{width: 100%; height: 100%; border-radius: 28px; overflow: hidden; position: relative; background: #181A24; display: flex; align-items: center; justify-content: center; padding: 26px 22px;}
.htc-card{position: absolute; inset: 26px 22px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none;}
.htc-card.active{opacity: 1; transform: none; pointer-events: auto;}
.htc-lock{position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; overflow: hidden; background: #14161F; transition: transform .75s cubic-bezier(.6,0,.15,1), opacity .6s ease .05s, filter .75s cubic-bezier(.6,0,.15,1);}
.htc-lock-time{font-family: var(--df); font-weight: 800; font-size: 3rem; color: #fff; opacity: 0; transform: translateY(8px); animation: htcFadeIn .5s ease .15s forwards; position: relative; z-index: 2;}
.htc-lock-date{font-size: .86rem; color: rgba(255,255,255,.65); margin-top: 6px; opacity: 0; transform: translateY(8px); animation: htcFadeIn .5s ease .3s forwards; position: relative; z-index: 2;}
.htc-lock-logo{margin-top: 38px; font-family: var(--df); font-weight: 800; font-size: .82rem; letter-spacing: .12em; color: rgba(255,255,255,.85); padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); opacity: 0; transform: translateY(8px); animation: htcFadeIn .5s ease .5s forwards; position: relative; z-index: 2;}
.htc-lock-swipe{position: absolute; bottom: 26px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; z-index: 2; animation: htcFadeIn .5s ease .9s forwards, htcBounce 1.4s ease 1.4s infinite;}
.htc-lock-swipe svg{font-size: 1rem; color: rgba(255,255,255,.6);}
.htc-lock-swipe span{font-size: .62rem; color: rgba(255,255,255,.45);}
@keyframes htcFadeIn{to { opacity: 1; transform: none; }}
@keyframes htcBounce{0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); }}
.htc-lock.unlocking{transform: translateY(-100%) scale(.96); opacity: 0; filter: blur(6px);}
.htc-lock-sweep{position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-120%); opacity: 0;}
.htc-lock.unlocking .htc-lock-sweep{animation: htcSweep .6s ease forwards;}
@keyframes htcSweep{0% { transform: translateX(-120%); opacity: .9; } 100% { transform: translateX(120%); opacity: 0; }}
.htc-quote-ico{width: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px;}
.htc-quote-ico svg{font-size: 1.5rem; color: rgba(255,255,255,.28);}
.htc-text{font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.9); margin-bottom: 16px;}
.htc-stars{display: flex; gap: 3px; margin-bottom: 18px;}
.htc-stars svg{font-size: .72rem; color: #f5a020;}
.htc-author{display: flex; align-items: center; gap: 11px;}
.htc-avatar{width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--violet); display: flex; align-items: center; justify-content: center; font-family: var(--df); font-weight: 800; font-size: .7rem; color: #fff;}
.htc-name{font-size: .76rem; font-weight: 700; color: #fff;}
.htc-role{font-size: .64rem; color: rgba(255,255,255,.5); margin-top: 2px;}
.htc-dots{display: flex; gap: 6px;}
.htc-dot{width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); border: none; padding: 0; cursor: pointer; transition: background .3s, width .3s;}
.htc-dot.active{background: #fff; width: 18px; border-radius: 4px;}
@media (max-width: 900px){#hero{grid-template-columns: 1fr; min-height: auto;}
.hero-right{height: auto; min-height: 0; padding: 20px 20px 48px;}
.hero-visual{border-radius: 20px;}
.hero-left{padding: 90px 20px 28px; text-align: left;}}
@media (max-width: 600px){.hero-h1{font-size: clamp(1.75rem,8vw,2.6rem);}
.htc-frame{width: 210px; height: 410px;}
.htc-notch{width: 70px; height: 16px;}
.htc-card{inset: 22px 18px;}
.htc-text{font-size: .78rem;}}
.marquee-wrap{overflow: hidden; padding: 22px 0; background: var(--surface);}
.marquee-track{display: flex; gap: 0; white-space: nowrap; animation: marquee 30s linear infinite;}
.marquee-track:hover{animation-play-state: paused;}
.marquee-item{display: inline-flex; align-items: center; padding: 0 40px; font-family: var(--df); font-size: clamp(.85rem, 1.6vw, 1.05rem); font-weight: 600; letter-spacing: -.01em; color: var(--muted); flex-shrink: 0; transition: color .25s;}
.marquee-item:hover{color: var(--ink);}
@keyframes marquee{from { transform: translateX(0); } to { transform: translateX(-50%); }}
.section{padding: clamp(48px,7vw,130px) clamp(20px,5vw,60px);}
.section-h2{font-family: var(--df); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3.2rem); letter-spacing: -.04em; line-height: 1.08; color: var(--ink);}
.rv{opacity: 0; transform: translateY(32px); transition: all .8s var(--ease);}
.rv.vis{opacity: 1; transform: none;}
.rv-l{opacity: 0; transform: translateX(-28px); transition: all .8s var(--ease);}
.rv-l.vis{opacity: 1; transform: none;}
.rv-r{opacity: 0; transform: translateX(28px); transition: all .8s var(--ease);}
.rv-r.vis{opacity: 1; transform: none;}
.about-sec{display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 60vh;}
.about-left{background: var(--violet); color: var(--cream); padding: clamp(48px,7vw,96px) clamp(32px,5vw,72px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;}
.about-left .section-h2{color: var(--cream); margin-bottom: 24px; position: relative; z-index: 1;}
.about-left .section-h2 em{font-style: normal; color: rgba(255,255,255,.72); font-weight: 800;}
.about-left p{font-size: .94rem; color: rgba(255,255,255,.85); line-height: 1.78; max-width: 400px; position: relative; z-index: 1;}
.about-left p strong{color: var(--cream); font-weight: 700;}
.collabs-sec{background: var(--bg);}
.collabs-inner{max-width: 1200px; margin: 0 auto;}
.collabs-head{display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 20px;}
.collabs-head p{font-size: .88rem; color: var(--muted); line-height: 1.7; max-width: 320px; text-align: right;}
.collab-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.collab-card{position: relative; overflow: hidden; aspect-ratio: 3/4; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);}
.collab-card img{width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s var(--ease);}
.collab-card:hover img{transform: scale(1.06);}
.collab-overlay{position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,18,.85) 0%, rgba(13,13,18,.08) 60%, transparent 100%);}
.collab-info{position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px;}
.collab-name{font-family: var(--df); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--cream);}
.collab-role{font-size: .82rem; color: rgba(255,255,255,.78); margin-top: 4px; line-height: 1.4;}
.cta-sec{position: relative; overflow: hidden; padding: clamp(80px,12vw,160px) clamp(20px,5vw,60px); text-align: center; background: var(--violet-deep); color: var(--cream);}
.cta-inner{position: relative; z-index: 1; max-width: 620px; margin: 0 auto;}
.cta-sec h2{font-family: var(--df); font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-bottom: 20px; color: var(--cream);}
.cta-sec h2 .hi{color: #ffffff;}
.cta-sec p{font-size: .94rem; color: rgba(255,255,255,.85); line-height: 1.72; margin-bottom: 40px;}
.cta-btns{display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
.cta-wa{display: inline-flex; align-items: center; gap: 8px; background: var(--cream); color: var(--violet-deep); padding: 15px 30px; border-radius: 50px; font-family: var(--df); font-weight: 700; font-size: .92rem; transition: all .25s;}
.cta-wa:hover{transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.18);}
.cta-ghost-btn{display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.78); padding: 15px 24px; border-radius: 50px; font-size: .87rem; transition: all .25s;}
.cta-ghost-btn:hover{border-color: rgba(255,255,255,.5); color: var(--cream);}
footer{border-top: 1px solid var(--border); padding: 28px clamp(20px,5vw,60px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--bg);}
.footer-brand{font-family: var(--df); font-size: .9rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink);}
.footer-brand-row{display: flex; align-items: center; gap: 10px;}
.footer-logo{width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;}
.footer-logo img{width: 100%; height: 100%; object-fit: cover; display: block;}
.footer-copy{font-size: .76rem; color: var(--muted);}
.footer-credit{flex: 0 0 100%; text-align: center; font-size: .76rem; color: var(--muted); margin-top: 8px;}
.footer-credit strong{color: var(--ink); font-weight: 700;}
.footer-links{display: flex; gap: 22px;}
.footer-links a{font-size: .76rem; color: var(--muted); transition: color .2s; font-weight: 500;}
.footer-links a:hover{color: var(--violet);}
.wa-float{position: fixed; right: 24px; bottom: 24px; z-index: 450; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 10px 28px rgba(37,211,102,.4); transition: transform .25s var(--ease), box-shadow .25s var(--ease); opacity: 0; transform: translateY(16px) scale(.9);}
.wa-float.vis{opacity: 1; transform: none;}
.wa-float:hover{transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(37,211,102,.5);}
@media (max-width: 600px){.wa-float{width: 50px; height: 50px; right: 16px; bottom: 16px;}
.wa-float svg{width: 24px; height: 24px;}}
@media (max-width: 900px){.about-sec{grid-template-columns: 1fr;}
.collab-grid{grid-template-columns: repeat(2, 1fr); gap: 12px;}
.nav-links, .nav-right{display: none;}
.hbg{display: flex;}
.collabs-head{flex-direction: column; align-items: flex-start;}
.collabs-head p{text-align: left;}}
@media (max-width: 600px){.collab-grid{grid-template-columns: 1fr 1fr; gap: 10px;}
.collab-info{padding: 14px 12px;}
.collab-name{font-size: .95rem;}
.collab-role{font-size: .72rem;}}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;}}
.logo-suffix{color: var(--muted); font-weight: 600; letter-spacing: 0;}
.ecosystem-sec{background: var(--bg);}
.ecosystem-inner{max-width: 1200px; margin: 0 auto;}
.acc-toggle{display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px auto 0; padding: 13px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 50px; font-family: var(--df); font-size: .8rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); cursor: pointer; transition: all .25s; width: max-content;}
.acc-toggle:hover{border-color: rgba(30,34,53,.2); box-shadow: 0 8px 24px rgba(29,26,36,.06); transform: translateY(-1px);}
.acc-toggle .acc-toggle-ico{width: 22px; height: 22px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: transform .35s ease;}
.acc-toggle[aria-expanded="true"] .acc-toggle-ico{transform: rotate(135deg);}
.acc-toggle[aria-expanded="true"]{background: var(--ink); color: var(--cream); border-color: var(--ink);}
.acc-toggle[aria-expanded="true"] .acc-toggle-ico{background: rgba(255,255,255,.18); color: var(--cream);}
.acc-panel{display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;}
.acc-panel[data-open="true"]{grid-template-rows: 1fr; opacity: 1;}
.acc-panel-inner{overflow: hidden; min-height: 0;}
.acc-panel[data-open="true"] .acc-panel-inner{overflow: visible;}
.livecom-sec{background: var(--ink); color: var(--cream);}
.livecom-inner{max-width: 1200px; margin: 0 auto;}
.livecom-head{max-width: 600px; margin-bottom: 36px;}
.livecom-head .section-h2{color: var(--cream);}
.livecom-head p{margin-top: 14px; font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.72;}
.livecom-cta{margin-top: 48px; text-align: center;}
.livecom-cta a{display: inline-flex; align-items: center; gap: 10px; background: var(--cream); color: var(--violet-deep); padding: 16px 36px; border-radius: 50px; font-family: var(--df); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; transition: all .25s;}
.livecom-cta a:hover{transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.25);}
.org-sec{background: var(--bg);}
.org-inner{max-width: 900px; margin: 0 auto;}
.org-head{text-align: center; margin-bottom: 36px;}
.org-head p{margin-top: 14px; font-size: .9rem; color: var(--muted); line-height: 1.72;}
.org-tree{display: flex; flex-direction: column; align-items: center; gap: 0;}
.org-row{display: flex; gap: 16px; justify-content: center; align-items: flex-start; position: relative;}
.org-row + .org-row{margin-top: 0;}
.org-connector-v{width: 2px; height: 36px; background: var(--border); margin: 0 auto;}
.org-card{background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; text-align: center; transition: all .25s; min-width: 160px; position: relative;}
.org-card:hover{border-color: rgba(13,13,18,.22);}
.org-card.owner{border-color: var(--violet); background: var(--violet); color: var(--cream);}
.org-card.owner .org-role{color: rgba(255,255,255,.78);}
.org-name{font-family: var(--df); font-size: .88rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px; line-height: 1.25;}
.org-card.owner .org-name{color: var(--cream);}
.org-role{font-size: .72rem; color: var(--muted); font-weight: 500; letter-spacing: .02em;}
@media (max-width: 900px){.org-row{flex-wrap: wrap; row-gap: 16px;}}
.section-cta{margin-top: 36px; text-align: center;}
@media (max-width: 600px){.section{padding: 36px 18px;}
.about-left{padding-left: 18px; padding-right: 18px;}}
@media (max-width: 600px){#hero{padding-left: 18px; padding-right: 18px;}
.btn-primary, .btn-ghost, .livecom-cta a, .cta-wa, .cta-ghost-btn{width: 100%; justify-content: center;}}
.rv{opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform;}
.rv.vis{opacity: 1; transform: none;}
.rv-l{opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease), transform .9s var(--ease);}
.rv-l.vis{opacity: 1; transform: none;}
.rv-r{opacity: 0; transform: translateX(40px); transition: opacity .9s var(--ease), transform .9s var(--ease);}
.rv-r.vis{opacity: 1; transform: none;}
.hero-h1 .acc, .hero-h1 .acc2{color: #ffffff; -webkit-text-fill-color: #ffffff; background: none;}
.btn-primary, .nav-cta{transition: transform .15s var(--ease-spring), box-shadow .25s, background .25s;}
.btn-primary:active{transform: scale(0.96);}
.nav-cta:active{transform: scale(0.96);}
.org-photo{width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; border: 3px solid var(--border); flex-shrink: 0;}
.org-photo img{width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;}
.org-card.owner .org-photo{border-color: rgba(255,255,255,.4);}
.org-photo-sm{width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px; border: 2px solid var(--border); flex-shrink: 0;}
.org-photo-sm img{width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;}
@keyframes orgCardIn{0% { opacity: 0; transform: translateY(40px) scale(0.82); filter: blur(4px); } 60% { opacity: 1; filter: blur(0); } 80% { transform: translateY(-6px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }}
@keyframes orgOwnerIn{0% { opacity: 0; transform: scale(0.6) rotate(-4deg); filter: blur(6px); } 50% { opacity: 1; filter: blur(0); transform: scale(1.08) rotate(1deg); } 75% { transform: scale(0.97) rotate(-0.5deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }}
@keyframes orgWireGrow{0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; }}
@keyframes orgBadgePop{0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); }}
#orgPanel .org-card.org-hidden, #orgPanel .org-connector-v.org-hidden{visibility: hidden; opacity: 0;}
#orgPanel .org-card.org-anim-owner{visibility: visible; animation: orgOwnerIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
#orgPanel .org-card.org-anim-card{visibility: visible; animation: orgCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
#orgPanel .org-connector-v.org-anim-wire{visibility: visible; transform-origin: top center; animation: orgWireGrow 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;}
#orgPanel .org-card.org-anim-card .org-role, #orgPanel .org-card.org-anim-owner .org-role{animation: orgBadgePop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;}
#orgPanel .org-card.org-anim-card .org-name, #orgPanel .org-card.org-anim-owner .org-name{animation: orgBadgePop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;}
.award-sec{background: var(--ink);}
.award-sec .section-h2{color: var(--cream);}
.award-from{font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.72);}
.award-title{font-size: 1.05rem; font-weight: 700; color: var(--cream); line-height: 1.4;}
.award-date{font-size: .75rem; color: rgba(255,255,255,.65); font-weight: 500; margin-top: 4px;}
.award-highlight{font-size: 1.4rem; font-weight: 800; color: var(--cream); letter-spacing: -.01em;}
@media(max-width:768px){.award-highlight{font-size: 1rem;}
.award-title{font-size: .9rem;}
.award-from{font-size: .65rem;}
.award-date{font-size: .68rem;}}
/* ═══ BAGIAN BARU / PENYESUAIAN ═══ */
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.2em}
.i-fill{fill:currentColor;stroke:none}
.skip{position:absolute;left:12px;top:-60px;z-index:10000;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:600;font-size:.9rem;transition:top .2s}
.skip:focus{top:12px}
.site-header{display:contents}
main{display:block}
html{scroll-padding-top:76px}
.section-h2{max-width:20ch}
.section{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}

/* tanpa JavaScript: semuanya tampil */
html.no-js .rv,html.no-js .rv-l,html.no-js .rv-r{opacity:1;transform:none}
html.no-js nav,html.no-js .wa-float,html.no-js .hero-sub,html.no-js .hero-cta-row,html.no-js .hero-trust,html.no-js .hero-visual{opacity:1;transform:none}
html.no-js .hero-h1 .line-inner{transform:none;opacity:1}
html.no-js .marquee-track{animation:none}

/* Tentang */
.about-sec{min-height:0}
.about-left p{max-width:46ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.18);position:relative;z-index:1}
.stat{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.stat:nth-child(odd){padding-right:20px;border-right:1px solid rgba(255,255,255,.18)}
.stat:nth-child(even){padding-left:24px}
.stat dt{font-size:.8rem;color:rgba(255,255,255,.7);order:2}
.stat dd{font-family:var(--df);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.04em;line-height:1;margin-bottom:8px;color:#fff}
.stat{display:flex;flex-direction:column}
.stat dd{order:1}
.why{padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;background:var(--bg)}
.why h3{font-family:var(--df);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.why ul{list-style:none}
.why li{padding:22px 0;border-top:1px solid var(--border)}
.why li:first-child{border-top:0}
.why li strong{font-family:var(--df);font-weight:700;font-size:1rem;letter-spacing:-.01em;display:block;margin-bottom:6px}
.why li p{font-size:.92rem;line-height:1.7;color:var(--muted);max-width:52ch}

/* Kolaborasi */
.collabs-head{align-items:flex-end;text-align:left}
.collabs-head p{text-align:left;max-width:38ch}
figure{margin:0}

/* Penghargaan */
.award-sec{background:var(--ink)}
.award-wrap{max-width:1200px;margin:0 auto}
.award-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);margin-top:44px;align-items:start}
.award-main{display:grid;grid-template-columns:minmax(0,.9fr) 1fr;gap:clamp(18px,3vw,32px);align-items:center}
.award-figure{border-radius:12px;overflow:hidden;background:#1a1d2b}
.award-figure img{width:100%;height:auto;display:block}
.award-main .award-title{font-family:var(--df);font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.03em;margin:6px 0 14px;line-height:1.2}
.award-main .award-highlight{font-family:var(--df);font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.04em;line-height:1}
.award-main .award-date{margin-top:10px}
.award-side{display:flex;flex-direction:column}
.award-row{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.award-row:first-child{border-top:0;padding-top:0}
.award-row .award-title{font-family:var(--df);font-size:1.02rem;letter-spacing:-.01em;margin-top:2px}

/* Layanan */
.ecosystem-sec{background:var(--bg)}
.ecosystem-head{max-width:58ch;margin-bottom:40px}
.ecosystem-head p,.collabs-head p,.livecom-head p,.brands-head2 p{margin-top:14px;font-size:.95rem;color:var(--muted);line-height:1.72}
.svc-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.svc-item{padding:24px 24px 28px 0}
.svc-item+.svc-item{padding-left:24px;border-left:1px solid var(--border)}
.svc-item h3,.lc-item h3,.step h3{font-family:var(--df);font-weight:700;font-size:1.08rem;letter-spacing:-.02em;margin-bottom:10px;line-height:1.25}
.svc-item p,.lc-item p,.step p{font-size:.9rem;line-height:1.7;color:var(--muted)}
.channels{margin-top:64px}
.channels h3{font-family:var(--df);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.ch-list{list-style:none;border-top:1px solid var(--border)}
.ch-row{display:grid;grid-template-columns:1fr 1.3fr auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border)}
.ch-name{font-family:var(--df);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.ch-plat{font-size:.8rem;color:var(--muted);margin-top:2px}
.ch-desc{text-align:left;font-size:.9rem;color:var(--muted);line-height:1.6}
.ch-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.ch-links a{display:inline-flex;align-items:center;gap:4px;font-size:.88rem;font-weight:600;color:var(--violet);border-bottom:1px solid transparent;transition:border-color .2s}
.ch-links a:hover{border-bottom-color:currentColor}
.ecosystem-sec .section-cta{text-align:left;margin-top:44px}

/* Live commerce */
.livecom-head{max-width:58ch;margin-bottom:44px}
.livecom-head p{color:rgba(255,255,255,.72)}
.lc-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:48px}
.lc-item{padding:26px 0 30px;border-top:1px solid rgba(255,255,255,.18)}
.lc-item h3{color:#fff}
.lc-item p{color:rgba(255,255,255,.72)}

/* Cara kerja */
.process-sec{background:var(--surface)}
.process-inner{max-width:1200px;margin:0 auto}
.process{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative}
.step{counter-increment:s;padding:0 28px 0 0;position:relative}
.step::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--df);font-weight:700;font-size:.9rem;margin-bottom:20px;position:relative;z-index:1}
.step::after{content:"";position:absolute;left:38px;right:0;top:19px;height:1px;background:var(--border);background:rgba(13,13,18,.16)}
.step:last-child::after{display:none}

/* Klien */
.brands-wrap{background:var(--bg)}
.brands-inner2{max-width:1200px;margin:0 auto}
.brands-head2{max-width:58ch;margin-bottom:40px}
.clients{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.client{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 12px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center}
.client-logo{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--surface)}
.client-text{display:flex;align-items:center;justify-content:center;font-family:var(--df);font-weight:800;font-size:1.4rem;color:var(--violet)}
.client-name{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.35}

/* Struktur tim */
.org-sec{background:var(--surface)}
.org-head{text-align:center}
.org-head .section-h2{margin-left:auto;margin-right:auto}

/* FAQ */
.faq-sec{background:var(--bg)}
.faq-inner{max-width:820px;margin:0 auto}
.faq-list{margin-top:36px;border-top:1px solid var(--ink)}
.faq{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--df);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .25s var(--ease);color:var(--muted)}
.faq[open] summary .i{transform:rotate(180deg)}
.faq summary:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}
.faq p{padding:0 40px 24px 0;color:var(--muted);line-height:1.75;font-size:.95rem;max-width:68ch}

/* CTA */
.cta-inner{max-width:780px}
.cta-sec h2{max-width:none}

/* Footer */
footer.foot{display:block;padding:clamp(48px,6vw,72px) clamp(20px,5vw,60px) 28px;background:var(--bg)}
.foot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px}
.foot-brand p{margin-top:14px;font-size:.88rem;color:var(--muted);line-height:1.7;max-width:34ch}
.foot-h{font-family:var(--df);font-size:.85rem;font-weight:700;margin-bottom:14px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-grid ul a{font-size:.88rem;color:var(--muted);transition:color .2s}
.foot-grid ul a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{max-width:1200px;margin:48px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.foot-bottom .footer-credit{flex:0 0 100%;margin:10px 0 0;text-align:center;font-size:.68rem;letter-spacing:.02em;opacity:.85}

/* ─── Responsif ─── */
@media(max-width:1000px){
  .svc-list{grid-template-columns:1fr 1fr}
  .svc-item:nth-child(3){padding-left:0;border-left:0}
  .svc-item:nth-child(n+3){border-top:1px solid var(--border)}
  .lc-list{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr;row-gap:36px}
  .step:nth-child(2)::after{display:none}
  .clients{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .collabs-head{align-items:flex-start}
  .why{padding:40px 18px 56px}
  .award-layout{grid-template-columns:1fr}
  .ch-row{grid-template-columns:1fr;gap:8px}
  .ch-links{justify-content:flex-start;margin-top:4px}
}
@media(max-width:600px){
  .section{padding-top:56px;padding-bottom:56px}
  .svc-list,.lc-list,.process{grid-template-columns:1fr}
  .svc-item,.svc-item+.svc-item{padding:22px 0;border-left:0;border-top:1px solid var(--border)}
  .svc-item:first-child{border-top:0}
  .lc-list{column-gap:0}
  .process{row-gap:0}
  .step{padding:0 0 28px 56px;min-height:60px}
  .step::before{position:absolute;left:0;top:0;margin:0}
  .step::after{display:block;left:19px;top:44px;bottom:6px;right:auto;width:1px;height:auto}
  .step:nth-child(2)::after{display:block}
  .step:last-child{padding-bottom:0}
  .clients{grid-template-columns:repeat(2,1fr)}
  .client{padding:22px 10px}
  .award-main{grid-template-columns:1fr}
  .award-main .award-figure{max-width:200px}
  .award-row{grid-template-columns:80px 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
  .foot-bottom{flex-direction:column}
  .foot-bottom .footer-credit{text-align:center}
  .stat dd{font-size:1.7rem}
  .faq summary{font-size:.96rem;padding:18px 0}
  .faq p{padding-right:0}
  .ecosystem-sec .section-cta{text-align:center}
}

/* Nav: tablet pakai menu hamburger, desktop sempit tidak berdesakan */
.nav-links a,.nav-login,.nav-cta{white-space:nowrap}
@media(max-width:1180px){
  .nav-links,.nav-right{display:none}
  .hbg{display:flex}
}
/* animasi geser dari kanan tidak boleh menambah lebar halaman (Safari/iPad) */
.about-sec,.collabs-sec,.award-sec,.ecosystem-sec,.livecom-sec{overflow:hidden}
@supports(overflow:clip){.about-sec,.collabs-sec,.award-sec,.ecosystem-sec,.livecom-sec{overflow:clip}}