/* NoopalMoney shared responsive sizing standard
   Applies to public, authenticated, admin, support and readiness web surfaces.
   Mobile/tablet layouts remain owned by each page; this file standardizes large displays. */
:root{
  --nm-screen-gutter:clamp(16px,2.4vw,44px);
  --nm-content-max:1180px;
  --nm-reading-max:760px;
  --nm-large-card-pad:18px;
  --nm-large-section-gap:14px;
}
html{font-size:16px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-width:0;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%;height:auto}
.wrap,.shell,.app{width:min(var(--nm-content-max),calc(100vw - (var(--nm-screen-gutter) * 2)))!important;max-width:var(--nm-content-max)!important;margin-left:auto!important;margin-right:auto!important}
.hero p,.head p,.pagehead p,.lead{max-width:var(--nm-reading-max)}

@media (min-width:1280px){
  :root{--nm-screen-gutter:36px;--nm-content-max:1260px;--nm-reading-max:800px;--nm-large-card-pad:20px;--nm-large-section-gap:16px}
  .top,.topin{min-height:74px}
  .card,.module,.service,.profileitem,.kpi{padding:var(--nm-large-card-pad)}
  .grid,.cards,.modules,.modulegrid,.services,.trust,.developergrid,.kpis,.quick{gap:var(--nm-large-section-gap)}
  .hero,.head,.pagehead{padding:clamp(28px,2.25vw,38px)}
  .nav a,.links a,.tabs a,.btn,.signout{font-size:.84rem}
}

@media (min-width:1440px){
  :root{--nm-screen-gutter:44px;--nm-content-max:1360px;--nm-reading-max:860px;--nm-large-card-pad:22px;--nm-large-section-gap:18px}
  html{font-size:16.5px}
  .top,.topin{min-height:78px}
  .mark{width:46px;height:46px;border-radius:14px}
  .brand b{font-size:1.14rem}
  .hero,.head,.pagehead{border-radius:28px;padding:clamp(32px,2.5vw,44px)}
  .hero h1{font-size:clamp(3rem,4vw,4.35rem)!important;line-height:1!important}
  .head h2,.pagehead h1,.section h2{font-size:clamp(2rem,2.5vw,3rem)!important}
  .wallet{padding:22px;border-radius:22px}
  .balance,.balance-mask,.balance-real{font-size:2.2rem}
  .card{border-radius:20px}
  .section{scroll-margin-top:158px}
  .footer{font-size:.76rem}
}

@media (min-width:1680px){
  :root{--nm-screen-gutter:52px;--nm-content-max:1480px;--nm-reading-max:920px;--nm-large-card-pad:24px;--nm-large-section-gap:20px}
  html{font-size:17px}
  .top,.topin{min-height:82px}
  .hero,.head,.pagehead{padding:clamp(36px,2.65vw,50px)}
  .hero h1{font-size:clamp(3.25rem,3.8vw,4.7rem)!important}
  .card h2,.card h3{line-height:1.2}
  .nav a,.links a,.tabs a,.btn,.signout{font-size:.88rem}
  .quick i,.cardicon{transform:scale(1.06)}
}

@media (min-width:1920px){
  :root{--nm-screen-gutter:64px;--nm-content-max:1560px;--nm-reading-max:960px;--nm-large-card-pad:26px;--nm-large-section-gap:22px}
  html{font-size:18px}
  .top,.topin{min-height:86px}
  .hero,.head,.pagehead{padding:clamp(40px,2.7vw,56px)}
  .hero h1{font-size:clamp(3.5rem,3.7vw,5rem)!important}
  .head h2,.pagehead h1,.section h2{font-size:clamp(2.2rem,2.35vw,3.35rem)!important}
  .card,.module,.service,.profileitem,.kpi{border-radius:20px}
  .wallet{padding:26px}
  .balance,.balance-mask,.balance-real{font-size:2.4rem}
}

@media (min-width:2400px){
  :root{--nm-screen-gutter:80px;--nm-content-max:1680px;--nm-reading-max:1020px;--nm-large-card-pad:28px;--nm-large-section-gap:24px}
  html{font-size:18.5px}
  .top,.topin{min-height:90px}
  .hero,.head,.pagehead{padding:58px}
  .hero h1{font-size:5.15rem!important}
}

/* Keep forms and controls comfortable on desktop without becoming excessively wide. */
@media (min-width:1280px){
  input,select,textarea,button{min-height:42px}
  .field input,.field select,.field textarea,.input{max-width:100%}
  .qr img,.download img{image-rendering:auto}
}

