:root{
  --bg: #ffffff;
  --primary: #E30613;
  --text: #111111;
  --muted: #6B7280;
  --border: #e5e7eb;
  --black: #000000;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1160px;margin:0 auto;padding:0 20px;}

.navbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
}
.navbar-inner{display:flex;gap:24px;align-items:center;justify-content:space-between;height:70px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--primary);display:inline-block;}
nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
nav a{padding:10px 12px;border-radius:10px;color:#333;font-weight:500;}
nav a.active, nav a:hover{background:rgba(227,6,19,0.08); color:var(--primary);}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid transparent;font-weight:600;cursor:pointer;}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary);}

.hero{padding:72px 0 56px; background:
  radial-gradient(600px 220px at right -200px top -120px, rgba(227,6,19,0.10), transparent 60%),
  radial-gradient(600px 220px at left -200px bottom -120px, rgba(0,0,0,0.06), transparent 60%);
}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px;}
.hero p{color:var(--muted);margin:0 0 24px;max-width:720px;}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;}

.section{padding:56px 0;border-top:1px solid var(--border);}
.section h2{font-size:28px;margin:0 0 10px;}
.section .sub{color:var(--muted);margin:0 0 24px;}

.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

@media (max-width:980px){.grid-4{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .hero h1{font-size:36px;}
}

.card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;}
.card .p{padding:16px;}
.card h3{margin:0 0 6px;font-size:18px;}
.card p{margin:0;color:var(--muted);}
.badge{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:#444;background:#fff;}

.logo-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.logo{border:1px dashed #d1d5db;border-radius:12px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-weight:600;}
@media (max-width:980px){.logo-wall{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.logo-wall{grid-template-columns:repeat(3,1fr);}}

.feature{display:flex;gap:16px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fff;}
.feature .icon{width:26px;height:26px;border-radius:6px;background:rgba(227,6,19,0.12);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary);}

.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;}
.table thead th{background:#f9fafb;font-weight:700;color:#374151;}
.table tbody tr:hover{background:#fcfcfc;}

.form{display:grid;gap:14px;max-width:680px;}
.input, textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font:inherit;}
textarea{min-height:140px;resize:vertical;}

.footer{background:var(--black);color:#fff;margin-top:56px;}
.footer .inner{padding:36px 0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;}
.footer a{color:#fff;opacity:.9;}
.footer small{display:block;opacity:.7;margin-top:10px;}
@media (max-width:860px){.footer .inner{grid-template-columns:1fr;}}

.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
.hr{height:1px;background:var(--border);margin:16px 0;}
/* ====== MOBILE ENHANCEMENTS ====== */

/* Container & typography */
@media (max-width:640px){
  .container{ padding:0 16px; }
  .section{ padding:32px 0; }
  .section h2{ font-size:22px; margin:0 0 8px; }
  .section .sub{ font-size:14px; }
  .card .p{ padding:14px; }
}

/* Navbar: lebih ringkas & bisa geser horizontal */
@media (max-width:640px){
  .navbar-inner{ height:60px; gap:12px; }
  .brand{ font-size:14px; }
  nav ul{
    gap:6px; overflow-x:auto; white-space:nowrap; padding-bottom:4px;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  }
  nav a{ padding:8px 10px; font-size:14px; scroll-snap-align:start; }
}

/* Grids */
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){
  .grid-4,.grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
}
@media (max-width:420px){
  .grid-4,.grid-3{ grid-template-columns:1fr; }
}

/* Logo wall – rapat & seragam */
.logo{ aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; }
.logo img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:640px){ .logo-wall{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:420px){ .logo-wall{ grid-template-columns:repeat(2,1fr);} }

/* Tables – scroll horizontal di mobile */
.table-responsive{
  width:100%; overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:12px; background:#fff;
}
.table{ min-width:760px; border-collapse:separate; border-spacing:0; }
.table th,.table td{ padding:10px 12px; }
.table thead th{ position:sticky; top:0; z-index:1; }

/* Opsi: stack table jadi card di HP (pakai kalau mau) */
@media (max-width:560px){
  .table.stack-mobile{ min-width:0; border:0; }
  .table.stack-mobile thead{ display:none; }
  .table.stack-mobile tbody, .table.stack-mobile tr, .table.stack-mobile td{ display:block; width:100%; }
  .table.stack-mobile tr{ border:1px solid var(--border); border-radius:12px; margin-bottom:12px; background:#fff; }
  .table.stack-mobile td{ border:0; border-top:1px solid var(--border); padding:10px 12px; }
  .table.stack-mobile td:first-child{ border-top:0; }
  .table.stack-mobile td::before{
    content: attr(data-label); display:block; font-size:12px; color:var(--muted); margin-bottom:2px;
  }
  .table-portfolio .money{ text-align:left; }
}

/* Footer tetap rapi satu kolom */
@media (max-width:860px){ .footer .inner{ grid-template-columns:1fr; gap:12px; } }

/* Misc */
.nowrap{ white-space:nowrap; }
.break{ word-break:break-word; }