/* ==========================================================================
   Stratyrix — stratyrix.com
   Palette derived from the phoenix mark: deep navy body, ember wings.
   ========================================================================== */

:root{
  --ink:      #101728;
  --navy:     #1D2640;
  --navy-2:   #2A3556;
  --slate:    #5C6683;
  --slate-lt: #8A93AB;
  --paper:    #FBFBFC;
  --mist:     #EFF1F6;
  --line:     #DDE1EA;
  --ember:    #D95A0C;
  --ember-lt: #FF7A24;
  --ember-wash:#FDF3EC;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }
a{ color:var(--ember); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:12px 18px;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:3px solid var(--ember); outline-offset:3px; border-radius:2px; }

/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--display); color:var(--ink); margin:0; letter-spacing:-.02em; }
h1{ font-weight:900; font-size:clamp(2.35rem, 5.2vw, 3.85rem); line-height:1.04; }
h2{ font-weight:800; font-size:clamp(1.7rem, 3.3vw, 2.4rem); line-height:1.14; }
h3{ font-weight:700; font-size:1.13rem; line-height:1.3; letter-spacing:-.01em; }

.eyebrow{
  font-family:var(--mono); font-size:.735rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ember);
  margin:0 0 14px;
}
.eyebrow-light{ color:var(--ember-lt); }

.lede, .section-lede{ color:var(--slate); font-size:1.075rem; max-width:60ch; }
.section-lede{ margin:16px 0 0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--body); font-weight:600; font-size:.95rem;
  background:var(--ember); color:#fff; text-decoration:none;
  padding:13px 24px; border-radius:6px; border:1.5px solid var(--ember);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ background:#c04f08; border-color:#c04f08; }
