*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#E8500A;--orange-lt:#F97316;--orange-dk:#B03A06;
  --white:#FFFFFF;--off-white:#F8F9FA;--silver-lt:#F1F3F5;
  --silver:#E2E6EA;--silver-md:#CED4DA;--gray:#495057;
  --dark:#212529;--navy:#1A1F2E;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--dark);overflow-x:hidden}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--off-white)}::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px}

/* HERO */
.page-hero{background:linear-gradient(135deg,var(--navy) 0%,#2d3748 100%);padding:130px 64px 80px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(232,80,10,.18) 0%,transparent 65%);pointer-events:none}
.page-hero::after{content:'';position:absolute;bottom:-60px;left:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(232,80,10,.1) 0%,transparent 65%);pointer-events:none}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.45);margin-bottom:20px;position:relative;z-index:2}
.breadcrumb a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--orange-lt)}
.breadcrumb span{color:var(--orange-lt)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,6vw,80px);line-height:.95;letter-spacing:3px;color:var(--white);margin-bottom:20px}
.hero-title span{color:var(--orange)}
.hero-desc{font-size:15px;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:32px;max-width:440px}
.hero-stats{display:flex;gap:40px}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:42px;line-height:1;color:var(--white)}
.stat-num span{color:var(--orange)}
.stat-label{font-size:12px;color:rgba(255,255,255,.45);margin-top:4px;letter-spacing:.5px}
.hero-img-wrap{position:relative;height:320px;display:flex;align-items:center;justify-content:center}

/* HERO SLIDESHOW */
.hero-slideshow{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.hs-slide.active{opacity:1;pointer-events:auto}
.hs-img{width:100%;height:100%;object-fit:cover;display:block}
.hs-fallback{width:100%;height:100%;background:rgba(255,255,255,.06);border:2px dashed rgba(232,80,10,.3);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:absolute;inset:0}
.hs-fallback .ph-icon{font-size:56px;opacity:.35}
.hs-fallback p{font-size:13px;color:rgba(255,255,255,.35);text-align:center}
.hs-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);padding:28px 18px 14px;display:flex;align-items:center;gap:10px}
.hs-cap-tag{background:var(--orange);color:var(--white);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px;white-space:nowrap}
.hs-cap-text{font-size:13px;color:rgba(255,255,255,.85);font-family:'DM Sans',sans-serif}
.hs-dots{position:absolute;bottom:14px;right:14px;display:flex;gap:6px;z-index:10}
.hs-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:all .3s}
.hs-dot.active{background:var(--orange);width:22px;border-radius:4px}
.hs-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);z-index:10}
.hs-progress-bar{height:100%;width:0%;background:var(--orange);transition:width 4s linear}
.hero-placeholder{width:100%;height:100%;background:rgba(255,255,255,.06);border:2px dashed rgba(232,80,10,.3);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.hero-placeholder .ph-icon{font-size:56px;opacity:.35}
.hero-placeholder p{font-size:13px;color:rgba(255,255,255,.35);text-align:center}

/* SECTION BASE */
section{padding:90px 64px}
.sec-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:10px}
.sec-title{font-family:'DM Serif Display',serif;font-size:clamp(28px,3.5vw,46px);line-height:1.15;margin-bottom:16px}
.sec-title em{color:var(--orange);font-style:italic}
.sec-desc{color:var(--gray);font-size:15px;line-height:1.75;max-width:580px}

