.upload-cta{display:inline-block;cursor:pointer}
.hero>div>small{display:block;margin-top:14px;color:var(--muted)}
.home-layout{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1180px) minmax(120px,180px);gap:18px;align-items:start;max-width:1600px;margin:0 auto}
.home-layout>main{min-width:0}
.features{max-width:1180px;margin:0 auto 46px;padding:30px}
.features>header{text-align:center;margin-bottom:34px}
.features h2{font-size:clamp(32px,4vw,48px);margin:10px 0}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature-grid article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.feature-grid article>b{color:var(--coral)}
.feature-grid h3{font-size:18px}
.feature-grid p{color:var(--muted);line-height:1.6}
.ad-placeholder{max-width:900px;margin:0 auto 34px;min-height:120px;border:1px dashed #aab7b0;display:grid;place-content:center;text-align:center;color:var(--muted);border-radius:12px}
.ad-placeholder small{margin-top:6px}
.side-ad{position:sticky;top:92px;min-height:620px;margin:30px 0 0;padding:18px}
.upload-start{display:flex;align-items:center;gap:10px;width:max-content}
.start-arrow{width:36px;height:36px;transform:rotate(-90deg);animation:arrow-nudge 1.2s ease-in-out infinite}
.upload-cta{animation:cta-pulse 1.8s ease-in-out infinite}
.desktop-note{display:none}
.tool-groups{display:grid;gap:18px}
.tool-group{scroll-margin-top:92px}
.tool-group{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tool-group button{min-height:48px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 22px;cursor:pointer;font-weight:800;color:var(--ink)}
.tool-group button.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 10px 24px #ff660033}
.tool-group small{color:var(--muted);line-height:1.4}
.tool-info{scroll-margin-top:92px;padding-top:38px}

.hero-showcase{position:relative;min-width:0}
.hero-slide{opacity:0;animation:hero-cards 12s infinite}
.hero-demo{position:relative}
.hero-image{position:absolute;inset:0;display:grid;place-items:center}
.hero-image:nth-child(2){animation-delay:4s}
.hero-image:nth-child(3){animation-delay:8s}
.hero-image img{display:block;width:auto;height:auto;max-height:100%;object-fit:contain;object-position:center;justify-self:center;align-self:center;translate:0 -24px}
.hero-image:nth-child(2) img{width:100%}
.hero-image:nth-child(3) img{width:100%}
.organize-showcase{height:400px;display:flex;align-items:center;justify-content:center;gap:26px}
.organize-showcase img{width:min(44%,210px);height:auto;filter:drop-shadow(0 18px 28px #17211d22)}
.organize-showcase .reorder-a{animation:swap-left 2.8s ease-in-out infinite}
.organize-showcase .reorder-b{animation:swap-right 2.8s ease-in-out infinite}
.flow-showcase{height:400px;display:grid;place-items:center;align-content:center;gap:14px}
.flow-top{display:flex;justify-content:center;gap:34px}
.flow-showcase img{width:92px;height:auto;filter:drop-shadow(0 12px 18px #17211d22)}
.flow-showcase .flow-arrow{width:130px;filter:none}
.flow-showcase .flow-bottom,.flow-showcase .flow-source{width:110px}
.template-showcase{height:400px;display:grid;place-items:center;align-content:center;gap:5px}
.template-source{width:min(250px,90%)}.template-source>small{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.template-source>div{padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.template-source i{display:block;width:72%;height:6px;margin-bottom:11px;border-radius:3px;background:#e7ece9}.template-source p{display:flex;align-items:center;gap:7px;margin:7px 0 0}.template-source p b,.template-dataset b{display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border-radius:50%;background:var(--green);color:#fff;font-size:10px}.template-source p span{flex:1;padding:5px 7px;border:1px dashed var(--green);font-size:10px;animation:template-field 6s ease-in-out infinite}
.template-connector{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.template-connector b{color:var(--green);font-size:16px;animation:template-arrow 1.2s ease-in-out infinite}
.template-dataset{width:min(320px,96%);padding:7px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 20px #17211d12}.template-dataset div{display:grid;grid-template-columns:19px repeat(3,1fr);gap:5px;align-items:center}.template-dataset div+div{margin-top:5px}.template-dataset span{min-width:0;padding:5px 3px;border-radius:4px;background:#f3f6f4;text-align:center;font-size:9px;overflow:hidden;text-overflow:ellipsis;animation:template-cell 6s ease-in-out infinite}.template-dataset span:nth-of-type(2){animation-delay:2s}.template-dataset span:nth-of-type(3){animation-delay:4s}
.template-results{display:flex;justify-content:center;gap:8px;width:100%}.template-results article{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;width:96px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 18px #17211d12;opacity:.35;animation:template-pdf 6s ease-in-out infinite}.template-results article:nth-child(2){animation-delay:2s}.template-results article:nth-child(3){animation-delay:4s}.template-results img{width:22px}.template-results strong{min-width:0;font-size:8px;color:var(--ink);text-align:center}

@keyframes hero-cards{
  0%,28%{opacity:1;transform:rotate(2deg) translate(0) scale(1)}
  33%,100%{opacity:0;transform:rotate(2deg) translate(16px,-10px) scale(.97)}
}
@keyframes arrow-nudge{0%,100%{translate:-3px 0}50%{translate:5px 0}}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 #ff660040;filter:brightness(1)}50%{box-shadow:0 0 0 8px #ff660000;filter:brightness(1.08)}}
@keyframes swap-left{0%,38%{transform:translateX(0);z-index:1}50%,88%{transform:translateX(calc(100% + 26px));z-index:2}100%{transform:translateX(0);z-index:1}}
@keyframes swap-right{0%,38%{transform:translateX(0);z-index:2}50%,88%{transform:translateX(calc(-100% - 26px));z-index:1}100%{transform:translateX(0);z-index:2}}
@keyframes template-field{0%,100%{background:#fff}8%,92%{background:var(--green2)}}
@keyframes template-arrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@keyframes template-cell{0%,28%,100%{background:#f3f6f4;color:var(--ink)}5%,23%{background:var(--green2);color:var(--green)}}
@keyframes template-pdf{0%,28%,100%{opacity:.35;transform:scale(.96)}5%,23%{opacity:1;transform:scale(1.06);border-color:var(--green)}}

@media(max-width:850px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.home-layout{display:block}.side-ad{display:none}}
@media(max-width:900px){.hero-showcase{display:none}.hero{grid-template-columns:1fr;padding:42px 20px}.hero h1{font-size:clamp(38px,12vw,58px)}.desktop-note{display:flex;align-items:center;gap:14px;margin:0 0 24px;padding:14px 16px;border:1px solid #ffc299;border-radius:14px;background:linear-gradient(135deg,#fff,#fff4ec);box-shadow:0 8px 24px #17211d12}.desktop-note>span:last-child{display:grid;gap:4px}.desktop-note strong{font-size:13px;color:var(--green)}.desktop-note small{font-size:11px;line-height:1.45;color:var(--muted)}.desktop-icon{position:relative;flex:0 0 43px;width:43px;height:31px;border:3px solid var(--green);border-radius:5px;background:#fff}.desktop-icon::before{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:7px;transform:translateX(-50%);background:var(--green)}.desktop-icon::after{content:"";position:absolute;left:50%;bottom:-12px;width:21px;height:3px;border-radius:3px;transform:translateX(-50%);background:var(--green)}.desktop-icon i{position:absolute;inset:4px;background:linear-gradient(135deg,var(--green2),#fff)}}
@media(max-width:520px){.feature-grid{grid-template-columns:1fr}.tool-group{display:grid;grid-template-columns:1fr}.tool-group button{width:100%}}
@media(prefers-reduced-motion:reduce){
  .start-arrow,.upload-cta,.hero-slide,.template-source p span,.template-dataset span,.template-connector b,.template-results article{animation:none}
  .organize-showcase img{animation:none!important}
  .hero-slide{display:none}
  .hero-slide:first-child{display:block;opacity:1}
  .template-results article{opacity:1;transform:none}
}

/* AdSense pending: keep ad slots in markup without showing empty ad spaces. */
.home-layout{display:block;max-width:1180px}
.ad-placeholder,.side-ad{display:none!important}