*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020a28;color:#fff;font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}.site-shell{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 9% 70%,color-mix(in srgb,var(--grad3) 40%,transparent),transparent 34%),radial-gradient(circle at 82% 15%,color-mix(in srgb,var(--grad4) 25%,transparent),transparent 32%),linear-gradient(135deg,var(--grad1) 0%,var(--grad2) 40%,#081b50 69%,var(--grad3) 100%)}.portal-container{width:min(var(--content-max),calc(100% - 56px));margin-inline:auto}

/* HEADER */
.topbar{height:var(--header-height);display:flex;align-items:center;background:linear-gradient(110deg,#020a2d 0%,#07194b 42%,#26134b 76%,#3c174d 100%);border-bottom:1px solid rgba(245,167,25,.9);position:relative;z-index:50}.topbar-inner{width:min(var(--content-max),calc(100% - 56px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none}.brand img{width:62px;height:72px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(34,109,255,.4))}.brand strong{display:block;font-weight:950;font-size:30px;line-height:1.02;letter-spacing:-.4px}.brand span{display:block;color:var(--gold);font-size:20px;font-weight:950;margin-top:5px}.school-site{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;border:1px solid var(--gold);border-radius:14px;padding:14px 20px;background:linear-gradient(180deg,rgba(11,39,93,.7),rgba(3,13,42,.85));font-weight:850;box-shadow:0 0 24px rgba(15,84,235,.08),inset 0 0 22px rgba(18,80,202,.08);transition:.22s}.school-site:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(245,167,25,.2)}.school-site b{color:var(--gold);font-size:20px}.site-icon{width:22px;height:22px;display:grid;place-items:center}.site-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}

/* HERO */
.hero-scene{height:var(--hero-height);min-height:500px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,var(--grad1),var(--grad2) 52%,var(--grad3));}.hero-scene:before{content:"";position:absolute;inset:0;z-index:-5;background-position:center;background-size:cover}.hero-scene:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(1,6,28,.72) 0%,rgba(2,8,32,.48) 38%,rgba(2,8,32,.18) 62%,rgba(2,8,32,.10) 100%),linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,6,26,.42));pointer-events:none}.hero-inner{width:min(var(--content-max),calc(100% - 56px));height:100%;margin:auto;display:flex;align-items:flex-start;padding:38px 47% 104px 155px;position:relative;z-index:8}.hero-copy{text-align:left}.hero-eyebrow{font-family:"Segoe Script","Brush Script MT",cursive;color:var(--gold);font-weight:500;line-height:1.05;text-shadow:0 0 20px rgba(245,167,25,.22);margin-bottom:9px}.hero-copy h1,.hero-copy h2{margin:0;color:#fff;text-transform:uppercase;font-weight:950;text-shadow:0 4px 24px rgba(0,0,0,.38)}.hero-copy h1{line-height:.98;letter-spacing:-1.5px}.hero-copy h2{line-height:1.04;margin-top:6px}.hero-city{color:var(--gold);font-weight:950;font-size:26px;text-transform:uppercase;margin-top:6px}.gold-divider{display:flex;align-items:center;gap:10px;color:var(--gold);margin:11px 0 14px}.gold-divider i{width:108px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.gold-divider i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}.hero-message h3{font-size:18px;margin:0 0 7px;color:#fff}.hero-message p{font-size:14px;line-height:1.5;margin:0;color:#edf4ff;max-width:570px}.bird-art{position:absolute;z-index:30;height:auto;object-fit:contain;filter:drop-shadow(0 12px 15px rgba(0,0,0,.36)) drop-shadow(0 0 16px rgba(245,167,25,.14));transform:rotate(-2deg);pointer-events:none}.papua-edge{position:absolute;z-index:3;width:112px;height:245px;opacity:var(--pattern-opacity);background-image:linear-gradient(45deg,transparent 43%,#e87720 43%,#e87720 48%,transparent 48%,transparent 54%,#e87720 54%,#e87720 59%,transparent 59%),linear-gradient(-45deg,transparent 43%,#e87720 43%,#e87720 48%,transparent 48%,transparent 54%,#e87720 54%,#e87720 59%,transparent 59%);background-size:42px 42px}.edge-left{left:-24px;top:6px}.edge-right{right:-28px;bottom:10px}

/* APPLICATION CARDS - overlap hero like approved visual */
.apps-section{position:relative;z-index:20;margin-top:-94px;padding:0 0 30px;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--grad2) 45%,#07143c) 115px,color-mix(in srgb,var(--grad1) 72%,#020a28) 100%)}.app-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.app-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(180deg,#fff 0,#f9fbff 100%);border:2px solid color-mix(in srgb,var(--accent) 75%,#fff);border-radius:var(--radius);padding:14px 16px 15px;overflow:hidden;box-shadow:0 18px 36px rgba(0,0,0,calc(.48 * var(--card-shadow))),0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);transition:.22s}.app-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.38),0 0 25px color-mix(in srgb,var(--accent) 22%,transparent)}.card-corner{position:absolute;left:-5px;bottom:-5px;width:84px;height:84px;opacity:.22;background:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 9px);clip-path:polygon(0 0,100% 100%,0 100%)}.app-illustration{width:100%;height:112px;display:grid;place-items:center;margin:0 0 9px}.app-illustration img{width:100%;height:100%;max-width:175px;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(25,39,77,.14))}.app-illustration-fallback{width:76px;height:76px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent2));color:#fff}.app-illustration-fallback svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8}.app-card h3{font-size:19px;margin:0;color:var(--accent2);font-weight:950}.app-card p{font-size:12.5px;line-height:1.48;color:#172235;margin:8px 0 14px;min-height:68px}.open-app{margin-top:auto;width:100%;padding:10px 12px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 8px 16px color-mix(in srgb,var(--accent) 24%,transparent);color:#fff;text-decoration:none;font-weight:900;font-size:12px}.open-app.disabled{opacity:.5}

/* FEATURES */
.features-section{
 padding-top:58px;
}
.section-head{
 text-align:center;
 max-width:1080px;
 margin:0 auto 34px;
}
.heading-rule{
 font-size:clamp(25px,2.2vw,34px);
 gap:18px;
 font-weight:950;
 letter-spacing:.5px;
}
.heading-rule i{
 width:clamp(72px,9vw,150px);
}
.section-head p{
 max-width:1000px;
 margin:14px auto 0;
 font-size:clamp(16px,1.35vw,21px);
 line-height:1.55;
 font-weight:600;
 color:#f5f6ff;
}

.feature-list{
 width:min(1020px,calc(100% - 24px));
 margin:0 auto;
 display:grid;
 grid-template-columns:1fr;
 gap:24px; /* sekitar 1 kali Enter antar card */
}
.feature-landscape-card{
 position:relative;
 width:100%;
 min-height:156px;
 display:grid;
 grid-template-columns:190px minmax(0,1.15fr) minmax(320px,.9fr);
 align-items:center;
 column-gap:26px;
 overflow:hidden;
 isolation:isolate;
 background:rgba(255,255,255,.72);
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
 border:1px solid rgba(255,255,255,.75);
 border-left:5px solid var(--accent);
 border-radius:18px;
 padding:18px 26px 18px 20px;
 box-shadow:
  0 14px 32px rgba(4,13,38,.17),
  inset 0 1px 0 rgba(255,255,255,.88);
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.feature-landscape-card:before{
 content:"";
 position:absolute;
 right:18px;
 top:18px;
 width:58px;
 height:58px;
 opacity:.12;
 background-image:radial-gradient(circle,var(--accent) 1.4px,transparent 1.6px);
 background-size:10px 10px;
 z-index:-1;
}
.feature-landscape-card:after{
 content:"";
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 height:3px;
 background:linear-gradient(90deg,var(--accent),transparent 42%);
 opacity:.58;
}
.feature-landscape-card:hover{
 transform:translateY(-3px);
 box-shadow:
  0 18px 40px rgba(4,13,38,.22),
  0 0 20px color-mix(in srgb,var(--accent) 7%,transparent);
}

.feature-landscape-visual{
 min-width:0;
 height:118px;
 display:grid;
 place-items:center;
 position:relative;
}
.feature-landscape-visual:after{
 content:"";
 position:absolute;
 left:18%;
 right:18%;
 bottom:1px;
 height:14px;
 border-radius:50%;
 background:radial-gradient(ellipse,rgba(20,38,70,.16),transparent 70%);
 filter:blur(4px);
 z-index:-1;
}
.feature-landscape-visual img{
 width:100%;
 height:100%;
 max-width:165px;
 object-fit:contain;
 filter:drop-shadow(0 7px 9px rgba(20,38,70,.14));
}
.feature-icon-fallback{
 width:74px;
 height:74px;
 border-radius:18px;
 display:grid;
 place-items:center;
 background:linear-gradient(145deg,var(--accent),var(--accent2));
 color:#fff;
}
.feature-icon-fallback svg{
 width:38px;
 height:38px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.8;
}

.feature-landscape-copy{
 min-width:0;
 padding-right:8px;
}
.feature-landscape-copy h3{
 margin:0 0 10px;
 color:var(--accent2);
 font-size:clamp(22px,1.55vw,28px);
 line-height:1.08;
 font-weight:950;
 letter-spacing:-.2px;
}
.feature-landscape-copy p{
 margin:0;
 color:#263750;
 font-size:16px;
 line-height:1.55;
 font-weight:540;
}

.feature-landscape-points{
 list-style:none;
 margin:0;
 padding:0 0 0 24px;
 border-left:1px solid rgba(69,85,116,.2);
 display:grid;
 grid-template-columns:1fr;
 gap:8px;
}
.feature-landscape-points li{
 display:flex;
 align-items:flex-start;
 gap:9px;
 min-width:0;
 color:#24344e;
 font-size:15px;
 line-height:1.34;
 font-weight:560;
}
.feature-landscape-points li span{
 flex:0 0 20px;
 width:20px;
 height:20px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:var(--accent);
 color:#fff;
 font-size:11px;
 font-weight:950;
 box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 22%,transparent);
}

@media(max-width:1050px){
 .feature-list{
  width:min(900px,calc(100% - 24px));
 }
 .feature-landscape-card{
  grid-template-columns:160px 1fr;
  row-gap:14px;
  min-height:0;
  padding:18px 22px;
 }
 .feature-landscape-visual{
  grid-row:1 / span 2;
  height:112px;
 }
 .feature-landscape-points{
  grid-column:2;
  padding-left:0;
  border-left:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px;
 }
}

@media(max-width:760px){
 .features-section{padding-top:40px}
 .section-head{margin-bottom:24px}
 .heading-rule{font-size:22px;gap:10px}
 .heading-rule i{width:42px}
 .section-head p{font-size:14.5px;margin-top:10px}
 .feature-list{
  width:calc(100% - 20px);
  gap:18px;
 }
 .feature-landscape-card{
  grid-template-columns:1fr;
  gap:12px;
  padding:18px 17px;
  text-align:center;
 }
 .feature-landscape-visual{
  grid-row:auto;
  height:98px;
 }
 .feature-landscape-visual img{
  max-width:140px;
 }
 .feature-landscape-copy{
  padding-right:0;
 }
 .feature-landscape-copy h3{
  font-size:21px;
  margin-bottom:7px;
 }
 .feature-landscape-copy p{
  font-size:13.5px;
  line-height:1.5;
 }
 .feature-landscape-points{
  grid-column:auto;
  grid-template-columns:1fr;
  padding:12px 0 0;
  border-left:0;
  border-top:1px solid rgba(69,85,116,.16);
  text-align:left;
 }
 .feature-landscape-points li{
  font-size:12.8px;
 }
}


/* FOOTER */
.site-footer{position:relative;background:linear-gradient(90deg,#02092a 0%,#0b1746 42%,#231447 72%,#34133c 100%);padding:14px 0;border-top:1px solid rgba(245,167,25,.42)}
.footer-single-line{min-height:34px;display:flex;align-items:center;justify-content:center;gap:13px;text-align:center;color:#f4f7ff;font-size:13px;font-weight:650;letter-spacing:.15px}
.footer-single-line .footer-separator{color:var(--gold);opacity:.9}
/* Responsive */
@media(max-width:1300px){.hero-inner{padding-left:120px;padding-right:43%}.bird-art{max-width:285px}.app-grid{gap:13px}}
@media(max-width:1050px){.portal-container,.topbar-inner,.hero-inner{width:calc(100% - 34px)}.hero-inner{padding:36px 34% 108px 68px}.app-grid{grid-template-columns:repeat(3,1fr)}.app-card:nth-child(4){grid-column:1/2;margin-left:50%}.app-card:nth-child(5){grid-column:2/3;margin-left:50%}}
@media(max-width:760px){:root{--header-height:78px}.portal-container,.topbar-inner,.hero-inner{width:calc(100% - 24px)}.brand{gap:9px}.brand img{width:44px;height:52px}.brand strong{font-size:16px}.brand span{font-size:12px}.school-site{padding:10px 12px}.school-site span:not(.site-icon),.school-site b{display:none}.hero-scene{height:560px}.hero-inner{padding:34px 8px 145px;align-items:flex-start}.hero-copy{text-align:center;margin:auto}.hero-eyebrow{font-size:32px!important}.hero-copy h1{font-size:43px!important}.hero-copy h2{font-size:24px!important}.hero-city{font-size:22px}.gold-divider{justify-content:center}.hero-message p{font-size:13px}.bird-art{width:165px!important;right:-18px!important;top:350px!important;opacity:.78!important}.apps-section{margin-top:-112px}.app-grid{grid-template-columns:1fr;gap:12px}.app-card,.app-card:nth-child(4),.app-card:nth-child(5){grid-column:auto;margin-left:0;min-height:0!important}.app-card p{min-height:0}.heading-rule{font-size:17px}.heading-rule i{width:42px}.section-head p{font-size:13px}}