/* ==========================================================================
   Motion & polish layer (loaded after site.css)
   Everything here is progressive: without JavaScript, or with "reduce motion",
   the site simply shows its normal static design.
   ========================================================================== */

/* ---------- scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none;background:transparent}
.scroll-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--primary),#22d3ee,var(--green))}

/* ---------- reveal on scroll ---------- */
html.js [data-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js [data-reveal="left"]{transform:translate3d(-40px,0,0)}
html.js [data-reveal="right"]{transform:translate3d(40px,0,0)}
html.js [data-reveal="zoom"]{transform:scale(.94)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal].is-in.plan.featured{transform:translateY(-14px)}

/* ---------- gradient headline accent ---------- */
.slide-content h1 em,.slide-content h2.hero-title em,.page-hero h1 em{font-style:normal;background:linear-gradient(90deg,#7fb0ff,#5eead4,#7fb0ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s linear infinite}
@keyframes gradShift{to{background-position:200% center}}

/* ---------- hero: floating light orbs ---------- */
.hero .orb,.page-hero .orb,.stats .orb,.cta-band .orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.5;pointer-events:none;z-index:0;animation:floaty 14s ease-in-out infinite}
.orb.o1{width:340px;height:340px;background:#2563eb;top:-80px;left:-60px}
.orb.o2{width:280px;height:280px;background:#06b6d4;bottom:-60px;right:8%;animation-delay:-5s;animation-duration:17s}
.orb.o3{width:200px;height:200px;background:#10b981;top:35%;right:-40px;opacity:.28;animation-delay:-9s}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-34px,0) scale(1.1)}}

/* ---------- inner page banner ---------- */
.page-hero{background:radial-gradient(900px 400px at 85% -10%,rgba(34,211,238,.28),transparent 60%),radial-gradient(700px 380px at 5% 110%,rgba(37,99,235,.55),transparent 60%),linear-gradient(135deg,#061739,#0b2d7a)}
.page-hero:after{content:'';position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{animation:rise .8s both}
.page-hero .crumbs{animation:rise .8s both;backdrop-filter:blur(4px)}

/* ---------- buttons: shine sweep + press ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .7s;z-index:-1}
.btn:hover:before{left:140%}
.btn:active{transform:translateY(0) scale(.98)}
.btn .icon{transition:transform .25s}
.btn:hover .icon{transform:translateX(4px)}

/* ---------- navigation underline ---------- */
.nav>li>a{position:relative}
@media(min-width:1361px){
  .nav>li>a:after{content:'';position:absolute;left:.9em;right:.9em;bottom:.45em;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
  .nav>li>a:hover:after,.nav>li>a.active:after{transform:scaleX(1)}
  .nav .sub{display:block;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,transform .22s,visibility .22s}
  .nav li:hover>.sub,.nav li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
}
.header-inner.is-stuck{backdrop-filter:saturate(1.4) blur(10px);background:rgba(255,255,255,.92)}

/* ---------- cards: lift, glow, icon pop ---------- */
.why-card,.service-card,.post-card,.plan,.team-card,.review-card,.quote-card,.contact-tile,.card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .25s}
.why-card:hover,.service-card:hover,.post-card:hover,.team-card:hover,.review-card:hover{box-shadow:0 26px 60px rgba(18,89,245,.18)}
.plan:not(.featured):hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.why-card .tile,.service-card .thumb .icon,.stat .tile{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.why-card:hover .tile{transform:scale(1.12) rotate(-6deg)}
.service-card:hover .thumb .icon{transform:scale(1.15) rotate(5deg)}
.stat:hover .tile{transform:scale(1.08) rotate(6deg)}
.step .num{transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s}
.step:hover .num{transform:scale(1.12) rotate(-5deg);background:var(--primary-dark)}
.post-card .cover{position:relative}
.post-card .cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,26,62,.35));opacity:0;transition:opacity .3s}
.post-card:hover .cover:after{opacity:1}

/* ---------- sections: eyebrow draw-in, soft section backdrop ---------- */
.section-head .eyebrow:before{animation:spinIn 1s both}
@keyframes spinIn{from{transform:rotate(-180deg) scale(0)}to{transform:none}}
.section.soft{background:linear-gradient(180deg,#f4f7fc,#eef3fc)}
.section-head h2{letter-spacing:-.01em}

/* ---------- stats band ---------- */
.stats{position:relative}
.stats .container{position:relative;z-index:2}

/* ---------- floating call-to-action pulse ---------- */
.wa-float{animation:waPulse 2.8s ease-in-out infinite}
@keyframes waPulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.2),0 0 0 0 rgba(37,211,102,.45)}50%{box-shadow:0 8px 24px rgba(0,0,0,.2),0 0 0 14px rgba(37,211,102,0)}}
.to-top{transition:opacity .3s,transform .3s}
.mobile-bar{animation:barUp .6s .5s both cubic-bezier(.2,.7,.2,1)}
@keyframes barUp{from{transform:translateY(100%)}to{transform:none}}

/* ---------- article typography & editor images ---------- */
.prose{font-size:1.06rem;line-height:1.85}
.prose h2{margin-top:1.8em;padding-top:.2em;position:relative}
.prose h2:before{content:'';display:block;width:46px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--primary),#22d3ee);margin-bottom:.55em}
.prose h3{margin-top:1.5em}
.prose img{border-radius:var(--radius-lg);box-shadow:var(--shadow);margin:1.6em auto;max-width:100%;height:auto}
.prose figure{margin:1.6em 0}.prose figcaption{font-size:.88rem;color:var(--muted);text-align:center;margin-top:.5em}
.prose blockquote{margin:1.6em 0;padding:1.1em 1.5em;border-left:4px solid var(--primary);background:var(--primary-soft);border-radius:0 var(--radius-lg) var(--radius-lg) 0;color:var(--ink);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.97rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:.7em .9em;text-align:left}
.prose th{background:var(--soft);font-family:var(--font-head)}
.prose pre,.prose code{background:#0f1c33;color:#e6efff;border-radius:6px}.prose code{padding:.1em .4em;font-size:.92em}.prose pre{padding:1em;overflow-x:auto}.prose pre code{background:none;padding:0}
.prose ul,.prose ol{padding-left:1.4em}.prose li{margin:.35em 0}
.prose img[style*="float"]{max-width:46%}
@media(max-width:700px){.prose img[style*="float"]{float:none!important;max-width:100%}}

/* ---------- quick answer + FAQ (AEO) ---------- */
.answer-box{margin:0 0 2em;padding:20px 24px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#eef4ff,#e6fbf5);border:1px solid #cfe0ff;border-left:5px solid var(--primary)}
.answer-box b{display:flex;align-items:center;gap:.5em;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;color:var(--primary);margin-bottom:.4em}
.answer-box p{margin:0;color:var(--ink);font-size:1.08rem;line-height:1.7}
.page-faq{margin:3em 0 1em}
.page-faq details{border:1px solid var(--line);border-radius:var(--radius-lg);margin:0 0 12px;background:#fff;transition:box-shadow .25s,border-color .25s}
.page-faq details[open]{border-color:var(--primary);box-shadow:var(--shadow)}
.page-faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;font-family:var(--font-head);font-weight:700;color:var(--ink);position:relative}
.page-faq summary::-webkit-details-marker{display:none}
.page-faq summary:after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.3rem;line-height:1;transition:transform .3s,background .3s}
.page-faq details[open] summary:after{content:'–';background:var(--primary);color:#fff}
.page-faq details>div{padding:0 22px 6px;animation:faqIn .35s both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- forms ---------- */
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(18,89,245,.14)}

/* ---------- mobile menu: accordion ---------- */
@media(max-width:1360px){
  .nav-wrap .main-nav{transform-origin:top;animation:menuIn .25s both}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav>li{border-bottom:1px solid var(--line);position:relative}
  .nav>li:last-child{border-bottom:0}
  .nav>li>a{padding:.95em .2em;font-size:1.05rem;padding-right:3.2rem}
  .nav>li.has-sub>a .caret{display:none}
  .nav .sub{display:none;padding:0 0 10px 12px;animation:faqIn .25s both}
  .nav li.sub-open>.sub{display:block}
  .nav .sub a{padding:.6em .4em;font-size:.98rem;color:var(--text)}
  .nav .sub-toggle{position:absolute;right:0;top:6px;width:42px;height:42px;border-radius:10px;border:0;background:var(--soft);color:var(--ink);display:grid;place-items:center;cursor:pointer}
  .nav .sub-toggle svg{width:20px;height:20px;transition:transform .3s}
  .nav li.sub-open>.sub-toggle{background:var(--primary);color:#fff}
  .nav li.sub-open>.sub-toggle svg{transform:rotate(180deg)}
  .nav li:hover>.sub,.nav li:focus-within>.sub{display:none}
  .nav li.sub-open:hover>.sub,.nav li.sub-open:focus-within>.sub,.nav li.sub-open>.sub{display:block}
}

/* ---------- small phones ---------- */
@media(max-width:560px){
  body{font-size:16px}
  h2{font-size:1.6rem}
  .btn{padding:.9em 1.3em}
  .slide-actions .btn{width:100%;justify-content:center}
  .section-head{margin-bottom:36px}
  .card{padding:24px 20px}
  .cta-band{padding:34px 22px}
  .stat b{font-size:2.2rem}.stat .tile{width:68px;height:68px}
  .page-hero{padding:72px 0 52px}
  .prose{font-size:1rem}
  table{font-size:.9rem}
}
@media(max-width:380px){.container{width:92%}.brand img{height:36px}.header-actions{gap:6px}.icon-btn{width:42px;height:42px}}

/* ---------- respect "reduce motion" ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- cookie banner: compact on phones ---------- */
@media(max-width:600px){
  .cookie-inner{padding:14px 16px}
  .cookie-title{font-size:1.02rem;margin-bottom:.2em}
  .cookie-banner p{font-size:.84rem;line-height:1.45;margin:0 0 .6em}
  .cookie-actions{gap:8px}
  .cookie-actions .btn,.cookie-actions button{padding:.6em .9em;font-size:.74rem}
  .cookie-link{font-size:.8rem}
}

/* the arrow buttons injected by motion.js only exist for the phone menu */
.nav .sub-toggle{display:none}
@media(max-width:1360px){.nav .sub-toggle{display:grid}}