:root {
  /* Page colours */
  --clr-primary:        #7c3aed;
  --clr-primary-dark:   #5b21b6;
  --clr-bg:             #faf9ff;
  --clr-card:           #ffffff;
  --clr-text:           #202124;
  --clr-muted:          #5f6368;
  --clr-border:         #ede9fe;
  --clr-accent-green:   #0d9e6b;
  --clr-accent-purple:  #8b5cf6;
  --clr-accent-blue:    #0277bd;

  /* Kinetic hero defaults */
  --kh-bg-start:        #0f0a20;
  --kh-bg-mid:          #11092a;
  --kh-bg-end:          #06030e;

  --kh-primary:         #8b5cf6;
  --kh-primary-light:   #c4b5fd;

  --kh-glow-color:      rgba(139,92,246,0.20);
  --kh-glow-opacity:    0.6;

  --kh-texture-color:   rgba(196,181,253,0.7);
  --kh-texture-opacity: 0.08;
  --kh-texture-size:    24px;
  --kh-texture-speed:   12s;

  --kh-blob-a-color:    rgba(139,92,246,0.30);
  --kh-blob-b-color:    rgba(139,92,246,0.18);
  --kh-blob-a-speed:    9s;
  --kh-blob-b-speed:    11s;

  --kh-text:            #ffffff;
  --kh-text-muted:      rgba(255,255,255,0.5);

  --kh-shimmer-speed:   3s;
  --kh-in-duration:     600ms;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
}

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar { background: #fff; border-bottom: 1px solid var(--clr-border); }
.navbar-brand { font-weight: 700; font-size: 1.6rem; color: var(--clr-primary-dark) !important; letter-spacing: -.3px; }
.navbar-brand span { color: var(--clr-text); }

/* ── Footer ───────────────────────────────────────────────────── */
footer {
  background: #fff;
  border-top: 1px solid var(--clr-border);
  padding: 2rem 0;
  text-align: center;
  color: var(--clr-muted);
  font-size: .85rem;
}

@media (max-width: 767.98px) {
  .hero h1 { font-size: 1.9rem; }
  .hero     { padding: 3rem 0 2.5rem; }
}

/* ── Text shadows ─────────────────────────────────────────────── */
.text-shadow-sm { text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.text-shadow-md { text-shadow: 2px 2px 4px rgba(0,0,0,0.4); }
.text-shadow-lg { text-shadow: 3px 3px 6px rgba(0,0,0,0.3); }

/* ── Page CTA button ──────────────────────────────────────────── */
.my-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--clr-primary-dark);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--kh-primary) 40%, transparent);
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.my-btn:hover,
.my-btn:focus-visible {
  background: var(--clr-primary);
  box-shadow: 0 6px 32px color-mix(in srgb, var(--clr-primary) 55%, transparent);
  transform: translateY(-1px);
  color: #fff;
}

/* ── Kinetic hero wrapper ─────────────────────────────────────── */
.kinetic-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--kh-bg-start), var(--kh-bg-mid), var(--kh-bg-end));
  color: var(--kh-text);
  padding: 5rem 1.5rem;
  width: 100%;
}

/* ── Radial glow ──────────────────────────────────────────────── */
.kinetic-hero__glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: var(--kh-glow-opacity);
  background: radial-gradient(ellipse at center, var(--kh-glow-color) 0%, transparent 60%);
}

/* ── Texture layer ────────────────────────────────────────────── */
.kinetic-hero__texture {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: var(--kh-texture-opacity);
}

.kinetic-hero--grid .kinetic-hero__texture {
  background-image:
    linear-gradient(var(--kh-texture-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--kh-texture-color) 1px, transparent 1px);
  background-size: var(--kh-texture-size) var(--kh-texture-size);
  animation: kh-grid var(--kh-texture-speed) linear infinite;
}

.kinetic-hero--dots .kinetic-hero__texture {
  background-image: radial-gradient(circle, var(--kh-texture-color) 1.5px, transparent 1.5px);
  background-size: var(--kh-texture-size) var(--kh-texture-size);
  animation: kh-grid var(--kh-texture-speed) linear infinite;
}

.kinetic-hero--diagonal .kinetic-hero__texture {
  background-image: repeating-linear-gradient(
    45deg,
    var(--kh-texture-color) 0px,
    var(--kh-texture-color) 1px,
    transparent 1px,
    transparent calc(var(--kh-texture-size) * 0.707)
  );
  animation: kh-diagonal var(--kh-texture-speed) linear infinite;
}

