/* ==========================================================================
   AnhLinh StayFlow — Landing page
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'UTM Avo';src:url("../fonts/UTMAvo-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'UTM Avo';src:url("../fonts/UTMAvo-Bold.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'UTM Avo';src:url("../fonts/UTMAvo-Italic.ttf") format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'UTM Avo';src:url("../fonts/UTMAvo-BoldItalic.ttf") format('truetype');font-weight:700;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --navy:#05375C;
  --blue:#056896;
  --cyan:#1AAACA;
  --aqua:#5FDEE4;
  --teal:#2BCAD4;
  --yellow:#FBD25F;
  --yellow-hover:#F5C63E;
  --line:#DCE7EB;
  --line-2:#D3E1E6;
  --line-3:#E6EFF2;
  --bg-soft:#F4F7F8;
  --bg-tint:#E6F6F9;
  --bg-photo:#E3EDF0;
  --text-muted:#5A6B75;
  --text-body:#33434D;
  --on-dark:#D6EEF4;
  --gradient:linear-gradient(135deg,#05375C 0%,#056896 35%,#1AAACA 70%,#5FDEE4 100%);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:#fff;font-family:'UTM Avo',sans-serif;color:var(--navy)}
button,input,select,textarea{font-family:'UTM Avo',sans-serif}
a{color:var(--navy);text-decoration:none}
img{max-width:100%}

.page{font-family:'UTM Avo',sans-serif;color:var(--navy);background:#fff;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto}

/* ---------- Shared: section heading ---------- */
.section-head{text-align:center;max-width:680px;margin:0 auto 32px}
.section-head--wide{max-width:720px}
.section-head--loose{margin-bottom:36px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--cyan);margin-bottom:8px}
.eyebrow--aqua{color:var(--aqua)}
.h2{font-size:clamp(26px,3vw,36px);font-weight:700;color:var(--navy);margin:0}
.h2--34{font-size:clamp(26px,3vw,34px)}
.h2--mb12{margin-bottom:12px}
.lead{font-size:15px;line-height:1.65;color:var(--text-muted);margin:0;text-wrap:pretty}

/* ---------- Shared: buttons ---------- */
.btn{display:inline-block;font-weight:700;border-radius:999px}
.btn--yellow{background:var(--yellow);color:var(--navy)}
.btn--blue{background:var(--blue);color:#fff}
.btn--lg{font-size:15px;padding:14px 26px}
.btn--md{font-size:14px;padding:12px 24px}
.btn--sm{font-size:14px;padding:10px 18px}
.btn--xs{font-size:13px;padding:10px 18px}

/* ---------- Shared: cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 8px 24px rgba(5,55,92,.06);display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(5,55,92,.12);border-color:var(--cyan)}
.card--full{height:100%}
.card--start{align-items:flex-start}
.card__title{font-size:18px;font-weight:700;color:var(--navy);line-height:1.35}
.card__title--lg{font-size:20px;line-height:normal}
.card__desc{font-size:14px;line-height:1.6;color:var(--text-muted)}
.card__row{display:flex;align-items:center;gap:14px}
.card__row--between{justify-content:space-between}
.card__num{font-size:13px;font-weight:700;color:var(--cyan)}
.card__sub{font-size:13px;color:var(--text-muted)}

.icon-box{width:56px;height:56px;border-radius:14px;background:var(--bg-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-box--text{font-size:22px;font-weight:700}

/* 5-column responsive grid (audiences + security) */
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:18px}
.grid-auto-300{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}

