/* Mastra antagrid — #020202 dark, grid lines #1c1c1c */
* { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }
:root{
  --bg: #020202; --surface:#0f0f0f; --surface-hover:#1a1a1a; --border:#1c1c1c; --border2:#262626;
  --text:#f2f2f2; --muted:#939393; --muted2:#6b6b6b; --accent:#fff;
  --radius:12px; --radius-sm:8px;
}
html{ background:var(--bg); }
body{
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6; overflow-x:hidden;
}
/* antigrid */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 80px 80px; opacity:0.35; mask-image: radial-gradient(ellipse at 50% 0%, black 40%, transparent 80%);
}
.container{ max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* Nav — mastra header */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:500; background:var(--surface); border-bottom:1px solid var(--border); padding:0; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; min-height:56px; }
.nav-brand{ display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:600; letter-spacing:-0.02em; color:var(--text); }
.nav-brand i{ font-size:1.2rem; color:var(--text); }
.nav-links{ display:flex; gap:28px; }
.nav-links a{ color:var(--muted); text-decoration:none; font-size:0.875rem; font-weight:400; }
.nav-links a:hover{ color:var(--text); }
.cart-btn{ background:var(--surface-hover); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:999px; cursor:pointer; font-size:0.9rem; position:relative; }
.cart-badge{ position:absolute; top:-6px; right:-6px; background:var(--text); color:var(--bg); font-size:0.65rem; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mobile-menu{ display:none; background:none; border:none; color:var(--text); font-size:1.3rem; cursor:pointer; }

/* Hero — mastra build agents style */
.hero{ padding:120px 0 56px; border-bottom:1px solid var(--border); position:relative; }
.hero .container{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:32px; align-items:center; }
.hero-content h1{ font-size:52px; font-weight:560; letter-spacing:-0.04em; line-height:1.02; margin-bottom:16px; }
.gradient-text{ color:var(--text); }
.hero-content p{ font-size:0.98rem; color:var(--muted); max-width:480px; margin-bottom:24px; line-height:1.65; }
.hero-buttons{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ padding:10px 18px; border-radius:999px; text-decoration:none; font-weight:500; font-size:0.875rem; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:0.15s; }
.btn-primary{ background:var(--text); color:var(--bg); border-color:var(--text); }
.btn-primary:hover{ opacity:0.9; }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border2); }
.btn-secondary:hover{ background:var(--surface-hover); }

