/* ============================================================
   Amanah Digital Technologies — style.css
   Mobile-first, fully responsive
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Light theme (default) ── */
:root,[data-theme="light"]{
  --bg:#f7f6f2;
  --sf:#ffffff;
  --sf2:#f0eee8;
  --br:rgba(0,0,0,.07);
  --br2:rgba(0,0,0,.12);
  --ac:#0e5fdd;
  --pc:#0a4ab8;
  --pd:rgba(14,95,221,.08);
  --tx:#111318;
  --mu:#6b6e78;
  --gn:#16a34a;
  --err:#dc2626;
  --bl:#2563eb;
  --nav-bg:rgba(247,246,242,.96);
  --shadow:rgba(0,0,0,.06);
  --hero-grad:linear-gradient(135deg,#e8f0fe 0%,#f7f6f2 60%,#eef4ff 100%);
  --card-hover:rgba(14,95,221,.04);
}

[data-theme="dark"]{
  --bg:#0b0c0e;
  --sf:#111318;
  --sf2:#181c23;
  --br:rgba(255,255,255,.07);
  --br2:rgba(255,255,255,.13);
  --ac:#4f8ef7;
  --pc:#89b4fa;
  --pd:rgba(79,142,247,.12);
  --tx:#e8e6e1;
  --mu:#7a7d85;
  --gn:#4ade80;
  --err:#f87171;
  --bl:#60a5fa;
  --nav-bg:rgba(11,12,14,.96);
  --shadow:rgba(0,0,0,.3);
  --hero-grad:linear-gradient(135deg,#0f1b2d 0%,#0b0c0e 60%,#0d1220 100%);
  --card-hover:rgba(79,142,247,.05);
}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--tx);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  transition:background .25s,color .25s;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:300;line-height:1.15}
h1{font-size:clamp(1.75rem,6vw,3.6rem)}
h2{font-size:clamp(1.4rem,4vw,2.4rem)}
h3{font-size:clamp(1.05rem,2.5vw,1.5rem)}
h4{font-size:1rem;font-weight:600;font-family:'DM Sans',sans-serif}
em{font-style:italic;color:var(--pc)}
p{color:var(--mu);line-height:1.7}
strong{color:var(--tx)}

/* ── NAV ── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  border-bottom:1px solid var(--br);
  position:sticky;top:0;z-index:200;
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:background .25s;
  gap:12px;
}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.nav-logo-text{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.nav-logo-text span{color:var(--ac)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-size:13px;font-weight:500;padding:7px 12px;border-radius:8px;
  color:var(--mu);transition:color .2s,background .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--tx);background:var(--sf2)}
.nav-links a.active{font-weight:600}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.theme-btn{
  background:none;border:1px solid var(--br2);border-radius:8px;padding:6px 8px;
  color:var(--mu);cursor:pointer;display:flex;align-items:center;gap:5px;font-size:11px;
  font-family:'DM Sans',sans-serif;transition:.2s;white-space:nowrap;
}
.theme-btn:hover{color:var(--ac);border-color:var(--ac)}
.btn-nav{
  background:var(--ac) !important;color:#fff !important;
  padding:8px 16px !important;border-radius:8px;
  font-weight:600 !important;font-size:13px !important;
  white-space:nowrap;transition:opacity .2s,transform .15s !important;
}
.btn-nav:hover{opacity:.88 !important;transform:translateY(-1px) !important}

/* ── Hamburger ── */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--tx);border-radius:2px;transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  display:none;flex-direction:column;gap:2px;
  padding:10px 14px 14px;
  border-top:1px solid var(--br);
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  padding:11px 12px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--mu);transition:.2s;
}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--tx);background:var(--sf2)}
.mobile-menu .btn-nav-mob{
  margin-top:8px;background:var(--ac);color:#fff !important;
  padding:12px 18px !important;border-radius:8px;
  font-weight:600 !important;text-align:center;display:block;
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--ac),#3b82f6);
  color:#fff !important;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding:12px 26px;border-radius:8px;
  transition:opacity .2s,transform .15s;
}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--ac);
  border:1px solid var(--ac);cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding:11px 26px;border-radius:8px;
  transition:background .2s,color .2s,transform .15s;
}
.btn-outline:hover{background:var(--pd);transform:translateY(-1px)}
.btn-sm{padding:8px 16px !important;font-size:12px !important}

