/* KITAAB SPEAKS — Batch 9 Homepage UI Polish Hotfix
   Scope: homepage only. No backend/SEO/routing changes. */

:root{
  --home-bg:#08090a;
  --home-panel:#111316;
  --home-panel-2:#0d0f11;
  --home-gold:#d6a83f;
  --home-gold-bright:#f2cc6b;
  --home-ivory:#f7f1e5;
  --home-muted:#a39c92;
  --home-line:rgba(214,168,63,.16);
  --home-red:#ff2a24;
}

.ks-visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#main-content .ks-shell{
  width:min(100% - 48px,1200px);
  margin-inline:auto;
}

#main-content .ks-section{
  padding:96px 0;
}

.ks-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(214,168,63,.1);
  background:
    radial-gradient(circle at 78% 28%,rgba(214,168,63,.13),transparent 30rem),
    radial-gradient(circle at 84% 70%,rgba(255,42,36,.045),transparent 24rem),
    #08090a;
}

.ks-hero__grid{
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(214,168,63,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,168,63,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(#000,transparent 94%);
  mask-image:linear-gradient(#000,transparent 94%);
}

.ks-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  align-items:center;
  gap:72px;
  min-height:680px;
  padding-top:72px;
  padding-bottom:72px;
}

.ks-hero__content{min-width:0}

.ks-hero__kicker,
.ks-eyebrow{
  color:var(--home-gold-bright);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ks-hero h1{
  margin:18px 0 0;
  max-width:760px;
  color:var(--home-ivory);
  font-size:clamp(58px,6.2vw,82px);
  line-height:.95;
  letter-spacing:-.055em;
}

.ks-hero h1 span{display:block}
.ks-hero h1 span:last-child{
  color:transparent;
  background:linear-gradient(180deg,#fff4cc,#f2cc6b 45%,#b77d1c);
  background-clip:text;
  -webkit-background-clip:text;
}

.ks-hero__lead{
  max-width:650px;
  margin:26px 0 0;
  color:#aaa39a;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.72;
}
.ks-hero__lead strong{color:#e7dfd4}

.ks-hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.ks-hero__actions .ks-btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:0 20px;
  font-weight:850;
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.ks-hero__actions .ks-btn:hover{transform:translateY(-2px)}

.ks-btn--video{
  border:1px solid rgba(255,42,36,.36);
  background:rgba(255,42,36,.06);
  color:#f7f1e5;
}
.ks-btn--video:hover{
  border-color:rgba(255,42,36,.65);
  background:rgba(255,42,36,.1);
}
.ks-btn__play{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(#ff2a24,#c91718);
  color:#fff;
  font-size:9px;
  padding-left:1px;
}

.ks-home-search{
  width:min(100%,640px);
  margin-top:28px;
}

.ks-home-search__bar{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  min-height:56px;
  padding:5px 5px 5px 16px;
  border:1px solid rgba(214,168,63,.3);
  border-radius:16px;
  background:rgba(13,15,17,.93);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.16);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ks-home-search__bar:focus-within{
  border-color:rgba(242,204,107,.7);
  box-shadow:0 0 0 3px rgba(214,168,63,.08),0 16px 38px rgba(0,0,0,.2);
}
.ks-home-search__icon{
  color:#8f7a48;
  font-size:20px;
  line-height:1;
}
.ks-home-search input{
  min-width:0;
  height:46px;
  border:0;
  background:transparent;
  color:var(--home-ivory);
  padding:0 12px;
  outline:0;
  font-size:15px;
}
.ks-home-search input::placeholder{color:#746f68}
.ks-home-search button{
  min-height:46px;
  border:1px solid #9c782c;
  border-radius:12px;
  background:linear-gradient(180deg,#f2cc6b,#d6a83f);
  color:#090909;
  padding:0 22px;
  font-weight:900;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.ks-home-search button:hover{filter:brightness(1.05);transform:translateY(-1px)}

.ks-hero__journey{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
  color:#858078;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.ks-hero__journey b{color:#a28238}

.ks-hero__visual{
  position:relative;
  display:grid;
  place-items:center;
  min-height:440px;
}
.ks-hero__visual-ring{
  position:absolute;
  width:min(34vw,430px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(214,168,63,.2);
  box-shadow:0 0 0 34px rgba(214,168,63,.016),0 0 90px rgba(214,168,63,.08);
}
.ks-hero__visual-card{
  position:relative;
  width:min(27vw,340px);
  aspect-ratio:1;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(242,204,107,.34);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.ks-hero__visual-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ks-home-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:42px;
  margin-bottom:34px;
}
.ks-home-head>div{min-width:0}
.ks-home-head>p{
  max-width:520px;
  margin:0;
  color:var(--home-muted);
  font-size:15px;
  line-height:1.65;
}
.ks-section-title{
  margin:8px 0 0;
  color:var(--home-ivory);
  font-size:clamp(36px,4.1vw,52px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.ks-section-copy{
  max-width:760px;
  color:var(--home-muted);
  font-size:16px;
  line-height:1.7;
}
.ks-text-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--home-gold-bright);
  font-size:13px;
  font-weight:850;
  text-decoration:none;
}
.ks-text-link:hover{text-decoration:underline;text-underline-offset:4px}

.ks-featured{background:#0b0c0e}
.ks-featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:22px;
  align-items:stretch;
}
.ks-feature-card,
.ks-home-card,
.ks-home-book{
  border:1px solid var(--home-line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.006)),#111316;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ks-feature-card:hover,
.ks-home-card:hover,
.ks-home-book:hover{
  transform:translateY(-4px);
  border-color:rgba(242,204,107,.38);
  box-shadow:0 22px 60px rgba(0,0,0,.26);
}

.ks-feature-card{
  display:grid;
  grid-template-rows:auto 1fr;
  min-width:0;
}
.ks-feature-card__media,
.ks-home-card__media{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  background:#16171a;
  overflow:hidden;
}
.ks-feature-card__media img,
.ks-home-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ks-feature-card--book .ks-feature-card__media{
  aspect-ratio:16/10;
  background:
    radial-gradient(circle at 50% 40%,rgba(214,168,63,.07),transparent 60%),
    #0d0e10;
}
.ks-feature-card--book .ks-feature-card__media img{
  object-fit:contain;
  padding:22px;
}
.ks-feature-card__body,
.ks-home-card__body{
  display:flex;
  flex-direction:column;
  padding:22px;
}
.ks-feature-card__body .ks-text-link,
.ks-home-card__body .ks-text-link{margin-top:auto;padding-top:4px}

.ks-content-type{
  color:var(--home-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ks-feature-card h3,
.ks-home-card h3,
.ks-home-book h3{
  margin:8px 0 5px;
  color:var(--home-ivory);
  font-size:clamp(19px,1.8vw,23px);
  line-height:1.22;
}
.ks-feature-card h3 a,
.ks-home-card h3 a,
.ks-home-book h3 a{color:inherit;text-decoration:none}
.ks-feature-card small,
.ks-home-book small{color:#918b82;font-size:13px}
.ks-feature-card p,
.ks-home-card p,
.ks-home-book p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  margin:11px 0 15px;
  color:#a39c92;
  font-size:14px;
  line-height:1.62;
}
.ks-play-badge{
  position:absolute;
  left:18px;
  bottom:16px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(#ff2a24,#c91718);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.ks-media-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#9d7e37;
  font-size:12px;
  font-weight:900;
  letter-spacing:.15em;
  background:radial-gradient(circle at 50% 35%,rgba(214,168,63,.08),transparent 50%),#111214;
}

.ks-home-content--alt{background:#090a0b}

.ks-home-books-grid,
.ks-home-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.ks-home-book{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:18px;
  padding:18px;
}
.ks-home-book__cover{
  min-height:172px;
  aspect-ratio:3/4;
  border-radius:12px;
  overflow:hidden;
  background:#17181a;
}
.ks-home-book__cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#0c0d0f;
}
.ks-home-book>div:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.ks-home-book .ks-text-link{margin-top:auto}

.ks-topics{background:#0a0b0d}
.ks-topic-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.ks-topic-grid a{
  position:relative;
  min-height:auto;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:
    "type arrow"
    "name arrow"
    "count arrow";
  align-items:center;
  gap:2px 12px;
  min-width:190px;
  padding:15px 18px;
  border:1px solid var(--home-line);
  border-radius:18px;
  background:#111316;
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.ks-topic-grid a:hover{
  transform:translateY(-2px);
  border-color:rgba(242,204,107,.4);
  background:#15171a;
}
.ks-topic-grid span{
  grid-area:type;
  color:#8a713a;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}
.ks-topic-grid strong{
  grid-area:name;
  display:block;
  margin-top:2px;
  color:var(--home-ivory);
  font-size:16px;
}
.ks-topic-grid small{
  grid-area:count;
  display:block;
  color:#8d877f;
  font-size:12px;
}
.ks-topic-grid b{
  grid-area:arrow;
  position:static;
  color:#cba344;
}

.ks-method{background:#08090a}
.ks-method__flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:38px;
}
.ks-method__flow>div{
  position:relative;
  min-height:158px;
  padding:22px;
  border:1px solid var(--home-line);
  border-radius:18px;
  background:#111316;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ks-method__flow small{
  color:#ff514b;
  font-size:11px;
  font-weight:900;
}
.ks-method__flow strong{
  margin-top:14px;
  color:var(--home-gold-bright);
  font-size:13px;
  letter-spacing:.07em;
  overflow-wrap:anywhere;
}
.ks-method__flow span{
  margin-top:8px;
  color:#9b958c;
  font-size:13px;
  line-height:1.5;
}

.ks-youtube-band{
  border-top:1px solid rgba(214,168,63,.12);
  background:
    radial-gradient(circle at 84% 50%,rgba(255,42,36,.065),transparent 24rem),
    #0d0e10;
}
.ks-youtube-band .ks-shell{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}
.ks-youtube-band h2{
  margin:8px 0;
  color:var(--home-ivory);
  font-size:clamp(32px,4vw,52px);
  letter-spacing:-.03em;
}
.ks-youtube-band p{
  margin:0;
  color:#9d978f;
  font-size:15px;
  line-height:1.6;
}

#main-content a:focus-visible,
#main-content button:focus-visible,
#main-content input:focus-visible{
  outline:2px solid var(--home-gold-bright);
  outline-offset:3px;
}

@media (max-width:1100px){
  #main-content .ks-shell{width:min(100% - 40px,1040px)}
  #main-content .ks-section{padding:82px 0}
  .ks-hero__inner{
    grid-template-columns:minmax(0,1.08fr) minmax(260px,.72fr);
    gap:46px;
    min-height:620px;
  }
  .ks-home-books-grid,
  .ks-home-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-method__flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:820px){
  #main-content .ks-shell{width:min(100% - 36px,760px)}
  #main-content .ks-section{padding:68px 0}
  .ks-hero__inner{
    grid-template-columns:1fr;
    gap:36px;
    min-height:auto;
    padding-top:66px;
    padding-bottom:66px;
  }
  .ks-hero h1{max-width:650px;font-size:clamp(52px,10vw,72px)}
  .ks-hero__visual{min-height:330px}
  .ks-hero__visual-ring{width:310px}
  .ks-hero__visual-card{width:250px}
  .ks-home-head{align-items:flex-start;flex-direction:column;gap:16px}
  .ks-home-head>p{max-width:680px}
  .ks-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-method__flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-youtube-band .ks-shell{min-height:auto}
}

@media (max-width:620px){
  #main-content .ks-shell{width:min(100% - 28px,100%)}
  #main-content .ks-section{padding:54px 0}
  .ks-hero__inner{padding-top:85px;padding-bottom:54px}
  .ks-hero h1{font-size:clamp(45px,14.5vw,62px)}
  .ks-hero__lead{font-size:16px;line-height:1.65}
  .ks-hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ks-hero__actions .ks-btn{width:100%;padding-inline:14px}
  .ks-hero__actions .ks-btn--video{grid-column:1/-1}
  .ks-home-search{width:100%;margin-top:22px}
  .ks-home-search__bar{
    grid-template-columns:auto minmax(0,1fr);
    padding:6px 8px 6px 14px;
  }
  .ks-home-search button{
    grid-column:1/-1;
    width:100%;
    margin-top:4px;
  }
  .ks-hero__journey{font-size:9px;gap:7px}
  .ks-hero__visual{min-height:280px}
  .ks-hero__visual-ring{width:250px}
  .ks-hero__visual-card{width:210px;border-radius:22px}
  .ks-featured-grid,
  .ks-home-books-grid,
  .ks-home-card-grid,
  .ks-method__flow{grid-template-columns:1fr}
  .ks-home-book{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px}
  .ks-feature-card__body,
  .ks-home-card__body{padding:18px}
  .ks-topic-grid{gap:10px}
  .ks-topic-grid a{width:100%;min-width:0}
  .ks-youtube-band .ks-shell{align-items:flex-start;flex-direction:column}
  .ks-youtube-band .ks-btn{width:100%;justify-content:center}
}

@media (max-width:390px){
  #main-content .ks-shell{width:min(100% - 22px,100%)}
  .ks-hero h1{font-size:clamp(42px,14vw,54px)}
  .ks-hero__actions{grid-template-columns:1fr}
  .ks-hero__actions .ks-btn--video{grid-column:auto}
  .ks-home-book{grid-template-columns:84px minmax(0,1fr)}
  .ks-hero__journey b{display:none}
  .ks-hero__journey{row-gap:5px}
}

@media (prefers-reduced-motion:reduce){
  .ks-feature-card,
  .ks-home-card,
  .ks-home-book,
  .ks-topic-grid a,
  .ks-hero__actions .ks-btn,
  .ks-home-search button{transition:none}
}
/* ============================================================
   KITAAB SPEAKS — SAFE CINEMATIC MOTION LAYER
   CSS-only. Homepage-scoped. No HTML/PHP/JS/database changes.
   Existing layout, search, links, responsive breakpoints and
   footer/header remain untouched.
   ============================================================ */

/* ---------- Hero cinematic atmosphere ---------- */
#main-content .ks-hero{
  isolation:isolate;
}

#main-content .ks-hero::before,
#main-content .ks-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

#main-content .ks-hero::before{
  z-index:0;
  background:
    radial-gradient(circle at 76% 36%,rgba(242,204,107,.10),transparent 23rem),
    radial-gradient(circle at 83% 72%,rgba(255,42,36,.035),transparent 20rem);
  opacity:.72;
  animation:ks-home-safe-ambient 9s ease-in-out infinite;
}

#main-content .ks-hero::after{
  z-index:0;
  background:linear-gradient(
    112deg,
    transparent 0 38%,
    rgba(242,204,107,.020) 45%,
    rgba(255,255,255,.015) 49%,
    transparent 56% 100%
  );
  background-size:210% 100%;
  opacity:.55;
  animation:ks-home-safe-sweep 12s ease-in-out infinite;
}

#main-content .ks-hero__inner{
  z-index:1;
}

/* ---------- Grid is alive, but calm ---------- */
#main-content .ks-hero__grid{
  animation:ks-home-safe-grid 11s ease-in-out infinite;
}

/* ---------- Staged entrance: existing elements only ---------- */
#main-content .ks-hero__kicker{
  animation:ks-home-safe-rise .55s cubic-bezier(.2,.75,.22,1) .05s both;
}

#main-content .ks-hero h1 span:first-child{
  animation:ks-home-safe-title .72s cubic-bezier(.16,.84,.28,1) .14s both;
}

#main-content .ks-hero h1 span:last-child{
  position:relative;
  background-size:180% 100%;
  animation:
    ks-home-safe-title .76s cubic-bezier(.16,.84,.28,1) .28s both,
    ks-home-safe-gold-shift 10s ease-in-out 1.4s infinite;
}

#main-content .ks-hero__lead{
  animation:ks-home-safe-rise .58s cubic-bezier(.2,.75,.22,1) .42s both;
}

#main-content .ks-hero__actions{
  animation:ks-home-safe-rise .55s cubic-bezier(.2,.75,.22,1) .55s both;
}

#main-content .ks-home-search{
  animation:ks-home-safe-rise .55s cubic-bezier(.2,.75,.22,1) .68s both;
}

#main-content .ks-hero__journey{
  animation:ks-home-safe-rise .50s cubic-bezier(.2,.75,.22,1) .80s both;
}

/* ---------- Signature logo motion ---------- */
#main-content .ks-hero__visual-ring{
  animation:ks-home-safe-ring 7s ease-in-out infinite;
}

#main-content .ks-hero__visual-card{
  animation:
    ks-home-safe-logo-arrive .78s cubic-bezier(.16,.82,.3,1) .22s both,
    ks-home-safe-float 6.8s ease-in-out 1.1s infinite;
  transform-origin:center;
  will-change:transform;
}

#main-content .ks-hero__visual-card::before{
  content:"";
  position:absolute;
  inset:-35% -75%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    112deg,
    transparent 41%,
    rgba(255,246,205,.03) 46%,
    rgba(255,235,156,.18) 49.5%,
    rgba(255,255,255,.06) 52%,
    transparent 58%
  );
  transform:translateX(-44%);
  animation:ks-home-safe-logo-sheen 11s ease-in-out 1.6s infinite;
}

