:root{
  --navy:#071a2d;
  --navy-2:#0d2a47;
  --navy-3:#143858;
  --gold:#efb93f;
  --gold-2:#ffd46f;
  --white:#ffffff;
  --ink:#142231;
  --muted:#667789;
  --light:#f5f7fa;
  --line:#dfe6ed;
  --green:#178b5f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Calibri,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,26,45,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand img{width:42px;height:42px}
.brand div{display:flex;flex-direction:column;line-height:1.05}
.brand strong{font-size:1.05rem;letter-spacing:.02em}
.brand span{font-size:.66rem;color:#9fb0c1;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.main-nav{display:flex;align-items:center;gap:27px}
.main-nav a{color:#d8e2ec;font-size:.94rem;font-weight:600}
.main-nav a:hover{color:#fff}
.main-nav .nav-profile{padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px}
.menu-toggle{display:none;border:0;background:transparent;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}

/* Common */
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--gold);margin-bottom:12px}
.eyebrow.dark{color:#a87510}
.section{padding:82px 0}
.section.light{background:var(--light)}
.section-heading{max-width:760px;margin-bottom:38px}
.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}
.section-heading h2,.preview-copy h2,.demo-copy h2,.developer-card h2{font-size:clamp(2rem,3.4vw,3.35rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 17px;color:var(--navy)}
.section-heading p,.preview-copy p,.demo-copy p,.developer-card p{font-size:1.08rem;line-height:1.65;color:var(--muted);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:0 22px;border-radius:12px;font-weight:800;transition:.18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 12px 28px rgba(203,147,22,.2)}
.btn-gold:hover{background:var(--gold-2)}
.btn-outline{color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-large{min-height:58px;padding:0 26px}
.text-link{display:inline-flex;align-items:center;gap:12px;color:#1e5684;font-weight:800;margin-top:6px}
.text-link:hover{color:var(--navy)}

/* Hero */
.hero{background:
radial-gradient(circle at 86% 20%,rgba(239,185,63,.12),transparent 26%),
linear-gradient(135deg,var(--navy) 0%,#0a2440 58%,#0d3150 100%);
color:#fff;padding:82px 0 74px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:68px}
.hero-copy h1{font-size:clamp(3.1rem,5.2vw,5.4rem);line-height:.98;letter-spacing:-.05em;margin:0 0 24px;max-width:720px}
.hero-copy h1 span{color:var(--gold)}
.hero-lead{color:#d3dfeb;font-size:1.14rem;line-height:1.65;max-width:670px;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-points{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;color:#b8c6d4;font-size:.9rem}
.hero-points span{display:flex;align-items:center;gap:8px}
.hero-points i{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero-visual{position:relative}
.screen-frame{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 38px 80px rgba(0,0,0,.33);border:1px solid rgba(255,255,255,.18)}
.screen-top{height:45px;padding:0 14px;display:flex;align-items:center;gap:13px;background:#edf2f6;color:#445568;font-size:.76rem}
.screen-dots{display:flex;gap:5px}
.screen-dots b{width:8px;height:8px;border-radius:50%;background:#cbd4dd}
.screen-top span{flex:1}
.screen-top em{font-style:normal;background:#fff1ce;color:#88600f;padding:5px 8px;border-radius:999px;font-weight:800;font-size:.62rem}
.screen-frame img{width:100%;height:370px;object-fit:cover;object-position:left top}
.floating-card{position:absolute;background:rgba(255,255,255,.96);color:var(--navy);padding:13px 15px;border-radius:12px;box-shadow:0 18px 38px rgba(0,0,0,.18)}
.floating-card small{display:block;color:#758596;font-size:.59rem;letter-spacing:.08em;font-weight:800}
.floating-card strong{display:block;margin-top:4px;font-size:.84rem}
.float-one{left:-26px;bottom:42px}
.float-two{right:-24px;top:50px}

/* Trust strip */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.trust-grid div{padding:25px 30px;border-right:1px solid var(--line)}
.trust-grid div:first-child{padding-left:0}
.trust-grid div:last-child{border-right:0;padding-right:0}
.trust-grid strong{display:block;color:var(--navy);font-size:1rem}
.trust-grid span{display:block;color:var(--muted);font-size:.86rem;line-height:1.45;margin-top:5px}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:0 8px 24px rgba(12,37,61,.04)}
.feature-icon{width:42px;height:42px;border-radius:12px;background:#fff3d6;color:#9b6d0d;display:grid;place-items:center;font-weight:900;margin-bottom:28px}
.feature-card h3{font-size:1.3rem;margin:0 0 10px;color:var(--navy)}
.feature-card p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.58}

/* Modules */
.modules-section{background:linear-gradient(145deg,#061625,#0a2540);color:#fff}
.modules-section .section-heading h2{color:#fff}
.modules-section .section-heading p{color:#b6c5d3}
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.module-grid article{display:grid;grid-template-columns:52px 1fr;column-gap:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px 22px}
.module-grid article>span{grid-row:1/3;width:38px;height:38px;border-radius:10px;background:rgba(239,185,63,.13);color:var(--gold);display:grid;place-items:center;font-weight:900;font-size:.78rem}
.module-grid h3{margin:1px 0 6px;font-size:1.1rem}
.module-grid p{margin:0;color:#b9c7d4;line-height:1.5;font-size:.9rem}
.module-note{color:#8fa4b7;font-size:.78rem;margin:20px 0 0}

/* Preview */
.preview-grid{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:62px}
.preview-copy ul{margin:23px 0 24px;padding:0;list-style:none;display:grid;gap:11px}
.preview-copy li{position:relative;padding-left:27px;color:#47596a;line-height:1.45}
.preview-copy li:before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:900}
.preview-image-wrap{background:#fff;padding:12px;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 50px rgba(9,36,61,.1)}
.preview-image-wrap img{border-radius:10px}

/* Demo */
.demo-section{background:#fff}
.demo-box{background:linear-gradient(135deg,var(--navy),#0f3556);border-radius:26px;padding:46px 50px;color:#fff;display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px;box-shadow:0 26px 55px rgba(7,26,45,.16)}
.demo-copy h2{color:#fff;margin-bottom:12px}
.demo-copy p{color:#c2d0dc;max-width:710px}
.demo-actions{display:grid;gap:10px;min-width:235px}

/* Developer */
.developer-section{padding-top:0;background:#fff}
.developer-card{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:28px;border-top:1px solid var(--line);padding-top:48px}
.developer-card img{width:110px;height:110px;object-fit:cover;object-position:center top;border-radius:22px}
.developer-card h2{font-size:1.85rem;margin-bottom:10px}
.developer-card p{font-size:1rem}

/* Footer */
.site-footer{background:#061522;color:#a9b7c5;padding:25px 0}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:38px;height:38px}
.footer-brand div{display:flex;flex-direction:column}
.footer-brand strong{color:#fff}
.footer-brand span{font-size:.75rem;margin-top:2px}
.footer-meta{display:flex;align-items:center;gap:20px;font-size:.78rem}
.footer-meta a{color:#d7e1ea}

/* Demo login page */
.demo-login-body{min-height:100vh;background:
radial-gradient(circle at 75% 16%,rgba(239,185,63,.15),transparent 24%),
linear-gradient(135deg,#061625,#0b2a48);color:#fff}
.demo-login-shell{width:min(1180px,calc(100% - 40px));min-height:100vh;margin:0 auto;display:grid;grid-template-columns:.78fr 1.22fr;gap:42px;align-items:center;padding:70px 0;position:relative}
.demo-back{position:absolute;top:25px;left:0;color:#c4d1dc;font-weight:700}
.demo-login-card{background:#fff;color:var(--ink);border-radius:22px;padding:34px;box-shadow:0 25px 70px rgba(0,0,0,.28)}
.demo-login-brand{display:flex;align-items:center;gap:12px}
.demo-login-brand img{width:50px;height:50px}
.demo-login-brand div{display:flex;flex-direction:column}
.demo-login-brand strong{color:var(--navy);font-size:1.2rem}
.demo-login-brand span{color:#788797;font-size:.75rem}
.demo-login-copy{margin:34px 0 24px}
.status-pill{display:inline-block;background:#fff1ce;color:#93670d;border-radius:999px;padding:6px 9px;font-size:.65rem;letter-spacing:.08em;font-weight:900}
.demo-login-copy h1{font-size:2.5rem;letter-spacing:-.04em;line-height:1.03;margin:14px 0 12px;color:var(--navy)}
.demo-login-copy p{color:var(--muted);line-height:1.6;margin:0}
.demo-credentials{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:0 0 20px}
.demo-credentials div{background:#f8fafc;padding:13px 14px}
.demo-credentials small{display:block;color:#7a8999;font-size:.64rem;font-weight:800;letter-spacing:.07em}
.demo-credentials strong{display:block;margin-top:3px;color:#213347}
.demo-disabled{width:100%;border:0;cursor:default}
.demo-disabled:hover{transform:none}
.demo-note{font-size:.76rem;color:#8593a0;line-height:1.45;margin:14px 0 0}
.demo-login-preview{position:relative}
.demo-login-preview img{width:100%;border-radius:19px;box-shadow:0 28px 70px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.13)}
.preview-caption{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;color:#d6e1eb}
.preview-caption span{color:var(--gold);font-weight:900}
.preview-caption strong{font-size:.9rem}

/* Responsive */
@media(max-width:980px){
  .main-nav{position:absolute;top:72px;left:20px;right:20px;background:#0b243e;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;display:none;flex-direction:column;align-items:stretch;gap:2px;box-shadow:0 20px 45px rgba(0,0,0,.24)}
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 10px}
  .menu-toggle{display:block}
  .hero-grid,.preview-grid,.demo-login-shell{grid-template-columns:1fr}
  .hero{padding-top:62px}
  .hero-visual{max-width:760px;margin:0 auto;width:100%}
  .float-one{left:10px}.float-two{right:10px}
  .trust-grid{grid-template-columns:1fr}
  .trust-grid div{padding:19px 0;border-right:0;border-bottom:1px solid var(--line)}
  .trust-grid div:last-child{border-bottom:0}
  .feature-grid{grid-template-columns:1fr 1fr}
  .demo-box{grid-template-columns:1fr}
  .demo-actions{display:flex;flex-wrap:wrap}
  .demo-login-shell{padding-top:90px}
}
@media(max-width:680px){
  .container,.demo-login-shell{width:min(100% - 28px,1180px)}
  .brand span{display:none}
  .hero{padding:52px 0}
  .hero-copy h1{font-size:3.15rem}
  .hero-actions,.demo-actions{display:grid}
  .hero-actions .btn,.demo-actions .btn{width:100%}
  .hero-points{display:grid;gap:9px}
  .screen-frame img{height:260px}
  .floating-card{display:none}
  .section{padding:60px 0}
  .feature-grid,.module-grid{grid-template-columns:1fr}
  .preview-grid{gap:34px}
  .demo-box{padding:32px 24px;border-radius:20px}
  .developer-card{grid-template-columns:1fr;text-align:center}
  .developer-card img{margin:auto}
  .footer-grid,.footer-meta{flex-direction:column;align-items:flex-start}
  .demo-login-card{padding:26px 22px}
  .demo-login-copy h1{font-size:2.15rem}
}

/* =========================================================
   V5 — DESKTOP SCALE MATCHED TO HENDRIYANA.COM
   Reference values adapted from hendriyana.com:
   body 14px, container 1060px, navbar 56px, section spacing 46px.
   ========================================================= */
@media (min-width: 992px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }

  .container {
    width: 100%;
    max-width: 1060px;
  }

  /* Navbar — same visual scale as hendriyana.com */
  .nav-wrap {
    height: 56px;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand strong {
    font-size: 1.1rem;
  }

  .brand span {
    font-size: .56rem;
    margin-top: 3px;
  }

  .main-nav {
    gap: 20px;
  }

  .main-nav a {
    font-size: .88rem;
  }

  .main-nav .nav-profile {
    padding: 7px 12px;
    border-radius: 9px;
  }

  /* Hero */
  .hero {
    padding: 50px 0 46px;
  }

  .hero-grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 46px;
  }

  .eyebrow {
    font-size: .70rem;
    margin-bottom: 9px;
  }

  .hero-copy h1 {
    font-size: clamp(2.9rem, 4.1vw, 4.1rem);
    line-height: .99;
    max-width: 560px;
    margin-bottom: 18px;
  }

  .hero-lead {
    max-width: 555px;
    font-size: 1.02rem;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .hero-actions {
    gap: 10px;
  }

  .btn {
    min-height: 44px;
    padding: 0 17px;
    border-radius: 9px;
    font-size: .9rem;
  }

  .btn-large {
    min-height: 48px;
    padding: 0 20px;
  }

  .hero-points {
    gap: 15px;
    margin-top: 18px;
    font-size: .78rem;
  }

  /* Dashboard preview — proportional to profile photo/hero area on hendriyana.com */
  .screen-frame {
    border-radius: 15px;
  }

  .screen-top {
    height: 36px;
    padding: 0 12px;
    font-size: .66rem;
  }

  .screen-dots b {
    width: 7px;
    height: 7px;
  }

  .screen-frame img {
    height: 290px;
  }

  .floating-card {
    padding: 9px 11px;
    border-radius: 10px;
  }

  .floating-card small {
    font-size: .52rem;
  }

  .floating-card strong {
    font-size: .72rem;
  }

  .float-one {
    left: -16px;
    bottom: 28px;
  }

  .float-two {
    right: -14px;
    top: 36px;
  }

  /* Supporting strip */
  .trust-grid div {
    padding: 17px 22px;
  }

  .trust-grid strong {
    font-size: .9rem;
  }

  .trust-grid span {
    font-size: .76rem;
  }

  /* Main sections — same spacing family as hendriyana.com */
  .section {
    padding: 46px 0;
  }

  .section-heading {
    max-width: 650px;
    margin-bottom: 26px;
  }

  .section-heading h2,
  .preview-copy h2,
  .demo-copy h2,
  .developer-card h2 {
    font-size: 2rem;
    margin-bottom: 12px;
  }

  .section-heading p,
  .preview-copy p,
  .demo-copy p,
  .developer-card p {
    font-size: .95rem;
    line-height: 1.5;
  }

  /* Feature cards */
  .feature-grid {
    gap: 13px;
  }

  .feature-card {
    padding: 18px;
    border-radius: 14px;
  }

  .feature-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    border-radius: 9px;
  }

  .feature-card h3 {
    font-size: 1.05rem;
    margin-bottom: 7px;
  }

  .feature-card p {
    font-size: .82rem;
    line-height: 1.48;
  }

  /* Modules */
  .module-grid {
    gap: 10px;
  }

  .module-grid article {
    grid-template-columns: 42px 1fr;
    column-gap: 12px;
    padding: 14px 16px;
    border-radius: 13px;
  }

  .module-grid article > span {
    width: 31px;
    height: 31px;
    border-radius: 8px;
    font-size: .7rem;
  }

  .module-grid h3 {
    font-size: .94rem;
    margin-bottom: 4px;
  }

  .module-grid p {
    font-size: .76rem;
    line-height: 1.44;
  }

  .module-note {
    font-size: .7rem;
    margin-top: 15px;
  }

  /* Preview section */
  .preview-grid {
    gap: 40px;
  }

  .preview-copy ul {
    margin: 16px 0 18px;
    gap: 8px;
  }

  .preview-copy li {
    font-size: .84rem;
  }

  .preview-image-wrap {
    padding: 8px;
    border-radius: 14px;
  }

  .text-link {
    font-size: .86rem;
  }

  /* Demo CTA */
  .demo-box {
    padding: 30px 34px;
    border-radius: 19px;
    gap: 30px;
  }

  .demo-actions {
    min-width: 200px;
  }

  /* Developer section */
  .developer-card {
    grid-template-columns: 88px 1fr;
    gap: 20px;
    padding-top: 32px;
  }

  .developer-card img {
    width: 82px;
    height: 82px;
    border-radius: 16px;
  }

  .developer-card h2 {
    font-size: 1.45rem;
    margin-bottom: 8px;
  }

  .developer-card p {
    font-size: .86rem;
  }

  /* Footer */
  .site-footer {
    padding: 16px 0;
  }

  .footer-brand img {
    width: 31px;
    height: 31px;
  }

  .footer-meta {
    font-size: .7rem;
  }

  /* Demo access page also follows the same desktop scale */
  .demo-login-shell {
    width: min(1060px, calc(100% - 40px));
    gap: 34px;
    padding: 54px 0;
  }

  .demo-login-card {
    border-radius: 17px;
    padding: 26px;
  }

  .demo-login-brand img {
    width: 42px;
    height: 42px;
  }

  .demo-login-copy {
    margin: 25px 0 18px;
  }

  .demo-login-copy h1 {
    font-size: 2rem;
  }

  .demo-login-copy p {
    font-size: .86rem;
  }

  .demo-credentials div {
    padding: 10px 11px;
  }

  .demo-login-preview img {
    border-radius: 15px;
  }
}

/* Why SHYMM — positioning statement */
.why-closing{
  margin:28px auto 0;
  max-width:900px;
  padding:20px 24px;
  border-left:4px solid var(--gold);
  background:#fff;
  border-radius:0 14px 14px 0;
  box-shadow:0 10px 28px rgba(12,37,61,.05);
}
.why-closing strong,
.why-closing span,
.why-closing em{
  display:block;
}
.why-closing strong{
  color:var(--navy);
  font-size:1rem;
  margin-bottom:5px;
}
.why-closing span{
  color:var(--muted);
  line-height:1.5;
}
.why-closing em{
  margin-top:10px;
  color:#8a6518;
  font-style:normal;
  font-weight:800;
}
@media (min-width:992px){
  .why-closing{
    margin-top:22px;
    padding:16px 20px;
    max-width:820px;
  }
  .why-closing strong{font-size:.92rem}
  .why-closing span,
  .why-closing em{font-size:.82rem}
}