/* ── BADGE ── */
.badge{
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ac);background:var(--pd);padding:4px 12px;
  border-radius:20px;border:1px solid rgba(14,95,221,.2);
  display:inline-block;
}
[data-theme="dark"] .badge{border-color:rgba(79,142,247,.25)}

/* ── SECTIONS ── */
.section{padding:72px 32px;max-width:1140px;margin:0 auto}
.section-sm{padding:52px 32px;max-width:1140px;margin:0 auto}
.section-center{text-align:center}
.section-title{margin-bottom:10px}
.section-sub{max-width:560px;font-size:15px;margin-bottom:36px}
.section-center .section-sub{margin-left:auto;margin-right:auto}

/* ── CARDS ── */
.card{
  background:var(--sf);border:1px solid var(--br);border-radius:12px;
  padding:24px;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.card:hover{
  border-color:var(--br2);box-shadow:0 8px 32px var(--shadow);transform:translateY(-2px);
}
.card-icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--pd);border:1px solid rgba(14,95,221,.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--ac);margin-bottom:16px;flex-shrink:0;
}
[data-theme="dark"] .card-icon{border-color:rgba(79,142,247,.2)}
.card h4{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--tx)}
.card p{font-size:13px;line-height:1.6}

/* ── GRIDS ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── HERO ── */
.hero{
  background:var(--hero-grad);
  padding:80px 32px 64px;
  position:relative;overflow:hidden;
}
.hero-inner{max-width:1140px;margin:0 auto;position:relative;z-index:1}
.hero-tag{margin-bottom:18px}
.hero h1{margin-bottom:16px}
.hero p{font-size:16px;margin-bottom:32px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 70% 40%,rgba(14,95,221,.1) 0%,transparent 70%);
  pointer-events:none;
}
[data-theme="dark"] .hero-bg{background:radial-gradient(ellipse 60% 60% at 70% 40%,rgba(79,142,247,.12) 0%,transparent 70%)}

.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:center;
}
.hero-visual{position:relative}

/* ── DIVIDER ── */
.divider{border:none;border-top:1px solid var(--br);margin:0}

/* ── FEATURE ROW ── */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
/* reversed: text right, visual left */
.feature-row.reverse .fr-text{order:2}
.feature-row.reverse .fr-side{order:1}

/* ── STATS ── */
.stats-wrap{padding:0 32px;max-width:1140px;margin:0 auto}
.stats-strip{
  background:var(--sf);border:1px solid var(--br);border-radius:12px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat-item{padding:24px 20px;border-right:1px solid var(--br);text-align:center}
.stat-item:last-child{border-right:none}
.stat-num{font-family:'Fraunces',serif;font-size:2rem;font-weight:300;color:var(--ac);line-height:1}
.stat-lbl{font-size:11px;color:var(--mu);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;font-weight:500}

/* ── PRODUCT CARD (homepage) ── */
.product-card{
  background:var(--sf);border:1px solid var(--br);border-radius:16px;
  padding:32px;transition:.2s;display:flex;flex-direction:column;
}
.product-card:hover{border-color:var(--ac);box-shadow:0 8px 40px var(--shadow)}
.product-card .badge{margin-bottom:16px}
.product-card h3{font-size:clamp(1.1rem,2.5vw,1.5rem);margin-bottom:10px}
.product-card p{margin-bottom:22px;font-size:14px;flex:1}

/* ── LAYER LIST (products page) ── */
.layer-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.layer-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--tx);padding:10px 13px;
  background:var(--sf2);border-radius:8px;border:1px solid var(--br);
}
.layer-num{
  width:22px;height:22px;min-width:22px;border-radius:50%;
  background:var(--pd);border:1px solid rgba(14,95,221,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--ac);flex-shrink:0;margin-top:1px;
}
[data-theme="dark"] .layer-num{border-color:rgba(79,142,247,.25)}

/* ── PRODUCT LAYOUT (products page, 2-col) ── */
.product-layout{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:48px;align-items:start;
}
.product-layout.flip{grid-template-columns:1fr 1.2fr}

