/* SyxLabs Excel editorial + diagnostic system */
:root {
  --bg: #080907;
  --bg-2: #0d0f0b;
  --card: #11130f;
  --paper: #f0efe9;
  --muted: #a9aca3;
  --dim: #6d7067;
  --line: rgba(240, 239, 233, 0.16);
  --line-strong: rgba(240, 239, 233, 0.3);
  --signal: #c8ff3d;
  --signal-soft: rgba(200, 255, 61, 0.1);
  --amber: #f5bd45;
  --green: #78d89b;
  --max: 1280px;
  --pad: clamp(20px, 4vw, 64px);
  --display: "Outfit", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--signal) var(--bg); }
body.excel-page {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}
body.excel-page::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(#000, transparent 78%);
}
body.excel-page::after {
  position: fixed;
  z-index: -1;
  top: 8%;
  right: -18vw;
  width: 58vw;
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(200,255,61,.07);
  border-radius: 50%;
  box-shadow: inset 0 0 110px rgba(200,255,61,.025);
  animation: excel-orbit 32s linear infinite;
}
@keyframes excel-orbit { to { transform: rotate(360deg); } }
::selection { background: var(--signal); color: var(--bg); }

.excel-page .nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 82px;
  padding: 0 max(var(--pad), calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  transform: none;
  animation: none;
  transition: background .2s, border-color .2s;
}
.excel-page .nav.scrolled {
  border-color: var(--line);
  background: rgba(8,9,7,.94);
  backdrop-filter: blur(18px);
}
.excel-page .nav::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(200,255,61,.75), transparent);
  transform: translateX(-100%);
  animation: nav-scan 7s 1.2s ease-in-out infinite;
}
@keyframes nav-scan {
  0%, 72% { transform: translateX(-100%); opacity: 0; }
  80% { opacity: 1; }
  96% { transform: translateX(100%); opacity: 1; }
  100% { opacity: 0; }
}
.excel-page .nav-logo {
  width: 150px;
  height: 54px;
  display: block;
  overflow: hidden;
  background: url("/assets/syxlabs-wordmark-interlocking-clean.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  text-decoration: none;
}
.excel-page .logo-box { display: none; }
.excel-page .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.3vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.excel-page .nav-links a {
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  font: 600 10px var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.excel-page .nav-links a:hover { background: none; color: var(--paper); }
.excel-page .nav-cta-btn,
.excel-page .mag-btn.primary {
  min-height: 48px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--signal);
  border-radius: 0;
  background: var(--signal);
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  color: var(--bg);
  font: 700 11px var(--mono);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: .2s;
}
.excel-page .nav-cta-btn::after,
.excel-page .mag-btn.primary::after { content: "↗"; font-size: 16px; }
.excel-page .nav-cta-btn:hover,
.excel-page .mag-btn.primary:hover {
  border-color: var(--paper);
  background: var(--paper);
  box-shadow: none;
  transform: translateY(-2px);
}

.excel-page .seo-hero {
  position: relative;
  width: min(100%, var(--max));
  min-height: 760px;
  margin: 0 auto;
  padding: 164px var(--pad) 100px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(58px, 8vw, 120px);
  align-items: center;
  text-align: left;
}
.excel-page .seo-hero > :not(.excel-visual) { grid-column: 1; }
.excel-page .seo-hero .badge {
  align-self: end;
  justify-self: start;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--signal);
  font: 600 10px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.excel-page .seo-hero .badge::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 12px 3px 0;
  content: "";
  background: currentColor;
}
.excel-page .seo-hero h1 {
  max-width: 740px;
  margin: 0 0 28px;
  color: var(--paper);
  font-size: clamp(54px, 6.5vw, 96px);
  font-weight: 800;
  letter-spacing: -.064em;
  line-height: .91;
}
.excel-page .gradient-text {
  background: none;
  color: var(--signal);
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.excel-page .seo-hero p.lead {
  max-width: 660px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.52;
}
.excel-page .privacy-note {
  justify-self: start;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(17,19,15,.7);
  color: var(--muted);
  font: 500 9px/1.5 var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.excel-page .privacy-note .dot {
  width: 7px;
  height: 7px;
  background: var(--signal);
  box-shadow: 0 0 14px rgba(200,255,61,.7);
}

.excel-visual {
  position: relative;
  grid-column: 2 !important;
  grid-row: 1 / -1;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a08;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  box-shadow: 0 42px 100px rgba(0,0,0,.34);
}
.excel-visual::before {
  position: absolute;
  z-index: 4;
  inset: 14px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.055);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.excel-visual::after {
  position: absolute;
  z-index: 1;
  inset: -30% -10%;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, rgba(200,255,61,.08) 49%, transparent 64%);
  transform: translateX(-55%);
  animation: sheet-scan 6s ease-in-out infinite;
}
@keyframes sheet-scan { 55%, 100% { transform: translateX(55%); } }
.visual-meta {
  position: absolute;
  z-index: 5;
  top: 28px;
  right: 28px;
  left: 28px;
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font: 600 8px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.visual-meta .live { display: flex; align-items: center; gap: 8px; color: var(--signal); }
.visual-meta .live::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 13px currentColor;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: .3; } }
.sheet-stage {
  position: absolute;
  z-index: 2;
  top: 90px;
  right: 34px;
  bottom: 76px;
  left: 34px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: rgba(8,9,7,.9);
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
  transform-origin: center;
}
.sheet-bar {
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font: 600 8px var(--mono);
  letter-spacing: .08em;
}
.sheet-dots { display: flex; gap: 5px; }
.sheet-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }
.sheet-grid {
  position: absolute;
  inset: 42px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(7, 1fr);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 7);
}
.sheet-cell {
  align-self: center;
  width: 68%;
  height: 5px;
  margin-left: 15%;
  background: rgba(240,239,233,.13);
  transform-origin: left;
  animation: cell-data 4.6s ease-in-out infinite;
}
.sheet-cell.hot { background: var(--signal); box-shadow: 0 0 10px rgba(200,255,61,.35); }
.sheet-cell:nth-child(3n) { width: 36%; }
.sheet-cell:nth-child(4n) { animation-delay: -1.3s; }
.sheet-cell:nth-child(5n) { animation-delay: -2.6s; }
@keyframes cell-data { 0%, 100% { transform: scaleX(.42); opacity: .35; } 45%, 68% { transform: scaleX(1); opacity: 1; } }
.formula-line {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 88px;
  left: 18px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: rgba(8,9,7,.94);
  color: var(--muted);
  font: 500 9px var(--mono);
}
.formula-line strong { color: var(--signal); }
.system-output {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 2px solid var(--signal);
  background: var(--signal);
  color: var(--bg);
  font: 700 9px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.system-output span:last-child { font-size: 18px; }
.visual-progress {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
  font: 600 8px var(--mono);
}
.visual-progress i {
  height: 1px;
  flex: 1;
  overflow: hidden;
  background: var(--line);
}
.visual-progress i::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--signal);
  transform-origin: left;
  animation: progress-loop 5s ease-in-out infinite;
}
@keyframes progress-loop { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }

