/* Yaqin Kids — ultra polish layer (2026). Loaded last, on top of next + pack.
   Adds depth, motion and micro-interactions without touching the layout. */

/* ---------- 3-step onboarding grid ---------- */
.timeline.steps-3{grid-template-columns:repeat(3,1fr);max-width:1040px;margin-inline:auto}
@media(max-width:768px){.timeline.steps-3{grid-template-columns:1fr}}

/* ---------- Living gradient on highlighted words ---------- */
.grad{
  background:linear-gradient(110deg,#5557d9 0%,#7167e8 28%,#4b8dff 55%,#7167e8 78%,#5557d9 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ultraGrad 7s linear infinite
}
@keyframes ultraGrad{to{background-position:220% center}}

/* ---------- Premium primary button: inner highlight + sweep + arrow glide ---------- */
.btn-primary{
  position:relative;overflow:hidden;
  box-shadow:0 14px 30px -8px rgba(91,92,240,.55),inset 0 1px 0 rgba(255,255,255,.28)
}
.btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .7s ease
}
.btn-primary:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px)}
.cta .btn .ico:last-child,.feature-download .btn .ico:last-child,.price .btn .ico:last-child,.school .btn .ico:last-child{transition:transform .25s ease}
.cta .btn:hover .ico:last-child,.feature-download .btn:hover .ico:last-child,.price .btn:hover .ico:last-child,.school .btn:hover .ico:last-child{transform:translateX(4px)}

/* ---------- Header: crisper glass + hairline ---------- */
.header{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.logo img{transition:transform .3s ease}.logo:hover img{transform:scale(1.04)}

/* ---------- Hero: soft animated aurora behind the copy ---------- */
.hero{isolation:isolate}
.hero::after{
  content:"";position:absolute;z-index:-1;left:-8%;top:-6%;width:720px;height:620px;pointer-events:none;
  background:
    radial-gradient(42% 46% at 26% 30%,rgba(123,108,246,.26),transparent 70%),
    radial-gradient(40% 40% at 60% 68%,rgba(75,141,255,.20),transparent 72%),
    radial-gradient(34% 36% at 46% 48%,rgba(46,211,154,.14),transparent 70%);
  filter:blur(26px);opacity:.9;animation:ultraAurora 16s ease-in-out infinite
}
@keyframes ultraAurora{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(28px,-18px,0) scale(1.07)}
  66%{transform:translate3d(-20px,16px,0) scale(.96)}
}

