/* ============================================================
   SYNTAXA — section + component styles
   ============================================================ */

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(15,15,15,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
}
.nav .wrap{ display:flex; align-items:center; height:84px; gap:0; }
.brand{ display:inline-flex; align-items:center; line-height:0; }
.brand img{ display:block; height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:0; margin-left:110px; flex:1; }   /* logo → Products = 110px */
.nav-links > a:nth-of-type(1){ margin-left:auto; }   /* Platform: push right group toward Contact */
.nav-link + .nav-link{ margin-left:42px; }            /* Why we built it ← Platform */
.nav-link{ font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; cursor:pointer; }
.nav-link:hover{ color:#fff; }
.nav-link.brackets::before{ content:"["; color:#F5F5F5; }
.nav-link.brackets::after{ content:"]"; color:#F5F5F5; }
.nav .btn-o{ margin-left:110px; font-family:var(--font-mono); font-weight:500; font-size:14px; line-height:18px; letter-spacing:.8px; text-transform:uppercase; color:#F5F5F5; border-color:#F5F5F5; }   /* Why → Contact = 110px */

/* products dropdown */
.dropdown{ position:relative; }
.dropdown .trigger{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; cursor:pointer; }
.dropdown .trigger img{ display:block; width:17px; height:10px; transition:.2s; }
.dropdown.open .trigger img{ transform:rotate(180deg); }
.dropdown .menu{
  position:absolute; top:calc(100% + 14px); left:-20px; width:240px;
  background:#0c0c0c; border:1.5px solid var(--hairline);
  padding:10px; display:none; flex-direction:column;
}
.dropdown.open .menu{ display:flex; }
.dropdown .menu a{ display:flex; align-items:center; gap:12px; padding:16px 14px; border-bottom:1px solid #1d1d1d; font-size:19px; }
.dropdown .menu a:last-child{ border-bottom:0; }
.dropdown .menu a.setsumei{ color:var(--blue); font-family:var(--font-mono); }
.dropdown .menu a.runqc{ color:#e6e6e6; }
.dropdown .menu a:hover{ background:#161616; }

/* ---------------- HERO ---------------- */
.hero{ position:relative; padding:70px 0 60px; overflow:visible; }
.hero .mesh{ position:absolute; top:-4px; right:-60px; width:auto; height:1080px; max-width:none; pointer-events:none; opacity:.85; z-index:0; }
.hero .wrap{ position:relative; z-index:2; }
.hero-eyebrow{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.hero-eyebrow .bars{ display:block; width:37px; height:21px; }
.hero-eyebrow span{ font-family:var(--font-mono); font-weight:400; font-size:14px; line-height:21px; letter-spacing:.8px; text-transform:lowercase; color:#AAAAAA; }
.hero h1{ max-width:none; margin-bottom:48px; }
.hero-body{ max-width:820px; display:flex; flex-direction:column; gap:36px; font-size:24px; line-height:31px; letter-spacing:.5px; color:var(--text); }
.hero-body p{ margin:0; }
.hero-body .hl{ color:#e9e9e9; }
.hero .btns{ margin-top:54px; }
.hero .btn-o{ height:50px; padding:0 34px; font-family:var(--font-mono); font-weight:500; font-size:14px; line-height:18px; letter-spacing:.8px; text-transform:uppercase; color:#F5F5F5; border-color:#F5F5F5; }
.hero .btn-x{ height:50px; padding:0 34px; }
.hero .btn-t{ font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:21px; letter-spacing:.5px; text-transform:uppercase; }

/* hero terminal */
.term{
  position:absolute; top:230px; right:26px; width:560px; z-index:2;   /* anchored to .hero .wrap (padding-top 0); 230 + hero pad 70 = original 300 from hero top */
  background:#0a0a0a; border:1.5px solid #262626; padding:34px 36px;
  font-family:var(--font-mono); font-size:16px; line-height:1.85;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.term .ln{ white-space:pre-wrap; color:#cfcfcf; }
.term .cmd{ color:#e9e9e9; }
.term .blank{ height:1.85em; }
.t-blue{ color:var(--blue); } .t-green{ color:var(--green); }
.t-ok{ color:#AAAAAA; } .t-warn{ color:var(--warn); } .t-fail{ color:#cf5b4e; }
.term .cursor{ display:inline-block; width:9px; height:1.05em; background:var(--green-term); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0;} }
.hero-foot{ margin-top:120px; display:flex; align-items:center; gap:16px; }
.hero-foot .bars{ display:block; width:auto; height:21px; }
.hero-foot span{ font-family:var(--font-mono); font-size:14px; letter-spacing:.1em; color:#6a6a6a; }

/* ---------------- PRODUCT BLOCKS ---------------- */
.prodhead{ position:relative; display:inline-block; margin-bottom:0; }
.prod-tab{
  display:inline-flex; align-items:center; gap:14px; padding:36px;
  font-family:var(--font-mono); font-size:34px; font-weight:600; letter-spacing:.01em;
  border:1.5px solid; position:relative; top:1.5px; background:var(--bg);
}
.prod-tab.setsumei{ color:var(--blue); border-color:#4B71C6; border-width:4px 1px 0 1px; }
.prod-tab.setsumei .glyph{ color:var(--blue); }
.prod-tab.runqc{ color:#e9e9e9; border-color:#1E6B24; border-width:4px 1px 0 1px; }
.prod-tab img{ display:block; }

.prodblock{ position:relative; border:1.5px solid; padding:56px 54px; overflow:hidden; }
.prodblock.setsumei{ border:none; padding:0; overflow:visible; }
/* Left card: blue border + grid background, holds the text/list/button */
.prodblock.setsumei .inner > div:first-child{
  position:relative;
  min-height:960px;
  border:0.65px solid #4B71C6; padding:36px;
  background-image:url("../assets/grid.png");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* blue accent dot on the card's bottom-right corner */
.prodblock.setsumei .inner > div:first-child::after{
  content:""; position:absolute; right:0; bottom:0;
  width:20px; height:20px; border-radius:50%;
  background:#4A72C9; transform:translate(50%,50%);
}
/* Left card fixed at 840px; right column capped and pinned to the right edge */
.prodblock.setsumei .inner{
  grid-template-columns:minmax(0,1fr) 581px;
  gap:24px; align-items:stretch;
}
/* Right column: code on top, dependency graph anchored to the bottom (aligns with card) */
.prodblock.setsumei .inner > div:last-child{
  display:flex; flex-direction:column; gap:24px;
}
/* code box keeps its natural size */
.prodblock.setsumei .inner > div:last-child > .code{ flex-shrink:0; }
/* graph box fills the remaining height; border stays, only the image content clips */
.prodblock.setsumei .depgraph{
  flex:1 1 0; min-height:0; height:auto;
  object-fit:cover; object-position:top;
}
.prodblock.setsumei .depgraph{ margin-top:0; }
/* Setsumei card typography */
.prodblock.setsumei .mono-h.sm{ font-size:36px; line-height:100%; letter-spacing:.5px; color:#F5F5F5; }
.prodblock.setsumei .dim{
  font-family:var(--font-mono); font-weight:400;
  font-size:24px; line-height:31px; letter-spacing:.5px;
}
.prodblock.setsumei .kitem{ font-size:20px; line-height:31px; letter-spacing:.5px; }
/* consistent 64px vertical rhythm: after intro line, after list, after result paragraph */
.prodblock.setsumei .dim:has(+ .kgrid){ margin-bottom:64px; }
.prodblock.setsumei .kgrid{ margin-bottom:64px; }
.prodblock.setsumei .dim:has(+ .btns){ margin-bottom:64px; }
.prodblock.setsumei .btns{ margin-top:0; margin-bottom:36px; }
/* ============ RUNQC (mirror of setsumei, green) ============ */
.prodblock.runqc{ border:none; padding:0; overflow:visible; }
/* tab sits at the top-right */
#runqc{ display:block; text-align:right; }
/* columns: visuals left (fixed), content card right (flexible) */
.prodblock.runqc .inner{
  grid-template-columns:581px minmax(0,1fr);
  gap:24px; align-items:stretch;
}
/* content card: green border + grid background */
.prodblock.runqc .inner > div:last-child{
  position:relative; min-height:960px;
  border:0.65px solid #1E6B24; padding:36px;
  background-image:url("../assets/grid.png");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* green accent dot on the card's bottom-left corner */
.prodblock.runqc .inner > div:last-child::after{
  content:""; position:absolute; left:0; bottom:0;
  width:20px; height:20px; border-radius:50%;
  background:#1E6B24; transform:translate(-50%,50%);
}
/* left column: stats card on top, small grid below (shown in full) */
.prodblock.runqc .runqc-left{ gap:24px; }
.prodblock.runqc .runqc-stats-card{
  flex-shrink:0;
  border:0.5px solid #1E6B24; padding:36px;
}
.prodblock.runqc .runqc-stats-title{
  margin:0 0 48px;
  font-family:var(--font-mono); font-weight:400;
  font-size:20px; line-height:31px; letter-spacing:.5px;
  text-transform:uppercase; color:#AAAAAA;
}
.prodblock.runqc .runqc-grid{ flex:0 0 auto; width:auto; max-width:100%; height:auto; max-height:525px; border:0.5px solid #1E6B24; }
/* typography */
.prodblock.runqc .mono-h.sm{ font-size:36px; line-height:100%; letter-spacing:.5px; color:#F5F5F5; }
.prodblock.runqc .dim{ font-family:var(--font-mono); font-weight:400; font-size:24px; line-height:31px; letter-spacing:.5px; }
.prodblock.runqc .kitem{ font-size:20px; line-height:31px; letter-spacing:.5px; }
/* 64px vertical rhythm */
.prodblock.runqc .dim:has(+ .kgrid){ margin-bottom:64px; }
.prodblock.runqc .kgrid{ margin-bottom:64px; }
.prodblock.runqc .dim:has(+ .btns){ margin-bottom:64px; }
.prodblock.runqc .btns{ margin-top:0; margin-bottom:36px; }

.prodblock .inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }

/* code snippet */
.code{
  border:0.65px solid #4B71C6; background:rgba(10,10,12,.6); padding:28px 30px;
  font-family:var(--font-mono); font-size:15.5px; line-height:1.8; color:#cdd6e6;
  white-space:pre; overflow-x:auto;
}
.code .kw{ color:#7fa0e0; } .code .str{ color:#c79a6a; } .code .fn{ color:#cdd6e6; }

/* dependency graph (setsumei-grid-visual.svg) */
.depgraph{ display:block; width:100%; height:auto; margin-top:28px; border:0.65px solid #4B71C6; }

/* runqc visuals — real SVG assets */
.runqc-left{ display:flex; flex-direction:column; gap:36px; }
.runqc-stats{ display:block; width:100%; height:auto; }
.runqc-grid{ display:block; width:100%; height:auto; opacity:.9; }

/* ---------------- FLOW (UNDERSTAND→FIX→TEST→SHIP) ---------------- */
.flow{ display:flex; align-items:center; justify-content:center; gap:0; margin-top:56px; }
.flow .step{ flex:0 0 221px; white-space:nowrap; border:0.5px dashed; padding:20px 8px; text-align:center; font-family:var(--font-mono); font-weight:400; letter-spacing:.5px; font-size:24px; line-height:31px; color:#F5F5F5; }
.flow .step.b{ border-color:#4B71C6; } .flow .step.g{ border-color:#1E6B24; }
.flow .arrow{ flex:0 0 164px; display:flex; align-items:center; justify-content:center; color:#666; font-family:var(--font-mono); position:relative; z-index:3; margin-right:-36px; }
.flow .arrow.b{ color:var(--blue); } .flow .arrow.g{ color:var(--green); }
.flow .arrow .dash{
  flex:1; height:1px; border:0;
  background:repeating-linear-gradient(to right, currentColor 0 4px, transparent 4px 8px);
}
.flow .arrow .ah{
  flex:none; width:9px; height:9px; margin-left:-2px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg);
}

/* ---------------- "not another" cells ---------------- */
.cellgrid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.cell{
  --bc:#F5F5F5;
  border:0; padding:16px;
  font-family:var(--font-mono); font-weight:400; text-transform:uppercase; letter-spacing:.5px; font-size:24px; line-height:31px; color:#AAAAAA;
  background-image:
    repeating-linear-gradient(90deg,var(--bc) 0 3px,transparent 3px 6px),
    repeating-linear-gradient(90deg,var(--bc) 0 3px,transparent 3px 6px),
    repeating-linear-gradient(0deg, var(--bc) 0 3px,transparent 3px 6px),
    repeating-linear-gradient(0deg, var(--bc) 0 3px,transparent 3px 6px);
  background-size:100% .5px,100% .5px,.5px 100%,.5px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
}
.cell.on{ --bc:#F5F5F5; color:var(--orange-2); }

/* buyers panels */
.buyers .bhead{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:30px; color:var(--ink); padding:30px 36px; }
.buyers .panel:first-child .bhead{ background:url("../assets/code_block_buyers.png") center/cover no-repeat; }
.buyers .panel:last-child .bhead{ background:url("../assets/code-block 7.png") center/cover no-repeat; }
.buyers .bbody{ padding:10px 36px 30px; }

/* ---------------- CTA block ---------------- */
.cta{
  border:0; padding:36px;
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
  background-image:
    repeating-linear-gradient(90deg,#F5F5F5 0 6px,transparent 6px 12px),
    repeating-linear-gradient(90deg,#F5F5F5 0 6px,transparent 6px 12px),
    repeating-linear-gradient(0deg, #F5F5F5 0 6px,transparent 6px 12px),
    repeating-linear-gradient(0deg, #F5F5F5 0 6px,transparent 6px 12px);
  background-size:100% .5px,100% .5px,.5px 100%,.5px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
}
.cta .quote{ border:0.5px solid #A36236; padding:16px; max-width:577px; font-family:var(--font-mono); font-weight:400; text-transform:uppercase; letter-spacing:.5px; font-size:24px; line-height:31px; color:#AAAAAA; }
.cta .big{ font-family:var(--font-display); font-weight:700; font-size:36px; line-height:48px; letter-spacing:0; color:#F5F5F5; text-align:right; text-transform:uppercase; }
.cta .btn-o, .contact .btn-o{ color:#F5F5F5; border:1px solid #F5F5F5; padding:13px 24px; font-family:var(--font-mono); font-weight:500; font-size:16px; line-height:24px; letter-spacing:.8px; text-transform:uppercase; }
.cta .btn-o:hover, .contact .btn-o:hover, .nav .btn-o:hover, .hero .btn-o:hover{ background:#F5F5F5; color:#0c0c0c; border-color:#F5F5F5; }
.cta .meshbox{ display:block; width:100%; height:auto; margin-top:30px; }

/* ---------------- CONTACT ---------------- */
.contact{ position:relative; overflow:hidden; }
.contact .grid-floor{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; max-width:none; z-index:0; opacity:.5; pointer-events:none; }
.contact .wrap{ position:relative; z-index:2; }
.contact-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:end; }
.contact .cta-btns{ display:flex; flex-direction:column; gap:16px; width:530px; max-width:100%; margin-left:auto; }
.cylinder-wrap{ text-align:left; margin-top:40px; }
.cylinder-wrap img{ display:inline-block; width:auto; height:auto; max-width:100%; margin-left:24%; }
.squares{ display:flex; gap:14px; margin-top:60px; }
.squares i{ width:14px; height:14px; background:#F5F5F5; box-shadow:0 0 12px rgba(245,245,245,.6); }
.installer{ margin-top:48px; }
.installer img{ display:block; width:auto; max-width:100%; height:auto; }

/* ---------------- FOOTER ---------------- */
.footer{ position:relative; background:#101010; padding:90px 0 70px; overflow:hidden; }
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background:url("../assets/desktop/footer/webp/footer-grid-4x.webp") top center no-repeat;
  background-size:100% 100%; pointer-events:none;
}
.footer .wrap{ position:relative; z-index:2; }
.f-brand{ display:inline-flex; line-height:0; margin-bottom:16px; }
.f-brand img{ display:block; height:34px; width:auto; }
.f-tag{ font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:26px; letter-spacing:.5px; color:#AAAAAA; margin:0 0 36px; max-width:520px; }
.f-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:64px; }
.f-col h4{ font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:#F5F5F5; font-size:18px; margin:0 0 24px; }
.f-col a{ display:block; font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; margin-bottom:16px; }
.f-col a:hover{ color:var(--orange-3); }
.f-term{ margin-bottom:36px; font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; }
.f-term .em{ color:#8f8f8f; }
.f-copy{ margin-bottom:36px; font-family:var(--font-mono); font-weight:400; font-size:16px; line-height:26px; letter-spacing:.5px; text-transform:lowercase; color:#F5F5F5; }
.f-copy .gt{ color:var(--green-term); text-shadow:var(--glow-green); }
.f-social{ position:absolute; top:4px; right:var(--pad); display:flex; gap:16px; z-index:3; }   /* anchored to footer .wrap (padding-top 90) → 4 + 90 = original 94 from footer top */
.f-brand .f-logo-m{ display:none; }   /* mobile pixel wordmark, shown only under 1024px */
.f-social a{ display:inline-flex; align-items:center; opacity:.6; }
.f-social img{ display:block; height:26px; width:auto; }
.f-social a:hover{ opacity:1; }
.cookie{ margin:0; font-family:var(--font-mono); font-weight:400; font-size:12px; line-height:17px; letter-spacing:.8px; color:#AAAAAA; max-width:none; }