/* ---------- Kicker micro-signal ---------- */
#main-content .ks-hero__kicker::before{
  box-shadow:0 0 10px rgba(255,42,36,.14);
  animation:ks-home-safe-kicker 5.5s ease-in-out infinite;
}

/* ---------- Buttons: premium hover only ---------- */
#main-content .ks-hero__actions .ks-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

#main-content .ks-hero__actions .ks-btn::after{
  content:"";
  position:absolute;
  inset:-60% -85%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    115deg,
    transparent 43%,
    rgba(255,255,255,.22) 50%,
    transparent 57%
  );
  transform:translateX(-48%);
  transition:transform .55s ease;
}

#main-content .ks-hero__actions .ks-btn:hover::after,
#main-content .ks-hero__actions .ks-btn:focus-visible::after{
  transform:translateX(48%);
}

#main-content .ks-hero__actions .ks-btn--gold:hover,
#main-content .ks-hero__actions .ks-btn--gold:focus-visible{
  box-shadow:
    0 12px 30px rgba(214,168,63,.18),
    0 0 0 1px rgba(242,204,107,.12);
}

#main-content .ks-hero__actions .ks-btn--video:hover,
#main-content .ks-hero__actions .ks-btn--video:focus-visible{
  box-shadow:0 10px 28px rgba(255,42,36,.12);
}

/* ---------- Search bar: subtle living border ---------- */
#main-content .ks-home-search__bar{
  overflow:hidden;
}

#main-content .ks-home-search__bar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(
    100deg,
    transparent 0 38%,
    rgba(242,204,107,.10) 47%,
    transparent 58% 100%
  );
  background-size:220% 100%;
  background-position:150% 50%;
  opacity:.55;
  animation:ks-home-safe-search 8.5s ease-in-out infinite;
}

#main-content .ks-home-search__bar:focus-within::after{
  opacity:.8;
}

/* ---------- Journey: Listen → Understand → Think → Apply ---------- */
#main-content .ks-hero__journey span{
  animation:ks-home-safe-journey 8s ease-in-out infinite;
}

#main-content .ks-hero__journey span:nth-of-type(2){animation-delay:.18s}
#main-content .ks-hero__journey span:nth-of-type(3){animation-delay:.36s}
#main-content .ks-hero__journey span:nth-of-type(4){animation-delay:.54s}

/* ---------- Section headings enter softly on initial render ---------- */
#main-content .ks-home-head,
#main-content .ks-method > .ks-shell > .ks-eyebrow,
#main-content .ks-method > .ks-shell > .ks-section-title,
#main-content .ks-method > .ks-shell > .ks-section-copy{
  animation:ks-home-safe-section-rise .65s ease both;
}

/* ---------- Cards: hover sophistication only ---------- */
#main-content .ks-feature-card,
#main-content .ks-home-card,
#main-content .ks-home-book,
#main-content .ks-topic-grid > a,
#main-content .ks-method__flow > div{
  transition:
    transform .28s cubic-bezier(.2,.72,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

#main-content .ks-feature-card:hover,
#main-content .ks-home-card:hover,
#main-content .ks-home-book:hover,
#main-content .ks-topic-grid > a:hover,
#main-content .ks-method__flow > div:hover{
  transform:translateY(-5px);
}

#main-content .ks-feature-card:hover,
#main-content .ks-home-card:hover,
#main-content .ks-home-book:hover{
  border-color:rgba(242,204,107,.38);
  box-shadow:
    0 24px 62px rgba(0,0,0,.28),
    0 0 0 1px rgba(242,204,107,.025);
}

#main-content .ks-feature-card__media img,
#main-content .ks-home-card__media img,
#main-content .ks-home-book__cover img{
  transition:transform .46s cubic-bezier(.2,.72,.2,1);
}

#main-content .ks-feature-card:hover .ks-feature-card__media img,
#main-content .ks-home-card:hover .ks-home-card__media img,
#main-content .ks-home-book:hover .ks-home-book__cover img{
  transform:scale(1.028);
}

/* ---------- Method flow pulse ---------- */
#main-content .ks-method__flow > div{
  position:relative;
}

#main-content .ks-method__flow > div::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(242,204,107,0);
  transition:box-shadow .25s ease;
}

#main-content .ks-method__flow > div:hover::before{
  box-shadow:inset 0 0 0 1px rgba(242,204,107,.12);
}

