:root{
  /* =========================
     KHUTAA BRAND PALETTE
     ========================= */
  --brand-blue:#2E4A96;
  --brand-blue-2:#6B7FD3;
  --brand-teal:#2E7B79;
  --brand-blush:#E8C2D0;
  --brand-rose:#F3DDE5;
  --brand-lilac:#D9D2F4;
  --brand-sand:#F8F2EE;
  --brand-cream:#FFFDFB;

  /* Keep old variable names so the whole CSS keeps working */
  --pink:var(--brand-blush);
  --sky:var(--brand-lilac);
  --white:#ffffff;
  --pinky:rgba(232,194,208,.30);

  --brown:#8E6D62;
  --coffee:#6E5952;
  --green:var(--brand-teal);
  --aqua:#9FD6D2;
  --yellow:var(--brand-sand);
  --redSoft:#E9AFC2;

  /* Neutrals */
  --bg:#FCF7FA;
  --card:rgba(255,255,255,.90);
  --card2:rgba(255,255,255,.82);

  --text:#24345C;
  --ink:var(--text);      /* fix missing variable */
  --muted:#6E708C;
  --line:rgba(46,74,150,.10);

  /* extra compatibility vars */
  --blue:var(--brand-blue);
  --blue2:var(--brand-blue-2); /* fix missing variable */

  /* Gradients */
  --grad-primary: linear-gradient(
    135deg,
    #2E4A96 0%,
    #5C73C9 52%,
    #2E7B79 100%
  );

  --grad-hero: linear-gradient(
    180deg,
    rgba(255,255,255,.78),
    rgba(255,255,255,.40)
  );

  --grad-soft: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-rose) 48%, #fff),
    color-mix(in srgb, var(--brand-lilac) 42%, #fff),
    color-mix(in srgb, var(--brand-sand) 72%, #fff)
  );

  /* Shadows */
  --shadow: 0 18px 65px rgba(36,52,92,.10);
  --shadow2: 0 10px 28px rgba(36,52,92,.09);
  --glowPink: 0 22px 70px color-mix(in srgb, var(--brand-blush) 34%, transparent);
  --glowSky:  0 22px 70px color-mix(in srgb, var(--brand-blue-2) 24%, transparent);

  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(
      900px 520px at 12% -10%,
      color-mix(in srgb, var(--brand-rose) 28%, transparent),
      transparent 62%
    ),
    radial-gradient(
      900px 520px at 88% -10%,
      color-mix(in srgb, var(--brand-lilac) 28%, transparent),
      transparent 62%
    ),
    radial-gradient(
      1100px 760px at 50% 115%,
      color-mix(in srgb, var(--brand-sand) 42%, transparent),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 88%, #fff),
      var(--bg)
    );
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[dir="rtl"] body{font-family: Cairo, system-ui, -apple-system, Segoe UI, Roboto, Arial}

::selection{
  background: color-mix(in srgb, var(--brand-blush) 55%, transparent);
}


a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.link{color:var(--muted)}
.link.strong{color:var(--text);font-weight:900}
.sep{color:rgba(91,90,115,.85)}
.w-100{width:100%}
.mt-14{margin-top:14px}

/* Focus polish */
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand-blue-2) 42%, transparent);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Top strip */
.top-strip{
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.top-strip__inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;
}
.top-strip__left{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--grad-primary);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--pink) 22%, transparent);
}
.top-strip__right{display:flex;align-items:center;gap:10px;font-size:13px}
.pill{
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.68);
  font-weight:900;
}
.pill,
.badge,
.page-hero__badge{
  background: color-mix(in srgb, var(--brand-cream) 92%, #fff);
  border:1px solid var(--line);
}
/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.62);
  backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{height:44px;width:auto;display:block}
.brand__mark{
  width:42px;height:42px;border-radius:16px;
  background: var(--grad-primary);
  box-shadow: var(--glowPink);
}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__text strong{font-size:16px}
.brand__text small{font-size:12px;color:var(--muted);margin-top:3px}

