/* ============================================================
   SYNTAXA — homepage styles
   Type per Figma spec: Orbitron (titles), Roboto Mono (body/UI),
   Inter (proportional). Loaded via Google Fonts in syntaxa.html.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#0F0F0F;
  --panel:#141414;
  --panel-2:#171717;
  --hairline:#2a2a2a;

  /* ink */
  --ink:#F0F0F0;
  --text:#D2D2D0;
  --muted:#8A8A8A;
  --faint:#5f5f5f;
  --faint-2:#404040;

  /* accents */
  --orange:#A86A3C;
  --orange-2:#C47B3A;
  --orange-3:#E08A3E;
  --blue:#4A72C9;
  --blue-dim:#3a589c;
  --green:#3E9A4E;
  --green-bar:#1E6022;
  --green-term:#69a556;                 /* reused from index.html (--color-secondary-green) */
  --glow-green:0 0 11.06px #69a556, 0 0 5.53px #69a556;  /* index.html --shadow-default-glow */
  --warn:#E0B43E;

  /* type — per Figma spec: Orbitron (titles), Roboto Mono (body/UI), Inter (proportional) */
  --font-display:'Orbitron','Arial Narrow',sans-serif;
  --font-mono:'Roboto Mono','SFMono-Regular',monospace;
  --font-sans:'Inter','Helvetica Neue',Arial,sans-serif;

  --maxw:none;
  --pad:80px;
}

*{box-sizing:border-box;}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
html{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-mono); font-size:17px; line-height:1.55;
  font-weight:400; letter-spacing:.01em;
  min-width:1080px; overflow-x:clip;
}
::selection{ background:var(--orange-2); color:#0b0b0b; }
a{ color:inherit; text-decoration:none; }

/* layout helpers */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:80px 0; position:relative; }       /* 80 + 80 = 160px between sections */
.section--tight{ padding:80px 0; }