/* VIDEO SECTION */
.video-section{background:var(--off-white)}
.video-inner{max-width:960px;margin:0 auto;text-align:center}
.video-inner .sec-title{text-align:center}
.video-inner .sec-desc{margin:0 auto 40px;text-align:center}
.video-wrap{position:relative;background:var(--navy);border-radius:20px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;box-shadow:0 32px 80px rgba(0,0,0,.25)}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:none}
.video-wrap video.loaded{display:block}
.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;position:absolute;inset:0;cursor:pointer;transition:background .3s}
.video-placeholder:hover{background:rgba(232,80,10,.1)}
.play-btn{width:72px;height:72px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 32px rgba(232,80,10,.4)}
.play-btn:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(232,80,10,.6)}
.play-btn svg{width:28px;height:28px;fill:var(--white);margin-left:4px}
.video-placeholder p{font-size:14px;color:rgba(255,255,255,.6);letter-spacing:.5px}
.upload-hint{margin-top:16px;font-size:13px;color:var(--gray);display:flex;align-items:center;justify-content:center;gap:6px}
.upload-btn{background:var(--orange);color:var(--white);padding:10px 24px;border-radius:4px;font-weight:700;font-size:13px;border:none;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.upload-btn:hover{background:var(--orange-dk)}
#videoInput{display:none}

/* STORY SECTION */
.story-section{background:var(--white)}
.story-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1200px;margin:0 auto}
.story-img{position:relative;height:400px}
.story-placeholder{width:100%;height:100%;background:var(--off-white);border:2px dashed var(--silver-md);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.story-placeholder .ph-icon{font-size:64px;opacity:.2}
.story-placeholder p{font-size:13px;color:var(--silver-md);text-align:center}
.story-text .sec-desc{max-width:100%}
.story-highlight{background:rgba(232,80,10,.06);border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:16px 20px;margin-top:24px}
.story-highlight p{font-size:14px;color:var(--gray);line-height:1.7;font-style:italic}

/* VISI MISI SECTION */
.visimisi-section{background:var(--off-white)}
.visimisi-inner{max-width:1000px;margin:0 auto;text-align:center}
.visimisi-inner .sec-title{text-align:center}
.visimisi-inner .sec-desc{margin:0 auto 52px;text-align:center}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vm-card{background:var(--white);border:1px solid var(--silver);border-radius:20px;padding:36px;text-align:left;transition:all .3s;position:relative;overflow:hidden}
.vm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--orange);border-radius:20px 20px 0 0}
.vm-card:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(0,0,0,.08);border-color:rgba(232,80,10,.3)}
.vm-icon{width:52px;height:52px;background:rgba(232,80,10,.1);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px;border:1px solid rgba(232,80,10,.2)}
.vm-card h3{font-family:'DM Serif Display',serif;font-size:22px;color:var(--navy);margin-bottom:12px}
.vm-card p{font-size:14px;color:var(--gray);line-height:1.75}

/* PILAR SECTION */
.pilar-section{background:var(--navy);padding:90px 64px}
.pilar-inner{max-width:1200px;margin:0 auto}
.pilar-inner .sec-label{color:rgba(232,80,10,.8)}
.pilar-inner .sec-title{color:var(--white)}
.pilar-inner .sec-title em{color:var(--orange)}
.pilar-inner .sec-desc{color:rgba(255,255,255,.5);margin-bottom:52px}
.pilar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
.pilar-card{background:rgba(255,255,255,.03);padding:40px 28px;transition:background .3s;cursor:default}
.pilar-card:hover{background:rgba(232,80,10,.1)}
.pilar-num{font-family:'Bebas Neue',sans-serif;font-size:60px;line-height:1;color:rgba(232,80,10,.2);margin-bottom:16px;transition:color .3s}
.pilar-card:hover .pilar-num{color:var(--orange)}
.pilar-card h4{font-size:16px;font-weight:700;color:var(--white);margin-bottom:10px}
.pilar-card p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.7}

/* CTA SECTION */
.cta-section{background:var(--white);padding:90px 64px}
.cta-inner{background:var(--orange);border-radius:24px;padding:72px;text-align:center;position:relative;overflow:hidden}
.cta-inner::before{content:'';position:absolute;top:-80px;right:-80px;width:300px;height:300px;background:rgba(255,255,255,.08);border-radius:50%}
.cta-inner::after{content:'';position:absolute;bottom:-60px;left:-60px;width:200px;height:200px;background:rgba(0,0,0,.06);border-radius:50%}
.cta-inner h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,4vw,58px);letter-spacing:2px;color:var(--white);margin-bottom:14px;position:relative;z-index:2}
.cta-inner p{color:rgba(255,255,255,.8);font-size:16px;margin-bottom:32px;position:relative;z-index:2}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.btn-white{background:var(--white);color:var(--orange);padding:14px 36px;border-radius:6px;font-weight:700;font-size:14px;text-decoration:none;transition:all .25s;display:inline-block}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.15)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.6);color:var(--white);padding:14px 36px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:all .25s;display:inline-block}
.btn-outline:hover{background:rgba(255,255,255,.15);border-color:var(--white)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:1024px){
  section{padding:64px 24px}
  .page-hero{padding:100px 24px 64px}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-img-wrap{height:220px}
  .story-inner{grid-template-columns:1fr;gap:40px}
  .story-img{height:240px}
  .vm-grid{grid-template-columns:1fr}
  .pilar-section{padding:64px 24px}
  .pilar-grid{grid-template-columns:1fr 1fr}
  .cta-section{padding:64px 24px}
  .cta-inner{padding:40px 24px}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:600px){
  .hero-stats{gap:24px;flex-wrap:wrap}
  .pilar-grid{grid-template-columns:1fr}
}