@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
/* Futuristic blue extension for the internal pages */
body.subpage{
  --sp-blue:#063c82;
  --sp-dark:#021a3c;
  --sp-light:#edf6fc;
  --sp-red:#ff3636;
  background:
    radial-gradient(circle at 75% 0%,rgba(33,137,224,.35),transparent 30%),
    linear-gradient(150deg,#042960 0%,#073e82 42%,#021a3c 100%);
  color:#fff;
  min-height:100vh;
  padding-top:100px;
}
body.subpage::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.19;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
body.subpage .page-noise{opacity:.08}
body.subpage .cursor-dot{border-color:#fff;background:#fff;mix-blend-mode:difference}
body.subpage .site-header{
  position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:90;
  width:min(1320px,calc(100% - 28px));height:70px;padding:0 20px;
  border:1px solid rgba(255,255,255,.14);border-radius:23px;
  background:rgba(2,25,58,.76);backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 18px 45px rgba(0,10,35,.24);
}
body.subpage .brand-image{width:104px}
body.subpage .brand-logo{max-height:43px;object-fit:contain;object-position:left center}
body.subpage .desktop-nav{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);padding:5px;border-radius:999px;gap:3px}
body.subpage .desktop-nav a{padding:9px 13px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.7)}
body.subpage .desktop-nav a:hover{background:#fff;color:#063b7e}
body.subpage .header-socials a{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
body.subpage .header-socials svg{fill:#fff}
body.subpage .nav-cta{background:#fff;color:#063b7e;border-radius:14px;padding:13px 16px;font-weight:700;border:0}
body.subpage .nav-cta::after{content:"↗";display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--sp-red);color:#fff;margin-left:10px}
body.subpage .subpage-main{width:min(1500px,calc(100% - 36px));margin:auto;padding:0 0 26px}
body.subpage .section{max-width:none;margin:20px 0 0;padding:clamp(58px,7vw,110px);border-radius:42px;overflow:hidden;position:relative}
body.subpage .page-intro{
  min-height:calc(100vh - 126px);margin-top:0;border:13px solid #fff;border-radius:54px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  background:radial-gradient(circle at 65% 45%,rgba(70,177,244,.38),transparent 28%),linear-gradient(145deg,#0a5dac,#073b81 58%,#04265c);
  box-shadow:0 38px 85px rgba(0,12,38,.38);isolation:isolate;
}
body.subpage .page-intro::before{content:"SUSUNLAH";position:absolute;left:-2%;top:19%;font-family:Arial,sans-serif;font-size:clamp(110px,18vw,310px);font-weight:900;letter-spacing:-.11em;color:rgba(255,255,255,.09);white-space:nowrap;z-index:-1;transform:translateX(var(--intro-shift,0px))}
body.subpage .page-intro::after{content:"";position:absolute;right:8%;top:22%;width:290px;height:210px;border:1px solid rgba(255,255,255,.2);transform:perspective(600px) rotateY(-55deg) rotateZ(12deg);background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);box-shadow:80px 70px 0 -1px rgba(255,255,255,.03)}
body.subpage .page-intro .eyebrow{color:#8ad3ff;letter-spacing:.18em;font-size:10px}
body.subpage .page-intro h1{max-width:1100px;font-size:clamp(54px,7.6vw,125px);line-height:.88;letter-spacing:-.075em;color:#fff;margin:.18em 0;position:relative;z-index:2;transform:translateY(var(--intro-y,0px)) rotateX(var(--intro-rx,0deg));transform-origin:left bottom}
body.subpage .page-intro h1::after{display:none}
body.subpage .page-intro-text{max-width:680px;color:rgba(255,255,255,.66);font-size:15px;line-height:1.7;position:relative;z-index:2}
body.subpage .subpage-main>.section:not(.page-intro){background:var(--sp-light);color:#062750;box-shadow:0 25px 55px rgba(0,14,44,.16)}
body.subpage .subpage-main>.section:nth-child(odd):not(.page-intro){background:linear-gradient(145deg,#062d68,#031d45);color:#fff}
body.subpage .subpage-main>.section:nth-child(odd):not(.page-intro) .section-intro,
body.subpage .subpage-main>.section:nth-child(odd):not(.page-intro) p{color:rgba(255,255,255,.68)}
body.subpage .subpage-main>.section:nth-child(odd):not(.page-intro) h2,
body.subpage .subpage-main>.section:nth-child(odd):not(.page-intro) h3{color:#fff}
body.subpage .section-label,body.subpage .eyebrow{color:#0874c8}
body.subpage .section h2{font-size:clamp(42px,5.4vw,88px);letter-spacing:-.06em;line-height:.96}
body.subpage .about-grid{gap:8vw}
body.subpage .about-content p{font-size:15px;line-height:1.7}
body.subpage .stats>div{border-color:rgba(7,63,119,.16);border-radius:20px;background:rgba(255,255,255,.55);padding:21px}
body.subpage .stats strong{color:#075da9}
body.subpage .service-grid{gap:14px;perspective:1400px}
body.subpage .service-card{min-height:300px;border-radius:25px;border:1px solid rgba(7,52,104,.14);background:linear-gradient(150deg,#fff,#eaf2f8);box-shadow:0 20px 40px rgba(6,44,83,.08);transform-style:preserve-3d;transition:box-shadow .35s,background .35s}
body.subpage .service-card:hover{background:#fff;box-shadow:0 32px 58px rgba(5,43,83,.18)}
body.subpage .service-card h3{color:#062750;font-size:24px}
body.subpage .service-card p{color:#617286}
body.subpage .service-card>span{color:#0874c8}
body.subpage .calculator-card,body.subpage .featured-card,body.subpage .contact-card,body.subpage .process-preview{border-radius:30px;border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 60px rgba(0,12,38,.2);transform-style:preserve-3d}
body.subpage .timeline{gap:10px;perspective:1200px}
body.subpage .timeline-item{border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.53);transform-style:preserve-3d}
body.subpage .timeline-item.active,body.subpage .timeline-item:hover{background:#fff;color:#063163;box-shadow:0 22px 42px rgba(0,10,34,.22)}
body.subpage .timeline-item small{color:inherit;opacity:.7}
body.subpage .process-preview{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13)}
body.subpage .process-preview .preview-number{color:#59b7f4}
body.subpage .accordion-item{border-radius:17px;background:#fff;border:1px solid rgba(7,53,102,.12);margin-top:9px;color:#062750}
body.subpage .accordion-panel{border-radius:0 0 17px 17px;background:rgba(255,255,255,.65)}
body.subpage .works-grid,body.subpage .project-grid{perspective:1400px}
body.subpage .work-card{border-radius:28px;overflow:hidden;box-shadow:0 25px 48px rgba(0,10,35,.24);transform-style:preserve-3d}
body.subpage .contact-card{background:linear-gradient(145deg,#084d91,#062d68);color:#fff}
body.subpage .contact-card h2{color:#fff}
body.subpage .contact-card p{color:rgba(255,255,255,.66)}
body.subpage .contact-details a{color:#fff;border-color:rgba(255,255,255,.18)}
body.subpage input,body.subpage textarea,body.subpage select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;border-radius:14px}
body.subpage input::placeholder,body.subpage textarea::placeholder{color:rgba(255,255,255,.4)}
body.subpage .button-primary{background:#fff;color:#063b7e;border-radius:999px}
body.subpage .footer{width:min(1500px,calc(100% - 36px));margin:0 auto 20px;border-radius:30px;background:#01152f;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.08)}
body.subpage .floating-whatsapp{box-shadow:0 16px 35px rgba(0,0,0,.3)}
body.subpage .reveal.visible{transform:none}
body.subpage .reveal{transform:translateY(60px) rotateX(7deg);transform-origin:center top}
@media(max-width:800px){
  body.subpage{padding-top:78px}
  body.subpage .site-header{height:58px;top:9px}
  body.subpage .subpage-main{width:calc(100% - 16px)}
  body.subpage .section{padding:55px 22px;border-radius:28px}
  body.subpage .page-intro{min-height:690px;border-width:8px;border-radius:34px}
  body.subpage .page-intro h1{font-size:15vw}
  body.subpage .page-intro::after{width:150px;height:110px;right:4%}
  body.subpage .footer{width:calc(100% - 16px)}
}

/* Wider footer and unified typography */
body.subpage .site-header,body.subpage .desktop-nav a,body.subpage .nav-cta,body.subpage .page-intro h1,body.subpage .section h2,body.subpage .service-card h3,body.subpage .timeline-item,body.subpage .contact-card h2,body.subpage .footer,body.subpage p,body.subpage a{font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}
body.subpage .footer{width:min(1680px,calc(100% - 24px));padding-left:28px;padding-right:28px}
body.subpage .footer .footer-brand{min-width:110px}
body.subpage .floating-whatsapp{background:#1fbf62;border:3px solid rgba(255,255,255,.22)}
body.subpage .floating-whatsapp svg{width:22px;height:22px;display:block}

/* Revision 6: align subpage mobile header with homepage header */
@media (max-width: 960px){
  body.subpage{padding-top:92px !important}
  body.subpage .site-header{
    top:10px !important;
    width:calc(100% - 20px) !important;
    height:72px !important;
    padding:0 12px 0 14px !important;
    grid-template-columns:auto 1fr auto !important;
    gap:8px !important;
    border-radius:28px !important;
    background:rgba(2,25,57,.9) !important;
    overflow:visible !important;
  }
  body.subpage .brand-image{
    width:96px !important;
    height:58px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    justify-self:start !important;
  }
  body.subpage .brand-logo{
    width:auto !important;
    height:52px !important;
    max-height:52px !important;
    object-fit:contain !important;
  }
  body.subpage .header-socials{
    justify-self:end !important;
    gap:7px !important;
    margin:0 !important;
  }
  body.subpage .header-socials a{
    width:40px !important;
    height:40px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border-radius:50% !important;
  }
  body.subpage .header-socials svg{
    width:17px !important;
    height:17px !important;
  }
  body.subpage .menu-toggle{
    display:block !important;
    width:52px !important;
    height:52px !important;
    padding:0 !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:0 12px 26px rgba(0,0,0,.18) !important;
  }
  body.subpage .menu-toggle span{
    width:22px !important;
    height:2px !important;
    margin:6px auto !important;
    background:#071a38 !important;
  }
}

@media (max-width: 480px){
  body.subpage .site-header{
    width:calc(100% - 16px) !important;
    height:68px !important;
    padding:0 10px 0 12px !important;
    gap:6px !important;
  }
  body.subpage .brand-image{width:84px !important;height:54px !important}
  body.subpage .brand-logo{height:47px !important;max-height:47px !important}
  body.subpage .header-socials{gap:5px !important}
  body.subpage .header-socials a{width:36px !important;height:36px !important}
  body.subpage .header-socials svg{width:15px !important;height:15px !important}
  body.subpage .menu-toggle{width:48px !important;height:48px !important}
  body.subpage .page-intro{padding-top:110px !important}
}