:root{
  --bg:#0b0f14;
  --text:#e6e8ee;
  --muted:#8b91a2;
  --accent:#7c7cff;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,sans-serif;
  overflow:hidden;
}

/* ===============================
   BACKGROUND
================================ */
#bg-parallax{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(124,124,255,.08), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.03), transparent 50%);
  pointer-events:none;
  z-index:-1;
}

/* ===============================
   APP
================================ */
#app{
  position:relative;
  height:100%;
  padding:48px;
}

/* ===============================
   BRAND
================================ */
.brand h1{
  font-size:28px;
  font-weight:400;
  letter-spacing:.5em;
}
.brand span{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.5;
}

/* ===============================
   NAVIGATION
================================ */
.core-nav{
  position:absolute;
  top:50%;
  left:80px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:24px;
  transition:opacity .3s ease,left .3s ease;
}
.core-nav.hidden{
  opacity:0;
  pointer-events:none;
}
.core-nav button{
  background:none;
  border:none;
  color:var(--muted);
  font-family:"JetBrains Mono",monospace;
  cursor:pointer;
  font-size:13px;
  padding:4px 8px;
  border-radius:6px;
  transition:color .3s;
}
.core-nav button:hover{color:var(--accent)}

/* ===============================
   VIEWPORT + BLUR
================================ */
.viewport{
  position:absolute;
  top:50%;
  left:180px;
  transform:translateY(-50%);
  width:calc(100% - 260px);
  min-height:280px;
  overflow:hidden;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.viewport.active{
  pointer-events:auto;
}

/* full soft blur */
.viewport.active::before{
  content:"";
  position:fixed;
  inset:0;
  backdrop-filter:blur(20px);
  background:rgba(11,15,25,.45);
  z-index:1;
  pointer-events:none;
  touch-action:none;
}

/* ===============================
   TRACK / PANELS
================================ */
.track{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  opacity:0;
}
.panel{
  flex:0 0 100%;
  display:none;
  flex-direction:column;
  align-items:center;
}

.panel-header h2{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  text-transform:uppercase;
  opacity:.6;
  letter-spacing:.15em;
  margin-bottom:12px;
}

/* ===============================
   SLIDER + CARDS
================================ */
.slider{
  position:relative;
  width:100%;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card{
  position:absolute;
  width:220px;
  height:250px;
  background:rgba(255,255,255,.03);
  border-radius:12px;
  border:1px solid rgba(124,124,255,.2);
  font-family:"JetBrains Mono",monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.85);
  transition:opacity .4s ease,transform .4s ease;
  pointer-events:none;
  overflow:hidden;
}

.card.active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  box-shadow:0 8px 24px rgba(124,124,255,.25);
}

/* ===============================
   CARD BG
================================ */
.card-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(.6) contrast(1.1);
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%);
}

.card-title{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  z-index:2;
  font-size:13px;
  color:#fff;
  letter-spacing:.08em;
}

/* ===============================
   ARROWS
================================ */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(124,124,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:var(--accent);
  cursor:pointer;
  opacity:.8;
  user-select:none;
  z-index:3;
  transition:background .3s,transform .2s,opacity .3s;
}

.arrow:hover{
  background:rgba(124,124,255,.18);
  transform:translateY(-50%) scale(1.08);
  opacity:1;
}

.arrow-left{left:36px}
.arrow-right{right:36px}

/* ===============================
   FOOTER
================================ */
.status{
  position:absolute;
  bottom:32px;
  left:48px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  opacity:.4;
}
.peripheral{
  position:absolute;
  bottom:32px;
  right:48px;
  display:flex;
  gap:16px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
}
.peripheral span{
  opacity:.4;
  cursor:pointer;
}
.peripheral span:hover{opacity:.8}

