/* ══════════════════════════════════════════════════════════════════════════
   VENDOLINE THEME — "TULKA"  ·  Bio-luminous pharma
   ──────────────────────────────────────────────────────────────────────────
   A deep clinical-night canvas lit by a lime bioluminescence. Every visual
   outside the catalog is DRAWN — molecular lattices, orbit rings, a live
   capsule, molecule diagrams, a concentration gradient. No photography is
   used anywhere except the product cards and the product page.
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=Archivo:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;600;700&display=swap');

:root{
  --primary-light:#103247;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --shadow-lg:0 40px 100px rgba(0,0,0,.6);
  --tk-display:'Bricolage Grotesque','Tajawal',system-ui,sans-serif;
  --tk-body:'Archivo','Cairo',system-ui,sans-serif;
  --tk-gut:26px;
  --tk-lime:#B4DE45;
  --tk-aqua:#3DA5DC;
  --tk-ease:cubic-bezier(.2,.75,.25,1);
}

body.theme-tulka{
  --tk-ink:var(--bg,#061620);
  --tk-ink-2:var(--bg-gray,#08202C);
  --tk-glass:var(--surface,#0C2939);
  --tk-glass-2:var(--surface-2,#103247);
  --tk-line:var(--border,#153A4E);
  --tk-line-2:var(--border-dark,#1E5069);
  --tk-head:var(--heading,#F2F8FA);
  --tk-glow:rgba(180,222,69,.18);
  --tk-on-lime:#08202C;
  font-family:var(--tk-body);
  color:var(--text);
  background:var(--tk-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.theme-tulka[dir="rtl"]{font-family:'Cairo','Archivo',sans-serif;}

/* ── type ──────────────────────────────────────────────────────────────── */
.tk-h1,.tk-h2,.tk-h3,.tk-display{
  font-family:var(--tk-display);font-weight:700;letter-spacing:-.035em;
  line-height:.95;color:var(--tk-head);
  font-variation-settings:'opsz' 72;
}
body[dir="rtl"] .tk-h1,body[dir="rtl"] .tk-h2,body[dir="rtl"] .tk-h3{
  font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.22;
}
.tk-h1{font-size:clamp(44px,7.4vw,104px);}
.tk-h2{font-size:clamp(30px,4.4vw,60px);}
.tk-h3{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;}
.tk-eyebrow{
  font-family:var(--tk-body);font-size:10.5px;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--tk-lime);
  display:inline-flex;align-items:center;gap:9px;
}
.tk-eyebrow::before{content:"";width:22px;height:1px;background:var(--tk-lime);opacity:.7;}
body[dir="rtl"] .tk-eyebrow{letter-spacing:.08em;}
.tk-lead{color:var(--text-muted);font-size:clamp(14.5px,1.25vw,17px);line-height:1.75;max-width:56ch;}
.section-inner{max-width:1280px;margin:0 auto;padding-inline:var(--tk-gut);}
.tk-sec{padding-block:clamp(64px,8vw,124px);position:relative;}

/* gradient text used once, on the hero verb */
.tk-glimmer{
  background:linear-gradient(96deg,var(--tk-lime) 8%,#E8FFB0 42%,var(--tk-aqua) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.tk-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--tk-body);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--tk-lime);color:var(--tk-on-lime);
  padding:16px 30px;border:1px solid var(--tk-lime);border-radius:2px;
  transition:box-shadow .4s var(--tk-ease),transform .4s var(--tk-ease),background .3s;
  box-shadow:0 0 0 0 var(--tk-glow);overflow:hidden;
}
.tk-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--tk-ease);
}
.tk-btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px var(--tk-glow),0 0 0 4px rgba(180,222,69,.12);}
.tk-btn:hover::after{transform:translateX(120%);}
.tk-btn-ghost{
  background:transparent;color:var(--tk-head);border-color:var(--tk-line-2);
}
.tk-btn-ghost:hover{border-color:var(--tk-lime);color:var(--tk-lime);box-shadow:none;}
.tk-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
  border:1px solid var(--tk-line);border-radius:999px;padding:7px 15px;
  background:rgba(255,255,255,.03);
}
.tk-chip i{font-style:normal;color:var(--tk-lime);}

/* ── atmosphere: lattice + aurora, painted behind dark sections ─────────── */
/* PERF: these used to be filter:blur(90px) layers, which forced a full-size
   backdrop re-blur on every scroll frame. Multi-stop radial gradients give the
   same softness for free, and only the hero pair moves. */