/* Preserve existing small-screen behavior exactly. */
@media (max-width:1279px){
  .wrap,.shell,.app{max-width:none!important}
}

/* Premium landing visual — approved red Sample 2 / Sample 3 direction. */
main#main .hero{
  position:relative;
  background:
    linear-gradient(90deg,#8f101c 0%,#b51222 43%,rgba(215,25,45,.92) 58%,rgba(215,25,45,.62) 72%,rgba(215,25,45,.24) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 720'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeDropShadow dx='0' dy='20' stdDeviation='22' flood-opacity='.22'/%3E%3C/filter%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='.12' fill='%23fff'%3E%3Ccircle cx='760' cy='70' r='170'/%3E%3Ccircle cx='120' cy='650' r='150'/%3E%3C/g%3E%3Cg transform='translate(420 88)'%3E%3Ccircle cx='118' cy='110' r='62' fill='%237a341d'/%3E%3Cpath d='M36 520c8-154 34-264 82-324 55-68 132-45 174 16 38 56 58 156 62 308z' fill='%23fff'/%3E%3Cpath d='M70 520c10-112 30-198 64-252l72 80 82-92c30 55 48 145 52 264z' fill='%23ffdfe4'/%3E%3Ccircle cx='346' cy='176' r='52' fill='%238b4a2b'/%3E%3Cpath d='M292 526c4-126 26-218 56-268 43-68 106-45 136 12 27 52 40 140 42 256z' fill='%23f7f8fa'/%3E%3Cpath d='M299 526c7-92 25-164 50-214l58 62 65-70c22 48 34 122 36 222z' fill='%23f4c7cf'/%3E%3C/g%3E%3Cg filter='url(%23s)' transform='translate(590 165)'%3E%3Crect width='248' height='430' rx='36' fill='%23fff'/%3E%3Crect x='18' y='18' width='212' height='118' rx='24' fill='%23d7192d'/%3E%3Ctext x='38' y='55' font-family='Arial' font-size='16' font-weight='700' fill='%23fff'%3ENoopalMoney%3C/text%3E%3Ctext x='38' y='91' font-family='Arial' font-size='25' font-weight='900' fill='%23fff'%3EGMD 12,450%3C/text%3E%3Ctext x='38' y='116' font-family='Arial' font-size='11' fill='%23ffe9ed'%3EYour money. Your people.%3C/text%3E%3Cg fill='%23d7192d'%3E%3Ccircle cx='48' cy='184' r='21'/%3E%3Ccircle cx='98' cy='184' r='21'/%3E%3Ccircle cx='148' cy='184' r='21'/%3E%3Ccircle cx='198' cy='184' r='21'/%3E%3C/g%3E%3Crect x='18' y='228' width='212' height='154' rx='22' fill='%23fff7f8' stroke='%23f1d7dc'/%3E%3Cg fill='%23171717'%3E%3Crect x='42' y='252' width='28' height='28'/%3E%3Crect x='76' y='252' width='13' height='13'/%3E%3Crect x='98' y='252' width='30' height='30'/%3E%3Crect x='139' y='252' width='16' height='16'/%3E%3Crect x='165' y='252' width='38' height='38'/%3E%3Crect x='42' y='292' width='15' height='15'/%3E%3Crect x='66' y='290' width='36' height='36'/%3E%3Crect x='112' y='300' width='16' height='16'/%3E%3Crect x='142' y='292' width='36' height='36'/%3E%3Crect x='187' y='300' width='16' height='16'/%3E%3Crect x='42' y='338' width='38' height='38'/%3E%3Crect x='92' y='340' width='14' height='14'/%3E%3Crect x='116' y='334' width='32' height='32'/%3E%3Crect x='160' y='340' width='17' height='17'/%3E%3Crect x='184' y='334' width='22' height='22'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right 2.5vw center/56% auto no-repeat,
    #d7192d;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
}
main#main .heroin{min-height:610px;position:relative;z-index:1}
main#main .hero .phone{transform:translateX(-4%) rotate(1deg);box-shadow:0 30px 80px rgba(64,3,13,.40);backdrop-filter:blur(8px)}
main#main .section .card,main#main .redbox,main#main .developer,main#main .download{box-shadow:0 18px 52px rgba(67,10,20,.08)}
@media(min-width:1440px){main#main .heroin{min-height:690px}main#main .hero .phone{transform:translateX(1%) rotate(1deg) scale(1.05)}}
@media(max-width:900px){main#main .hero{background:linear-gradient(135deg,#8f101c,#d7192d 70%,#ef3340)}main#main .heroin{min-height:auto}main#main .hero .phone{transform:none}}