/* ranklogs.com/features — page styles (design approved via preview artifact 2026-07-13).
   All classes ftr- prefixed. Hero uses the shared .hero-section (nav-blend supplies the
   fixed-header top padding); everything else is self-contained here. */

/* ---------- Hero content ---------- */
.ftr-hero{text-align:center;padding-bottom:40px !important}
.ftr-hero h1{margin:0 auto 14px;max-width:760px;font:clamp(32px,4.6vw,50px)/1.08 'Zoho_Puvi_SemiBold',Arial,sans-serif;letter-spacing:-1.6px;color:#0b1526;text-wrap:balance}
.ftr-hero h1 span{background:linear-gradient(100deg,#ff8b1f,#ff5d00);-webkit-background-clip:text;background-clip:text;color:transparent}
.ftr-hero .ftr-sub{margin:0 auto 22px;max-width:600px;font:16px/1.55 'Zoho_Puvi_Regular',Arial,sans-serif;color:#5a6577}
.ftr-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ftr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:0 24px;border-radius:12px;font:14.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;text-decoration:none;transition:transform .15s ease}
.ftr-btn:hover{transform:translateY(-1px)}
.ftr-btn-p{color:#fff;background:linear-gradient(135deg,#ff8b1f,#ff5d00);box-shadow:0 12px 24px rgba(255,122,0,.25)}
.ftr-btn-s{color:#0d1b33;background:#fff;border:1px solid rgba(13,27,51,.18)}
.ftr-hero-stats{margin:26px auto 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ftr-hstat{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(13,27,51,.1);font:12.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#3c4657}
.ftr-hstat b{color:#ff5d00}

/* ---------- Sticky jump nav ---------- */
.ftr-jump{position:sticky;top:64px;z-index:50;background:rgba(255,250,243,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(13,27,51,.07)}
.ftr-jump-in{max-width:1140px;margin:0 auto;display:flex;gap:8px;padding:10px 28px;overflow-x:auto;scrollbar-width:none}
.ftr-jump-in::-webkit-scrollbar{display:none}
.ftr-jchip{flex:none;padding:8px 15px;border-radius:999px;border:1px solid #e6e9f0;background:#fff;font:12.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#5a6577;text-decoration:none;transition:all .15s ease;white-space:nowrap}
.ftr-jchip.on{border-color:rgba(255,106,0,.5);color:#c25100;background:#fff7ef}
@media(max-width:760px){.ftr-jump{top:56px}}

/* ---------- Showcase sections ---------- */
.ftr-show{padding:84px 28px}
.ftr-show.alt{background:#f7f8fb}
.ftr-show-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.ftr-show.flip .ftr-show-grid > .ftr-copy{order:2}
.ftr-copy .ftr-kick{margin:0 0 12px;font:11.5px/1 'Zoho_Puvi_Bold',Arial,sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:#ff5d00}
.ftr-copy h2{margin:0 0 12px;font:clamp(24px,2.8vw,32px)/1.16 'Zoho_Puvi_SemiBold',Arial,sans-serif;letter-spacing:-.9px;color:#0b1526;text-wrap:balance}
.ftr-copy .ftr-lead{margin:0 0 18px;font:15px/1.6 'Zoho_Puvi_Regular',Arial,sans-serif;color:#5a6577}
.ftr-copy ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr-copy li{display:flex;gap:10px;align-items:flex-start;font:14px/1.5 'Zoho_Puvi_Medium',Arial,sans-serif;color:#232f42}
.ftr-copy li i{flex:none;width:19px;height:19px;border-radius:50%;background:#eafaf1;display:grid;place-items:center;font:10px/1 'Zoho_Puvi_Bold',Arial,sans-serif;font-style:normal;color:#19b66a}
.ftr-copy .ftr-more{font:14px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#2f5fe0;text-decoration:none}
.ftr-copy .ftr-more:hover{color:#ff5d00}
@media(max-width:860px){
  .ftr-show{padding:64px 22px}
  .ftr-show-grid{grid-template-columns:1fr;gap:30px}
  .ftr-show.flip .ftr-show-grid > .ftr-copy{order:0}
}

/* scene shell */
.ftr-scene{position:relative;border:1px solid #e6e9f0;border-radius:18px;background:#fff;box-shadow:0 24px 60px -30px rgba(11,21,38,.28);padding:20px;min-height:280px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ftr-scene .ftr-bar{display:flex;align-items:center;gap:6px;margin:-4px 0 2px}
.ftr-scene .ftr-bar b{width:8px;height:8px;border-radius:50%;background:#e4e7ee}
.ftr-scene .ftr-bar span{margin-left:8px;font:11px/1 'Zoho_Puvi_Medium',Arial,sans-serif;color:#8a93a5}
.ftr-tile-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ftr-tile{border:1px solid #eceef4;border-radius:11px;background:#fbfbfd;padding:10px 12px}
.ftr-tile b{display:block;font:18px/1.2 'Zoho_Puvi_Bold',Arial,sans-serif;color:#0b1526}
.ftr-tile span{font:8.5px/1.4 'Zoho_Puvi_Bold',Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#8a93a5}
.ftr-rowitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #f0f2f7;border-radius:10px;background:#fff;font:12.5px/1.4 'Zoho_Puvi_Medium',Arial,sans-serif;color:#232f42}
.ftr-rowitem .r{margin-left:auto;flex:none;font:11.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;display:inline-flex;align-items:center;gap:6px}
.ftr-badge{display:inline-block;padding:3px 9px;border-radius:7px;background:#0b1526;font:11.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#fff}

/* animation vocabulary (shared language with home + /mcp) */
.ftr-rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.ftr-rv.in{opacity:1;transform:none}
@keyframes ftrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ftrPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes ftrRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes ftrDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ftrRing{from{stroke-dashoffset:1}to{stroke-dashoffset:.16}}
@keyframes ftrGauge{from{stroke-dashoffset:1}to{stroke-dashoffset:.38}}
@keyframes ftrFade{from{opacity:0}to{opacity:1}}
@keyframes ftrBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ftr-scene [data-a]{opacity:1}
.ftr-scene.go [data-a="in"]{animation:ftrIn .5s ease both}
.ftr-scene.go [data-a="pop"]{animation:ftrPop .5s ease both}
.ftr-scene.go [data-a="row"]{animation:ftrRow .45s ease both}
.ftr-scene.go [data-a="fade"]{animation:ftrFade .6s ease both}
.ftr-scene.go .ftr-draw{animation:ftrDraw 1.8s ease both}
.ftr-scene.go .ftr-ring{animation:ftrRing 1.6s ease both}
.ftr-scene.go .ftr-gauge{animation:ftrGauge 1.6s ease both}
.ftr-scene.go .ftr-grow{transform-origin:left center;animation:ftrBar 1s ease both}

/* scene-specific */
.ftr-map{position:relative;flex:1;min-height:190px;border-radius:12px;background:linear-gradient(115deg,#edf1ec 0%,#e9eef3 55%,#eef0ea 100%);overflow:hidden}
.ftr-road{position:absolute;background:#fff;opacity:.85}
.ftr-pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#19b66a;border:2px solid #fff;box-shadow:0 4px 10px rgba(11,21,38,.28);display:grid;place-items:center;font:12px/1 'Zoho_Puvi_Bold',Arial,sans-serif;color:#fff}
.ftr-pin.you{width:36px;height:36px;margin:-18px 0 0 -18px;background:#2f5fe0;border-width:3px;font-size:8.5px;box-shadow:0 0 0 4px rgba(47,95,224,.25)}
.ftr-pin.mid{background:#e8890c}
.ftr-maptag{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(11,21,38,.12);font:10.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#232f42}
.ftr-yt{flex:none;width:54px;height:34px;border-radius:6px;background:linear-gradient(135deg,#2a3a5c,#0b1526);position:relative}
.ftr-yt::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px}
.ftr-cluster{position:relative;flex:1;min-height:210px}
.ftr-cnode{position:absolute;padding:7px 13px;border-radius:999px;border:1px solid #e6e9f0;background:#fff;font:11.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#3c4657;box-shadow:0 6px 16px -8px rgba(11,21,38,.25);transform:translate(-50%,-50%);white-space:nowrap}
.ftr-cnode.center{background:linear-gradient(135deg,#ff8b1f,#ff5d00);color:#fff;border:none;font-size:12.5px;padding:9px 16px;z-index:2}
.ftr-cline{position:absolute;height:1.5px;background:#dfe3ea;transform-origin:left center;z-index:0}
.ftr-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid #e6e9f0;background:#fff;font:11px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#3c4657}
.ftr-chip i{width:6px;height:6px;border-radius:50%;font-style:normal}
.ftr-vsbars{display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}
.ftr-vbar{display:flex;flex-direction:column;gap:6px}
.ftr-vbar .lbl{display:flex;justify-content:space-between;font:11.5px/1 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#5a6577}
.ftr-vbar .track{height:12px;border-radius:6px;background:#f0f2f7;overflow:hidden}
.ftr-vbar .fill{height:100%;border-radius:6px}
.ftr-mchat{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:center}
.ftr-mq{align-self:flex-end;max-width:88%;padding:9px 13px;border-radius:12px 12px 3px 12px;background:#22314e;color:#e8edf6;font:12.5px/1.5 'Zoho_Puvi_Medium',Arial,sans-serif}
.ftr-mtools{display:flex;gap:6px;flex-wrap:wrap}
.ftr-mchip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid #2a3a5c;background:#0e1930;font:600 10px/1 ui-monospace,Consolas,monospace;color:#9fb0cc}
.ftr-ma{max-width:94%;padding:10px 13px;border-radius:12px 12px 12px 3px;background:#0e1930;border:1px solid #1c2942;color:#c6d1e4;font:12px/1.55 'Zoho_Puvi_Regular',Arial,sans-serif}
.ftr-ma strong{color:#fff}
.ftr-ma .nx{display:block;margin-top:7px;font:11.5px/1.4 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#8ee7b8}

/* dark MCP section */
.ftr-show.dark{background:#0b1526;color:#c6d1e4}
.ftr-show.dark .ftr-copy h2{color:#fff}
.ftr-show.dark .ftr-copy .ftr-lead{color:#8fa0bd}
.ftr-show.dark .ftr-copy li{color:#c6d1e4}
.ftr-show.dark .ftr-copy li i{background:rgba(61,220,151,.14);color:#8ee7b8}
.ftr-show.dark .ftr-copy .ftr-more{color:#8ee7b8}
.ftr-show.dark .ftr-scene{background:#101d33;border-color:#1c2942;box-shadow:0 34px 80px -34px rgba(0,0,0,.6)}
.ftr-show.dark .ftr-scene .ftr-bar b{background:#2a3a5c}
.ftr-show.dark .ftr-scene .ftr-bar span{color:#7f8ba3}

/* ---------- Platform band ---------- */
.ftr-plat{padding:86px 28px;background:#f7f8fb}
.ftr-sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.ftr-sec-head .ftr-kick{margin:0 0 12px;font:11.5px/1 'Zoho_Puvi_Bold',Arial,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#ff5d00}
.ftr-sec-head h2{margin:0 0 10px;font:clamp(25px,3.2vw,34px)/1.14 'Zoho_Puvi_SemiBold',Arial,sans-serif;letter-spacing:-1px;color:#0b1526}
.ftr-sec-head p{margin:0;color:#5a6577;font:15.5px/1.55 'Zoho_Puvi_Regular',Arial,sans-serif}
.ftr-plat-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ftr-pcard{border:1px solid #e6e9f0;border-radius:16px;background:#fff;padding:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ftr-pcard:hover{transform:translateY(-3px);border-color:rgba(255,106,0,.35);box-shadow:0 20px 44px -22px rgba(11,21,38,.25)}
.ftr-pcard .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:15px/1 'Zoho_Puvi_Bold',Arial,sans-serif;margin-bottom:12px}
.ftr-ic-o{background:#fff3e7;color:#c25100}.ftr-ic-g{background:#eafaf1;color:#19b66a}.ftr-ic-b{background:#eef3ff;color:#2f5fe0}.ftr-ic-p{background:#f3e8ff;color:#6b21a8}
.ftr-pcard h3{margin:0 0 8px;font:16px/1.3 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#0b1526}
.ftr-pcard p{margin:0;font:13.5px/1.58 'Zoho_Puvi_Regular',Arial,sans-serif;color:#5a6577}
@media(max-width:860px){.ftr-plat-grid{grid-template-columns:1fr}}

/* ---------- All features grid ---------- */
.ftr-all{padding:86px 28px}
.ftr-all-grid{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px}
.ftr-aitem{display:flex;gap:9px;align-items:flex-start;font:13.5px/1.5 'Zoho_Puvi_Medium',Arial,sans-serif;color:#232f42;padding:6px 0}
.ftr-aitem i{flex:none;width:17px;height:17px;border-radius:50%;background:#eafaf1;display:grid;place-items:center;font:9px/1 'Zoho_Puvi_Bold',Arial,sans-serif;font-style:normal;color:#19b66a;margin-top:2px}
.ftr-all-note{max-width:1020px;margin:26px auto 0;text-align:center;font:14px/1.5 'Zoho_Puvi_SemiBold',Arial,sans-serif;color:#5a6577}
.ftr-all-note a{color:#ff5d00}
@media(max-width:860px){.ftr-all-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-all-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  .ftr-rv,.ftr-scene [data-a]{transition:none !important;animation:none !important}
}