/* ═══════════════════════════════════════════════════════════
   DESI GAJAK — GLOBAL DESIGN SYSTEM v4
   Concept: "Sardi ki raat, garam gur"
   Raat (gift-box indigo) · Gur (molten jaggery) · Sona (foil) · Til (sesame ivory)
   ═══════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (no Google dependency) ── */
@font-face { font-family:'Rozha One'; src:url('../lib/fonts/rozha-one-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../lib/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../lib/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../lib/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../lib/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nastaliq'; src:url('../lib/fonts/noto-nastaliq-urdu-arabic-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  /* Core palette */
  --raat:   #131D4D;   /* winter-night indigo, from the gift box */
  --raat-2: #1B2866;
  --raat-3: #24347F;
  --neel:   #23409E;   /* brand blue for buttons on light surfaces */
  --gur:    #D9822B;   /* molten jaggery */
  --gur-d:  #B4651A;
  --sona:   #E2B866;   /* gold foil */
  --til:    #F8EEDB;   /* sesame ivory */
  --til-2:  #FFF9EE;
  --ink:    #1C1611;
  --ink-2:  #51463B;
  --ink-3:  #7A6D5F;
  --line:   rgba(28,22,17,.12);
  --line-d: rgba(248,238,219,.14);

  /* Legacy aliases — page CSS files still reference these */
  --p: var(--neel);
  --p-dark: var(--raat);
  --p-light: var(--raat-3);
  --s: var(--sona);
  --gold: var(--sona);
  --bg: var(--til-2);
  --bg-light: var(--til);
  --bg-cream: var(--til-2);
  --text: var(--ink);
  --text-s: var(--ink-2);
  --text-l: var(--ink-3);
  --border: var(--line);
  --success: #3E8E4E;
  --wa: #25D366;
  --star: var(--gur);

  --fh: 'Rozha One', 'Times New Roman', serif;
  --fb: 'Hanken Grotesk', system-ui, sans-serif;
  --fs: 'Hanken Grotesk', system-ui, sans-serif;
  --fu: 'Nastaliq', 'Noto Nastaliq Urdu', serif;

  --ct: 1280px;
  --sp: clamp(64px, 9vw, 128px);
  --r: 18px;
  --r-sm: 10px;
  --r-pill: 9999px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
body { font-family:var(--fb); font-size:17px; line-height:1.6; color:var(--ink); background:var(--til-2); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition:color .3s var(--ease); }
ul, ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input, textarea, select { font-family:inherit; font-size:inherit; }
::selection { background:var(--gur); color:var(--ink); }
:focus-visible { outline:2px solid var(--gur); outline-offset:3px; border-radius:4px; }

.container { width:100%; max-width:var(--ct); margin:0 auto; padding:0 clamp(16px, 4vw, 32px); }
.section { padding:var(--sp) 0; }
.ur { font-family:var(--fu); font-weight:700; direction:rtl; line-height:2; }

/* Typography */
h1,h2,h3 { font-family:var(--fh); font-weight:400; line-height:1.05; letter-spacing:-.01em; }
h4,h5,h6 { font-family:var(--fb); font-weight:700; line-height:1.25; }

/* Section heading (used on every page) */
.sh { text-align:center; margin-bottom:clamp(36px, 5vw, 64px); }
.sh-script { font-family:var(--fb); font-weight:600; color:var(--gur-d); font-size:16px; display:block; margin-bottom:10px; }
.sh-title { font-family:var(--fh); font-size:clamp(34px, 4.6vw, 60px); color:var(--ink); text-transform:none; letter-spacing:-.01em; }
.sh-div { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; }
.sh-div::before, .sh-div::after { content:''; width:36px; height:1px; background:var(--sona); }
.sh-div .dot { width:7px; height:11px; background:var(--sona); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; } /* a sesame seed */

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:var(--r-pill); font-family:var(--fb); font-weight:700; font-size:15px; letter-spacing:.01em; text-transform:none; cursor:pointer; transition:transform .4s var(--ease), background .3s, color .3s, box-shadow .4s var(--ease), border-color .3s; border:1.5px solid transparent; will-change:transform; }
.btn i { font-size:1.05em; }
.btn-p { background:var(--neel); color:#fff; border-color:var(--neel); }
.btn-p:hover { background:var(--raat); border-color:var(--raat); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(19,29,77,.6); }
.btn-gur { background:var(--gur); color:var(--ink); border-color:var(--gur); }
.btn-gur:hover { background:var(--sona); border-color:var(--sona); transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(217,130,43,.8); }
.btn-o { background:transparent; color:var(--neel); border-color:currentColor; }
.btn-o:hover { background:var(--neel); color:#fff; border-color:var(--neel); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--til); border-color:rgba(248,238,219,.4); }
.btn-ghost:hover { border-color:var(--til); background:rgba(248,238,219,.08); }
.btn-w { background:var(--til-2); color:var(--raat); border-color:var(--til-2); }
.btn-w:hover { background:transparent; color:var(--til-2); }
.btn-g { background:var(--sona); color:var(--ink); border-color:var(--sona); }
.btn-sm { padding:10px 20px; font-size:14px; }
.btn-lg { padding:17px 34px; font-size:16px; }

/* Forms */
.fi { width:100%; padding:15px 18px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:16px; color:var(--ink); background:#fff; transition:.2s; }
.fi:focus { border-color:var(--neel); outline:none; box-shadow:0 0 0 3px rgba(35,64,158,.15); }
.fg { margin-bottom:16px; }
.fl { display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── TOP BAR: season strip ── */
.tb { background:var(--raat); color:var(--til); padding:9px 0; font-size:13px; border-bottom:1px solid var(--line-d); position:relative; z-index:1001; }
.tb-c { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.tb-i { display:flex; align-items:center; gap:8px; white-space:nowrap; opacity:.85; }
.tb-i i { font-size:12px; color:var(--sona); }
.tb-d { width:4px; height:6px; border-radius:50%; background:var(--sona); opacity:.6; }
.tb-season { color:var(--sona); opacity:1; font-weight:600; }

/* ── HEADER ── */
.hd { background:rgba(255,249,238,.92); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); position:sticky; top:0; z-index:1000; border-bottom:1px solid transparent; transition:border-color .4s, box-shadow .4s; }
.hd.scrolled { border-bottom-color:var(--line); box-shadow:0 10px 30px -20px rgba(19,29,77,.35); }
.hd-c { display:flex; align-items:center; justify-content:space-between; height:78px; transition:height .4s var(--ease); }
.hd.scrolled .hd-c { height:66px; }
.logo { display:flex; align-items:center; gap:10px; }
.logo > i { display:none; }
.logo::before { content:'گجک'; font-family:var(--fu); font-weight:700; font-size:15px; line-height:1; color:var(--raat); background:var(--sona); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; padding-top:2px; overflow:hidden; flex-shrink:0; }
.logo-t { display:flex; flex-direction:column; line-height:1; }
.logo-d { font-family:var(--fb); font-weight:600; font-size:12px; color:var(--gur-d); letter-spacing:.04em; }
.logo-g { font-family:var(--fh); font-size:26px; color:var(--raat); letter-spacing:.01em; margin-top:2px; }
.logo-tag { display:none; }

.nav { display:flex; align-items:center; }
.nl { display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.nl a { font-weight:600; font-size:15px; color:var(--ink-2); position:relative; padding:6px 0; }
.nl a::after { content:''; position:absolute; bottom:-2px; left:50%; width:6px; height:9px; background:var(--gur); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; transform:translate(-50%, 6px) scale(0); transition:transform .4s var(--ease); }
.nl a:hover, .nl a.active { color:var(--raat); }
.nl a:hover::after, .nl a.active::after { transform:translate(-50%, 6px) scale(1); }
.nl a .arrow { display:none; }

.hd-a { display:flex; align-items:center; gap:12px; }
.hd-wa { width:44px; height:44px; border-radius:50%; background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; font-size:21px; transition:transform .4s var(--ease); }
.hd-wa:hover { transform:scale(1.08) rotate(-6deg); }
.mmt { display:none; width:44px; height:44px; align-items:center; justify-content:center; font-size:20px; color:var(--raat); }

/* ── MOBILE MENU ── */
.mm { display:flex; visibility:hidden; position:fixed; inset:0; background:var(--raat); color:var(--til); z-index:9999; padding:24px; flex-direction:column; overflow-y:auto; clip-path:circle(0% at calc(100% - 40px) 40px); transition:clip-path .7s var(--ease), visibility 0s .7s; }
.mm.open { visibility:visible; clip-path:circle(150% at calc(100% - 40px) 40px); transition:clip-path .7s var(--ease), visibility 0s; }
.mm .logo-g { color:var(--til); }
.mm-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid var(--line-d); }
.mm-c { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--til); }
.mm-l { display:flex; flex-direction:column; flex:1; }
.mm-l a { font-family:var(--fh); font-size:34px; padding:10px 0; border-bottom:1px solid var(--line-d); display:flex; justify-content:space-between; align-items:center; }
.mm-l a i { font-size:16px; color:var(--sona); }
.mm-l a.active { color:var(--sona); }
.mm-f { margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:12px; }
.mm-f .btn-o { color:var(--til); }

/* ── TRUST BAR ── */
.tbar { background:var(--til); padding:44px 0; border-top:1px solid var(--line); }
.tbar-g { display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; }
.tbar-i { display:flex; align-items:center; gap:14px; }
.tbar-icon { width:46px; height:46px; border-radius:50%; background:var(--raat); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--sona); flex-shrink:0; }
.tbar-t { font-size:15px; font-weight:700; }
.tbar-s { font-size:13px; color:var(--ink-3); }

/* ── FOOTER ── */
.ft { background:var(--raat); color:rgba(248,238,219,.72); position:relative; overflow:hidden; }
.ft::before { content:'گجک'; font-family:var(--fu); font-weight:700; position:absolute; right:-2vw; bottom:-6vw; font-size:clamp(180px, 28vw, 420px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(226,184,102,.16); pointer-events:none; }
.ft-m { padding:80px 0 40px; position:relative; }
.ft-g { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1.5fr; gap:40px; }
.ft .logo-g { color:var(--til); }
.ft-d { font-size:15px; margin:18px 0; line-height:1.7; max-width:280px; }
.ft-soc { display:flex; gap:10px; margin-top:20px; }
.ft-soc a { width:40px; height:40px; border-radius:50%; border:1px solid var(--line-d); display:flex; align-items:center; justify-content:center; color:var(--til); font-size:15px; transition:.3s; }
.ft-soc a:hover { background:var(--gur); border-color:var(--gur); color:var(--ink); }
.ft-ct { font-family:var(--fb); font-weight:700; font-size:15px; color:var(--sona); margin-bottom:18px; }
.ft-links { display:flex; flex-direction:column; gap:10px; }
.ft-links a { font-size:15px; color:rgba(248,238,219,.7); }
.ft-links a:hover { color:var(--til); }
.ft-ci { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:15px; }
.ft-ci i { color:var(--sona); margin-top:4px; font-size:14px; width:16px; text-align:center; }
.ft-b { border-top:1px solid var(--line-d); padding:22px 0; text-align:center; position:relative; }
.ft-copy { font-size:13px; color:rgba(248,238,219,.5); }

/* ── FLOATING ── */
.wa-f { position:fixed; bottom:24px; right:24px; width:58px; height:58px; background:var(--wa); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; box-shadow:0 10px 24px -8px rgba(37,211,102,.7); z-index:999; transition:transform .4s var(--ease); }
.wa-f:hover { transform:scale(1.08) rotate(-8deg); }
.st { position:fixed; bottom:94px; right:28px; width:48px; height:48px; border-radius:50%; background:var(--raat); color:var(--sona); display:flex; align-items:center; justify-content:center; font-size:14px; z-index:998; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .4s var(--ease); }
.st.show { opacity:1; visibility:visible; transform:translateY(0); }

/* ── Misc shared components ── */
.badge { display:inline-block; padding:5px 14px; font-size:12px; font-weight:700; border-radius:var(--r-pill); }
.badge-s { background:var(--success); color:#fff; }
.badge-d { background:var(--gur); color:var(--ink); }
.stars { color:var(--gur); font-size:14px; letter-spacing:2px; }
.bc { padding:16px 0; font-size:14px; color:var(--ink-3); background:var(--til); }
.bc a { color:var(--neel); font-weight:600; }
.bc-s { margin:0 8px; color:var(--ink-3); }
.card { background:#fff; border-radius:var(--r); border:1px solid var(--line); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(19,29,77,.5); }

.ti { text-align:center; padding:24px; }
.ti-icon { width:60px; height:60px; border-radius:50%; background:var(--raat); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:22px; color:var(--sona); }
.ti-t { font-weight:700; font-size:17px; margin-bottom:6px; }
.ti-s { font-size:15px; color:var(--ink-3); line-height:1.55; }

.tcard { background:#fff; border-radius:var(--r); padding:32px; border:1px solid var(--line); position:relative; }
.tcard-q { font-family:var(--fh); font-size:64px; color:var(--gur); line-height:.6; margin-bottom:12px; }
.tcard-text { color:var(--ink-2); margin-bottom:22px; line-height:1.7; }
.tcard-a { display:flex; align-items:center; gap:12px; }
.tcard-av { width:46px; height:46px; border-radius:50%; background:var(--til); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--raat); }
.tcard-n { font-weight:700; font-size:15px; }
.tcard-l { font-size:13px; color:var(--ink-3); }

/* ── Sesame snow canvas (any [data-sesame] host) ── */
.sesame-cv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* ── Page curtain transition ── */
.curtain { position:fixed; inset:0; z-index:100000; background:var(--raat); display:grid; place-items:center; pointer-events:none; transform:translateY(0); }
.curtain span { font-family:var(--fu); font-weight:700; font-size:clamp(64px, 12vw, 140px); color:var(--sona); line-height:1; padding-bottom:.3em; }
.curtain.gone { transform:translateY(-101%); transition:transform .9s var(--ease) .1s; }
.curtain.gone span { opacity:0; transition:opacity .3s; }
.curtain.enter { transform:translateY(101%); transition:none; }
.curtain.enter.go { transform:translateY(0); transition:transform .6s var(--ease); }
.no-js .curtain { display:none; }

/* Reveal helper (JS adds .rv-in) */
[data-reveal] { opacity:0; transform:translateY(28px); }
[data-reveal].rv-in { opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }
.no-js [data-reveal] { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width:1199px) {
  .tbar-g { grid-template-columns:repeat(3, 1fr); }
  .ft-g { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:991px) {
  .nav, .hd-a .btn { display:none; }
  .mmt { display:flex; }
  .tbar-g { grid-template-columns:repeat(2, 1fr); }
  .ft-g { grid-template-columns:repeat(2, 1fr); }
  .tb-i:not(.tb-season), .tb-d { display:none; }
}
@media (max-width:767px) {
  .fr { grid-template-columns:1fr; }
  .tbar-g { grid-template-columns:1fr 1fr; gap:20px; }
  .tbar-i { flex-direction:column; text-align:center; gap:8px; }
  .ft-g { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:575px) {
  body { font-size:16px; }
  .hd-c { height:68px; }
  .logo::before { width:40px; height:40px; font-size:13px; }
  .logo-g { font-size:22px; }
  .wa-f { width:52px; height:52px; font-size:25px; bottom:16px; right:16px; }
  .st { width:42px; height:42px; bottom:80px; right:21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal] { opacity:1; transform:none; }
  .curtain { display:none; }
}