/* display type */
.display{
  font-family:var(--font-display);
  font-weight:900;               /* Orbitron Black */
  letter-spacing:-.02em; line-height:1.02;
  color:var(--ink); text-transform:uppercase;
  margin:0;
}
h1.display{ font-size:72px; line-height:79px; letter-spacing:-1.5px; }   /* Titles/Orbitron Black 72 */
h2.display{ font-size:clamp(38px,4vw,48px); font-weight:700; letter-spacing:0; line-height:1.06; } /* Orbitron Bold 48 */
h3.display{ font-size:36px; font-weight:700; letter-spacing:0; }  /* Orbitron Bold 36 */
.display .dim{ color:#AAAAAA; }

/* mono headings */
.mono-h{
  font-family:var(--font-mono); font-weight:400;
  text-transform:uppercase; letter-spacing:.5px;
  color:#F5F5F5; font-size:36px; line-height:48px; margin:0;
}
.mono-h.sm{ font-size:26px; line-height:1.25; }
.label{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.14em; font-size:14px; color:var(--muted);
}
.lede{ font-family:var(--font-mono); font-weight:400; font-size:24px; line-height:31px; letter-spacing:.5px; color:#F5F5F5; max-width:none; }
h2.display + .lede{ margin-top:64px; }   /* title → subtitle */
.dim{ color:var(--muted); }
.orange{ color:var(--orange-2); }
.blue{ color:var(--blue); }
.green{ color:var(--green); }

/* ---- section marker ---- */
.marker{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }   /* eyebrow → title */
.barcode{ display:block; height:21px; width:auto; flex:none; }
.barcode-combo{ display:inline-flex; align-items:center; gap:4px; flex:none; }
.barcode-combo img{ display:block; height:21px; width:auto; }
.marker .txt{ font-family:var(--font-mono); font-size:14px; letter-spacing:.12em; color:var(--muted); white-space:nowrap; }
.marker .txt b{ color:#bdbdbd; font-weight:500; }

/* ---- buttons ---- */
.btns{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

/* primary button — reuses index.html "join the waitlist" frame, recolored #A36236 */
.btn-x{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:500; font-size:14px; line-height:18px;
  letter-spacing:.8px; text-align:center; text-transform:uppercase;
  color:var(--ink); padding:16px 34px; border:0; background:transparent; cursor:pointer;
  background-image:url("../assets/syntaxa/primary-button-default.svg");
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  transition:color .18s ease;
}
.btn-x .c{ display:none; }   /* legacy corner spans no longer used */
.btn-x:hover{
  color:#fff;
  background-image:url("../assets/syntaxa/primary-button-hover.svg");
}

.btn-o{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); padding:18px 30px; border:1.5px solid var(--hairline);
  background:transparent; cursor:pointer; transition:.18s ease;
}
.btn-o:hover{ border-color:var(--orange-2); color:#fff; }
.btn-o.full{ width:100%; }
.btn-o.orange{ color:var(--orange-3); border-color:var(--orange-2); }
.btn-o.orange:hover{ background:var(--orange-3); color:#0c0c0c; border-color:var(--orange-3); }

.btn-t{ font-family:var(--font-mono); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--text); cursor:pointer; }
.btn-t:hover{ color:var(--orange-3); }

/* ---- panels ---- */
.panel{
  border:0; padding:36px;
  position:relative; background-color:transparent;
  background-image:
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 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;
}
.panel.solid{ border-style:solid; border-color:var(--hairline); }
.panel-label{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:15px; color:var(--muted); margin:0 0 26px;
}
/* Platform section panels (Structural Truth / Behavioral Confidence) */
#platform .panel-label{
  font-family:var(--font-mono); font-weight:400; text-transform:none;
  font-size:24px; line-height:31px; letter-spacing:.5px; color:#AAAAAA;
}
#platform .panel .mono-h.sm{ font-size:36px; line-height:100%; letter-spacing:.5px; }
#platform .panel .dim{
  font-family:var(--font-mono); font-weight:400;
  font-size:24px; line-height:31px; letter-spacing:.5px;
}
/* Card: 0.5px dashed border (3,3 dash pattern), 36px padding, 48px inner gap */
#platform .two-col{ gap:24px; }
#platform .panel{
  border:none; padding:36px;
  display:flex; flex-direction:column; gap:48px;
  background-image:
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 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;
}
#platform .panel > *{ margin:0; }
/* 160px gap below the two cards, before the Setsumei block */
#platform .prodhead{ margin-top:160px; }

/* extra bottom padding so the overlapping flow clears 160px to the next eyebrow */
#why{ padding-bottom:156px; }

/* Problem One / Problem Two cards (why both matter) */
#why .lede{ line-height:100%; margin-bottom:36px; }
#why .two-col{ margin-top:0; }
#why .two-col .panel{
  border:none; padding:36px;
  background-image:
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 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;
}
#why .two-col .panel-label{
  font-family:var(--font-mono); font-weight:400; text-transform:uppercase;
  font-size:24px; line-height:31px; letter-spacing:.5px; color:#AAAAAA;
  margin:0 0 36px;
}
#why .two-col .panel .mono-h.sm{
  font-size:36px; line-height:100%; letter-spacing:.5px; color:#F5F5F5;
  margin:0 0 24px;
}
#why .two-col .panel .dim{
  font-family:var(--font-mono); font-weight:400;
  font-size:24px; line-height:31px; letter-spacing:.5px; color:#AAAAAA;
  margin:0 0 24px;
}
#why .two-col .panel .blue,
#why .two-col .panel .green{
  font-family:var(--font-mono); font-weight:400;
  font-size:24px; line-height:31px; letter-spacing:.5px; margin:0;
}
#why .two-col .panel .blue{ color:#4B71C6; }

/* Control-layer card ("Without architecture intelligence ...") */
#why .ctrl{
  position:relative;
  border:none; padding:36px 36px 64px;
  display:flex; flex-direction:column; gap:36px;
  background-image:
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  #F5F5F5 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;
}
#why .ctrl-text{ display:flex; flex-direction:column; }
#why .ctrl-lines{
  font-family:var(--font-mono); font-weight:400;
  font-size:24px; line-height:31px; letter-spacing:.5px; color:#F5F5F5;
  margin:0 0 24px;
}
#why .ctrl-lines .dim{ color:#AAAAAA; }
#why .ctrl-together{
  font-family:var(--font-mono); font-weight:400;
  font-size:24px; line-height:31px; letter-spacing:.5px;
  text-transform:uppercase; color:#F5F5F5; margin:0 0 24px;
}
#why .ctrl-together .ar{ color:var(--orange-2); text-transform:none; }
/* flow straddles the card's bottom border (Figma overlap) */
#why .ctrl .flow{
  position:absolute; left:36px; right:36px; bottom:-24px;
  transform:translateY(50%); margin:0; z-index:2;
}
/* boxes: 0.5px dashed (4,4) border, opaque bg covers the card border where they overlap */
#why .ctrl .flow .step{
  --bc:#4B71C6;
  border:0; padding:36px;
  background-color:#0F0F0F;
  background-image:
    repeating-linear-gradient(90deg, var(--bc) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--bc) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg,  var(--bc) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg,  var(--bc) 0 4px, transparent 4px 8px);
  background-size:100% .5px, 100% .5px, .5px 100%, .5px 100%;
  background-position:0 0, 0 100%, 0 0, 100% 0;
  background-repeat:no-repeat;
}
#why .ctrl .flow .step.g{ --bc:#1E6B24; }

