/* =============================================================================
   TestKav · pages/home.css  — homepage-specific (luxe white).
   Foundation + shared components live in luxe.css. This adds: live exam-search,
   B2B courses section, and the articles grid. Tokens come from luxe.css :root.
   ========================================================================== */

/* ---------- live exam search ---------- */
.search-band{padding:14px 0 6px}
.exam-search-card{width:min(740px,100%);margin:0 auto;text-align:center}
.exam-search-card .lifted-head{margin-bottom:18px}
.exam-search-card .lifted-title{font-family:var(--ff-d);font-weight:800;font-size:1.22rem;color:var(--ink);line-height:1.4}
.exam-search-card .lifted-sub{font-size:.86rem;color:var(--ink-3);margin-top:6px}
.exam-search-form{display:flex;gap:10px;align-items:stretch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.exam-search-input-wrap{flex:1;position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:15px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.exam-search-input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-faint)}
.exam-search-icon{display:grid;place-items:center;padding-inline:15px;color:var(--gold-deep);font-size:1.05rem}
#examSearchInput{flex:1;border:0;background:transparent;outline:none;padding:15px 0;font-family:inherit;font-size:.98rem;color:var(--ink)}
#examSearchInput::placeholder{color:var(--ink-3);opacity:.8}
.exam-search-clear{border:0;background:transparent;color:var(--ink-3);font-size:1.3rem;line-height:1;padding:0 14px;cursor:pointer;transition:color .3s}
.exam-search-clear:hover{color:var(--gold-deep)}
#examSearchBtn{flex:none;border:0;cursor:pointer;font-family:var(--ff-d);font-weight:800;font-size:.95rem;color:var(--btn-ink);background:var(--btn-grad);border-radius:15px;padding:0 28px;box-shadow:var(--btn-shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
#examSearchBtn:hover{background:var(--btn-grad-hover);transform:translateY(-2px);box-shadow:var(--btn-shadow-hover)}
#examSearchBtn:active{transform:translateY(0);box-shadow:var(--btn-shadow-active)}
#examSearchBtn:focus-visible{outline:0;box-shadow:var(--ring),var(--btn-shadow)}
.exam-search-meta{margin-top:12px;font-size:.84rem;color:var(--ink-3);text-align:start;min-height:1px}
.exam-search-results{margin-top:14px;text-align:start;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 24px 54px -28px rgba(20,17,13,.22);overflow:hidden}
.exam-search-results[hidden]{display:none}
.exam-search-grid{display:grid}
.exam-search-item{display:block;padding:18px 20px;border-top:1px solid var(--line);position:relative;transition:background .3s var(--ease)}
.exam-search-item:first-child{border-top:0}
.exam-search-item::after{content:"";position:absolute;inset-inline:20px;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.exam-search-item:hover{background:var(--paper-2)}
.exam-search-item:hover::after{transform:scaleX(1)}
.exam-search-title{font-family:var(--ff-d);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.45}
.exam-search-lines{margin-top:8px;display:grid;gap:5px}
.exam-search-lines .line{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2)}
.exam-search-lines .line i{color:var(--gold-deep);font-size:.9rem}
.exam-search-lines .k{color:var(--ink-3)}
.exam-search-lines .v{color:var(--ink);font-weight:500}
.exam-search-lines .v.ltr{direction:ltr;unicode-bidi:isolate}
.exam-search-pills{margin-top:11px;display:flex;flex-wrap:wrap;gap:7px}
.exam-search-pills .pill{font-size:.72rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 11px}
.exam-search-pills .pill-primary{color:var(--gold-deep);border-color:var(--gold-soft);background:#fffdf6;display:inline-flex;align-items:center;gap:5px}
.exam-search-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:.86rem;font-weight:700;color:var(--gold-deep)}
.exam-search-cta i{transition:transform .4s var(--ease)}
.exam-search-item:hover .exam-search-cta i{transform:translateX(-5px)}
.exam-search-empty{padding:34px 24px;text-align:center}
.exam-search-empty .empty-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;color:var(--gold-deep);border:1px solid var(--gold-soft)}
.exam-search-empty .title{font-family:var(--ff-d);font-weight:700;font-size:1.05rem;color:var(--ink)}
.exam-search-empty .sub{font-size:.86rem;color:var(--ink-3);margin-top:7px;line-height:1.7}

