:root{
      --bg: oklch(99% .005 95);
      --bg-soft: oklch(97% .01 95);
      --ink: oklch(20% .03 40);
      --muted: oklch(50% .03 50);
      --line: color-mix(in oklab, var(--ink) 12%, transparent);
      --a1: 78% .20 220; --a2: 74% .18 305; --a3: 82% .18 85; --a4: 80% .20 40;
      --accent: oklch(80% .18 220); --accent-2: oklch(76% .18 305); --accent-3: oklch(82% .18 85);
      --radius: 20px;
      --shadow-lg: 0 30px 80px color-mix(in oklab, var(--ink) 18%, transparent);
      --shadow-md: 0 18px 40px color-mix(in oklab, var(--ink) 12%, transparent);
      --grid: color-mix(in oklab, var(--ink) 7%, transparent);
      --glow: 0 10px 26px color-mix(in oklab, var(--accent) 20%, transparent);
      --focus-ring: color-mix(in oklab, var(--accent-2) 22%, transparent);
      --font-heading: "DM Sans", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
      --font-ui: "DM Sans", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
    }
    [data-theme="dark"]{
      /* Dark mode: crisper, less hazy */
      --bg: oklch(12% .02 30);
      --bg-soft: oklch(16% .025 30);
      --ink: oklch(96% .02 95);
      --muted: oklch(82% .015 95);
      --line: color-mix(in oklab, var(--ink) 16%, transparent);
      --shadow-lg: 0 36px 100px rgba(0,0,0,.5);
      --shadow-md: 0 20px 48px rgba(0,0,0,.4);
      --grid: color-mix(in oklab, var(--ink) 6%, transparent);
      --glow: 0 14px 28px color-mix(in oklab, var(--accent) 22%, transparent);
    }

    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family: var(--font-ui); color:var(--ink); background:var(--bg);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><defs><radialGradient id='g' cx='50%' cy='0%' r='80%'><stop offset='0%' stop-color='rgba(0,0,0,.03)'/><stop offset='100%' stop-color='rgba(0,0,0,0)'/></radialGradient></defs><rect width='100%' height='100%' fill='url(%23g)'/><path d='M0 280 Q140 250 300 270 T600 260 V400 H0 Z' fill='rgba(0,0,0,.02)'/></svg>");
      background-repeat: repeat; background-size: 900px auto; transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
    }

    .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
    .section{padding:92px 0}

    /* removed global polar grid overlay to avoid sticky effect */
    .nav{position:sticky;top:0;z-index:60;backdrop-filter: blur(16px) saturate(140%); background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 88%, transparent), transparent); border-bottom:1px solid var(--line)}
    .nav-inner{display:flex;justify-content:space-between;align-items:center;padding:26px 0;gap:18px}
    .brand{display:flex;align-items:center;gap:16px}
    .brand h1{font-family:var(--font-heading);font-size:20px;letter-spacing:.12em;text-transform:uppercase;margin:0;transition:letter-spacing .4s ease, transform .4s ease}
    .brand h1:hover{letter-spacing:.22em;transform:translateY(-1px)}
    .logo{width:46px;height:46px;border-radius:14px; background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); box-shadow:inset 0 0 0 1px color-mix(in oklab, white 28%, transparent), var(--shadow-md)}

    .nav-links{display:flex;gap:16px;align-items:center}
    .nav-link{font-family:var(--font-heading);padding:10px 4px;border:none;border-radius:8px;background:transparent;color:inherit;text-decoration:none;opacity:.88;position:relative;transition:opacity .2s ease, color .2s ease}
    .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));opacity:0;transform:scaleX(.6);transform-origin:center;transition:opacity .25s ease, transform .25s ease}
    .nav-link:hover{opacity:1}
    .nav-link:hover::after{opacity:1;transform:scaleX(1)}

    .actions{display:flex;gap:10px;align-items:center}
    .theme-toggle{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);cursor:pointer}
    .theme-toggle:hover{transform:translateY(-1px)}