.tk-atmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:layout paint size;}
.tk-atmos svg{position:absolute;inset:0;width:100%;height:100%;}
.tk-aurora{
  position:absolute;width:72vw;height:72vw;max-width:1000px;max-height:1000px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(180,222,69,.20) 0%,rgba(180,222,69,.13) 22%,rgba(61,165,220,.09) 46%,
    rgba(61,165,220,.04) 64%,transparent 78%);
  transform:translateZ(0);
}
.tk-aurora.b{
  background:radial-gradient(circle at 50% 50%,
    rgba(61,165,220,.17) 0%,rgba(61,165,220,.09) 38%,rgba(61,165,220,.03) 60%,transparent 76%);
}
/* only the hero drifts, and only on hardware that can afford it */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  .tk-hero .tk-aurora{will-change:transform;animation:tkDrift 30s var(--tk-ease) infinite alternate;}
  .tk-hero .tk-aurora.b{animation-duration:40s;animation-direction:alternate-reverse;}
}
@keyframes tkDrift{
  0%{transform:translate3d(-8%,-6%,0);}
  100%{transform:translate3d(7%,5%,0);}
}
.tk-scan{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 5px);
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
}

/* ── header ────────────────────────────────────────────────────────────── */
body.theme-tulka .announcement-bar{
  background:var(--tk-lime)!important;color:var(--tk-on-lime)!important;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
body.theme-tulka .store-header{
  background:rgba(4,18,26,.72)!important;
  border-bottom:1px solid var(--tk-line)!important;backdrop-filter:blur(16px);
}
body.theme-tulka .store-header.scrolled{
  background:rgba(4,18,26,.94)!important;box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.header-inner{height:82px;max-width:1340px;}
.header-logo .logo-text{font-family:var(--tk-display);font-weight:800;letter-spacing:-.03em;color:var(--tk-head);}
body.theme-tulka .header-nav a{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text);
}
body.theme-tulka .header-nav a::after{background:var(--tk-lime)!important;height:2px;box-shadow:0 0 12px var(--tk-lime);}
body.theme-tulka .header-nav a:hover,body.theme-tulka .header-nav a.active{color:var(--tk-lime);}
.header-action-btn{color:var(--text);}
.header-action-btn:hover{color:var(--tk-lime);}
.header-action-btn .badge-count{background:var(--tk-lime);color:var(--tk-on-lime);font-weight:700;}
body.theme-tulka .header-search{
  border:1px solid var(--tk-line-2)!important;background:rgba(255,255,255,.03)!important;border-radius:999px;overflow:hidden;
}
body.theme-tulka .header-search input{color:var(--text)!important;}
body.theme-tulka .header-search button{background:var(--tk-lime)!important;color:var(--tk-on-lime)!important;}
body.theme-tulka .header-lang{
  border:1px solid var(--tk-line-2);color:var(--text);border-radius:999px;font-size:11px;letter-spacing:.12em;
}

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.tk-hero{position:relative;background:var(--tk-ink);border-bottom:1px solid var(--tk-line);isolation:isolate;}
.tk-hero .tk-aurora{top:-24%;inset-inline-start:-16%;}
.tk-hero .tk-aurora.b{top:26%;inset-inline-start:auto;inset-inline-end:-24%;}
.tk-hero-stage{position:relative;z-index:2;min-height:clamp(560px,86vh,880px);display:flex;align-items:center;}
.tk-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s;
  display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(24px,4vw,64px);
  max-width:1280px;margin:0 auto;padding-inline:var(--tk-gut);width:100%;
}
.tk-slide.is-active{opacity:1;visibility:visible;}
.tk-slide-copy{position:relative;padding-block:64px;max-width:660px;}
.tk-slide-copy .tk-eyebrow{margin-bottom:26px;}
.tk-slide-copy .tk-h1{margin-bottom:24px;}
.tk-slide-copy .tk-lead{margin-bottom:36px;}
.tk-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.tk-hero-stats{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--tk-line);padding-top:22px;}
.tk-stat{padding-inline-end:34px;margin-inline-end:34px;border-inline-end:1px solid var(--tk-line);}
.tk-stat:last-child{border:0;margin:0;padding:0;}
.tk-stat b{
  display:block;font-family:var(--tk-display);font-size:clamp(26px,2.8vw,38px);font-weight:800;
  color:var(--tk-head);letter-spacing:-.03em;line-height:1;
}
.tk-stat b em{font-style:normal;color:var(--tk-lime);}
.tk-stat span{display:block;margin-top:7px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-light);}

