:root{--bg:#070b17;--bg2:#0b1020;--card:#11182b;--card2:#0e1527;--text:#f7f9ff;--muted:#aab4cf;--line:rgba(255,255,255,.1);--primary:#7c5cff;--primary2:#16d5ff;--success:#50e3a4;--shadow:0 30px 80px rgba(0,0,0,.35);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#060916 0%,#090e1d 48%,#070b17 100%);color:var(--text);line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}.section{padding:96px 0}.ambient{position:fixed;z-index:-1;border-radius:999px;filter:blur(90px);opacity:.18;pointer-events:none}.ambient-one{width:420px;height:420px;background:#7c5cff;top:90px;left:-120px}.ambient-two{width:400px;height:400px;background:#00d9ff;right:-130px;top:420px}.site-header{position:sticky;top:0;z-index:50;background:rgba(7,11,23,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;letter-spacing:-.02em}.brand strong{font-weight:800}.brand-mark{width:34px;height:34px;display:grid;place-items:center;color:#8d7cff}.brand-mark svg{width:100%;height:100%}.nav{display:flex;align-items:center;gap:28px}.nav>a:not(.btn){font-size:14px;color:#c3cbe0}.nav>a:not(.btn):hover{color:#fff}.menu-toggle{display:none;border:0;background:none;padding:8px}.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:13px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:.2s ease}.btn:hover{transform:translateY(-2px)}.btn-sm{min-height:40px;padding:0 16px}.btn-primary{background:linear-gradient(135deg,var(--primary),#5b8cff);box-shadow:0 10px 35px rgba(124,92,255,.25);color:#fff}.btn-secondary{background:rgba(255,255,255,.045);border-color:var(--line);color:#fff}.btn-block{width:100%}.hero{padding-top:82px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;color:#8f9cff;margin-bottom:18px}.hero h1,.section-head h2,.order-copy h2{margin:0;line-height:1.06;letter-spacing:-.045em}.hero h1{font-size:clamp(44px,6vw,76px);max-width:760px}.hero h1 span{background:linear-gradient(90deg,#a995ff,#55dfff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{max-width:680px;font-size:18px;color:var(--muted);margin:26px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.trust-row span{font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#c9d1e7;background:rgba(255,255,255,.025)}.gateway-card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);border-radius:32px;box-shadow:var(--shadow);padding:20px;min-height:515px;overflow:hidden}.gateway-card:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:#6b5cff;filter:blur(70px);opacity:.25;right:-40px;top:-50px}.status-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#0a1020;font-size:12px;color:#bfc8dc}.status-bar span:last-child{margin-left:auto;color:var(--success);font-weight:800}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(80,227,164,.12)}.gateway-core{position:relative;height:350px;display:grid;place-items:center}.core-ring{position:absolute;border:1px solid rgba(124,92,255,.35);border-radius:50%;animation:spin 18s linear infinite}.ring-1{width:220px;height:220px}.ring-2{width:300px;height:300px;border-style:dashed;animation-direction:reverse;animation-duration:28s}.core-logo{width:92px;height:92px;border-radius:26px;display:grid;place-items:center;font-size:28px;font-weight:900;background:linear-gradient(135deg,#765cff,#20d9f8);box-shadow:0 0 70px rgba(84,117,255,.35)}.node{position:absolute;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:10px;font-weight:800;background:#121a2d;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.3)}.n1{transform:translate(0,-150px)}.n2{transform:translate(132px,-75px)}.n3{transform:translate(132px,78px)}.n4{transform:translate(0,150px)}.n5{transform:translate(-132px,78px)}.n6{transform:translate(-132px,-75px)}@keyframes spin{to{transform:rotate(360deg)}}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-stats div{padding:13px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.03);text-align:center}.mini-stats strong{display:block;font-size:18px}.mini-stats span{font-size:11px;color:var(--muted)}.protocol-strip{border-block:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}.protocol-list{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px;overflow:auto;color:#7785a5;font-weight:800;font-size:12px;letter-spacing:.08em;white-space:nowrap}.section-head{max-width:700px;margin-bottom:42px}.section-head.centered{text-align:center;margin-inline:auto}.section-head h2,.order-copy h2{font-size:clamp(34px,4.5vw,54px)}.section-head p{color:var(--muted);font-size:17px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{padding:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border-radius:20px}.feature-card .icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.25);font-size:19px}.feature-card h3{margin:18px 0 8px;font-size:18px}.feature-card p{margin:0;color:var(--muted);font-size:14px}.products-section{background:linear-gradient(180deg,transparent,rgba(124,92,255,.04),transparent)}.tabs{width:max-content;margin:0 auto 34px;padding:5px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:15px}.tab{border:0;background:transparent;color:#8792ad;padding:11px 20px;border-radius:11px;font-weight:800;cursor:pointer}.tab.active{background:#fff;color:#101526}.pricing-panel{display:none}.pricing-panel.active{display:block}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.price-card{position:relative;padding:28px;border:1px solid var(--line);background:linear-gradient(180deg,#10172a,#0c1324);border-radius:24px;display:flex;flex-direction:column}.price-card.featured{border-color:rgba(124,92,255,.65);box-shadow:0 25px 70px rgba(92,76,215,.16);transform:translateY(-10px)}.popular{position:absolute;right:18px;top:18px;font-size:9px;letter-spacing:.12em;background:rgba(124,92,255,.14);color:#aa9fff;border:1px solid rgba(124,92,255,.25);padding:6px 8px;border-radius:999px;font-weight:900}.plan-badge{font-size:11px;letter-spacing:.12em;color:#8290b0;font-weight:900}.price-card h3{font-size:24px;margin:10px 0 5px}.muted{color:var(--muted)}.price-card>p{font-size:13px;min-height:66px}.price{font-size:36px;font-weight:900;letter-spacing:-.04em;margin:14px 0 20px}.price small{display:block;font-size:10px;letter-spacing:.1em;color:#8b97b4;margin-bottom:4px;text-transform:uppercase}.price span{font-size:15px;color:#9ca8c1}.price-card ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px;flex:1}.price-card li{position:relative;padding-left:22px;color:#c0c9de;font-size:13px}.price-card li:before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:900}.note{margin-top:24px;color:#8591ac;font-size:12px;text-align:center}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025)}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}th{font-size:12px;color:#7f8ca8;text-transform:uppercase;letter-spacing:.09em;background:rgba(255,255,255,.03)}tbody tr:last-child td{border-bottom:0}.yes{color:var(--success);font-weight:800}.extras-section{background:rgba(255,255,255,.015)}.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.extra{display:flex;justify-content:space-between;gap:20px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#0d1425}.extra span{color:#b9c2d7;font-size:13px}.extra strong{font-size:13px;text-align:right;white-space:nowrap}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{padding:24px;border-top:1px solid rgba(124,92,255,.45);background:linear-gradient(180deg,rgba(124,92,255,.06),transparent)}.step>span{font-size:12px;color:#8c7fff;font-weight:900}.step h3{margin:18px 0 7px}.step p{margin:0;color:var(--muted);font-size:13px}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.accordion details{border-bottom:1px solid var(--line);padding:17px 0}.accordion summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px}.accordion summary:after{content:"+";font-size:20px;color:#8c80ff}.accordion details[open] summary:after{content:"−"}.accordion p{color:var(--muted);font-size:14px;padding-right:30px}.order-section{padding-top:80px}.order-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;padding:50px;border:1px solid rgba(124,92,255,.28);border-radius:30px;background:radial-gradient(circle at 15% 20%,rgba(124,92,255,.14),transparent 35%),#0b1222}.order-copy p{color:var(--muted)}.contact-placeholder{margin-top:25px;padding:14px;border-radius:14px;border:1px solid var(--line);font-size:13px;color:#9fabca}.order-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.order-form label{display:grid;gap:7px;color:#aeb8cf;font-size:12px;font-weight:700}.order-form label:nth-child(3),.order-form label:nth-child(4){grid-column:1/-1}.order-form input,.order-form textarea,.order-form select{width:100%;border:1px solid var(--line);background:#080e1b;color:#fff;padding:13px 14px;border-radius:12px;outline:none}.order-form input:focus,.order-form textarea:focus,.order-form select:focus{border-color:#7163de;box-shadow:0 0 0 3px rgba(124,92,255,.1)}.form-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.form-result{grid-column:1/-1;color:#b8c3da;font-size:13px;white-space:pre-wrap}.footer{padding:72px 0 26px;border-top:1px solid rgba(255,255,255,.07);background:#050812}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-brand{margin-bottom:14px}.footer p{color:#7f8ba6;max-width:430px;font-size:13px}.footer h4{font-size:13px;margin:0 0 14px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:9px}.footer-grid a:not(.brand){font-size:13px;color:#8e99b2}.footer-bottom{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:25px;color:#67738f;font-size:11px}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px)}.modal-card{position:relative;z-index:1;width:min(480px,100%);padding:30px;border-radius:24px;background:#0f1728;border:1px solid var(--line);box-shadow:var(--shadow)}.modal-card h3{font-size:28px;margin:0 0 8px}.modal-card p{color:var(--muted)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:none;color:#8792ac;font-size:30px;cursor:pointer}.modal-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}
@media(max-width:980px){.menu-toggle{display:block}.nav{position:absolute;left:20px;right:20px;top:68px;padding:18px;display:none;flex-direction:column;align-items:stretch;background:#0c1323;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.nav.open{display:flex}.nav a{text-align:center}.hero-grid,.faq-grid,.order-grid{grid-template-columns:1fr}.gateway-card{max-width:620px}.feature-grid,.pricing-grid,.extras-grid{grid-template-columns:repeat(2,1fr)}.price-card.featured{transform:none}.process-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.order-grid{padding:36px}.faq-grid{gap:25px}}
@media(max-width:680px){.container{width:min(100% - 28px,1160px)}.section{padding:72px 0}.hero{padding-top:55px}.hero h1{font-size:43px}.lead{font-size:16px}.gateway-card{min-height:450px}.gateway-core{height:300px;transform:scale(.88)}.feature-grid,.pricing-grid,.extras-grid,.process-grid,.footer-grid{grid-template-columns:1fr}.footer-grid>div:last-child{grid-column:auto}.order-grid{padding:25px}.order-form{grid-template-columns:1fr}.order-form label{grid-column:1/-1}.footer-bottom{flex-direction:column}.price{font-size:32px}.extra{flex-direction:column;gap:6px}.extra strong{text-align:left}.trust-row{gap:7px}.protocol-list{justify-content:flex-start}.modal-actions .btn{width:100%}}

/* Midtrans checkout additions */
.payment-note,
.secure-payment,
.checkout-summary {
  border: 1px solid rgba(143, 156, 255, .18);
  background: rgba(143, 156, 255, .06);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--muted);
}
.payment-note { margin-top: 18px; }
.payment-note strong { color: var(--text); }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-summary { display: grid; gap: 4px; }
.checkout-summary strong { color: var(--text); font-size: 1rem; }
.checkout-summary span { color: #b8c0ff; font-weight: 800; }
.checkout-summary small { color: var(--muted); }
.secure-payment { font-size: .82rem; line-height: 1.55; }
.form-result.error { color: #ff9f9f; }
.form-result.success { color: #9ee8bf; }
.form-result a { color: #b8c0ff; }
.modal-hint { color: var(--muted); line-height: 1.65; margin-top: 8px; }
.btn:disabled { opacity: .62; cursor: wait; transform: none; }

.payment-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  position: relative;
  overflow: hidden;
}
.payment-shell { width: min(720px, 100%); position: relative; z-index: 2; }
.payment-brand { margin-bottom: 22px; display: inline-flex; }
.payment-status-card {
  border: 1px solid rgba(143, 156, 255, .2);
  background: rgba(13, 18, 36, .9);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  padding: clamp(24px, 5vw, 42px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}
.status-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 30px;
  margin-bottom: 20px;
  background: rgba(143, 156, 255, .1);
  border: 1px solid rgba(143, 156, 255, .2);
}
.payment-status-card h1 { margin: 0 0 10px; font-size: clamp(2rem, 7vw, 3.3rem); }
.payment-status-card > p { color: var(--muted); line-height: 1.7; }
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 24px 0;
}
.order-detail {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.order-detail span { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 6px; }
.order-detail strong { display: block; word-break: break-word; }
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  background: rgba(143,156,255,.12);
  color: #cbd1ff;
}
.status-pill.paid { background: rgba(74, 222, 128, .11); color: #9ee8bf; }
.status-pill.failed { background: rgba(248, 113, 113, .11); color: #ffb4b4; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.status-message { min-height: 24px; color: var(--muted); margin-top: 16px; font-size: .9rem; }

@media (max-width: 680px) {
  .form-two-col, .order-detail-grid { grid-template-columns: 1fr; }
  .payment-actions .btn { width: 100%; }
}


/* Add-on checkout */
.addon-fieldset{grid-column:1/-1;margin:0;padding:16px;border:1px solid rgba(143,156,255,.2);border-radius:16px;background:rgba(143,156,255,.035)}
.addon-fieldset[hidden]{display:none}.addon-fieldset legend{padding:0 8px;color:var(--text);font-size:.88rem;font-weight:900}.addon-fieldset legend span{color:var(--muted);font-weight:600;font-size:.76rem}.addon-help{margin:0 0 12px;color:var(--muted);font-size:.78rem}
.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.addon-option{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:6px 12px!important;padding:12px!important;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#080e1b;cursor:pointer;transition:.18s ease}.addon-option:hover{border-color:rgba(143,156,255,.35)}.addon-option.selected{border-color:rgba(80,227,164,.38);background:rgba(80,227,164,.045)}
.addon-check{display:flex;align-items:flex-start;gap:9px;color:#d4dbec;font-size:.78rem;line-height:1.35}.addon-check input{width:auto!important;margin:2px 0 0;accent-color:var(--primary)}.addon-price{color:#aeb8ff;font-size:.74rem;font-weight:800;text-align:right}.addon-qty{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--muted);font-size:.72rem}.addon-qty input{width:76px!important;padding:7px 9px!important}.addon-qty input:disabled{opacity:.45}.checkout-breakdown{display:grid;gap:5px;margin-top:5px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08)}.checkout-line{display:flex;justify-content:space-between;gap:16px;font-size:.8rem;color:var(--muted)}.checkout-line.total{font-size:.95rem;color:var(--text);font-weight:900}.checkout-line.total strong{color:#b8c0ff}
.payment-addons{grid-column:1/-1}.payment-addons-list{margin:5px 0 0;padding-left:18px;color:#d0d8eb;font-size:.82rem}.payment-addons-list li+li{margin-top:3px}
@media(max-width:680px){.addon-grid{grid-template-columns:1fr}.addon-option{grid-template-columns:1fr}.addon-price{text-align:left;padding-left:27px}.addon-qty{justify-content:flex-start;padding-left:27px}}


/* Refined order / checkout */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.order-section{position:relative;padding-top:92px;background:radial-gradient(circle at 80% 12%,rgba(124,92,255,.09),transparent 28%),radial-gradient(circle at 8% 82%,rgba(46,213,176,.05),transparent 24%)}
.checkout-container{max-width:1180px}.order-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:42px;align-items:end;margin-bottom:30px}.order-hero-copy h2{max-width:760px;margin:10px 0 14px;font-size:clamp(34px,4.8vw,56px);line-height:1.03;letter-spacing:-.045em}.order-hero-copy p{max-width:760px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.checkout-assurance{display:grid;gap:9px}.checkout-assurance>div{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid rgba(143,156,255,.14);border-radius:14px;background:rgba(10,16,30,.7)}.assurance-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px;border-radius:8px;background:rgba(80,227,164,.09);color:#69eab3;font-size:11px;font-weight:900}.checkout-assurance strong{display:block;color:#dce3f4;font-size:11px;line-height:1.35}.checkout-assurance small{display:block;margin-top:2px;color:#7e8aa4;font-size:9.5px;line-height:1.45}
.checkout-form{display:grid!important;grid-template-columns:minmax(0,1.52fr) minmax(330px,.72fr)!important;gap:22px!important;align-items:start!important;padding:20px!important;border:1px solid rgba(143,156,255,.15);border-radius:28px;background:linear-gradient(145deg,rgba(14,22,39,.96),rgba(7,12,23,.97));box-shadow:0 30px 85px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.02)}
.checkout-main{display:grid;gap:14px;min-width:0}.checkout-progress{display:flex;align-items:center;gap:9px;padding:4px 2px 8px}.progress-item{display:flex;align-items:center;gap:7px;color:#65718d;font-size:9px;text-transform:uppercase;letter-spacing:.075em;white-space:nowrap}.progress-item span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(255,255,255,.08);font-size:9px;font-weight:900;transition:.18s}.progress-item.active{color:#dbe1f3}.progress-item.active span{border-color:rgba(143,156,255,.34);background:rgba(124,92,255,.13);color:#ccd1ff}.progress-item.complete span{border-color:rgba(80,227,164,.3);background:rgba(80,227,164,.09);color:#72e8b7}.progress-line{height:1px;flex:1;min-width:16px;background:rgba(255,255,255,.065)}
.form-block{display:grid;gap:17px;padding:20px;border:1px solid rgba(255,255,255,.065);border-radius:18px;background:rgba(255,255,255,.018)}.compact-block{padding-bottom:18px}.form-block-head{display:flex;gap:11px;align-items:flex-start;position:relative}.form-block-icon{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(124,92,255,.11);border:1px solid rgba(143,156,255,.19);color:#bfc6ff;font-size:9px;font-weight:900}.form-block-head>div{min-width:0;flex:1}.form-block-head h3{margin:1px 0 3px;font-size:14px;line-height:1.3}.form-block-head p{margin:0;color:#7e8aa3;font-size:10.5px;line-height:1.55}.required-note,.addon-count-badge{margin-left:auto;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);color:#79849c;font-size:8.5px;font-weight:800;white-space:nowrap}.addon-count-badge{color:#aeb7cb}.field-grid{display:grid;gap:12px}.field-grid.two{grid-template-columns:1fr 1fr}.select-label{display:grid;gap:7px}.checkout-form label{display:grid;gap:7px;color:#aeb8cf;font-size:10.5px;font-weight:800}.checkout-form label>span:first-child:not(.addon-check):not(.addon-price):not(.addon-qty){line-height:1.2}.checkout-form label em{color:#8d7cff;font-style:normal}.checkout-form input,.checkout-form textarea,.checkout-form select{width:100%;border:1px solid rgba(255,255,255,.085);background:#070c17;color:#f5f7ff;padding:12px 13px;border-radius:11px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.checkout-form input::placeholder,.checkout-form textarea::placeholder{color:#566078}.checkout-form input:hover,.checkout-form textarea:hover,.checkout-form select:hover{border-color:rgba(143,156,255,.23)}.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{border-color:#7568df;box-shadow:0 0 0 3px rgba(124,92,255,.09);background:#09101e}.checkout-form select{min-height:45px}.checkout-form textarea{resize:vertical;min-height:100px}.message-label{position:relative}.field-helper{justify-self:end;color:#59647b!important;font-size:8.5px!important;font-weight:600!important}.package-hint{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border-radius:11px;background:rgba(124,92,255,.045);border:1px solid rgba(124,92,255,.07);color:#8792aa;font-size:10px;line-height:1.5}.package-hint strong{color:#adb5c9}.hint-dot,.live-dot{width:6px;height:6px;flex:0 0 6px;margin-top:5px;border-radius:50%;background:#50e3a4;box-shadow:0 0 0 3px rgba(80,227,164,.07)}
.addon-fieldset.form-block{margin:0!important;padding:20px!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:18px!important;background:rgba(255,255,255,.018)!important}.addon-groups{display:grid;gap:14px}.addon-group{display:grid;gap:9px;padding-top:2px}.addon-group+.addon-group{padding-top:15px;border-top:1px solid rgba(255,255,255,.055)}.addon-group-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:0 2px}.addon-group-title strong{color:#cbd3e6;font-size:10.5px}.addon-group-title small{color:#5f6a80;font-size:8.5px}.addon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.addon-option{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 10px!important;min-height:66px;padding:12px!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:12px!important;background:#080e1a!important;cursor:pointer;overflow:hidden;transition:border-color .18s ease,background .18s ease,transform .18s ease}.addon-option:hover{border-color:rgba(143,156,255,.25)!important;background:#0a1120!important}.addon-option.selected{border-color:rgba(80,227,164,.33)!important;background:rgba(80,227,164,.035)!important}.addon-check{position:relative;display:flex!important;align-items:flex-start;gap:8px!important;color:#d4dbec;font-size:10.5px!important;line-height:1.35}.addon-check input{position:absolute;opacity:0;pointer-events:none}.check-ui{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.02);color:transparent;font-size:9px;transition:.18s}.addon-option.selected .check-ui{background:#50e3a4;border-color:#50e3a4;color:#07140e}.addon-price{color:#aeb8ff;font-size:9.5px!important;font-weight:900;text-align:right;white-space:nowrap}.addon-qty{grid-column:1/-1;display:flex!important;align-items:center;justify-content:flex-end;gap:8px!important;margin-top:2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);color:#68748b!important;font-size:9px!important}.addon-qty input{width:68px!important;padding:6px 8px!important;border-radius:8px!important;text-align:center}.addon-qty input:disabled{opacity:.38}.addon-note{grid-column:1/-1;color:#8f83d4!important;font-size:8.5px!important;line-height:1.4}.premium-addon{background:linear-gradient(145deg,rgba(124,92,255,.08),#080e1a)!important}
.checkout-side{position:sticky;top:94px;min-width:0}.checkout-side-card{padding:18px;border:1px solid rgba(143,156,255,.16);border-radius:20px;background:rgba(7,12,23,.93);box-shadow:0 24px 62px rgba(0,0,0,.23);backdrop-filter:blur(14px)}.checkout-side-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:1px 1px 13px}.checkout-side-head>div{display:grid;gap:1px}.summary-kicker{color:#6f7b92;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.checkout-side-head strong{color:#e3e8f6;font-size:14px}.checkout-mode-badge{padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);color:#7f8aa1;font-size:8px;font-weight:900;white-space:nowrap}.checkout-mode-badge.pay{border-color:rgba(80,227,164,.14);background:rgba(80,227,164,.055);color:#79ddb0}.checkout-mode-badge.quote{border-color:rgba(143,156,255,.15);background:rgba(124,92,255,.06);color:#aaa7ef}.checkout-summary{padding:16px!important;border:1px solid rgba(143,156,255,.09);border-radius:14px!important;background:linear-gradient(145deg,rgba(124,92,255,.07),rgba(143,156,255,.025))!important}.summary-empty{display:grid;place-items:center;text-align:center;padding:12px 6px}.summary-empty>span{width:34px;height:34px;display:grid;place-items:center;margin-bottom:8px;border-radius:10px;background:rgba(124,92,255,.08);color:#8178d8}.summary-empty strong{font-size:11px;color:#bfc7da}.summary-empty small{max-width:220px;margin-top:3px;color:#667187;font-size:9px;line-height:1.45}.checkout-summary>.summary-product{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}.summary-product strong{font-size:15px;color:#f1f4fb;line-height:1.3}.summary-product span{font-size:11px;color:#aeb8ff;font-weight:900}.summary-product small{color:#6e7a92;font-size:8.5px}.checkout-breakdown{display:grid!important;gap:8px!important;margin-top:12px!important;padding-top:0!important;border-top:0!important}.checkout-line{display:flex!important;align-items:flex-start;justify-content:space-between;gap:14px;font-size:9.5px!important;color:#8792aa!important;line-height:1.35}.checkout-line span{min-width:0}.checkout-line strong{flex:0 0 auto;color:#cbd3e5;font-size:9.5px}.checkout-line.total{margin-top:3px;padding-top:11px;border-top:1px dashed rgba(255,255,255,.1);font-size:11px!important;color:#e5eaf7!important;font-weight:900}.checkout-line.total strong{color:#aeb8ff;font-size:13px}.secure-payment{display:flex;gap:10px;margin-top:11px;padding:11px 12px!important;border:1px solid rgba(80,227,164,.105)!important;border-radius:12px!important;background:rgba(80,227,164,.026)!important}.secure-icon{width:27px;height:27px;display:grid;place-items:center;flex:0 0 27px;border-radius:8px;background:rgba(80,227,164,.08);color:#67e4ae;font-size:10px;font-weight:900}.secure-payment strong{display:block;color:#cdebdc;font-size:9.5px;margin-bottom:2px}.secure-payment small{display:block;color:#71867d;font-size:8.5px;line-height:1.45}.stacked-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:12px}.stacked-actions .btn{justify-content:center;min-height:46px;border-radius:11px;font-size:11px}.checkout-copy{min-height:40px!important;background:transparent!important}.checkout-fineprint{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding:0 2px;color:#5f6a80;font-size:8px;line-height:1.45}.checkout-fineprint>span{width:16px;height:16px;display:grid;place-items:center;flex:0 0 16px;border-radius:50%;border:1px solid rgba(255,255,255,.08);font-size:8px}.checkout-fineprint p{margin:0}.checkout-side .form-result{margin-top:9px;white-space:pre-wrap;font-size:9.5px}.checkout-side .form-result:empty{display:none}
@media(max-width:1040px){.order-hero{grid-template-columns:1fr;gap:20px}.checkout-assurance{grid-template-columns:1fr 1fr}.checkout-form{grid-template-columns:1fr!important}.checkout-side{position:static}.checkout-side-card{max-width:none}.checkout-summary{padding:17px!important}}
@media(max-width:760px){.order-section{padding-top:72px}.order-hero-copy h2{font-size:clamp(32px,10vw,44px)}.checkout-assurance{grid-template-columns:1fr}.checkout-form{padding:11px!important;border-radius:21px}.checkout-progress{padding:3px 4px 6px;gap:5px}.progress-item b{display:none}.progress-item span{width:24px;height:24px}.progress-line{min-width:10px}.form-block,.addon-fieldset.form-block{padding:16px!important;border-radius:15px!important}.field-grid.two,.addon-grid{grid-template-columns:1fr}.form-block-head{gap:9px}.required-note,.addon-count-badge{font-size:8px}.addon-group-title{display:grid;gap:1px}.addon-option{grid-template-columns:minmax(0,1fr) auto!important}.addon-qty{justify-content:flex-start!important;padding-left:26px}.checkout-side-card{padding:15px;border-radius:17px}}
@media(max-width:480px){.container{width:min(100% - 24px,1160px)}.order-hero-copy p{font-size:13px}.checkout-form{margin-inline:-2px}.checkout-side-head{align-items:center}.checkout-mode-badge{font-size:7.5px}.addon-price{white-space:normal;text-align:right}.form-block-head p{font-size:10px}}

/* Uploaded Stella Lab logo */
.brand-mark{
  width:48px;
  height:38px;
  flex:0 0 48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
}
.brand-mark .brand-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.core-logo{
  width:112px;
  height:112px;
  padding:10px;
  border-radius:30px;
  overflow:hidden;
}
.core-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (max-width:640px){
  .brand-mark{
    width:43px;
    height:34px;
    flex-basis:43px;
  }
  .brand{
    gap:8px;
  }
  .core-logo{
    width:100px;
    height:100px;
  }
}

/* Logo sizing refinement - 2026-08-12 */
/* Header: compact square logo aligned with the 78px navigation bar. */
.site-header .brand-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
}
.site-header .brand-mark .brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
}
.site-header .brand{
  gap:9px;
}

/* Footer is intentionally text-only. */
.footer-brand-text{
  gap:0;
}

/* Gateway illustration: larger but still comfortably inside the inner ring. */
.gateway-core .core-logo{
  width:132px;
  height:132px;
  padding:9px;
  border-radius:32px;
}
.gateway-core .core-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Payment pages use a dedicated, slightly larger brand mark. */
.payment-brand .brand-mark{
  width:54px;
  height:54px;
  flex:0 0 54px;
}
.payment-brand{
  gap:11px;
  align-items:center;
}

@media (max-width:640px){
  .site-header .brand-mark{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .gateway-core .core-logo{
    width:112px;
    height:112px;
    padding:8px;
    border-radius:28px;
  }
  .payment-brand .brand-mark{
    width:46px;
    height:46px;
    flex-basis:46px;
  }
}

/* ==========================================================
   MATERIAL UI / MATERIAL DESIGN 3 THEME
   Stella Lab - 2026-08-12
   Visual-only override. Existing JS, checkout and Midtrans
   integration are intentionally preserved.
   ========================================================== */

:root{
  --mui-primary:#1565c0;
  --mui-primary-hover:#0d47a1;
  --mui-primary-container:#d6e4ff;
  --mui-on-primary:#ffffff;
  --mui-secondary:#ef6c00;
  --mui-secondary-container:#ffdcc2;
  --mui-tertiary:#2e7d32;
  --mui-success:#2e7d32;
  --mui-error:#ba1a1a;
  --mui-background:#f7f9fc;
  --mui-surface:#ffffff;
  --mui-surface-1:#f3f6fb;
  --mui-surface-2:#edf2f8;
  --mui-surface-3:#e7edf5;
  --mui-surface-variant:#e1e7ef;
  --mui-outline:#74777f;
  --mui-outline-variant:#c4c7cf;
  --mui-on-surface:#1a1c1e;
  --mui-on-surface-variant:#44474e;
  --mui-shadow-1:0 1px 2px rgba(22,29,37,.12),0 1px 3px rgba(22,29,37,.08);
  --mui-shadow-2:0 2px 6px rgba(22,29,37,.12),0 1px 2px rgba(22,29,37,.08);
  --mui-shadow-3:0 6px 18px rgba(22,29,37,.12),0 2px 6px rgba(22,29,37,.08);
  --mui-shadow-4:0 12px 32px rgba(22,29,37,.14),0 4px 10px rgba(22,29,37,.08);
  --mui-radius-sm:8px;
  --mui-radius-md:12px;
  --mui-radius-lg:16px;
  --mui-radius-xl:24px;
  --mui-radius-xxl:28px;

  /* map legacy variables to the Material theme */
  --bg:var(--mui-background);
  --bg2:var(--mui-surface-1);
  --card:var(--mui-surface);
  --card2:var(--mui-surface-1);
  --text:var(--mui-on-surface);
  --muted:var(--mui-on-surface-variant);
  --line:var(--mui-outline-variant);
  --primary:var(--mui-primary);
  --primary2:#42a5f5;
  --success:var(--mui-success);
  --shadow:var(--mui-shadow-4);
  --radius:var(--mui-radius-xl);
}

html{color-scheme:light;scroll-padding-top:82px}
body{
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 2% 8%,rgba(21,101,192,.08),transparent 28rem),
    radial-gradient(circle at 98% 25%,rgba(239,108,0,.06),transparent 27rem),
    var(--mui-background);
  color:var(--mui-on-surface);
  letter-spacing:.005em;
}

::selection{background:var(--mui-primary-container);color:#001b3d}
:focus-visible{outline:3px solid rgba(21,101,192,.25);outline-offset:3px}
.ambient{filter:blur(120px);opacity:.12;z-index:-1}
.ambient-one{background:#64b5f6}
.ambient-two{background:#ffb74d}
.section{padding:88px 0}

/* App Bar */
.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(196,199,207,.72);
  box-shadow:0 1px 0 rgba(26,28,30,.03);
  backdrop-filter:blur(18px) saturate(150%);
}
.nav-wrap{height:72px}
.brand{color:var(--mui-on-surface);font-size:20px;font-weight:500}
.brand strong{font-weight:800;color:#102a43}
.site-header .brand-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--mui-shadow-1);
}
.site-header .brand-mark .brand-logo{padding:2px}
.nav{gap:8px}
.nav>a:not(.btn){
  color:var(--mui-on-surface-variant);
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  transition:background .18s ease,color .18s ease;
}
.nav>a:not(.btn):hover{background:var(--mui-surface-2);color:var(--mui-primary)}
.menu-toggle{border-radius:50%;width:44px;height:44px;padding:10px}
.menu-toggle:hover{background:var(--mui-surface-2)}
.menu-toggle span{background:var(--mui-on-surface);width:22px;margin:4px auto;border-radius:99px}

/* Material buttons */
.btn{
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:none;
  transition:box-shadow .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
  position:relative;
  overflow:hidden;
}
.btn:hover{transform:none;box-shadow:var(--mui-shadow-2)}
.btn:active{transform:scale(.985)}
.btn-sm{min-height:40px;padding-inline:18px}
.btn-primary{
  background:var(--mui-primary);
  color:var(--mui-on-primary);
  border-color:var(--mui-primary);
  box-shadow:var(--mui-shadow-1);
}
.btn-primary:hover{background:var(--mui-primary-hover);border-color:var(--mui-primary-hover)}
.btn-secondary{
  background:transparent;
  color:var(--mui-primary);
  border-color:var(--mui-outline-variant);
}
.btn-secondary:hover{background:rgba(21,101,192,.07);border-color:var(--mui-primary)}
.btn:disabled{opacity:.52;box-shadow:none}

/* Typography */
.eyebrow{
  width:max-content;
  margin-bottom:14px;
  padding:6px 10px;
  border-radius:8px;
  background:var(--mui-primary-container);
  color:#00315f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.section-head.centered .eyebrow{margin-inline:auto}
.hero h1,.section-head h2,.order-copy h2,.order-hero-copy h2{
  color:#17202a;
  letter-spacing:-.035em;
}
.hero h1{font-size:clamp(44px,5.7vw,72px);font-weight:800;line-height:1.06}
.hero h1 span{
  background:none;
  color:var(--mui-primary);
  position:relative;
}
.hero h1 span:after{
  content:"";
  position:absolute;
  left:2%;right:2%;bottom:-5px;
  height:5px;
  border-radius:99px;
  background:var(--mui-secondary);
  opacity:.75;
}
.lead,.section-head p,.order-copy p{color:var(--mui-on-surface-variant)}
.hero{padding-top:72px}
.hero-grid{gap:64px}

/* Assist chips */
.trust-row{gap:8px}
.trust-row span,.protocol-list span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid var(--mui-outline-variant);
  border-radius:8px;
  background:var(--mui-surface);
  color:var(--mui-on-surface-variant);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:none;
}
.protocol-strip{border-block:1px solid var(--mui-outline-variant);background:var(--mui-surface-1)}
.protocol-list{min-height:78px;gap:10px;justify-content:center;color:inherit;font-weight:inherit;letter-spacing:0}

/* Gateway Material card */
.gateway-card{
  min-height:505px;
  padding:20px;
  border:1px solid var(--mui-outline-variant);
  border-radius:var(--mui-radius-xxl);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-4);
}
.gateway-card:before{
  width:240px;height:240px;
  background:#90caf9;
  filter:blur(90px);
  opacity:.22;
}
.status-bar{
  min-height:46px;
  padding:0 15px;
  background:var(--mui-surface-1);
  border:1px solid var(--mui-outline-variant);
  border-radius:12px;
  color:var(--mui-on-surface-variant);
  font-weight:600;
}
.status-bar span:last-child{color:var(--mui-success)}
.status-dot{background:#2e7d32;box-shadow:0 0 0 5px rgba(46,125,50,.10)}
.core-ring{border-color:rgba(21,101,192,.35)}
.ring-2{border-color:rgba(239,108,0,.34)}
.gateway-core .core-logo{
  width:132px;
  height:132px;
  padding:10px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--mui-outline-variant);
  box-shadow:var(--mui-shadow-3),0 0 0 10px rgba(21,101,192,.055);
}
.node{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--mui-surface);
  border:1px solid var(--mui-outline-variant);
  color:var(--mui-primary);
  box-shadow:var(--mui-shadow-2);
  font-size:10px;
  letter-spacing:.03em;
}
.mini-stats{gap:10px}
.mini-stats div{
  padding:13px;
  border:0;
  border-radius:14px;
  background:var(--mui-surface-2);
}
.mini-stats strong{color:#17324d}
.mini-stats span{color:var(--mui-on-surface-variant)}

/* Cards */
.feature-grid{gap:18px}
.feature-card{
  padding:24px;
  border:1px solid var(--mui-outline-variant);
  border-radius:var(--mui-radius-lg);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-1);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--mui-shadow-3);border-color:#9eb9d7}
.feature-card .icon{
  width:44px;height:44px;
  border:0;
  border-radius:12px;
  background:var(--mui-primary-container);
  color:var(--mui-primary);
  font-weight:800;
}
.feature-card:nth-child(2n) .icon{background:var(--mui-secondary-container);color:#8a3d00}
.feature-card h3{color:#1d2935}
.feature-card p{color:var(--mui-on-surface-variant)}
.products-section{background:linear-gradient(180deg,transparent,var(--mui-surface-1),transparent)}

/* Material segmented buttons / tabs */
.tabs{
  padding:4px;
  border:1px solid var(--mui-outline-variant);
  border-radius:999px;
  background:var(--mui-surface-2);
  box-shadow:none;
}
.tab{
  min-height:40px;
  padding:0 20px;
  border-radius:999px;
  color:var(--mui-on-surface-variant);
  font-weight:700;
}
.tab:hover{background:rgba(21,101,192,.06)}
.tab.active{
  background:var(--mui-primary);
  color:#fff;
  box-shadow:var(--mui-shadow-1);
}

/* Pricing cards */
.pricing-grid{gap:18px}
.price-card{
  padding:26px;
  border:1px solid var(--mui-outline-variant);
  border-radius:var(--mui-radius-xl);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-1);
}
.price-card:hover{box-shadow:var(--mui-shadow-3)}
.price-card.featured{
  border:2px solid var(--mui-primary);
  background:linear-gradient(180deg,#f5f9ff,#fff 42%);
  box-shadow:var(--mui-shadow-4);
}
.popular{
  background:var(--mui-primary);
  color:#fff;
  border:0;
  border-radius:8px;
  letter-spacing:.08em;
  padding:6px 9px;
}
.plan-badge{color:var(--mui-primary);font-weight:800}
.price-card h3,.price{color:#16202a}
.price-card>p,.price span,.price small{color:var(--mui-on-surface-variant)}
.price-card li{color:#3d4650}
.price-card li:before{color:var(--mui-success)}
.note{color:var(--mui-on-surface-variant)}

/* Tables */
.table-wrap{
  border:1px solid var(--mui-outline-variant);
  border-radius:var(--mui-radius-lg);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-1);
}
th,td{border-bottom:1px solid #e0e4ea;color:#303840}
th{background:var(--mui-surface-2);color:#4f5964}
tbody tr:hover{background:#f7faff}
.yes{color:var(--mui-success)}

/* Extras and process */
.extras-section{background:var(--mui-surface-1)}
.extra{
  border:1px solid var(--mui-outline-variant);
  border-radius:14px;
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-1);
}
.extra span{color:var(--mui-on-surface-variant)}
.extra strong{color:#203040}
.process-grid{gap:14px}
.step{
  border:1px solid var(--mui-outline-variant);
  border-top:4px solid var(--mui-primary);
  border-radius:var(--mui-radius-lg);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-1);
}
.step:nth-child(even){border-top-color:var(--mui-secondary)}
.step>span{color:var(--mui-primary)}
.step h3{color:#1f2d3a}
.step p{color:var(--mui-on-surface-variant)}

/* FAQ */
.accordion details{
  margin-bottom:10px;
  padding:0;
  border:1px solid var(--mui-outline-variant);
  border-radius:var(--mui-radius-md);
  background:var(--mui-surface);
  overflow:hidden;
  box-shadow:var(--mui-shadow-1);
}
.accordion summary{padding:17px 18px;color:#27313b}
.accordion summary:hover{background:var(--mui-surface-1)}
.accordion summary:after{color:var(--mui-primary)}
.accordion p{margin:0;padding:0 18px 18px;color:var(--mui-on-surface-variant)}

/* Order / checkout */
.order-section{
  padding-top:88px;
  background:linear-gradient(180deg,var(--mui-surface-1),var(--mui-background));
}
.order-grid{
  padding:40px;
  border:1px solid var(--mui-outline-variant);
  border-radius:var(--mui-radius-xxl);
  background:var(--mui-surface);
  box-shadow:var(--mui-shadow-3);
}
.order-copy p{color:var(--mui-on-surface-variant)}
.contact-placeholder{
  border:1px solid var(--mui-outline-variant);
  border-radius:12px;
  background:var(--mui-surface-1);
  color:var(--mui-on-surface-variant);
}
.order-form label,.checkout-form label{color:#404750}
.order-form input,.order-form textarea,.order-form select,
.checkout-form input,.checkout-form textarea,.checkout-form select{
  border:1px solid var(--mui-outline);
  background:var(--mui-surface) !important;
  color:var(--mui-on-surface) !important;
  border-radius:8px;
  padding:13px 14px;
  box-shadow:none;
}
.order-form input::placeholder,.order-form textarea::placeholder,
.checkout-form input::placeholder,.checkout-form textarea::placeholder{color:#7a8088}
.order-form input:hover,.order-form textarea:hover,.order-form select:hover,
.checkout-form input:hover,.checkout-form textarea:hover,.checkout-form select:hover{border-color:#40464d}
.order-form input:focus,.order-form textarea:focus,.order-form select:focus,
.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{
  border:2px solid var(--mui-primary);
  box-shadow:0 0 0 1px var(--mui-primary);
  background:#fff !important;
}
.payment-note,.secure-payment,.checkout-summary{
  border:1px solid #b8c8dc !important;
  background:#f1f6fc !important;
  color:var(--mui-on-surface-variant) !important;
  border-radius:12px !important;
}
.payment-note strong,.checkout-summary strong{color:var(--mui-on-surface) !important}
.checkout-summary span,.form-result a{color:var(--mui-primary) !important}
.secure-payment{border-color:#b9d6bf !important;background:#edf7ee !important}
.form-result{color:var(--mui-on-surface-variant)}
.form-result.error{color:var(--mui-error)}
.form-result.success{color:var(--mui-success)}

/* Advanced checkout classes, if rendered by the current JS */
.checkout-form{
  border:1px solid var(--mui-outline-variant) !important;
  border-radius:var(--mui-radius-xl) !important;
  background:var(--mui-surface) !important;
  box-shadow:var(--mui-shadow-3) !important;
}
.checkout-assurance>div,.form-block,.addon-fieldset.form-block,.checkout-side-card{
  border:1px solid var(--mui-outline-variant) !important;
  background:var(--mui-surface) !important;
  box-shadow:var(--mui-shadow-1);
}
.checkout-assurance>div{border-radius:12px}
.assurance-icon,.form-block-icon{
  background:var(--mui-primary-container) !important;
  border-color:transparent !important;
  color:var(--mui-primary) !important;
}
.checkout-assurance strong,.form-block-head h3,.checkout-side-head strong,
.summary-product strong{color:var(--mui-on-surface) !important}
.checkout-assurance small,.form-block-head p,.summary-kicker,.checkout-mode-badge,
.summary-product small,.checkout-fineprint,.field-helper{color:var(--mui-on-surface-variant) !important}
.checkout-progress .progress-item{color:#68717b}
.checkout-progress .progress-item.active{color:var(--mui-primary)}
.checkout-progress .progress-item span{border-color:var(--mui-outline-variant);background:#fff}
.checkout-progress .progress-item.active span{border-color:var(--mui-primary);background:var(--mui-primary-container);color:var(--mui-primary)}
.checkout-progress .progress-item.complete span{border-color:#77a97d;background:#e9f5ea;color:var(--mui-success)}
.progress-line{background:var(--mui-outline-variant)}
.required-note,.addon-count-badge,.checkout-mode-badge{
  background:var(--mui-surface-2) !important;
  border-color:var(--mui-outline-variant) !important;
}
.package-hint{
  background:#f1f6fc;
  border-color:#cad9eb;
  color:var(--mui-on-surface-variant);
}
.package-hint strong{color:var(--mui-on-surface)}
.hint-dot,.live-dot{background:var(--mui-success);box-shadow:0 0 0 3px rgba(46,125,50,.12)}
.addon-group+.addon-group{border-color:#e0e4ea}
.addon-group-title strong{color:var(--mui-on-surface)}
.addon-group-title small{color:var(--mui-on-surface-variant)}
.addon-option{
  border:1px solid var(--mui-outline-variant) !important;
  background:var(--mui-surface) !important;
  border-radius:12px !important;
}
.addon-option:hover{border-color:#7aa5d2 !important;background:#f8fbff !important}
.addon-option.selected{border-color:var(--mui-primary) !important;background:#eef5ff !important}
.addon-check{color:var(--mui-on-surface) !important}
.addon-price{color:var(--mui-primary) !important}
.addon-qty{border-color:#e0e4ea !important;color:var(--mui-on-surface-variant) !important}
.check-ui{border-color:var(--mui-outline) !important;background:#fff !important}
.addon-option.selected .check-ui{background:var(--mui-primary) !important;border-color:var(--mui-primary) !important;color:#fff !important}
.addon-note{color:#6b4c2f !important}
.premium-addon{background:#fff9f3 !important}
.checkout-side-card{border-radius:var(--mui-radius-lg);box-shadow:var(--mui-shadow-3)}
.checkout-mode-badge.pay{background:#eaf6ec !important;color:var(--mui-success) !important;border-color:#bad4be !important}
.checkout-mode-badge.quote{background:#eef5ff !important;color:var(--mui-primary) !important;border-color:#c2d7ef !important}
.checkout-breakdown{border-color:#e0e4ea !important}
.checkout-line{color:var(--mui-on-surface-variant) !important}
.checkout-line strong{color:var(--mui-on-surface) !important}
.checkout-line.total{border-color:#cfd4dc !important;color:var(--mui-on-surface) !important}
.checkout-line.total strong{color:var(--mui-primary) !important}
.secure-icon{background:#dff2e2;color:var(--mui-success)}
.secure-payment strong{color:#1e5c27 !important}
.secure-payment small{color:#4e6c53 !important}
.checkout-fineprint>span{border-color:var(--mui-outline-variant)}

/* Footer */
.footer{
  padding:64px 0 24px;
  border-top:1px solid var(--mui-outline-variant);
  background:#eef3f9;
  color:var(--mui-on-surface);
}
.footer p{color:var(--mui-on-surface-variant)}
.footer h4{color:#243240}
.footer-grid a:not(.brand){color:#4b5865}
.footer-grid a:not(.brand):hover{color:var(--mui-primary)}
.footer-bottom{border-top:1px solid #cfd6df;color:#596570}
.footer-brand-text{color:#16283a}

/* Dialog */
.modal-backdrop{background:rgba(26,28,30,.42);backdrop-filter:blur(4px)}
.modal-card{
  border:0;
  border-radius:var(--mui-radius-xxl);
  background:var(--mui-surface);
  color:var(--mui-on-surface);
  box-shadow:0 20px 60px rgba(20,28,36,.26);
}
.modal-card h3{color:#182430}
.modal-card p,.modal-hint{color:var(--mui-on-surface-variant)}
.modal-close{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--mui-on-surface-variant);
  font-size:28px;
}
.modal-close:hover{background:var(--mui-surface-2)}

/* Payment result pages */
.payment-page{
  background:
    radial-gradient(circle at 10% 5%,rgba(21,101,192,.10),transparent 26rem),
    radial-gradient(circle at 90% 90%,rgba(239,108,0,.08),transparent 25rem),
    var(--mui-background);
}
.payment-shell{width:min(760px,100%)}
.payment-brand{
  margin-bottom:20px;
  color:var(--mui-on-surface);
  padding:6px 10px 6px 6px;
  border-radius:14px;
}
.payment-brand:hover{background:rgba(21,101,192,.06)}
.payment-brand .brand-mark{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:13px;
  background:#fff;
  box-shadow:var(--mui-shadow-1);
}
.payment-status-card{
  border:1px solid var(--mui-outline-variant);
  background:rgba(255,255,255,.96);
  border-radius:var(--mui-radius-xxl);
  box-shadow:var(--mui-shadow-4);
  color:var(--mui-on-surface);
}
.status-icon{
  width:64px;height:64px;
  border:0;
  border-radius:20px;
  background:var(--mui-primary-container);
  color:var(--mui-primary);
  box-shadow:none;
}
.payment-status-card h1{color:#172431;letter-spacing:-.03em}
.payment-status-card>p,.status-message{color:var(--mui-on-surface-variant)}
.order-detail{
  border:1px solid #e0e4ea;
  border-radius:12px;
  background:var(--mui-surface-1);
}
.order-detail span{color:#65707b}
.order-detail strong{color:#23313e}
.status-pill{background:var(--mui-primary-container);color:#00315f}
.status-pill.paid{background:#dff3e2;color:#1b5e20}
.status-pill.failed{background:#ffdad6;color:#93000a}
.payment-addons-list{color:#344350}

/* Motion & accessibility */
.reveal{transition-duration:.5s}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

@media(max-width:980px){
  .nav{
    top:66px;
    left:14px;right:14px;
    padding:10px;
    border:1px solid var(--mui-outline-variant);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--mui-shadow-4);
  }
  .nav>a:not(.btn){justify-content:center;color:var(--mui-on-surface-variant)}
  .hero-grid{gap:42px}
}
@media(max-width:680px){
  .section{padding:68px 0}
  .hero{padding-top:48px}
  .hero h1{font-size:clamp(40px,12vw,52px)}
  .gateway-card{min-height:455px;border-radius:22px;padding:14px}
  .gateway-core .core-logo{width:110px;height:110px;border-radius:24px}
  .order-grid{padding:22px;border-radius:22px}
  .payment-status-card{border-radius:22px;padding:24px 18px}
  .payment-brand .brand-mark{width:46px;height:46px;flex-basis:46px}
  .protocol-list{justify-content:flex-start}
  .tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .tab{padding-inline:12px}
}

/* MATERIAL UI V2 - unique filename bypasses stale CSS cache */
html,body{background:#f6f8fc!important;color:#1b1b1f!important}
body{font-family:Roboto,"Segoe UI",Arial,sans-serif!important}
.site-header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #dfe3eb!important;box-shadow:0 2px 10px rgba(27,31,36,.07)!important}
.nav-wrap{height:72px!important}.brand,.brand span,.brand strong{color:#1d2a35!important}
.nav>a:not(.btn){color:#46515c!important}.nav>a:not(.btn):hover{background:#eef4ff!important;color:#0b57d0!important}
.hero{background:linear-gradient(180deg,#f8fbff 0%,#f6f8fc 100%)!important}
.hero h1,.section-head h2,.order-copy h2,.order-hero-copy h2{color:#17212b!important}
.hero h1 span{color:#0b57d0!important;background:none!important;-webkit-text-fill-color:initial!important}
.lead,.muted,.section-head p,.feature-card p,.step p,.accordion p{color:#59636e!important}
.eyebrow{background:#dbe8ff!important;color:#063b75!important;border-radius:999px!important;padding:7px 12px!important}
.btn{border-radius:999px!important;min-height:46px!important;box-shadow:none!important}
.btn-primary{background:#0b57d0!important;border-color:#0b57d0!important;color:white!important;box-shadow:0 1px 3px rgba(11,87,208,.28)!important}
.btn-primary:hover{background:#0842a0!important;border-color:#0842a0!important}
.btn-secondary{background:#fff!important;color:#0b57d0!important;border-color:#aab4c1!important}.btn-secondary:hover{background:#eef4ff!important}
.gateway-card,.feature-card,.price-card,.table-wrap,.extra,.step,.checkout-side-card,.form-block,.addon-fieldset.form-block{background:#fff!important;border-color:#d9dee7!important;box-shadow:0 2px 8px rgba(25,33,45,.08)!important}
.gateway-card{border-radius:28px!important;box-shadow:0 10px 32px rgba(25,33,45,.12)!important}.status-bar{background:#f2f6fb!important;border-color:#d9dee7!important;color:#42505d!important}
.gateway-core .core-logo{background:#fff!important;border-color:#c8d0db!important;box-shadow:0 6px 20px rgba(25,33,45,.12),0 0 0 10px #edf4ff!important}
.node{background:#fff!important;border-color:#cbd3dd!important;color:#0b57d0!important;box-shadow:0 2px 8px rgba(25,33,45,.10)!important}
.mini-stats div{background:#eef4ff!important;border:0!important}.mini-stats strong{color:#17334f!important}.mini-stats span{color:#59636e!important}
.protocol-strip{background:#fff!important;border-color:#e0e4eb!important}.protocol-list span,.trust-row span{background:#fff!important;color:#4c5965!important;border-color:#cfd6df!important;border-radius:10px!important}
.feature-card{border-radius:18px!important}.feature-card:hover{box-shadow:0 8px 24px rgba(25,33,45,.12)!important;transform:translateY(-3px)!important}.feature-card .icon{background:#dbe8ff!important;color:#0b57d0!important;border:0!important;border-radius:12px!important}.feature-card:nth-child(even) .icon{background:#ffdcc2!important;color:#8a3d00!important}
.tabs{background:#eaf0f8!important;border-color:#cbd3dd!important;border-radius:999px!important}.tab{color:#475461!important}.tab.active{background:#0b57d0!important;color:#fff!important;box-shadow:0 1px 3px rgba(11,87,208,.24)!important}
.price-card{border-radius:24px!important}.price-card.featured{background:linear-gradient(180deg,#f1f6ff,#fff 48%)!important;border:2px solid #0b57d0!important;box-shadow:0 10px 30px rgba(11,87,208,.14)!important}.popular{background:#0b57d0!important;color:#fff!important;border:0!important}.plan-badge{color:#0b57d0!important}
.price-card h3,.price,.extra strong,.step h3{color:#1d2a35!important}.price-card li{color:#48545f!important}.price-card li:before,.yes{color:#1e8e3e!important}.products-section,.extras-section{background:#f0f4fa!important}
th{background:#edf2f8!important;color:#48545f!important}th,td{border-bottom-color:#e0e4eb!important;color:#2f3943!important}tbody tr:hover{background:#f7faff!important}.accordion details{border-bottom-color:#dde2e9!important}.accordion summary{color:#26323d!important}.accordion summary:after{color:#0b57d0!important}
.order-grid{background:#fff!important;border-color:#d9dee7!important;box-shadow:0 8px 28px rgba(25,33,45,.08)!important}input,textarea,select{background:#fff!important;color:#1f2933!important;border-color:#aeb8c4!important}input:focus,textarea:focus,select:focus{border-color:#0b57d0!important;box-shadow:0 0 0 3px rgba(11,87,208,.12)!important}
.footer{background:#16212b!important;color:#edf2f7!important}.footer p,.footer a,.footer-bottom{color:#b8c2cc!important}.footer h4{color:#fff!important}
.payment-shell,.payment-card{background:#f6f8fc!important;color:#1b1b1f!important}.payment-card{background:#fff!important;border-color:#d9dee7!important;box-shadow:0 10px 32px rgba(25,33,45,.12)!important}.payment-card h1,.payment-card h2,.payment-brand,.payment-brand strong{color:#1d2a35!important}
@media(max-width:760px){.site-header{background:#fff!important}.nav{background:#fff!important;border-color:#d9dee7!important;box-shadow:0 14px 34px rgba(25,33,45,.14)!important}}

/* ==========================================================
   MATERIAL UI DARK / MATERIAL DESIGN 3 DARK THEME
   Stella Lab - 2026-08-12
   Final dark state layer. This block intentionally comes last
   so legacy/light rules cannot override the dark palette.
   ========================================================== */
:root{
  --mui-primary:#a8c7fa;
  --mui-primary-hover:#c2dcff;
  --mui-primary-container:#27496b;
  --mui-on-primary:#063258;
  --mui-on-primary-container:#d5e3ff;
  --mui-secondary:#ffb77d;
  --mui-secondary-container:#713700;
  --mui-on-secondary:#4a2800;
  --mui-tertiary:#81c995;
  --mui-success:#81c995;
  --mui-error:#ffb4ab;
  --mui-background:#0f1115;
  --mui-surface:#14171c;
  --mui-surface-1:#181b20;
  --mui-surface-2:#1d2026;
  --mui-surface-3:#24272e;
  --mui-surface-4:#2a2e35;
  --mui-surface-variant:#2d3138;
  --mui-outline:#8e918f;
  --mui-outline-variant:#44474e;
  --mui-on-surface:#e3e2e6;
  --mui-on-surface-variant:#c4c7c5;
  --mui-shadow-1:0 1px 2px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.28);
  --mui-shadow-2:0 3px 8px rgba(0,0,0,.38),0 1px 3px rgba(0,0,0,.34);
  --mui-shadow-3:0 8px 24px rgba(0,0,0,.38),0 2px 7px rgba(0,0,0,.30);
  --mui-shadow-4:0 18px 48px rgba(0,0,0,.46),0 5px 15px rgba(0,0,0,.28);
  --bg:var(--mui-background);
  --bg2:var(--mui-surface-1);
  --card:var(--mui-surface);
  --card2:var(--mui-surface-2);
  --text:var(--mui-on-surface);
  --muted:var(--mui-on-surface-variant);
  --line:var(--mui-outline-variant);
  --primary:var(--mui-primary);
  --primary2:#78b5f8;
  --success:var(--mui-success);
  --shadow:var(--mui-shadow-4);
}
html{color-scheme:dark!important;background:var(--mui-background)!important}
html,body{background:var(--mui-background)!important;color:var(--mui-on-surface)!important}
body{
  font-family:Roboto,"Segoe UI",Arial,sans-serif!important;
  background:
    radial-gradient(circle at 4% 7%,rgba(83,146,215,.13),transparent 31rem),
    radial-gradient(circle at 96% 24%,rgba(255,145,70,.09),transparent 28rem),
    linear-gradient(180deg,#101318 0%,#0f1115 48%,#0d1014 100%)!important;
  color:var(--mui-on-surface)!important;
}
::selection{background:#405f82!important;color:#fff!important}
:focus-visible{outline:3px solid rgba(168,199,250,.30)!important;outline-offset:3px}
.ambient{opacity:.16!important;filter:blur(125px)!important}.ambient-one{background:#4f8fcf!important}.ambient-two{background:#e67b30!important}

/* Dark Material app bar */
.site-header{
  background:rgba(20,23,28,.92)!important;
  border-bottom:1px solid rgba(68,71,78,.86)!important;
  box-shadow:0 2px 14px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
}
.brand,.brand span,.brand strong,.site-header .brand,.site-header .brand strong{color:var(--mui-on-surface)!important}
.site-header .brand-mark{
  background:var(--mui-surface-2)!important;
  border:1px solid var(--mui-outline-variant)!important;
  box-shadow:var(--mui-shadow-1)!important;
}
.nav>a:not(.btn){color:var(--mui-on-surface-variant)!important}
.nav>a:not(.btn):hover{background:rgba(168,199,250,.10)!important;color:var(--mui-primary)!important}
.menu-toggle:hover{background:var(--mui-surface-3)!important}.menu-toggle span{background:var(--mui-on-surface)!important}

/* Material buttons in dark mode */
.btn{border-radius:999px!important;box-shadow:none!important}
.btn-primary{
  background:var(--mui-primary)!important;
  border-color:var(--mui-primary)!important;
  color:var(--mui-on-primary)!important;
  box-shadow:var(--mui-shadow-1)!important;
}
.btn-primary:hover{background:var(--mui-primary-hover)!important;border-color:var(--mui-primary-hover)!important;box-shadow:var(--mui-shadow-2)!important}
.btn-secondary{
  background:transparent!important;
  color:var(--mui-primary)!important;
  border-color:var(--mui-outline)!important;
}
.btn-secondary:hover{background:rgba(168,199,250,.09)!important;border-color:var(--mui-primary)!important}

/* Typography */
.hero{background:linear-gradient(180deg,rgba(36,39,46,.18),transparent 86%)!important}
.hero h1,.section-head h2,.order-copy h2,.order-hero-copy h2,.payment-status-card h1{color:var(--mui-on-surface)!important}
.hero h1 span{color:var(--mui-primary)!important;background:none!important;-webkit-text-fill-color:initial!important}
.hero h1 span:after{background:var(--mui-secondary)!important;opacity:.9!important}
.lead,.muted,.section-head p,.feature-card p,.step p,.accordion p,.order-copy p{color:var(--mui-on-surface-variant)!important}
.eyebrow{
  background:rgba(168,199,250,.13)!important;
  color:var(--mui-primary)!important;
  border:1px solid rgba(168,199,250,.18)!important;
  border-radius:999px!important;
}

/* Chips and protocol strip */
.protocol-strip{background:var(--mui-surface-1)!important;border-color:var(--mui-outline-variant)!important}
.protocol-list span,.trust-row span{
  background:var(--mui-surface-2)!important;
  color:var(--mui-on-surface-variant)!important;
  border-color:var(--mui-outline-variant)!important;
  box-shadow:none!important;
}
.protocol-list span:hover,.trust-row span:hover{background:var(--mui-surface-3)!important;border-color:#5e626a!important}

/* Gateway */
.gateway-card{
  background:linear-gradient(155deg,#1c2026,#15181d 58%,#12151a)!important;
  border-color:var(--mui-outline-variant)!important;
  box-shadow:var(--mui-shadow-4)!important;
}
.gateway-card:before{background:#477fc2!important;opacity:.23!important}
.status-bar{background:var(--mui-surface-2)!important;border-color:var(--mui-outline-variant)!important;color:var(--mui-on-surface-variant)!important}
.status-bar span:last-child{color:var(--mui-success)!important}
.status-dot{background:var(--mui-success)!important;box-shadow:0 0 0 5px rgba(129,201,149,.11)!important}
.core-ring{border-color:rgba(168,199,250,.38)!important}.ring-2{border-color:rgba(255,183,125,.34)!important}
.gateway-core .core-logo{
  background:var(--mui-surface-2)!important;
  border:1px solid #53575f!important;
  box-shadow:var(--mui-shadow-3),0 0 0 10px rgba(168,199,250,.055)!important;
}
.node{
  background:var(--mui-surface-2)!important;
  border-color:var(--mui-outline-variant)!important;
  color:var(--mui-primary)!important;
  box-shadow:var(--mui-shadow-2)!important;
}
.mini-stats div{background:var(--mui-surface-2)!important;border:1px solid rgba(68,71,78,.72)!important}
.mini-stats strong{color:var(--mui-on-surface)!important}.mini-stats span{color:var(--mui-on-surface-variant)!important}

/* Material surface cards */
.products-section{background:linear-gradient(180deg,transparent,rgba(29,32,38,.82),transparent)!important}
.extras-section{background:var(--mui-surface-1)!important}
.gateway-card,.feature-card,.price-card,.table-wrap,.extra,.step,.order-grid,.checkout-form,.checkout-side-card,.form-block,.addon-fieldset.form-block{
  border-color:var(--mui-outline-variant)!important;
}
.feature-card,.price-card,.table-wrap,.extra,.step{
  background:var(--mui-surface-1)!important;
  box-shadow:var(--mui-shadow-1)!important;
}
.feature-card:hover,.price-card:hover{background:var(--mui-surface-2)!important;box-shadow:var(--mui-shadow-3)!important;border-color:#5b6068!important}
.feature-card .icon{background:rgba(168,199,250,.14)!important;color:var(--mui-primary)!important;border:1px solid rgba(168,199,250,.12)!important}
.feature-card:nth-child(even) .icon{background:rgba(255,183,125,.14)!important;color:var(--mui-secondary)!important;border-color:rgba(255,183,125,.12)!important}
.feature-card h3,.price-card h3,.price,.extra strong,.step h3{color:var(--mui-on-surface)!important}

/* Tabs */
.tabs{background:var(--mui-surface-3)!important;border-color:var(--mui-outline-variant)!important}
.tab{color:var(--mui-on-surface-variant)!important}.tab:hover{background:rgba(168,199,250,.08)!important}
.tab.active{background:var(--mui-primary)!important;color:var(--mui-on-primary)!important;box-shadow:var(--mui-shadow-1)!important}

/* Pricing */
.price-card.featured{
  background:linear-gradient(180deg,rgba(39,73,107,.40),var(--mui-surface-1) 42%)!important;
  border:2px solid var(--mui-primary)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.34),0 0 0 1px rgba(168,199,250,.04)!important;
}
.popular{background:var(--mui-primary)!important;color:var(--mui-on-primary)!important}
.plan-badge{color:var(--mui-primary)!important}.price-card>p,.price span,.price small,.note{color:var(--mui-on-surface-variant)!important}.price-card li{color:#d5d8dc!important}.price-card li:before,.yes{color:var(--mui-success)!important}

/* Tables */
th{background:var(--mui-surface-3)!important;color:var(--mui-on-surface-variant)!important}
th,td{border-bottom-color:var(--mui-outline-variant)!important;color:var(--mui-on-surface)!important}
tbody tr:hover{background:rgba(168,199,250,.055)!important}

/* Extras / steps / FAQ */
.extra span,.step p{color:var(--mui-on-surface-variant)!important}
.step{border-top-color:var(--mui-primary)!important}.step:nth-child(even){border-top-color:var(--mui-secondary)!important}.step>span{color:var(--mui-primary)!important}
.accordion details{background:var(--mui-surface-1)!important;border-color:var(--mui-outline-variant)!important;box-shadow:var(--mui-shadow-1)!important}
.accordion summary{color:var(--mui-on-surface)!important}.accordion summary:hover{background:var(--mui-surface-2)!important}.accordion summary:after{color:var(--mui-primary)!important}

/* Order and checkout */
.order-section{background:linear-gradient(180deg,var(--mui-surface-1),var(--mui-background))!important}
.order-grid{
  background:linear-gradient(145deg,#181b20,#14171c)!important;
  border-color:var(--mui-outline-variant)!important;
  box-shadow:var(--mui-shadow-3)!important;
}
.contact-placeholder,.package-hint{
  background:var(--mui-surface-2)!important;
  border-color:var(--mui-outline-variant)!important;
  color:var(--mui-on-surface-variant)!important;
}
.order-form label,.checkout-form label{color:var(--mui-on-surface-variant)!important}
.order-form input,.order-form textarea,.order-form select,
.checkout-form input,.checkout-form textarea,.checkout-form select,
input,textarea,select{
  background:#111419!important;
  color:var(--mui-on-surface)!important;
  border-color:#666a72!important;
  color-scheme:dark!important;
}
select option{background:#171a1f!important;color:var(--mui-on-surface)!important}
.order-form input::placeholder,.order-form textarea::placeholder,.checkout-form input::placeholder,.checkout-form textarea::placeholder,input::placeholder,textarea::placeholder{color:#858990!important}
.order-form input:hover,.order-form textarea:hover,.order-form select:hover,.checkout-form input:hover,.checkout-form textarea:hover,.checkout-form select:hover{border-color:#a7a9ad!important}
.order-form input:focus,.order-form textarea:focus,.order-form select:focus,.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus,input:focus,textarea:focus,select:focus{
  background:#111419!important;
  border:2px solid var(--mui-primary)!important;
  box-shadow:0 0 0 2px rgba(168,199,250,.10)!important;
}
.checkout-form{
  background:linear-gradient(145deg,#181b20,#111419)!important;
  box-shadow:var(--mui-shadow-3)!important;
}
.checkout-assurance>div,.form-block,.addon-fieldset.form-block,.checkout-side-card{
  background:var(--mui-surface-1)!important;
  border-color:var(--mui-outline-variant)!important;
  box-shadow:var(--mui-shadow-1)!important;
}
.assurance-icon,.form-block-icon{background:rgba(168,199,250,.13)!important;border-color:rgba(168,199,250,.15)!important;color:var(--mui-primary)!important}
.checkout-assurance strong,.form-block-head h3,.checkout-side-head strong,.summary-product strong{color:var(--mui-on-surface)!important}
.checkout-assurance small,.form-block-head p,.summary-kicker,.checkout-mode-badge,.summary-product small,.checkout-fineprint,.field-helper{color:var(--mui-on-surface-variant)!important}
.checkout-progress .progress-item{color:#90949c!important}.checkout-progress .progress-item.active{color:var(--mui-primary)!important}
.checkout-progress .progress-item span{border-color:var(--mui-outline-variant)!important;background:var(--mui-surface-2)!important;color:var(--mui-on-surface-variant)!important}
.checkout-progress .progress-item.active span{border-color:var(--mui-primary)!important;background:rgba(168,199,250,.13)!important;color:var(--mui-primary)!important}
.checkout-progress .progress-item.complete span{border-color:#5e8d69!important;background:rgba(129,201,149,.11)!important;color:var(--mui-success)!important}.progress-line{background:var(--mui-outline-variant)!important}
.required-note,.addon-count-badge,.checkout-mode-badge{background:var(--mui-surface-3)!important;border-color:var(--mui-outline-variant)!important;color:var(--mui-on-surface-variant)!important}
.package-hint strong,.addon-group-title strong{color:var(--mui-on-surface)!important}.addon-group-title small{color:var(--mui-on-surface-variant)!important}
.addon-group+.addon-group{border-color:var(--mui-outline-variant)!important}
.addon-option{background:#15181d!important;border-color:var(--mui-outline-variant)!important}
.addon-option:hover{background:var(--mui-surface-2)!important;border-color:#66788a!important}
.addon-option.selected{background:rgba(168,199,250,.08)!important;border-color:var(--mui-primary)!important}
.addon-check{color:var(--mui-on-surface)!important}.addon-price{color:var(--mui-primary)!important}.addon-qty{border-color:var(--mui-outline-variant)!important;color:var(--mui-on-surface-variant)!important}
.check-ui{background:#111419!important;border-color:var(--mui-outline)!important}.addon-option.selected .check-ui{background:var(--mui-primary)!important;border-color:var(--mui-primary)!important;color:var(--mui-on-primary)!important}
.addon-note{color:#d3b18f!important}.premium-addon{background:linear-gradient(145deg,rgba(113,55,0,.18),#15181d)!important}
.checkout-summary,.payment-note{
  background:rgba(168,199,250,.07)!important;
  border-color:rgba(168,199,250,.20)!important;
  color:var(--mui-on-surface-variant)!important;
}
.checkout-summary strong,.payment-note strong{color:var(--mui-on-surface)!important}.checkout-summary span,.form-result a{color:var(--mui-primary)!important}
.summary-empty>span{background:rgba(168,199,250,.11)!important;color:var(--mui-primary)!important}.summary-empty strong{color:var(--mui-on-surface)!important}.summary-empty small{color:var(--mui-on-surface-variant)!important}
.checkout-summary>.summary-product,.checkout-breakdown,.checkout-line.total{border-color:var(--mui-outline-variant)!important}.summary-product span,.checkout-line.total strong{color:var(--mui-primary)!important}
.checkout-line{color:var(--mui-on-surface-variant)!important}.checkout-line strong,.checkout-line.total{color:var(--mui-on-surface)!important}
.secure-payment{background:rgba(129,201,149,.07)!important;border-color:rgba(129,201,149,.20)!important}.secure-icon{background:rgba(129,201,149,.12)!important;color:var(--mui-success)!important}.secure-payment strong{color:#b8e5c4!important}.secure-payment small{color:#9db9a5!important}.checkout-fineprint>span{border-color:var(--mui-outline-variant)!important}
.form-result{color:var(--mui-on-surface-variant)!important}.form-result.error{color:var(--mui-error)!important}.form-result.success{color:var(--mui-success)!important}

/* Footer remains text-only */
.footer{background:#0b0d11!important;border-top-color:var(--mui-outline-variant)!important;color:var(--mui-on-surface)!important}
.footer p,.footer a,.footer-grid a:not(.brand),.footer-bottom{color:#aeb2b8!important}.footer h4,.footer-brand-text,.footer-brand-text strong{color:var(--mui-on-surface)!important}.footer-grid a:not(.brand):hover{color:var(--mui-primary)!important}.footer-bottom{border-top-color:#30343a!important}

/* Dialog */
.modal-backdrop{background:rgba(0,0,0,.70)!important;backdrop-filter:blur(6px)!important}
.modal-card{background:var(--mui-surface-2)!important;border:1px solid var(--mui-outline-variant)!important;color:var(--mui-on-surface)!important;box-shadow:0 26px 80px rgba(0,0,0,.58)!important}
.modal-card h3{color:var(--mui-on-surface)!important}.modal-card p,.modal-hint{color:var(--mui-on-surface-variant)!important}.modal-close{color:var(--mui-on-surface-variant)!important}.modal-close:hover{background:var(--mui-surface-3)!important}

/* Payment success / pending */
.payment-page,.payment-shell{
  background:
    radial-gradient(circle at 12% 7%,rgba(83,146,215,.13),transparent 27rem),
    radial-gradient(circle at 88% 92%,rgba(230,123,48,.09),transparent 25rem),
    var(--mui-background)!important;
  color:var(--mui-on-surface)!important;
}
.payment-shell{background:transparent!important}
.payment-brand,.payment-brand span,.payment-brand strong{color:var(--mui-on-surface)!important}
.payment-brand:hover{background:rgba(168,199,250,.08)!important}
.payment-brand .brand-mark{background:var(--mui-surface-2)!important;border:1px solid var(--mui-outline-variant)!important;box-shadow:var(--mui-shadow-1)!important}
.payment-status-card,.payment-card{
  background:rgba(24,27,32,.97)!important;
  border:1px solid var(--mui-outline-variant)!important;
  color:var(--mui-on-surface)!important;
  box-shadow:var(--mui-shadow-4)!important;
}
.payment-status-card h1,.payment-card h1,.payment-card h2{color:var(--mui-on-surface)!important}
.payment-status-card>p,.status-message{color:var(--mui-on-surface-variant)!important}
.status-icon{background:rgba(168,199,250,.13)!important;color:var(--mui-primary)!important;border:1px solid rgba(168,199,250,.18)!important}
.order-detail{background:var(--mui-surface-2)!important;border-color:var(--mui-outline-variant)!important}.order-detail span{color:#aeb2b8!important}.order-detail strong{color:var(--mui-on-surface)!important}
.status-pill{background:rgba(168,199,250,.14)!important;color:var(--mui-primary)!important}.status-pill.paid{background:rgba(129,201,149,.13)!important;color:var(--mui-success)!important}.status-pill.failed{background:rgba(255,180,171,.12)!important;color:var(--mui-error)!important}.payment-addons-list{color:var(--mui-on-surface-variant)!important}

@media(max-width:980px){
  .nav{background:rgba(24,27,32,.99)!important;border-color:var(--mui-outline-variant)!important;box-shadow:var(--mui-shadow-4)!important}
  .nav>a:not(.btn){color:var(--mui-on-surface-variant)!important}
}
@media(max-width:760px){.site-header{background:rgba(20,23,28,.98)!important}}

/* Midtrans Sandbox demo indicator */
.sandbox-banner{position:relative;z-index:20;border-bottom:1px solid rgba(255,193,7,.24);background:rgba(255,193,7,.08);color:var(--text,#f5f7fb)}
.sandbox-banner .container{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding-top:7px;padding-bottom:7px;text-align:center;font-size:.78rem}
.sandbox-banner strong{color:#ffd76a;letter-spacing:.05em}
.sandbox-banner span{color:var(--muted,#aeb6c7)}
@media (max-width:640px){.sandbox-banner .container{flex-direction:column;gap:2px}.sandbox-banner span{font-size:.72rem}}