/* Mobile menu button */
.menu-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);cursor:pointer;align-items:center;justify-content:center;gap:4px;padding:10px}
.menu-toggle .menu-bar{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.3)}
.menu-toggle .menu-bar + .menu-bar{margin-top:4px}
@media (max-width: 768px){
  .brand h1{display:none}
  .menu-toggle{display:flex}
}

/* Mobile nav drawer */
@media (max-width: 768px){
  .nav-links{position:fixed;inset:64px 16px auto 16px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:12px;display:none;flex-direction:column;gap:6px;z-index:70}
  .nav-links.open{display:flex}
  .nav-link{padding:12px;border-radius:10px}
  .nav-link::after{display:none}
}

    .hero{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);box-shadow:var(--shadow-lg);overflow:visible}
    .hero-grid{display:grid;gap:28px;padding:clamp(28px,5vw,64px);align-items:center}
    @media(min-width:1080px){.hero-grid{grid-template-columns:1.05fr .95fr}}

/* Mobile: place controls above constellation, tighten spacing */
@media (max-width: 768px){
  .hero-grid{gap:20px;padding:24px}
  .hero-grid > div:nth-child(2){display:flex;flex-direction:column;gap:14px}
  #graphControls{order:0}
  #graph{order:1;height:42vh}
}

    /* removed tag pill */
    .hed{font-family:var(--font-heading);font-size:clamp(38px,7vw,78px);line-height:.96;margin:10px 0 14px;letter-spacing:-0.01em}
.hed .gradient{background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));background-clip:text;-webkit-background-clip:text;color:transparent}
/* Utility gradient text (hero-style) */
.u-gradient{background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}
    .dek{font-size:18px;color:var(--muted);max-width:60ch}

    .blob{position:absolute;inset:auto -8% -18% auto;width:min(60vw,760px);aspect-ratio:1;filter:blur(46px) saturate(130%);opacity:.35;pointer-events:none; background: radial-gradient(42% 42% at 30% 30%, var(--accent) 45%, transparent), radial-gradient(52% 52% at 70% 45%, var(--accent-2) 40%, transparent), radial-gradient(48% 48% at 50% 70%, var(--accent-3) 40%, transparent), radial-gradient(32% 32% at 40% 55%, color-mix(in oklab, var(--accent-2) 60%, var(--accent)) 35%, transparent); animation:float 18s ease-in-out infinite;will-change:transform}
    @keyframes float{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-16px) rotate(7deg)}}

    .graph{position:relative;height:clamp(420px, 52vh, 560px); contain: layout paint; overflow:visible;}
    .links{position:absolute;inset:-10px -20px -10px -20px;pointer-events:none;filter:blur(.2px)}
    .nodes{position:absolute;inset:0;perspective:1200px;overflow:hidden}
    .graph::before{content:"";position:absolute;inset:-1px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line), 0 40px 80px color-mix(in oklab, black 6%, transparent);pointer-events:none}

    .graph-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;justify-content:center}
.graph-controls{touch-action:manipulation}
.control-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(180deg,var(--bg) 60%,var(--bg-soft));display:grid;place-items:center;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;position:relative;color:var(--ink);box-shadow:0 4px 14px color-mix(in oklab, var(--ink) 12%, transparent)}
.control-btn::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.06)}
.control-btn::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent),0 8px 16px rgba(0,0,0,.08);pointer-events:none}
.control-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in oklab, var(--ink) 18%, transparent)}
.control-btn[aria-pressed="true"]{border-color:color-mix(in oklab, var(--accent) 36%, var(--line));color:var(--accent);box-shadow:0 0 0 2px var(--focus-ring),0 12px 24px color-mix(in oklab, var(--accent) 20%, transparent);transform:translateY(-1px) scale(1.03)}
.control-btn svg{width:20px;height:20px;display:block;position:relative;z-index:1;stroke:currentColor}

/* Dark mode token contrast */
[data-theme="dark"] .control-btn{background:linear-gradient(180deg,var(--bg) 60%, var(--bg-soft)); color:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.35)}
[data-theme="dark"] .control-btn::before{background: color-mix(in oklab, var(--bg-soft) 88%, black 12%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.35)}
[data-theme="dark"] .control-btn::after{box-shadow:0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent), 0 10px 18px rgba(0,0,0,.45)}