/* the drawn capsule — the hero's centrepiece */
.tk-hero-art{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:340px;}
.tk-orbit{position:absolute;width:min(88%,520px);aspect-ratio:1;border-radius:50%;border:1px solid var(--tk-line-2);opacity:.7;}
.tk-orbit.o2{width:min(66%,392px);border-style:dashed;animation:tkSpin 46s linear infinite;will-change:transform;}
.tk-orbit.o3{width:min(44%,262px);border-color:rgba(180,222,69,.32);animation:tkSpin 30s linear infinite reverse;}
.tk-orbit i{
  position:absolute;top:-4px;inset-inline-start:calc(50% - 4px);width:8px;height:8px;border-radius:50%;
  background:var(--tk-lime);box-shadow:0 0 16px 3px var(--tk-glow);
}
@keyframes tkSpin{to{transform:rotate(360deg);}}
.tk-capsule{position:relative;z-index:3;width:min(74%,300px);filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));}
.tk-capsule .tk-fluid{animation:tkFluid 6s ease-in-out infinite alternate;transform-origin:center;}
@keyframes tkFluid{0%{transform:translateY(3px);}100%{transform:translateY(-3px);}}
.tk-spark{animation:tkSpark 3.4s ease-in-out infinite;}
.tk-spark:nth-of-type(2){animation-delay:.7s;} .tk-spark:nth-of-type(3){animation-delay:1.5s;}
@keyframes tkSpark{0%,100%{opacity:.15;}50%{opacity:1;}}

.tk-dots{position:absolute;bottom:34px;inset-inline-start:var(--tk-gut);display:flex;gap:9px;z-index:6;}
.tk-dot{width:34px;height:2px;border:0;padding:0;background:var(--tk-line-2);cursor:pointer;transition:background .35s,box-shadow .35s;}
.tk-dot.is-active{background:var(--tk-lime);box-shadow:0 0 14px var(--tk-lime);}

/* ══ TICKER ═══════════════════════════════════════════════════════════════ */
.tk-ticker{
  background:var(--tk-ink-2);border-block:1px solid var(--tk-line);
  overflow:hidden;position:relative;padding-block:16px;
}
.tk-ticker::before,.tk-ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.tk-ticker::before{inset-inline-start:0;background:linear-gradient(90deg,var(--tk-ink-2),transparent);}
.tk-ticker::after{inset-inline-end:0;background:linear-gradient(270deg,var(--tk-ink-2),transparent);}
.tk-marquee{display:flex;gap:0;width:max-content;animation:tkMarquee 34s linear infinite;will-change:transform;}
body[dir="rtl"] .tk-marquee{animation-direction:reverse;}
.tk-ticker:hover .tk-marquee{animation-play-state:paused;}
@keyframes tkMarquee{to{transform:translateX(-50%);}}
.tk-tick{
  display:inline-flex;align-items:baseline;gap:10px;padding-inline:32px;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);
}
.tk-tick b{color:var(--tk-head);font-weight:700;}
.tk-tick::before{content:"◆";color:var(--tk-lime);font-size:8px;}

/* ══ SECTION HEADS ════════════════════════════════════════════════════════ */
.tk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(34px,4vw,58px);flex-wrap:wrap;position:relative;z-index:2;}
.tk-head-c{flex-direction:column;align-items:center;text-align:center;}
.tk-head .tk-eyebrow{margin-bottom:16px;}
.tk-viewall{
  display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tk-lime);
  border-bottom:1px solid rgba(180,222,69,.4);padding-bottom:6px;transition:gap .3s var(--tk-ease);
}
.tk-viewall:hover{gap:18px;}