.kinetic-hero--crosshatch .kinetic-hero__texture {
  background-image:
    repeating-linear-gradient(
       45deg,
       var(--kh-texture-color) 0px, var(--kh-texture-color) 1px,
       transparent 1px, transparent calc(var(--kh-texture-size) * 0.707)
    ),
    repeating-linear-gradient(
      -45deg,
       var(--kh-texture-color) 0px, var(--kh-texture-color) 1px,
       transparent 1px, transparent calc(var(--kh-texture-size) * 0.707)
    );
  animation: kh-grid var(--kh-texture-speed) linear infinite;
}

.kinetic-hero--none .kinetic-hero__texture { display: none; }

/* ── Floating blobs ───────────────────────────────────────────── */
.kinetic-hero__blob-a,
.kinetic-hero__blob-b {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}
.kinetic-hero__blob-a {
  left: -5rem;  top: 33%;
  width: 17rem; height: 17rem;
  background: var(--kh-blob-a-color);
  animation: kh-float-a var(--kh-blob-a-speed) ease-in-out infinite;
}
.kinetic-hero__blob-b {
  right: -4rem; bottom: 0;
  width: 20rem; height: 20rem;
  background: var(--kh-blob-b-color);
  animation: kh-float-b var(--kh-blob-b-speed) ease-in-out infinite;
}

/* ── Content (above all layers) ──────────────────────────────── */
.kinetic-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
}

/* ── Pill / badge ─────────────────────────────────────────────── */
.kinetic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  padding: 0.25rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
}

.kinetic-pill__dot {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
}
.kinetic-pill__dot-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--kh-primary);
  opacity: 0.75;
  animation: kh-ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
.kinetic-pill__dot-core {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--kh-primary);
}

/* ── Text effects ─────────────────────────────────────────────── */
.kinetic-in {
  animation: kh-in var(--kh-in-duration) cubic-bezier(0.2,0.8,0.2,1) both;
}

.kinetic-shimmer {
  display: inline-block;
  background: linear-gradient(90deg, var(--kh-primary), var(--kh-primary-light), var(--kh-primary));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kh-shimmer var(--kh-shimmer-speed) ease-in-out infinite;
}

.kinetic-highlight {
  display: inline-block;
  background: linear-gradient(90deg, var(--kh-primary), var(--kh-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kinetic-glow {
  text-shadow:
    0 0 18px var(--kh-primary),
    0 0 40px color-mix(in srgb, var(--kh-primary-light) 60%, transparent);
}

/* ── Hero CTA buttons ─────────────────────────────────────────── */
.kinetic-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--kh-primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--kh-primary) 40%, transparent);
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.kinetic-btn-primary:hover,
.kinetic-btn-primary:focus-visible {
  background: color-mix(in srgb, var(--kh-primary) 85%, white);
  box-shadow: 0 6px 32px color-mix(in srgb, var(--kh-primary) 55%, transparent);
  transform: translateY(-1px);
  color: #fff;
}

.kinetic-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0.5rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.kinetic-btn-ghost:hover,
.kinetic-btn-ghost:focus-visible {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Text rotator ─────────────────────────────────────────────── */
.kinetic-rotator         { display: block; }
.kinetic-rotator--inline { display: inline-block; vertical-align: baseline; }

.kinetic-rotator__item {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  text-align: inherit;
  white-space: nowrap;
  line-height: 1.15;
  padding-bottom: 0.15em;
}

.kh-rot-in  { animation: kh-rot-in  var(--kh-rot-in-dur,  350ms) cubic-bezier(0.2,0.8,0.2,1) both; }
.kh-rot-out { animation: kh-rot-out var(--kh-rot-out-dur, 280ms) cubic-bezier(0.4,0,0.6,1)   both; }

/* ── Utilities ────────────────────────────────────────────────── */
[id] { scroll-margin-top: 110px; }
.mytags a       { color: #fff; text-decoration: none; }
.mytags a:hover { color: #ededed; text-decoration: underline; }

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes kh-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}
@keyframes kh-shimmer {
  0%,100% { background-position:   0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes kh-grid {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--kh-texture-size), var(--kh-texture-size)); }
}
@keyframes kh-diagonal {
  0%   { background-position: 0 0; }
  100% { background-position: var(--kh-texture-size) var(--kh-texture-size); }
}
@keyframes kh-float-a {
  0%,100% { transform: translate(0,     0)    scale(1);    }
  50%     { transform: translate(40px, -20px) scale(1.1);  }
}
@keyframes kh-float-b {
  0%,100% { transform: translate(0,      0)    scale(1);    }
  50%     { transform: translate(-30px, -25px) scale(1.08); }
}
@keyframes kh-ping {
  75%,100% { transform: scale(2); opacity: 0; }
}
@keyframes kh-rot-in {
  from { opacity: 0; transform: translateY(18px)  scale(0.96); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0);   }
}
@keyframes kh-rot-out {
  from { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0);   }
  to   { opacity: 0; transform: translateY(-18px) scale(0.96); filter: blur(5px); }
}