/* hero code panel — like mastra index.ts + Traces */
.hero-code{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.hero-code-tabs{ display:flex; gap:4px; padding:10px 12px; border-bottom:1px solid var(--border); font-size:0.7rem; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }
.hero-code pre{ margin:0; padding:16px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.8rem; line-height:1.6; color:#d9d9d9; overflow:auto; }
.hero-code .tok-k{ color:#8a8a8a; } .hero-code .tok-s{ color:#f2f2f2; } .hero-code .tok-c{ color:#555; }

/* Stats */
.stats{ padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-item{ text-align:left; padding:8px 0; border-left:1px solid var(--border); padding-left:16px; }
.stat-item:first-child{ border-left:none; padding-left:0; }
.stat-item h3{ font-size:1.6rem; font-weight:600; letter-spacing:-0.03em; margin-bottom:2px; }
.stat-item p{ color:var(--muted); font-size:0.8rem; }

/* Sections */
.section-header{ text-align:left; margin-bottom:32px; border-bottom:1px solid var(--border); padding-bottom:16px; }
.section-header h2{ font-size:1.6rem; font-weight:600; letter-spacing:-0.03em; margin-bottom:6px; }
.section-header p{ color:var(--muted); font-size:0.9rem; }
.packages{ padding:56px 0; }
.package-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.package-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; position:relative; }
.package-card:hover{ border-color:var(--border2); }
.package-card.popular{ border-color:#2a2a2a; }
.popular-badge{ position:absolute; top:14px; right:14px; background:var(--text); color:var(--bg); padding:3px 10px; border-radius:999px; font-size:0.65rem; font-weight:600; letter-spacing:0.04em; }
.package-icon{ width:40px; height:40px; background:var(--surface-hover); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.package-icon i{ font-size:1rem; color:var(--text); }
.package-card h3{ font-size:1rem; font-weight:600; margin-bottom:4px; letter-spacing:-0.02em; }
.package-card .description{ color:var(--muted); font-size:0.8rem; margin-bottom:14px; }
.package-price{ font-size:1rem; font-weight:500; margin-bottom:16px; color:var(--muted); }
.package-price .price-unit{ font-weight:400; }
.package-features{ list-style:none; margin-bottom:18px; }
.package-features li{ padding:6px 0; color:var(--muted); font-size:0.82rem; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(28,28,28,0.6); }
.package-features li:last-child{ border-bottom:none; }
.package-features li i{ color:var(--muted2); font-size:0.7rem; }
.package-card .btn{ width:100%; justify-content:center; }

/* Features — tabs-like mastra */
.features{ padding:56px 0; border-top:1px solid var(--border); }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
.feature-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; }
.feature-card i{ font-size:1.2rem; color:var(--text); margin-bottom:14px; display:block; }
.feature-card h3{ font-size:0.95rem; font-weight:600; margin-bottom:6px; }
.feature-card p{ color:var(--muted); font-size:0.82rem; line-height:1.6; }

/* Cart / Modals — dark */
.cart-overlay,.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:0.2s; z-index:600; }
.cart-overlay.active,.modal-overlay.active{ opacity:1; visibility:visible; }
.cart-sidebar{ position:fixed; top:0; right:0; width:380px; max-width:90vw; height:100vh; background:var(--surface); border-left:1px solid var(--border); transform:translateX(100%); transition:0.25s; z-index:610; display:flex; flex-direction:column; }
.cart-sidebar.active{ transform:translateX(0); }
.cart-header{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.close-cart,.close-modal{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.cart-items{ flex:1; overflow:auto; padding:12px; }
.cart-empty{ text-align:center; padding:40px 0; color:var(--muted); font-size:0.85rem; }
.cart-item{ display:flex; gap:12px; padding:12px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.cart-item-info h4{ font-size:0.85rem; }
.cart-item-info p{ font-size:0.75rem; color:var(--muted); }
.cart-item-remove{ margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; }
.cart-footer{ padding:16px; border-top:1px solid var(--border); }
.btn-checkout{ width:100%; justify-content:center; }
.modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.98); background:var(--surface); border:1px solid var(--border); border-radius:12px; width:560px; max-width:92vw; max-height:90vh; overflow:auto; opacity:0; visibility:hidden; transition:0.2s; z-index:620; }
.modal.active{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.modal-header{ padding:16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-body{ padding:16px; }
.modal-footer{ padding:16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.order-summary{ border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:12px; }
.order-item{ display:flex; justify-content:space-between; font-size:0.82rem; padding:6px 0; border-bottom:1px solid var(--border); }
.order-total{ display:flex; justify-content:space-between; font-weight:600; padding-top:8px; }
.durasi-box{ border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--surface); }
.payment-option{ display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.payment-option input{ accent-color:var(--text); }
.customer-info input{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface-hover); color:var(--text); margin-bottom:8px; font-size:0.85rem; }
.customer-info input::placeholder{ color:var(--muted); }
.contact{ padding:56px 0; border-top:1px solid var(--border); }
.contact-info{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.contact-item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; }
.contact-item i{ font-size:1.2rem; margin-bottom:8px; }
.footer{ padding:24px 0; border-top:1px solid var(--border); }
.footer-content{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.footer-bottom{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:0.75rem; text-align:center; }
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--text); color:var(--bg); padding:10px 14px; border-radius:999px; font-size:0.82rem; display:flex; align-items:center; gap:8px; opacity:0; transition:0.2s; z-index:700; }
.toast.active{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:#ff4d4d; color:#fff; }

@media(max-width:860px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-content h1{ font-size:38px; }
  .stats .container{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }
  .mobile-menu{ display:block; }
}