:root{--bg:#f5f7fb;--text:#111827;--muted:#6b7280;--card:#ffffff;--line:#e5e7eb;--primary:#2563eb;--primary2:#1d4ed8;--ok:#10b981}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-wrap{height:68px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;letter-spacing:.2px}.menu{display:flex;gap:10px}.menu a{padding:8px 12px;border-radius:10px;color:#374151}.menu a:hover{background:#eef2ff;color:#1d4ed8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary2));color:#fff}.btn-outline{border-color:#d1d5db;color:#1f2937;background:#fff}
.hero{padding:64px 0 36px}.kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:#e0e7ff;color:#3730a3;font-size:12px;font-weight:700}.hero h1{font-size:48px;line-height:1.08;margin:14px 0 10px}.hero p{font-size:18px;color:#4b5563;max-width:760px;line-height:1.7}.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}.card h3{margin:0 0 8px}.muted{color:var(--muted)}
.section{padding:18px 0 8px}.section h2{font-size:30px;margin:0 0 10px}.section p{color:#4b5563;line-height:1.7}
.skill{margin:11px 0}.skill .top{display:flex;justify-content:space-between;font-size:14px}.bar{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#6366f1)}
.quote{font-size:20px;line-height:1.6;color:#374151;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.cta{margin:20px 0 40px;padding:26px;border-radius:18px;background:linear-gradient(135deg,#1d4ed8,#4338ca);color:#fff}.cta p{color:#e5e7eb}.cta .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.footer{padding:26px 0;color:#6b7280;text-align:center}
/* Chat widget */
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:999px;border:none;background:linear-gradient(135deg,#2563eb,#4338ca);color:#fff;font-size:22px;box-shadow:0 10px 25px rgba(37,99,235,.35);cursor:pointer}
.chat{position:fixed;right:20px;bottom:88px;z-index:60;width:340px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.18);display:none;overflow:hidden}
.chat.open{display:block}.chat-head{padding:12px 14px;background:#1f2937;color:#fff;font-weight:700}.chat-body{padding:12px;max-height:320px;overflow:auto;background:#f9fafb}.bubble{padding:10px 12px;border-radius:12px;margin:8px 0;line-height:1.5;font-size:14px;display:flex;flex-direction:column;gap:4px}.bubble-text{white-space:pre-wrap}.bubble-time{font-size:11px;color:#94a3b8;align-self:flex-end}.me{background:#e5edff;margin-left:30px}.me .bubble-time{color:#64748b}.bot{background:#fff;border:1px solid #e5e7eb;margin-right:30px}.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.chat-input input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #d1d5db}
.small{font-size:12px;color:#6b7280;padding:0 12px 10px}
@media (max-width:900px){.hero h1{font-size:36px}.grid-3,.grid-2{grid-template-columns:1fr}.menu{display:none}}

.status-badge{float:right;font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;background:#064e3b;color:#d1fae5}
.status-badge.off{background:#7f1d1d;color:#fecaca}
.quick-chips{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);background:#fff}
.chip{border:1px solid #d1d5db;background:#fff;color:#334155;padding:6px 10px;border-radius:999px;font-size:12px;cursor:pointer}
.chip:hover{background:#eef2ff;border-color:#c7d2fe}

.hero{position:relative}
.hero:after{content:'';position:absolute;right:0;top:10px;width:180px;height:180px;background:radial-gradient(circle,#dbeafe 0%,transparent 70%);z-index:-1}
.card{transition:.2s ease;border:1px solid var(--line)}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.06)}
#proses .card h3,#trust .card h3{font-size:18px}
.chat{width:370px}
@media (max-width:900px){.chat{width:calc(100vw - 20px);right:10px;bottom:78px}.chat-fab{right:12px;bottom:12px}}


/* Elegant motion + visual polish */
:root{--shadow-soft:0 10px 28px rgba(30,41,59,.08)}
body{background:
 radial-gradient(1000px 420px at 8% -10%, rgba(59,130,246,.10), transparent 60%),
 radial-gradient(900px 400px at 95% 10%, rgba(99,102,241,.10), transparent 58%),
 var(--bg);
}
.nav{animation:slideDown .45s ease both}
.hero{animation:fadeUp .6s ease both}
.section{animation:fadeUp .55s ease both}
.card{box-shadow:var(--shadow-soft)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.12)}
.btn{transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.btn-primary:hover{box-shadow:0 10px 24px rgba(37,99,235,.35)}
.kicker{box-shadow:0 6px 16px rgba(59,130,246,.20)}
.quote{position:relative;overflow:hidden}
.quote:before{content:'';position:absolute;inset:-1px auto auto -1px;width:42%;height:3px;background:linear-gradient(90deg,#2563eb,#6366f1);border-radius:99px}

/* Chat delight */
.chat{backdrop-filter:blur(10px);animation:chatPop .25s ease}
.chat-head{background:linear-gradient(90deg,#0f172a,#1e293b)}
.bubble{animation:bubbleIn .22s ease}
.me{background:linear-gradient(180deg,#dfe8ff,#dbe7ff)}
.bot{background:linear-gradient(180deg,#ffffff,#fbfdff)}
.quick-chips{background:linear-gradient(180deg,#fff,#f8fafc)}
.chip{transition:all .18s ease}
.chip:hover{transform:translateY(-1px)}
.chat-fab{transition:transform .2s ease, box-shadow .2s ease}
.chat-fab:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 30px rgba(37,99,235,.42)}

/* Scrollbar subtle */
.chat-body::-webkit-scrollbar{width:8px}
.chat-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
.chat-body::-webkit-scrollbar-track{background:transparent}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chatPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* Scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease, transform .65s ease;will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0)}

/* Hero visual */
.hero-visual{margin-top:16px}
.hero-badge{display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;background:linear-gradient(90deg,#eef2ff,#f8faff);border:1px solid #dbeafe;color:#334155;font-weight:600}

/* Flow styling */
.flow-card{position:relative;overflow:hidden}
.flow-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#dbeafe,#eef2ff);font-size:22px;margin-bottom:8px}
#proses .grid{position:relative}
#proses .grid:before{content:'';position:absolute;left:8%;right:8%;top:28px;height:2px;background:linear-gradient(90deg,#bfdbfe,#c7d2fe);z-index:0}
#proses .flow-card{z-index:1}

/* Fancy section icon */
.section h2{display:flex;align-items:center;gap:8px}
#keahlian h2:before{content:'📊'}
#layanan h2:before{content:'🧩'}
#proses h2:before{content:'🛣️'}
#trust h2:before{content:'⭐'}

@media (max-width:900px){
  #proses .grid:before{display:none}
}

.chat-head{display:flex;align-items:center;gap:8px}
.chat-full-btn{margin-left:auto;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;font-size:16px;line-height:1;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
.chat.fullscreen{right:0!important;bottom:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;border-radius:0!important;display:grid;grid-template-rows:auto 1fr auto auto}
.chat.fullscreen .chat-body{height:100%;max-height:none;min-height:0;overflow:auto;padding:10px 12px}
.chat.fullscreen .quick-chips{position:static;z-index:2;padding:8px 10px}
.chat.fullscreen .chat-input{position:static;background:#fff;z-index:3;padding:10px}
.chat.fullscreen .small{padding:0 12px 10px}

@media (max-width:900px){.chat.fullscreen .chat-body{padding:8px 10px}.chat.fullscreen .bubble{margin:6px 0}.chat.fullscreen .quick-chips{gap:6px}.chat.fullscreen .chip{padding:6px 9px;font-size:12px}}

.chat-fullscreen-on .chat-fab{display:none!important}