/* ---------- B2B courses (refined, hairline panels — not heavy boxes) ---------- */
.courses{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.course{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.course::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.course--gold::before{background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.course--navy::before{background:linear-gradient(90deg,#2a3566,#1c2447)}
.course:hover{border-color:var(--gold-soft);box-shadow:0 26px 56px -34px rgba(20,17,13,.26);transform:translateY(-3px)}
.course:hover::before{transform:scaleX(1)}
.course__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.course__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;color:var(--gold-deep);border:1px solid var(--gold-soft);background:#fffdf6}
.course--navy .course__icon{color:#2a3566;border-color:rgba(28,36,71,.25);background:#fafbff}
.course__pill{font-size:.72rem;font-weight:700;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:5px 13px}
.course__title{font-family:var(--ff-d);font-weight:800;font-size:1.12rem;color:var(--ink);line-height:1.5;margin-bottom:10px}
.course__desc{font-size:.9rem;color:var(--ink-2);line-height:1.85;margin-bottom:16px}
.course__list{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.course__list li{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--ink-2);line-height:1.7}
.course__list li i{flex:none;margin-top:3px;color:var(--gold-deep);font-size:.95rem}
.course__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.btn-fill{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-d);font-weight:800;font-size:.9rem;color:var(--btn-ink);background:var(--btn-grad);border-radius:13px;padding:13px 22px;box-shadow:var(--btn-shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),filter .25s var(--ease)}
.btn-fill:hover{background:var(--btn-grad-hover);transform:translateY(-2px);box-shadow:var(--btn-shadow-hover)}
.btn-fill:active{transform:translateY(0);box-shadow:var(--btn-shadow-active)}
.btn-fill:focus-visible{outline:0;box-shadow:var(--ring),var(--btn-shadow)}
.course--navy .btn-fill{color:#fff;background:linear-gradient(180deg,#2a3458 0%,#1c2447 60%,#161d3a 100%);box-shadow:0 10px 24px -12px rgba(28,36,71,.55),inset 0 1px 0 rgba(255,255,255,.12)}
.course--navy .btn-fill:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(28,36,71,.6),inset 0 1px 0 rgba(255,255,255,.16)}
.course--navy .btn-fill:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(28,36,71,.5)}
.course--navy .btn-fill:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(28,36,71,.3),0 0 0 1px #1c2447,0 10px 24px -12px rgba(28,36,71,.55)}
.btn-text{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;color:var(--ink);position:relative;transition:color .3s}
.btn-text:hover{color:var(--gold-deep)}

/* ---------- articles ---------- */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.article::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.article:hover{border-color:var(--gold-soft);box-shadow:0 24px 52px -32px rgba(20,17,13,.24);transform:translateY(-3px)}
.article:hover::before{transform:scaleX(1)}
.article__tag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;color:var(--gold-deep);margin-bottom:12px}
.article__title{font-family:var(--ff-d);font-weight:700;font-size:1.1rem;color:var(--ink);line-height:1.6;margin-bottom:10px}
.article__excerpt{font-size:.88rem;color:var(--ink-2);line-height:1.85;flex:1;margin-bottom:16px}
.article__meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;font-size:.82rem;color:var(--ink-3)}
.article__meta i{color:var(--gold-deep)}
.article__cta{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);transition:color .3s}
.article__cta i{transition:transform .4s var(--ease)}
.article:hover .article__cta{color:var(--gold-deep)}
.article:hover .article__cta i{transform:translateX(-5px)}
.articles-more{display:flex;justify-content:center;margin-top:36px}

@media (max-width:880px){
  .courses{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .exam-search-form{flex-direction:column}
  #examSearchBtn{padding:14px}
}

/* =============================================================================
   Phase 5 · home luxe polish — refinements only (home-only; loaded after luxe.css)
   ========================================================================== */
/* hero: premium button CTAs sit tighter */
.hero .cta-row{gap:14px;margin-top:38px}

/* credential card: deeper float + slow premium sheen sweep */
.cred{box-shadow:0 60px 104px -46px rgba(20,17,13,.36),0 16px 36px -20px rgba(20,17,13,.16)}
.cred::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(122deg,transparent 40%,rgba(255,255,255,.5) 49%,transparent 58%);
  transform:translateX(-130%);animation:credSheen 7.5s ease-in-out 1.4s infinite}
@keyframes credSheen{0%,74%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}

/* floating domain chips: a touch more depth + gold edge */
.fchip{box-shadow:0 18px 36px -18px rgba(20,17,13,.32),inset 0 1px 0 rgba(255,255,255,.85);border-color:var(--gold-soft)}

/* domain tiles: warm jewel finish at rest (hover gold stays from luxe.css) */
.dom-ic{background:linear-gradient(160deg,#fffdf4,#fff6dd);box-shadow:0 12px 24px -16px rgba(207,154,12,.42),inset 0 1px 0 rgba(255,255,255,.85)}

/* featured list: richer monogram badge */
.mono{background:radial-gradient(circle at 38% 28%,#fffdf6,#fffbf0)}

/* trusted-by strip: framed as a refined band that brightens on hover */
.trust{margin:8px 0 2px;padding:20px 24px;border-block:1px solid var(--line);gap:22px}
.trust .lbl{font-weight:600;color:var(--ink-2)}
.trust b{transition:opacity .35s var(--ease)}
.trust:hover b{opacity:1}

/* live search: soft resting elevation + warmer focus glow */
.exam-search-input-wrap{box-shadow:var(--shadow-sm)}
.exam-search-input-wrap:focus-within{box-shadow:0 0 0 4px var(--gold-faint),0 16px 32px -20px rgba(207,154,12,.4)}

/* stats: refined "by the numbers" panel with a gold crown accent */
.stats{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,#fffdf8,#fff);box-shadow:0 34px 82px -56px rgba(20,17,13,.22)}
.stats::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent)}
.stat{padding:42px 18px}

/* closing: premium call-to-action card */
.close{padding:50px 46px;border:1px solid var(--line);border-radius:24px;
  background:radial-gradient(130% 170% at 100% 0%,var(--gold-faint),transparent 56%),linear-gradient(180deg,#fffdf8,#fff);
  box-shadow:0 44px 96px -58px rgba(20,17,13,.28)}

/* QA: remove tracking from the Persian certificate sub-line (no letter-spacing on Persian) */
.cred-sub{letter-spacing:normal}

/* =============================================================================
   Phase 5b · soft LIGHT lighting for the home entrance (home-only; airy, light)
   ========================================================================== */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(54% 60% at 74% 16%, rgba(255,205,74,.20), transparent 58%),
    radial-gradient(50% 56% at 24% 38%, rgba(255,255,255,.9), transparent 60%);
  filter:blur(2px)}
/* gentle halo so the credential card reads as softly lit */
.hero-visual{position:relative;isolation:isolate}
.hero-visual::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:30px;pointer-events:none;
  background:radial-gradient(56% 54% at 50% 42%, rgba(255,206,77,.28), rgba(255,206,77,.09) 46%, transparent 70%);
  filter:blur(10px)}
/* a whisper of ambient light across the upper page, fading out before content */
.wrap > .trust{position:relative}
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:heroGlow 9s ease-in-out infinite}
  /* professional floating motion for the whole credential visual (card + chips + halo);
     applied to .hero-visual so it never clashes with the card's reveal transform */
  .hero-visual{animation:credFloat 6.5s ease-in-out infinite;will-change:transform}
  .hero-visual:hover{animation-play-state:paused}
}
@keyframes heroGlow{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes credFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-.6deg)}}