/* ══ CATEGORIES — luminous spec index ═════════════════════════════════════ */
.tk-index{border-top:1px solid var(--tk-line);position:relative;z-index:2;}
.tk-irow{
  position:relative;display:grid;grid-template-columns:88px 1fr auto 34px;align-items:center;gap:24px;
  padding:clamp(22px,2.6vw,34px) 4px;border-bottom:1px solid var(--tk-line);overflow:hidden;
}
.tk-irow>*{transition:transform .45s var(--tk-ease);}
.tk-irow:hover>*{transform:translateX(14px);}
body[dir="rtl"] .tk-irow:hover>*{transform:translateX(-14px);}
.tk-irow::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:linear-gradient(90deg,rgba(180,222,69,.10),rgba(61,165,220,.05) 45%,transparent 78%);
}
.tk-irow:hover::before{opacity:1;}
.tk-inum{font-family:var(--tk-display);font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.05em;color:var(--tk-line-2);transition:color .4s;}
.tk-irow:hover .tk-inum{color:var(--tk-lime);}
.tk-iname{font-family:var(--tk-display);font-size:clamp(24px,3.2vw,44px);font-weight:700;letter-spacing:-.035em;color:var(--tk-head);line-height:1;}
body[dir="rtl"] .tk-iname{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.3;}
.tk-idesc{display:block;margin-top:10px;font-size:13.5px;color:var(--text-muted);max-width:52ch;line-height:1.7;}
.tk-icount{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-light);white-space:nowrap;}
.tk-iarrow{font-size:20px;color:var(--tk-line-2);transition:color .4s,transform .4s var(--tk-ease);justify-self:end;}
.tk-irow:hover .tk-iarrow{color:var(--tk-lime);}
body[dir="rtl"] .tk-irow:hover .tk-iarrow{transform:translateX(-7px) scaleX(-1);}
body[dir="rtl"] .tk-iarrow{transform:scaleX(-1);}

/* ══ PRODUCT GRID — lightbox plates ═══════════════════════════════════════ */
.tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:2;}
.tk-card{
  contain:layout paint;position:relative;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,var(--tk-glass),var(--tk-ink-2));
  border:1px solid var(--tk-line);
  transition:transform .5s var(--tk-ease),border-color .5s,box-shadow .5s;
}
.tk-card:hover{transform:translateY(-8px);border-color:rgba(180,222,69,.4);box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(180,222,69,.16);}
/* the pack sits on a lit plate so white cartons read on the dark canvas */
.tk-card-media{
  position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:radial-gradient(ellipse at 50% 42%,#FFFFFF 0%,#EDF3F5 52%,#D6E3E8 100%);
  overflow:hidden;
}
.tk-card-media::after{
  content:"";position:absolute;inset:auto 0 0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(6,22,32,.10));
}
.tk-card-media img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;padding:26px;transition:transform .7s var(--tk-ease);}
.tk-card:hover .tk-card-media img{transform:scale(1.07) translateY(-5px);}
.tk-card-ph{font-size:38px;color:#B8CBD2;}
.tk-card-tag{
  position:absolute;z-index:3;top:14px;inset-inline-start:14px;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--danger);color:#fff;padding:5px 10px;border-radius:2px;
}
.tk-card-tag.oos{background:#0B2028;}
.tk-card-wl{
  position:absolute;z-index:3;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(11,32,40,.14);background:rgba(255,255,255,.86);color:#4C6472;
  cursor:pointer;font-size:15px;line-height:1;transition:color .3s,border-color .3s,transform .3s;
}
.tk-card-wl:hover{transform:scale(1.1);} .tk-card-wl.on{color:var(--danger);border-color:var(--danger);}

/* the FACTS strip — signature, now luminous */
.tk-facts{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 18px;
  background:rgba(180,222,69,.07);border-block:1px solid rgba(180,222,69,.22);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
.tk-facts span{color:var(--text-light);}
.tk-facts b{color:var(--tk-lime);font-weight:700;letter-spacing:.1em;}
.tk-card-info{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1;}
.tk-card-name{font-family:var(--tk-display);font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--tk-head);line-height:1.1;}
body[dir="rtl"] .tk-card-name{font-family:'Tajawal',sans-serif;font-weight:800;font-size:18px;letter-spacing:0;}
.tk-card-name:hover{color:var(--tk-lime);}
.tk-card-sub{font-size:12.5px;color:var(--text-muted);line-height:1.6;flex:1;}
.tk-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:14px;border-top:1px solid var(--tk-line);}
.tk-card-price{font-family:var(--tk-display);font-weight:700;font-size:19px;color:var(--tk-head);letter-spacing:-.02em;}
.tk-card-price s{color:var(--text-light);font-weight:400;font-size:12.5px;margin-inline-start:8px;font-family:var(--tk-body);}
.tk-card-add{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--tk-line-2);color:var(--tk-head);padding:9px 16px;border-radius:2px;
  background:transparent;transition:background .35s,color .35s,border-color .35s,box-shadow .35s;
}
.tk-card-add:hover{background:var(--tk-lime);border-color:var(--tk-lime);color:var(--tk-on-lime);box-shadow:0 8px 24px var(--tk-glow);}

