/* =========================================================
   Design Tokens (OLD THEME)
   ========================================================= */
:root{
  --idyllic-blue: #2F6FED;
  --navy-deep: #0B1F3B;
  --teal-mint: #2EC4B6;

  --slate-900: #0f172a;
  --slate-600: #475569;
  --slate-400: #94a3b8;

  --cloud-100: #f7f9fc;
  --cloud-200: #eef2f7;
}

html, body{
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html{
  /* fallback behind everything (prevents any bottom leak) */
  background: var(--navy-deep);
}

body{
  /* your actual site background */
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(79,142,220,0.22), transparent 55%),
    radial-gradient(1000px 500px at 85% 10%, rgba(31,58,95,0.16), transparent 60%),
    linear-gradient(135deg,
      rgba(11,31,59,0.88) 0%,
      rgba(47,111,237,0.50) 55%,
      rgba(46,196,182,0.38) 100%
    ),
    linear-gradient(180deg, #f6f8fc 0%, #eef2f7 100%);
  background-attachment: fixed;
  color: var(--slate-900);
}

/* Safety: stop tiny horizontal overflow from creating “leaks” */
html, body{
  overflow-x: hidden;
}

/* =========================================================
   Global Glossy Background
   ========================================================= */
.dl-glossy-bg{
  background:
    /* Vibrant gradient wash */
    linear-gradient(135deg,
      rgba(11,31,59,0.85) 0%,
      rgba(47,111,237,0.55) 55%,
      rgba(46,196,182,0.40) 100%
    ),
    /* Light bloom accents */
    radial-gradient(1200px 600px at 15% 0%, rgba(79,142,220,0.22), transparent 55%),
    radial-gradient(1000px 500px at 85% 10%, rgba(31,58,95,0.16), transparent 60%),
    /* Readable base */
    linear-gradient(180deg, #f6f8fc 0%, #eef2f7 100%);

  background-attachment: fixed;
}

/* =========================================================
   Main Layout Shell
   ========================================================= */
.dl-shell{
  max-width: 72rem; /* Tailwind max-w-6xl */
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
}

/* =========================================================
   Header / Glass Effect
   ========================================================= */
header{
  box-shadow: 0 8px 24px rgba(2,6,23,0.08);
}

/* =========================================================
   Brand Lockup
   ========================================================= */
.brand-lockup{
  display: inline-block;
}

.brand-name{
  font-family:
    "Apple Braille",
    "SF Pro Display",
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--slate-900);
}

.brand-tagline{
  display: block;
  text-align: justify;
  text-justify: inter-word;
  color: var(--slate-600);
}

/* Force justify to work on single line */
.brand-tagline::after{
  content: "";
  display: inline-block;
  width: 100%;
}

/* =========================================================
   Glossy Cards
   ========================================================= */
.dl-glossy-card{
  background: linear-gradient(180deg, #ffffff 0%, var(--cloud-100) 100%);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 1.25rem;
  box-shadow:
    0 14px 36px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.dl-pop{
  box-shadow:
    0 10px 26px rgba(2,6,23,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Subtle inner shine for bordered sections */
.dl-glossy-border{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

/* =========================================================
   Buttons / Idyllic Blue
   ========================================================= */
.idyllic-bg{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.00) 40%),
    var(--idyllic-blue) !important;
  color: #ffffff;
  box-shadow:
    0 10px 22px rgba(79,142,220,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* =========================================================
   SVG / Interactive Diagram Safety
   ========================================================= */
#pyramid{
  pointer-events: all;
}

.dl-layer,
.dl-box,
.dl-click{
  pointer-events: all;
  cursor: pointer;
}

#pyramid text,
.dl-sublabel,
.dl-boxlabel{
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   Diagram Labels
   ========================================================= */
.dl-bottom-label{
  font-weight: 700;
  fill: var(--slate-900);
  paint-order: stroke;
  stroke: rgba(255,255,255,0.9);
  stroke-width: 3px;
}

.dl-box{
  fill: #ffffff;
  stroke: var(--slate-400);
  stroke-width: 1.2;
}

.dl-boxlabel{
  font-size: 13px;
  font-weight: 600;
  fill: var(--slate-900);
}
/* Header hover animation (LinkedIn-style) */
.header-link {
  position: relative;
  transition: color 200ms ease;
}

.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.header-link:hover::after {
  transform: scaleX(1);
}

/* =========================================================
   Responsive Adjustments
   ========================================================= */
@media (max-width: 640px){
  .brand-name{
    letter-spacing: 0.025em;
  }
}