.btn:active{ transform:translateY(1px); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ background:var(--mist); border-color:var(--slate-lt); }
.btn-sm{ padding:9px 17px; font-size:.875rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,251,252,.88);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img{ width:38px; height:auto; }
.brand-word{
  font-family:var(--display); font-weight:900; letter-spacing:.055em;
  font-size:1.1rem; color:var(--navy);
}
.site-nav{ display:flex; align-items:center; gap:28px; }
.site-nav a{
  font-size:.925rem; font-weight:500; color:var(--slate); text-decoration:none;
}
.site-nav a:hover{ color:var(--navy); }
.site-nav a.btn{ color:#fff; }
.site-nav a.btn:hover{ color:#fff; }

/* ---------- hero ---------- */
.hero{
  padding:84px 0 92px;
  background:
    radial-gradient(1100px 520px at 88% 12%, var(--ember-wash) 0%, rgba(253,243,236,0) 62%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center; }
.hero-copy .lede{ margin:22px 0 0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }
.hero-note{
  margin:28px 0 0; padding-left:16px; border-left:3px solid var(--ember);
  font-family:var(--mono); font-size:.85rem; color:var(--slate); line-height:1.5;
}
.hero-figure{ display:flex; flex-direction:column; align-items:center; }
.figure-caption{
  font-family:var(--mono); font-size:.74rem; color:var(--slate-lt);
  text-align:center; margin:14px 0 0; max-width:38ch; line-height:1.55;
}

/* ---------- perimeter diagram ---------- */
.perimeter{ width:100%; max-width:520px; height:auto; }
.perimeter .boundary{
  fill:rgba(255,255,255,.7); stroke:var(--navy); stroke-width:2;
  stroke-dasharray:9 7;
}
.perimeter .node rect{ fill:#fff; stroke:var(--line); stroke-width:1.5; }
.perimeter .node-accent rect{ stroke:var(--ember); }
.perimeter .outside rect{ fill:var(--mist); stroke:var(--line); stroke-width:1.5; stroke-dasharray:4 4; }
.perimeter .t-node{ font-family:var(--display); font-weight:700; font-size:15px; fill:var(--ink); }
.perimeter .t-node-out{ font-family:var(--display); font-weight:700; font-size:15px; fill:var(--slate-lt); }
.perimeter .t-meta{ font-family:var(--mono); font-size:10.5px; fill:var(--slate-lt); }
.perimeter .t-label{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em; fill:var(--navy); }
.perimeter .blocked-line{ stroke:var(--slate-lt); stroke-width:2; stroke-dasharray:5 5; fill:none; }
.perimeter .blocked-mark circle{ fill:#fff; stroke:var(--ember); stroke-width:2; }
.perimeter .blocked-mark path{ stroke:var(--ember); stroke-width:2.2; stroke-linecap:round; fill:none; }
.perimeter .flow{
  stroke:var(--ember); stroke-width:1.8; fill:none; opacity:.6;
  stroke-dasharray:6 6; animation:march 1.6s linear infinite;
}
.perimeter .flow:nth-of-type(2){ animation-delay:-.55s; }
.perimeter .flow:nth-of-type(3){ animation-delay:-1.1s; }
@keyframes march{ to{ stroke-dashoffset:-12; } }
@media (prefers-reduced-motion: reduce){
  .perimeter .flow{ animation:none; stroke-dasharray:none; }
}

/* ---------- sections ---------- */
.section{ padding:88px 0; }
.section-alt{ background:var(--mist); border-block:1px solid var(--line); }

/* frameworks */
.frameworks{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.frameworks li{ background:var(--paper); padding:26px 24px 28px; }
.fw-tag{
  display:inline-block; font-family:var(--mono); font-weight:600; font-size:.78rem;
  letter-spacing:.1em; color:var(--ember); background:var(--ember-wash);
  padding:4px 9px; border-radius:4px; margin-bottom:12px;
}
.frameworks p{ margin:0; font-size:.945rem; color:var(--slate); line-height:1.6; }

/* stages */
.stages{ list-style:none; margin:48px 0 0; padding:0; counter-reset:none; }
.stages li{
  display:grid; grid-template-columns:82px 1fr; gap:28px;
  padding:30px 0; border-top:1px solid var(--line);
}
.stages li:last-child{ border-bottom:1px solid var(--line); }
.stage-num{
  font-family:var(--display); font-weight:900; font-size:2.1rem;
  color:var(--ember); opacity:.34; line-height:1;
}
.stage-body{ min-width:0; }
.stages p{ margin:9px 0 0; color:var(--slate); font-size:.99rem; max-width:66ch; }

/* engagement */
.engage-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.engage-grid .btn{ margin-top:28px; }
.engage-card{
  background:var(--navy); color:#EDEFF5; border-radius:12px; padding:32px 30px 28px;
}
.card-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember-lt); margin:0 0 20px;
}
.engage-card dl{ margin:0; }
.engage-card dt{
  font-family:var(--display); font-weight:700; font-size:.965rem; color:#fff; margin-top:18px;
}
.engage-card dt:first-of-type{ margin-top:0; }
.engage-card dd{ margin:4px 0 0; font-size:.9rem; color:#A9B2C9; line-height:1.55; }
.card-foot{
  margin:26px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.13);
  font-family:var(--mono); font-size:.76rem; color:#8A93AB;
}

/* about */
.about-grid{ display:grid; grid-template-columns:190px 1fr; gap:52px; align-items:start; }
.about-mark img{ width:150px; }
.role{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.05em;
  color:var(--slate); margin:8px 0 0;
}
.creds{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  max-width:640px;
}
.creds li{
  background:var(--mist); padding:14px 16px;
  font-family:var(--mono); font-size:.79rem; line-height:1.5; color:var(--navy);
}
@media (max-width: 620px){ .creds{ grid-template-columns:1fr; } }

.about-links{ margin:26px 0 0; font-size:.94rem; color:var(--slate-lt); }
.about-links a{ font-weight:500; }

/* contact */
.contact{ background:var(--ink); color:#fff; padding:92px 0; }
.contact-inner{ text-align:center; }
.contact h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.contact-lede{ color:#A9B2C9; margin:16px 0 0; }
.contact-lines{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; margin:38px 0 0;
}
.contact-line{
  font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,2.6vw,1.55rem);
  color:#fff; text-decoration:none; border-bottom:2px solid var(--ember);
  padding-bottom:4px; letter-spacing:-.01em;
}
.contact-line:hover{ color:var(--ember-lt); }

/* footer */
.site-footer{ background:var(--navy); color:#A9B2C9; padding:52px 0 40px; font-size:.895rem; }
.footer-inner{ display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; }
.footer-brand{ max-width:330px; }
.footer-brand img{ width:96px; margin-bottom:16px; }
.footer-brand p{ margin:0; line-height:1.6; }
.footer-meta{ text-align:right; }
.footer-meta p{ margin:0 0 7px; }
.site-footer a{ color:#D7DCE8; text-decoration:none; border-bottom:1px solid rgba(215,220,232,.3); }
.site-footer a:hover{ color:#fff; border-color:#fff; }
.copyright{ margin-top:16px !important; color:#6E7897; font-size:.82rem; }

/* legal pages */
.legal{ padding:64px 0 88px; max-width:760px; }
.legal h1{ font-size:clamp(1.9rem,4vw,2.6rem); }
.legal h2{ font-size:1.3rem; margin:44px 0 0; }
.legal p, .legal li{ color:var(--slate); font-size:1rem; }
.legal p{ margin:14px 0 0; }
.legal ul{ margin:14px 0 0; padding-left:22px; }
.legal li{ margin:7px 0; }
.legal .updated{ font-family:var(--mono); font-size:.8rem; color:var(--slate-lt); margin-top:10px; }
.legal .back{ display:inline-block; margin-bottom:28px; font-size:.9rem; text-decoration:none; }

/* ---------- responsive ---------- */
@media (max-width: 940px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero{ padding:64px 0 72px; }
  .engage-grid{ grid-template-columns:1fr; gap:40px; }
  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .about-mark img{ width:110px; }
  .frameworks{ grid-template-columns:repeat(2,1fr); }
  .site-nav a:not(.btn){ display:none; }
}
@media (max-width: 620px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .frameworks{ grid-template-columns:1fr; }
  .stages li{ grid-template-columns:1fr; gap:6px; }
  .stage-num{ font-size:1.5rem; }
  .footer-inner{ flex-direction:column; gap:32px; }
  .footer-meta{ text-align:left; }
  .contact{ padding:68px 0; }
  .hero-actions .btn{ flex:1 1 auto; text-align:center; }
}