/*
Theme Name: Bykes Launch
Theme URI: https://bykes.in/
Author: Bykes.in
Description: Decision-first WordPress theme for the Bykes.in motorcycle and scooter catalogue, recommendation quiz and lead generation platform.
Version: 3.1.8
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: bykes-launch
*/

/* v3.1.2 launch polish */
.spec-group{border:1px solid #cfd9e6;border-radius:14px;margin:14px 0;background:#fff;overflow:hidden}.spec-group summary{font-size:1.05rem;font-weight:800;color:#0b1f3a;background:#f4f7fb;padding:18px 20px;cursor:pointer}.spec-group[open] summary{background:#eaf1fb;border-bottom:1px solid #cfd9e6}.spec-table>div{display:grid;grid-template-columns:minmax(180px,42%) 1fr;gap:20px;padding:14px 20px;border-bottom:1px solid #e4e9f0}.spec-table>div:last-child{border-bottom:0}.spec-table span{font-weight:600;color:#53647b}.spec-table strong{font-size:1rem;color:#0b1f3a}.source-status-card{border-left:4px solid #155eef;background:#f4f8ff}.site-footer .footer-logo-img{display:block;max-width:170px;max-height:58px;width:auto;height:auto;object-fit:contain;margin-bottom:24px}.legal-disclaimer-strip{background:#f6f8fb;border-top:1px solid #d9e1eb;border-bottom:1px solid #d9e1eb;padding:18px 0;color:#34465e;font-size:.9rem}.legal-disclaimer-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.legal-disclaimer-strip strong{display:block;color:#0b1f3a;margin-bottom:4px}.footer-menu{list-style:none;margin:0;padding:0}.footer-menu li{margin:0 0 12px}.footer-menu a{color:inherit;text-decoration:none}@media(max-width:900px){.legal-disclaimer-strip .container{grid-template-columns:1fr 1fr}.spec-table>div{grid-template-columns:1fr;gap:5px}}@media(max-width:560px){.legal-disclaimer-strip .container{grid-template-columns:1fr}.spec-table>div{padding:13px 16px}}




/* v3.1.5: reference-grade key feature presentation and motion polish */
.key-features-card{
  position:relative;overflow:hidden;padding:clamp(34px,5vw,70px) clamp(22px,4vw,54px);
  background:#fff;border:1px solid #e1e7ef;border-radius:24px;
}
.key-features-card::before{content:none}
.key-features-heading{text-align:center;margin:0 auto clamp(34px,5vw,58px);max-width:820px}
.key-features-heading .section-label{display:inline-block;color:#e8530e;background:transparent;border:0;padding:0;font-size:.82rem;font-weight:900;letter-spacing:.10em;text-transform:uppercase}
.key-features-heading h2{font-size:clamp(2.25rem,4.4vw,4rem);line-height:1;margin:14px 0 12px;letter-spacing:-.055em;color:#0b1f3a}
.key-features-heading p{margin:0;color:#172b49;font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:800}
.key-features-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;column-gap:clamp(24px,4vw,70px)!important;row-gap:clamp(34px,4vw,58px)!important;align-items:start!important;width:100%!important}
.key-feature-item{min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:grid!important;grid-template-rows:44px auto auto;align-content:start!important;justify-items:start!important;transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .24s ease}
.key-feature-item:hover{transform:translateY(-4px);box-shadow:none;border-color:transparent;background:transparent}
.key-feature-icon{width:42px;height:42px;border-radius:0;display:flex;align-items:center;justify-content:flex-start;color:#0b1f3a;background:transparent;margin:0 0 14px;flex:0 0 auto}
.key-feature-icon svg{width:36px;height:36px;stroke-width:1.8}
.key-feature-item span{display:block;color:#0b1f3a;font-size:clamp(.96rem,1.2vw,1.14rem);font-weight:800;line-height:1.2;margin:0 0 6px;text-transform:none;letter-spacing:-.02em}
.key-feature-item strong{display:block;color:#0b1f3a;font-size:clamp(1.15rem,1.65vw,1.65rem);font-weight:900;line-height:1.12;overflow-wrap:anywhere;letter-spacing:-.035em}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
[data-reveal].is-visible{opacity:1;transform:none}
.content-card,.vehicle-card,.brand-tile,.button{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
.vehicle-card:hover,.brand-tile:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(11,31,58,.10)}
.button:active{transform:scale(.98)}
.spec-group summary{transition:background-color .2s ease,color .2s ease}
.spec-group[open]{box-shadow:0 10px 26px rgba(11,31,58,.06)}
@media(max-width:1180px){.key-features-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:900px){.key-features-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:30px!important}}
@media(max-width:640px){.key-features-card{padding:34px 20px}.key-features-heading{text-align:left;margin-bottom:34px}.key-features-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 22px!important}.key-feature-item{grid-template-rows:40px auto auto}.key-feature-icon svg{width:32px;height:32px}.key-feature-item strong{font-size:1.15rem}}
@media(max-width:390px){.key-features-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.key-feature-item,.vehicle-card,.brand-tile,.button{transition:none}.key-feature-item:hover,.vehicle-card:hover,.brand-tile:hover{transform:none}}

.brand-grid.compact .brand-tile img{max-width:112px;max-height:52px;object-fit:contain;filter:none}.brand-grid.compact .brand-tile{min-height:120px}.brand-grid.compact .brand-mark{width:44px;height:44px}


/* v3.1.6: Bykes brand-motion key features — progressive enhancement, SEO-safe */
:root{
  --bykes-navy:#0b1f3a;
  --bykes-blue:#155eef;
  --bykes-orange:#f45a0a;
  --bykes-cream:#fff7f1;
  --bykes-sky:#eef5ff;
}
.key-features-card{
  isolation:isolate;
  background:
    radial-gradient(circle at 10% 8%,rgba(244,90,10,.10),transparent 30%),
    radial-gradient(circle at 92% 88%,rgba(21,94,239,.09),transparent 34%),
    #fff;
  border-color:#dce5f0;
  box-shadow:0 18px 60px rgba(11,31,58,.07);
}
.key-features-card::after{
  content:"";position:absolute;z-index:-1;inset:0 auto 0 -28%;width:22%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.74),transparent);
  transform:skewX(-16deg);opacity:0;pointer-events:none;
}
.js .key-features-card.is-visible::after{animation:bykes-feature-sheen 1.15s .18s ease-out both}
@keyframes bykes-feature-sheen{0%{left:-28%;opacity:0}18%{opacity:.8}100%{left:112%;opacity:0}}
.key-features-heading .section-label{color:var(--bykes-orange)}
.key-features-heading h2{position:relative;display:inline-block}
.key-features-heading h2::after{
  content:"";display:block;width:68px;height:4px;margin:18px auto 0;border-radius:99px;
  background:linear-gradient(90deg,var(--bykes-orange),var(--bykes-blue));
  transform-origin:left center;
}
.js .key-features-card:not(.is-visible) .key-features-heading h2::after{transform:scaleX(0)}
.js .key-features-card.is-visible .key-features-heading h2::after{animation:bykes-line-in .55s .2s cubic-bezier(.22,1,.36,1) both}
@keyframes bykes-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.key-feature-item{
  position:relative;padding:18px 12px 16px;border-radius:18px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),background-color .28s ease,box-shadow .28s ease;
}
.key-feature-item::before{
  content:"";position:absolute;inset:auto 12px 0;height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--bykes-orange),var(--bykes-blue));
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)
}
.key-feature-item:hover,.key-feature-item:focus-within{
  transform:translateY(-7px);background:rgba(255,255,255,.9);
  box-shadow:0 16px 36px rgba(11,31,58,.10)
}
.key-feature-item:hover::before,.key-feature-item:focus-within::before{transform:scaleX(1)}
.key-feature-icon{
  width:48px;height:48px;border-radius:15px;justify-content:center;
  color:var(--bykes-navy);background:linear-gradient(145deg,var(--bykes-cream),var(--bykes-sky));
  box-shadow:inset 0 0 0 1px rgba(21,94,239,.08),0 8px 18px rgba(11,31,58,.08)
}
.key-feature-item:nth-child(3n+1) .key-feature-icon{color:var(--bykes-orange)}
.key-feature-item:nth-child(3n+2) .key-feature-icon{color:var(--bykes-blue)}
.key-feature-item:nth-child(3n) .key-feature-icon{color:var(--bykes-navy)}
.key-feature-icon svg{transition:transform .32s cubic-bezier(.22,1,.36,1),filter .32s ease}
.key-feature-item:hover .key-feature-icon svg{transform:scale(1.08) rotate(-3deg);filter:drop-shadow(0 5px 7px rgba(11,31,58,.14))}
/* Content remains visible without JavaScript; only enhance motion after JS is confirmed. */
.js .key-features-card[data-reveal]:not(.is-visible){opacity:0;transform:translateY(20px)}
.js .key-features-card[data-reveal].is-visible{opacity:1;transform:none}
.js .key-features-card:not(.is-visible) .key-feature-item{opacity:0;transform:translateY(18px) scale(.98)}
.js .key-features-card.is-visible .key-feature-item{
  animation:bykes-feature-in .58s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(120ms + (var(--feature-index,0) * 65ms));
}
@keyframes bykes-feature-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .key-features-heading h2::after{margin-left:0;margin-right:0}
  .key-feature-item{padding:14px 8px 14px}
  .key-feature-icon{width:44px;height:44px;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){
  .js .key-features-card[data-reveal],.js .key-features-card:not(.is-visible) .key-feature-item{opacity:1;transform:none}
  .js .key-features-card.is-visible .key-feature-item,.js .key-features-card.is-visible::after,.js .key-features-card.is-visible .key-features-heading h2::after{animation:none}
  .key-feature-item,.key-feature-icon svg,.key-feature-item::before{transition:none}
}


