/* ===== App shell — centers content to a phone-width column on any screen ===== */
.app{
  max-width:480px;margin:0 auto;
  background:var(--sky-50);
  min-height:100vh;
  position:relative;
  box-shadow:0 0 60px rgba(11,37,64,0.18);
}

/* ===== Content ===== */
main{padding-bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));}
section{padding:32px 16px;}
.eyebrow-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:var(--teal);margin-bottom:8px;}
.head-block{margin-bottom:20px;}
.head-block h2{font-size:23px;font-weight:800;line-height:1.2;margin-bottom:6px;}
.head-block p{font-size:13.5px;color:var(--slate);line-height:1.55;font-weight:500;}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;}
.head-row h2{font-size:20px;font-weight:800;}
.head-row .eyebrow-tag{margin-bottom:4px;}
.link-all{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap;}

/* ===== Buttons ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 20px;border-radius:14px;font-weight:700;font-size:15px;font-family:'Plus Jakarta Sans',sans-serif;transition:transform .12s;}
.btn:active{transform:scale(0.98);}
.btn-primary{background:#fff;color:var(--navy);box-shadow:0 10px 22px -8px rgba(0,0,0,0.35);}
.btn-secondary{background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.btn-row{display:flex;flex-direction:column;gap:10px;}

/* ===== Brand mark — dùng ở cả header và footer ===== */
.brand{display:flex;align-items:center;gap:9px;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,var(--teal-bright),var(--teal));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark svg{width:17px;height:17px;color:#fff;}
.brand-text{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16.5px;line-height:1.1;}
.brand-text small{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:8.5px;letter-spacing:0.05em;color:var(--slate);text-transform:uppercase;margin-top:1px;}

@media (min-width:481px){
  body{background:linear-gradient(160deg,#EEF3F6,#DCE7EC);}
}