/* VektralForge — main stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
 --ember:#FF5A1F; --mid:#FF8520; --amber:#FFB020;
 --ink:#0E1418; --slate:#4A5560; --oat:#F4F1EC; --white:#FFFFFF; --teal:#2CC6C6;
 --emberdark:#C4400F; --navy:#183b7a; --charcoal:#2f2e41;
 --radius:14px;
 /* VektralForge isotype — official terracotta ramp, logo mark only (UI accents keep the ember/amber palette above) */
 --vf-rust:#7E3A1E; --vf-copper:#B4552D; --vf-clay:#D2703F; --vf-axis:#5B7076;
 --aws:#E8720C; --azure:#3E8EE8; --ali:#FF6A00; --gcp:#4285F4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{background:var(--oat); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6}
h1,h2,h3,h4,.navbar-brand span{font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; letter-spacing:-.02em}
code{font-family:'JetBrains Mono',monospace; font-size:.9em; background:rgba(74,85,96,.1); padding:.1em .35em; border-radius:4px}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

/* Navbar */
.navbar{background:var(--oat); border-bottom:1px solid #e3ddce; padding:14px 0}
.navbar-brand{display:flex; align-items:center; gap:10px; font-size:19px; color:var(--ink)}
.navbar-brand em{color:var(--vf-copper); font-style:normal}
footer .navbar-brand em{color:var(--vf-clay)}
.nav-link{font-weight:500; color:var(--slate); padding:8px 14px !important}
.nav-link:hover{color:var(--ink)}
.btn-primary-brand{background:var(--ember); color:var(--white); border:none; border-radius:999px; font-weight:600; padding:10px 22px}
.btn-primary-brand:hover{background:var(--emberdark); color:var(--white)}
.btn-outline-nav{border:1px solid #d7d1c4; color:var(--ink); border-radius:999px; font-weight:600; padding:10px 22px}
.btn-outline-nav:hover{border-color:var(--slate); color:var(--ink)}
.btn i{font-size:1.05em}

/* Language switch — content-only translation toggle, next to the GitHub button */
.lang-switch{display:flex; align-items:center; gap:6px; font-size:12.5px}
.lang-switch .lang-sep{color:#c9c2b2}
.lang-btn{background:none; border:none; padding:6px 3px; cursor:pointer; color:var(--slate); font-weight:700; font-size:inherit; font-family:inherit; letter-spacing:.2px; border-radius:4px}
.lang-btn:hover{color:var(--ink)}
.lang-btn.is-active{color:var(--emberdark)}
.lang-btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

/* Hero secondary button — solid, so it stands out against the navy/charcoal gradient */
.btn-hero-alt{background:var(--oat); color:var(--charcoal); border:none; border-radius:999px; font-weight:600; padding:10px 22px}
.btn-hero-alt:hover{background:var(--white); color:var(--ink)}

/* Hero */
.hero{padding:150px 0 100px; background:linear-gradient(135deg,var(--navy) 0%,var(--charcoal) 100%); overflow:hidden}
.badge-pill{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--oat); background:rgba(244,241,236,.14); border-radius:999px; padding:8px 16px; margin-bottom:22px}
.badge-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--ember)}
.hero h1{font-size:clamp(32px,4.5vw,52px); line-height:1.1; color:var(--oat); margin-bottom:20px}
.hero .accent{color:var(--ember)}
.hero .lede{font-size:17px; color:#c7d2e6; max-width:520px; margin-bottom:32px}
.badge-emph{color:var(--teal); font-weight:700; display:inline-flex; align-items:center; gap:4px}
.badge-emph i{font-size:.95em}

.trust-trio{margin-top:4px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right, #000 92%, transparent 100%); mask-image:linear-gradient(to right, #000 92%, transparent 100%)}
.trust-trio > div{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#c7d2e6; white-space:nowrap; flex-shrink:0}
.trust-trio i{font-size:17px; color:var(--amber); flex-shrink:0}
@media (max-width:767.98px){
 .trust-trio{gap:.9rem !important}
 .trust-trio > div{font-size:12px; gap:7px}
 .trust-trio i{font-size:15px}
}

.badge-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center}
.badge-row img{display:block; height:20px}

/* Hero flow graphic — Your Data -> K3s-based pipeline (multicloud ready) -> Used for */
.flow-card{background:rgba(14,15,22,.55); border:1px solid rgba(244,241,236,.15); border-radius:22px; padding:26px 20px; box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cols{display:flex; align-items:flex-start; gap:2%}
.col{display:flex; flex-direction:column}
.col-sources{width:23%}
.col-pipeline{width:50%}
.col-outputs{width:23%}
.col-arrow{width:2%; display:flex; align-items:center; justify-content:center; color:#7a86a8; font-size:14px; padding-top:46px; will-change:color}
.col-h{font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#9fa7c2; text-align:center; margin-bottom:8px}
.col-h-brand{display:flex; align-items:center; justify-content:center; gap:5px; margin-bottom:10px}
.col-h-brand svg{width:15px; height:auto; flex-shrink:0; display:block}
.col-h-brand .wordmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:-.02em; color:var(--oat); white-space:nowrap}
.col-h-brand .wordmark b{color:var(--vf-clay); font-weight:700}
.pipe-enclosure{border:1px dashed rgba(244,241,236,.35); border-radius:12px; padding:8px}

/* generic node/pill, shared by sources / pipeline / outputs */
.node{background:rgba(244,241,236,.06); border:1px solid rgba(244,241,236,.16); border-radius:9px; padding:7px 3px 6px; text-align:center; font-size:8.5px; font-weight:600; color:#c7d2e6; will-change:transform,box-shadow}
.node svg{width:12px; height:12px; display:block; margin:0 auto 4px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.node.hl{background:linear-gradient(135deg,var(--ember),var(--amber)); color:var(--ink); border-color:transparent}
.node.hl svg{stroke:var(--ink)}

.src-grid,.pipe-grid,.out-grid{display:grid; grid-template-columns:1fr 1fr; gap:5px}

.k3s-wrap{margin-top:8px}
.k3s-ties{display:flex; justify-content:space-around; padding:0 14px}
.k3s-ties span{width:1px; height:8px; background:rgba(244,241,236,.25); will-change:background,opacity}
.k3s-bar{background:rgba(44,198,198,.1); border:1px solid rgba(44,198,198,.35); border-radius:9px; padding:6px 8px; display:flex; align-items:center; justify-content:center; gap:5px; will-change:transform,box-shadow}
.k3s-bar svg{width:12px; height:12px; stroke:var(--teal); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.k3s-bar b{color:var(--oat); font-size:9.5px; font-weight:700}
.cloud-wrap{margin-top:10px; text-align:center}
.cloud-label{font-size:8px; letter-spacing:1px; text-transform:uppercase; color:#9fa7c2; margin-bottom:6px; font-weight:600}
.cloud-row{display:flex; justify-content:center; gap:4px; flex-wrap:wrap; row-gap:5px}
.cloud-chip{display:inline-flex; align-items:center; gap:3px; background:rgba(244,241,236,.06); border:1px solid rgba(244,241,236,.16); border-radius:999px; padding:3px 6px; will-change:transform,box-shadow}
.cloud-chip svg{width:9px; height:9px}
.cloud-chip span{font-size:8px; font-weight:600; color:#dfe4f0}

.flow-caption{margin:18px 0 0; font-size:11.5px; color:#9fa7c2; text-align:center}

/* Chase animation: each element shares the same pulse shape, staggered by animation-delay */
@keyframes vf-node-pulse{
 0%,18%,100%{box-shadow:none; transform:scale(1)}
 6%,12%{box-shadow:0 0 0 4px rgba(255,133,32,.35),0 10px 24px rgba(255,90,31,.3); transform:scale(1.045)}
}
@keyframes vf-arrow-pulse{
 0%,18%,100%{color:#7a86a8}
 6%,12%{color:var(--amber)}
}
@keyframes vf-teal-pulse{
 0%,18%,100%{box-shadow:none; transform:scale(1); border-color:rgba(44,198,198,.35)}
 6%,12%{box-shadow:0 0 0 4px rgba(44,198,198,.3),0 10px 20px rgba(44,198,198,.25); transform:scale(1.03); border-color:var(--teal)}
}
@keyframes vf-tie-pulse{
 0%,18%,100%{background:rgba(244,241,236,.25)}
 6%,12%{background:var(--teal)}
}
@keyframes vf-chip-pulse{
 0%,18%,100%{box-shadow:none; transform:scale(1); border-color:rgba(244,241,236,.16)}
 6%,12%{box-shadow:0 0 0 3px rgba(244,241,236,.18); transform:scale(1.06); border-color:rgba(244,241,236,.4)}
}

.node{animation:vf-node-pulse 10.4s ease-in-out infinite}
.col-arrow{animation:vf-arrow-pulse 10.4s ease-in-out infinite}
.k3s-bar{animation:vf-teal-pulse 10.4s ease-in-out infinite}
.k3s-ties span{animation:vf-tie-pulse 10.4s ease-in-out infinite}
.cloud-chip{animation:vf-chip-pulse 10.4s ease-in-out infinite}

.src-grid .node:nth-child(1){animation-delay:0s}
.src-grid .node:nth-child(2){animation-delay:.4s}
.src-grid .node:nth-child(3){animation-delay:.8s}
.src-grid .node:nth-child(4){animation-delay:1.2s}
.arrow-1{animation-delay:1.6s}
.pipe-grid .node:nth-child(1){animation-delay:2s}
.pipe-grid .node:nth-child(2){animation-delay:2.4s}
.pipe-grid .node:nth-child(3){animation-delay:2.8s}
.pipe-grid .node:nth-child(4){animation-delay:3.2s}
.k3s-bar,.k3s-ties span{animation-delay:3.6s}
.cloud-chip:nth-child(1){animation-delay:4s}
.cloud-chip:nth-child(2){animation-delay:4.3s}
.cloud-chip:nth-child(3){animation-delay:4.6s}
.cloud-chip:nth-child(4){animation-delay:4.9s}
.arrow-2{animation-delay:5.3s}
.out-grid .node:nth-child(1){animation-delay:5.7s}
.out-grid .node:nth-child(2){animation-delay:6.1s}
.out-grid .node:nth-child(3){animation-delay:6.5s}
.out-grid .node:nth-child(4){animation-delay:6.9s}

@media (prefers-reduced-motion:reduce){
 .node,.col-arrow,.k3s-bar,.k3s-ties span,.cloud-chip{animation:none}
}

@media (max-width:575.98px){
 .cols{flex-direction:column; gap:14px}
 .col-sources,.col-pipeline,.col-outputs{width:100%}
 .col-arrow{width:100%; padding:0; transform:rotate(90deg)}
}

/* Quick Start — terminal-style command blocks */
.console{background:var(--ink); border-radius:14px; overflow:hidden; height:100%; box-shadow:0 12px 30px rgba(14,20,24,.12)}
.console-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:rgba(244,241,236,.06); border-bottom:1px solid rgba(244,241,236,.08)}
.console-bar span{width:10px; height:10px; border-radius:50%; background:rgba(244,241,236,.18)}
.console-bar span:nth-child(1){background:#FF5F56}
.console-bar span:nth-child(2){background:#FFBD2E}
.console-bar span:nth-child(3){background:#27C93F}
.console-bar b{margin-left:8px; font-size:12px; font-weight:600; color:#9fa7c2}
.console-body{margin:0; padding:18px 20px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.9; color:#dfe4f0; overflow-x:auto}
.console-body code{background:none; padding:0; font-size:1em}
.console-body .c-cmd{color:var(--vf-clay); font-weight:600}
.console-body .c-cmt{color:#6f7890}

/* Sections */
section{padding:88px 0}
section.alt{background:var(--white)}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--emberdark); margin-bottom:14px}
h2{font-size:clamp(26px,3vw,32px); margin-bottom:16px}
.section-lede{color:var(--slate); max-width:680px; margin-bottom:40px; font-size:16px}
.section-note{color:var(--slate); font-size:14px; margin:24px 0 0}

/* About */
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:7px 14px; border:1px solid #d7d1c4; border-radius:999px; color:var(--slate); background:var(--white)}
.pill svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; color:var(--emberdark)}

/* Architecture */
.arch-diagram{background:var(--white); border-radius:var(--radius); padding:28px; box-shadow:0 12px 30px rgba(14,20,24,.05)}
.arch-layer{display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:12px; margin-bottom:10px; background:var(--oat)}
.arch-layer .dot{width:12px; height:12px; border-radius:3px; flex-shrink:0}
.arch-layer.l1 .dot{background:var(--ember)} .arch-layer.l2 .dot{background:var(--mid)}
.arch-layer.l3 .dot{background:var(--amber)} .arch-layer.l4 .dot{background:var(--slate)}
.arch-layer .name{font-weight:600; font-size:14px; min-width:90px}
.arch-layer .desc{color:var(--slate); font-size:13.5px}

/* Features */
.feat-card{background:var(--oat); border-radius:16px; padding:28px; height:100%}
.feat-icon{width:40px; height:40px; border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 4px 12px rgba(14,20,24,.06)}
.feat-icon span{width:14px; height:14px; background:var(--ember); border-radius:4px; transform:rotate(15deg)}
.feat-card h3{font-size:17px; margin-bottom:8px}
.feat-card p{font-size:13.5px; color:var(--slate); margin:0}

/* Docs */
.doc-card{display:block; background:var(--oat); border-radius:14px; padding:22px; font-size:13.5px; text-decoration:none; height:100%; transition:transform .15s ease}
a.doc-card:hover{transform:translateY(-3px)}
.doc-card .tag{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--teal); margin-bottom:10px; letter-spacing:1px}
.doc-card h4{font-size:15px; margin-bottom:6px; color:var(--ink)}
.doc-card p{color:var(--slate); margin:0}

/* Inline "Apache" mark — feather icon wherever the Apache 2.0 license is named */
.apache-mark{display:inline-flex; align-items:center; gap:4px}
.apache-mark i{font-size:.9em}

/* Roadmap */
.road-item{background:var(--oat); border-radius:14px; padding:22px; height:100%}
.road-dot{width:14px; height:14px; border-radius:50%; margin-bottom:14px}
.road-item.done .road-dot{background:var(--ember)} .road-item.next .road-dot{background:var(--amber)} .road-item.later .road-dot{background:#d7d1c4}
.road-item h4{font-size:15px; margin-bottom:6px}
.road-item p{font-size:13px; color:var(--slate); margin:0}
.status{font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--slate)}

/* Community */
.comm-card{background:var(--white); border-radius:16px; padding:26px; height:100%}
.comm-card h4{font-size:16px; margin-bottom:8px}
.comm-card p{font-size:13px; color:var(--slate); margin-bottom:14px}
.comm-card a{display:inline-flex; align-items:center; gap:.4em; color:var(--emberdark); font-size:13px; text-decoration:none; font-weight:700}

/* Sponsors — single unified card: founder info + logo/badges, then contact */
.sponsor-box{background:var(--white); border-radius:18px; padding:36px; box-shadow:0 12px 30px rgba(14,20,24,.05)}
.sponsor-head{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.sponsor-box h4{display:flex; align-items:center; gap:10px; font-size:16px; margin-bottom:8px}
.sponsor-box h4 i{color:var(--emberdark); font-size:16px}
.sponsor-box p{color:var(--slate); font-size:13.5px; max-width:560px; margin-bottom:10px}
.sponsor-contact{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px}
.sponsor-contact a{display:inline-flex; align-items:center; gap:.4em; color:var(--emberdark); font-weight:700; font-size:13.5px; text-decoration:none}
.sponsor-logo-col{display:flex; flex-direction:column; align-items:center; gap:12px}
.sponsor-logo{display:flex; align-items:center; justify-content:center; border:1px solid #d7d1c4; padding:16px 22px; border-radius:12px; background:var(--white)}
.sponsor-logo img{display:block; width:145px; height:auto; max-width:100%}
.sponsor-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:220px}
.sponsor-badge{display:inline-flex; align-items:center; gap:6px; background:var(--oat); border:1px solid #e3ddce; border-radius:999px; padding:6px 12px; font-size:11.5px; font-weight:700; color:var(--emberdark); white-space:nowrap}
.sponsor-badge i{font-size:12px}
.sponsor-cta{margin:24px 0 0; font-size:14px; color:var(--slate)}

/* Bot-resistant email: injected via JS at runtime, never printed in the HTML source. */
.email-obf{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--emberdark)}

/* Footer */
footer{padding:56px 0 34px; background:linear-gradient(135deg,var(--navy) 0%,var(--charcoal) 100%); color:var(--oat)}
footer .navbar-brand{color:var(--oat); margin-bottom:12px}
.foot-tagline{font-size:13px; color:#B7C1DA; max-width:240px}
.foot-grid h5{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#8b93ac; margin-bottom:14px}
.foot-grid a{display:flex; align-items:center; gap:.5em; font-size:13.5px; color:#d7dbea; text-decoration:none; margin-bottom:10px}
.foot-grid a:hover{color:var(--oat)}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:#B7C1DA; border-top:1px solid rgba(244,241,236,.12); padding-top:24px; margin-top:16px}
.foot-bottom a{color:#dfe4f5; text-decoration:underline}

/* VektralForge Camp — speaker-invite card, sits in the footer grid next to Community */
.camp-banner{display:flex; flex-direction:column; gap:10px; height:100%; background:rgba(244,241,236,.06); border:1px solid rgba(244,241,236,.14); border-radius:16px; padding:20px 22px}
.camp-banner-head{display:flex; align-items:center; gap:10px}
.camp-banner i{font-size:20px; color:var(--amber); flex-shrink:0}
.camp-banner h5{font-family:'Space Grotesk'; font-weight:700; font-size:14.5px; text-transform:none; letter-spacing:normal; margin:0; color:var(--oat)}
.camp-banner p{font-size:12.5px; line-height:1.6; color:#c7d2e6; margin:0}
.camp-banner-mail{margin-top:auto !important}
.camp-banner .email-obf{font-size:13px; color:var(--amber)}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
}

@media (max-width:991.98px){
 .hero{padding:130px 0 70px}
}

.foot-disclaimer{font-size:11px; color:#B7C1DA; max-width:760px; margin:14px 0 0}