/* v3.1.7: signature feature motion + resilient responsive layout */
.key-features-card{padding:clamp(36px,5.5vw,76px) clamp(18px,4.5vw,64px)}
.key-features-heading{margin-bottom:clamp(34px,4.5vw,58px)}
.key-features-heading .section-label{display:block;margin-bottom:10px}
.key-features-heading h2{display:block;margin:0;font-size:clamp(2.25rem,4vw,4.2rem)}
.key-features-heading p{margin-top:24px;font-size:clamp(1.15rem,1.8vw,1.55rem)}
.key-features-grid{grid-template-columns:repeat(4,minmax(170px,1fr))!important;gap:clamp(18px,2.2vw,32px)!important}
.key-feature-item{min-width:0;min-height:190px;padding:22px 20px 20px!important;border:1px solid rgba(11,31,58,.08);background:rgba(255,255,255,.72);box-shadow:0 8px 24px rgba(11,31,58,.055);display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;border-radius:20px}
.key-feature-item::before{inset:auto 20px 0}
.key-feature-icon{position:relative;margin:0 0 18px;width:54px;height:54px;border-radius:16px;overflow:visible}
.key-feature-icon svg{width:36px;height:36px;transform-origin:50% 50%}
.key-feature-label{font-size:clamp(.96rem,1vw,1.08rem)!important;line-height:1.2!important;margin:0 0 8px!important}
.key-feature-value{font-size:clamp(1.25rem,1.45vw,1.6rem)!important;line-height:1.15!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;max-width:100%}
.key-features-note{margin:clamp(26px,3vw,40px) 0 0;color:#5b6b80;font-size:.84rem;line-height:1.55;text-align:center}
.feature-motion-accent{position:absolute;inset:0;pointer-events:none}

/* Engine: orange tracing stroke, like the engine switching on. */
.key-feature-engine .key-feature-icon svg *{stroke:var(--bykes-orange)}
.js .key-features-card.is-visible .key-feature-engine .key-feature-icon svg path,
.js .key-features-card.is-visible .key-feature-engine .key-feature-icon svg polyline,
.js .key-features-card.is-visible .key-feature-engine .key-feature-icon svg line,
.js .key-features-card.is-visible .key-feature-engine .key-feature-icon svg rect{
  stroke-dasharray:160;stroke-dashoffset:160;animation:bykes-engine-draw 1.25s .32s cubic-bezier(.22,1,.36,1) forwards
}
@keyframes bykes-engine-draw{to{stroke-dashoffset:0}}

/* Power: controlled pulse and halo, no endless distraction. */
.key-feature-power .key-feature-icon,.key-feature-motor-power .key-feature-icon{color:var(--bykes-blue)}
.js .key-features-card.is-visible .key-feature-power .key-feature-icon svg,
.js .key-features-card.is-visible .key-feature-motor-power .key-feature-icon svg{animation:bykes-power-pulse .72s .72s ease-out 2}
.js .key-features-card.is-visible .key-feature-power .feature-motion-accent,
.js .key-features-card.is-visible .key-feature-motor-power .feature-motion-accent{border-radius:inherit;animation:bykes-power-halo 1.25s .72s ease-out 1}
@keyframes bykes-power-pulse{0%,100%{transform:scale(1);filter:none}45%{transform:scale(1.18);filter:drop-shadow(0 0 8px rgba(21,94,239,.55))}}
@keyframes bykes-power-halo{0%{box-shadow:0 0 0 0 rgba(21,94,239,.28)}100%{box-shadow:0 0 0 18px rgba(21,94,239,0)}}

/* Torque and top speed: gauge revs then settles. */
.js .key-features-card.is-visible .key-feature-torque .key-feature-icon svg,
.js .key-features-card.is-visible .key-feature-top-speed .key-feature-icon svg{animation:bykes-gauge-rev .95s .52s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bykes-gauge-rev{0%{transform:rotate(-14deg) scale(.88)}45%{transform:rotate(13deg) scale(1.12)}72%{transform:rotate(-4deg) scale(1.04)}100%{transform:rotate(0) scale(1)}}

/* Weight drops with mass; seat and clearance rise into position. */
.js .key-features-card.is-visible .key-feature-kerb-weight .key-feature-icon svg{animation:bykes-weight-drop .72s .68s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bykes-weight-drop{0%{transform:translateY(-16px);opacity:.15}65%{transform:translateY(3px)}100%{transform:none;opacity:1}}
.js .key-features-card.is-visible .key-feature-seat-height .key-feature-icon svg,
.js .key-features-card.is-visible .key-feature-ground-clearance .key-feature-icon svg{animation:bykes-rise .72s .76s cubic-bezier(.22,1,.36,1) both}
@keyframes bykes-rise{from{transform:translateY(12px);opacity:.2}to{transform:none;opacity:1}}

/* Brakes: quick lock-in and protective flash. */
.js .key-features-card.is-visible .key-feature-brakes .key-feature-icon svg,
.js .key-features-card.is-visible .key-feature-braking .key-feature-icon svg{animation:bykes-brake-lock .62s .82s ease-out both}
@keyframes bykes-brake-lock{0%{transform:rotate(-8deg) scale(.86)}55%{transform:rotate(3deg) scale(1.1)}100%{transform:none}}

/* Range and mileage: subtle forward travel. */
.js .key-features-card.is-visible .key-feature-range .key-feature-icon svg,
.js .key-features-card.is-visible .key-feature-mileage .key-feature-icon svg{animation:bykes-route-travel .86s .62s ease-out both}
@keyframes bykes-route-travel{0%{transform:translateX(-10px);opacity:.2}60%{transform:translateX(3px)}100%{transform:none;opacity:1}}

@media(max-width:1100px){.key-features-grid{grid-template-columns:repeat(3,minmax(170px,1fr))!important}}
@media(max-width:720px){
  .key-features-card{padding:34px 16px 30px;border-radius:20px}
  .key-features-heading{text-align:center;margin-bottom:30px}
  .key-features-heading h2::after{margin-left:auto;margin-right:auto}
  .key-features-heading p{margin-top:20px}
  .key-features-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .key-feature-item{min-height:158px;padding:18px 14px 16px!important;border-radius:17px}
  .key-feature-icon{width:48px;height:48px;margin-bottom:14px}
  .key-feature-icon svg{width:32px;height:32px}
  .key-feature-value{font-size:1.18rem!important}
  .key-feature-label{font-size:.94rem!important}
  .key-features-note{text-align:left;margin-top:24px}
}
@media(max-width:360px){.key-features-grid{grid-template-columns:1fr!important}.key-feature-item{min-height:auto}}
@media(prefers-reduced-motion:reduce){
  .key-feature-icon svg,.feature-motion-accent{animation:none!important}
}


/* v3.1.8: mobile-first key-features repair */
@media (max-width:720px){
  #key-features{scroll-margin-top:132px}
  .key-features-card{
    width:100%;max-width:100%;overflow:hidden;
    padding:26px 12px 30px!important;border-radius:18px;
  }
  .key-features-heading{
    width:100%;max-width:none;text-align:left;margin:0 0 22px!important;padding:0 4px;
  }
  .key-features-heading .section-label{
    font-size:.68rem;line-height:1.25;letter-spacing:.105em;margin-bottom:7px;
  }
  .key-features-heading h2{
    font-size:clamp(1.85rem,9vw,2.45rem)!important;line-height:1.02!important;
    letter-spacing:-.045em;margin:0!important;white-space:normal;
  }
  .key-features-heading h2::after{
    width:52px;height:3px;margin:12px 0 0!important;
  }
  .key-features-heading p{
    margin-top:15px!important;font-size:1.05rem!important;line-height:1.25;
    white-space:normal;overflow-wrap:anywhere;
  }
  .key-features-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;width:100%!important;min-width:0!important;
  }
  .key-feature-item{
    min-width:0!important;min-height:132px!important;width:auto!important;
    padding:14px 12px 13px!important;border-radius:15px!important;
    justify-content:flex-start!important;overflow:hidden;
  }
  .key-feature-item::before{inset:auto 12px 0}
  .key-feature-icon{
    width:42px!important;height:42px!important;border-radius:12px!important;
    margin:0 0 10px!important;
  }
  .key-feature-icon svg{width:27px!important;height:27px!important}
  .key-feature-label{
    font-size:.79rem!important;line-height:1.18!important;margin:0 0 5px!important;
    letter-spacing:-.01em;overflow-wrap:normal!important;word-break:normal!important;
  }
  .key-feature-value{
    font-size:1rem!important;line-height:1.14!important;letter-spacing:-.025em!important;
    overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;
  }
  .key-features-note{
    text-align:left!important;margin:18px 4px 0!important;font-size:.73rem!important;line-height:1.45;
  }
  .mobile-sticky{z-index:110}
}
@media (max-width:374px){
  .key-features-card{padding-inline:10px!important}
  .key-features-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .key-feature-item{min-height:126px!important;padding:12px 10px!important}
  .key-feature-label{font-size:.75rem!important}
  .key-feature-value{font-size:.94rem!important}
}