.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav a{
  padding:10px 12px;border-radius:999px;
  color:var(--muted);font-weight:900;font-size:14px;
  transition: .18s ease;
}
.nav a:hover{
  background: color-mix(in srgb, var(--brand-rose) 32%, #fff);
  color: var(--brand-blue);
  transform: translateY(-1px);
}
.header__actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:950;
  font-size:14px;
  transition:.18s ease;
  white-space:nowrap;
  background: var(--grad-primary);
  color:#fff;
  box-shadow: var(--glowSky);
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--glow{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-blush) 88%, #fff),
    color-mix(in srgb, var(--brand-lilac) 65%, #fff)
  );
  color: var(--brand-blue);
  box-shadow: var(--glowPink);
}

.btn--soft{
  background:rgba(255,255,255,.86);
  color:var(--brand-blue);
  border:1px solid var(--line);
  box-shadow:none;
}

/* Burger */
.burger{display:none;background:transparent;border:0;padding:8px;border-radius:12px}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}

/* Hero */
.hero{position:relative;padding:40px 0 20px}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(720px 380px at 15% 28%, color-mix(in srgb, var(--pink) 44%, transparent), transparent 66%),
    radial-gradient(720px 380px at 82% 24%, color-mix(in srgb, var(--sky) 44%, transparent), transparent 66%),
    radial-gradient(900px 520px at 55% 110%, color-mix(in srgb, var(--yellow) 22%, transparent), transparent 58%),
    var(--grad-hero);
  border-bottom:1px solid var(--line);
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:stretch;
  padding:26px 0;
}
.hero__content{
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:var(--r24);
  padding:22px;
  box-shadow: var(--shadow);
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  font-weight:950;font-size:13px;
}
.hero__title{margin:14px 0 10px;font-size:40px;line-height:1.1;letter-spacing:-.4px}
.hero__sub{margin:0;color:var(--muted);font-size:16px;max-width:60ch}
.hero__actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.hero__stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.stat{
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  min-width:160px;
  box-shadow: 0 10px 30px rgba(21,20,40,.06);
}
.stat__num{font-weight:1000;font-size:22px}
.stat__label{color:var(--muted);font-size:13px;margin-top:2px;font-weight:850}

.hero__card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--r24);
  box-shadow: var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hero__cardTitle{font-weight:1000}
.quick{
  display:flex;gap:12px;align-items:center;
  padding:12px;border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  transition:.18s ease;
}
.quick:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.quick__icon{
  width:40px;height:40px;border-radius:16px;display:grid;place-items:center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sky) 22%, #fff),
    color-mix(in srgb, var(--pink) 20%, #fff)
  );
  box-shadow: 0 12px 28px rgba(21,20,40,.08);
}
.quick strong{display:block;font-weight:1000}
.quick small{display:block;color:var(--muted);margin-top:3px}
.hero__cardFoot{margin-top:auto}

/* Sections */
.section{padding:50px 0}
.section--tint{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.38));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__head h2{margin:0;font-size:28px}
.section__head p{margin:10px 0 0}

