/* Homepage polish layer — 2026-09-16. */
.hero-card{transform:rotate(1.3deg);transform-origin:center;overflow:hidden}
/* Use the six exact uploaded PNGs. No sprite, crop, extra glow, mask, or generated replacement. */
.feature-icon.direct-app-icon{width:76px;height:76px;border-radius:0;margin-bottom:18px;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;box-shadow:none!important;display:block;overflow:visible!important}
.feature-icon.direct-app-icon img,.feature-icon.direct-app-icon svg{display:none!important}
/* Normalize the visible blue badge diameter. The source PNGs have different transparent padding, so each needs a small optical scale correction. */
.grid-3 .feature:nth-child(1) .feature-icon.direct-app-icon{background-image:url('/assets/app-icons/topic-practice-exact.png')!important;background-size:100% auto!important}
.grid-3 .feature:nth-child(2) .feature-icon.direct-app-icon{background-image:url('/assets/app-icons/mock-tests-exact.png')!important;background-size:112% auto!important}
.grid-3 .feature:nth-child(3) .feature-icon.direct-app-icon{background-image:url('/assets/app-icons/topic-performance-exact.png')!important;background-size:92% auto!important}
.grid-3 .feature:nth-child(4) .feature-icon.direct-app-icon{background-image:url('/assets/app-icons/study-plan-exact.png')!important;background-size:98% auto!important}
.grid-3 .feature:nth-child(5) .feature-icon.direct-app-icon{background-image:url('/assets/app-icons/recovery-scanner-exact.png')!important;background-size:102% auto!important}
.grid-3 .feature:nth-child(6) .feature-icon.direct-app-icon{background-image:url('/assets/app-icons/highway-code-exact.png')!important;background-size:109% auto!important}
.loop-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 54%,rgba(67,198,245,.18),transparent 44%),linear-gradient(180deg,#fff 0%,#f4faff 52%,#fff 100%)}
.learning-loop{position:relative;width:min(100%,700px);aspect-ratio:1/1;margin:24px auto 0}
.loop-road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop-road-base{fill:none;stroke:url(#roadGradient);stroke-width:36;filter:url(#roadShadow);opacity:.96}
.loop-road-highlight{fill:none;stroke:rgba(255,255,255,.43);stroke-width:5;stroke-linecap:round;stroke-dasharray:1.1 .8}
.loop-road-motion{fill:none;stroke:url(#roadMotionGradient);stroke-width:16;stroke-linecap:round;stroke-dasharray:10 90;filter:url(#roadGlow);animation:roadFlow 5.2s linear infinite}
@keyframes roadFlow{to{stroke-dashoffset:-100}}
.loop-center-copy{position:absolute;left:50%;top:50%;width:min(265px,38%);min-width:0;transform:translate(-50%,-50%);text-align:center;color:var(--ink);z-index:2;overflow-wrap:anywhere}
.loop-center-copy strong{display:block;font-size:clamp(1.02rem,1.65vw,1.36rem);line-height:1.14;letter-spacing:-.025em;margin-bottom:8px}
.loop-center-copy span{display:block;color:var(--muted);font-size:clamp(.72rem,.9vw,.82rem);line-height:1.38}
.loop-node{position:absolute;z-index:3;min-width:170px;max-width:190px;padding:12px 16px;border-radius:17px;background:rgba(255,255,255,.98);border:1.2px solid var(--border);box-shadow:0 14px 34px rgba(22,136,248,.12);backdrop-filter:blur(12px);text-align:center;font-weight:850;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.loop-node::after{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:22px;background:radial-gradient(circle,rgba(67,198,245,.18),transparent 68%);opacity:.9}

/* Four true roundabout exits: top, right, bottom and left. */
.loop-node-top{left:50%;top:14.8%;transform:translate(-50%,-72%)}
.loop-node-right{right:14.8%;top:50%;transform:translate(72%,-50%)}
.loop-node-bottom{left:50%;bottom:14.8%;transform:translate(-50%,72%)}
.loop-node-left{left:14.8%;top:50%;transform:translate(-72%,-50%)}

@media(max-width:900px){
  .hero-card{transform:none}
  .learning-loop{width:min(100%,620px)}
  .loop-node{min-width:154px;max-width:180px}
  .loop-center-copy{width:36%;max-width:235px}
}
@media(max-width:640px){
  .learning-loop{width:min(100%,400px);margin-top:18px}
  .loop-road-svg{inset:8%;width:84%;height:84%}
  .loop-road-base{stroke-width:42}
  .loop-road-highlight{stroke-width:6}
  .loop-road-motion{stroke-width:18}
  .loop-node{min-width:0;width:116px;max-width:116px;padding:9px 8px;border-radius:14px;font-size:.76rem;line-height:1.14;white-space:normal;overflow-wrap:anywhere}
  .loop-node::after{inset:-5px;border-radius:18px}
  .loop-node-top{left:50%;top:8%;transform:translate(-50%,-72%)}
  .loop-node-right{right:8%;top:50%;transform:translate(72%,-50%)}
  .loop-node-bottom{left:50%;bottom:8%;transform:translate(-50%,72%)}
  .loop-node-left{left:8%;top:50%;transform:translate(-72%,-50%)}
  .loop-center-copy{display:block;width:38%;max-width:145px}
  .loop-center-copy strong{font-size:.9rem;line-height:1.12;margin-bottom:5px}
  .loop-center-copy span{font-size:.62rem;line-height:1.28}
}
@media(prefers-reduced-motion:reduce){.loop-road-motion{animation:none!important;stroke-dasharray:22 78}}