/* ---------- Keyframes ---------- */
@keyframes ks-home-safe-rise{
  from{
    opacity:.01;
    transform:translate3d(0,16px,0);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes ks-home-safe-title{
  from{
    opacity:.01;
    transform:translate3d(0,22px,0) scale(.985);
    filter:blur(5px);
  }
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes ks-home-safe-logo-arrive{
  from{
    opacity:.01;
    transform:translate3d(16px,14px,0) scale(.965);
    filter:blur(4px);
  }
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes ks-home-safe-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,0)}
}

@keyframes ks-home-safe-ring{
  0%,100%{
    opacity:.72;
    transform:scale(1);
    box-shadow:0 0 0 34px rgba(214,168,63,.016),0 0 90px rgba(214,168,63,.08);
  }
  50%{
    opacity:1;
    transform:scale(1.025);
    box-shadow:0 0 0 38px rgba(214,168,63,.014),0 0 108px rgba(214,168,63,.10);
  }
}

@keyframes ks-home-safe-logo-sheen{
  0%,68%,100%{transform:translateX(-44%);opacity:.10}
  76%{transform:translateX(0);opacity:.65}
  84%{transform:translateX(44%);opacity:.08}
}

@keyframes ks-home-safe-gold-shift{
  0%,72%,100%{background-position:50% 50%}
  82%{background-position:24% 50%}
  90%{background-position:68% 50%}
}

@keyframes ks-home-safe-kicker{
  0%,100%{opacity:.75;transform:scaleX(.82)}
  50%{opacity:1;transform:scaleX(1.18)}
}

@keyframes ks-home-safe-ambient{
  0%,100%{opacity:.58;transform:scale(1)}
  50%{opacity:.82;transform:scale(1.025)}
}

@keyframes ks-home-safe-sweep{
  0%,68%,100%{background-position:145% 0}
  82%{background-position:-35% 0}
}

@keyframes ks-home-safe-grid{
  0%,100%{opacity:.24}
  50%{opacity:.31}
}

@keyframes ks-home-safe-search{
  0%,70%,100%{background-position:150% 50%;opacity:.18}
  82%{background-position:-20% 50%;opacity:.58}
  92%{background-position:-80% 50%;opacity:.12}
}

@keyframes ks-home-safe-journey{
  0%,72%,100%{color:#858078;text-shadow:none}
  79%{color:#f2cc6b;text-shadow:0 0 10px rgba(214,168,63,.14)}
  86%{color:#858078;text-shadow:none}
}

@keyframes ks-home-safe-section-rise{
  from{opacity:.01;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}

/* ---------- Tablet / mobile safety ---------- */
@media (max-width:820px){
  #main-content .ks-hero::before{
    background:
      radial-gradient(circle at 50% 78%,rgba(242,204,107,.075),transparent 22rem),
      radial-gradient(circle at 72% 82%,rgba(255,42,36,.025),transparent 18rem);
  }

  #main-content .ks-hero__visual-card{
    animation:
      ks-home-safe-logo-arrive .72s cubic-bezier(.16,.82,.3,1) .20s both,
      ks-home-safe-float-mobile 7s ease-in-out 1.05s infinite;
  }
}

@keyframes ks-home-safe-float-mobile{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}

@media (max-width:620px){
  #main-content .ks-hero::after{
    opacity:.28;
    animation:none;
  }

  #main-content .ks-hero__grid{
    animation:none;
  }

  #main-content .ks-hero__visual-card::before{
    display:none;
  }

  #main-content .ks-feature-card:hover,
  #main-content .ks-home-card:hover,
  #main-content .ks-home-book:hover,
  #main-content .ks-topic-grid > a:hover,
  #main-content .ks-method__flow > div:hover{
    transform:none;
  }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  #main-content .ks-hero::before,
  #main-content .ks-hero::after,
  #main-content .ks-hero__grid,
  #main-content .ks-hero__kicker,
  #main-content .ks-hero h1 span:first-child,
  #main-content .ks-hero h1 span:last-child,
  #main-content .ks-hero__lead,
  #main-content .ks-hero__actions,
  #main-content .ks-home-search,
  #main-content .ks-hero__journey,
  #main-content .ks-hero__journey span,
  #main-content .ks-hero__visual-ring,
  #main-content .ks-hero__visual-card,
  #main-content .ks-hero__visual-card::before,
  #main-content .ks-home-search__bar::after,
  #main-content .ks-home-head,
  #main-content .ks-method > .ks-shell > .ks-eyebrow,
  #main-content .ks-method > .ks-shell > .ks-section-title,
  #main-content .ks-method > .ks-shell > .ks-section-copy{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

  #main-content .ks-feature-card,
  #main-content .ks-home-card,
  #main-content .ks-home-book,
  #main-content .ks-topic-grid > a,
  #main-content .ks-method__flow > div,
  #main-content .ks-feature-card__media img,
  #main-content .ks-home-card__media img,
  #main-content .ks-home-book__cover img{
    transition:none !important;
  }
}
/* ============================================================
   KITAAB SPEAKS — PREMIUM HOMEPAGE KNOWLEDGE SYSTEM
   Scope: homepage #main-content only.
   Adds: Idea Constellation + BOOK→IDEA→INSIGHT→APPLY.
   Does NOT target header, footer, admin, search routes, books,
   ideas or videos pages.
   ============================================================ */

/* ---------- Knowledge Constellation ---------- */
#main-content .ks-constellation{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 52%,rgba(214,168,63,.075),transparent 25rem),
    linear-gradient(180deg,#090a0c 0%,#0b0c0e 55%,#090a0b 100%);
}

#main-content .ks-constellation::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    radial-gradient(circle at 16% 20%,rgba(242,204,107,.26) 0 1px,transparent 1.4px),
    radial-gradient(circle at 79% 18%,rgba(242,204,107,.18) 0 1px,transparent 1.4px),
    radial-gradient(circle at 88% 70%,rgba(255,42,36,.16) 0 1px,transparent 1.4px),
    radial-gradient(circle at 25% 78%,rgba(242,204,107,.18) 0 1px,transparent 1.4px);
  background-size:240px 240px,310px 310px,360px 360px,420px 420px;
}

#main-content .ks-constellation__intro{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}

#main-content .ks-constellation__intro p,
#main-content .ks-knowledge-journey__head p{
  max-width:680px;
  margin:14px auto 0;
  color:#9e988f;
  font-size:15px;
  line-height:1.75;
}

#main-content .ks-constellation__stage{
  position:relative;
  isolation:isolate;
  width:min(100%,1040px);
  height:500px;
  margin:0 auto;
  border:1px solid rgba(214,168,63,.10);
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(242,204,107,.055),transparent 31%),
    linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 26px 80px rgba(0,0,0,.20);
}

#main-content .ks-constellation__stage::before,
#main-content .ks-constellation__stage::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}

#main-content .ks-constellation__stage::before{
  width:310px;
  border:1px solid rgba(214,168,63,.09);
  animation:ks-constellation-ring 9s ease-in-out infinite;
}

#main-content .ks-constellation__stage::after{
  width:410px;
  border:1px dashed rgba(214,168,63,.055);
  animation:ks-constellation-orbit 34s linear infinite;
}

#main-content .ks-constellation__lines{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}

#main-content .ks-constellation__lines path{
  fill:none;
  stroke:rgba(214,168,63,.22);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:7 10;
  animation:ks-constellation-dash 18s linear infinite;
}

#main-content .ks-constellation__core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:190px;
  height:190px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:50%;
  border:1px solid rgba(242,204,107,.34);
  background:
    radial-gradient(circle at 50% 32%,rgba(242,204,107,.09),transparent 55%),
    #0b0c0e;
  box-shadow:
    0 0 0 12px rgba(214,168,63,.025),
    0 0 72px rgba(214,168,63,.10),
    0 26px 65px rgba(0,0,0,.42);
}

#main-content .ks-constellation__core-ring{
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid rgba(214,168,63,.12);
  animation:ks-constellation-core-pulse 4.6s ease-in-out infinite;
}

#main-content .ks-constellation__core img{
  width:74px;
  height:74px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid rgba(242,204,107,.34);
  box-shadow:0 9px 25px rgba(0,0,0,.34);
}

#main-content .ks-constellation__core strong{
  margin-top:4px;
  color:#f7f1e5;
  font-size:12px;
  letter-spacing:.12em;
  line-height:1.2;
}

#main-content .ks-constellation__core small{
  color:#d6a83f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}

#main-content .ks-constellation__node{
  position:absolute;
  z-index:6;
  width:156px;
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px 16px;
  border:1px solid rgba(214,168,63,.18);
  border-radius:18px;
  background:rgba(16,17,18,.94);
  color:#b8b3aa;
  text-align:center;
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 16px 38px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease;
  animation:ks-constellation-breathe 6s ease-in-out infinite;
}

#main-content .ks-constellation__node:hover,
#main-content .ks-constellation__node:focus-visible{
  transform:translateY(-5px) scale(1.025);
  border-color:rgba(242,204,107,.62);
  background:#141517;
  box-shadow:
    0 18px 48px rgba(0,0,0,.32),
    0 0 24px rgba(214,168,63,.08);
}

#main-content .ks-constellation__node:focus-visible{
  outline:2px solid #f2cc6b;
  outline-offset:3px;
}

#main-content .ks-constellation__node-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-bottom:3px;
  border:1px solid rgba(242,204,107,.22);
  background:#0a0b0c;
  color:#f2cc6b;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 16px rgba(214,168,63,.05);
}

#main-content .ks-constellation__node strong{
  color:#f7f1e5;
  font-size:14px;
  letter-spacing:.035em;
}

#main-content .ks-constellation__node small{
  color:#8f8980;
  font-size:11px;
}

#main-content .ks-constellation__node.is-disabled{
  cursor:default;
  opacity:.68;
  border-style:dashed;
}

#main-content .ks-constellation__node.is-disabled .ks-constellation__node-icon{
  color:#b8b3aa;
}

#main-content .ks-constellation__node--books{
  left:8%;
  top:11%;
  animation-delay:-1.1s;
}

#main-content .ks-constellation__node--ideas{
  right:6%;
  top:8%;
  animation-delay:-2.4s;
}

#main-content .ks-constellation__node--audio{
  left:5%;
  bottom:10%;
  animation-delay:-3.2s;
}

#main-content .ks-constellation__node--insights{
  right:5%;
  bottom:8%;
  animation-delay:-4.5s;
}

#main-content .ks-constellation__node--videos{
  left:50%;
  bottom:2.5%;
  transform:translateX(-50%);
  animation-delay:-5.1s;
}

#main-content .ks-constellation__node--videos:hover,
#main-content .ks-constellation__node--videos:focus-visible{
  transform:translateX(-50%) translateY(-5px) scale(1.025);
}

/* ---------- BOOK → IDEA → INSIGHT → APPLY ---------- */
#main-content .ks-knowledge-journey{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(214,168,63,.055),transparent 28rem),
    #08090a;
}

#main-content .ks-knowledge-journey__head{
  max-width:760px;
  margin:0 auto 38px;
  text-align:center;
}

#main-content .ks-knowledge-journey__track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  width:min(100%,1040px);
  margin:0 auto;
  padding:28px 0 12px;
}

#main-content .ks-knowledge-journey__rail{
  position:absolute;
  left:8%;
  right:8%;
  top:73px;
  z-index:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,168,63,.28) 10%,
    rgba(214,168,63,.34) 50%,
    rgba(255,42,36,.20) 88%,
    transparent
  );
  transform:scaleX(.08);
  transform-origin:left;
  opacity:.35;
  transition:transform 1.15s cubic-bezier(.2,.72,.2,1),opacity .65s ease;
}

#main-content .ks-knowledge-journey.ks-home-section-awake .ks-knowledge-journey__rail{
  transform:scaleX(1);
  opacity:1;
}

#main-content .ks-knowledge-journey__signal{
  position:absolute;
  left:8%;
  top:70px;
  z-index:1;
  width:72px;
  height:7px;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(242,204,107,.95),
    rgba(255,155,50,.96),
    rgba(255,42,36,.88),
    transparent
  );
  filter:blur(.15px);
  box-shadow:
    0 0 8px rgba(242,204,107,.18),
    0 0 14px rgba(255,42,36,.10);
}

#main-content .ks-knowledge-journey.ks-home-section-awake .ks-knowledge-journey__signal{
  animation:ks-journey-signal 3.2s linear .65s infinite;
}

#main-content .ks-knowledge-journey__step{
  position:relative;
  z-index:2;
  min-height:180px;
  padding:26px 20px 22px;
  border:1px solid rgba(214,168,63,.15);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),
    #101112;
  box-shadow:0 15px 40px rgba(0,0,0,.22);
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

#main-content .ks-knowledge-journey__step:hover{
  transform:translateY(-4px);
  border-color:rgba(242,204,107,.36);
  box-shadow:0 20px 48px rgba(0,0,0,.28);
}

#main-content .ks-knowledge-journey__number{
  display:block;
  color:#80652f;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

#main-content .ks-knowledge-journey__dot{
  width:12px;
  height:12px;
  display:block;
  margin:19px 0 18px;
  border-radius:50%;
  border:2px solid #d6a83f;
  background:#0a0b0c;
  box-shadow:
    0 0 0 6px rgba(214,168,63,.045),
    0 0 16px rgba(214,168,63,.12);
}

#main-content .ks-knowledge-journey__step:nth-of-type(4) .ks-knowledge-journey__dot{
  border-color:#ff8e38;
}

#main-content .ks-knowledge-journey__step:nth-of-type(5) .ks-knowledge-journey__dot{
  border-color:#ff2a24;
}

#main-content .ks-knowledge-journey__step strong{
  display:block;
  color:#f7f1e5;
  font-size:17px;
  letter-spacing:.08em;
}

#main-content .ks-knowledge-journey__step p{
  margin:9px 0 0;
  color:#918b82;
  font-size:13px;
  line-height:1.6;
}

/* ---------- Signature mini-wave divider ---------- */
#main-content .ks-signature-divider{
  width:min(100%,1040px);
  height:54px;
  margin:30px auto -10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  position:relative;
}

#main-content .ks-signature-divider::before,
#main-content .ks-signature-divider::after{
  content:"";
  position:absolute;
  top:50%;
  width:calc(50% - 40px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,168,63,.22));
}

#main-content .ks-signature-divider::before{
  left:0;
}

#main-content .ks-signature-divider::after{
  right:0;
  transform:scaleX(-1);
}