/* ══ PRINCIPLES — glass cards with drawn molecules ════════════════════════ */
.tk-why{position:relative;background:var(--tk-ink-2);border-block:1px solid var(--tk-line);overflow:hidden;}
.tk-why .tk-aurora{top:-40%;inset-inline-end:-20%;opacity:.3;}
.tk-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:2;}
.tk-principle{
  position:relative;padding:36px 30px 34px;border-radius:4px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid var(--tk-line);
  transition:border-color .4s,transform .4s var(--tk-ease);
}
.tk-principle:hover{border-color:rgba(180,222,69,.4);transform:translateY(-6px);}
.tk-principle::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--tk-lime),transparent);opacity:0;transition:opacity .5s;
}
.tk-principle:hover::before{opacity:.9;}
.tk-mol{width:78px;height:78px;margin-bottom:24px;display:block;overflow:visible;}
.tk-mol circle{transition:r .5s var(--tk-ease);}
.tk-principle:hover .tk-mol .n1{r:7;}
.tk-pnum{
  position:absolute;top:22px;inset-inline-end:24px;font-family:var(--tk-display);font-size:13px;
  font-weight:800;letter-spacing:.1em;color:var(--tk-line-2);
}
.tk-principle h4{font-family:var(--tk-display);font-weight:700;font-size:22px;letter-spacing:-.025em;color:var(--tk-head);margin-bottom:12px;line-height:1.15;}
body[dir="rtl"] .tk-principle h4{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.4;}
.tk-principle p{font-size:13.5px;color:var(--text-muted);line-height:1.8;}

/* ══ STORY — concentration-gradient panel, no photography ═════════════════ */
.tk-story{position:relative;background:var(--tk-ink);overflow:hidden;}
.tk-story .tk-aurora{bottom:-40%;inset-inline-start:-10%;opacity:.4;}
.tk-story-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;
  gap:clamp(30px,5vw,80px);padding-block:clamp(64px,8vw,124px);
}
.tk-gradient-panel{
  position:relative;aspect-ratio:4/5;border:1px solid var(--tk-line);border-radius:4px;overflow:hidden;
  background:var(--tk-ink-2);
}
.tk-gradient-panel svg{position:absolute;inset:0;width:100%;height:100%;}
.tk-gp-label{
  position:absolute;z-index:3;inset-inline-start:20px;bottom:18px;font-size:9.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-light);
}
.tk-story-card{border-inline-start:2px solid var(--tk-lime);padding-inline-start:clamp(22px,3vw,42px);}
.tk-story-title{font-family:var(--tk-display);font-weight:700;font-size:clamp(30px,4.2vw,58px);letter-spacing:-.035em;line-height:1;color:var(--tk-head);margin:18px 0 22px;}
body[dir="rtl"] .tk-story-title{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.25;}
.tk-story-text{color:var(--text-muted);font-size:15.5px;line-height:1.85;margin-bottom:32px;}

/* ══ NEWSLETTER — lit console ═════════════════════════════════════════════ */
.tk-news{position:relative;background:var(--tk-ink-2);border-top:1px solid var(--tk-line);overflow:hidden;}
.tk-news .tk-aurora{top:-60%;inset-inline-start:50%;transform:translateX(-50%);opacity:.35;}
.tk-console{
  position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center;padding:clamp(36px,5vw,62px) clamp(24px,4vw,56px);
  border:1px solid var(--tk-line-2);border-radius:6px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
}
.tk-console::before{
  content:"";position:absolute;top:-1px;inset-inline-start:12%;width:76%;height:2px;
  background:linear-gradient(90deg,transparent,var(--tk-lime),transparent);box-shadow:0 0 22px var(--tk-lime);
}
.tk-console p{color:var(--text-muted);font-size:15px;margin:14px auto 30px;max-width:52ch;line-height:1.75;}
.tk-news .newsletter-form{display:flex;gap:10px;max-width:520px;margin:0 auto;}
.tk-news .newsletter-form input{
  flex:1;min-width:0;border:1px solid var(--tk-line-2);background:rgba(6,22,32,.6);
  padding:16px 18px;font-family:var(--tk-body);font-size:14px;color:var(--text);border-radius:2px;
}
.tk-news .newsletter-form input::placeholder{color:var(--text-light);}
.tk-news .newsletter-form input:focus{outline:none;border-color:var(--tk-lime);box-shadow:0 0 0 3px rgba(180,222,69,.16);}
.tk-news .newsletter-form button{
  border:1px solid var(--tk-lime);background:var(--tk-lime);color:var(--tk-on-lime);
  font-family:var(--tk-body);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 30px;cursor:pointer;border-radius:2px;transition:box-shadow .35s,transform .35s;
}
.tk-news .newsletter-form button:hover{box-shadow:0 12px 34px var(--tk-glow);transform:translateY(-2px);}

