*{box-sizing:border-box} :root{--bg:#08090d;--panel:rgba(19,20,28,.82);--red:#ff243b;--red2:#a80e25;--white:#f7f7fb;--muted:#9b9eac;--line:rgba(255,255,255,.1)} html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif;min-height:100vh;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,rgba(255,25,54,.14),transparent 45%),linear-gradient(120deg,transparent 30%,rgba(255,255,255,.015),transparent 70%);z-index:-2}.ambient{position:fixed;width:280px;height:280px;border-radius:50%;filter:blur(100px);opacity:.15;pointer-events:none;z-index:-1}.ambient-one{background:#f10d2b;top:20%;left:-200px}.ambient-two{background:#6d1830;right:-200px;bottom:8%}[hidden]{display:none!important}.welcome-screen{min-height:100svh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,rgba(4,5,8,.55),rgba(4,5,8,.93)),url("banner.png") center/cover fixed}.welcome-card{width:min(100%,510px);text-align:center;padding:clamp(28px,6vw,52px) clamp(22px,5vw,44px);border:1px solid rgba(255,56,76,.35);border-radius:28px;background:rgba(8,9,14,.82);backdrop-filter:blur(18px);box-shadow:0 20px 80px #0009,0 0 50px #ff19331a;animation:rise .9s cubic-bezier(.2,.75,.2,1) both}.welcome-mark{width:104px;height:104px;margin:0 auto 22px;padding:4px;border-radius:50%;border:2px solid #ff3449;box-shadow:0 0 30px #ff20394d;overflow:hidden}.welcome-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:800;color:#ff5365;margin:0 0 10px}.welcome-card h1,.brand span,h2,h3{font-family:Orbitron,Inter,sans-serif}.welcome-card h1{font-size:clamp(25px,6vw,39px);letter-spacing:1px;margin:0 0 18px}.welcome-card h1 span{display:block;color:#ff3047;font-size:.72em;letter-spacing:5px;margin-top:8px}.welcome-copy{font-size:13px;line-height:1.9;color:#c4c5ce;max-width:390px;margin:0 auto 22px}.welcome-meta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:9px;letter-spacing:1px;color:#a7a8b3;margin-bottom:26px}.welcome-meta span:first-child{color:#fff}.welcome-meta i,.secure-label i,.status-pill i{display:inline-block;width:6px;height:6px;background:#4ee6a1;border-radius:50%;box-shadow:0 0 12px #4ee6a1;margin-right:5px}.primary-button{border:0;color:#fff;background:linear-gradient(110deg,#ff1736,#b20c26);padding:15px 24px;border-radius:12px;width:100%;font-weight:800;letter-spacing:1.2px;font-size:12px;cursor:pointer;box-shadow:0 10px 30px #ff17362e;transition:transform .25s,box-shadow .25s}.primary-button span{font-size:18px;margin-left:10px}.primary-button:hover{transform:translateY(-3px);box-shadow:0 14px 38px #ff17364d}.tiny-note{font-size:8px;letter-spacing:2px;color:#777985;margin:22px 0 0}.app-shell{max-width:1160px;margin:auto;padding:0 22px;animation:rise .8s ease both}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}.brand img{width:39px;height:39px;border-radius:50%;object-fit:cover;border:1px solid #ff3449}.brand span{font-size:12px;letter-spacing:1.5px}.brand b{color:#ff4055}.secure-label{font-size:9px;letter-spacing:1.5px;color:#a8aab5}.hero{margin-top:24px}.hero-banner{position:relative;height:clamp(180px,31vw,330px);overflow:hidden;border-radius:19px;border:1px solid #ff253b6b;background:#111;box-shadow:0 16px 50px #0008}.hero-banner>img{width:100%;height:100%;object-fit:cover;display:block;animation:bannerIn 1s ease both}.banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,#05050955,transparent 50%,#0505095c),linear-gradient(0deg,#0505098a,transparent 45%)}.banner-caption{position:absolute;left:22px;bottom:20px;display:flex;flex-direction:column;gap:7px;text-shadow:0 2px 12px #000}.banner-caption span{font-size:8px;letter-spacing:2px;color:#ff8995}.banner-caption strong{font-family:Orbitron,sans-serif;font-size:clamp(11px,2vw,18px);letter-spacing:1px}.clock-widget{position:absolute;right:17px;top:17px;width:82px;height:82px;border-radius:50%;border:1px solid #ff6678;background:#090a0dcc;backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 24px #ff20392d,inset 0 0 16px #ff203915}.clock-widget time{font-family:Orbitron,sans-serif;font-size:12px;font-weight:700}.clock-widget small{font-size:6px;letter-spacing:1px;color:#ff7a89;margin-top:5px}.clock-dot{width:5px;height:5px;background:#ff3047;border-radius:50%;box-shadow:0 0 9px #ff3047;position:absolute;top:9px}.marquee{overflow:hidden;margin-top:12px;padding:12px 0;border-block:1px solid #ff293b35;color:#c6c6cf;font-size:9px;letter-spacing:1.5px}.marquee-track{width:max-content;display:flex;align-items:center;gap:27px;animation:marquee 32s linear infinite}.marquee-track b{color:#ff334b}.intro-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:38px 0 20px}.intro-row h2{font-size:clamp(22px,4vw,32px);margin:0;letter-spacing:-.5px}.intro-row h2 span{color:#ff344c}.section-desc{font-size:12px;color:var(--muted);line-height:1.7;margin:10px 0 0;max-width:540px}.status-pill{flex-shrink:0;padding:9px 12px;border:1px solid #4ee6a135;border-radius:30px;color:#b6c9c0;font-size:8px;letter-spacing:1px}.payment-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.payment-card{position:relative;overflow:hidden;min-height:135px;padding:17px 13px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(26,27,36,.9),rgba(13,14,20,.9));text-align:left;color:#fff;cursor:pointer;transition:transform .28s,border-color .28s,box-shadow .28s;animation:rise .55s both}.payment-card::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--brand-color,#ff243b);filter:blur(55px);opacity:.12;right:-25px;bottom:-35px;transition:opacity .25s}.payment-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand-color,#ff243b),transparent 30%);box-shadow:0 12px 30px #0005}.payment-card:hover::after{opacity:.35}.payment-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.payment-logo{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--brand-color,#ff243b);color:#fff;font-size:13px;font-weight:800;letter-spacing:-.5px;box-shadow:0 7px 18px color-mix(in srgb,var(--brand-color,#ff243b),transparent 70%);overflow:hidden}.payment-logo img{width:100%;height:100%;object-fit:contain;padding:7px;background:#fff;border-radius:12px}.payment-arrow{color:#888b98;font-size:16px}.payment-name{font-weight:800;font-size:13px;display:block}.payment-caption{font-size:9px;color:#9295a2;display:block;margin-top:6px}.portfolio-panel{position:relative;display:flex;align-items:center;gap:17px;padding:22px;margin-top:32px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(110deg,#1c1016b8,#11121aeb)}.portfolio-icon{width:43px;height:43px;flex-shrink:0;display:grid;place-items:center;border-radius:13px;background:#ff23301c;color:#ff5265;font-size:24px}.portfolio-panel h3{font-size:15px;margin:0 0 8px}.portfolio-panel p:not(.eyebrow){font-size:11px;line-height:1.8;color:#a9abb6;margin:0;max-width:720px}.portfolio-tag{align-self:flex-start;margin-left:auto;border:1px solid #ff33453d;color:#ff6475;border-radius:7px;padding:6px 8px;font-size:8px;letter-spacing:1px;white-space:nowrap}footer{display:flex;justify-content:space-between;gap:15px;padding:25px 0 30px;margin-top:10px;color:#737683;font-size:8px;letter-spacing:1px}.sheet-backdrop{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:#0009;backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.sheet-backdrop.open{opacity:1;visibility:visible}.payment-sheet{position:relative;width:min(100%,560px);max-height:91svh;overflow-y:auto;padding:13px 25px 25px;background:linear-gradient(160deg,#191a23,#0b0c11 75%);border:1px solid #ff344638;border-bottom:0;border-radius:25px 25px 0 0;box-shadow:0 -20px 70px #0009;transform:translateY(100%);transition:transform .65s cubic-bezier(.16,1,.3,1)}.sheet-backdrop.open .payment-sheet{transform:translateY(0)}.sheet-handle{height:4px;width:42px;border-radius:9px;background:#5c5e68;margin:0 auto 21px}.close-button{position:absolute;top:15px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#ffffff08;color:#fff;font-size:24px;cursor:pointer}.sheet-icon{width:47px;height:47px;display:grid;place-items:center;border-radius:14px;background:#ff243b;color:#fff;font-weight:800;margin-bottom:17px;overflow:hidden}.sheet-icon img{width:100%;height:100%;object-fit:contain;background:#fff;padding:6px}.payment-sheet h2{font-size:22px;margin:0}.sheet-subtitle{font-size:11px;color:#9b9eaa;margin:8px 0 20px}.number-area,.qris-area{border:1px solid #ffffff12;border-radius:14px;background:#ffffff04;padding:15px}.number-label,.qris-id-label{font-size:9px;color:#8f93a1;letter-spacing:1.5px;margin:0 0 10px}.number-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.number-line strong{font-family:Orbitron,sans-serif;font-size:clamp(17px,4vw,23px);overflow-wrap:anywhere}.copy-button{border:1px solid #ff354b66;background:#ff26351a;color:#ff7180;border-radius:8px;padding:9px 11px;font-size:9px;font-weight:800;letter-spacing:.7px;cursor:pointer;white-space:nowrap;transition:background .2s}.copy-button:hover{background:#ff263538}.recipient-line{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ffffff14;margin-top:15px;padding-top:13px;font-size:10px}.recipient-line span{color:#888b98;letter-spacing:1px}.recipient-line strong{color:#fff}.qris-area{text-align:center}.qris-area>a{display:block}.qris-area img{display:block;width:min(100%,270px);max-height:270px;object-fit:contain;margin:0 auto 16px;border-radius:10px;background:#fff}.qris-id-label{margin-bottom:8px}.copy-row{display:flex;justify-content:center;align-items:center;gap:10px}.copy-row code{font-size:12px;color:#fff;letter-spacing:.5px}.sheet-divider{height:1px;background:linear-gradient(90deg,transparent,#ff34464d,transparent);margin:20px 0}.instructions h3{font-size:13px;margin:0 0 13px}.instructions ol{padding-left:20px;margin:0;color:#b9bbc5;font-size:11px;line-height:1.9}.instructions li{padding-left:4px;margin:4px 0}.instructions li::marker{color:#ff5265;font-weight:800}.safety-note{display:flex;gap:8px;align-items:flex-start;font-size:10px;line-height:1.7;color:#a6a8b2;padding:11px 12px;border-radius:9px;background:#ffb82d0b;margin:18px 0 0}.safety-note span{color:#ffc45a}.toast{position:fixed;z-index:50;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#242630;border:1px solid #ffffff20;color:#fff;padding:12px 17px;border-radius:10px;font-size:11px;box-shadow:0 10px 30px #0008;transition:all .25s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes bannerIn{from{transform:scale(1.04);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes marquee{to{transform:translateX(-50%)}}@media(max-width:900px){.payment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-card{min-height:125px}}@media(max-width:560px){.app-shell{padding:0 14px}.topbar{height:66px}.brand span{font-size:10px}.secure-label{font-size:7px}.hero{margin-top:16px}.hero-banner{height:205px;border-radius:14px}.clock-widget{width:70px;height:70px;right:10px;top:10px}.clock-widget time{font-size:10px}.banner-caption{left:13px;bottom:13px}.banner-caption span{font-size:7px}.intro-row{align-items:flex-start;flex-direction:column;margin-top:29px;gap:13px}.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payment-card{min-height:122px;padding:13px}.payment-top{margin-bottom:14px}.payment-logo{width:39px;height:39px}.portfolio-panel{padding:16px;align-items:flex-start;gap:12px}.portfolio-tag{display:none}.portfolio-panel h3{font-size:13px}.portfolio-panel p:not(.eyebrow){font-size:10px}footer{flex-direction:column;font-size:7px;line-height:1.6}.payment-sheet{padding-left:18px;padding-right:18px}.welcome-screen{background-attachment:scroll}.welcome-meta{gap:8px;font-size:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}