.excel-page .seo-wrap {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 var(--pad) 110px;
  counter-reset: excel-section;
}
.excel-page .seo-sec {
  position: relative;
  padding: clamp(70px, 9vw, 112px) 0;
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, .62fr);
  column-gap: clamp(44px, 8vw, 110px);
  border-top: 1px solid var(--line);
  counter-increment: excel-section;
}
.excel-page .seo-sec::before {
  position: absolute;
  top: 32px;
  left: 0;
  color: var(--signal);
  content: "0" counter(excel-section) " / SYSTEM";
  font: 600 9px var(--mono);
  letter-spacing: .12em;
}
.excel-page .seo-sec > h2 {
  grid-column: 1;
  grid-row: 1 / span 20;
  align-self: start;
  margin: 0;
  color: var(--paper);
  font-size: clamp(31px, 3.8vw, 48px);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1;
}
.excel-page .seo-sec > :not(h2) { grid-column: 2; }
.excel-page .seo-sec p {
  max-width: none;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.excel-page .seo-sec p strong,
.excel-page .seo-sec strong { color: var(--paper); }
.excel-page .seo-sec p a,
.excel-page .seo-related a,
.excel-page .check-result a:not(.mag-btn) { color: var(--signal) !important; text-underline-offset: 4px; }

.excel-page .seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.excel-page .seo-card {
  min-height: 220px;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: var(--bg-2);
  transition: background .2s, color .2s;
}
.excel-page .seo-card:hover { background: var(--signal); color: var(--bg); }
.excel-page .seo-card h3 { margin: 0 0 42px; color: inherit; font-size: 23px; line-height: 1.1; }
.excel-page .seo-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.excel-page .seo-card:hover p { color: rgba(8,9,7,.7); }
.excel-page .seo-steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.excel-page .seo-steps li {
  position: relative;
  min-height: 70px;
  padding: 20px 12px 20px 68px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  counter-increment: steps;
}
.excel-page .seo-steps li:first-child { border-top: 1px solid var(--line); }
.excel-page .seo-steps li::before {
  position: absolute;
  top: 20px;
  left: 12px;
  color: var(--signal);
  content: "0" counter(steps);
  font: 600 10px var(--mono);
}
.excel-page .seo-faq details {
  margin: 0;
  padding: 22px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.excel-page .seo-faq details:first-of-type { border-top: 1px solid var(--line); }
.excel-page .seo-faq summary { color: var(--paper); font-size: 17px; font-weight: 650; cursor: pointer; }
.excel-page .seo-faq details p { margin: 18px 0 0; font-size: 15px; }

.excel-page .check-section {
  display: block;
}
.excel-page .check-section::before { top: 30px; }
.excel-page .check-section > h2 {
  max-width: 780px;
  margin: 0 0 42px;
  font-size: clamp(36px, 5.5vw, 64px);
}
.excel-page .check-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 0 30px;
  border: 1px solid var(--line);
  background: var(--line);
}
.excel-page .check-item {
  min-height: 150px;
  margin: 0;
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 17px;
  border: 0;
  border-radius: 0;
  background: var(--bg-2);
  clip-path: none;
  outline: none;
  transition: background .2s, color .2s, box-shadow .2s;
}
.excel-page .check-item:hover,
.excel-page .check-item:focus-visible { background: #151812; box-shadow: inset 0 0 0 1px var(--signal); }
.excel-page .check-item.on {
  border-color: transparent;
  background: var(--signal);
}
.excel-page .check-box {
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: transparent;
  font: 800 14px var(--mono);
}
.excel-page .check-item.on .check-box {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--signal);
}
.excel-page .check-item .qtext { color: var(--muted); font-size: 15px; line-height: 1.6; }
.excel-page .check-item .qtext strong { color: var(--paper); }
.excel-page .check-item.on .qtext,
.excel-page .check-item.on .qtext strong { color: var(--bg); }
.excel-page .check-count {
  margin: 26px 0 18px;
  color: var(--dim);
  font: 600 10px var(--mono);
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}
.excel-page .check-count span { color: var(--signal); font-size: 18px; }
.excel-page .check-actions { text-align: center; }
.excel-page .check-result {
  margin-top: 28px;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--card);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.excel-page .check-result h3 { margin: 0 0 18px; color: var(--paper); font-size: clamp(26px, 4vw, 38px); letter-spacing: -.03em; }
.excel-page .check-result p { color: var(--muted); }
.excel-page .res-green { border-left: 3px solid var(--green); }
.excel-page .res-green h3 { color: var(--green); }
.excel-page .res-amber { border-left: 3px solid var(--amber); }
.excel-page .res-amber h3 { color: var(--amber); }
.excel-page .res-blue { border-left: 3px solid var(--signal); }
.excel-page .res-blue h3 { color: var(--signal); }

.excel-page .seo-sec:has(.seo-cta) { display: block; border: 0; }
.excel-page .seo-cta {
  position: relative;
  margin: 0;
  padding: clamp(48px, 8vw, 90px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--signal);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  color: var(--bg);
  text-align: left;
}
.excel-page .seo-cta::after {
  position: absolute;
  right: -8%;
  bottom: -70%;
  width: 340px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(8,9,7,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(8,9,7,.055), 0 0 0 88px rgba(8,9,7,.04);
}
.excel-page .seo-cta h2 { position: relative; z-index: 1; margin: 0 0 18px; color: var(--bg); font-size: clamp(42px, 6vw, 72px); letter-spacing: -.055em; }
.excel-page .seo-cta p { position: relative; z-index: 1; max-width: 660px; margin: 0 0 28px !important; color: rgba(8,9,7,.72) !important; font-size: 18px; }
.excel-page .seo-cta .mag-btn.primary { position: relative; z-index: 1; border-color: var(--bg); background: var(--bg); color: var(--paper); }
.excel-page .seo-cta .mag-btn.primary:hover { border-color: var(--bg); background: var(--paper); color: var(--bg); }
.excel-page .seo-related { display: grid; gap: 0; }
.excel-page .seo-related a {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 15px;
  text-decoration: none;
  transition: color .2s, padding-left .2s;
}
.excel-page .seo-related a:first-child { border-top: 1px solid var(--line); }
.excel-page .seo-related a::after { float: right; content: "↗"; color: var(--signal); font-family: var(--mono); }
.excel-page .seo-related a:hover { padding-left: 10px; color: var(--paper) !important; }
.excel-page .legal-note { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); color: var(--dim); font: 500 9px/1.7 var(--mono); letter-spacing: .04em; }

.excel-page .footer {
  padding: 58px var(--pad) 30px;
  border-top: 1px solid var(--line);
  background: #050604;
}
.excel-page .footer::before {
  display: block;
  width: 190px;
  height: 70px;
  margin: 0 auto 26px;
  content: "";
  background: url("/assets/syxlabs-wordmark-interlocking-clean.png") center / contain no-repeat;
}
.excel-page .footer-in {
  width: min(100%, var(--max));
  margin: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}
.excel-page .footer p,
.excel-page .footer-lnks a { color: var(--dim); font: 500 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.excel-page .footer-lnks { display: flex; gap: 22px; }
.excel-page .footer-lnks a { text-decoration: none; }
.excel-page .footer-lnks a:hover { color: var(--paper); }

.excel-motion-ready .seo-hero > :not(.excel-visual),
.excel-motion-ready .seo-sec,
.excel-motion-ready .check-item {
  opacity: 0;
  transform: translateY(24px);
}
.excel-motion-ready .seo-hero > .excel-visible,
.excel-motion-ready .seo-sec.excel-visible,
.excel-motion-ready .check-item.excel-visible {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.excel-motion-ready .check-item:nth-child(even) { transition-delay: .07s; }

@media (max-width: 1000px) {
  .excel-page .seo-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-top: 140px;
  }
  .excel-page .seo-hero > :not(.excel-visual) { grid-column: 1; }
  .excel-visual {
    grid-column: 1 !important;
    grid-row: auto;
    width: min(100%, 680px);
    min-height: 540px;
    margin-top: 54px;
  }
  .excel-page .seo-sec { grid-template-columns: 1fr; row-gap: 28px; }
  .excel-page .seo-sec > h2 { grid-column: 1; grid-row: auto; max-width: 760px; }
  .excel-page .seo-sec > :not(h2) { grid-column: 1; }
}

@media (max-width: 760px) {
  .excel-page .nav { height: 70px; }
  .excel-page .nav-logo { width: 124px; }
  .excel-page .nav-links { display: none; }
  .excel-page .nav-cta-btn { min-height: 40px; padding: 10px 14px; font-size: 9px; }
  .excel-page .seo-hero { padding-top: 122px; }
  .excel-page .seo-hero h1 { font-size: clamp(48px, 15vw, 70px); }
  .excel-visual { min-height: 460px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
  .sheet-stage { top: 78px; right: 20px; bottom: 66px; left: 20px; transform: none; }
  .visual-meta { top: 22px; right: 20px; left: 20px; }
  .visual-meta span:first-child { display: none; }
  .visual-progress { right: 20px; bottom: 22px; left: 20px; }
  .excel-page .check-list,
  .excel-page .seo-grid { grid-template-columns: 1fr; }
  .excel-page .check-item { min-height: 0; }
  .excel-page .seo-cta { padding: 46px 24px; }
  .excel-page .footer-in { flex-direction: column; gap: 18px; }
  .excel-page .footer-lnks { flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .excel-motion-ready .seo-hero > :not(.excel-visual),
  .excel-motion-ready .seo-sec,
  .excel-motion-ready .check-item { opacity: 1; transform: none; }
}