/* Mobile: larger tap targets and icons */
@media (max-width: 768px){
  .control-btn{width:54px;height:54px}
  .control-btn::before{inset:8px}
  .control-btn svg{width:24px;height:24px}
}

/* Ensure icons remain visible over colored/gradient backgrounds */
.icon{stroke:currentColor}
[data-theme="light"] .control-btn{color: oklch(30% .03 40)}
[data-theme="dark"] .control-btn{color: oklch(92% .02 95)}

    .node{position:absolute;min-width:220px;max-width:300px;background:linear-gradient(180deg,var(--bg) 60%,var(--bg-soft));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:18px;cursor:grab;transform:translate(-50%,-50%);transition:box-shadow .5s cubic-bezier(.2,.7,.2,1), filter .5s cubic-bezier(.2,.7,.2,1), opacity .5s cubic-bezier(.2,.7,.2,1)}
    .node:active{cursor:grabbing}
    .node h3{margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:10px}
    .node p{margin:0;color:var(--muted);font-size:14px}
    .node[aria-current="true"]{box-shadow:0 26px 70px color-mix(in oklab, var(--accent-2) 28%, transparent);max-width:420px}
    .focus-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--focus-ring);opacity:.0;transition:opacity .6s ease;pointer-events:none}
    .node[aria-current="true"] .focus-ring{opacity:.35}

    /* minimalist cards: no icon badge */

    .hint{margin-top:14px;font-size:12px;color:var(--muted)}

    .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
    .reveal.show{opacity:1;transform:translateY(0)}

    footer{text-align:center;color:var(--muted);padding:40px 0;font-size:13px}



    /* Accessibility helper for captions */
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Scroll-triggered animations (Apple-style) */
.scroll-section{
  opacity:0;
  transform:translateY(60px);
  transition:opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-section.animate-in{
  opacity:1;
  transform:translateY(0);
}

/* Intelligent scroll pinning for terminal section */
.terminal-pinned-wrapper{
  position:relative;
  height:500vh; /* Extended scroll space for longer terminal animation */
  margin-top:80vh; /* Reduced space between hero and terminal */
}
.terminal-pinned-section{
  position:sticky;
  top:50vh; /* Center in viewport */
  transform:translateY(-50%);
  z-index:10;
}

/* Terminal section layout - matching hero consistency */
.terminal-section-grid{
  display:grid;
  gap:28px;
  align-items:center;
}
@media(min-width:1080px){
  .terminal-section-grid{grid-template-columns:0.95fr 1.05fr}
}

/* Animated copy for terminal section with selection glows */
.terminal-copy{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  opacity:0;
  transform:translateX(60px);
  transition:all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:var(--shadow-md);
  position:relative;
  cursor:pointer;
}
.terminal-copy.slide-in{
  opacity:1;
  transform:translateX(0);
}
.terminal-copy.active{
  border-color:color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 20px color-mix(in oklab, var(--accent) 15%, transparent);
}
.terminal-copy.copy-block-1.active{
  border-color:color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 20px color-mix(in oklab, var(--accent) 15%, transparent);
}
.terminal-copy.copy-block-2.active{
  border-color:color-mix(in oklab, var(--accent-2) 45%, var(--line));
  box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--accent-2) 60%, transparent), 0 0 20px color-mix(in oklab, var(--accent-2) 15%, transparent);
}
.terminal-copy.copy-block-3.active{
  border-color:color-mix(in oklab, var(--accent-3) 45%, var(--line));
  box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--accent-3) 60%, transparent), 0 0 20px color-mix(in oklab, var(--accent-3) 15%, transparent);
}
.terminal-copy.copy-block-4.active{
  border-color:color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 20px color-mix(in oklab, var(--accent) 15%, transparent);
}
.terminal-copy h4{
  font-family:var(--font-heading);
  font-size:18px;
  margin:0 0 8px;
  color:var(--ink);
}
.terminal-copy p{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}