#main-content .ks-signature-divider i{
  width:3px;
  height:16px;
  display:block;
  border-radius:999px;
  background:linear-gradient(180deg,#f2cc6b,#ff8f31,#ff2a24);
  transform-origin:center;
  animation:ks-signature-wave 1.6s ease-in-out infinite alternate;
  box-shadow:0 0 7px rgba(255,42,36,.10);
}

#main-content .ks-signature-divider i:nth-child(1),
#main-content .ks-signature-divider i:nth-child(7){height:7px}
#main-content .ks-signature-divider i:nth-child(2),
#main-content .ks-signature-divider i:nth-child(6){height:12px;animation-delay:-.5s}
#main-content .ks-signature-divider i:nth-child(3),
#main-content .ks-signature-divider i:nth-child(5){height:20px;animation-delay:-.9s}
#main-content .ks-signature-divider i:nth-child(4){height:28px;animation-delay:-1.2s}

/* ---------- Motion ---------- */
@keyframes ks-constellation-ring{
  0%,100%{transform:translate(-50%,-50%) scale(.98);opacity:.55}
  50%{transform:translate(-50%,-50%) scale(1.035);opacity:1}
}

@keyframes ks-constellation-orbit{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes ks-constellation-core-pulse{
  0%,100%{transform:scale(.98);opacity:.55}
  50%{transform:scale(1.04);opacity:1}
}

@keyframes ks-constellation-dash{
  to{stroke-dashoffset:-90}
}

@keyframes ks-constellation-breathe{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 38px rgba(0,0,0,.25)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 42px rgba(0,0,0,.28),0 0 18px rgba(214,168,63,.035)}
}

@keyframes ks-journey-signal{
  0%{left:8%;opacity:0;transform:scaleX(.65)}
  8%{opacity:.9}
  86%{opacity:.9}
  100%{left:84%;opacity:0;transform:scaleX(1)}
}

@keyframes ks-signature-wave{
  from{transform:scaleY(.62);opacity:.72}
  to{transform:scaleY(1.08);opacity:1}
}

/* ---------- Laptop / tablet ---------- */
@media(max-width:1024px){
  #main-content .ks-constellation__stage{
    height:470px;
  }

  #main-content .ks-constellation__node{
    width:146px;
  }

  #main-content .ks-constellation__core{
    width:176px;
    height:176px;
  }

  #main-content .ks-knowledge-journey__track{
    gap:12px;
  }

  #main-content .ks-knowledge-journey__step{
    padding-inline:17px;
  }
}

/* ---------- Tablet portrait ---------- */
@media(max-width:820px){
  #main-content .ks-constellation__stage{
    height:430px;
  }

  #main-content .ks-constellation__lines{
    opacity:.65;
  }

  #main-content .ks-constellation__node{
    width:132px;
    min-height:84px;
    padding:12px;
  }

  #main-content .ks-constellation__node--books{left:3%}
  #main-content .ks-constellation__node--ideas{right:3%}
  #main-content .ks-constellation__node--audio{left:2%}
  #main-content .ks-constellation__node--insights{right:2%}

  #main-content .ks-knowledge-journey__track{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  #main-content .ks-knowledge-journey__rail,
  #main-content .ks-knowledge-journey__signal{
    display:none;
  }

  #main-content .ks-knowledge-journey__step{
    min-height:158px;
  }
}

/* ---------- Mobile: simplified, clean, no orbital collisions ---------- */
@media(max-width:620px){
  #main-content .ks-constellation__intro,
  #main-content .ks-knowledge-journey__head{
    text-align:left;
    margin-bottom:24px;
  }

  #main-content .ks-constellation__intro p,
  #main-content .ks-knowledge-journey__head p{
    margin-left:0;
  }

  #main-content .ks-constellation__stage{
    height:auto;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:18px;
    border-radius:22px;
  }

  #main-content .ks-constellation__stage::before,
  #main-content .ks-constellation__stage::after,
  #main-content .ks-constellation__lines{
    display:none;
  }

  #main-content .ks-constellation__core{
    position:relative;
    left:auto;
    top:auto;
    grid-column:1/-1;
    width:100%;
    height:auto;
    min-height:150px;
    transform:none;
    border-radius:18px;
    margin-bottom:2px;
  }

  #main-content .ks-constellation__core-ring{
    display:none;
  }

  #main-content .ks-constellation__node,
  #main-content .ks-constellation__node--books,
  #main-content .ks-constellation__node--ideas,
  #main-content .ks-constellation__node--audio,
  #main-content .ks-constellation__node--insights,
  #main-content .ks-constellation__node--videos{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    min-height:88px;
    transform:none;
    animation:none;
  }

  #main-content .ks-constellation__node--videos{
    grid-column:1/-1;
  }

  #main-content .ks-constellation__node:hover,
  #main-content .ks-constellation__node:focus-visible,
  #main-content .ks-constellation__node--videos:hover,
  #main-content .ks-constellation__node--videos:focus-visible{
    transform:none;
  }

  #main-content .ks-knowledge-journey__track{
    grid-template-columns:1fr;
    gap:12px;
    padding-top:6px;
  }

  #main-content .ks-knowledge-journey__step{
    min-height:0;
    padding:18px;
  }

  #main-content .ks-knowledge-journey__dot{
    margin:12px 0 12px;
  }

  #main-content .ks-signature-divider{
    margin-top:22px;
  }
}

/* ---------- Accessibility ---------- */
@media(prefers-reduced-motion:reduce){
  #main-content .ks-constellation__stage::before,
  #main-content .ks-constellation__stage::after,
  #main-content .ks-constellation__core-ring,
  #main-content .ks-constellation__lines path,
  #main-content .ks-constellation__node,
  #main-content .ks-knowledge-journey__signal,
  #main-content .ks-signature-divider i{
    animation:none !important;
  }

  #main-content .ks-knowledge-journey__rail{
    transform:none !important;
    opacity:1 !important;
  }

  #main-content .ks-knowledge-journey__signal{
    display:none !important;
  }
}


/* ============================================================
   KITAAB SPEAKS — HERO BASE VOICE WAVE — CACHE-PROOF FINAL
   Scope: ONLY homepage hero right-side logo.
   ============================================================ */

#main-content .ks-hero .ks-home-wave{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:20;
  width:176px;
  height:36px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  overflow:visible;
  opacity:1;
  visibility:visible;
}

#main-content .ks-hero .ks-home-wave::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(214,168,63,.28) 10%,
    rgba(242,204,107,.90) 38%,
    rgba(255,155,50,.94) 62%,
    rgba(255,42,36,.52) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(242,204,107,.18),
    0 0 14px rgba(255,42,36,.08);
}

#main-content .ks-hero .ks-home-wave::after{
  content:"";
  position:absolute;
  left:-26%;
  bottom:4px;
  width:30%;
  height:6px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(242,204,107,.18),
    rgba(242,204,107,1),
    rgba(255,155,50,.98),
    rgba(255,42,36,.78),
    transparent
  );
  box-shadow:
    0 0 10px rgba(242,204,107,.28),
    0 0 16px rgba(255,42,36,.14);
  animation:ks-hero-base-signal 3.8s linear infinite;
}

#main-content .ks-hero .ks-home-wave > span{
  position:relative;
  z-index:2;
  display:block;
  width:4px;
  flex:0 0 4px;
  border-radius:999px;
  background:linear-gradient(180deg,#f2cc6b 0%,#ff9b32 50%,#ff2a24 100%);
  transform-origin:center bottom;
  box-shadow:0 0 7px rgba(242,204,107,.20),0 0 10px rgba(255,42,36,.10);
  animation:ks-hero-base-bar 1.65s ease-in-out infinite;
}

#main-content .ks-hero .ks-home-wave > span:nth-child(1),
#main-content .ks-hero .ks-home-wave > span:nth-child(9){height:8px;animation-delay:-.15s}

#main-content .ks-hero .ks-home-wave > span:nth-child(2),
#main-content .ks-hero .ks-home-wave > span:nth-child(8){height:14px;animation-delay:-.55s}

#main-content .ks-hero .ks-home-wave > span:nth-child(3),
#main-content .ks-hero .ks-home-wave > span:nth-child(7){height:21px;animation-delay:-.95s}

#main-content .ks-hero .ks-home-wave > span:nth-child(4),
#main-content .ks-hero .ks-home-wave > span:nth-child(6){height:28px;animation-delay:-.35s}

#main-content .ks-hero .ks-home-wave > span:nth-child(5){height:34px;animation-delay:-1.20s}

@keyframes ks-hero-base-bar{
  0%,100%{transform:scaleY(.48);opacity:.72}
  25%{transform:scaleY(.92);opacity:.94}
  50%{transform:scaleY(.66);opacity:.82}
  75%{transform:scaleY(1.10);opacity:1}
}

@keyframes ks-hero-base-signal{
  0%{transform:translate3d(0,0,0);opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{transform:translate3d(430%,0,0);opacity:0}
}

@media(max-width:820px){
  #main-content .ks-hero .ks-home-wave{
    width:142px;
    height:30px;
    bottom:18px;
    gap:4px;
  }
  #main-content .ks-hero .ks-home-wave > span{
    width:3px;
    flex-basis:3px;
  }
}

@media(max-width:620px){
  #main-content .ks-hero .ks-home-wave{
    width:112px;
    height:24px;
    bottom:12px;
    gap:3px;
  }
  #main-content .ks-hero .ks-home-wave > span:nth-child(1),
  #main-content .ks-hero .ks-home-wave > span:nth-child(9){height:6px}
  #main-content .ks-hero .ks-home-wave > span:nth-child(2),
  #main-content .ks-hero .ks-home-wave > span:nth-child(8){height:9px}
  #main-content .ks-hero .ks-home-wave > span:nth-child(3),
  #main-content .ks-hero .ks-home-wave > span:nth-child(7){height:13px}
  #main-content .ks-hero .ks-home-wave > span:nth-child(4),
  #main-content .ks-hero .ks-home-wave > span:nth-child(6){height:17px}
  #main-content .ks-hero .ks-home-wave > span:nth-child(5){height:21px}
}

@media(prefers-reduced-motion:reduce){
  #main-content .ks-hero .ks-home-wave::after,
  #main-content .ks-hero .ks-home-wave > span{
    animation:none !important;
  }
}
/* ============================================================
   KITAAB SPEAKS — CONSTELLATION ROTATING CORE + SIGNAL PULSES — FINAL
   Scope: ONLY homepage Knowledge Constellation.
   - Stable parent core keeps all existing centering.
   - Child wrapper handles 3D rotation.
   - Four existing diagonal connectors receive overlay signal pulses.
   - No JS. No header/footer/database/SEO changes.
   ============================================================ */

#main-content .ks-constellation .ks-constellation__logo-scene{
  position:relative;
  z-index:3;
  width:156px;
  height:156px;
  perspective:1000px;
  -webkit-perspective:1000px;
  pointer-events:none;
}

#main-content .ks-constellation .ks-constellation__logo-rotator{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform-origin:center center;
  animation:ks-constellation-logo-spin 16s linear infinite;
  will-change:transform;
}

#main-content .ks-constellation .ks-constellation__logo-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:50%;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:
    radial-gradient(circle at 50% 32%,rgba(242,204,107,.075),transparent 56%),
    #0b0c0e;
  border:1px solid rgba(242,204,107,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 0 26px rgba(214,168,63,.055);
}

#main-content .ks-constellation .ks-constellation__logo-face--front{
  transform:rotateY(0deg);
}

#main-content .ks-constellation .ks-constellation__logo-face--back{
  transform:rotateY(180deg);
}

#main-content .ks-constellation .ks-constellation__logo-face img{
  width:74px;
  height:74px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid rgba(242,204,107,.34);
  box-shadow:0 9px 25px rgba(0,0,0,.34);
}

#main-content .ks-constellation .ks-constellation__logo-face strong{
  margin-top:4px;
  color:#f7f1e5;
  font-size:12px;
  letter-spacing:.12em;
  line-height:1.2;
}

#main-content .ks-constellation .ks-constellation__logo-face small{
  color:#d6a83f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}

