/* ====== H. Wisnu — Impressa : Styles ====== */
:root{
  --bg0:#07080b; --bg1:#0d0f14; --ink:#f5f6fb;
  --ink-d:#cdd0d8; --gold:#d8b574; --gold-2:#f2deac;
  --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, 'Poppins', Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink); background: radial-gradient(1200px 700px at 70% 10%, #11131a 0%, #0a0c12 45%, #07080b 100%);
  overflow-x:hidden;
}

/* subtle light beams */
.beams::before,.beams::after{
  content:""; position:fixed; inset:-20%;
  background: conic-gradient(from 120deg, transparent 0 40%, rgba(216,181,116,.07) 42% 58%, transparent 60%);
  filter: blur(42px); mix-blend-mode: screen; animation: swirl 26s linear infinite;
  pointer-events:none;
}
.beams::after{ animation-direction: reverse; animation-duration: 40s; opacity:.7 }
@keyframes swirl{to{transform:rotate(360deg)}}

/* header */
.site-header{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(13,15,20,.55), rgba(13,15,20,.15));
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.3px}
.brand img{filter: drop-shadow(0 6px 18px rgba(216,181,116,.25))}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav a{color:var(--ink-d); text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav .cta{background: linear-gradient(180deg, rgba(216,181,116,.25), rgba(216,181,116,.18)); color:#1b1b1b; font-weight:700; text-shadow:0 1px 0 rgba(255,255,255,.35); border-radius:12px}
.nav .ghost{margin-left:6px}

/* hero */
.hero{display:grid; place-items:center; padding:56px 18px 28px}
.card{
  position:relative; width:min(96vw, 980px); padding:36px 26px; text-align:center;
  border-radius:22px; backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke); box-shadow:var(--shadow);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-2px;
  background: conic-gradient(from 0deg, #0000, #0000 25%, rgba(248,235,200,.25) 35%, rgba(216,181,116,.45) 50%, rgba(248,235,200,.25) 65%, #0000 75%, #0000);
  filter: blur(6px); border-radius:24px; z-index:-1; animation: ring 10s linear infinite;
}
@keyframes ring{to{transform:rotate(360deg)}}

.hero-card h1{font-size:clamp(1.4rem,3.2vw,2.4rem); margin:10px 0 8px}
.hero-card p{color:var(--ink-d); margin:0 auto 12px; max-width:720px; line-height:1.7}
.logo{width:108px; height:108px; margin:10px auto 6px; display:block}

.actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:8px 0 6px}
.btn{
  cursor:pointer; border:none; border-radius:14px; padding:12px 16px; font-weight:700; letter-spacing:.3px;
  background:linear-gradient(180deg, rgba(216,181,116,.25), rgba(216,181,116,.18));
  color:#1b1b1b; text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(216,181,116,.18);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px rgba(216,181,116,.28) }
.btn:active{ transform: translateY(0) scale(.99) }
.btn.ghost{
  background:rgba(255,255,255,.06); color:var(--ink); text-shadow:none;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* loader line */
.loader{position:relative; height:3px; width:240px; margin:18px auto 4px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden}
.loader span{
  position:absolute; inset:0; transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(216,181,116,.1), rgba(216,181,116,.8), rgba(216,181,116,.1), transparent);
  animation: load 2s ease-in-out infinite;
}
@keyframes load{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* sections */
.section{padding:40px 18px}
.section-head{text-align:center; margin-bottom:18px}
.section-head h2{font-size:clamp(1.2rem,2.4vw,1.8rem); margin:0 0 6px}
.section-head .sub{color:var(--ink-d); margin:0}

.grid.two{display:grid; gap:14px; grid-template-columns:1fr;}
.grid.three{display:grid; gap:14px; grid-template-columns:1fr;}
@media(min-width:860px){
  .grid.two{grid-template-columns:1.1fr .9fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}

.panel, .svc, .cta-card{
  padding:18px; border:1px solid var(--stroke); border-radius:18px; background:rgba(255,255,255,.03); box-shadow:var(--shadow);
}
.panel.glass{backdrop-filter: blur(10px); background:rgba(255,255,255,.05)}

.ticks{padding-left:18px}
.ticks li{margin:6px 0}

.stats{display:flex; gap:12px; margin-top:8px}
.stats div{flex:1; background:rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:14px; padding:12px; text-align:center}
.stats strong{font-size:1.2rem}
.stats span{display:block; color:var(--ink-d); font-size:.9rem}

.svc h4{margin:8px 0 6px}
.svc p{color:var(--ink-d)}

.pillars{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){ .pillars{grid-template-columns:1fr} }
.pillar{border:1px solid var(--stroke); border-radius:16px; padding:16px; text-align:center; background:rgba(255,255,255,.03)}
.pillar .icon{font-size:1.4rem; margin-bottom:6px}
.pillar h5{margin:4px 0 6px}
.pillar p{color:var(--ink-d)}

.footer{border-top:1px solid var(--stroke); padding:14px 18px; text-align:center; color:var(--ink-d)}

/* small controls */
.ghost{cursor:pointer; background:transparent; color:var(--ink-d); border:1px solid var(--stroke); padding:8px 12px; border-radius:10px}
.ghost:hover{background:rgba(255,255,255,.06)}

/* particles canvas */
#fx{position:fixed; inset:0; z-index:-1; opacity:.7}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .beams::before,.beams::after, .card::before, .loader span{ animation: none !important }
}