/* ── PRICING ── */
.pricing-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.pricing-card{
  background:var(--sf);border:1px solid var(--br);border-radius:16px;
  padding:32px;position:relative;transition:.2s;
  display:flex;flex-direction:column;
}
.pricing-card.featured{
  border-color:var(--ac);
  box-shadow:0 0 0 1px var(--ac),0 16px 48px rgba(14,95,221,.1);
}
[data-theme="dark"] .pricing-card.featured{
  box-shadow:0 0 0 1px var(--ac),0 16px 48px rgba(79,142,247,.1);
}
.pricing-card .feat-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--ac);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 14px;border-radius:20px;white-space:nowrap;
}
.price{
  font-family:'Fraunces',serif;font-size:2.2rem;font-weight:300;
  color:var(--tx);line-height:1;margin:18px 0 5px;
}
.price sub{font-size:1rem;color:var(--mu);font-family:'DM Sans',sans-serif;font-weight:400}
.price-note{font-size:12px;color:var(--mu);margin-bottom:22px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
.feat-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--tx)}
.feat-list li svg{color:var(--gn);flex-shrink:0;margin-top:2px}
.feat-list li.off svg{color:var(--mu)}
.feat-list li.off span{color:var(--mu)}

/* ── ADDON GRID (pricing page) ── */
.addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

/* ── CONTACT ── */
.contact-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-item{display:flex;gap:12px;align-items:flex-start}
.contact-item-icon{
  width:40px;height:40px;min-width:40px;border-radius:10px;
  background:var(--pd);border:1px solid rgba(14,95,221,.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--ac);flex-shrink:0;
}
[data-theme="dark"] .contact-item-icon{border-color:rgba(79,142,247,.2)}
.contact-item h4{font-size:13px;font-weight:600;margin-bottom:2px}
.contact-item p{font-size:13px}

/* ── FORM ── */
.form-card{background:var(--sf);border:1px solid var(--br);border-radius:16px;padding:32px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
label .req{color:var(--ac)}
input,select,textarea{
  background:var(--sf2);border:1px solid var(--br2);border-radius:8px;
  color:var(--tx);font-family:'DM Sans',sans-serif;font-size:14px;
  padding:11px 13px;outline:none;
  transition:border-color .2s,box-shadow .2s;width:100%;
  -webkit-appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--pd)}
textarea{resize:vertical;min-height:120px}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--mu);opacity:.55}

/* ── ALERT ── */
.alert{border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.alert-error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:#fca5a5}
.alert-success{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);color:var(--gn)}

/* ── FOOTER ── */
.footer{border-top:1px solid var(--br);background:var(--sf);padding:56px 32px 28px}
.footer-inner{max-width:1140px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.footer-brand p{font-size:13px;color:var(--mu);margin-top:10px;max-width:260px}
.footer-col h5{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin-bottom:12px}
.footer-col a{display:block;font-size:13px;color:var(--mu);padding:3px 0;transition:color .2s}
.footer-col a:hover{color:var(--tx)}
.footer-bottom{border-top:1px solid var(--br);padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:12px;color:var(--mu)}
.footer-logo-text{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600}
.footer-logo-text span{color:var(--ac)}

/* ── ADV CARDS ── */
.adv-card{display:flex;gap:14px;align-items:flex-start;background:var(--sf);border:1px solid var(--br);border-radius:12px;padding:20px}
.adv-icon{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--pd);border:1px solid rgba(14,95,221,.15);display:flex;align-items:center;justify-content:center;color:var(--ac);flex-shrink:0}
[data-theme="dark"] .adv-icon{border-color:rgba(79,142,247,.2)}

/* ── PAGE HEADER ── */
.page-header{background:var(--hero-grad);padding:56px 32px;border-bottom:1px solid var(--br)}
.page-header-inner{max-width:1140px;margin:0 auto}
.page-header .badge{margin-bottom:12px}
.page-header h1{font-size:clamp(1.6rem,4.5vw,2.8rem);margin-bottom:10px}
.page-header p{font-size:14px;max-width:520px;line-height:1.65}

/* ── HERO DIAGRAM ── */
.hero-diagram{background:var(--sf);border:1px solid var(--br);border-radius:16px;padding:20px;font-size:12px}
.hd-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:8px;margin-bottom:8px}
.hd-row:last-child{margin-bottom:0}
.hd-dot{width:8px;height:8px;min-width:8px;border-radius:50%;flex-shrink:0}
.hd-label{font-weight:600;color:var(--tx);font-size:12px;flex:1;min-width:0}
.hd-val{flex-shrink:0;font-size:11px;color:var(--mu);font-weight:500;background:var(--sf2);padding:2px 8px;border-radius:4px;border:1px solid var(--br)}