#main-content .ks-constellation .ks-constellation__line-base{
  fill:none;
  stroke:rgba(214,168,63,.22);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:7 10;
  animation:ks-constellation-dash 18s linear infinite;
}

#main-content .ks-constellation .ks-constellation__line-signal{
  fill:none;
  stroke:#f2cc6b;
  stroke-width:2.15;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:.095 .905;
  stroke-dashoffset:0;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(242,204,107,.62))
         drop-shadow(0 0 5px rgba(255,155,50,.20));
  animation:ks-constellation-signal-travel 4.4s linear infinite;
}

#main-content .ks-constellation .ks-constellation__line-signal--1{animation-delay:0s}
#main-content .ks-constellation .ks-constellation__line-signal--2{animation-delay:-1.1s}
#main-content .ks-constellation .ks-constellation__line-signal--3{animation-delay:-2.2s}
#main-content .ks-constellation .ks-constellation__line-signal--4{animation-delay:-3.3s}

@keyframes ks-constellation-logo-spin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}

@keyframes ks-constellation-signal-travel{
  0%{
    stroke-dashoffset:0;
    opacity:0;
  }
  7%{
    opacity:.95;
  }
  84%{
    opacity:.95;
  }
  100%{
    stroke-dashoffset:-1;
    opacity:0;
  }
}

@media(max-width:820px){
  #main-content .ks-constellation .ks-constellation__logo-scene{
    width:142px;
    height:142px;
    perspective:950px;
    -webkit-perspective:950px;
  }

  #main-content .ks-constellation .ks-constellation__logo-rotator{
    animation-duration:18s;
  }

  #main-content .ks-constellation .ks-constellation__line-signal{
    stroke-width:1.9;
    filter:drop-shadow(0 0 2px rgba(242,204,107,.45));
  }
}

@media(max-width:620px){
  #main-content .ks-constellation .ks-constellation__logo-scene{
    width:132px;
    height:132px;
    perspective:900px;
    -webkit-perspective:900px;
  }

  #main-content .ks-constellation .ks-constellation__logo-rotator{
    animation-duration:20s;
  }

  #main-content .ks-constellation .ks-constellation__logo-face img{
    width:62px;
    height:62px;
  }

  #main-content .ks-constellation .ks-constellation__logo-face strong{
    font-size:11px;
  }

  #main-content .ks-constellation .ks-constellation__logo-face small{
    font-size:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  #main-content .ks-constellation .ks-constellation__logo-rotator{
    animation:none !important;
    transform:rotateY(0deg) !important;
    will-change:auto;
  }

  #main-content .ks-constellation .ks-constellation__line-signal{
    animation:none !important;
    opacity:0 !important;
  }
}
/* ============================================================
   KITAAB SPEAKS — HERO BOOK TO VOICE SIGNATURE — SAFE FINAL
   Scope: homepage hero visual ONLY.
   Structural safety:
   - lives inside .ks-hero__visual
   - absolute at every breakpoint
   - never becomes a grid item
   - never adds hero height or a new grid row
   - pointer-events:none
   ============================================================ */

#main-content .ks-hero__visual .ks-hero-bookfx{
  position:absolute;
  left:-16%;
  top:8px;
  z-index:4;
  width:126px;
  height:112px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  pointer-events:none;
  user-select:none;
  isolation:isolate;
}

/* Small local halo only */
#main-content .ks-hero__visual .ks-hero-bookfx__halo{
  position:absolute;
  left:50%;
  top:20px;
  width:112px;
  height:62px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(242,204,107,.11) 0%,
    rgba(214,168,63,.045) 44%,
    transparent 74%
  );
  filter:blur(8px);
  opacity:.70;
  animation:ks-bookfx-safe-halo 6.8s ease-in-out infinite;
}

/* Open book */
#main-content .ks-hero__visual .ks-hero-bookfx__book{
  position:relative;
  z-index:2;
  width:104px;
  height:56px;
  perspective:850px;
  -webkit-perspective:850px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

#main-content .ks-hero__visual .ks-hero-bookfx__leaf{
  position:absolute;
  top:10px;
  width:50px;
  height:40px;
  border:1px solid rgba(242,204,107,.78);
  background:
    linear-gradient(180deg,rgba(242,204,107,.050),rgba(255,255,255,.010)),
    rgba(10,11,12,.94);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 7px 18px rgba(0,0,0,.26);
}

#main-content .ks-hero__visual .ks-hero-bookfx__leaf--left{
  left:2px;
  border-radius:11px 3px 9px 12px;
  transform:skewY(5deg);
  transform-origin:right center;
}

#main-content .ks-hero__visual .ks-hero-bookfx__leaf--right{
  right:2px;
  border-radius:3px 11px 12px 9px;
  transform:skewY(-5deg);
  transform-origin:left center;
}

#main-content .ks-hero__visual .ks-hero-bookfx__leaf::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:12px;
  height:14px;
  opacity:.40;
  background:
    linear-gradient(rgba(242,204,107,.32),rgba(242,204,107,.32)) 0 0/74% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.22),rgba(242,204,107,.22)) 0 6px/88% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.16),rgba(242,204,107,.16)) 0 12px/62% 1px no-repeat;
}

#main-content .ks-hero__visual .ks-hero-bookfx__spine{
  position:absolute;
  left:50%;
  top:9px;
  bottom:3px;
  z-index:7;
  width:2px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(242,204,107,.26),
    #f2cc6b 48%,
    rgba(255,155,50,.58)
  );
  box-shadow:0 0 7px rgba(242,204,107,.20);
}

#main-content .ks-hero__visual .ks-hero-bookfx__flip{
  position:absolute;
  left:52px;
  top:11px;
  z-index:5;
  width:47px;
  height:38px;
  border:1px solid rgba(242,204,107,.72);
  border-left-color:rgba(242,204,107,.34);
  border-radius:2px 10px 10px 3px;
  transform-origin:left center;
  transform:rotateY(0deg) skewY(-4deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:
    linear-gradient(90deg,rgba(242,204,107,.10),transparent 20%),
    linear-gradient(180deg,#171717,#0d0e0f);
  box-shadow:4px 7px 16px rgba(0,0,0,.22);
  animation:ks-bookfx-safe-page 6.6s cubic-bezier(.42,.02,.22,1) infinite;
  will-change:transform,opacity;
}

#main-content .ks-hero__visual .ks-hero-bookfx__flip::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:10px;
  height:13px;
  opacity:.34;
  background:
    linear-gradient(rgba(242,204,107,.32),rgba(242,204,107,.32)) 0 0/80% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.21),rgba(242,204,107,.21)) 0 6px/64% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.16),rgba(242,204,107,.16)) 0 12px/88% 1px no-repeat;
}

#main-content .ks-hero__visual .ks-hero-bookfx__flip--1{animation-delay:0s}
#main-content .ks-hero__visual .ks-hero-bookfx__flip--2{animation-delay:-2.2s}
#main-content .ks-hero__visual .ks-hero-bookfx__flip--3{animation-delay:-4.4s}

/* Book spine → energy */
#main-content .ks-hero__visual .ks-hero-bookfx__energy{
  position:relative;
  z-index:3;
  width:2px;
  height:14px;
  margin-top:-1px;
  overflow:visible;
}

#main-content .ks-hero__visual .ks-hero-bookfx__energy > span{
  position:absolute;
  left:50%;
  top:-2px;
  width:2px;
  height:16px;
  transform:translateX(-50%) scaleY(.10);
  transform-origin:top;
  border-radius:999px;
  opacity:0;
  background:linear-gradient(180deg,#f2cc6b,#ff9b32 58%,#ff2a24);
  box-shadow:
    0 0 7px rgba(242,204,107,.26),
    0 0 11px rgba(255,42,36,.10);
  animation:ks-bookfx-safe-energy 6.6s ease-in-out infinite;
}

/* Speech-like waveform */
#main-content .ks-hero__visual .ks-hero-bookfx__wave{
  position:relative;
  z-index:4;
  width:114px;
  height:26px;
  margin-top:-1px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:.24;
  transform:scaleX(.34);
  transform-origin:center;
  animation:ks-bookfx-safe-wave-shell 6.6s ease-in-out infinite;
}

#main-content .ks-hero__visual .ks-hero-bookfx__wave::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(242,204,107,.20) 18%,
    rgba(242,204,107,.48) 48%,
    rgba(255,155,50,.34) 72%,
    transparent
  );
}

#main-content .ks-hero__visual .ks-hero-bookfx__wave > i{
  position:relative;
  z-index:2;
  display:block;
  flex:0 0 3px;
  width:3px;
  border-radius:999px;
  transform-origin:center;
  background:linear-gradient(180deg,#f2cc6b 0%,#ffad39 40%,#ff792e 70%,#ff2a24 100%);
  box-shadow:
    0 0 5px rgba(242,204,107,.18),
    0 0 8px rgba(255,42,36,.08);
  animation:ks-bookfx-safe-bar 1.42s ease-in-out infinite;
}

#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(1),
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(11){height:4px;animation-delay:-.10s}
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(2),
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(10){height:7px;animation-delay:-.72s}
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(3),
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(9){height:11px;animation-delay:-1.06s}
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(4),
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(8){height:16px;animation-delay:-.38s}
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(5),
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(7){height:21px;animation-delay:-1.18s}
#main-content .ks-hero__visual .ks-hero-bookfx__wave > i:nth-child(6){height:25px;animation-delay:-.58s}

/* Motion */
@keyframes ks-bookfx-safe-page{
  0%,8%{transform:rotateY(0deg) skewY(-4deg);opacity:0}
  12%{opacity:1}
  32%{transform:rotateY(-82deg) skewY(-1deg);opacity:1}
  49%{transform:rotateY(-164deg) skewY(4deg);opacity:.88}
  57%,100%{transform:rotateY(-178deg) skewY(5deg);opacity:0}
}

@keyframes ks-bookfx-safe-energy{
  0%,42%{transform:translateX(-50%) scaleY(.08);opacity:0}
  50%{transform:translateX(-50%) scaleY(.72);opacity:.72}
  60%,72%{transform:translateX(-50%) scaleY(1);opacity:1}
  86%,100%{transform:translateX(-50%) scaleY(.18);opacity:0}
}

@keyframes ks-bookfx-safe-wave-shell{
  0%,46%{opacity:.06;transform:scaleX(.24) scaleY(.55);filter:saturate(.85)}
  57%{opacity:.72;transform:scaleX(.74) scaleY(.80)}
  66%,82%{opacity:1;transform:scaleX(1) scaleY(1);filter:saturate(1.06)}
  94%,100%{opacity:.06;transform:scaleX(.45) scaleY(.62)}
}

@keyframes ks-bookfx-safe-bar{
  0%,100%{transform:scaleY(.42);opacity:.62}
  18%{transform:scaleY(.88);opacity:.88}
  36%{transform:scaleY(.58);opacity:.70}
  58%{transform:scaleY(1.10);opacity:1}
  74%{transform:scaleY(.72);opacity:.78}
  88%{transform:scaleY(.96);opacity:.92}
}

@keyframes ks-bookfx-safe-halo{
  0%,100%{opacity:.46;transform:translateX(-50%) scale(.96)}
  50%{opacity:.78;transform:translateX(-50%) scale(1.06)}
}

/* Laptop */
@media(max-width:1100px){
  #main-content .ks-hero__visual .ks-hero-bookfx{
    left:-9%;
    top:4px;
    transform:translateX(-50%) scale(.86);
    transform-origin:top center;
  }
}

/* Tablet / stacked hero:
   stays ABSOLUTE inside the visual container, so no extra grid row/height. */
@media(max-width:820px){
  #main-content .ks-hero__visual .ks-hero-bookfx{
    left:50%;
    top:-44px;
    width:108px;
    height:94px;
    transform:translateX(-50%) scale(.82);
    transform-origin:center;
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__halo{
    filter:blur(6px);
    opacity:.50;
  }
}

