/* AttendGate v36 — homepage hero only.
   This stylesheet intentionally overrides only the desktop/mobile hero and
   the mobile header action group needed after removing duplicate hero CTAs. */

/* ---------- Desktop / tablet hero ---------- */
.hero-v36{
  position:relative;
  overflow:hidden;
  min-height:610px;
  background:
    radial-gradient(circle at 12% 78%, rgba(47,116,246,.10), transparent 24%),
    radial-gradient(circle at 88% 24%, rgba(47,116,246,.09), transparent 27%),
    linear-gradient(180deg,#fbfdff 0%,#eef5fd 100%);
}
.hero-v36::before,
.hero-v36::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  border:1px solid rgba(47,116,246,.055);
}
.hero-v36::before{
  width:720px;height:720px;
  left:-300px;top:-350px;
  box-shadow:0 0 0 110px rgba(47,116,246,.025),0 0 0 220px rgba(47,116,246,.018);
}
.hero-v36::after{
  width:670px;height:670px;
  right:-300px;top:-250px;
  box-shadow:0 0 0 110px rgba(47,116,246,.024),0 0 0 220px rgba(47,116,246,.015);
}
.hero-v36-inner{position:relative;z-index:2;padding:30px 0 0;}
.hero-v36-grid{
  display:grid;
  grid-template-columns:minmax(220px,.82fr) minmax(500px,1.45fr) minmax(220px,.82fr);
  align-items:center;
  gap:12px;
  min-height:575px;
}
.hero-v36-copy{text-align:center;align-self:center;padding:5px 0 20px;}
.hero-v36-kicker{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 16px;border:1px solid #d6e4f5;border-radius:999px;
  background:rgba(255,255,255,.84);box-shadow:0 8px 24px rgba(38,96,175,.05);
  color:#1262d8;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.hero-v36-kicker span{color:#75a7f8;}
.hero-v36-copy h1{
  max-width:790px;margin:18px auto 17px;
  font-size:clamp(54px,5.15vw,82px);line-height:.91;letter-spacing:-.07em;
  color:#071a34;
}
.hero-v36-copy h1 span{
  color:#2f74f6;
  background:linear-gradient(180deg,#3f82ff 0%,#2166e8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-v36-copy>p{
  max-width:690px;margin:0 auto;color:#5d7089;
  font-size:clamp(16px,1.35vw,20px);line-height:1.55;
}
.hero-v36-highlights{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:690px;margin:34px auto 0;
}
.hero-v36-highlight{
  min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:0 15px;position:relative;color:#0c2a52;
}
.hero-v36-highlight:not(:last-child)::after{
  content:"";position:absolute;right:0;top:9px;width:1px;height:64px;background:#d7e4f3;
}
.hero-v36-highlight strong{font-size:13px;line-height:1.25;font-weight:800;}
.hero-v36-icon{
  width:46px;height:46px;display:grid;place-items:center;margin:0 0 10px;
  border-radius:14px;background:#e7efff;color:#2f74f6;box-shadow:inset 0 0 0 1px rgba(47,116,246,.04);
}
.hero-v36-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hero-v36-icon-green{background:#dcf7e8;color:#19a965;}
.hero-v36-icon-orange{background:#fff0dc;color:#e88825;}
.hero-v36-icon-pink{background:#ffe6ee;color:#e84d82;}
.hero-v36-media{
  position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:560px;
}
.hero-v36-media>img{position:relative;z-index:3;display:block;object-fit:contain;filter:drop-shadow(0 24px 34px rgba(6,27,51,.15));}
.hero-v36-kiosk>img{height:530px;width:auto;max-width:100%;}
.hero-v36-admin>img{height:430px;width:auto;max-width:112%;margin-bottom:22px;transform:translateX(8px);}
.hero-v36-plinth{
  position:absolute;z-index:1;left:50%;bottom:0;transform:translateX(-50%);
  width:min(96%,310px);height:62px;border-radius:50% 50% 8px 8px / 30% 30% 8px 8px;
  background:linear-gradient(180deg,#fbfdff,#dfeaf7);box-shadow:0 22px 30px rgba(21,78,148,.12),inset 0 1px 0 #fff;
}
.hero-v36-plinth::after{
  content:"";position:absolute;left:12%;right:12%;top:10px;height:18px;border-radius:50%;
  background:rgba(47,116,246,.13);filter:blur(8px);
}
.hero-v36-callout{
  position:absolute;z-index:5;top:138px;width:150px;color:#276ad3;
  font-size:14px;line-height:1.18;font-weight:750;font-style:italic;letter-spacing:.01em;
  transform:rotate(-5deg);
}
.hero-v36-callout-left{left:-36px;text-align:right;}
.hero-v36-callout-right{right:-46px;text-align:left;transform:rotate(4deg);top:170px;}
.hero-v36-callout i{display:block;position:relative;width:62px;height:38px;margin-top:3px;}
.hero-v36-callout-left i{margin-left:auto;border-left:2px solid #3e82ef;border-bottom:2px solid #3e82ef;border-radius:0 0 0 34px;transform:rotate(9deg);}
.hero-v36-callout-right i{border-right:2px solid #3e82ef;border-bottom:2px solid #3e82ef;border-radius:0 0 34px 0;transform:rotate(-9deg);}
.hero-v36-callout-left i::after,
.hero-v36-callout-right i::after{content:"";position:absolute;width:8px;height:8px;border-right:2px solid #3e82ef;border-bottom:2px solid #3e82ef;bottom:-5px;}
.hero-v36-callout-left i::after{left:-4px;transform:rotate(45deg);}
.hero-v36-callout-right i::after{right:-4px;transform:rotate(45deg);}

@media (max-width:1180px){
  .hero-v36-grid{grid-template-columns:minmax(190px,.72fr) minmax(470px,1.5fr) minmax(190px,.72fr);}
  .hero-v36-kiosk>img{height:475px;}
  .hero-v36-admin>img{height:375px;}
  .hero-v36-copy h1{font-size:clamp(50px,5vw,68px);}
  .hero-v36-callout{display:none;}
}
@media (max-width:980px) and (min-width:768px){
  .hero-v36{min-height:560px;}
  .hero-v36-inner{padding-top:20px;}
  .hero-v36-grid{grid-template-columns:.58fr 1.55fr .58fr;gap:4px;min-height:540px;}
  .hero-v36-media{min-height:520px;}
  .hero-v36-kiosk>img{height:405px;max-width:145%;}
  .hero-v36-admin>img{height:320px;max-width:145%;margin-bottom:46px;}
  .hero-v36-copy{padding:0 0 20px;}
  .hero-v36-copy h1{font-size:clamp(46px,6vw,59px);}
  .hero-v36-copy>p{font-size:15px;line-height:1.5;}
  .hero-v36-highlights{margin-top:27px;}
  .hero-v36-highlight{padding:0 8px;}
  .hero-v36-highlight strong{font-size:11px;}
  .hero-v36-icon{width:40px;height:40px;border-radius:12px;}
  .hero-v36-icon svg{width:21px;height:21px;}
  .hero-v36-plinth{width:180px;height:50px;}
}

/* ---------- Mobile header + hero ---------- */
@media (max-width:767px){
  .m-nav-actions{display:flex;align-items:center;gap:7px;margin-left:auto;}
  .m-nav-web,
  .m-nav-app{min-height:42px;padding:0 13px;border-radius:13px;font-size:11px;font-weight:850;white-space:nowrap;}
  .m-nav-web{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7e2ee;background:#fff;color:#071b31;}
  .m-hero-v36{
    padding:28px 0 22px;
    background:
      radial-gradient(circle at 8% 70%,rgba(47,116,246,.12),transparent 25%),
      radial-gradient(circle at 92% 48%,rgba(47,116,246,.10),transparent 27%),
      linear-gradient(180deg,#fbfdff,#eef5fd);
  }
  .m-hero-v36::before{background:radial-gradient(circle at 50% 13%,rgba(47,116,246,.09),transparent 30%);}
  .m-hero-v36 .m-kicker{gap:7px;padding:8px 11px;font-size:9px;}
  .m-hero-v36 .m-kicker::before{display:none;}
  .m-hero-v36 .m-kicker span{color:#75a7f8;}
  .m-hero-v36 .m-hero-title{max-width:440px;margin:15px auto 13px;font-size:clamp(39px,11.7vw,54px);line-height:.92;}
  .m-hero-v36 .m-hero-title span{background:linear-gradient(180deg,#3f82ff,#2166e8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .m-hero-v36 p{max-width:430px;font-size:14px;line-height:1.52;}
  .m-device-pair-v36{position:relative;max-width:440px;min-height:285px;margin:20px auto 0;gap:0;}
  .m-device-pair-v36::after{content:"";position:absolute;left:6%;right:6%;bottom:5px;height:22px;border-radius:50%;background:rgba(47,116,246,.09);filter:blur(10px);}
  .m-device-pair-v36 .m-device{position:relative;z-index:2;min-height:280px;align-items:flex-end;}
  .m-device-pair-v36 .m-device img{height:auto;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(7,27,49,.14));}
  .m-device-pair-v36 .m-device-kiosk img{width:min(100%,176px);}
  .m-device-pair-v36 .m-device-admin img{width:min(100%,174px);margin-bottom:13px;transform:translateX(-3px);}
  .m-device-pair-v36 .m-device>span{position:absolute;z-index:4;top:8px;padding:7px 9px;border:1px solid #d8e4f2;border-radius:999px;background:rgba(255,255,255,.88);color:#316bbd;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 7px 17px rgba(7,27,49,.05);}
  .m-device-pair-v36 .m-device-kiosk>span{left:7px;}
  .m-device-pair-v36 .m-device-admin>span{right:0;}
  .m-hero-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px auto 0;max-width:430px;text-align:left;}
  .m-hero-highlights>div{padding:11px 10px;border:1px solid #dce7f3;border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 7px 20px rgba(7,27,49,.035);}
  .m-hero-highlights b,.m-hero-highlights span{display:block;}
  .m-hero-highlights b{color:#0b2d59;font-size:10px;line-height:1.25;}
  .m-hero-highlights span{margin-top:3px;color:#708299;font-size:9px;line-height:1.2;}
}

@media (max-width:460px){
  .m-nav{padding:0 10px;gap:7px;}
  .m-brand{gap:7px;}
  .m-brand img{width:35px;height:35px;}
  .m-brand strong{font-size:16px;}
  .m-nav-actions{gap:5px;}
  .m-nav-web,.m-nav-app{padding:0 10px;font-size:10px;}
  .m-device-pair-v36{min-height:270px;}
}
@media (max-width:390px){
  .m-brand strong{display:none;}
  .m-nav-web,.m-nav-app{padding:0 11px;font-size:10px;}
  .m-hero-v36 .m-hero-title{font-size:clamp(37px,12vw,47px);}
  .m-device-pair-v36{min-height:250px;}
  .m-device-pair-v36 .m-device{min-height:245px;}
  .m-hero-highlights{gap:6px;}
  .m-hero-highlights>div{padding:9px 8px;}
}