/* ══ footer ═══════════════════════════════════════════════════════════════ */
body.theme-tulka .store-footer{border-top:1px solid var(--tk-line);}
body.theme-tulka .store-footer h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tk-lime);}

/* ══ reveals ══════════════════════════════════════════════════════════════ */
.tk-reveal{opacity:0;transform:translateY(16px);transition:opacity .45s var(--tk-ease),transform .45s var(--tk-ease);will-change:opacity,transform;}
.tk-reveal.is-in{opacity:1;transform:none;will-change:auto;}
.tk-d1{transition-delay:.04s;}.tk-d2{transition-delay:.09s;}.tk-d3{transition-delay:.14s;}.tk-d4{transition-delay:.19s;}
@media (max-width:960px){
  .tk-scan{display:none;}
  .tk-orbit.o2,.tk-orbit.o3{animation:none;}
}
@media (prefers-reduced-motion:reduce){
  .tk-reveal{opacity:1;transform:none;transition:none;}
  .tk-aurora,.tk-orbit,.tk-marquee,.tk-capsule .tk-fluid,.tk-spark{animation:none!important;}
  .tk-card,.tk-principle,.tk-irow,.tk-btn{transition:none!important;}
}

/* ══ daylight twin ════════════════════════════════════════════════════════ */
body.theme-tulka[data-scheme="light"]{--tk-on-lime:#0B2028;--tk-glow:rgba(61,165,220,.20);}
body.theme-tulka[data-scheme="light"] .tk-aurora{opacity:.34;}
body.theme-tulka[data-scheme="light"] .tk-eyebrow,
body.theme-tulka[data-scheme="light"] .tk-facts b,
body.theme-tulka[data-scheme="light"] .tk-viewall,
body.theme-tulka[data-scheme="light"] .tk-stat b em,
body.theme-tulka[data-scheme="light"] .store-footer h4{color:#3E7A0E;}
body.theme-tulka[data-scheme="light"] .tk-eyebrow::before{background:#3E7A0E;}
body.theme-tulka[data-scheme="light"] .tk-btn{background:#0B2028;border-color:#0B2028;color:#F4F8F9;}
body.theme-tulka[data-scheme="light"] .tk-btn-ghost{background:transparent;color:#0B2028;border-color:var(--tk-line-2);}
body.theme-tulka[data-scheme="light"] .tk-facts{background:rgba(62,122,14,.07);border-block-color:rgba(62,122,14,.22);}
body.theme-tulka[data-scheme="light"] .tk-card{background:#fff;}
body.theme-tulka[data-scheme="light"] .tk-card-add:hover{background:#0B2028;border-color:#0B2028;color:#fff;}
body.theme-tulka[data-scheme="light"] .tk-principle{background:#fff;}
body.theme-tulka[data-scheme="light"] .tk-console{background:#fff;}
body.theme-tulka[data-scheme="light"] .tk-story-card{border-inline-start-color:#3E7A0E;}
body.theme-tulka[data-scheme="light"] .store-header{background:rgba(255,255,255,.82)!important;}
body.theme-tulka[data-scheme="light"] .announcement-bar{background:#0B2028!important;color:#F4F8F9!important;}
body.theme-tulka[data-scheme="light"] .tk-news .newsletter-form input{background:#fff;}
body.theme-tulka[data-scheme="light"] .tk-news .newsletter-form button,
body.theme-tulka[data-scheme="light"] .header-search button{background:#0B2028!important;border-color:#0B2028;color:#fff!important;}
body.theme-tulka[data-scheme="light"] .header-action-btn .badge-count{background:#0B2028;color:#fff;}
body.theme-tulka[data-scheme="light"] .tk-dot.is-active{background:#3E7A0E;box-shadow:none;}

/* ══ responsive ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .tk-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:960px){
  .tk-slide{grid-template-columns:1fr;position:relative;text-align:center;}
  .tk-slide:not(.is-active){display:none;}
  .tk-hero-stage{min-height:0;display:block;}
  .tk-slide-copy{padding-block:56px 22px;margin-inline:auto;}
  .tk-slide-copy .tk-eyebrow,.tk-hero-actions,.tk-hero-stats{justify-content:center;}
  .tk-hero-stats{display:flex;justify-content:center;}
  .tk-stat{padding-inline:0 22px;margin-inline-end:22px;}
  .tk-hero-art{min-height:300px;padding-bottom:56px;}
  .tk-dots{position:relative;inset:auto;justify-content:center;padding-bottom:26px;}
  .tk-principles{grid-template-columns:1fr 1fr;}
  .tk-story-inner{grid-template-columns:1fr;}
  .tk-gradient-panel{aspect-ratio:16/9;}
}
@media (max-width:760px){
  .tk-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .tk-principles{grid-template-columns:1fr;}
  .tk-irow{grid-template-columns:56px 1fr 22px;gap:14px;}
  .tk-irow .tk-icount{display:none;}
  .tk-head{flex-direction:column;align-items:flex-start;}
  .tk-news .newsletter-form{flex-direction:column;}
  .tk-stat{border:0;}
}
@media (max-width:480px){
  .tk-grid{grid-template-columns:1fr;}
  .tk-card-media{aspect-ratio:4/3;}
  .tk-hero-stats{gap:18px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM PAGES (About, and anything else built in Admin → Pages)
   The custom-section markup is core and shared by every theme, so it arrives
   unstyled here. This block gives it the same editorial weight as the
   homepage — a real masthead, alternating bands, and a single centred column
   for story sections that carry no image (which is all of them for Tulka).
   ══════════════════════════════════════════════════════════════════════════ */
body.theme-tulka .custom-page{background:var(--tk-ink);}

/* masthead */
body.theme-tulka .custom-page-header{
  position:relative;overflow:hidden;text-align:start;
  background:var(--tk-ink-2)!important;color:var(--text)!important;
  border-bottom:1px solid var(--tk-line);
  padding:clamp(74px,10vw,150px) 0 clamp(46px,6vw,86px)!important;
}
body.theme-tulka .custom-page-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 12% 120%,rgba(180,222,69,.16),rgba(61,165,220,.06) 45%,transparent 72%);
}
body.theme-tulka .custom-page-header::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;width:44%;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--tk-line) 1px,transparent 1px);
  background-size:72px 100%;
  mask-image:linear-gradient(90deg,transparent,#000 70%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);
}
body.theme-tulka .custom-page-header .section-inner{position:relative;z-index:2;max-width:1280px;}
body.theme-tulka .custom-page-header .section-inner::before{
  content:"\25C6";display:block;color:var(--tk-lime);font-size:12px;margin-bottom:20px;letter-spacing:.3em;
}
body.theme-tulka .custom-page-header h1{
  font-family:var(--tk-display);font-weight:700;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(40px,6.4vw,88px)!important;color:var(--tk-head);max-width:16ch;
}
body[dir="rtl"] body.theme-tulka .custom-page-header h1,
body.theme-tulka[dir="rtl"] .custom-page-header h1{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.2;}

/* section rhythm — alternating bands, generous air */
body.theme-tulka .custom-page .cs-section{
  padding-block:clamp(58px,7.5vw,116px)!important;background:var(--tk-ink);position:relative;
}
body.theme-tulka .custom-page .cs-section:nth-of-type(even){background:var(--tk-ink-2);border-block:1px solid var(--tk-line);}
body.theme-tulka .custom-page .cs-inner{max-width:1180px;margin:0 auto;padding-inline:var(--tk-gut);}
body.theme-tulka .custom-page .cs-header{
  max-width:760px;margin:0 auto clamp(36px,4.4vw,62px);text-align:center;
}
body.theme-tulka .custom-page .cs-title{
  font-family:var(--tk-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(28px,4.2vw,56px)!important;color:var(--tk-head)!important;position:relative;padding-top:26px;
}
body.theme-tulka[dir="rtl"] .custom-page .cs-title{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.25;}
body.theme-tulka .custom-page .cs-title::before{
  content:"";position:absolute;top:0;inset-inline-start:50%;transform:translateX(-50%);
  width:46px;height:3px;background:var(--tk-lime);
}
body.theme-tulka[dir="rtl"] .custom-page .cs-title::before{transform:translateX(50%);}
body.theme-tulka .custom-page .cs-subtitle{
  color:var(--text-muted)!important;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.85;margin-top:18px;
}

/* value cards */
body.theme-tulka .custom-page .cs-features-grid{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;align-items:stretch;
}
body.theme-tulka .custom-page .cs-feature-item{
  position:relative;overflow:hidden;padding:34px 28px 32px!important;border-radius:4px!important;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
  border:1px solid var(--tk-line)!important;text-align:start;
  transition:border-color .4s,transform .4s var(--tk-ease);
}
body.theme-tulka .custom-page .cs-feature-item:hover{border-color:rgba(180,222,69,.4)!important;transform:translateY(-6px);}
body.theme-tulka .custom-page .cs-feature-item::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:1px;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,transparent,var(--tk-lime),transparent);
}
body.theme-tulka .custom-page .cs-feature-item:hover::before{opacity:.9;}
body.theme-tulka .custom-page .cs-feature-icon{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:22px;
  font-size:22px;color:var(--tk-lime);border:1px solid rgba(180,222,69,.32);border-radius:50%;
}
body.theme-tulka .custom-page .cs-feature-num{
  display:inline-block;font-family:var(--tk-display);font-size:13px;font-weight:800;
  color:var(--tk-line-2);letter-spacing:.1em;margin-bottom:14px;
}
body.theme-tulka .custom-page .cs-feature-body h4{
  font-family:var(--tk-display);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.2;
  color:var(--tk-head)!important;margin-bottom:12px;
}
body.theme-tulka[dir="rtl"] .custom-page .cs-feature-body h4{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.45;}
body.theme-tulka .custom-page .cs-feature-body p,
body.theme-tulka .custom-page .cs-feature-body div{color:var(--text-muted)!important;font-size:13.5px;line-height:1.8;}

/* story — no image ships on these pages, so a two-column grid would leave a
   dead half. Collapse to one measured column and set it like an essay. */
body.theme-tulka .custom-page .cs-story-layout{
  display:block!important;max-width:840px;margin:0 auto;text-align:start;
}
body.theme-tulka .custom-page .cs-story-layout+.cs-story-layout{margin-top:clamp(34px,4vw,60px);}
body.theme-tulka .custom-page .cs-story-media{max-width:100%;margin-bottom:30px;}
body.theme-tulka .custom-page .cs-story-media img{width:100%;border-radius:4px;border:1px solid var(--tk-line);}
body.theme-tulka .custom-page .cs-story-text{padding:0!important;}
body.theme-tulka .custom-page .cs-story-title{
  font-family:var(--tk-display);font-weight:700;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(24px,3.2vw,40px)!important;color:var(--tk-head)!important;margin-bottom:22px;
  padding-inline-start:22px;border-inline-start:3px solid var(--tk-lime);
}
body.theme-tulka[dir="rtl"] .custom-page .cs-story-title{font-family:'Tajawal',sans-serif;font-weight:800;letter-spacing:0;line-height:1.35;}
body.theme-tulka .custom-page .cs-story-body{color:var(--text-muted)!important;font-size:clamp(15px,1.2vw,16.5px);line-height:1.95;}
body.theme-tulka .custom-page .cs-story-body p+p{margin-top:1.15em;}
body.theme-tulka .custom-page .cs-story-body p:first-of-type{
  font-size:clamp(16.5px,1.5vw,19px);line-height:1.75;color:var(--text)!important;
}
body.theme-tulka .custom-page .cs-story-btn,
body.theme-tulka .custom-page .cs-feature-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--tk-lime)!important;color:var(--tk-on-lime)!important;
  padding:14px 28px;border:1px solid var(--tk-lime);border-radius:2px;transition:transform .3s,box-shadow .3s;
}
body.theme-tulka .custom-page .cs-story-btn:hover,
body.theme-tulka .custom-page .cs-feature-link:hover{transform:translateY(-2px);box-shadow:0 12px 34px var(--tk-glow);}

/* daylight twin for custom pages */
body.theme-tulka[data-scheme="light"] .custom-page-header{background:var(--bg-gray)!important;}
body.theme-tulka[data-scheme="light"] .custom-page .cs-feature-item{background:#fff!important;}
body.theme-tulka[data-scheme="light"] .custom-page .cs-feature-icon{color:#3E7A0E;border-color:rgba(62,122,14,.35);}
body.theme-tulka[data-scheme="light"] .custom-page .cs-title::before,
body.theme-tulka[data-scheme="light"] .custom-page .cs-story-title{border-color:#3E7A0E;}
body.theme-tulka[data-scheme="light"] .custom-page .cs-title::before{background:#3E7A0E;}
body.theme-tulka[data-scheme="light"] .custom-page-header .section-inner::before{color:#3E7A0E;}
body.theme-tulka[data-scheme="light"] .custom-page .cs-story-btn,
body.theme-tulka[data-scheme="light"] .custom-page .cs-feature-link{background:#0B2028!important;border-color:#0B2028;color:#fff!important;}

@media (max-width:760px){
  body.theme-tulka .custom-page .cs-features-grid{grid-template-columns:1fr;}
  body.theme-tulka .custom-page-header h1{max-width:none;}
  body.theme-tulka .custom-page-header::after{display:none;}
}