/* ===============================
   MODAL
================================ */
.modal{
  position:fixed;
  inset:0;
  background:rgba(11,15,20,.75);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.modal-box{
  max-width:320px;
  padding:16px;
  background:rgba(11,15,20,.9);
  border-radius:10px;
  font-size:13px;
  line-height:1.6;
}

/* ===============================
   PEN IDENTITY
================================ */
.pen-slider{
  max-width:340px;
  margin:auto;
}

.pen-card{
  display:none;
  position:relative;
  padding:18px;
  border-radius:14px;
  background:rgba(20,20,25,.9);
  border:1px solid rgba(124,124,255,.25);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  overflow:hidden;
}

.pen-card.active{
  display:block;
}

/* hologram */
.pen-card .hologram{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(124,124,255,.25),transparent 70%);
  opacity:.25;
  animation:holoMove 4s linear infinite;
  pointer-events:none;
}

@keyframes holoMove{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

.pen-header{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  opacity:.7;
  margin-bottom:12px;
}

.pen-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pen-body .row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
}

.pen-footer{
  margin-top:14px;
  font-size:11px;
  opacity:.4;
  text-align:right;
}

/* dots */
.pen-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}
.pen-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  cursor:pointer;
}
.pen-dot.active{
  background:var(--accent);
}

/* ===============================
   AVATAR
================================ */
.pen-avatar{
  width:80px;
  height:80px;
  margin:0 auto 12px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(124,124,255,.35);
  box-shadow:0 0 12px rgba(124,124,255,.35);
  position:relative;
}

.pen-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pen-avatar::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02),rgba(255,255,255,.02) 1px,transparent 1px,transparent 2px);
  pointer-events:none;
}

/* ===============================
   MOBILE
================================ */
@media(max-width:767px){
  #app{padding:24px}
  .core-nav{left:48px;top:45%}
  .viewport{left:0;width:100%}
  .arrow{width:36px;height:36px;font-size:20px}
  .arrow-left{left:20px}
  .arrow-right{right:20px}
  .status,.peripheral{bottom:16px}
    }

#modal-box {
  max-width: 520px;
  line-height: 1.45;   /* lebih UI-friendly */
}

.modal-title {
  text-align: center;
  margin: 0 0 0.6em;   /* buang margin atas, rapikan bawah */
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  line-height: 1.2;    /* judul jangan “jatuh” */
  opacity: 0.85;
}

#modal-box p {
  margin-bottom: 0.7em;
}



/* Card Client — Anglumea Dark Variant */
.card-client {
  background: #0b0f14;
  width: 13rem;
  padding: 25px 20px;
  border: 4px solid #1f6feb;
  box-shadow: 0 6px 12px rgba(31, 111, 235, 0.35);
  border-radius: 10px;
  text-align: center;
  color: #e6edf3;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}

.card-client:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(31, 111, 235, 0.55);
}

.user-picture {
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border: 3px solid #1f6feb;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.user-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.name-client {
  margin-top: 18px;
  font-weight: 600;
  font-size: 18px;
  color: #e6edf3;
}

.name-client span {
  display: block;
  font-weight: 300;
  font-size: 15px;
  color: #9da7b3;
}

.social-media:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin: 18px 0;
  background: linear-gradient(
    to right,
    transparent,
    #1f6feb,
    transparent
  );
}

.social-media a {
  position: relative;
  margin-right: 14px;
  color: #e6edf3;
  text-decoration: none;
}

.social-media a:last-child {
  margin-right: 0;
}

.social-media a svg {
  width: 1.1rem;
  fill: currentColor;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-media a:hover svg {
  transform: scale(1.15);
  color: #1f6feb;
}

.tooltip-social {
  background: #161b22;
  color: #e6edf3;
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -90%);
  transition: all 0.2s ease;
  z-index: 2;
}

.tooltip-social:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #161b22 transparent transparent transparent;
  transform: translateX(-50%);
}

.social-media a:hover .tooltip-social {
  opacity: 1;
  transform: translate(-50%, -130%);
}