/* =====================================================================
   BooKKav — Homepage (refined literary luxury; emerald lit hero)
   ===================================================================== */

/* ---------------- HERO ---------------- */
.hp-hero{position:relative; overflow:hidden; isolation:isolate; color:rgba(255,255,255,.84);
  padding:clamp(54px,7vw,96px) 0 clamp(60px,7vw,96px);
  background:
    radial-gradient(132% 132% at 50% 14%,transparent 50%,rgba(4,20,14,.52) 100%),
    radial-gradient(46% 56% at 80% 0%,rgba(214,172,96,.24),transparent 58%),
    radial-gradient(60% 74% at 5% 106%,rgba(47,123,97,.38),transparent 64%),
    radial-gradient(40% 52% at 15% 2%,rgba(96,168,136,.20),transparent 60%),
    linear-gradient(155deg,#0d3f30 0%,#104a39 47%,#0a3124 100%);}
.hp-hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 20%);}
.hp-hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hp-hero__grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;}

.hp-eyebrow{font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bk-gold); display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1rem;}
.hp-eyebrow::before{content:""; width:26px; height:1px; background:color-mix(in srgb,var(--bk-gold) 50%,transparent);}
.hp-eyebrow--center{justify-content:center;}
.hp-hero .hp-eyebrow{color:#DCB877;}
.hp-hero .hp-eyebrow::before{background:rgba(220,184,119,.55);}

.hp-hero__copy h1{font-size:clamp(2rem,3.9vw,3.15rem); line-height:1.32; color:#FBF6EA; font-weight:700; margin:0;}
.hp-gold{color:#E7C67C;}
.hp-hero__lead{margin:1.3rem 0 0; font-size:1.08rem; line-height:2; color:rgba(255,255,255,.82); max-width:46ch;}
.hp-hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; margin-top:2rem;}
.hp-hero__trust{display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16);}
.hp-hero__trust div{display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:rgba(255,255,255,.8);}
.hp-hero__trust svg{width:17px; height:17px; color:#83CBA9; flex-shrink:0;}

/* ---------------- HERO ART: refined closed luxury book ---------------- */
.hp-hero__art{position:relative;}
.hp-scene{position:relative; display:grid; place-items:center; min-height:430px;}
.hp-scene__halo{position:absolute; inset:2% 6%; border-radius:50%; filter:blur(10px);
  background:radial-gradient(circle at 50% 46%,rgba(214,172,96,.26),rgba(47,123,97,.16) 36%,transparent 66%);
  animation:hpHalo 7s ease-in-out infinite;}

.hp-book{position:relative; width:min(230px,58%); aspect-ratio:300/420;
  animation:hpBook 7s ease-in-out infinite; filter:drop-shadow(0 40px 44px rgba(0,0,0,.5));}

.hp-book__block{position:absolute; top:9px; bottom:9px; left:-14px; width:17px; border-radius:3px 0 0 3px;
  background:repeating-linear-gradient(180deg,#F6EFDD 0 2px,#D7C7A2 2px 3px); box-shadow:inset -4px 0 6px rgba(0,0,0,.2);}
.hp-book__block::before{content:""; position:absolute; top:-2px; left:1px; right:0; height:3px; border-radius:2px; background:linear-gradient(90deg,#E7CE94,#C2A05A);}

.hp-book__spine{position:absolute; top:0; bottom:0; right:-4px; width:11px; border-radius:0 5px 5px 0;
  background:linear-gradient(90deg,#0b3528,#0a2e24); box-shadow:inset 2px 0 5px rgba(0,0,0,.35);}
.hp-book__spine::after{content:""; position:absolute; left:3px; right:3px; top:22%; height:46%; border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(194,160,90,.4) 20%,rgba(194,160,90,.4) 80%,transparent);}

.hp-book__cover{position:absolute; inset:0; border-radius:4px 9px 9px 4px; overflow:hidden;
  background:radial-gradient(130% 80% at 50% -10%,rgba(255,255,255,.14),transparent 55%),linear-gradient(150deg,#2f9070,#177a5d 45%,#0c3a2c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 90px rgba(0,0,0,.36);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.95rem; padding:2.4rem 1.5rem; text-align:center;}
.hp-book__cover::before{content:""; position:absolute; inset:14px; border:1px solid rgba(194,160,90,.55); border-radius:3px 7px 7px 3px;}
.hp-book__cover::after{content:""; position:absolute; inset:18px; border:1px solid rgba(194,160,90,.22); border-radius:2px 5px 5px 2px;}

.hp-book__sheen{position:absolute; top:-30%; bottom:-30%; width:46%; left:-60%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.2) 45%,rgba(255,255,255,.04) 62%,transparent); transform:skewX(-12deg); animation:hpSheen 7s ease-in-out infinite;}

.hp-book__seal{position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(194,160,90,.6); color:#E7CE94; font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  background:radial-gradient(circle at 38% 30%,rgba(231,206,148,.2),transparent 62%); box-shadow:inset 0 0 0 4px rgba(194,160,90,.12); text-shadow:0 1px 1px rgba(0,0,0,.45);}
.hp-book__rule{position:relative; width:40px; height:1px; background:linear-gradient(90deg,transparent,rgba(231,206,148,.65),transparent);}
.hp-book__title{position:relative; font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.55; color:#EAD49A; text-shadow:0 1px 1px rgba(0,0,0,.4),0 0 16px rgba(231,206,148,.18);}
.hp-book__orn{position:relative; color:rgba(194,160,90,.7); font-size:.7rem; letter-spacing:.4em;}
.hp-book__brand{position:relative; font-size:.78rem; letter-spacing:.24em; color:rgba(231,206,148,.85);}

@keyframes hpBook{0%,100%{transform:perspective(1300px) rotateY(-9deg) rotateX(2deg) translateY(0);}50%{transform:perspective(1300px) rotateY(-3deg) rotateX(2deg) translateY(-11px);}}
@keyframes hpSheen{0%,8%{left:-60%;}60%,100%{left:130%;}}
@keyframes hpHalo{0%,100%{opacity:.8; transform:scale(1);}50%{opacity:1; transform:scale(1.05);}}

/* floating glass chips */
.hp-chip{position:absolute; z-index:3; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:.6rem .85rem; box-shadow:0 18px 32px -16px rgba(0,0,0,.55); backdrop-filter:blur(10px); display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:#F3EFE4;}
.hp-chip svg{width:15px; height:15px; color:#E7C67C;}
.hp-chip--1{bottom:8%; inset-inline-end:-2%; animation:hpChipA 5s ease-in-out infinite;}
.hp-chip--2{top:9%; inset-inline-start:-3%; animation:hpChipB 6.5s ease-in-out infinite .4s;}
@keyframes hpChipA{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes hpChipB{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

/* ---------------- TRUST STRIP ---------------- */
.hp-strip{border-block:1px solid var(--bk-border); background:var(--bk-inset);}
.hp-strip__row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.2rem; padding-block:18px;}
.hp-strip__row div{display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--bk-heading);}
.hp-strip__row svg{width:18px; height:18px; color:var(--bk-gold);}
.hp-dot{width:4px; height:4px; border-radius:50%; background:color-mix(in srgb,var(--bk-gold) 45%,transparent);}

/* ---------------- SECTION SHELL ---------------- */
.hp-section{padding:clamp(64px,8vw,108px) 0;}
.hp-section--alt{background:var(--bk-inset);}
.hp-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:clamp(2rem,4vw,3rem);}
.hp-head h2{margin:.7rem 0 0;}
.hp-head__sub{margin:.6rem 0 0; color:var(--bk-body); font-size:1rem;}
.hp-head--center{flex-direction:column; align-items:center; text-align:center;}
.hp-more{color:var(--bk-brand); font-weight:600; font-size:.95rem; white-space:nowrap; position:relative;}
.hp-more::after{content:""; position:absolute; inset-inline:0; bottom:-3px; height:1px; background:var(--bk-gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);}
.hp-more:hover::after{transform:scaleX(1);}

/* ---------------- SHELVES ---------------- */
.hp-shelves{display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem;}
.hp-shelf{display:flex; flex-direction:column; gap:.55rem; padding:.7rem .7rem 1rem; background:var(--bk-card); border:1px solid var(--bk-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.hp-shelf:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--bk-gold) 45%,transparent);}
.hp-shelf__cover{position:relative; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:linear-gradient(150deg,var(--c1),var(--c2)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.hp-shelf__cover::before{content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.14); border-radius:5px;}
.hp-shelf__ed{position:absolute; top:7px; bottom:7px; inset-inline-end:0; width:5px; background:repeating-linear-gradient(180deg,#F4E9CC 0 2px,var(--bk-lux-gold-b) 2px 3px);}
.hp-shelf strong{font-size:.98rem; color:var(--bk-heading); font-weight:600; padding-inline:.2rem;}
.hp-shelf small{color:var(--bk-muted); font-size:.66rem; letter-spacing:.16em; padding-inline:.2rem;}

/* ---------------- SPLIT (translation + reader) ---------------- */
.hp-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
.hp-split__media{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:330px; padding:2.4rem; color:#E7F0EA;
  background:linear-gradient(150deg,var(--bk-brand),var(--bk-emerald-c)); box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:flex-end;}
.hp-split__media::before{content:""; position:absolute; inset:16px; border:1px solid rgba(168,129,45,.45); border-radius:calc(var(--radius-lg) - 8px); pointer-events:none;}
.hp-split__badge{position:absolute; top:2rem; inset-inline-start:2rem; font-size:.72rem; letter-spacing:.2em; color:var(--bk-lux-gold-b); text-transform:uppercase;}
.hp-split__media h3{color:#FBF6EA; font-size:1.45rem; line-height:1.5; max-width:20ch; margin:0;}
.hp-split__media>p{color:rgba(255,255,255,.78); margin:.7rem 0 0; font-size:.95rem;}
.hp-steps{margin-top:1.6rem; display:grid; gap:.7rem;}
.hp-steps div{display:flex; gap:.7rem; align-items:center; color:rgba(255,255,255,.86); font-size:.9rem;}
.hp-steps i{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex-shrink:0; border:1px solid rgba(168,129,45,.45); color:var(--bk-lux-gold-b); font-style:normal; font-size:.78rem; font-weight:600;}
.hp-split__copy h2{margin:.7rem 0 0;}
.hp-split__copy>p{margin:1rem 0 0; color:var(--bk-body);}
.hp-flist{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.85rem;}
.hp-flist li{display:flex; gap:.7rem; align-items:flex-start; color:var(--bk-heading);}
.hp-flist svg{width:18px; height:18px; color:var(--bk-gold); flex-shrink:0; margin-top:.35rem;}
.hp-split__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem;}

/* reader mockup */
.hp-reader{background:var(--bk-card); border:1px solid var(--bk-border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;}
.hp-reader__bar{display:flex; align-items:center; gap:.4rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--bk-border); background:var(--bk-inset);}
.hp-reader__bar span{width:10px; height:10px; border-radius:50%; background:color-mix(in srgb,var(--bk-gold) 40%,transparent);}
.hp-reader__bar em{margin-inline-start:auto; font-style:normal; font-size:.74rem; letter-spacing:.18em; color:var(--bk-muted);}
.hp-reader__page{padding:1.6rem 1.6rem 1.2rem;}
.hp-reader__page h4{color:var(--bk-brand); margin:0 0 .8rem; font-size:1.05rem;}
.hp-reader__page p{margin:0 0 .9rem; color:var(--bk-body); font-size:.96rem; line-height:2;}
.hp-reader__progress{display:block; height:3px; border-radius:99px; background:var(--bk-inset); margin-top:1.2rem; overflow:hidden;}
.hp-reader__progress i{display:block; height:100%; width:62%; background:linear-gradient(90deg,var(--bk-lux-gold-b),var(--bk-gold));}
.hp-reader__modes{display:flex; gap:.5rem; padding:0 1.6rem 1.4rem;}
.hp-reader__modes span{font-size:.78rem; color:var(--bk-muted); border:1px solid var(--bk-border); border-radius:999px; padding:.3rem .8rem;}
.hp-reader__modes span:first-child{border-color:color-mix(in srgb,var(--bk-gold) 50%,transparent); color:var(--bk-gold);}

/* ---------------- WHY ---------------- */
.hp-why{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.hp-val{position:relative; padding:1.7rem; background:var(--bk-card); border:1px solid var(--bk-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.hp-val:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--bk-gold) 40%,transparent);}
.hp-val__i{width:50px; height:50px; border-radius:13px; display:grid; place-items:center; margin-bottom:1.1rem; background:rgba(21,97,74,.07); border:1px solid rgba(21,97,74,.14); color:var(--bk-brand);}
.hp-val__i svg{width:23px; height:23px;}
.hp-val__n{position:absolute; top:1.5rem; inset-inline-end:1.7rem; color:var(--bk-gold); font-size:.8rem; letter-spacing:.1em;}
.hp-val h3{margin:0 0 .4rem;}
.hp-val p{margin:0; color:var(--bk-body); font-size:.95rem;}

/* ---------------- BAND ---------------- */
.hp-band{position:relative; overflow:hidden; background:linear-gradient(150deg,#0E3F30,#15614A);}
.hp-band::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 85% 0,rgba(168,129,45,.16),transparent 60%);}
.hp-band__inner{position:relative; text-align:center; padding-block:clamp(56px,7vw,88px);}
.hp-band__quote{display:block; color:rgba(168,129,45,.5); font-size:4rem; line-height:1;}
.hp-band__inner h2{color:#FBF6EA; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.6; max-width:24ch; margin:.3rem auto 0;}
.hp-band__inner>p{color:rgba(255,255,255,.74); margin:1rem auto 0; max-width:50ch;}
.hp-band__actions{margin-top:1.9rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}

/* ---------------- HERO/HEADER overlay (homepage) ---------------- */
body.page-home .hp-hero{margin-top:-74px; padding-top:clamp(118px,12vw,164px);}
@media (max-width:620px){ body.page-home .hp-hero{margin-top:-64px; padding-top:104px;} }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px){
  .hp-hero__grid,.hp-split{grid-template-columns:1fr;}
  .hp-hero__art{order:-1;}
  .hp-scene{min-height:360px;}
  .hp-split--reverse .hp-reader{order:-1;}
  .hp-shelves{grid-template-columns:repeat(3,1fr);}
  .hp-why{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .hp-shelves{grid-template-columns:repeat(2,1fr);}
  .hp-head{flex-direction:column; align-items:flex-start;}
  .hp-head--center{align-items:center;}
  .hp-hero__actions .btn{flex:1;}
}
@media (prefers-reduced-motion:reduce){
  .hp-book,.hp-scene__halo,.hp-chip--1,.hp-chip--2{animation:none !important;}
  .hp-book{transform:rotate(-4deg) !important;}
  .hp-fx__rings{animation:none !important;}
}

/* Homepage carries a slightly heavier base text weight for a more confident,
   premium first impression (headings keep their own explicit weights). */
body.page-home{font-weight:500;}
body.page-home .hp-hero__copy h1{font-weight:800;}

/* ============================================================
   Translation showcase — luxurious emerald + gold band
   ============================================================ */
.hp-xlate{position:relative; isolation:isolate; overflow:hidden; color:#FBF6EA;
  padding:clamp(66px,8vw,116px) 0;
  background:linear-gradient(158deg,#0E3F30 0%,#124E3B 48%,#0A2E24 100%);}
.hp-xlate__bg{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52% 60% at 88% 0,rgba(231,206,148,.18),transparent 60%),
    radial-gradient(48% 58% at 4% 100%,rgba(168,129,45,.20),transparent 62%);}
.hp-xlate__bg::after{content:""; position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hp-xlate__inner{position:relative; z-index:1;}

.hp-xlate__head{text-align:center; max-width:62ch; margin:0 auto;}
.hp-xlate__head h2{color:#FBF6EA; font-size:clamp(1.95rem,4vw,3.05rem); line-height:1.32; font-weight:800; margin:.35rem 0 0;}
.hp-xlate__lead{color:rgba(251,246,234,.82); margin:1.15rem auto 0; max-width:56ch; line-height:2; font-size:1.02rem;}

/* any language → any language */
.hp-xlate__flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.8rem 1.1rem;
  width:max-content; max-width:100%; margin:clamp(2.2rem,4vw,3.3rem) auto 0; padding:1rem 1.5rem;
  border:1px solid rgba(231,206,148,.3); border-radius:999px;
  background:rgba(255,255,255,.045); backdrop-filter:blur(5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.hp-xlate__flow-label{font-weight:800; font-size:1.05rem; color:var(--bk-lux-gold-a); white-space:nowrap;}
.hp-xlate__langs{display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center;}
.hp-xlate__langs span{font-size:.82rem; padding:.34rem .8rem; border-radius:999px; color:#F4E3BC;
  background:rgba(231,206,148,.1); border:1px solid rgba(231,206,148,.28);}
.hp-xlate__arrow{display:inline-grid; place-items:center; color:var(--bk-lux-gold-a); flex:0 0 auto;}
.hp-xlate__arrow svg{width:46px; height:22px;}

/* guarantee cards */
.hp-xlate__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); margin:clamp(2.4rem,4vw,3.5rem) 0 0;}
.hp-xlate__card{position:relative; padding:1.7rem 1.6rem; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  border:1px solid rgba(231,206,148,.22); box-shadow:0 24px 60px -40px rgba(0,0,0,.6);}
.hp-xlate__ico{display:grid; place-items:center; width:50px; height:50px; border-radius:15px; margin-bottom:1.05rem; color:#0E3F30;
  background:linear-gradient(150deg,var(--bk-lux-gold-a),var(--bk-lux-gold-c)); box-shadow:var(--shadow-gold);}
.hp-xlate__ico svg{width:25px; height:25px;}
.hp-xlate__card h3{color:#FBF6EA; font-size:1.12rem; font-weight:700; margin:0 0 .5rem;}
.hp-xlate__card p{color:rgba(251,246,234,.74); line-height:1.9; margin:0; font-size:.92rem;}

/* cta + note */
.hp-xlate__cta{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:clamp(2.3rem,4vw,3.1rem);}
.hp-xlate__note{text-align:center; color:rgba(231,206,148,.66); font-size:.86rem; margin:1.15rem auto 0; max-width:52ch; line-height:1.9;}

@media (max-width:860px){
  .hp-xlate__cards{grid-template-columns:1fr;}
  .hp-xlate__flow{border-radius:var(--radius-lg); width:100%;}
  .hp-xlate__arrow{transform:rotate(90deg);}
}

/* ============================================================
   Hero ambient FX — concentric rings + drifting dots (v11)
   ============================================================ */
.hp-fx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hp-fx__rings{
  position:absolute; top:50%; left:20%;
  width:min(92vh,900px); aspect-ratio:1;
  transform:translate(-50%,-50%); transform-origin:center;
  opacity:.6;
  animation:hpRingSpin 120s linear infinite;
}
.hp-fx__dots{ position:absolute; inset:0; width:100%; height:100%; display:block; }
@keyframes hpRingSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (max-width:920px){
  .hp-fx__rings{ left:50%; top:22%; width:min(124vw,680px); opacity:.72; }
}