/* Mobile: visible, compact, still absolute and non-layout-affecting. */
@media(max-width:620px){
  #main-content .ks-hero__visual .ks-hero-bookfx{
    left:50%;
    top:-36px;
    width:92px;
    height:80px;
    transform:translateX(-50%) scale(.68);
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__halo{
    opacity:.34;
    filter:blur(5px);
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__flip{
    animation-duration:7.4s;
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__energy > span,
  #main-content .ks-hero__visual .ks-hero-bookfx__wave{
    animation-duration:7.4s;
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__wave > i{
    box-shadow:0 0 4px rgba(242,204,107,.12);
  }
}

@media(max-width:390px){
  #main-content .ks-hero__visual .ks-hero-bookfx{
    top:-31px;
    transform:translateX(-50%) scale(.61);
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  #main-content .ks-hero__visual .ks-hero-bookfx__halo,
  #main-content .ks-hero__visual .ks-hero-bookfx__flip,
  #main-content .ks-hero__visual .ks-hero-bookfx__energy > span,
  #main-content .ks-hero__visual .ks-hero-bookfx__wave,
  #main-content .ks-hero__visual .ks-hero-bookfx__wave > i{
    animation:none !important;
    will-change:auto;
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__flip{
    opacity:0;
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__energy > span{
    opacity:.60;
    transform:translateX(-50%) scaleY(.70);
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__wave{
    opacity:.84;
    transform:none;
  }

  #main-content .ks-hero__visual .ks-hero-bookfx__wave > i{
    transform:none;
    opacity:.84;
  }
}
/* ============================================================
   KITAAB SPEAKS — FLAGSHIP 3D BOOK TO VOICE — FINAL
   Homepage hero ONLY.
   New flagship effect: desktop + laptop + tablet + mobile.
   Existing older .ks-hero-bookfx effect: mobile only.
   No JS. No layout row. No header/footer/SEO changes.
   ============================================================ */

/* ------------------------------------------------------------
   OLD BOOK RULE
   Keep the existing old book exactly as-is on mobile.
   Hide it only from tablet/desktop/laptop widths.
   ------------------------------------------------------------ */
@media (min-width:621px){
  #main-content .ks-hero__visual .ks-hero-bookfx{
    display:none !important;
  }
}

/* ------------------------------------------------------------
   NEW FLAGSHIP — top-center of the WHOLE hero
   It is a direct absolute child of .ks-hero, so it never becomes
   a grid item and never pushes the existing hero content.
   ------------------------------------------------------------ */
#main-content .ks-hero > .ks-hero-book3d{
  position:absolute;
  left:50%;
  top:30px;
  z-index:2;
  width:190px;
  height:150px;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  contain:layout paint style;
}

/* Local 3D world only. */
#main-content .ks-hero-book3d__scene{
  position:relative;
  width:100%;
  height:100%;
  perspective:1050px;
  -webkit-perspective:1050px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

/* Entire book gently approaches the viewer, then settles.
   This transform is isolated from all existing hero transforms. */
#main-content .ks-hero-book3d__approach{
  position:absolute;
  left:50%;
  top:0;
  width:176px;
  height:144px;
  transform-origin:50% 44%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  animation:ks-book3d-approach 9.2s cubic-bezier(.22,.72,.18,1) infinite;
  will-change:transform,opacity;
}

/* Tight local halo only. */
#main-content .ks-hero-book3d__halo{
  position:absolute;
  left:50%;
  top:30px;
  width:138px;
  height:76px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(242,204,107,.13) 0%,
    rgba(214,168,63,.055) 43%,
    rgba(255,155,50,.018) 62%,
    transparent 76%
  );
  filter:blur(7px);
  opacity:.58;
  animation:ks-book3d-halo 9.2s ease-in-out infinite;
}

/* Grounding shadow: gives the object real 3D weight. */
#main-content .ks-hero-book3d__shadow{
  position:absolute;
  left:50%;
  top:88px;
  width:116px;
  height:18px;
  transform:translateX(-50%) rotateX(72deg);
  border-radius:50%;
  background:radial-gradient(
    ellipse,
    rgba(0,0,0,.54) 0%,
    rgba(0,0,0,.25) 44%,
    transparent 76%
  );
  filter:blur(3px);
  opacity:.58;
  animation:ks-book3d-shadow 9.2s ease-in-out infinite;
}

/* ------------------------------------------------------------
   REAL OPEN BOOK STRUCTURE — REFINED 3D GEOMETRY
   Clear V-fold + visible page block + cover thickness + curved page fan.
   ------------------------------------------------------------ */
#main-content .ks-hero-book3d__book{
  position:absolute;
  left:50%;
  top:18px;
  width:172px;
  height:82px;
  transform:translateX(-50%) rotateX(18deg);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

/* Left/right halves open around one unmistakable central spine. */
#main-content .ks-hero-book3d__half{
  position:absolute;
  top:3px;
  width:86px;
  height:68px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

#main-content .ks-hero-book3d__half--left{
  right:50%;
  transform-origin:right 56%;
  animation:ks-book3d-open-left 9.2s cubic-bezier(.22,.72,.18,1) infinite;
}

#main-content .ks-hero-book3d__half--right{
  left:50%;
  transform-origin:left 56%;
  animation:ks-book3d-open-right 9.2s cubic-bezier(.22,.72,.18,1) infinite;
}

/* Hardcover sits visibly below the page block, giving the book real thickness. */
#main-content .ks-hero-book3d__cover{
  position:absolute;
  top:7px;
  bottom:1px;
  width:84px;
  z-index:0;
  border:1px solid rgba(214,168,63,.78);
  background:
    linear-gradient(180deg,rgba(242,204,107,.07),transparent 26%),
    linear-gradient(145deg,#17191b 0%,#0c0d0e 68%,#070808 100%);
  box-shadow:
    0 10px 18px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.014);
}

#main-content .ks-hero-book3d__half--left .ks-hero-book3d__cover{
  right:0;
  border-radius:18px 4px 13px 20px;
  clip-path:polygon(0 5%,88% 1%,100% 20%,98% 96%,15% 88%,0 72%);
}

#main-content .ks-hero-book3d__half--right .ks-hero-book3d__cover{
  left:0;
  border-radius:4px 18px 20px 13px;
  clip-path:polygon(12% 1%,100% 5%,100% 72%,85% 88%,2% 96%,0 20%);
}

/* Page block is intentionally lighter than cover and offset upward. */
#main-content .ks-hero-book3d__pageblock{
  position:absolute;
  top:4px;
  width:79px;
  height:58px;
  z-index:1;
  border:1px solid rgba(242,204,107,.34);
  background:
    linear-gradient(180deg,rgba(247,241,229,.10),rgba(247,241,229,.025) 48%),
    linear-gradient(145deg,#24231f,#141411 76%);
  box-shadow:
    0 5px 10px rgba(0,0,0,.24),
    inset 0 -5px 10px rgba(0,0,0,.17);
}

#main-content .ks-hero-book3d__half--left .ks-hero-book3d__pageblock{
  right:2px;
  border-radius:16px 3px 10px 18px;
  clip-path:polygon(0 6%,89% 1%,100% 18%,97% 96%,16% 86%,0 72%);
}

#main-content .ks-hero-book3d__half--right .ks-hero-book3d__pageblock{
  left:2px;
  border-radius:3px 16px 18px 10px;
  clip-path:polygon(11% 1%,100% 6%,100% 72%,84% 86%,3% 96%,0 18%);
}

/* Three layered sheets per side create a visible page fan. */
#main-content .ks-hero-book3d__sheet{
  position:absolute;
  top:2px;
  width:78px;
  height:57px;
  z-index:2;
  border:1px solid rgba(242,204,107,.24);
  background:linear-gradient(180deg,#23231f,#171713);
  opacity:.88;
}

#main-content .ks-hero-book3d__half--left .ks-hero-book3d__sheet{
  right:1px;
  transform-origin:right 56%;
  border-radius:15px 2px 10px 18px;
  clip-path:polygon(0 5%,90% 1%,100% 17%,98% 96%,16% 85%,0 72%);
}

#main-content .ks-hero-book3d__half--right .ks-hero-book3d__sheet{
  left:1px;
  transform-origin:left 56%;
  border-radius:2px 15px 18px 10px;
  clip-path:polygon(10% 1%,100% 5%,100% 72%,84% 85%,2% 96%,0 17%);
}

#main-content .ks-hero-book3d__sheet--l1{transform:translate3d(-5px,4px,2px)}
#main-content .ks-hero-book3d__sheet--l2{transform:translate3d(-3px,2px,4px)}
#main-content .ks-hero-book3d__sheet--l3{transform:translate3d(-1px,1px,6px)}
#main-content .ks-hero-book3d__sheet--r1{transform:translate3d(5px,4px,2px)}
#main-content .ks-hero-book3d__sheet--r2{transform:translate3d(3px,2px,4px)}
#main-content .ks-hero-book3d__sheet--r3{transform:translate3d(1px,1px,6px)}

/* Top paper surfaces form a clear V at the center fold. */
#main-content .ks-hero-book3d__paper{
  position:absolute;
  top:0;
  width:80px;
  height:58px;
  z-index:4;
  border:1px solid rgba(242,204,107,.62);
  background:
    linear-gradient(180deg,rgba(247,241,229,.16),rgba(247,241,229,.036) 48%,rgba(214,168,63,.018)),
    #191916;
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.018),
    0 5px 12px rgba(0,0,0,.20);
}

/* Decorative print lines only. */
#main-content .ks-hero-book3d__paper::after{
  content:"";
  position:absolute;
  top:14px;
  height:25px;
  opacity:.42;
  background:
    linear-gradient(rgba(242,204,107,.34),rgba(242,204,107,.34)) 0 0/74% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.22),rgba(242,204,107,.22)) 0 8px/88% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.16),rgba(242,204,107,.16)) 0 16px/63% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.12),rgba(242,204,107,.12)) 0 24px/82% 1px no-repeat;
}

#main-content .ks-hero-book3d__paper--left{
  right:0;
  transform-origin:right 56%;
  border-radius:17px 2px 11px 20px;
  clip-path:polygon(0 3%,89% 0,100% 19%,97% 100%,15% 87%,0 70%);
  background:
    radial-gradient(ellipse at 100% 52%,rgba(0,0,0,.20),transparent 28%),
    linear-gradient(110deg,rgba(242,204,107,.035),transparent 58%),
    linear-gradient(180deg,rgba(247,241,229,.17),rgba(247,241,229,.030)),
    #191916;
}

#main-content .ks-hero-book3d__paper--right{
  left:0;
  transform-origin:left 56%;
  border-radius:2px 17px 20px 11px;
  clip-path:polygon(11% 0,100% 3%,100% 70%,85% 87%,3% 100%,0 19%);
  background:
    radial-gradient(ellipse at 0 52%,rgba(0,0,0,.20),transparent 28%),
    linear-gradient(250deg,rgba(242,204,107,.035),transparent 58%),
    linear-gradient(180deg,rgba(247,241,229,.17),rgba(247,241,229,.030)),
    #191916;
}

#main-content .ks-hero-book3d__paper--left::after{left:15px;right:10px}
#main-content .ks-hero-book3d__paper--right::after{left:10px;right:15px}

/* Visible lower page edges make the object read as a thick physical book. */
#main-content .ks-hero-book3d__pageedge{
  position:absolute;
  top:57px;
  z-index:5;
  width:69px;
  height:7px;
  opacity:.82;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(242,204,107,.42) 0 1px,
      rgba(247,241,229,.07) 1px 2px
    );
  box-shadow:0 4px 7px rgba(0,0,0,.18);
}

#main-content .ks-hero-book3d__pageedge--left{
  right:5px;
  transform:skewY(7deg);
  border-radius:2px 1px 7px 11px;
}

#main-content .ks-hero-book3d__pageedge--right{
  left:5px;
  transform:skewY(-7deg);
  border-radius:1px 2px 11px 7px;
}

/* Strong central V-shaped spine and a small crease shadow. */
#main-content .ks-hero-book3d__spine{
  position:absolute;
  left:50%;
  top:8px;
  z-index:10;
  width:3px;
  height:58px;
  transform:translateX(-50%) translateZ(11px);
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(242,204,107,.18),
    #f2cc6b 34%,
    #ff9b32 73%,
    rgba(255,42,36,.30)
  );
  box-shadow:
    0 0 7px rgba(242,204,107,.24),
    0 0 13px rgba(255,155,50,.08);
  animation:ks-book3d-spine 9.2s ease-in-out infinite;
}

