/* DS313 v2 — kinematik tema */
:root{
  --bg:#04060d; --panel:rgba(17,21,34,.62); --line:rgba(255,255,255,.10);
  --text:#F2F5FA; --muted:#96A0B5; --mint:#5EEAD4; --violet:#A78BFA; --warm:#FF9E6E;
  --curve:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.lu-root{position:relative;min-height:100vh;
  background:radial-gradient(48% 60% at 72% 12%,rgba(94,234,212,.06),transparent 70%),
             radial-gradient(42% 52% at 30% 30%,rgba(167,139,250,.06),transparent 72%),var(--bg)}
.lu-root::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:40;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>")}
.skip-link{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 16px;border-radius:8px;z-index:100}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* mobil menyu */
.lu-burger{display:none;flex-direction:column;gap:5px;background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:11px 12px;cursor:pointer;border-radius:12px}
.lu-burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .4s var(--curve),opacity .3s var(--curve)}
.lu-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lu-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lu-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.lu-mobile{position:fixed;inset:0;z-index:80;background:rgba(4,6,13,.94);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s var(--curve)}
.lu-mobile.open{opacity:1;pointer-events:auto}
.lu-mobile nav{display:flex;flex-direction:column;gap:22px;text-align:center}
.lu-mobile nav a{font-family:'Unbounded',sans-serif;font-size:20px;color:var(--text);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--curve),transform .5s var(--curve),color .3s var(--curve)}
.lu-mobile.open nav a{opacity:1;transform:none}
.lu-mobile nav a:hover,.lu-mobile nav a.on{color:var(--mint)}
.lu-mobile .lu-m-cta{margin-top:10px;font-size:15px;color:#05070D;background:#F4F7FC;
  padding:12px 26px;border-radius:999px;box-shadow:0 0 26px rgba(94,234,212,.3)}
body.menu-open .lu-nav{z-index:95}

/* nav */
.lu-stage-wrap{position:relative}
.lu-nav{position:sticky;top:16px;z-index:50;margin:16px auto 0;width:max-content;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:26px;padding:10px 12px 10px 22px;
  background:rgba(10,14,24,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--line);border-radius:999px}
.lu-brand a{display:flex;align-items:center;gap:10px;font-family:'Unbounded',sans-serif;font-size:14px;font-weight:600;letter-spacing:.12em}
.lu-brand img{border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line),0 0 16px rgba(94,234,212,.28)}
.lu-brand em{font-style:normal;color:var(--mint)}
.lu-links{display:flex;gap:22px;font-size:13px;color:var(--muted)}
.lu-links a{transition:color .3s var(--curve);padding:4px 0;position:relative}
.lu-links a:hover{color:var(--text)}
.lu-links a.on{color:var(--text)}
.lu-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--mint)}

/* buttons */
.lu-btn{display:inline-block;font:inherit;font-size:14px;font-weight:500;padding:10px 18px;border-radius:14px;
  cursor:pointer;border:1px solid transparent;text-align:center;
  transition:transform .5s var(--curve),background-color .3s var(--curve),border-color .3s var(--curve),box-shadow .3s var(--curve)}
.lu-btn:active{transform:scale(.97)}
.lu-btn-sm{padding:8px 16px;border-radius:999px;font-size:13px}
.lu-primary{background:#F4F7FC;color:#05070D;box-shadow:0 0 24px rgba(94,234,212,.22)}
.lu-primary:hover{transform:translateY(-2px);box-shadow:0 0 42px rgba(94,234,212,.38)}
.lu-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.lu-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}