/* ---------- Shared: check lists ---------- */
.check-list{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.check-list__item{display:flex;gap:12px;align-items:flex-start}
.check-list__dot{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}
.check-list__dot--blue{background:var(--blue)}
.check-list__text{font-size:15px;line-height:1.6;color:var(--text-body)}
.check-list__text--light{color:#E6F3F7}

/* two-column split used by optimize / ota / check-in / cta */
.split{display:grid;gap:44px;align-items:center}
.split--440{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.split--420{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

/* ==========================================================================
   Header
   ========================================================================== */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header__inner{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header__brand{flex-shrink:0;display:block}
.header__logo{height:44px;width:auto;max-width:none;flex-shrink:0;display:block}
.header__nav{display:none;gap:26px;font-size:14px;font-weight:700;white-space:nowrap}
.header__nav a{color:var(--navy)}
.header__nav a.is-active{color:var(--blue);border-bottom:2px solid var(--cyan);padding-bottom:2px}
.header__actions{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}
.header__login{display:none;font-size:14px;font-weight:700;color:var(--navy);padding:9px 12px}
.header__burger{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer}
.header__menu{display:flex;flex-direction:column;border-top:1px solid var(--line);padding:8px 24px 16px;font-size:15px;font-weight:700}
.header__menu a{color:var(--navy);padding:10px 0}
.header__menu a.is-active{color:var(--blue)}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero{position:relative;background:var(--gradient);overflow:hidden}
.hero__bg{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero__overlay{display:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,55,92,.96) 0%,rgba(5,104,150,.82) 36%,rgba(5,104,150,0) 60%);pointer-events:none}
.hero__inner{position:relative;max-width:1200px;margin:0 auto;padding:64px 24px 72px;display:flex;flex-direction:column;justify-content:center}
.hero__kicker{font-size:13px;font-weight:700;color:var(--aqua);margin-bottom:16px;letter-spacing:.5px}
.hero__title{font-size:clamp(30px,4.2vw,48px);line-height:1.2;font-weight:700;color:#fff;margin:0 0 18px;max-width:620px;text-wrap:pretty}
.hero__lead{font-size:16px;line-height:1.65;color:#E6F3F7;margin:0 0 28px;max-width:540px;text-wrap:pretty}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__cta .btn--yellow{box-shadow:0 8px 20px rgba(251,210,95,.35)}
.hero__phone{margin-top:18px;font-size:14px;color:var(--on-dark);display:flex;align-items:center;gap:8px}
.hero__phone b{color:#fff}
.hero__stack{position:relative;max-width:1200px;margin:-32px auto 0;padding:0 24px 44px}
.hero__stack img{display:block;width:100%;border-radius:18px;box-shadow:0 24px 50px rgba(5,55,92,.35)}

.btn-play{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.7);color:#fff;font-weight:700;font-size:15px;padding:8px 22px 8px 8px;border-radius:999px;cursor:pointer}
.btn-play:hover{background:rgba(255,255,255,.2)}
.btn-play__icon{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center}
.btn-play--outline{display:inline-flex;background:transparent;border-color:rgba(255,255,255,.6);font-size:14px;padding:6px 20px 6px 6px}
.btn-play--outline:hover{background:transparent}
.btn-play--outline .btn-play__icon{width:30px;height:30px}

/* ==========================================================================
   2. Highlights
   ========================================================================== */
.highlights{background:var(--bg-soft)}
.highlights__grid{max-width:1200px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.highlight{display:flex;flex-direction:column;gap:10px}
.highlight__icon{width:48px;height:48px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.highlight__title{font-weight:700;font-size:16px}
.highlight__desc{font-size:14px;line-height:1.6;color:var(--text-muted)}

/* ==========================================================================
   3. Audiences
   ========================================================================== */
.audience{background:#fff;padding:56px 24px}

/* ==========================================================================
   4. Optimize
   ========================================================================== */
.optimize{background:var(--gradient);padding:64px 24px}
.optimize__panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:36px}
.optimize__title{font-size:clamp(26px,3vw,34px);line-height:1.3;font-weight:700;color:#fff;margin:0 0 20px;text-wrap:pretty}
.optimize__title span{color:var(--aqua)}
.optimize__photo-wrap{position:relative;padding:0 0 30px 30px}
.optimize__photo{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-photo)}
.optimize__photo img{display:block;width:100%;height:100%;object-fit:cover}
.optimize__badge{position:absolute;left:0;bottom:0;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.25);display:flex;align-items:center;gap:12px;max-width:260px}
.optimize__badge-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.optimize__badge-text{font-size:14px;font-weight:700;line-height:1.4;color:var(--navy)}

/* ==========================================================================
   5. Room calendar
   ========================================================================== */
.calendar{padding:58px 24px;background:#fff}
.calendar__stage{position:relative;max-width:980px;margin:0 auto;padding-right:clamp(0px,12vw,150px)}
.calendar__window{background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 30px 70px rgba(5,55,92,.16);overflow:hidden}
.calendar__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.calendar__bar-dot{width:10px;height:10px;border-radius:50%}
.calendar__bar-dot--red{background:#E0A49A}
.calendar__bar-dot--yellow{background:#F2D27A}
.calendar__bar-dot--green{background:#8DBFA5}
.calendar__bar-title{margin-left:12px;font-size:12px;font-weight:700;color:var(--navy)}
.calendar__body{padding:18px;overflow-x:auto}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;font-size:11px;font-weight:700}
.legend__item{display:flex;align-items:center;gap:6px}
.legend__swatch{width:12px;height:12px;border-radius:3px}
.schedule{min-width:560px}
.schedule__row{display:grid;grid-template-columns:80px repeat(7,minmax(0,1fr));gap:4px;margin-bottom:4px}
.schedule__day{font-size:10px;font-weight:700;color:var(--text-muted);text-align:center;padding:4px 0}
.schedule__room{font-size:11px;font-weight:700;display:flex;align-items:center}
.cell{height:30px;border-radius:6px;font-size:9px;font-weight:700;display:flex;align-items:center;padding:0 6px;white-space:nowrap;overflow:hidden}
.cell--free{background:var(--bg-soft);color:var(--text-muted)}
.cell--stay{background:var(--blue);color:#fff}
.cell--book{background:#BDEEF2;color:var(--navy)}
.cell--clean{background:#F3D9D3;color:#9A4A3C}
.swatch--free{background:var(--line)}
.swatch--stay{background:var(--blue)}
.swatch--book{background:#BDEEF2}
.swatch--clean{background:#F3D9D3}

.mini-phone{position:absolute;right:0;bottom:-28px;display:block;width:clamp(120px,18vw,190px);background:var(--navy);border-radius:28px;padding:8px;box-shadow:0 24px 50px rgba(0,0,0,.3)}
.mini-phone__screen{background:#fff;border-radius:22px;overflow:hidden}
.mini-phone__head{background:var(--blue);color:#fff;padding:14px 12px 12px}
.mini-phone__head small{display:block;font-size:9px;opacity:.8}
.mini-phone__head strong{display:block;font-size:13px;margin-top:2px}
.mini-phone__list{padding:10px;display:flex;flex-direction:column;gap:7px}
.mini-phone__row{display:flex;justify-content:space-between;align-items:center;font-size:9px;padding:6px 8px;border-radius:7px;background:var(--bg-soft)}
.mini-phone__row b:last-child{color:var(--blue)}

.trial-pill-wrap{display:flex;justify-content:center;margin-top:64px}
.trial-pill{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 20px;box-shadow:0 8px 24px rgba(5,55,92,.08)}
.trial-pill span{font-size:14px;font-weight:700;color:var(--navy)}

/* ==========================================================================
   6. OTA
   ========================================================================== */
.ota{background:var(--bg-soft);padding:58px 24px;position:relative;overflow:hidden}
.ota__watermark{position:absolute;right:-40px;top:50%;transform:translateY(-50%);font-size:clamp(120px,16vw,220px);font-weight:700;color:rgba(26,170,202,.07);line-height:1;pointer-events:none;white-space:nowrap}
.ota__inner{position:relative;max-width:1200px;margin:0 auto}
.ota__title,.checkin__title{font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--navy);margin:0 0 20px}
.channels{background:#fff;border-radius:24px;padding:26px;box-shadow:0 24px 60px rgba(5,55,92,.12)}
.channels__title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px}
.channels__date{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.channels__list{display:flex;flex-direction:column;gap:10px}
.channel{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.channel__badge{width:40px;height:40px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);color:var(--blue);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.channel__info{min-width:0}
.channel__name{font-size:14px;font-weight:700}
.channel__sub{font-size:12px;color:var(--text-muted)}
.channel__status{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.channel__status--ok{background:#E3F4EA;color:#1F7A45}
.channel__status--dev{background:var(--bg-tint);color:var(--blue)}
.channel__status--soon{background:#F1F3F5;color:var(--text-muted)}

/* ==========================================================================
   7. Check-in
   ========================================================================== */
.checkin{background:#fff;padding:58px 24px}
.checkin__photo{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-photo)}
.checkin__photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   8. Mobile app
   ========================================================================== */
.app{background:var(--bg-soft);padding:58px 24px}
.app__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:44px;align-items:center}
.app__features{display:flex;flex-direction:column;gap:10px}
.app__feature{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.app__feature-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}
.app__feature-label{font-size:14px;font-weight:700}
.app__phones{display:flex;justify-content:center;gap:20px;align-items:flex-end}
.phone{width:min(44%,200px);background:var(--navy);border-radius:30px;padding:8px;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.phone--raised{transform:translateY(-24px)}
.phone__screen{background:#fff;border-radius:24px;overflow:hidden;aspect-ratio:9/18;display:flex;flex-direction:column}
.phone__head{background:var(--blue);color:#fff;padding:14px 12px}
.phone__head--cyan{background:var(--cyan)}
.phone__head small{display:block;font-size:9px;opacity:.8}
.phone__head--cyan small{opacity:.9}
.phone__head strong{display:block;font-size:13px}
.phone__list{padding:10px;display:flex;flex-direction:column;gap:7px}
.booking{display:flex;gap:7px;align-items:center;padding:6px;border-radius:8px;background:var(--bg-soft)}
.booking__src{width:26px;height:26px;border-radius:6px;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.booking__src--blue{background:var(--blue)}
.booking__src--cyan{background:var(--cyan)}
.booking__src--teal{background:var(--teal)}
.booking__src--navy{background:var(--navy)}
.booking__body{min-width:0}
.booking__name{font-size:8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booking__info{font-size:8px;color:var(--blue);font-weight:700}
.bars{padding:12px 10px;display:flex;align-items:flex-end;gap:4px;height:90px;border-bottom:1px solid var(--line);margin:0 10px}
.bars__bar{flex:1;border-radius:2px 2px 0 0;background:var(--blue)}
.bars__bar--last{background:var(--teal)}
.phone__stats{padding:10px;display:flex;flex-direction:column;gap:6px}
.stat-row{display:flex;justify-content:space-between;font-size:8px;padding:6px 8px;border-radius:7px;background:var(--bg-soft)}
.stat-row b:last-child{color:var(--navy)}

/* ==========================================================================
   9. Modules
   ========================================================================== */
.modules{background:var(--navy);padding:60px 24px}
.modules .h2{color:#fff}
.modules .lead{color:var(--on-dark)}
.modules__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}

/* ==========================================================================
   10. How it works  /  11. Roles
   ========================================================================== */
.steps{background:var(--bg-soft);padding:56px 24px}
.steps__line{flex:1;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(26,170,202,0))}
.roles{background:#fff;padding:56px 24px}
.roles__points{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line-3)}
.roles__point{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--text-body)}
.roles__point svg{flex-shrink:0;margin-top:2px}

/* ==========================================================================
   12. Pricing
   ========================================================================== */
.pricing{background:var(--bg-soft);padding:58px 24px}
.pricing__box{max-width:1100px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.pricing__intro{padding:44px 40px;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px}
.pricing__eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--aqua)}
.pricing__title{font-size:clamp(26px,3vw,34px);line-height:1.3;font-weight:700;margin:0}
.pricing__text{font-size:15px;line-height:1.65;color:var(--on-dark);margin:0}
.pricing__note{margin-top:6px;display:flex;gap:10px;align-items:flex-start;background:rgba(95,222,228,.12);border:1px solid rgba(95,222,228,.35);border-radius:14px;padding:14px 16px}
.pricing__note svg{flex-shrink:0;margin-top:1px}
.pricing__note span{font-size:15px;font-weight:700;line-height:1.5;color:#fff}
.pricing__list{padding:40px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.pricing__item{display:flex;gap:14px;align-items:flex-start}
.pricing__item-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--bg-tint);color:var(--blue);display:flex;align-items:center;justify-content:center}
.pricing__item-title{font-size:16px;font-weight:700;color:var(--navy)}
.pricing__item-desc{font-size:13px;line-height:1.55;color:var(--text-muted)}
.pricing__cta{margin-top:8px;align-self:flex-start}

/* ==========================================================================
   13. Security
   ========================================================================== */
.security{background:#fff;padding:56px 24px}

/* ==========================================================================
   14. CTA + form
   ========================================================================== */
.signup{background:var(--gradient);padding:58px 24px;position:relative;overflow:hidden}
.signup__ring{position:absolute;right:-120px;top:-80px;width:360px;height:360px;border-radius:50%;border:2px solid rgba(95,222,228,.5)}
.signup__inner{position:relative;max-width:1200px;margin:0 auto}
.signup__title{font-size:clamp(26px,3vw,36px);line-height:1.3;font-weight:700;color:#fff;margin:0 0 14px}
.signup__title span{color:var(--aqua)}
.signup__text{font-size:15px;line-height:1.65;color:var(--on-dark);margin:0 0 22px;font-style:italic}
.signup__points{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.signup__point{display:flex;gap:10px;align-items:center;color:#fff;font-size:15px;font-weight:700}
.signup__point-dot{width:20px;height:20px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.form-card{background:#fff;border-radius:20px;padding:30px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.form-card__title{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:18px}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.field input,.field select{border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-size:14px;outline:none;background:#fff}
.form__submit{margin-top:4px;background:var(--yellow);color:var(--navy);border:none;border-radius:999px;padding:14px;font-size:15px;font-weight:700;cursor:pointer}
.form__submit:hover{background:var(--yellow-hover)}
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form__error{font-size:13px;line-height:1.5;font-weight:700;color:#9A3B2E;background:#FBEDEA;border:1px solid #F0C9C2;border-radius:10px;padding:10px 14px}
.form__submit:disabled{opacity:.7;cursor:wait}
.form__note{font-size:12px;line-height:1.55;color:var(--text-muted);text-align:center}
.form__note a{color:var(--blue);font-weight:700;text-decoration:underline}
.form-success{text-align:center;padding:40px 10px}
.form-success__icon{width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success__title{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-success__text{font-size:14px;color:var(--text-muted);line-height:1.6}

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq{background:#fff;padding:58px 24px}
.faq__inner{max-width:900px;margin:0 auto}
.faq__head{text-align:center;margin-bottom:32px}
.faq__title{font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--navy);margin:0 0 10px}
.faq__sub{font-size:14px;color:var(--text-muted);margin:0 0 10px}
.faq__tel{font-size:18px;font-weight:700;color:var(--blue)}
.faq__list{display:flex;flex-direction:column;gap:10px}
.faq__item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq__item.is-open{border-color:var(--cyan);background:#EAF7FA}
.faq__q{width:100%;display:flex;align-items:center;gap:14px;background:none;border:none;padding:16px 20px;cursor:pointer;text-align:left}
.faq__icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;line-height:1}
.faq__icon::before{content:'+'}
.faq__item.is-open .faq__icon{background:var(--cyan);color:#fff}
.faq__item.is-open .faq__icon::before{content:'–'}
.faq__q-text{font-size:15px;font-weight:700;color:var(--navy)}
.faq__a{padding:0 20px 18px 60px;font-size:14px;line-height:1.7;color:var(--text-muted)}

/* ==========================================================================
   16. Testimonials
   ========================================================================== */
.reviews{background:var(--bg-soft);padding:58px 24px}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.review{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:16px}
.review__quote-mark{font-size:48px;line-height:.6;font-weight:700;color:var(--cyan);height:24px}
.review__text{font-size:15px;line-height:1.7;color:var(--text-body);flex:1;text-wrap:pretty}
.review__author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line-3)}
.review__avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-photo)}
.review__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.review__who{min-width:0}
.review__name{font-size:15px;font-weight:700;color:var(--navy)}
.review__role{font-size:13px;color:var(--text-muted)}
.reviews .section-head{margin-bottom:36px}
.reviews .h2{font-size:clamp(24px,2.8vw,34px)}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.footer{background:var(--navy);color:var(--on-dark);padding:56px 24px 26px}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:36px;margin-bottom:40px}
.footer__brand{grid-column:auto;min-width:0;max-width:380px}
.footer__logo{display:inline-flex;background:#fff;border-radius:12px;padding:8px 14px;margin-bottom:16px}
.footer__logo img{height:40px;width:auto;display:block}
.footer__name{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.footer__tagline{font-size:14px;color:var(--aqua);margin-bottom:16px}
.footer__contact{display:flex;flex-direction:column;gap:8px;font-size:13px}
.footer__contact b{color:#fff}
.footer__col-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:14px}
.footer__links{display:flex;flex-direction:column;gap:9px}
.footer__links a{font-size:13px;color:var(--on-dark)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#A9CCDA}
.footer__legal{display:flex;gap:16px}
.footer__legal a{color:#A9CCDA}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Desktop: ≥ 1080px — full nav + hero background image */
@media (min-width:1080px){
  .header__nav{display:flex}
  .header__burger,.header__menu{display:none}
  .hero__bg,.hero__overlay{display:block}
  .hero__stack{display:none}
  .hero__inner{min-height:min(37.5vw,760px)}
}

/* Tablet: 640–999px — 6-column audience / security grid */
@media (max-width:999px){
  .grid-5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid-5>*{grid-column:span 2}
  .grid-5>:nth-child(4){grid-column:2 / span 2}
}

/* Mobile: < 640px */
@media (max-width:639px){
  .grid-5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-5>:nth-child(4){grid-column:span 2}
  .grid-5>:nth-child(5){grid-column:2 / span 2}
  .mini-phone{display:none}
  .footer__brand{grid-column:auto}
}
@media (min-width:640px){
  .header__login{display:block}
  .footer__brand{grid-column:span 2}
}