#main-content .ks-hero-book3d__spine-shadow{
  position:absolute;
  left:50%;
  top:9px;
  z-index:6;
  width:13px;
  height:58px;
  transform:translateX(-50%) translateZ(7px);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.18) 35%,
    transparent 75%
  );
  filter:blur(2px);
  opacity:.75;
}

/* ------------------------------------------------------------
   PAGE TURNING — three separate sheets, spine-originated.
   ------------------------------------------------------------ */
#main-content .ks-hero-book3d__flip{
  position:absolute;
  left:50%;
  top:7px;
  z-index:8;
  width:79px;
  height:56px;
  transform-origin:left center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:1px solid rgba(242,204,107,.58);
  border-left-color:rgba(242,204,107,.18);
  border-radius:2px 16px 19px 9px;
  clip-path:polygon(0 18%,89% 0,100% 7%,100% 70%,84% 88%,3% 100%);
  background:
    linear-gradient(105deg,rgba(242,204,107,.11),transparent 25%),
    linear-gradient(180deg,#20201d,#121311);
  box-shadow:5px 8px 17px rgba(0,0,0,.24);
  opacity:0;
  will-change:transform,opacity;
}

#main-content .ks-hero-book3d__flip::after{
  content:"";
  position:absolute;
  left:9px;
  right:13px;
  top:12px;
  height:20px;
  opacity:.33;
  background:
    linear-gradient(rgba(242,204,107,.34),rgba(242,204,107,.34)) 0 0/74% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.22),rgba(242,204,107,.22)) 0 7px/89% 1px no-repeat,
    linear-gradient(rgba(242,204,107,.16),rgba(242,204,107,.16)) 0 14px/62% 1px no-repeat;
}

#main-content .ks-hero-book3d__flip--1{
  animation:ks-book3d-page-a 9.2s cubic-bezier(.36,.05,.18,1) infinite;
}
#main-content .ks-hero-book3d__flip--2{
  animation:ks-book3d-page-b 9.2s cubic-bezier(.36,.05,.18,1) infinite;
}
#main-content .ks-hero-book3d__flip--3{
  animation:ks-book3d-page-c 9.2s cubic-bezier(.36,.05,.18,1) infinite;
}

/* ------------------------------------------------------------
   SPINE → ENERGY → HUMAN-SPEECH WAVE
   ------------------------------------------------------------ */
#main-content .ks-hero-book3d__energy{
  position:absolute;
  left:50%;
  top:80px;
  z-index:6;
  width:4px;
  height:18px;
  transform:translateX(-50%);
}

#main-content .ks-hero-book3d__energy > span{
  position:absolute;
  inset:0;
  transform:scaleY(.06);
  transform-origin:top;
  border-radius:999px;
  opacity:0;
  background:linear-gradient(180deg,#f2cc6b 0%,#ff9b32 67%,#ff2a24 100%);
  box-shadow:
    0 0 8px rgba(242,204,107,.28),
    0 0 13px rgba(255,42,36,.07);
  animation:ks-book3d-energy 9.2s ease-in-out infinite;
}

/* 13 intentionally irregular bars — speech, not a music equalizer. */
#main-content .ks-hero-book3d__wave{
  position:absolute;
  left:50%;
  top:96px;
  z-index:6;
  width:142px;
  height:32px;
  transform:translateX(-50%) scaleX(.18);
  transform-origin:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:0;
  animation:ks-book3d-wave-shell 9.2s ease-in-out infinite;
}

#main-content .ks-hero-book3d__wave::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(214,168,63,.15) 12%,
    rgba(242,204,107,.48) 44%,
    rgba(255,155,50,.34) 72%,
    rgba(255,42,36,.14) 86%,
    transparent 100%
  );
}

#main-content .ks-hero-book3d__wave > i{
  position:relative;
  z-index:2;
  display:block;
  flex:0 0 3px;
  width:3px;
  border-radius:999px;
  transform-origin:center;
  background:linear-gradient(
    180deg,
    #f2cc6b 0%,
    #d6a83f 42%,
    #ff9b32 76%,
    #ff2a24 100%
  );
  box-shadow:
    0 0 5px rgba(242,204,107,.16),
    0 0 8px rgba(255,155,50,.06);
  animation:ks-book3d-wave-bar 1.34s ease-in-out infinite;
}

/* Natural asymmetry */
#main-content .ks-hero-book3d__wave > i:nth-child(1){height:4px;animation-delay:-.08s}
#main-content .ks-hero-book3d__wave > i:nth-child(2){height:7px;animation-delay:-.72s}
#main-content .ks-hero-book3d__wave > i:nth-child(3){height:11px;animation-delay:-1.01s}
#main-content .ks-hero-book3d__wave > i:nth-child(4){height:17px;animation-delay:-.34s}
#main-content .ks-hero-book3d__wave > i:nth-child(5){height:23px;animation-delay:-1.18s}
#main-content .ks-hero-book3d__wave > i:nth-child(6){height:15px;animation-delay:-.57s}
#main-content .ks-hero-book3d__wave > i:nth-child(7){height:30px;animation-delay:-.91s}
#main-content .ks-hero-book3d__wave > i:nth-child(8){height:20px;animation-delay:-.23s}
#main-content .ks-hero-book3d__wave > i:nth-child(9){height:25px;animation-delay:-1.12s}
#main-content .ks-hero-book3d__wave > i:nth-child(10){height:13px;animation-delay:-.48s}
#main-content .ks-hero-book3d__wave > i:nth-child(11){height:18px;animation-delay:-.82s}
#main-content .ks-hero-book3d__wave > i:nth-child(12){height:8px;animation-delay:-.17s}
#main-content .ks-hero-book3d__wave > i:nth-child(13){height:4px;animation-delay:-.64s}

/* ------------------------------------------------------------
   KEYFRAMES — one coherent cinematic story
   ------------------------------------------------------------ */
@keyframes ks-book3d-approach{
  0%,4%{
    transform:translateX(-50%) translateZ(-84px) scale(.72) rotateX(6deg);
    opacity:.30;
  }
  15%{
    transform:translateX(-50%) translateZ(-30px) scale(.88) rotateX(3deg);
    opacity:.92;
  }
  28%,84%{
    transform:translateX(-50%) translateZ(0) scale(1) rotateX(0deg);
    opacity:1;
  }
  94%,100%{
    transform:translateX(-50%) translateZ(-38px) scale(.86) rotateX(2deg);
    opacity:.44;
  }
}

@keyframes ks-book3d-open-left{
  0%,10%{transform:rotateY(76deg) rotateZ(1deg) translateZ(-2px)}
  27%,85%{transform:rotateY(13deg) rotateZ(-4deg) translateZ(0)}
  96%,100%{transform:rotateY(68deg) rotateZ(0deg) translateZ(-2px)}
}

@keyframes ks-book3d-open-right{
  0%,10%{transform:rotateY(-76deg) rotateZ(-1deg) translateZ(-2px)}
  27%,85%{transform:rotateY(-13deg) rotateZ(4deg) translateZ(0)}
  96%,100%{transform:rotateY(-68deg) rotateZ(0deg) translateZ(-2px)}
}

@keyframes ks-book3d-page-a{
  0%,30%{transform:translateZ(10px) rotateY(0deg) rotateX(0deg);opacity:0}
  33%{opacity:.96}
  42%{transform:translateZ(15px) rotateY(-72deg) rotateX(-5deg);opacity:1}
  49%{transform:translateZ(10px) rotateY(-154deg) rotateX(2deg);opacity:.90}
  54%,100%{transform:translateZ(5px) rotateY(-178deg);opacity:0}
}

@keyframes ks-book3d-page-b{
  0%,42%{transform:translateZ(12px) rotateY(0deg) rotateX(0deg);opacity:0}
  45%{opacity:.94}
  54%{transform:translateZ(17px) rotateY(-78deg) rotateX(-6deg);opacity:1}
  61%{transform:translateZ(11px) rotateY(-158deg) rotateX(2deg);opacity:.86}
  66%,100%{transform:translateZ(5px) rotateY(-178deg);opacity:0}
}

@keyframes ks-book3d-page-c{
  0%,54%{transform:translateZ(13px) rotateY(0deg) rotateX(0deg);opacity:0}
  57%{opacity:.90}
  66%{transform:translateZ(18px) rotateY(-82deg) rotateX(-5deg);opacity:1}
  73%{transform:translateZ(11px) rotateY(-160deg) rotateX(2deg);opacity:.82}
  78%,100%{transform:translateZ(5px) rotateY(-178deg);opacity:0}
}

@keyframes ks-book3d-spine{
  0%,38%,100%{
    opacity:.50;
    box-shadow:0 0 4px rgba(242,204,107,.12);
  }
  53%,78%{
    opacity:1;
    box-shadow:
      0 0 8px rgba(242,204,107,.34),
      0 0 15px rgba(255,155,50,.13);
  }
}

@keyframes ks-book3d-energy{
  0%,49%{
    transform:scaleY(.06);
    opacity:0;
  }
  57%{
    transform:scaleY(.56);
    opacity:.72;
  }
  64%,78%{
    transform:scaleY(1);
    opacity:1;
  }
  89%,100%{
    transform:scaleY(.10);
    opacity:0;
  }
}

@keyframes ks-book3d-wave-shell{
  0%,54%{
    transform:translateX(-50%) scaleX(.18) scaleY(.55);
    opacity:0;
  }
  62%{
    transform:translateX(-50%) scaleX(.68) scaleY(.82);
    opacity:.70;
  }
  70%,84%{
    transform:translateX(-50%) scaleX(1) scaleY(1);
    opacity:1;
  }
  94%,100%{
    transform:translateX(-50%) scaleX(.35) scaleY(.62);
    opacity:0;
  }
}

@keyframes ks-book3d-wave-bar{
  0%,100%{transform:scaleY(.38);opacity:.58}
  17%{transform:scaleY(.84);opacity:.88}
  35%{transform:scaleY(.56);opacity:.68}
  57%{transform:scaleY(1.14);opacity:1}
  72%{transform:scaleY(.69);opacity:.76}
  88%{transform:scaleY(.96);opacity:.91}
}

@keyframes ks-book3d-shadow{
  0%,100%{
    width:82px;
    opacity:.28;
    filter:blur(4px);
  }
  28%,84%{
    width:116px;
    opacity:.58;
    filter:blur(3px);
  }
}

@keyframes ks-book3d-halo{
  0%,100%{opacity:.22;transform:translateX(-50%) scale(.78)}
  32%,78%{opacity:.62;transform:translateX(-50%) scale(1)}
}

/* ------------------------------------------------------------
   RESPONSIVE — new effect remains absolute at ALL widths.
   ------------------------------------------------------------ */
@media (max-width:1280px){
  #main-content .ks-hero > .ks-hero-book3d{
    top:26px;
    transform:translateX(-50%) scale(.90);
    transform-origin:top center;
  }
}

@media (max-width:1024px){
  #main-content .ks-hero > .ks-hero-book3d{
    top:22px;
    transform:translateX(-50%) scale(.80);
  }

  #main-content .ks-hero-book3d__halo{
    filter:blur(6px);
  }
}

/* Tablet: still flagship, still top-center, still out of layout flow. */
@media (max-width:820px){
  #main-content .ks-hero > .ks-hero-book3d{
    top:18px;
    width:150px;
    height:116px;
    transform:translateX(-50%) scale(.68);
  }

  #main-content .ks-hero-book3d__approach{
    animation-duration:10s;
  }

  #main-content .ks-hero-book3d__half--left,
  #main-content .ks-hero-book3d__half--right,
  #main-content .ks-hero-book3d__flip,
  #main-content .ks-hero-book3d__spine,
  #main-content .ks-hero-book3d__energy > span,
  #main-content .ks-hero-book3d__wave{
    animation-duration:10s;
  }

  #main-content .ks-hero-book3d__halo{
    opacity:.46;
    filter:blur(5px);
  }
}