/* hero */
.lu-stage{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lu-hero{position:relative;z-index:2;padding:90px 64px;max-width:820px;pointer-events:none}
.lu-hero .lu-btn{pointer-events:auto}
.lu-over{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.lu-h1{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(34px,4.6vw,60px);line-height:1.08;color:#F4F7FC}
.lu-h1 .ch{display:inline-block;opacity:0;transform:translateY(30px) rotateX(80deg);transform-origin:50% 100%;
  transition:transform .8s var(--curve),opacity .8s var(--curve)}
.lu-h1.in .ch{opacity:1;transform:none}
.lu-sub{margin-top:24px;font-size:16px;color:var(--muted);max-width:560px;text-shadow:0 1px 14px rgba(3,5,10,.85)}
.lu-sub b{font-weight:500;color:rgba(255,255,255,.9)}
.lu-cta{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.lu-proof{margin-top:36px;font-size:13px;color:var(--muted);text-shadow:0 1px 10px rgba(3,5,10,.85)}
.lu-proof b{font-weight:500;color:rgba(255,255,255,.78)}
.lu-hint{position:absolute;z-index:3;left:64px;bottom:24px;font-size:12px;color:var(--muted);opacity:.75}

/* sections */
.lu-section{max-width:1180px;margin:0 auto;padding:72px 40px}
.lu-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.lu-sec-head h1,.lu-sec-head h2{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.lu-more{font-size:13px;color:var(--mint)}
.lu-more:hover{text-decoration:underline}

/* carousel */
.lu-car-nav{display:flex;gap:10px}
.lu-arrow{font:inherit;font-size:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--text);cursor:pointer;transition:all .3s var(--curve)}
.lu-arrow:hover{background:rgba(94,234,212,.12);border-color:rgba(94,234,212,.4)}
.lu-carousel{position:relative;border-radius:24px;border:1px solid var(--line);background:var(--panel);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden}
.lu-car-track{display:flex;transition:transform .7s var(--curve)}
.lu-slide{min-width:100%}
.lu-slide a{display:block;position:relative}
.lu-slide img{width:100%;height:auto;aspect-ratio:20/9;object-fit:cover;filter:saturate(1.05)}
.lu-slide-info{position:absolute;left:0;right:0;bottom:0;padding:20px 28px;
  background:linear-gradient(transparent,rgba(4,6,13,.92))}
.lu-slide-info h3{font-family:'Unbounded',sans-serif;font-size:clamp(16px,2vw,22px);font-weight:600}
.lu-slide-info p{font-size:13px;color:var(--mint)}
.lu-car-dots{display:flex;justify-content:center;gap:8px;padding:14px}
.lu-car-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.25);cursor:pointer;transition:all .3s var(--curve)}
.lu-car-dots button[aria-selected="true"]{background:var(--mint);transform:scale(1.35)}

/* 3D karusel */
.lu-carousel3d{position:relative;height:500px;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(65% 90% at 50% 20%,rgba(94,234,212,.06),transparent 70%),
             radial-gradient(55% 60% at 50% 95%,rgba(167,139,250,.07),transparent 72%),var(--panel)}
#car3dCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#car3dCanvas:active{cursor:grabbing}
.lu-car3d-info{position:absolute;left:0;right:0;bottom:46px;z-index:3;padding:30px 34px 8px;pointer-events:none;
  background:linear-gradient(transparent,rgba(4,6,13,.9) 62%)}
.lu-car3d-info h3{font-family:'Unbounded',sans-serif;font-size:clamp(16px,2vw,22px);font-weight:600}
.lu-car3d-info p{font-size:13px;margin-top:2px}
.lu-car3d-info a{color:var(--mint);pointer-events:auto}
.lu-car3d-info a:hover{text-decoration:underline}
.lu-car3d-info.pop h3{animation:carpop .5s var(--curve)}
@keyframes carpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lu-carousel3d .lu-car-dots{position:absolute;left:0;right:0;bottom:12px;z-index:4}


/* news */
.lu-news{list-style:none;display:grid;gap:14px}
.lu-news-item{display:flex;gap:18px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.lu-news-item time{font-size:12px;color:var(--mint);white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums}
.lu-news-item a{font-weight:500}
.lu-news-item a:hover{color:var(--mint)}
.lu-news-item p{font-size:13.5px;margin-top:3px}

/* cards */
.lu-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.lu-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;
  transition:transform .3s var(--curve),border-color .3s var(--curve);position:relative;overflow:hidden}
.lu-card:hover{transform:translateY(-4px);border-color:rgba(94,234,212,.35)}
.lu-card img{border-radius:12px;aspect-ratio:320/226;object-fit:cover;width:100%}
.lu-card h3{font-size:15px;font-weight:500;margin-top:12px}
.lu-card p{font-size:12.5px;margin-top:2px}

/* works page */
.lu-search{display:flex;gap:14px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.lu-input{font:inherit;font-size:14px;color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:min(340px,100%)}
.lu-input::placeholder{color:var(--muted)}
.lu-count{font-size:13px;font-variant-numeric:tabular-nums}
.lu-empty{padding:32px 0}

/* prose */
.lu-prose{max-width:760px}
.lu-prose h1{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3vw,36px);margin-bottom:24px}
.lu-prose p{margin-bottom:18px;color:rgba(235,240,250,.92)}
.lu-prose em{color:var(--mint);font-style:italic}
.lu-prose a{color:var(--mint);text-decoration:underline}
.lu-stats{display:flex;gap:32px;flex-wrap:wrap;margin:28px 0}
.lu-stat b{font-family:'Unbounded',sans-serif;font-size:38px;font-weight:600;color:var(--mint);display:block;font-variant-numeric:tabular-nums}
.lu-stat span{font-size:13px;color:var(--muted)}

/* form */
.lu-form{display:grid;gap:18px;max-width:560px}
.lu-frow{display:grid;gap:6px}
.lu-frow label{font-size:13px;color:var(--muted)}
.lu-form input,.lu-form textarea{font:inherit;font-size:14px;color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;width:100%}
.lu-form input:focus,.lu-form textarea:focus{outline:2px solid var(--mint);outline-offset:0;border-color:transparent}
.lu-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.lu-alert{padding:12px 18px;border-radius:12px;font-size:14px;margin-bottom:18px}
.lu-alert.ok{background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.4)}
.lu-alert.err{background:rgba(255,120,120,.08);border:1px solid rgba(255,120,120,.4)}

/* footer */
.lu-footer{margin-top:60px;border-top:1px solid var(--line);padding:24px 40px 40px;overflow:hidden}
.lu-giant{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(90px,16vw,220px);line-height:.95;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);text-align:center;user-select:none;
  transition:transform 1.2s var(--curve)}
.lu-foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.lu-foot-grid a:hover{color:var(--mint)}
.lu-foot-brand{color:var(--text);font-weight:500}
.lu-muted{color:var(--muted)}

@media (max-width:760px){
  .lu-links{display:none}
  .lu-nav .lu-btn{display:none}
  .lu-burger{display:inline-flex}
  .lu-nav{gap:12px;justify-content:space-between;width:calc(100% - 28px)}
  .lu-hero{padding:70px 24px}
  .lu-hint{left:24px}
  .lu-section{padding:56px 20px}
  .lu-footer{padding:20px 20px 32px}
  .lu-foot-grid{flex-direction:column;gap:10px}
}
@media (max-width:480px){
  .lu-news-item{flex-direction:column;gap:6px}
  .lu-giant{font-size:64px}
  .lu-proof{font-size:12px;line-height:1.7}
  .lu-cta .lu-btn{width:100%}
  .lu-stats{gap:20px}
  .lu-stat b{font-size:30px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .lu-h1 .ch{opacity:1;transform:none}
  html{scroll-behavior:auto}
}