/* ============ AIOOS landing — sections ============ */
.container{max-width:1200px; margin:0 auto; padding:0 40px}
.section{position:relative; padding:104px 0; z-index:10; scroll-margin-top:110px}
.section.tint{background:linear-gradient(180deg,#F4F8FD 0%, #EFF4FB 100%)}
.section.tight{padding:84px 0}

.sec-head{max-width:700px; margin:0 auto 60px; text-align:center}
.eyebrow2{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  background:rgba(45,108,246,.08); border:1px solid rgba(45,108,246,.12); padding:7px 14px; border-radius:100px}
.eyebrow2 .pip{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#14B8A6,#2D6CF6)}
.h2{font-family:var(--font-head); font-weight:700; font-size:46px; line-height:1.08; letter-spacing:-1.6px; color:var(--ink); margin-top:0}
.h2 .g{background:linear-gradient(96deg,var(--blue),#37A6FF 50%,#22D3EE); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lead{font-size:18px; line-height:1.62; color:var(--ink-2); margin-top:18px}

/* generic glass card */
.gl{background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.9);
  border-radius:22px; box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 26px 54px -30px rgba(20,50,110,.4);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}

/* ---------- channels ---------- */
.chan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.chan{padding:30px 28px 32px; border-radius:24px; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s}
.chan:hover{transform:translateY(-6px); box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 36px 70px -30px rgba(20,50,110,.5)}
.chan .ic{width:58px; height:58px; border-radius:16px; display:grid; place-items:center; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 14px 26px -12px rgba(20,50,110,.5)}
.chan.tel .ic{background:linear-gradient(150deg,#3B82F6,#1E5BE6)}
.chan.web .ic{background:linear-gradient(150deg,#22D3EE,#2D6CF6)}
.chan.wa  .ic{background:linear-gradient(150deg,#25D366,#12A14A)}
.chan h3{font-family:var(--font-head); font-weight:700; font-size:23px; letter-spacing:-.4px; color:var(--ink); margin-top:20px}
.chan p{font-size:15px; line-height:1.55; color:var(--ink-2); margin-top:9px}
.chan ul{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px}
.chan li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink-soft)}
.chan li .ck{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;margin-top:1px;
  background:rgba(20,184,166,.14); color:#0E9F8E}
.chan .glow{position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; filter:blur(46px); opacity:.5}
.chan.tel .glow{background:#3B82F6}.chan.web .glow{background:#22D3EE}.chan.wa .glow{background:#25D366}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative}
.step{padding:30px 28px; border-radius:22px; position:relative}
.step .num{width:46px;height:46px;border-radius:14px; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800; font-size:20px; color:#fff;
  background:linear-gradient(150deg,var(--ink),#2a3a5c); box-shadow:0 12px 24px -12px rgba(15,27,51,.7)}
.step h3{font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--ink); margin-top:18px; letter-spacing:-.3px}
.step p{font-size:15px; line-height:1.55; color:var(--ink-2); margin-top:8px}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:48px 40px; border-radius:26px;
  background:linear-gradient(130deg,#0F1B33 0%, #16294f 56%, #1d2c52 100%); color:#fff; position:relative; overflow:hidden}
.stats::before{content:""; position:absolute; right:-60px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,.34), transparent 64%); filter:blur(26px)}
.stats::after{content:""; position:absolute; left:-80px; bottom:-120px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,252,.3), transparent 64%); filter:blur(26px)}
.stat{position:relative; text-align:center}
.stat .n{font-family:var(--font-head); font-weight:800; font-size:48px; letter-spacing:-2px; line-height:1;
  background:linear-gradient(120deg,#fff,#9fd0ff 60%,#6ee7df); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat .l{font-size:14px; font-weight:600; color:rgba(255,255,255,.74); margin-top:12px; letter-spacing:.01em}
.stat+ .stat::before{content:""; position:absolute; left:-10px; top:14%; height:72%; width:1px; background:rgba(255,255,255,.12)}

/* ---------- features grid ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{padding:26px 24px; border-radius:20px; background:#fff; border:1px solid rgba(24,54,120,.08);
  box-shadow:0 18px 40px -28px rgba(20,50,110,.4); transition:transform .3s, box-shadow .3s}
.feat:hover{transform:translateY(-4px); box-shadow:0 28px 56px -30px rgba(20,50,110,.5)}
.feat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center; color:var(--blue);
  background:linear-gradient(150deg,#EAF1FE,#E6F7F6)}
.feat h4{font-family:var(--font-head); font-weight:700; font-size:17.5px; color:var(--ink); margin-top:16px; letter-spacing:-.2px}
.feat p{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:7px}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.quote{padding:28px 26px; border-radius:22px; display:flex; flex-direction:column}
.quote .stars{color:#FF801E; font-size:15px; letter-spacing:1px}
.quote p{font-size:16px; line-height:1.6; color:var(--ink-soft); font-weight:500; margin-top:14px; flex:1}
.quote .who{display:flex; align-items:center; gap:12px; margin-top:22px}
.quote .av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--font-head); font-size:16px}
.quote .nm{font-weight:700; font-size:14.5px; color:var(--ink)}
.quote .role{font-size:12.5px; font-weight:600; color:var(--muted-2)}

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.price{padding:32px 28px; border-radius:24px; background:#fff; border:1px solid rgba(24,54,120,.1);
  box-shadow:0 22px 50px -34px rgba(20,50,110,.4); display:flex; flex-direction:column; position:relative}
.price.best{background:linear-gradient(180deg,#0F1B33,#1a2c54); color:#fff; border:none; transform:translateY(-12px);
  box-shadow:0 40px 80px -34px rgba(15,27,51,.8); overflow:visible; padding-top:42px}
.price .tier{font-family:var(--font-head); font-weight:700; font-size:18px; letter-spacing:.01em}
.price.best .tier{color:#bcd6ff}
.price .badge{position:absolute; top:0; left:50%; transform:translate(-50%,-52%); z-index:3;
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#08233A; background:linear-gradient(135deg,#5EEAD4,#22D3EE 52%,#60B1FF); padding:8px 16px; border-radius:100px;
  box-shadow:0 12px 26px -10px rgba(34,211,238,.85), inset 0 1px 0 rgba(255,255,255,.55); white-space:nowrap}
.price .badge svg{margin-top:-1px}
.price .amt{margin-top:18px; display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap}
.price .amt .v{font-family:var(--font-head); font-weight:800; font-size:46px; letter-spacing:-2px; line-height:1; color:var(--ink); white-space:nowrap}
.price.best .amt .v{color:#fff}
.price .amt .per{font-size:14px; font-weight:600; color:var(--muted-2); padding-bottom:6px; white-space:nowrap}
.price.best .amt .per{color:rgba(255,255,255,.6)}
.price .desc{font-size:14px; color:var(--ink-2); margin-top:12px; line-height:1.5}
.price.best .desc{color:rgba(255,255,255,.7)}
.price ul{list-style:none; margin:22px 0 26px; display:flex; flex-direction:column; gap:12px; flex:1}
.price li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink-soft)}
.price.best li{color:rgba(255,255,255,.9)}
.price li .ck{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;margin-top:1px;
  background:rgba(20,184,166,.16); color:#0E9F8E}
.price.best li .ck{background:rgba(45,212,191,.22); color:#5EEAD4}
.pbtn{display:flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:700; font-size:15.5px;
  padding:14px 20px; border-radius:14px; cursor:pointer; text-decoration:none; transition:transform .2s, box-shadow .2s; border:none}
.pbtn.solid{background:var(--blue-soft); color:#fff; box-shadow:inset 0 4px 4px rgba(255,255,255,.35), 0 18px 34px -16px rgba(0,132,255,.8)}
.pbtn.light{background:#fff; color:var(--ink); box-shadow:0 14px 30px -16px rgba(15,27,51,.6)}
.pbtn.outline{background:rgba(255,255,255,.06); color:var(--ink); border:1px solid rgba(24,54,120,.18)}
.pbtn:hover{transform:translateY(-2px)}

/* ---------- faq ---------- */
.faq{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.qa{border-radius:16px; padding:4px 22px; background:rgba(255,255,255,.7); border:1px solid rgba(24,54,120,.1);
  box-shadow:0 14px 34px -26px rgba(20,50,110,.4)}
.qa summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:20px 0;
  font-family:var(--font-head); font-weight:700; font-size:17.5px; color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ch{margin-left:auto; width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(45,108,246,.1); color:var(--blue); transition:transform .3s}
.qa[open] summary .ch{transform:rotate(45deg)}
.qa .a{font-size:15.5px; line-height:1.62; color:var(--ink-2); padding:0 42px 22px 0}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; border-radius:30px; padding:72px 56px; text-align:center;
  background:linear-gradient(125deg,#1452C6 0%, #2D6CF6 40%, #14B8A6 100%); color:#fff;
  box-shadow:0 50px 90px -40px rgba(20,80,200,.7)}
.cta-band::before{content:""; position:absolute; right:-100px; top:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 62%)}
.cta-band::after{content:""; position:absolute; left:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,252,.4), transparent 62%)}
.cta-band h2{position:relative; font-family:var(--font-head); font-weight:700; font-size:44px; letter-spacing:-1.5px; line-height:1.08}
.cta-band p{position:relative; font-size:18px; color:rgba(255,255,255,.86); margin-top:16px; max-width:560px; margin-left:auto; margin-right:auto}
.cta-band .row{position:relative; display:flex; gap:16px; justify-content:center; margin-top:32px; flex-wrap:wrap}
.cta-white{display:inline-flex; align-items:center; gap:11px; background:#fff; color:var(--ink); font-weight:700; font-size:16.5px;
  padding:15px 26px; border-radius:15px; text-decoration:none; box-shadow:0 20px 40px -18px rgba(0,0,0,.4); transition:transform .2s}
.cta-white:hover{transform:translateY(-2px)}
.cta-ghost{display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:16.5px;
  padding:15px 24px; border-radius:15px; text-decoration:none; border:1px solid rgba(255,255,255,.45); transition:background .2s}
.cta-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- footer ---------- */
.footer{background:#0F1B33; color:#fff; padding:72px 0 36px; position:relative; z-index:10}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.foot-brand .brand{color:#fff; font-family:var(--font-head); font-weight:800; font-size:22px; letter-spacing:-.04em; display:flex; align-items:center; gap:9px}
.foot-brand p{font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.6); margin-top:16px; max-width:300px}
.foot-soc{display:flex; gap:12px; margin-top:20px}
.foot-soc a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.08); transition:background .2s}
.foot-soc a:hover{background:rgba(255,255,255,.18)}
.foot-col h5{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.foot-col ul{list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:12px}
.foot-col a{color:rgba(255,255,255,.78); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:52px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:rgba(255,255,255,.5); flex-wrap:wrap}

/* ---------- scroll reveal (additive; visible by default) ---------- */
.ro{opacity:1}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ro.shown{animation:roUp .8s cubic-bezier(.2,.75,.25,1) both}
    .ro.s1{animation-delay:.06s}.ro.s2{animation-delay:.14s}.ro.s3{animation-delay:.22s}
  }
}
@keyframes roUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .section{padding:72px 0} .container{padding:0 24px}
  .h2{font-size:36px; letter-spacing:-1px}
  .chan-grid,.steps,.feat-grid,.quotes,.price-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr); gap:32px 20px; padding:40px 28px}
  .stat+ .stat::before{display:none}
  .price.best{transform:none}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .cta-band{padding:56px 28px} .cta-band h2{font-size:34px}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .h2{font-size:30px}
}