/* fix: too much white space BELOW the search band before the domains section
   (the next .sec inherits luxe's 78px top padding) — tighten only that gap */
.search-band{padding-bottom:0}
.search-band + .sec{padding-top:34px}

/* =============================================================================
   Final homepage polish — spacing · special effects · motion
   ========================================================================== */
/* spacing: a more generous, premium section rhythm */
.sec{padding:88px 0}
.sec-head{margin-bottom:50px}
.hero{padding:88px 0 72px}
.search-band + .sec{padding-top:40px}
.why{gap:72px}

/* domains & feature tiles: warm jewel hover with a soft gold inner edge (richer than flat) */
.domain,.feat{transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.domain:hover,.feat:hover{background:linear-gradient(180deg,#fffdf7,#fff);box-shadow:inset 0 0 0 1px var(--gold-faint)}

/* hero: a richer halo behind the credential */
.hero-visual::before{background:radial-gradient(56% 54% at 50% 42%, rgba(255,206,77,.36), rgba(255,206,77,.12) 46%, transparent 70%)}

/* stats: a soft inner glow beneath the gold crown */
.stats::after{content:"";position:absolute;inset-inline:0;top:0;height:96px;pointer-events:none;
  background:radial-gradient(78% 100% at 50% 0%, rgba(255,206,77,.16), transparent 72%)}

/* motion: a gentle breathing halo + lively, independently-bobbing domain chips */
@media (prefers-reduced-motion:no-preference){
  .hero-visual::before{animation:credHalo 6.5s ease-in-out infinite}
  .fchip{animation:chipBob 5s ease-in-out infinite}
  .fchip.f2{animation-delay:.8s;animation-duration:5.6s}
  .fchip.f3{animation-delay:1.7s;animation-duration:4.6s}
}
@keyframes credHalo{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes chipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}