/* AttendGate v17 refinements: cleaner mobile hero, corrected CTA styling, refreshed brand mark, and denser How it works cards. */

.brand-logo{border-radius:12px;box-shadow:0 8px 22px rgba(29,88,216,.16)}
.home-v14 .nav-cta{background:#071a34;color:#fff;border-radius:999px}

.hero-actions-v17{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:6}
.button-download-v17{min-height:52px;padding:0 30px;border-radius:999px;background:#000;color:#fff;font-size:15px;font-weight:780;box-shadow:0 10px 22px rgba(7,26,52,.12)}
.button-download-v17:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(7,26,52,.18)}
.hero-primary-v17{min-width:182px}

/* Give the hero copy more breathing room and keep CTAs readable over imagery. */
.hero-v14-copy{padding-bottom:56px}
.hero-v14-copy p{margin-bottom:0}
.hero-device{z-index:1}
.hero-v14 .hero-v14-copy{z-index:5}

/* How it works: denser information with image placeholders that are easy to replace. */
.ag-process-v15 .ag-v15-heading{margin-bottom:28px}
.ag-process-grid-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.ag-process-card-demo{display:flex;flex-direction:column;gap:16px;min-height:0;padding:18px 18px 20px;border-radius:26px}
.ag-process-shot{border-radius:20px;overflow:hidden;background:#f3f7fd;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.ag-process-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ag-process-body h3{font-size:28px;margin:0 0 8px}
.ag-process-body p{margin:0;color:#b1c1d6;line-height:1.65;font-size:14px}
.ag-process-replace-note{margin:20px 4px 0;color:#8fa1b9;font-size:13px;line-height:1.55;max-width:920px}

/* Header/menu comfort on mobile. */
@media (max-width: 960px){
  .hero-v14{min-height:950px}
  .hero-v14-inner{min-height:950px}
  .hero-v14-copy{padding-top:106px;padding-bottom:48px}
  .hero-device-kiosk{left:-18px;width:44%;bottom:-10px}
  .hero-device-admin{right:-28px;width:52%;bottom:-6px}
  .ag-process-grid-demo{grid-template-columns:1fr;gap:18px}
}

@media (max-width: 720px){
  .home-v14 .site-header{background:rgba(247,249,252,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(7,26,52,.06)}
  .home-v14 .brand-logo{width:36px;height:36px}
  .home-v14 .brand{font-size:19px}
  .hero-v14{min-height:920px}
  .hero-v14-inner{min-height:920px}
  .hero-v14-copy{padding-top:104px;padding-bottom:42px}
  .hero-v14 h1{font-size:clamp(48px,14vw,66px);max-width:360px}
  .hero-v14-copy p{font-size:15px;line-height:1.56;max-width:360px;padding:0 8px}
  .hero-actions-v17{gap:10px;margin-top:20px}
  .hero-primary-v17,.button-download-v17{width:100%;max-width:320px;min-height:50px;padding:0 22px}
  .hero-device-kiosk{left:-8px;width:43%;bottom:6px}
  .hero-device-admin{right:-12px;width:52%;bottom:6px}
  .feature-ticker{height:auto;padding:11px 0}
  .feature-ticker-track{animation:none;flex-wrap:nowrap}
  .feature-ticker span{font-size:10px}

  .ag-process-v15,.ag-roles-v15,.ag-features-v15,.ag-data-v15,.ag-pricing-v15,.ag-faq-v15{padding:58px 0}
  .ag-v15-heading h2{font-size:clamp(38px,11.5vw,54px)}
  .ag-process-card-demo{padding:14px 14px 18px;border-radius:22px}
  .ag-process-body h3{font-size:24px}
  .ag-process-body p{font-size:13.5px}
  .ag-process-replace-note{font-size:12.5px;margin-top:14px}
}

@media (max-width: 520px){
  .hero-v14{min-height:900px}
  .hero-v14-inner{min-height:900px}
  .hero-v14-copy{padding-top:96px}
  .hero-v14 h1{font-size:clamp(44px,14.2vw,58px)}
  .hero-v14-copy p{font-size:14px;max-width:330px}
  .hero-device-kiosk{left:-10px;width:42%;bottom:20px}
  .hero-device-admin{right:-14px;width:52%;bottom:18px}
}