/* ── CTA ── */
.cta-wrap{max-width:600px;margin:0 auto;text-align:center}
.cta-wrap h2{margin-bottom:12px}
.cta-wrap p{margin-bottom:26px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── ANIMATIONS ── */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── MINI STAT GRID ── */
.mini-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── ABOUT ADVANTAGE GRID ── */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── PROCESS STEPS ── */
.process-num{
  width:22px;height:22px;min-width:22px;border-radius:50%;
  background:var(--pd);border:1px solid rgba(14,95,221,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--ac);flex-shrink:0;margin-top:1px;
}

/* ================================================
   RESPONSIVE — Tablet  ≤ 1024px
   ================================================ */
@media(max-width:1024px){
  .nav{padding:14px 20px}

  .section{padding:60px 20px}
  .section-sm{padding:44px 20px}
  .stats-wrap{padding:0 20px}
  .page-header{padding:48px 20px}
  .hero{padding:64px 20px 56px}
  .footer{padding:48px 20px 24px}

  /* hero: single column */
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-visual{display:none}

  /* feature rows: stack */
  .feature-row{grid-template-columns:1fr;gap:32px}
  .feature-row.reverse .fr-text{order:0}
  .feature-row.reverse .fr-side{order:0}

  /* product layouts: stack */
  .product-layout{grid-template-columns:1fr;gap:28px}
  .product-layout.flip{grid-template-columns:1fr}

  /* grids */
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}

  /* stats: 2 col */
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .stats-strip .stat-item:nth-child(2){border-right:none}
  .stats-strip .stat-item:nth-child(3){border-top:1px solid var(--br)}
  .stats-strip .stat-item:nth-child(4){border-top:1px solid var(--br);border-right:none}

  /* pricing: 1 col centered */
  .pricing-cards{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .addon-grid{grid-template-columns:1fr}

  /* contact */
  .contact-wrap{grid-template-columns:1fr;gap:28px}

  /* footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
}

/* ================================================
   RESPONSIVE — Mobile  ≤ 768px
   ================================================ */
@media(max-width:768px){
  .nav{padding:12px 16px}
  .nav-links{display:none}
  .hamburger{display:flex}

  .section{padding:48px 16px}
  .section-sm{padding:36px 16px}
  .stats-wrap{padding:0 16px}
  .page-header{padding:40px 16px}
  .hero{padding:52px 16px 44px}
  .footer{padding:40px 16px 22px}

  /* all grids: single col */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:1fr}
  .mini-stat-grid{grid-template-columns:1fr 1fr}

  /* form */
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:1}
  .form-card{padding:24px 18px}

  /* footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}

/* ================================================
   RESPONSIVE — Small Mobile  ≤ 480px
   ================================================ */
@media(max-width:480px){
  body{font-size:14px}

  .nav{padding:11px 14px}

  .section{padding:40px 14px}
  .section-sm{padding:30px 14px}
  .page-header{padding:36px 14px}
  .hero{padding:44px 14px 40px}
  .footer{padding:36px 14px 20px}

  .hero-btns{flex-direction:column}
  .hero-btns .btn,
  .hero-btns .btn-outline{width:100%;justify-content:center}

  /* stats: 1 col */
  .stats-strip{grid-template-columns:1fr}
  .stats-strip .stat-item{border-right:none !important;border-top:1px solid var(--br)}
  .stats-strip .stat-item:first-child{border-top:none}

  .grid-4{grid-template-columns:1fr}
  .mini-stat-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-brand{grid-column:1}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:4px}

  .pricing-cards{max-width:100%}
  .addon-grid{grid-template-columns:1fr}

  .product-card{padding:22px 16px}
  .pricing-card{padding:28px 18px}
  .card{padding:18px 14px}
  .adv-card{padding:16px 14px}
  .form-card{padding:20px 14px}

  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn,
  .cta-btns .btn-outline{width:100%;max-width:320px}

  /* contact form submit row */
  .form-submit-row{flex-direction:column !important;align-items:stretch !important;gap:14px !important}
  .form-submit-row p{max-width:100% !important}
  .form-submit-row .btn{width:100% !important;justify-content:center !important}
}

/* ================================================
   RESPONSIVE — Very Small  ≤ 360px
   ================================================ */
@media(max-width:360px){
  body{font-size:13px}
  .nav-logo-text{font-size:.95rem}
  .section{padding:32px 12px}
  .page-header{padding:28px 12px}
  .hero{padding:36px 12px 32px}
}