/* Grids & Cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--r24);
  padding:18px;
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  transition: .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(21,20,40,.10);
}
.card__icon{
  width:48px;height:48px;border-radius:18px;
  display:grid;place-items:center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pink) 22%, #fff),
    color-mix(in srgb, var(--sky) 22%, #fff)
  );
  box-shadow: 0 16px 42px rgba(21,20,40,.09);
  font-size:20px;
  margin-bottom:10px;
}
.card h3{margin:8px 0 6px}
.card p{margin:0}

.post{
  overflow:hidden;
  border-radius:var(--r24);
  border:1px solid var(--line);
  background:#fff;
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  transition: .18s ease;
}
.post:hover{transform: translateY(-2px); box-shadow: 0 18px 60px rgba(21,20,40,.10)}
.post__img{
  height:150px;
  background:
    radial-gradient(320px 200px at 30% 30%, color-mix(in srgb, var(--pink) 28%, transparent), transparent 62%),
    radial-gradient(260px 180px at 70% 40%, color-mix(in srgb, var(--sky) 28%, transparent), transparent 62%),
    radial-gradient(320px 200px at 50% 120%, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.40));
}
.post__body{padding:16px}
.post__meta{font-size:12px;color:var(--muted);font-weight:900}
.post__title{margin:8px 0 8px;font-size:16px;line-height:1.3;font-weight:1000}

/* CTA */
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-radius:28px;
  padding:22px;
  background: var(--grad-soft);
  border:1px solid var(--line);
  box-shadow: 0 18px 70px rgba(21,20,40,.08);
}
.cta h2{margin:0;font-weight:1000}
.cta p{margin:8px 0 0}
.cta__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Page hero */
.page-hero{
  padding:28px 0 22px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.30));
}
.page-hero__inner{
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:var(--r24);
  padding:18px 18px;
  box-shadow: var(--shadow);
}
.page-hero__badge{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  font-weight:1000;
  font-size:12px;
}
.page-hero__title{margin:12px 0 4px;font-size:30px;font-weight:1000}
.page-hero__sub{margin:0;color:var(--muted)}

/* Content card + rich text */
.content-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--r24);
  padding:18px;
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
}
.rich p{margin:0 0 10px;line-height:1.9}

/* List */
.list{display:flex;flex-direction:column;gap:12px}
.list__item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;
  border-radius:var(--r20);
  background:#fff;
  border:1px solid var(--line);
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  transition:.18s ease;
}
.list__item:hover{transform: translateY(-2px); box-shadow: 0 18px 60px rgba(21,20,40,.10)}
.list__date{
  font-weight:1000;
  color: color-mix(in srgb, var(--brand-blue) 72%, var(--brand-teal));
  min-width:120px;
}
.list__body{flex:1}

/* Library */
.filters{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--r20);
  padding:12px;
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
}
.input{position:relative;flex:1;min-width:240px}
.input__icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:900}
.input input{
  width:100%;
  padding:12px 12px;
  padding-inline-start:34px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font-weight:750;
  transition:.18s ease;
}
.input input:focus{
  border-color: color-mix(in srgb, var(--sky) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky) 20%, transparent);
}
.books{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.book{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r24);
  overflow:hidden;
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  display:flex;
  flex-direction:column;
  transition:.18s ease;
}
.book:hover{transform: translateY(-2px); box-shadow: 0 18px 60px rgba(21,20,40,.10)}
.book__cover{
  height:130px;
  background:
    radial-gradient(280px 180px at 25% 35%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 62%),
    radial-gradient(260px 180px at 70% 40%, color-mix(in srgb, var(--sky) 24%, transparent), transparent 62%),
    radial-gradient(260px 160px at 55% 120%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.35));
  position:relative;
}
.book__badge{
  position:absolute;
  top:12px;inset-inline-end:12px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  font-size:12px;font-weight:1000;color:var(--muted);
}
.book__body{padding:14px;display:flex;flex-direction:column;gap:10px}
.book__title{margin:0;font-size:15px;line-height:1.35;font-weight:1000}
.book__meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:850}
.book__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* Book details */
.book-view{
  display:grid;grid-template-columns: .45fr .55fr;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r24);
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  overflow:hidden;
}
.book-view__cover{
  min-height:280px;
  background:
    radial-gradient(420px 260px at 30% 35%, color-mix(in srgb, var(--pink) 26%, transparent), transparent 62%),
    radial-gradient(420px 260px at 70% 40%, color-mix(in srgb, var(--sky) 26%, transparent), transparent 62%),
    radial-gradient(420px 240px at 55% 120%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.35));
}
.book-view__body{padding:18px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery__item{
  height:180px;border-radius:var(--r24);
  border:1px solid var(--line);
  background:
    radial-gradient(320px 200px at 30% 30%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 62%),
    radial-gradient(260px 180px at 70% 40%, color-mix(in srgb, var(--sky) 24%, transparent), transparent 62%),
    radial-gradient(260px 180px at 55% 120%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.30));
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  transition:.18s ease;
}
.gallery__item:hover{transform: translateY(-2px); box-shadow: 0 18px 60px rgba(21,20,40,.10)}

