:root{
  --bg:#0b1020; --text:#e5e7eb; --muted:#9aa4b2; --card:#0f172a; --line:rgba(148,163,184,.18);
  --accent:#7dd3fc; --accent-2:#a78bfa; --accent-3:#34d399; --ring:rgba(125,211,252,.25);
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --screen-bg:#0f172a;
  /* Top nav background (desktop + mobile) */
  --nav-bg: linear-gradient(to bottom, rgba(11,16,32,.7), rgba(11,16,32,.35));
  --nav-bg-mobile: linear-gradient(to bottom, rgba(11,16,32,1), rgba(11,16,32,.85));
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f8fafc; --text:#0f172a; --muted:#475569; --card:#ffffff; --line:rgba(15,23,42,.12); --ring:rgba(37,99,235,.18); --nav-bg: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.78)); --nav-bg-mobile: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,.94)); }
}
/* Explicit theme overrides when user chooses */
body.light{ --bg:#f8fafc; --text:#0f172a; --muted:#475569; --card:#ffffff; --line:rgba(15,23,42,.12); --ring:rgba(37,99,235,.18); --nav-bg: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.78)); --nav-bg-mobile: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,.94)); }
body.dark{ --bg:#0b1020; --text:#e5e7eb; --muted:#9aa4b2; --card:#0f172a; --line:rgba(148,163,184,.18); --ring:rgba(125,211,252,.25); --nav-bg: linear-gradient(to bottom, rgba(11,16,32,.7), rgba(11,16,32,.35)); --nav-bg-mobile: linear-gradient(to bottom, rgba(11,16,32,1), rgba(11,16,32,.85)); }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial; color:var(--text); background:
  radial-gradient(60rem 30rem at 10% -10%, rgba(125,211,252,.16), transparent 60%),
  radial-gradient(60rem 30rem at 90% -20%, rgba(167,139,250,.12), transparent 60%),
  var(--bg);
  -webkit-font-smoothing: antialiased;}
a{color:inherit; text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.nav{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(10px); background:var(--nav-bg); border-bottom:1px solid var(--line)}
.nav .inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:600}
.brand img{height:28px; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.nav a.cta{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; box-shadow:inset 0 0 0 1px var(--ring)}
/* Header actions and theme toggle */
.nav .actions{display:flex; align-items:center; gap:10px}
/* Top nav (text links instead of buttons) */
.top-nav{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.top-nav a{position:relative; text-decoration:none; color:var(--muted); font-size:15px; font-weight:500; transition:color .2s ease}

/* Divider between nav items */
.top-nav a + a{
  padding-left:16px;
  margin-left:16px;
  border-left:1px solid rgba(148,163,184,0.5);
}
.top-nav a:hover{color:var(--text)}
.top-nav a::after{content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.top-nav a:hover::after{transform:scaleX(1)}
.top-nav a.active{color:var(--text)}
.top-nav a.active::after{transform:scaleX(1)}
@media (max-width: 980px){
  .top-nav{display:none}
}
.theme-toggle{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:inherit; cursor:pointer; box-shadow:inset 0 0 0 1px var(--ring)}
.theme-toggle:focus{outline:none; box-shadow:0 0 0 3px rgba(125,211,252,.35)}

/* Hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero .inner{padding:96px 0 40px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); box-shadow:inset 0 0 0 1px var(--ring); font-size:12px}
h1{margin:16px 0 8px; font-size: clamp(40px, 7vw, 84px); letter-spacing:-.02em; line-height:1.02}
.lede{max-width:68ch; color:var(--muted); font-size: clamp(16px, 2.2vw, 20px); line-height:1.7}
.cta-row{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:12px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(180deg, rgba(125,211,252,.25), rgba(125,211,252,.08)); border-color:rgba(125,211,252,.35)}

.device{margin-top:48px; background:linear-gradient(120deg, rgba(125,211,252,.18), rgba(167,139,250,.14), rgba(52,211,153,.14)); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow)}
.device .chrome{display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(15,23,42,.5); border-bottom:1px solid var(--line)}
.dot{height:10px; width:10px; border-radius:50%; background:#ef4444}
.dot:nth-child(2){background:#f59e0b}
.dot:nth-child(3){background:#10b981}
.device .screen{aspect-ratio: 16/9; display:grid; place-items:center; color:var(--muted); font-size:14px; min-height:220px; height:clamp(220px, 56vw, 560px)}

/* Feature panels */
section.panel{border-top:1px solid var(--line)}
.panel .inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; padding:96px 0; align-items:center}
.panel.reverse .inner{grid-template-columns: 1fr 1.2fr}
.panel .media{background: linear-gradient(120deg, rgba(125,211,252,.1), rgba(167,139,250,.1)); border:1px solid var(--line); border-radius:20px; min-height:320px; display:grid; place-items:center}
.panel h2{font-size: clamp(28px, 4vw, 44px); margin:0 0 12px}
.panel p{color:var(--muted); font-size:18px; line-height:1.7; margin:0}

/* Feature grid */
.grid{padding:40px 0 96px}
.grid h3{font-size: clamp(24px, 3vw, 32px); margin:0 0 24px}
.features{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.feature{border:1px solid var(--line); border-radius:16px; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); min-height:160px}
.feature .k{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:rgba(125,211,252,.2); margin-bottom:10px}
.feature h4{margin:0 0 6px; font-size:18px}
.feature p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}

/* Marquee */
.marquee{padding:0}
/* Limit visuals to the content width; clip the scrolling row inside the container */
.marquee .container{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
/* Row is flex and will be translated by JS for smooth, seamless loop */
.marquee .row{display:flex; gap:28px; padding:16px 0; width:max-content; will-change:transform}
.chip{border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--muted); white-space:nowrap; box-shadow:inset 0 0 0 1px var(--ring)}
/* Chip variants cycle red → orange → green */
.chip--red{ border-color: rgba(239,68,68,.45); color:#ef4444; background: linear-gradient(180deg, rgba(239,68,68,.12), transparent); box-shadow: inset 0 0 0 1px rgba(239,68,68,.22); }
.chip--orange{ border-color: rgba(245,158,11,.45); color:#f59e0b; background: linear-gradient(180deg, rgba(245,158,11,.12), transparent); box-shadow: inset 0 0 0 1px rgba(245,158,11,.22); }
.chip--green{ border-color: rgba(16,185,129,.45); color:#10b981; background: linear-gradient(180deg, rgba(16,185,129,.12), transparent); box-shadow: inset 0 0 0 1px rgba(16,185,129,.22); }

/* Pricing teaser */
.pricing{padding:96px 0}
.card{border:1px solid var(--line); border-radius:18px; padding:24px; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent)}
.price{font-size:40px; font-weight:700}
.small{color:var(--muted); font-size:14px}
.footnote{font-size:8px; color:var(--muted); opacity:.75}

/* Footer */
footer{padding:40px 0; color:var(--muted); border-top:1px solid var(--line); text-align:center}
/* Footer CTA alignment for detail pages */
footer .footer-actions{justify-content:center; margin-bottom:24px}

/* Responsive */
@media (max-width: 980px){
  .panel .inner, .panel.reverse .inner{grid-template-columns: 1fr;}
  .features{grid-template-columns: 1fr 1fr}
}
/* Desktop/tall viewports: let slides use full width while respecting height */
@media (min-width: 981px){
  /* Ensure all layers take the full area */
  .device .screen, .carousel, .carousel .slides, .carousel .slide{width:100%; height:100%;}
  /* Default: fill the screen area fully on desktop */
  .carousel img{width:100% !important; height:100% !important; max-height:100%; object-fit:cover !important; object-position:center}
  /* First slide: keep cover (works well) */
  .carousel .slides .slide:first-child img{max-height:100% !important; object-fit:cover !important}
  /* Slides 2–4: prefer contain to avoid heavy zoom while keeping centered */
  .carousel .slides .slide:nth-child(n+2) img{object-fit:contain !important}
}
@media (max-width: 620px){
  .features{grid-template-columns: 1fr}
  .hero .inner{padding-top:72px}
  /* On small screens use a solid background for media blocks to avoid banding/box look */
  .panel .media{background:#fff}
  /* Reduce iOS banding/seams: use solid page bg and remove backdrop blur from sticky nav */
  body{background: var(--bg)}
  .nav{backdrop-filter:none; -webkit-backdrop-filter:none; background: var(--nav-bg-mobile)}
}

/* Ensure the carousel screen is solid so transparent PNGs are visible in dark mode */
.device .screen{background:#ffffff}

/* Carousel */
.screen{position:relative}
.carousel{position:relative; width:100%; height:100%}
.carousel .slides{position:relative; width:100%; height:100%;}
.carousel .slide{position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s ease;}
@media (prefers-reduced-motion: reduce){ .carousel .slide{transition:none} }
.carousel .slide.is-active{opacity:1}
.carousel img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block}
.carousel .nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:rgba(15,23,42,.55); color:var(--text); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)}
.carousel .nav:hover{background:rgba(15,23,42,.7)}
.carousel .nav.prev{left:10px}
.carousel .nav.next{right:10px}
.carousel .dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:8px}
.carousel .dot{width:8px; height:8px; border-radius:999px; border:1px solid var(--line); background:rgba(148,163,184,.3); padding:0; cursor:pointer}
.carousel .dot.is-active{background:var(--accent)}
/* Slide label overlay */
.carousel .label{position:absolute; left:50%; top:14px; transform:translateX(-50%); padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(15,23,42,.6); color:#fff; font-size:clamp(20px, 3.6vw, 44px); font-weight:700; letter-spacing:.2px; text-shadow:0 1px 2px rgba(0,0,0,.45); box-shadow:var(--shadow); z-index:3; text-align:center}
@media (max-width:620px){ .carousel .label{font-size:18px; padding:8px 12px; left:50%; top:10px; transform:translateX(-50%)} }
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.text-orange{color:#f59e0b}
.text-red{color:#ef4444}
.text-green{color:#10b981}

/* Make the first slide image a bit smaller to leave space for the top title */
.carousel .slides .slide:first-child img{max-height:80%; object-fit:contain}

/* Constrain images placed in feature panel media blocks */
.panel .media{position:relative; overflow:hidden}
.panel .media img{max-width:100%; width:100%; height:auto; max-height:360px; object-fit:contain; display:block}

/* Specificity fix: ensure panel footnotes don't inherit 18px from .panel p */
.panel p.footnote{font-size:14px}

/* Desktop override: ensure carousel images fill the pane width */
@media (min-width: 981px){
  .carousel img{width:100% !important; height:100% !important; max-height:100%; object-fit:cover !important}
  .carousel .slides .slide:first-child img{max-height:100% !important; object-fit:cover !important}
}


/* Mobile: keep solid backgrounds to avoid iOS banding; still use theme variables */
@media (max-width: 620px){
  .nav{backdrop-filter:none; -webkit-backdrop-filter:none; background: var(--nav-bg-mobile)}
}

/* Ensure manual theme selection always wins over system on mobile/desktop */
body.light .nav, body.dark .nav{ background: var(--nav-bg) !important; }
@media (max-width: 620px){ body.light .nav, body.dark .nav{ background: var(--nav-bg-mobile) !important; } }


/* Contracts form two-up media: show two smaller images side by side, stack on mobile */
.media.two-up{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; padding:16px}
.media.two-up > *{min-width:0; width:100%; min-height:220px; display:flex; align-items:center; justify-content:center}
.media.two-up .tech-text{width:100%; text-align:center}
.media.two-up span.small{display:flex; width:100%; height:100%}
.media.two-up img{max-width:100%; max-height:180px; width:auto; height:auto; object-fit:contain; display:block; margin:0 auto; transform:none !important}
@media (max-width: 980px){ .media.two-up{grid-template-columns:1fr} }

/* Techy large text for protocol label */
.tech-text{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  font-size: clamp(56px, 12vw, 160px);
  letter-spacing: .12em;
  line-height: 1;
  display: inline-block;
  /* Fade text from red to green */
  background: linear-gradient(90deg, #ef4444 0%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 28px var(--ring);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
}

.media--plain-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.media--plain-logo .small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.media--plain-logo img.kafka-logo {
  width: auto;
  max-width: 100%;
  max-height: 180px;
  height: auto;
  display: block;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}