*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 72% 46%,#0b2435 0,#081927 49%,#061420 100%);color:#ebf5ff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.shell{max-width:1402px;margin:auto;padding:34px 54px 52px}.narrow{max-width:800px}.eyebrow{margin-top:69px;color:#a6c3da;font-size:clamp(12px,1.45vw,19px);letter-spacing:.13em;text-transform:uppercase}h1{font-size:clamp(50px,7.2vw,109px);line-height:1.08;letter-spacing:-.065em;margin:35px 0 29px;font-weight:830}h1 span{color:#66dce2}.lead{font-size:clamp(16px,1.6vw,23px);line-height:1.6;color:#c0d4e7;max-width:1050px;margin-bottom:0}p{color:#bed1e3;line-height:1.7}.panel{border:1px solid #286986;border-radius:29px;background:linear-gradient(115deg,rgba(15,46,66,.92),rgba(10,38,58,.92) 55%,rgba(13,47,68,.86));box-shadow:0 18px 46px #0003, inset 0 0 30px rgba(22,94,128,.06)}.feature-panel,.roadmap-panel{display:grid;grid-template-columns:139px minmax(0,1fr);align-items:center;padding:30px 38px;gap:36px}.feature-panel{margin-top:39px;min-height:218px}.roadmap-panel{margin-top:25px;min-height:214px}.feature-symbol{border-right:1px solid #34566a;height:148px;display:flex;align-items:center;justify-content:flex-start}.feature-symbol svg{width:100px;height:100px;padding:24px;border:1px solid #1b85a7;border-radius:21px;background:linear-gradient(135deg,#104461,#0e344b);stroke:#53dbe8;fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 8px #00ddff20)}.feature-body{min-width:0}.panel h2{font-size:24px;margin:0 0 13px;font-weight:760}.networks{font-size:21px;line-height:1.7;margin:0 0 10px}.panel small{color:#abc4d6;font-size:15px}.roadmap-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.roadmap-item{padding:10px 20px 0 20px;border-left:1px solid #31536c;color:#cbdaea;font-size:16px;line-height:1.4;min-height:105px}.roadmap-item:first-child{border-left:0;padding-left:0}.mini-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:#53e5ef;font-size:28px;line-height:1;margin-bottom:14px;text-shadow:0 0 12px #35cad6aa}footer{color:#9cbacf;font-size:15px;margin-top:29px}.checkout-title{font-size:clamp(48px,7vw,72px)}.amount{font-size:38px;font-weight:750}.tag{display:inline-block;border:1px solid #337e89;border-radius:20px;padding:7px 12px;color:#72d7dc;margin-top:12px}pre{overflow-wrap:anywhere;white-space:pre-wrap;background:#071824;padding:16px;border-radius:9px;color:#e6ffff}input{width:100%;padding:15px;border:1px solid #426477;border-radius:9px;background:#071824;color:white;font-size:16px}button{border:0;border-radius:9px;padding:13px 20px;margin:12px 10px 12px 0;background:#64d1d4;color:#05202b;font-weight:700;cursor:pointer}button:disabled{opacity:.55}small{line-height:1.6}.qr-wrapper{min-height:0}.qr-wrapper img{background:#fff;border-radius:12px;padding:12px;max-width:100%;height:auto}.subtle{font-size:13px;color:#9db9c9}[hidden]{display:none!important}@media(max-width:850px){.shell{padding:28px 25px 44px}.eyebrow{margin-top:48px}.feature-panel,.roadmap-panel{grid-template-columns:90px minmax(0,1fr);padding:22px;gap:22px}.feature-symbol{height:100%;min-height:105px}.feature-symbol svg{width:72px;height:72px;padding:16px}.roadmap-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.roadmap-item{min-height:auto}.roadmap-item:nth-child(odd){border-left:0;padding-left:0}}@media(max-width:520px){.eyebrow{margin-top:39px;letter-spacing:.075em}.feature-panel,.roadmap-panel{grid-template-columns:1fr}.feature-symbol{display:none}.panel{border-radius:20px}.panel h2{font-size:21px}.networks{font-size:18px}.roadmap-item{font-size:14px;padding:8px 9px}.mini-icon{margin-bottom:5px}.panel small{font-size:13px}}
/* 0.2.3 Brand: mark first, text left-to-right, one O impulse after reveal */
.brand{display:flex;align-items:center;min-height:94px}
.brand-link{display:inline-flex;align-items:center;gap:19px;text-decoration:none;color:inherit;max-width:100%}
.brand-icon-wrap{flex:none;width:86px;height:86px;display:grid;place-items:center;opacity:0;animation:markEnter .7s ease-out forwards}
.brand-icon{display:block;width:79px;height:79px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(93,227,239,.32));animation:markGlow 6s ease-in-out 2.7s infinite}
.brand-wordmark{display:flex;align-items:center;gap:.75em;flex-wrap:wrap;font-size:clamp(16px,2.1vw,30px);font-weight:800;line-height:1.16;white-space:normal}
.brand-company,.brand-service{display:inline-flex;align-items:center;white-space:nowrap}
.brand-company{color:#f1fbff;letter-spacing:.17em}
.brand-service{color:#64dfe8;letter-spacing:.115em;text-shadow:0 0 12px rgba(87,216,231,.16)}
.brand-letter{display:inline-block;opacity:0;transform:translateX(-7px);animation:letterEnter .31s ease-out forwards;animation-delay:calc(.67s + var(--letter-index)*.085s)}
.brand-space{display:inline-block;width:.35em}
.brand-o{transform-origin:center;animation:letterEnter .31s ease-out forwards, oImpulse .75s cubic-bezier(.15,.75,.3,1) 2.38s 1;animation-delay:1.095s,2.38s}
.brand-link:hover .brand-icon{filter:drop-shadow(0 0 14px rgba(93,227,239,.64))}
@keyframes markEnter{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes letterEnter{to{opacity:1;transform:translateX(0)}}
@keyframes oImpulse{0%,100%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.37);filter:brightness(1.7);text-shadow:0 0 16px #67e8f9}70%{transform:scale(.94)}}
@keyframes markGlow{0%,100%{filter:drop-shadow(0 0 7px rgba(93,227,239,.28))}50%{filter:drop-shadow(0 0 13px rgba(93,227,239,.60))}}
@media(max-width:850px){.brand-link{gap:15px}.brand-icon-wrap{width:70px;height:70px}.brand-icon{width:64px;height:64px}.brand-wordmark{font-size:clamp(15px,2.7vw,23px);gap:.5em}}
@media(max-width:520px){.brand{min-height:65px}.brand-link{gap:10px}.brand-icon-wrap{width:55px;height:55px}.brand-icon{width:52px;height:52px}.brand-wordmark{font-size:clamp(11px,3.1vw,15px);gap:.28em}.brand-company{letter-spacing:.075em}.brand-service{letter-spacing:.045em}}
@media(prefers-reduced-motion:reduce){.brand-icon-wrap,.brand-letter,.brand-o,.brand-icon{animation:none!important;opacity:1!important;transform:none!important}}

/* 0.3.0: logo geometry and tighter brand spacing */
.brand-link{gap:9px}
.brand-icon-wrap{width:90px;height:90px;overflow:visible}
.brand-icon{width:90px;height:90px;max-width:none;object-fit:fill}
@media(max-width:850px){.brand-link{gap:7px}.brand-icon-wrap{width:74px;height:74px}.brand-icon{width:74px;height:74px}}
@media(max-width:520px){.brand-link{gap:5px}.brand-icon-wrap{width:56px;height:56px}.brand-icon{width:56px;height:56px}}
/* v0.3.0: continuous SVG mark with clean joins and comfortable baseline alignment. */
.brand-link{align-items:center;gap:clamp(13px,1.6vw,22px)}
.brand-icon-wrap{display:grid;place-items:center;overflow:visible}
.brand-icon{object-fit:contain;object-position:center}
.brand-wordmark{align-self:center;line-height:1.06}
@media(min-width:851px) and (min-height:570px){
 .landing .brand-link{gap:clamp(13px,1.6vw,22px)}
 .landing .brand-icon-wrap{width:clamp(90px,10.5vw,146px);height:clamp(108px,12.3vw,168px)}
 .landing .brand-wordmark{font-size:clamp(26px,min(4.15vw,6vh),60px)}
}
@media(max-width:850px){.brand-link{gap:11px}}
@media(max-width:520px){.brand-link{gap:8px}}

/* v0.3.1: approved user-supplied PNG used unchanged as the logo. */
.brand-link{align-items:center;gap:clamp(14px,1.45vw,22px)}
.brand-icon-wrap{display:grid;place-items:center;aspect-ratio:800/1070;width:clamp(66px,8.5vw,112px);height:auto;flex:none;overflow:visible}
.brand-icon{display:block;width:100%;height:auto;object-fit:contain;object-position:center;filter:drop-shadow(0 0 9px rgba(85,232,236,.23))}
.brand-wordmark{align-items:center;align-self:center;line-height:1.05}
@media(min-width:851px) and (min-height:570px){
 .landing .brand{min-height:clamp(84px,15vh,148px)}
 .landing .brand-icon-wrap{width:clamp(68px,8.5vw,112px);height:auto}
 .landing .brand-icon{width:100%;height:auto}
 .landing .brand-wordmark{font-size:clamp(24px,min(3.5vw,5.6vh),57px)}
}
@media(max-width:850px){.brand-icon-wrap{width:clamp(56px,10vw,80px);height:auto}.brand-icon{width:100%;height:auto}}
@media(max-width:520px){.brand-icon-wrap{width:54px;height:auto}.brand-link{gap:9px}}

/* v0.3.2: Mobile wordmark balance; preserve original supplied artwork. */
@media (max-width: 520px) {
  .brand-link { align-items: center; gap: 10px; width: 100%; }
  .brand-icon-wrap { width: 43px; min-width: 43px; height: auto; aspect-ratio: 800 / 1070; flex: 0 0 43px; }
  .brand-icon { width: 100%; height: auto; display: block; object-fit: contain; }
  .brand-wordmark {
    font-size: clamp(13px, 4.05vw, 19px);
    font-weight: 800;
    line-height: 1.15;
    gap: .30em;
    min-width: 0;
  }
  .brand-company { letter-spacing: .065em; }
  .brand-service { letter-spacing: .035em; }
  .brand { min-height: 63px; }
  .landing .eyebrow { margin-top: 32px; }
}
@media (max-width: 365px) {
  .brand-icon-wrap { width: 37px; min-width: 37px; flex-basis: 37px; }
  .brand-link { gap: 7px; }
  .brand-wordmark { font-size: 12px; gap: .22em; }
}

/* v0.3.4: Comfortable checkout card spacing without changing the approved brand artwork. */
.checkout-shell { max-width: 880px; padding-bottom: 42px; }
.checkout-shell .eyebrow { margin-top: clamp(24px,4vh,52px); }
.checkout-shell .checkout-title { font-size: clamp(36px,6.2vw,66px); margin: 18px 0 26px; letter-spacing: -.045em; }
.checkout-panel { padding: clamp(22px,4.2vw,42px); border-radius: 24px; }
.checkout-panel #status { font-size: 16px; font-weight: 700; color: #85e3e7; margin: 0 0 18px; }
.checkout-panel #details { min-width:0; }
.checkout-panel .amount { font-size: clamp(30px,5vw,47px); letter-spacing:-.035em; line-height:1.15; overflow-wrap:anywhere; }
.checkout-panel .tag { margin: 13px 0 8px; }
.checkout-panel p { margin: 18px 0 11px; }
.checkout-panel .checkout-qr { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:18px 0; }
.checkout-panel .checkout-qr img { display:block; width:210px; height:210px; }
.checkout-panel #qr-note { margin:0; line-height:1.5; }
.checkout-address-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.checkout-address-row pre { flex:1 1 340px; min-width:0; margin:0; padding:16px 18px; border:1px solid #27546b; }
.checkout-address-row button { flex:none; margin:0; white-space:nowrap; }
.checkout-panel #tx { width:100%; margin:3px 0 8px; }
.checkout-panel #submit { margin:8px 0 14px; max-width:100%; }
.checkout-panel #message { min-height:1.6em; margin:4px 0 16px; }
.checkout-panel small { display:block; margin-top:16px; color:#acc6d7; }
@media(max-width:520px){
 .checkout-shell { padding:20px 16px 36px; }
 .checkout-panel { padding:20px 18px; border-radius:19px; }
 .checkout-panel .checkout-qr { align-items:center; }
 .checkout-panel .checkout-qr img { max-width:100%; }
 .checkout-address-row pre { flex-basis:100%; font-size:12px; }
 .checkout-address-row button { width:100%; }
 .checkout-panel #submit { width:100%; white-space:normal; }
}

/* v0.3.5: equal visual interword gaps: SHEREON / CRYPTO / PAY */
.brand-wordmark{gap:.35em}
.brand-space{width:.35em}
@media(max-width:850px){.brand-wordmark{gap:.3em}.brand-space{width:.3em}}
@media(max-width:520px){.brand-wordmark{gap:.22em}.brand-space{width:.22em}}
.paid-summary{padding:12px 0 6px;display:grid;justify-items:start;gap:12px}
.paid-summary[hidden]{display:none}
.paid-check{display:grid;place-items:center;border:2px solid #67dedf;border-radius:100%;width:62px;height:62px;color:#6ff3d9;font-size:34px;font-weight:700}
.tx-label{margin:8px 0 0;opacity:.75;font-size:13px}
.paid-tx{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-word;font-size:12px;color:#c8f7ff}
.explorer-link{color:#69dfe8;overflow-wrap:anywhere}

/* v0.3.6: optical equal spacing between SHEREON / CRYPTO / PAY */
.brand-wordmark{gap:.35em}
.brand-space{width:.35em}
@media(max-width:520px){.brand-wordmark{gap:.35em}.brand-space{width:.35em}}

/* v0.3.7: equal visual word separation; original logo.png remains untouched. */
.brand-wordmark { gap: .28em; }
.brand-space { width: .28em; }
@media(max-width:520px){.brand-wordmark{gap:.24em}.brand-space{width:.24em}}

.landing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.landing-steps article{background:#092436;border:1px solid #23546c;border-radius:13px;padding:17px}.landing-steps p{line-height:1.5;color:#b0cfda}.landing-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.landing-actions .buttonlink{background:#20aaba;color:#06212b;padding:12px 16px;border-radius:9px;font-weight:700;text-decoration:none}.landing-actions .secondary-action{background:#113c50;color:#b8f6ff}.checkout-preview{display:flex;gap:24px;align-items:center;padding:20px;background:#092738;border:1px solid #245066;border-radius:12px}.qr-demo{background:white;padding:12px;border-radius:10px;flex:none}.checkout-preview p{margin:9px 0;color:#a5c6d5}@media(max-width:750px){.landing-steps{grid-template-columns:1fr}.checkout-preview{flex-direction:column;align-items:flex-start}}

/* v0.8.1: landing content must never intersect the section border */
.landing .panel:not(.feature-panel):not(.roadmap-panel){padding:clamp(24px,3vw,42px)!important}
.landing .panel .eyebrow{margin:0 0 10px!important;display:block;line-height:1.4;font-size:13px}
.landing .panel h2{margin:0 0 22px!important;line-height:1.25}
.landing .panel .landing-steps{margin-top:18px}
.landing .checkout-preview{margin-top:18px}
.landing .panel .landing-actions{margin-bottom:16px}
@media(max-width:720px){.landing .panel:not(.feature-panel):not(.roadmap-panel){padding:22px!important}}
/* v0.10.0: cancel payment, closed invoice, way back to the merchant. */
.cancel-box { border-top:1px solid #23495d; margin-top:18px; padding-top:6px; }
.ghost-button { background:transparent; color:#9fd9e0; border:1px solid #3a6f86; }
.ghost-button:hover { border-color:#64d1d4; color:#dffcff; }
.danger-button { background:#e07a7a; color:#2a0b0b; }
.button-link { display:inline-block; margin-top:16px; border-radius:9px; padding:13px 20px; background:#64d1d4; color:#05202b; font-weight:700; text-decoration:none; }
.button-link:hover { background:#7fe3e6; }
.closed-summary .closed-mark { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:#f2b3b3; border:1px solid #7a4a52; background:#2a1820; }
.closed-summary p { font-size:17px; }
.paid-summary .button-link { display:table; }
/* v0.11.0: subscription page. */
.terms { display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:8px 18px; margin:18px 0 6px; }
.terms dt { color:#9db9c9; font-size:14px; }
.terms dd { margin:0; color:#e6f4f8; overflow-wrap:anywhere; }
.terms code { font-size:13px; color:#bfe9ee; }
.steps { padding-left:22px; color:#bed1e3; line-height:1.9; }
.steps li.done { color:#80ecd1; }
.steps li.now { color:#ffffff; font-weight:700; }
.warn-text { color:#f6d482; }
.closed-summary.ok .closed-mark { color:#80ecd1; border-color:#2f7a64; background:#123a32; }
@media(max-width:520px){ .terms { grid-template-columns:1fr; gap:2px; } .terms dd { margin-bottom:8px; } }