/* Auth */
.auth{display:grid;place-items:center}
.auth__card{
  width:min(460px,100%);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r24);
  box-shadow: var(--shadow);
  padding:18px;
}
.auth__card h3{margin:0 0 12px;font-weight:1000}
.form label, .auth__card label{display:block;margin:10px 0 6px;font-weight:900}
.field{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  outline:none;
  background:#fff;
  font-weight:750;
  transition:.18s ease;
}
.field:focus{
  border-color: color-mix(in srgb, var(--pink) 50%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent);
}

/* Footer */
.footer{padding:42px 0;margin-top:10px}
.footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.footer__brand{display:flex;gap:12px;align-items:flex-start}
.footer__logo{height:36px;width:auto}
.footer__title{font-weight:1000;margin-bottom:10px}
.footer__link{display:block;color:var(--muted);padding:6px 0;font-weight:850}
.footer__link:hover{color:var(--text)}
.footer__bottom{padding-top:16px}

/* Mini blocks */
.mini{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r24);
  padding:14px;
  box-shadow: 0 12px 38px rgba(21,20,40,.07);
  transition:.18s ease;
}
.mini:hover{transform: translateY(-2px); box-shadow: 0 18px 60px rgba(21,20,40,.10)}
.mini__dot{
  width:14px;height:14px;border-radius:999px;margin-top:4px;
  background: var(--grad-primary);
}

/* Flash */
.flash{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  font-weight:900;
}
.flash--error{
  background: color-mix(in srgb, var(--brand-blush) 26%, transparent);
  border-color: color-mix(in srgb, var(--redSoft) 45%, var(--line));
}

.flash--success{
  background: color-mix(in srgb, var(--aqua) 18%, transparent);
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
}

/* Scroll Reveal (motion on scroll) */
.reveal{
  opacity:0;
  transform: translateY(16px) scale(.985);
  filter: blur(2px);
  transition:
    opacity .70s ease,
    transform .70s cubic-bezier(.2,.8,.2,1),
    filter .70s ease;
  will-change: opacity, transform, filter;
}
.reveal[data-reveal="left"]{transform: translateX(-18px) scale(.985)}
.reveal[data-reveal="right"]{transform: translateX(18px) scale(.985)}
.reveal[data-reveal="zoom"]{transform: scale(.965)}
.reveal.is-in{
  opacity:1;
  transform: none;
  filter: blur(0);
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none; opacity:1; transform:none; filter:none}
  .btn,.nav a,.card,.post,.list__item,.book,.gallery__item,.mini,.quick{transition:none}
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:inline-block}
  .header__actions{display:none}
  .nav.is-open{
    display:flex;
    position:absolute;
    inset-inline:18px;
    top:100%;
    margin-top:10px;
    padding:12px;
    flex-direction:column;
    background:rgba(255,255,255,.95);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
  }
  .grid-3, .books, .gallery{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .book-view{grid-template-columns:1fr}
  .list__date{min-width:auto}
}
.tags-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.tag-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(21,20,40,.08);
}
.footer__title--social{
  margin-top:18px;
}

.footer__socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.footer__social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  transition:.18s ease;
  box-shadow:0 8px 24px rgba(21,20,40,.06);
}

.footer__social:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--blue2) 35%, var(--line));
  box-shadow:0 14px 34px rgba(21,20,40,.10);
}