@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--ink:#f4f8ff;--muted:#b5c5e2;--border:rgba(171,209,255,.19);--glass:rgba(6,19,50,.57);--gold:#f0ca7c;--blue:#48b7ff;--shadow:0 28px 80px rgba(0,2,16,.32)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#030b20;color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif;line-height:1.55;overflow-x:hidden}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7bd0ff;outline-offset:3px}[hidden]{display:none!important}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,#071d4e 0%,#030b20 68%)}.ambient:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,5,17,.35),transparent 40%,rgba(1,5,17,.43));pointer-events:none}.blob{position:absolute;display:block;border-radius:50%;filter:blur(65px);opacity:.7;will-change:transform}.blob-a{width:88vw;height:88vw;min-width:420px;min-height:420px;top:-22%;left:-28%;background:radial-gradient(circle,#064ac0,transparent 69%);animation:float-a 14s ease-in-out infinite alternate}.blob-b{width:80vw;height:80vw;min-width:440px;min-height:440px;right:-37%;top:10%;background:radial-gradient(circle,#0878e8,transparent 68%);animation:float-b 17s ease-in-out infinite alternate}.blob-c{width:90vw;height:90vw;min-width:420px;min-height:420px;left:5%;bottom:-45%;background:radial-gradient(circle,#152a96,transparent 68%);animation:float-c 19s ease-in-out infinite alternate}.blob-d{width:65vw;height:65vw;min-width:350px;min-height:350px;right:5%;bottom:4%;background:radial-gradient(circle,rgba(0,177,255,.65),transparent 68%);animation:float-d 16s ease-in-out infinite alternate}@keyframes float-a{to{transform:translate(32%,20%) scale(1.2) rotate(15deg)}}@keyframes float-b{to{transform:translate(-28%,22%) scale(1.16)}}@keyframes float-c{to{transform:translate(22%,-30%) scale(1.18)}}@keyframes float-d{to{transform:translate(-34%,-22%) scale(.85)}}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px max(5vw,18px);border-bottom:1px solid rgba(255,255,255,.09);background:rgba(2,9,30,.37);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.brand{display:flex;align-items:center;gap:12px;font-family:Outfit,sans-serif;font-size:clamp(19px,4.5vw,26px);font-weight:800;line-height:1.1}.brand strong{color:var(--gold)}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2px;color:#c6d6f1;margin-top:6px;font-weight:700}.brand-mark{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:13px;background:linear-gradient(145deg,#2d9bff,#11366c);box-shadow:0 4px 22px rgba(30,137,255,.36)}.nav-link{font-size:14px;color:#dbe9ff;padding:10px 12px;border:1px solid var(--border);border-radius:12px;white-space:nowrap}.nav-link:hover{background:rgba(255,255,255,.1)}.container{max-width:1030px;margin:auto;padding:0 22px}.hero{padding:86px 0 65px;max-width:760px}.eyebrow,.section-kicker{font-size:11px;font-weight:800;letter-spacing:2.6px;color:#9edbff}.eyebrow{display:flex;align-items:center;gap:10px}.live-dot{width:8px;height:8px;border-radius:50%;background:#68c8ff;box-shadow:0 0 0 5px rgba(85,192,255,.13),0 0 20px #32b4ff}.hero h1{font-family:Outfit,sans-serif;font-size:clamp(45px,9vw,83px);font-weight:800;letter-spacing:-2.7px;line-height:1.07;margin:23px 0}.gradient-text{background:linear-gradient(95deg,#fff 5%,#b3e7ff 44%,#55aaff 95%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:clamp(16px,3.5vw,20px);max-width:660px;color:#c8d8f2}.hero-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.hero-pills span{border:1px solid var(--border);background:rgba(255,255,255,.07);border-radius:100px;padding:8px 13px;font-size:12px;color:#d9eaff}.glass-card{background:var(--glass);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}.form-card{padding:clamp(24px,5vw,48px);position:relative;overflow:hidden}.form-card:before{content:"";position:absolute;top:0;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,#8bcdff,transparent)}.card-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}.card-top h2{font-family:Outfit,sans-serif;font-size:clamp(30px,6vw,42px);letter-spacing:-.8px;margin:8px 0 7px}.card-top p{color:var(--muted);margin:0;max-width:650px}.card-symbol{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex-shrink:0;font-size:26px;background:linear-gradient(140deg,rgba(75,169,255,.4),rgba(17,49,104,.5));border:1px solid var(--border)}.preview-note{padding:13px 16px;border-radius:13px;background:rgba(240,202,124,.1);border:1px solid rgba(240,202,124,.3);color:#ffe3a4;font-size:13px;margin-bottom:24px}.field{margin-bottom:23px}.field label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}.field label span{color:#ffaaa8}.field input,.field select,.field textarea{display:block;width:100%;border:1px solid rgba(181,209,255,.25);border-radius:14px;padding:16px 17px;background:rgba(2,11,35,.58);color:#f6f9ff;transition:border-color .2s,background .2s;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#63baff;background:rgba(6,29,70,.76);box-shadow:0 0 0 3px rgba(60,161,255,.13)}.field input::placeholder,.field textarea::placeholder{color:#8fa6ca}.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a8caff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center;padding-right:47px}.field select option{background:#071b40;color:#fff}.field textarea{min-height:150px;resize:vertical}.field-foot{display:flex;justify-content:space-between;gap:12px;color:#a7b9d5;font-size:11px;margin-top:8px}.safety{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid rgba(127,193,255,.2);background:rgba(32,94,162,.13);border-radius:14px;margin:6px 0 24px;color:#c5d8f1}.safety span{font-size:22px;line-height:1}.safety p{margin:0;font-size:12px}.primary-btn{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:17px 20px;border:0;border-radius:14px;color:#fff;font-weight:800;background:linear-gradient(105deg,#1769e8,#0e9bff);box-shadow:0 12px 35px rgba(7,119,239,.3);transition:transform .2s,filter .2s}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.13)}.microcopy{text-align:center;font-size:11px;color:#a7bad9;margin:13px 0 0}.result{margin-top:23px;padding:20px;border:1px solid rgba(111,215,255,.35);border-radius:17px;background:rgba(5,54,103,.4);overflow-wrap:anywhere}.result h3{margin:0 0 8px}.result p{color:#d7e6fa}.result dl{display:grid;grid-template-columns:130px 1fr;gap:8px;font-size:13px}.result dt{color:#a6bfe4}.result dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.bottom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0 70px}.mini-card{padding:25px}.mini-icon{font-size:28px;color:#79c7ff}.mini-card h3{font-family:Outfit,sans-serif;font-size:19px;margin:8px 0}.mini-card p{font-size:13px;color:var(--muted);margin:0}footer{text-align:center;padding:28px 16px 40px;color:#b5c8e7;font-size:12px}footer span{padding:0 6px}
/* Admin preview */.admin-hero{padding:65px 0 25px}.admin-hero h1{font-family:Outfit,sans-serif;font-size:clamp(35px,7vw,60px);line-height:1.1;margin:14px 0}.admin-hero p{color:var(--muted);max-width:650px}.admin-panel{padding:30px;margin:20px 0 80px}.admin-panel h2{font-family:Outfit,sans-serif;margin:0 0 10px}.admin-panel p{color:var(--muted)}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:25px}.demo-stat{background:rgba(3,13,39,.45);border:1px solid var(--border);padding:22px;border-radius:17px}.demo-stat strong{display:block;font-size:29px;font-family:Outfit,sans-serif}.demo-stat span{font-size:12px;color:var(--muted)}
@media(max-width:600px){.topbar{padding:17px 15px}.brand{font-size:20px}.brand-mark{width:34px;height:34px}.brand small{font-size:7px;letter-spacing:1.2px}.nav-link{font-size:12px;padding:8px}.container{padding:0 17px}.hero{padding:70px 0 48px}.hero h1{letter-spacing:-1.6px}.form-card{border-radius:24px}.card-symbol{display:none}.bottom-grid{grid-template-columns:1fr}.demo-grid{grid-template-columns:1fr}.admin-panel{padding:22px}.result dl{grid-template-columns:1fr;gap:3px}.result dd{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ========================================
   e-ADUAN SMKJ PREMIUM INTRO
   ======================================== */

.smkj-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  background: #020817;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  isolation: isolate;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

/* HIDE INTRO */

.smkj-intro.intro-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* BLUE LIGHT */

.intro-light {
  position: absolute;
  width: 420px;
  height: 420px;

  border-radius: 50%;

  filter: blur(85px);
  opacity: 0.65;

  z-index: -1;
}

/* FIRST LIGHT */

.intro-light-one {
  background: #075bdb;

  top: -150px;
  left: -150px;

  animation:
    introFloatOne 5s
    ease-in-out infinite alternate;
}

/* SECOND LIGHT */

.intro-light-two {
  background: #132b99;

  bottom: -160px;
  right: -160px;

  animation:
    introFloatTwo 6s
    ease-in-out infinite alternate;
}

/* FLOATING LIGHT ANIMATION */

@keyframes introFloatOne {

  from {
    transform:
      translate(0, 0) scale(1);
  }

  to {
    transform:
      translate(90px, 120px) scale(1.3);
  }

}

@keyframes introFloatTwo {

  from {
    transform:
      translate(0, 0) scale(1);
  }

  to {
    transform:
      translate(-100px, -100px) scale(1.4);
  }

}

/* INTRO CONTENT */

.intro-content {
  position: relative;

  width: 100%;
  max-width: 480px;

  padding: 24px;
  text-align: center;

  animation:
    introAppear 1s ease both;
}

/* INTRO APPEAR */

@keyframes introAppear {

  from {
    opacity: 0;

    transform:
      translateY(35px) scale(0.94);
  }

  to {
    opacity: 1;

    transform:
      translateY(0) scale(1);
  }

}

/* ANIMATED LOGO */

.intro-logo {
  width: 85px;
  height: 85px;

  margin: 0 auto 30px;

  border-radius: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #0878e8,
      #08246a
    );

  box-shadow:
    0 0 45px rgba(0,119,255,.5),
    inset 0 0 20px rgba(255,255,255,.12);

  animation:
    logoPulse 2s ease-in-out infinite;
}

.intro-logo span {
  font-size: 42px;
  color: #ffffff;
}

/* LOGO PULSE */

@keyframes logoPulse {

  0%, 100% {
    transform: scale(1);

    box-shadow:
      0 0 25px rgba(0,119,255,.35);
  }

  50% {
    transform: scale(1.08);

    box-shadow:
      0 0 65px rgba(0,119,255,.75);
  }

}

/* INTRO TITLE */

.intro-title {
  font-size: clamp(32px, 8vw, 48px);

  font-weight: 800;
  letter-spacing: -1.5px;

  color: #ffffff;

  margin: 0 0 12px;
}

/* SHINING SMKJ TEXT */

.intro-title span {

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #62b4ff,
      #ffffff
    );

  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation:
    titleShine 3s linear infinite;
}

/* SHINING EFFECT */

@keyframes titleShine {

  to {
    background-position:
      200% center;
  }

}

/* SUBTITLE */

.intro-subtitle {
  font-size: 11px;
  font-weight: 700;

  letter-spacing: 3px;

  color: #b4d3ff;

  margin-bottom: 35px;
}

/* LOADING BAR CONTAINER */

.intro-loading {
  width: 180px;
  height: 4px;

  margin: auto;

  border-radius: 100px;

  overflow: hidden;

  background:
    rgba(255,255,255,.15);
}

/* LOADING BAR ANIMATION */

.intro-loading-bar {
  height: 100%;
  width: 0%;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      #0864d8,
      #54b7ff
    );

  animation:
    introProgress 2.6s ease forwards;
}

/* PROGRESS ANIMATION */

@keyframes introProgress {

  from {
    width: 0%;
  }

  to {
    width: 100%;
  }

}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .intro-light,
  .intro-logo,
  .intro-title span,
  .intro-content,
  .intro-loading-bar {
    animation: none !important;
  }

  .intro-loading-bar {
    width: 100%;
  }

  .smkj-intro {
    transition: none;
  }

}