/* cursor-bullet list */
.curlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.curlist li{ position:relative; padding-left:30px; text-transform:uppercase; font-family:var(--font-mono); font-weight:400; font-size:24px; line-height:31px; letter-spacing:.5px; color:#F5F5F5; }
.curlist li::before{
  content:""; position:absolute; left:0; top:4px; width:14px; height:23px;
  background:url("../assets/cursor.svg") center/contain no-repeat;
}

/* numbered key grid */
.kgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.kgrid .row{
  position:relative;
  display:grid; grid-template-columns:subgrid; grid-column:1/-1;
  padding:18px 0;
  background-image:repeating-linear-gradient(90deg,var(--orange) 0 3px,transparent 3px 6px);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
}
.kgrid .row:first-child{ padding-top:0; }
/* orange end dots on each divider (same as product lists) */
.kgrid .row::before,
.kgrid .row::after{
  content:""; position:absolute; bottom:0;
  width:7px; height:7px; border-radius:50%; background:var(--orange);
}
.kgrid .row::before{ left:0; transform:translate(-50%,50%); }
.kgrid .row::after{ right:0; transform:translate(50%,50%); }
/* Setsumei structural list: 1px dashed blue dividers, 3,3 dash pattern */
.prodblock.setsumei .kgrid .row{
  position:relative;
  border-bottom:none; padding:22px 0;
  background-image:repeating-linear-gradient(90deg,#4B71C6 0 3px,transparent 3px 6px);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
}
/* blue dots on both ends of each dashed divider */
.prodblock.setsumei .kgrid .row::before,
.prodblock.setsumei .kgrid .row::after{
  content:""; position:absolute; bottom:0;
  width:7px; height:7px; border-radius:50%; background:#4B71C6;
}
.prodblock.setsumei .kgrid .row::before{ left:0; transform:translate(-50%,50%); }
.prodblock.setsumei .kgrid .row::after{ right:0; transform:translate(50%,50%); }
/* RunQC list: green dashed dividers with green end dots */
.prodblock.runqc .kgrid .row{
  position:relative;
  border-bottom:none; padding:22px 0;
  background-image:repeating-linear-gradient(90deg,#1E6B24 0 3px,transparent 3px 6px);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
}
.prodblock.runqc .kgrid .row::before,
.prodblock.runqc .kgrid .row::after{
  content:""; position:absolute; bottom:0;
  width:7px; height:7px; border-radius:50%; background:#1E6B24;
}
.prodblock.runqc .kgrid .row::before{ left:0; transform:translate(-50%,50%); }
.prodblock.runqc .kgrid .row::after{ right:0; transform:translate(50%,50%); }
.kitem{ font-family:var(--font-mono); text-transform:uppercase; font-size:20px; line-height:31px; letter-spacing:.5px; color:var(--ink); }

/* dotted divider */
.hr-dot{
  border:0; height:.5px; margin:48px 0 36px;
  background:repeating-linear-gradient(to right, #F5F5F5 0 7px, transparent 7px 14px);  /* dashes 7,7 */
}

/* grid texture bg */
.gridbg{
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:34px 34px; background-position:center;
}

/* asterisk decoration — real SVG assets */
.aster{
  display:inline-block; width:31px; height:30px; font-size:0; line-height:0;
  background:url("../assets/syntaxa/asterisk_orange.svg") center/contain no-repeat;
}
.aster.gray{
  width:36px; height:35px;
  background-image:url("../assets/syntaxa/asterisk-gray.svg");
}

/* utility */
.stack{ display:flex; flex-direction:column; }
.gap-16{ gap:16px;} .gap-24{ gap:24px;} .gap-32{ gap:32px;} .gap-48{ gap:48px;}
.mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;}
.mb-24{margin-bottom:24px;} .mb-32{margin-bottom:32px;} .mb-36{margin-bottom:36px;} .mb-48{margin-bottom:48px;}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:15px; color:var(--muted); margin:0 0 18px; }