/* Jaspreet Singh: design layer on top of the shared site CSS, so the site does not look like saurabhbhayana.com. */

/* ---------- type: Bricolage Grotesque headings, Plus Jakarta Sans body ---------- */
:root { --font-sans: "Plus Jakarta Sans", system-ui, sans-serif; --jl-teal: #ff4d3d; --jl-mint: #ffd9d5; --jl-deep: #b8291d; }
body { font-family: var(--font-sans); }
h1, h2, h3, .sx-title, .font-brand { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; }
h1, .sx-title { letter-spacing: -.035em; }
.sx-title { font-weight: 700; }

/* ---------- labels: mint pill with a dot instead of a dash + mono caps ---------- */
.sx-eyebrow { font-family: var(--font-sans); letter-spacing: .06em; font-size: 12.5px; font-weight: 600; text-transform: none;
  padding: 6px 13px 6px 10px; border-radius: 999px; background: #ffecea; color: var(--jl-deep); }
.sx-eyebrow:before { width: 7px; height: 7px; border-radius: 99px; background: var(--jl-teal); }
.sx-dark .sx-eyebrow { background: rgba(255, 77, 61, .12); color: #ff4d3d; }
.sx-dark .sx-eyebrow:before { background: #ff4d3d; }

/* ---------- accent words: marker highlight instead of the shimmer ---------- */
.hx-shimmer { animation: none !important; color: inherit !important; -webkit-text-fill-color: currentColor;
  background: linear-gradient(transparent 58%, var(--jl-mint) 58%, var(--jl-mint) 90%, transparent 90%) !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important; background-size: 100% 100% !important;
  padding: 0 .06em; border-radius: 2px; }
.sx-dark .hx-shimmer { background: linear-gradient(transparent 58%, rgba(255, 77, 61, .32) 58%, rgba(255, 77, 61, .32) 90%, transparent 90%) !important; }

/* ---------- shapes: squarer buttons and cards, round icons ---------- */
.hx-btn, .hx-btn-ghost { border-radius: 12px !important; }
.hx-btn-ghost .hx-dot, .hx-dot { border-radius: 9px; background: #ffecea; color: var(--jl-deep); }
.sx-card, .wk-card, .hx-card { border-radius: 14px; }
.ct-card { border-radius: 16px; }
.ct-card:before { border-radius: 16px 16px 0 0; }
.sx-card { box-shadow: 0 1px 0 rgba(15, 30, 29, .04), 0 18px 40px -32px rgba(15, 30, 29, .45); }
.sx-card:hover { border-color: rgba(255, 77, 61, .45); }
.sx-ico { border-radius: 999px; }
.sx-faq .sx-plus { border-radius: 10px; }
.sx-faq[open] .sx-plus { background: var(--jl-teal); border-color: var(--jl-teal); }

/* ---------- backgrounds: dotted hero, teal-lit dark bands ---------- */
.hx { background-image: radial-gradient(rgba(255, 77, 61, .16) 1.1px, transparent 1.2px); background-size: 22px 22px; background-position: -11px -11px; }
.sx-dark { background: radial-gradient(900px 420px at 88% -10%, rgba(255, 77, 61, .30), transparent 62%),
  radial-gradient(700px 380px at -5% 110%, rgba(255, 77, 61, .22), transparent 60%), linear-gradient(160deg, #1a1515, #2a1714); }

/* ---------- animated logo "Orbit": ring draws, J rises, a dot keeps orbiting (faster on hover) ---------- */
.jl-logo { display: inline-block; line-height: 0; }
.jl-logo svg { overflow: visible; }
.jl-ring { fill: none; stroke: #ff4d3d; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform-origin: 24px 24px; transform: rotate(-90deg); animation: jl-draw 1s cubic-bezier(.6, .1, .3, 1) .1s forwards; }
.jl-j { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 31px; fill: currentColor; opacity: 0; transform: translateY(8px);
  animation: jl-rise .55s cubic-bezier(.2, 1.3, .4, 1) .7s forwards; }
.jl-orbit { transform-origin: 24px 24px; animation: jl-spin 6s linear 1.2s infinite; }
.jl-planet { fill: currentColor; stroke-width: 2.6; transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: jl-pop .45s cubic-bezier(.2, 1.7, .4, 1) 1.05s forwards; }
a:hover .jl-orbit { animation-duration: 1.2s; }
a:hover .jl-ring { stroke: #e5352a; }
@keyframes jl-draw { to { stroke-dashoffset: 0; } }
@keyframes jl-rise { to { opacity: 1; transform: none; } }
@keyframes jl-pop { to { transform: scale(1); } }
@keyframes jl-spin { to { transform: rotate(360deg); } }

/* wordmark: name with an underline that sweeps in */
.jl-word { position: relative; display: inline-block; font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; font-weight: 700;
  line-height: 21px; height: 21px; letter-spacing: -.03em; }
.jl-word:after { content: ""; position: absolute; left: 1px; right: 2px; bottom: -4px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--jl-teal), #ff4d3d); transform: scaleX(0); transform-origin: left; animation: jl-under .7s cubic-bezier(.6, .1, .3, 1) 1.3s forwards; }
@keyframes jl-under { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .jl-ring, .jl-j, .jl-planet, .jl-word:after { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .jl-ring { transform: rotate(-90deg) !important; } .jl-orbit { animation: none !important; }
}

/* lime buttons need dark text */
.hx-btn { background: #ff4d3d !important; color: #fff !important; box-shadow: 0 14px 30px -14px rgba(255, 77, 61, .75) !important; }
.hx-btn:hover { background: #d63a2c !important; }
.btn-primary, .from-\[var\(--btn\)\] { color: #fff !important; }
.ct-done-ico { color: #fff; }
.sx-dark .hx-shimmer { color: #fff !important; }

/* footer on the same black as the last two sections */
footer.font-brand { background: #0d0b0b !important; }
footer.font-brand .ft-strip { border-color: rgba(255, 255, 255, .08) !important; }

/* "How a project runs" on plain black, no coloured glow */
#process { background: #0d0b0b !important; }
#process > .absolute[class*="blur"], footer.font-brand .absolute[class*="blur"], footer.font-brand [class*="blur-["] { display: none !important; }

/* purple on black needs the lighter tint */
.sx-dark .sx-eyebrow { background: rgba(255, 138, 127, .14); color: #ffb3ab; }
.sx-dark .sx-eyebrow:before { background: #ffb3ab; }
.sx-dark .hx-shimmer { background: linear-gradient(transparent 58%, rgba(255, 138, 127, .38) 58%, rgba(255, 138, 127, .38) 90%, transparent 90%) !important; }
.jl-word:after { background: linear-gradient(90deg, #ff4d3d, #ffb3ab); }

/* softer: purple only as an accent, buttons go charcoal */
:root { --btn: #1c1a1a; --btn2: #2c2828; --jl-mint: #ffecea; }
.hx-btn { background: #1c1a1a !important; color: #fff !important; box-shadow: 0 14px 30px -18px rgba(28, 26, 26, .55) !important; }
.hx-btn:hover { background: #ff4d3d !important; }
.btn-primary, .from-\[var\(--btn\)\] { color: #fff !important; }
.sx-ico-copper { background: #ffeeec !important; color: #d63a2c !important; }
.sx-eyebrow { background: #fff3f1; }
.hx-btn-ghost .hx-dot, .hx-dot { background: #fff3f1; }
.sx-dark .hx-btn, .bg-\[\#0a0a0a\] .hx-btn { background: #fff !important; color: #1c1a1a !important; }
.sx-dark .hx-btn:hover, .bg-\[\#0a0a0a\] .hx-btn:hover { background: #ffecea !important; }

/* every dark band the same plain black (matches "How a project runs") */
.sx-dark { background: #0d0b0b !important; }
.sx-dark > .absolute[class*="blur"], .sx-dark .absolute[class*="blur-["] { display: none !important; }

/* no blog categories yet: Blog is a plain link (no dropdown arrow) */
[data-blogmenu]:not(:has([data-blogmenu-panel])) > a > span:first-of-type { display: none; }