:root{
  --home-hero-gradient:linear-gradient(135deg,var(--color-hero-a),var(--color-hero-mid-a) 34%,var(--color-hero-mid-b) 68%,var(--color-hero-b));
  --home-hero-radial:radial-gradient(circle at 74% 24%,var(--color-glass-high),transparent 34%);
  --home-button-gradient:linear-gradient(145deg,var(--color-hero-b),var(--color-accent));
  --home-panel-gradient:linear-gradient(145deg,var(--color-glass-high),var(--color-glass-low));
  --home-card-gradient:linear-gradient(145deg,var(--color-panel),var(--color-panel-soft));
  --home-icon-bg:rgba(0,199,168,.09);
  --home-device-dark:rgba(3,30,36,.25);
  --home-device-darker:rgba(3,30,36,.38);
  --home-power-light:rgba(255,255,255,.92);
  --home-route-current:rgba(53,240,200,.18);
  --home-grid-line:rgba(255,255,255,.08);
  --home-flag-radius:4px;
  --home-card-mark:rgba(10,110,117,.08);
}
.icon-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.flag-white{fill:var(--color-flag-white)}
.flag-red{fill:var(--color-flag-red)}
.flag-navy{fill:var(--color-flag-navy)}
.flag-blue{fill:var(--color-flag-blue)}
.flag-text{fill:var(--color-text)}
.home-hero{
  position:relative;
  display:grid;
  min-height:calc(100svh - var(--header-height));
  align-content:center;
  overflow:hidden;
  padding-top:clamp(38px,5.5vw,76px);
  padding-bottom:clamp(38px,5.5vw,76px);
  background:var(--home-hero-gradient);
  color:var(--color-hero-text);
}
.home-hero::before{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--home-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--home-grid-line) 1px,transparent 1px);
  background-size:44px 44px;
  content:"";
  opacity:.38;
  mask-image:linear-gradient(to bottom,transparent,var(--color-text),transparent);
}
.hero-glow{
  position:absolute;
  inset:0;
  background:var(--home-hero-radial);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(400px,.82fr) minmax(520px,1.18fr);
  align-items:center;
  gap:clamp(34px,5vw,76px);
}
.hero-copy{max-width:640px}
.hero-kicker{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  padding:4px 12px;
  border:1px solid var(--color-glass-line-soft);
  border-radius:var(--radius-pill);
  background:var(--color-nav-glass);
  color:var(--color-hero-muted);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
}
.hero-kicker-dot{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-hero-b);
  box-shadow:0 0 0 6px var(--home-route-current);
  animation:home-breathe 2.6s var(--ease) infinite;
}
.hero-copy h1{
  max-width:700px;
  margin-bottom:22px;
  color:var(--color-hero-text);
  font-size:clamp(36px,4vw,48px);
  line-height:1.03;
  letter-spacing:-.018em;
}
.hero-copy h1 span{
  color:var(--color-hero-text);
  text-shadow:0 7px 34px var(--color-button-shadow);
}
.hero-actions{margin-bottom:18px}
.hero-actions .btn-primary{
  background:var(--color-panel);
  color:var(--color-accent-dark);
  box-shadow:0 14px 36px var(--color-button-shadow);
}
.hero-actions .btn-primary:hover{
  background:var(--color-hero-text);
  color:var(--color-text);
}
.hero-actions .btn-secondary{
  border-color:var(--color-hero-a);
  background:var(--color-hero-a);
  color:var(--color-hero-text);
}
.hero-actions .btn-secondary:hover{
  border-color:var(--color-hero-text);
  background:var(--color-glass-high);
  color:var(--color-hero-text);
}
.hero-summary{
  max-width:610px;
  margin-bottom:15px;
  color:var(--color-hero-muted);
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.65;
}
.hero-summary strong{color:var(--color-hero-text)}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
}
.hero-pills span{
  display:inline-flex;
  min-height:27px;
  align-items:center;
  padding:3px 10px;
  border:1px solid var(--color-glass-line-soft);
  border-radius:var(--radius-pill);
  background:var(--color-glass-low);
  color:var(--color-hero-muted);
  font-family:var(--font-mono);
  font-size:10px;
}
.hero-platforms{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.hero-platforms a{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid var(--color-glass-line-soft);
  border-radius:var(--radius-pill);
  background:var(--color-nav-glass);
  color:var(--color-hero-text);
  font-size:12px;
  text-decoration:none;
  transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.hero-platforms a:hover{
  border-color:var(--color-glass-line);
  background:var(--color-glass-high);
  color:var(--color-hero-text);
  transform:translateY(-2px);
}
.platform-icon{
  display:grid;
  width:25px;
  height:25px;
  flex-shrink:0;
  place-items:center;
  border-radius:50%;
  background:var(--color-glass-high);
}
.platform-icon svg{width:13px;height:13px}
.hero-routes{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.hero-routes span{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  gap:6px;
  padding:3px 9px 3px 5px;
  border:1px solid var(--color-glass-line-soft);
  border-radius:var(--radius-pill);
  background:var(--color-glass-low);
  color:var(--color-hero-muted);
  font-size:11px;
}
.hero-routes svg,
.route-item svg{
  overflow:hidden;
  border:1px solid var(--color-flag-edge);
  border-radius:var(--home-flag-radius);
}
.hero-routes svg{width:27px;height:18px}
.hero-device{
  width:100%;
  perspective:1200px;
}
.client-window{
  position:relative;
  overflow:hidden;
  border:1px solid var(--color-glass-line);
  border-radius:var(--radius-xl);
  background:var(--home-panel-gradient);
  box-shadow:var(--shadow-float),inset 0 1px 0 var(--color-glass-high);
  backdrop-filter:blur(22px);
  transform:rotateY(-2deg) rotateX(1deg);
}
.client-chrome{
  display:grid;
  min-height:46px;
  grid-template-columns:80px 1fr 80px;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid var(--color-glass-line-soft);
  background:var(--home-device-dark);
}
.client-chrome > span{
  grid-column:2;
  color:var(--color-hero-muted);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-align:center;
}
.chrome-dots{
  display:flex;
  gap:7px;
}
.chrome-dots i{
  width:9px;
  height:9px;
  border-radius:50%;
}
.chrome-dots i:nth-child(1){background:var(--color-error)}
.chrome-dots i:nth-child(2){background:var(--color-warning)}
.chrome-dots i:nth-child(3){background:var(--color-success)}
.client-body{
  display:grid;
  min-height:390px;
  grid-template-columns:190px minmax(0,1fr);
}
.client-sidebar{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:21px 14px;
  border-right:1px solid var(--color-glass-line-soft);
  background:var(--home-device-dark);
}
.client-side-title{
  margin:0 7px 6px;
  color:var(--color-hero-faint);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
}
.route-item{
  display:grid;
  min-height:48px;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  color:var(--color-hero-muted);
  font-family:var(--font-mono);
  font-size:10px;
}
.route-item svg{width:32px;height:21px}
.route-item.is-current{
  border-color:var(--color-glass-line-soft);
  background:var(--home-route-current);
  color:var(--color-hero-text);
  box-shadow:inset 3px 0 0 var(--color-hero-b);
}
.connect-stage{
  position:relative;
  display:grid;
  overflow:hidden;
  place-items:center;
}
.connect-stage::before{
  position:absolute;
  inset:0;
  background:radial-gradient(circle,var(--home-route-current),transparent 47%);
  content:"";
}
.power-button{
  position:relative;
  z-index:4;
  display:grid;
  width:112px;
  height:112px;
  place-items:center;
  border:1px solid var(--color-glass-line);
  border-radius:50%;
  background:var(--home-button-gradient);
  color:var(--home-power-light);
  box-shadow:0 0 34px var(--color-accent),inset 0 1px 8px var(--color-glass-high);
}
.power-button svg{width:48px;height:48px}
.connection-ring{
  position:absolute;
  z-index:2;
  width:148px;
  height:148px;
  border:1px solid var(--color-wave);
  border-radius:50%;
  opacity:0;
  animation:home-wave 3.4s var(--ease) infinite;
}
.ring-two{animation-delay:1.1s}
.ring-three{animation-delay:2.2s}
.connect-caption{
  position:absolute;
  z-index:4;
  bottom:60px;
  color:var(--color-hero-muted);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
}
.client-status{
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 17px;
  border-top:1px solid var(--color-glass-line-soft);
  background:var(--home-device-darker);
  color:var(--color-hero-faint);
  font-family:var(--font-mono);
  font-size:9px;
}
.client-status span{
  display:flex;
  align-items:center;
  gap:7px;
}
.client-status i{
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-success);
}
.home-hero.motion-paused *,
.home-hero.motion-paused *::before,
.home-hero.motion-paused *::after{animation-play-state:paused!important}
.fact-strip{
  position:relative;
  z-index:2;
  border-bottom:1px solid var(--color-border);
  background:var(--color-panel);
}
.fact-strip-inner{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow-x:auto;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:9px;
  white-space:nowrap;
  scrollbar-width:none;
}
.fact-strip-inner::-webkit-scrollbar{display:none}
.fact-strip-inner span{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
}
.fact-strip-inner i{
  width:6px;
  height:6px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-accent);
}
.panel-index{
  margin-bottom:10px!important;
  color:var(--color-accent-dark)!important;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.09em;
}
.tab-panel h3{margin-bottom:18px}
.tab-panel p{line-height:1.85}
.feature-link{
  display:inline-flex;
  margin-top:12px;
  font-weight:650;
  text-decoration:none;
}
.platform-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.platform-card{
  position:relative;
  display:grid;
  min-height:100%;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  gap:0 18px;
  padding:30px;
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--home-card-gradient);
}
.platform-card::after{
  position:absolute;
  right:-22px;
  bottom:-38px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:var(--home-card-mark);
  content:"";
}
.platform-card-icon{
  display:grid;
  width:62px;
  height:62px;
  grid-row:1 / span 2;
  place-items:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--home-icon-bg);
  color:var(--color-accent-dark);
}
.platform-card-icon svg{width:29px;height:29px}
.platform-code{
  margin-bottom:4px;
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
}
.platform-card h3{
  margin-bottom:14px;
  font-size:29px;
}
.platform-card > p:not(.platform-code){
  grid-column:1 / -1;
  margin:20px 0 24px;
  color:var(--color-muted);
}
.platform-card .btn{
  z-index:1;
  width:max-content;
  grid-column:1 / -1;
}
.section-tail-link{
  margin-top:30px;
  text-align:right;
}
.section-tail-link a,
.text-link{
  font-weight:650;
  text-decoration:none;
}
.quickstart-section{
  background:var(--color-code-bg);
  color:var(--color-code-text);
}
.quickstart-layout{
  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
  gap:clamp(42px,7vw,92px);
}
.quickstart-intro{
  position:sticky;
  top:32px;
  align-self:start;
}
.quickstart-intro h2{color:var(--color-code-text)}
.quickstart-intro .lead{color:var(--color-hero-muted)}
.quickstart-intro .text-link{color:var(--color-hero-b)}
.step-list{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.step-list li{
  display:grid;
  grid-template-columns:94px minmax(0,1fr);
  gap:22px;
  padding:30px 0;
  border-top:1px solid var(--color-glass-line-soft);
}
.step-list li:last-child{border-bottom:1px solid var(--color-glass-line-soft)}
.step-code{
  color:var(--color-hero-b);
  font-family:var(--font-mono);
  font-size:11px;
}
.step-list h3{
  margin-bottom:10px;
  color:var(--color-code-text);
  font-size:25px;
}
.step-list p{
  margin:0;
  color:var(--color-hero-muted);
}
.ecosystem-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:26px;
}
.ecosystem-story h3{margin-bottom:22px}
.ecosystem-story p{
  color:var(--color-muted);
  line-height:1.9;
}
.ecosystem-notes{
  display:grid;
  gap:14px;
}
.ecosystem-note{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:17px;
  padding:24px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
}
.note-mark{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  background:var(--home-icon-bg);
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
}
.ecosystem-note h3{
  margin-bottom:9px;
  font-size:22px;
}
.ecosystem-note p{
  margin:0;
  color:var(--color-muted);
  font-size:15px;
}
.question-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.question-card{
  padding:26px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
}
.question-code{
  display:block;
  margin-bottom:12px;
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
}
.question-card h3{
  margin-bottom:12px;
  font-size:23px;
}
.question-card p{color:var(--color-muted)}
.question-card a{
  font-weight:650;
  text-decoration:none;
}
.article-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
}
.article-all-link{
  flex-shrink:0;
  margin-bottom:42px;
}
@keyframes home-breathe{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(1.12);opacity:1}
}
@keyframes home-wave{
  0%{transform:scale(.72);opacity:0}
  18%{opacity:.72}
  100%{transform:scale(1.9);opacity:0}
}
@media (max-width:1100px){
  .hero-grid{
    grid-template-columns:minmax(360px,.9fr) minmax(430px,1.1fr);
    gap:30px;
  }
  .client-body{grid-template-columns:155px minmax(0,1fr)}
  .client-sidebar{padding-inline:10px}
  .route-item{grid-template-columns:30px minmax(0,1fr);padding-inline:7px}
  .route-item svg{width:29px}
  .power-button{width:96px;height:96px}
}
@media (max-width:900px){
  .home-hero{
    min-height:auto;
    padding-top:48px;
    padding-bottom:54px;
  }
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{max-width:760px}
  .hero-device{
    max-width:700px;
    margin-inline:auto;
  }
  .ecosystem-layout{grid-template-columns:1fr}
}
@media (max-width:768px){
  .home-hero{
    padding-top:28px;
    padding-bottom:34px;
  }
  .hero-copy h1{
    margin-bottom:16px;
    font-size:clamp(26px,7.5vw,30px);
  }
  .hero-kicker{margin-bottom:12px}
  .hero-actions{margin-bottom:12px}
  .hero-summary{
    margin-bottom:12px;
    font-size:15px;
  }
  .hero-pills{margin-bottom:12px}
  .hero-platforms{margin-bottom:9px}
  .hero-platforms a{
    min-height:36px;
    padding:5px 9px;
  }
  .hero-routes span{
    min-height:27px;
    padding-right:7px;
    font-size:10px;
  }
  .hero-routes svg{width:24px;height:16px}
  .hero-device{display:none}
  .platform-grid,
  .question-grid{grid-template-columns:1fr}
  .quickstart-layout{grid-template-columns:1fr}
  .quickstart-intro{position:static}
  .article-heading{
    display:block;
  }
  .article-all-link{
    display:inline-flex;
    margin-top:-20px;
    margin-bottom:32px;
  }
}
@media (max-width:560px){
  .hero-copy h1 br{display:none}
  .hero-copy h1 span::before{content:" "}
  .hero-pills span{font-size:9px}
  .hero-platforms{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-platforms a{justify-content:flex-start}
  .hero-routes{gap:5px}
  .fact-strip-inner{min-height:50px}
  .platform-card{
    display:block;
    padding:24px;
  }
  .platform-card-icon{margin-bottom:16px}
  .platform-card > p:not(.platform-code){margin-top:14px}
  .step-list li{
    grid-template-columns:1fr;
    gap:8px;
    padding:24px 0;
  }
  .ecosystem-note{
    grid-template-columns:1fr;
  }
}
@media (max-width:360px){
  .hero-copy h1{font-size:28px}
  .hero-actions .btn{min-height:44px}
  .hero-routes span{padding-left:4px}
  .hero-routes svg{width:22px;height:15px}
}
@media (prefers-reduced-motion:reduce){
  .connection-ring{
    opacity:.45;
    animation:none;
  }
  .ring-one{transform:scale(1)}
  .ring-two{transform:scale(1.38)}
  .ring-three{display:none}
  .hero-kicker-dot{animation:none}
}