/* ---------- Compatibility / trust pills: glassy with lift ---------- */
.strip{background:rgba(255,255,255,.72);backdrop-filter:blur(10px)}
.pill{background:rgba(255,255,255,.7);border:1px solid #e4e8f5;box-shadow:0 4px 14px rgba(58,66,104,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pill:hover{transform:translateY(-2px);border-color:#cfd6ee;box-shadow:0 10px 24px rgba(58,66,104,.1)}

/* ---------- Cards: gradient top accent on hover + staggered reveal ---------- */
.feat,.item,.tstep,.price{position:relative}
.feat::before,.item::before,.tstep::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#7c6cf6,#4b8dff);opacity:0;transform:scaleX(.4);transform-origin:left;
  transition:opacity .35s ease,transform .35s ease;z-index:3
}
.feat:hover::before,.item:hover::before,.tstep:hover::before{opacity:1;transform:scaleX(1)}
.item{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.item:hover{transform:translateY(-6px);border-color:#d3d2fb;box-shadow:0 24px 60px rgba(72,70,154,.12)}
.tstep{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.tstep:hover{transform:translateY(-6px);border-color:#d3d2fb;box-shadow:0 22px 58px rgba(72,70,154,.11)}
.tstep .n b{box-shadow:0 6px 16px rgba(91,92,240,.22)}
.bento .feat.reveal{transition:opacity .65s ease,transform .65s ease}
.bento .feat:nth-child(2){transition-delay:.06s}
.bento .feat:nth-child(3){transition-delay:.12s}
.bento .feat:nth-child(4){transition-delay:.06s}
.bento .feat:nth-child(5){transition-delay:.12s}
.bento .feat:nth-child(6){transition-delay:.18s}
.why .item:nth-child(2),.timeline .tstep:nth-child(2){transition-delay:.07s}
.why .item:nth-child(3),.timeline .tstep:nth-child(3){transition-delay:.14s}
.why .item:nth-child(4){transition-delay:.21s}

/* ---------- Pricing featured card: subtle brand glow ring ---------- */
.price.hot{box-shadow:0 30px 80px -24px rgba(91,92,240,.45),0 0 0 1.5px #9f98ff}
.price .amount{background:linear-gradient(120deg,#1b2140,#4b4dd6);-webkit-background-clip:text;background-clip:text}
.price.hot .amount{color:transparent}

/* ---------- FAQ: smoother open, brand tint on hover ---------- */
.faq details[open]{background:rgba(255,255,255,.97)}
.faq summary{transition:color .2s ease}
.faq details:hover summary{color:var(--brand-dark)}

/* ---------- CTA band: richer depth, glow ring, glass metric ---------- */
.cta-band{
  background:
    radial-gradient(120% 140% at 85% -10%,rgba(255,255,255,.22),transparent 45%),
    linear-gradient(118deg,#4f49e8 0,#6f62ec 48%,#4b8dff 100%);
  box-shadow:0 40px 90px -30px rgba(79,73,232,.7)
}
.cta-band>div:first-child h2{letter-spacing:-.05em}
.cta-band .btn-white{box-shadow:0 14px 34px rgba(16,20,50,.22);transition:transform .25s ease,box-shadow .25s ease}
.cta-band .btn-white:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(16,20,50,.3)}

/* ---------- Section eyebrow: tiny live dot ---------- */
.section-head .eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(46,211,154,.18);margin-right:2px
}

/* ---------- Nicer text selection + focus ---------- */
::selection{background:rgba(123,108,246,.22)}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:12px
}

/* ---------- Mobile adaptation fixes ---------- */
@media(max-width:768px){
  /* site-pack.css sets .bento to 12 columns with no mobile reset, so the
     feature cards collapse into 12 sliver columns — force a single column. */
  .bento{grid-template-columns:1fr}
  .bento .feat,.bento .feat:nth-child(1),.bento .feat:nth-child(2),.bento .feat:nth-child(7):last-child{grid-column:auto}
  /* keep the hero aurora contained and soft on small screens */
  .hero::after{width:118%;left:-9%;filter:blur(30px);opacity:.72}
  /* drop the reveal stagger on phones so cards don't appear to lag in */
  .bento .feat,.why .item,.timeline .tstep{transition-delay:0s}
}

/* ---------- Feature cards: equal visual area + full flat illustrations ---------- */
#features .feat{min-height:0}
#features .feat .viz{height:236px;min-height:236px!important;margin-top:auto}
@media(max-width:768px){#features .feat .viz{height:210px;min-height:210px!important}}

/* map card */
.mapviz2{position:relative;overflow:hidden;background:#e9edf4}
.mapviz2 .mapsvg{position:absolute;inset:0;width:100%;height:100%}
.mapviz2 .map-pin{position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);z-index:3}
.mapviz2 .map-pin .halo{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;background:rgba(91,92,226,.2);transform:translate(-50%,-50%);animation:pulse 2s infinite}
.mapviz2 .map-pin .av{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:15px;border:3px solid #fff;box-shadow:0 10px 22px rgba(91,92,226,.45)}
.mapviz2 .map-chip{position:absolute!important;left:12px;bottom:12px;z-index:4;right:auto;top:auto}

/* notifications card */
.notif2{display:flex;flex-direction:column;gap:11px;padding:17px 15px;background:#eef2f9}
.notif2 .notif-hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.01em;color:#6b7180}
.notif2 .notif-hd .ico{width:15px;height:15px}
.notif2 .notif{position:static;left:auto;right:auto;top:auto;flex:1;min-height:0;display:flex;align-items:center;gap:11px;margin:0}
.notif2 .notif.nn2{margin-left:16px}
.notif2 .notif.nn3{margin-left:32px}

/* battery / connection card */
.battery2{display:flex;flex-direction:column;justify-content:center;gap:17px;padding:22px 18px;background:#eef2f9}
.battery2 .bt-hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:750;color:#6b7180}
.battery2 .live-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#10b981;animation:pulse 2s infinite}
.battery2 .bt-row{display:flex;align-items:center;gap:12px}
.battery2 .bt-face{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#8b8cf0,#5b5ce2);color:#fff;font-weight:800;font-size:14px}
.battery2 .bt-face.amber{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.battery2 .bt-mid{flex:1;display:flex;flex-direction:column;gap:7px}
.battery2 .bt-mid b{font-size:12px;font-weight:750;color:#3b3f4a}
.battery2 .bt-row .bar{height:9px;background:#dfe2e9;border-radius:5px;overflow:hidden}
.battery2 .bt-row .bar i{display:block;height:100%;border-radius:5px}
.battery2 .bt-pct{font-size:13px;font-weight:800;color:#3b3f4a;width:38px;text-align:right}

/* ---------- Respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .grad{animation:none}
  .hero::after{animation:none}
  .btn-primary::after{display:none}
  .bento .feat,.why .item,.timeline .tstep{transition-delay:0s!important}
  .mapviz2 .map-pin .halo,.battery2 .live-dot{animation:none}
}