:root{
  --bg:#0b0e13;
  --fg:#ffffff;
  --muted:#8b94a7;
  --pill:#171b22;
  --green:#2ecc71; /* Just */
  --orange:#f39c12; /* Check */
  --red:#e74c3c; /* It */
  --accent:#30a2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(48,162,255,.18), transparent 60%),
    radial-gradient(900px 600px at 20% 20%, rgba(46,204,113,.14), transparent 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(243,156,18,.14), transparent 60%),
    #0b0e13;
  overflow-x:hidden;
}
.donate-block{position:absolute;top:12px;left:130px;right:60px;z-index:5;max-width:none;display:grid;grid-auto-rows:auto;row-gap:0px;padding:12px 16px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.donate-header{font-size:22px;color:var(--fg);text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.donate-row{display:flex;align-items:center;justify-content:space-between;column-gap:16px;padding:8px 0;min-height:88px}
.donate-title{font-size:24px;color:var(--muted)}
.donate-content{display:flex;align-items:center;gap:0px;min-height:88px}
.donate-btn{display:inline-block;padding:8px 12px;border-radius:10px;background:var(--accent);color:#001b2e;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,.1)}
.donate-img{height:64px;width:auto;object-fit:contain;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,)}
.amount-input-container{display:flex;align-items:center;gap:0;margin-right:0;position:relative}
.amount-input{width:80px;height:50px;padding:8px 20px 8px 12px;border:2px solid #000;border-radius:8px;background:#fff;color:#000;font-size:16px;font-weight:600;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.1);-webkit-appearance:none;-moz-appearance:textfield}
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button{opacity:1;position:static;height:auto;width:auto;background:none;margin:0;padding:0;display:block}
.amount-input:focus{outline:none;border-color:#000;background:#fff}
.currency-symbol{color:#000;font-size:16px;font-weight:600;position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.backdrop{
  position:fixed;inset:0;pointer-events:none;
  background: radial-gradient(600px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  filter:saturate(130%);
}
.container{max-width:1200px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;width:100%}
.brand{grid-column:1/span 2;display:flex;align-items:center;gap:16px;padding-left:80px;min-width:0}
.brand-right{position:relative;display:block;flex:1;min-height:96px}
.logo-img{height:128px;width:auto;display:block;max-width:100%}
.app-icon{height:96px;aspect-ratio:1/1;width:auto;border-radius:10px;border:0;background:transparent;max-width:100%}

.hero h1{font-size:80px;line-height:1.0;margin:110px 0 12px;font-weight:800;letter-spacing:-.5px;word-break:break-word}
.subtitle{margin:0 0 24px;color:var(--muted);font-size:36px}
.cta{display:inline-block;background:var(--accent);color:#001b2e;text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid rgba(255,255,255,.1)}
.cta[aria-disabled="true"]{cursor:default;opacity:.9}
.store-badge{height:56px;width:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));max-width:100%}

.mockup{display:flex;justify-content:flex-end}
.phone-img{max-width:420px;height:auto;filter:drop-shadow(0 30px 80px rgba(0,0,0,.6));width:100%;border:0;background:transparent;mask-image:linear-gradient(to right, black 70%, rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(to right, black 70%, rgba(0,0,0,0) 100%)}

.footer{grid-column:1/span 2;margin-top:20px;color:var(--muted);font-size:14px}

@media (max-width: 1080px){
  .brand{flex-wrap:wrap;padding-left:24px;gap:12px}
  .brand-right{position:static;flex:1 1 100%}
  .donate-block{position:static;left:auto;right:auto;row-gap:10px}
  .brand-right{min-height:auto}
  .donate-row{min-height:96px}
  .donate-content{min-height:96px}
  .donate-img{height:64px;width:auto}
  .container{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .brand{grid-column:auto}
  .hero h1{font-size:44px}
  .store-badge{height:48px}
  .mockup{display:none}
  .hero,.footer{display:none}
  .logo-img{height:clamp(88px, 10vw, 104px);max-width:calc(100% - 12px - 88px)}
  .app-icon{display:inline-block;margin-left:auto;flex:0 0 auto;height:clamp(64px, 8vw, 88px);mask-image:linear-gradient(to right, black 92%, rgba(0,0,0,0) 100%),linear-gradient(to left, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to top, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, black 98%, rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(to right, black 92%, rgba(0,0,0,0) 100%),linear-gradient(to left, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to top, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, black 98%, rgba(0,0,0,0) 100%)}
  .mobile-banner{display:block;mask-image:radial-gradient(170% 140% at 50% 50%, black 72%, rgba(0,0,0,0) 100%),linear-gradient(to right, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%);-webkit-mask-image:radial-gradient(170% 140% at 50% 50%, black 72%, rgba(0,0,0,0) 100%),linear-gradient(to right, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-position:center;-webkit-mask-position:center;border:0;filter:none}
  /* keep icon on first row; banner and donate occupy full width below */
  .brand-right{display:contents}
  .mobile-banner,.donate-block{flex:1 1 100%}
}

/* Small phones */
@media (max-width: 600px){
  .container{padding:28px 16px 28px;gap:20px}
  .brand{padding-left:0;gap:12px}
  .logo-img{height:88px;max-width:calc(100% - 12px - 72px)}
  .app-icon{height:72px}
  .mobile-banner{display:block;width:100%;max-width:520px;height:auto;margin:10px 0 6px;border-radius:12px;border:0;filter:none;mask-image:radial-gradient(170% 140% at 50% 50%, black 72%, rgba(0,0,0,0) 100%),linear-gradient(to right, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%);-webkit-mask-image:radial-gradient(170% 140% at 50% 50%, black 72%, rgba(0,0,0,0) 100%),linear-gradient(to right, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 16%, black 84%, rgba(0,0,0,0) 100%);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-position:center;-webkit-mask-position:center}
  .donate-block{padding:10px 12px;border-radius:24px}
  .donate-header{font-size:18px}
  .donate-row{flex-wrap:wrap;row-gap:8px;min-height:auto;padding:6px 0}
  .donate-title{font-size:13px}
  .donate-content{min-height:auto}
  .donate-img{height:48px}
  .hero h1{font-size:36px;margin:32px 0 8px}
  .subtitle{font-size:18px}
  .store-badge{height:44px}
  .mockup{margin-top:8px}
  /* Mobile layout: logo + icon + mobile banner + donate */
  .mockup,.hero,.footer{display:none}
  .app-icon{display:inline-block}
  .mobile-banner{display:block}
  .brand{width:100%}
  .brand-right{flex:1 1 auto}
  .donate-block{width:100%}
}

/* Desktop defaults */
.mobile-banner{display:none}
.app-icon{mask-image:linear-gradient(to right, black 92%, rgba(0,0,0,0) 100%),linear-gradient(to left, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to top, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, black 98%, rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(to right, black 92%, rgba(0,0,0,0) 100%),linear-gradient(to left, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to top, black 98%, rgba(0,0,0,0) 100%),linear-gradient(to bottom, black 98%, rgba(0,0,0,0) 100%)}

/* Desktop: phone fade on all sides */
@media (min-width: 1081px){
  /* Keep strong right fade on the image itself */
  .phone-img{-webkit-mask-image:linear-gradient(to right, black 70%, rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right, black 70%, rgba(0,0,0,0) 100%)}
  /* Add subtle fade on other sides via wrapper so masks multiply reliably */
  .mockup{-webkit-mask-image:radial-gradient(160% 140% at 50% 50%, black 85%, rgba(0,0,0,0) 100%);mask-image:radial-gradient(160% 140% at 50% 50%, black 85%, rgba(0,0,0,0) 100%)}
  /* Hide footer on desktop as requested */
  .footer{display:none}
  /* Keep page background visually consistent on scroll */
  body{background-attachment:fixed,fixed,fixed,fixed}
}

/* Ensure banner shows on mobile due to cascade order */
@media (max-width: 1080px){
  .mobile-banner{display:block}
}

/* Very small devices */
@media (max-width: 380px){
  .hero h1{font-size:30px}
  .subtitle{font-size:16px}
  .donate-img{height:42px}
}