/* Terminal styling */
.terminal{
  background:#1a1a1a;
  border-radius:12px;
  border:1px solid #333;
  font-family:"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transform:translateX(100px);
  opacity:0;
  transition:transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.terminal.slide-in{
  transform:translateX(0);
  opacity:1;
}
.terminal-header{
  background:#2d2d2d;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:6px;
  border-bottom:1px solid #333;
}
.terminal-controls{
  display:flex;
  gap:6px;
}
.terminal-btn{
  width:12px;
  height:12px;
  border-radius:50%;
}
.terminal-btn.red{background:#ff5f57}
.terminal-btn.yellow{background:#ffbd2e}
.terminal-btn.green{background:#28ca42}
.terminal-title{
  color:#999;
  font-size:13px;
  margin-left:12px;
}
.terminal-content{
  padding:20px;
  color:#00ff00;
  font-size:14px;
  line-height:1.6;
  min-height:200px;
}
.terminal-line{
  opacity:0;
  transform:translateX(-20px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.terminal-line.show{
  opacity:1;
  transform:translateX(0);
}
.terminal-cursor{
  display:inline-block;
  width:8px;
  height:16px;
  background:#00ff00;
  animation:blink 1s infinite;
  vertical-align:text-bottom;
}
@keyframes blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

/* Light mode overrides for terminal */
[data-theme="light"] .terminal{
  background:#f7f7f8;
  border:1px solid var(--line);
  box-shadow:0 6px 22px color-mix(in oklab, var(--ink) 10%, transparent);
}
[data-theme="light"] .terminal-header{
  background:#ededee;
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .terminal-title{ color:#666 }
[data-theme="light"] .terminal-content{ color:#0f7a2a }
[data-theme="light"] .terminal-cursor{ background:#0f7a2a }

/* Services diagram styling */
#servicesDiagram{
  font-family:var(--font-ui);
}
#servicesDiagram rect{
  stroke:var(--line);
  stroke-width:1.5;
  transition:opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#servicesDiagram path{
  stroke:var(--accent);
  stroke-width:2;
  fill:none;
  stroke-dasharray:6,3;
  stroke-dashoffset:0;
  transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#servicesDiagram text{
  fill:var(--ink);
  font-family:var(--font-heading);
  transition:opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#servicesDiagram circle{
  fill:var(--accent);
  stroke:var(--accent);
  stroke-width:1;
  transition:opacity 0.4s ease;
}

/* Diagram animation elements */
.services-diagram .fade-in{
  opacity:1 !important;
}
.services-diagram .draw-path{
  stroke-dashoffset:-18;
}

/* Full-bleed canvas */
#logoChaosCanvas{
  width:100%;               /* fit within container */
  height:44vh;              /* responsive height */
  display:block;
  margin-left:0;           /* no margin offset needed */
  transform:none;           /* no transform needed */
  opacity:0;
  transition:opacity .8s ease;
  cursor: crosshair;        /* crosshair cursor for targeting */
}

/* Let the canvas spill outside the card/grid */
#chaos .terminal-section-grid{ 
  overflow:visible; 
  display:block; /* disable grid for full-width canvas */
}
#chaos > .wrap > div{ overflow:visible !important; } /* the card wrapper in that section */


.chaos-exploded #logoChaosCanvas{
  opacity:1;
}

/* Mobile-first adjustments for terminal section */
@media (max-width: 768px){
  /* Disable long sticky scroll on mobile */
  .terminal-pinned-wrapper{ height:auto; margin-top:24px; }
  .terminal-pinned-section{ position:relative; top:auto; transform:none; }
  /* Single column, hide cards; keep terminal */
  .terminal-section-grid{ display:block; }
  .terminal-section-grid > div:first-child{ display:none; }
  .terminal{ transform:none; opacity:1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .terminal, .terminal-line{ transition:none !important; }
  .blob{ animation:none !important; }
}

/* CNCF Logo Styles */
.cncf-logo{
  position:absolute;
  width:32px;
  height:32px;
  background:var(--accent);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:bold;
  color:white;
  transition:all 0.3s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.cncf-logo:hover{
  transform:scale(1.1);
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-item {
  flex: 1;
  padding: 20px;
}