/* Mobile:
   NEW flagship remains at the very top center.
   OLD .ks-hero-bookfx remains untouched in its existing visual position. */
@media (max-width:620px){
  #main-content .ks-hero > .ks-hero-book3d{
    top:12px;
    width:132px;
    height:120px;
    transform:translateX(-50%) scale(.55);
    transform-origin:top center;
  }

  #main-content .ks-hero-book3d__scene{
    perspective:850px;
    -webkit-perspective:850px;
  }

  #main-content .ks-hero-book3d__halo{
    opacity:.32;
    filter:blur(4px);
  }

  #main-content .ks-hero-book3d__shadow{
    filter:blur(2px);
  }

  #main-content .ks-hero-book3d__wave > i{
    box-shadow:0 0 3px rgba(242,204,107,.11);
  }
}

@media (max-width:390px){
  #main-content .ks-hero > .ks-hero-book3d{
    top:10px;
    transform:translateX(-50%) scale(.49);
  }
}

/* Reduced motion:
   show a static premium open book + static waveform; nothing vanishes. */
@media (prefers-reduced-motion:reduce){
  #main-content .ks-hero-book3d__approach,
  #main-content .ks-hero-book3d__half--left,
  #main-content .ks-hero-book3d__half--right,
  #main-content .ks-hero-book3d__flip,
  #main-content .ks-hero-book3d__spine,
  #main-content .ks-hero-book3d__energy > span,
  #main-content .ks-hero-book3d__wave,
  #main-content .ks-hero-book3d__wave > i,
  #main-content .ks-hero-book3d__shadow,
  #main-content .ks-hero-book3d__halo{
    animation:none !important;
    will-change:auto;
  }

  #main-content .ks-hero-book3d__approach{
    transform:translateX(-50%) translateZ(0) scale(1);
    opacity:1;
  }

  #main-content .ks-hero-book3d__half--left{
    transform:rotateY(8deg) rotateZ(-2.2deg);
  }

  #main-content .ks-hero-book3d__half--right{
    transform:rotateY(-8deg) rotateZ(2.2deg);
  }

  #main-content .ks-hero-book3d__flip{
    opacity:0;
  }

  #main-content .ks-hero-book3d__spine{opacity:1}

  #main-content .ks-hero-book3d__energy > span{
    transform:scaleY(.78);
    opacity:.70;
  }

  #main-content .ks-hero-book3d__wave{
    transform:translateX(-50%) scaleX(1);
    opacity:.88;
  }

  #main-content .ks-hero-book3d__wave > i{
    transform:none;
    opacity:.85;
  }

  #main-content .ks-hero-book3d__shadow{
    width:116px;
    opacity:.48;
  }

  #main-content .ks-hero-book3d__halo{
    opacity:.42;
    transform:translateX(-50%) scale(1);
  }
}
/* ============================================================
   KITAAB SPEAKS — CONTINUOUS 3D BOOK MOTION — FINAL OVERRIDE
   Fix: book no longer closes/resets between loops.
   Book stays open continuously; pages turn forever; waveform stays alive.
   ============================================================ */

/* Keep the physical book permanently OPEN. */
#main-content .ks-hero-book3d__half--left{
  animation:none !important;
  transform:rotateY(13deg) rotateZ(-4deg) translateZ(0) !important;
}

#main-content .ks-hero-book3d__half--right{
  animation:none !important;
  transform:rotateY(-13deg) rotateZ(4deg) translateZ(0) !important;
}

/* Seamless subtle 3D float instead of closing/restarting. */
#main-content .ks-hero-book3d__approach{
  animation:ks-book3d-continuous-float 5.8s ease-in-out infinite !important;
}

/* Continuous staggered page turning. */
#main-content .ks-hero-book3d__flip--1{
  animation:ks-book3d-continuous-page 5.4s cubic-bezier(.36,.05,.18,1) infinite !important;
  animation-delay:0s !important;
}

#main-content .ks-hero-book3d__flip--2{
  animation:ks-book3d-continuous-page 5.4s cubic-bezier(.36,.05,.18,1) infinite !important;
  animation-delay:-1.8s !important;
}

#main-content .ks-hero-book3d__flip--3{
  animation:ks-book3d-continuous-page 5.4s cubic-bezier(.36,.05,.18,1) infinite !important;
  animation-delay:-3.6s !important;
}

/* Spine / energy remain alive continuously. */
#main-content .ks-hero-book3d__spine{
  animation:ks-book3d-continuous-spine 2.8s ease-in-out infinite !important;
}

#main-content .ks-hero-book3d__energy > span{
  opacity:.86 !important;
  animation:ks-book3d-continuous-energy 2.2s ease-in-out infinite !important;
}

/* Waveform stays visible and alive continuously. */
#main-content .ks-hero-book3d__wave{
  opacity:.96 !important;
  transform:translateX(-50%) scaleX(1) scaleY(1) !important;
  animation:ks-book3d-continuous-wave-shell 3.1s ease-in-out infinite !important;
}

#main-content .ks-hero-book3d__shadow{
  animation:ks-book3d-continuous-shadow 5.8s ease-in-out infinite !important;
}

#main-content .ks-hero-book3d__halo{
  animation:ks-book3d-continuous-halo 5.8s ease-in-out infinite !important;
}

@keyframes ks-book3d-continuous-float{
  0%,100%{
    transform:translateX(-50%) translateZ(0) scale(1) rotateX(0deg);
    opacity:1;
  }
  50%{
    transform:translateX(-50%) translateZ(10px) scale(1.025) rotateX(-1deg);
    opacity:1;
  }
}

@keyframes ks-book3d-continuous-page{
  0%,12%{
    transform:translateZ(11px) rotateY(0deg) rotateX(0deg) skewY(0deg);
    opacity:0;
  }
  16%{opacity:.94}
  34%{
    transform:translateZ(20px) rotateY(-74deg) rotateX(-7deg) skewY(-2deg);
    opacity:1;
  }
  54%{
    transform:translateZ(15px) rotateY(-142deg) rotateX(2deg) skewY(3deg);
    opacity:.96;
  }
  68%{
    transform:translateZ(8px) rotateY(-174deg) rotateX(1deg) skewY(4deg);
    opacity:.68;
  }
  76%,100%{
    transform:translateZ(6px) rotateY(-179deg) rotateX(0deg) skewY(4deg);
    opacity:0;
  }
}

@keyframes ks-book3d-continuous-spine{
  0%,100%{
    opacity:.76;
    box-shadow:
      0 0 6px rgba(242,204,107,.22),
      0 0 11px rgba(255,155,50,.07);
  }
  50%{
    opacity:1;
    box-shadow:
      0 0 10px rgba(242,204,107,.38),
      0 0 17px rgba(255,155,50,.13);
  }
}

@keyframes ks-book3d-continuous-energy{
  0%,100%{
    transform:scaleY(.62);
    opacity:.62;
  }
  50%{
    transform:scaleY(1);
    opacity:1;
  }
}

@keyframes ks-book3d-continuous-wave-shell{
  0%,100%{
    opacity:.86;
    transform:translateX(-50%) scaleX(.94) scaleY(.94);
  }
  50%{
    opacity:1;
    transform:translateX(-50%) scaleX(1) scaleY(1);
  }
}

@keyframes ks-book3d-continuous-shadow{
  0%,100%{
    width:108px;
    opacity:.48;
    filter:blur(3px);
  }
  50%{
    width:120px;
    opacity:.60;
    filter:blur(3px);
  }
}

@keyframes ks-book3d-continuous-halo{
  0%,100%{
    opacity:.44;
    transform:translateX(-50%) scale(.94);
  }
  50%{
    opacity:.62;
    transform:translateX(-50%) scale(1.04);
  }
}

@media(max-width:820px){
  #main-content .ks-hero-book3d__approach{
    animation-duration:6.6s !important;
  }

  #main-content .ks-hero-book3d__flip--1,
  #main-content .ks-hero-book3d__flip--2,
  #main-content .ks-hero-book3d__flip--3{
    animation-duration:6s !important;
  }
}

@media(max-width:620px){
  #main-content .ks-hero-book3d__approach{
    animation-duration:7s !important;
  }

  #main-content .ks-hero-book3d__flip--1,
  #main-content .ks-hero-book3d__flip--2,
  #main-content .ks-hero-book3d__flip--3{
    animation-duration:6.6s !important;
  }

  #main-content .ks-hero-book3d__wave{
    opacity:.88 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #main-content .ks-hero-book3d__approach,
  #main-content .ks-hero-book3d__flip,
  #main-content .ks-hero-book3d__spine,
  #main-content .ks-hero-book3d__energy > span,
  #main-content .ks-hero-book3d__wave,
  #main-content .ks-hero-book3d__shadow,
  #main-content .ks-hero-book3d__halo{
    animation:none !important;
  }

  #main-content .ks-hero-book3d__approach{
    transform:translateX(-50%) translateZ(0) scale(1) !important;
    opacity:1 !important;
  }

  #main-content .ks-hero-book3d__flip{
    opacity:0 !important;
  }

  #main-content .ks-hero-book3d__energy > span{
    transform:scaleY(.78) !important;
    opacity:.68 !important;
  }

  #main-content .ks-hero-book3d__wave{
    transform:translateX(-50%) scaleX(1) scaleY(1) !important;
    opacity:.88 !important;
  }
}
/* ============================================================
   KITAAB SPEAKS — MOBILE 3D BOOK SPACING + WAVE VISIBILITY FIX
   Scope: NEW flagship .ks-hero-book3d only.
   Old mobile book remains untouched.
   ============================================================ */

@media (max-width:620px){
  /* Move the NEW flagship book slightly upward inside the hero,
     creating clearer breathing space above the eyebrow text. */
  #main-content .ks-hero > .ks-hero-book3d{
    top:4px !important;
    transform:translateX(-50%) scale(.55) !important;
  }

  /* Keep the waveform continuously visible and readable on phones. */
  #main-content .ks-hero-book3d__wave{
    top:92px;
    width:156px;
    height:34px;
    gap:4px;
    opacity:1 !important;
    transform:translateX(-50%) scaleX(1.08) scaleY(1) !important;
    animation:ks-book3d-mobile-wave-shell 2.9s ease-in-out infinite !important;
  }

  #main-content .ks-hero-book3d__wave::before{
    left:0;
    right:0;
    height:1.5px;
    opacity:.92;
  }

  #main-content .ks-hero-book3d__wave > i{
    flex-basis:4px;
    width:4px;
    min-height:5px;
    opacity:.98;
    box-shadow:
      0 0 6px rgba(242,204,107,.22),
      0 0 8px rgba(255,155,50,.08);
  }

  /* Slightly stronger book-to-wave connection on mobile. */
  #main-content .ks-hero-book3d__energy{
    top:77px;
    height:19px;
  }

  #main-content .ks-hero-book3d__energy > span{
    width:4px;
    opacity:.96 !important;
    box-shadow:
      0 0 8px rgba(242,204,107,.34),
      0 0 12px rgba(255,155,50,.10);
  }

  @keyframes ks-book3d-mobile-wave-shell{
    0%,100%{
      opacity:.88;
      transform:translateX(-50%) scaleX(1.02) scaleY(.92);
    }
    50%{
      opacity:1;
      transform:translateX(-50%) scaleX(1.12) scaleY(1.06);
    }
  }
}

@media (max-width:390px){
  #main-content .ks-hero > .ks-hero-book3d{
    top:2px !important;
    transform:translateX(-50%) scale(.50) !important;
  }

  #main-content .ks-hero-book3d__wave{
    width:150px;
    top:91px;
    gap:3.5px;
  }

  #main-content .ks-hero-book3d__wave > i{
    flex-basis:3.5px;
    width:3.5px;
  }
}

/* Respect reduced-motion after the mobile override. */
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  #main-content .ks-hero-book3d__wave{
    animation:none !important;
    opacity:.92 !important;
    transform:translateX(-50%) scaleX(1.05) scaleY(1) !important;
  }
}