/* =========================================================
   MALINE NEXT / Applied AI Systems
   Page-specific layer. Keeps the core Maline visual language:
   paper, ink, coral, muted teal, editorial type + sharp rules.
   ========================================================= */

.mn-page{
  --mn-ink:#0d0f0f;
  --mn-paper:#f3f0e9;
  --mn-coral:#f15a24;
  --mn-teal:#315f5c;
  --mn-sand:#e8d7bf;
  --mn-line:rgba(243,240,233,.16);
  background:var(--mn-paper);
  color:var(--ink);
}
.header--dark{
  background:rgba(13,15,15,.88);
  border-color:rgba(243,240,233,.14);
  backdrop-filter:blur(14px);
}
.header--dark .button--ghost{
  color:var(--paper);
  border-color:rgba(243,240,233,.65);
}
.header--dark .menu-toggle{
  color:var(--paper);
  border-color:rgba(243,240,233,.65);
}

/* HERO */
.mn-hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:var(--mn-ink);
  color:var(--mn-paper);
  border-bottom:1px solid rgba(243,240,233,.15);
}
.mn-signal-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.84;
}
.mn-hero-gridlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(243,240,233,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,240,233,.035) 1px,transparent 1px);
  background-size:6.25vw 6.25vw;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2));
}
.mn-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  min-height:inherit;
  display:flex;
  flex-direction:column;
  padding-top:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(2rem,3vw,3rem);
}
.mn-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.mn-live{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(243,240,233,.55);
}
.mn-live i,
.mn-preview-status i{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:var(--mn-coral);
  box-shadow:0 0 0 0 rgba(241,90,36,.45);
  animation:mnPulse 1.8s ease-out infinite;
}
@keyframes mnPulse{
  0%{box-shadow:0 0 0 0 rgba(241,90,36,.5)}
  70%{box-shadow:0 0 0 .55rem rgba(241,90,36,0)}
  100%{box-shadow:0 0 0 0 rgba(241,90,36,0)}
}
.mn-hero-copy{
  margin:auto 0;
  max-width:100%;
  padding-block:clamp(4rem,7vw,8rem);
}
.mn-hero-copy h1{
  max-width:12ch;
  font-size:clamp(4.7rem,10.2vw,11.4rem);
  line-height:.76;
  letter-spacing:-.078em;
  font-weight:800;
}
.mn-hero-copy p{
  margin-top:clamp(1.8rem,3vw,3rem);
  max-width:42rem;
  font-size:clamp(1.08rem,1.55vw,1.48rem);
  line-height:1.32;
  color:rgba(243,240,233,.68);
}
.mn-hero-foot{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:end;
  padding-top:1.25rem;
  border-top:1px solid rgba(243,240,233,.16);
}
.mn-hero-foot>p{
  max-width:45rem;
  font-size:.72rem;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(243,240,233,.48);
}
.mn-hero-terminal{
  position:absolute;
  right:var(--gutter);
  top:clamp(7rem,17vh,11rem);
  width:min(24rem,28vw);
  min-height:9rem;
  padding:1rem;
  display:grid;
  align-content:space-between;
  border:1px solid rgba(243,240,233,.18);
  background:rgba(13,15,15,.42);
  backdrop-filter:blur(7px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  text-transform:uppercase;
}
.mn-hero-terminal span,
.mn-hero-terminal small{
  font-size:.58rem;
  letter-spacing:.14em;
  color:rgba(243,240,233,.42);
}
.mn-hero-terminal strong{
  font-size:clamp(.8rem,1vw,1rem);
  line-height:1.35;
  letter-spacing:.04em;
  color:var(--mn-sand);
}

/* SIGNAL RAIL */
.mn-signal-rail{
  overflow:hidden;
  background:var(--mn-coral);
  color:var(--mn-ink);
  border-bottom:1px solid rgba(13,15,15,.28);
}
.mn-signal-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:.68rem 0;
  animation:mnTicker 28s linear infinite;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mn-signal-track span{white-space:nowrap}
.mn-signal-track i{font-style:normal}
@keyframes mnTicker{to{transform:translateX(-50%)}}

/* INTRO */
.mn-intro{
  background:var(--mn-paper);
}
.mn-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(3rem,9vw,9rem);
  align-items:start;
}
.mn-intro-grid .h2{
  margin-top:1rem;
  max-width:10.5ch;
}
.mn-intro-copy{
  display:grid;
  gap:1.6rem;
  max-width:42rem;
  padding-top:.15rem;
}

/* SYSTEMS */
.mn-systems{
  background:var(--mn-ink);
  color:var(--mn-paper);
  padding:clamp(5rem,9vw,9rem) 0 clamp(6rem,10vw,10rem);
  overflow:clip;
}
.mn-systems-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr);
  gap:clamp(2rem,8vw,8rem);
  align-items:end;
  margin-bottom:clamp(3.2rem,6vw,5.5rem);
}
.mn-systems-head h2{
  margin-top:1rem;
  font-size:clamp(4rem,7.5vw,8rem);
  line-height:.8;
  letter-spacing:-.07em;
  max-width:10ch;
}
.mn-systems-head>p{
  max-width:32rem;
  color:rgba(243,240,233,.56);
  line-height:1.45;
}
.mn-systems-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(24rem,.95fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.mn-system-list{
  border-top:1px solid var(--mn-line);
}
.mn-system-row{
  position:relative;
  width:100%;
  min-height:clamp(6.2rem,8vw,8.3rem);
  display:grid;
  grid-template-columns:3.6rem 1fr minmax(8rem,.45fr) 2.5rem;
  gap:1rem;
  align-items:center;
  padding:0 .35rem;
  color:rgba(243,240,233,.72);
  border-bottom:1px solid var(--mn-line);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:color .28s var(--ease);
}
.mn-system-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--mn-paper);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .34s cubic-bezier(.2,.75,.2,1);
}
.mn-system-row:hover,
.mn-system-row.is-active{
  color:var(--mn-ink);
}
.mn-system-row:hover::before,
.mn-system-row.is-active::before{
  transform:scaleY(1);
}
.mn-system-number{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.64rem;
  letter-spacing:.08em;
  opacity:.58;
}
.mn-system-title{
  font-size:clamp(1.65rem,3vw,3.2rem);
  line-height:.94;
  letter-spacing:-.05em;
  font-weight:700;
  transition:transform .3s var(--ease);
}
.mn-system-row:hover .mn-system-title,
.mn-system-row.is-active .mn-system-title{
  transform:translateX(.45rem);
}
.mn-system-meta{
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  line-height:1.35;
  opacity:.58;
}
.mn-system-arrow{
  justify-self:end;
  font-size:1.5rem;
  transition:transform .3s var(--ease);
}
.mn-system-row:hover .mn-system-arrow,
.mn-system-row.is-active .mn-system-arrow{
  transform:translate(.25rem,-.25rem) rotate(10deg);
}
.mn-preview-wrap{
  position:sticky;
  top:calc(var(--nav-h) + 1.5rem);
}
.mn-preview{
  min-height:39rem;
  display:grid;
  grid-template-rows:auto minmax(20rem,1fr) auto auto;
  border:1px solid rgba(243,240,233,.18);
  background:#151818;
  overflow:hidden;
}
.mn-preview-bar{
  min-height:3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 .9rem;
  border-bottom:1px solid rgba(243,240,233,.14);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;
  letter-spacing:.1em;
  color:rgba(243,240,233,.52);
}
.mn-preview-status{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.mn-preview-status i{
  display:block;
}
.mn-preview-screen{
  position:relative;
  min-height:23rem;
  overflow:hidden;
  background:
    linear-gradient(rgba(243,240,233,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,240,233,.035) 1px,transparent 1px);
  background-size:2.25rem 2.25rem;
  border-bottom:1px solid rgba(243,240,233,.14);
}
.mn-preview-screen::after{
  content:"";
  position:absolute;
  left:0;right:0;top:-25%;
  height:18%;
  background:linear-gradient(to bottom,transparent,rgba(49,95,92,.24),transparent);
  animation:mnScan 4.8s linear infinite;
  pointer-events:none;
}
@keyframes mnScan{to{transform:translateY(700%)}}
.mn-preview-copy{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1.3rem;
  padding:1.2rem;
  border-bottom:1px solid rgba(243,240,233,.14);
}
.mn-preview-label{
  margin-bottom:.55rem;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--mn-coral);
}
.mn-preview-copy h3{
  font-size:clamp(1.75rem,2.5vw,2.8rem);
  line-height:.93;
  letter-spacing:-.045em;
}
.mn-preview-copy>p{
  color:rgba(243,240,233,.58);
  font-size:.86rem;
  line-height:1.45;
}
.mn-preview-features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.mn-preview-features span{
  min-height:3.1rem;
  display:flex;
  align-items:center;
  padding:.65rem .8rem;
  border-right:1px solid rgba(243,240,233,.12);
  border-bottom:1px solid rgba(243,240,233,.12);
  font-size:.63rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(243,240,233,.52);
}

/* Preview visual primitives */
.mn-viz{
  position:absolute;
  inset:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.mn-viz-tag{
  position:absolute;
  padding:.42rem .55rem;
  border:1px solid rgba(243,240,233,.2);
  background:rgba(13,15,15,.72);
  color:rgba(243,240,233,.68);
  font-size:.52rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mn-viz-dot{
  position:absolute;
  width:.7rem;height:.7rem;border-radius:50%;
  background:var(--mn-coral);
  box-shadow:0 0 0 .35rem rgba(241,90,36,.1);
}
.mn-viz-line{
  position:absolute;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(49,95,92,.2),rgba(49,95,92,.9),rgba(49,95,92,.12));
}
.mn-viz-card{
  position:absolute;
  padding:.7rem;
  border:1px solid rgba(243,240,233,.18);
  background:rgba(13,15,15,.76);
  color:var(--mn-paper);
  font-size:.58rem;
  line-height:1.35;
}
.mn-viz-card b{display:block;color:var(--mn-sand);font-size:.7rem}
.mn-viz-card em{font-style:normal;color:rgba(243,240,233,.42)}
.mn-bar{
  position:absolute;
  bottom:1.5rem;
  width:7%;
  background:var(--mn-teal);
  transform-origin:bottom;
  animation:mnBar 2.8s ease-in-out infinite alternate;
}
@keyframes mnBar{
  from{transform:scaleY(.35);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}
.mn-token-stream{
  position:absolute;
  inset:1.3rem;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:.35rem;
  align-content:center;
}
.mn-token-stream i{
  display:block;
  aspect-ratio:1;
  border-radius:.15rem;
  background:rgba(243,240,233,.07);
  animation:mnToken 2.4s ease-in-out infinite;
}
.mn-token-stream i:nth-child(3n){background:rgba(49,95,92,.55)}
.mn-token-stream i:nth-child(7n){background:rgba(241,90,36,.7)}
@keyframes mnToken{50%{transform:translateY(-.45rem);filter:brightness(1.5)}}
.mn-doc{
  position:absolute;
  width:22%;
  height:29%;
  border:1px solid rgba(243,240,233,.22);
  background:rgba(243,240,233,.04);
}
.mn-doc::before,.mn-doc::after{
  content:"";position:absolute;left:12%;right:12%;height:1px;background:rgba(243,240,233,.18)
}
.mn-doc::before{top:35%}.mn-doc::after{top:55%}
.mn-chat-core{
  position:absolute;
  left:50%;top:50%;
  width:28%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(232,215,191,.55);
  background:rgba(49,95,92,.26);
  color:var(--mn-sand);
  font-size:.66rem;
  letter-spacing:.08em;
  text-align:center;
}
.mn-flow-node{
  position:absolute;
  min-width:6.7rem;
  padding:.65rem .7rem;
  border:1px solid rgba(243,240,233,.2);
  background:rgba(13,15,15,.76);
  color:rgba(243,240,233,.72);
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.mn-flow-node::after{
  content:"";
  position:absolute;
  width:.4rem;height:.4rem;border-radius:50%;
  right:-.22rem;top:50%;
  background:var(--mn-coral);
}

/* CUSTOM SOFTWARE */
.mn-custom{
  background:var(--mn-paper);
  overflow:hidden;
}
.mn-custom-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);
  gap:clamp(2rem,8vw,8rem);
  align-items:end;
  margin-bottom:clamp(3.5rem,7vw,7rem);
}
.mn-custom-head .h2{
  margin-top:1rem;
  max-width:11ch;
}
.mn-custom-head>p{
  max-width:31rem;
  color:var(--muted);
}
.mn-architecture{
  position:relative;
  min-height:clamp(34rem,52vw,43rem);
  border:1px solid rgba(13,15,15,.16);
  background:
    linear-gradient(rgba(13,15,15,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,15,15,.04) 1px,transparent 1px);
  background-size:3rem 3rem;
  overflow:hidden;
}
.mn-architecture-core{
  position:absolute;
  left:50%;top:50%;
  width:clamp(12rem,19vw,17rem);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--mn-ink);
  background:var(--mn-ink);
  color:var(--mn-paper);
  z-index:3;
  box-shadow:0 2rem 5rem rgba(13,15,15,.18);
}
.mn-architecture-core span{
  font-size:.55rem;
  letter-spacing:.13em;
  opacity:.52;
}
.mn-architecture-core strong{
  margin:.45rem 0;
  font-size:clamp(1.8rem,3vw,3rem);
  letter-spacing:-.05em;
}
.mn-architecture-core small{
  max-width:11rem;
  font-size:.58rem;
  line-height:1.4;
  opacity:.48;
}
.mn-architecture-layer{
  position:absolute;
  width:min(24rem,31%);
  min-height:8.7rem;
  padding:1rem;
  display:grid;
  grid-template-columns:2.3rem 1fr;
  gap:.35rem .8rem;
  align-content:start;
  border:1px solid rgba(13,15,15,.18);
  background:rgba(243,240,233,.91);
  backdrop-filter:blur(6px);
  z-index:3;
  transition:transform .28s var(--ease),background .28s,color .28s;
}
.mn-architecture-layer:hover{
  transform:translateY(-5px);
  background:var(--mn-teal);
  color:var(--mn-paper);
}
.mn-architecture-layer span{
  grid-row:1/3;
  font-size:.62rem;
  letter-spacing:.09em;
  opacity:.55;
}
.mn-architecture-layer strong{
  font-size:clamp(1.35rem,2vw,2rem);
  line-height:1;
  letter-spacing:-.035em;
}
.mn-architecture-layer small{
  color:var(--muted);
  line-height:1.4;
}
.mn-architecture-layer:hover small{color:rgba(243,240,233,.62)}
.mn-architecture-layer--data{left:4%;top:7%}
.mn-architecture-layer--workflow{right:4%;top:7%}
.mn-architecture-layer--rules{left:4%;bottom:7%}
.mn-architecture-layer--infra{right:4%;bottom:7%}
.mn-architecture-lines{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  z-index:1;
  pointer-events:none;
}
.mn-architecture-lines path{
  fill:none;
  stroke:rgba(49,95,92,.5);
  stroke-width:1.4;
  stroke-dasharray:8 12;
  animation:mnDash 10s linear infinite;
}
@keyframes mnDash{to{stroke-dashoffset:-200}}
.mn-custom-bottom{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  margin-top:1.2rem;
}
.mn-custom-bottom p{
  min-height:10rem;
  padding:1.1rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  line-height:1.45;
}
.mn-custom-bottom strong{
  display:block;
  margin-bottom:.65rem;
  color:var(--ink);
  font-size:1.05rem;
}

/* OPEN */
.mn-open{
  padding:clamp(6rem,10vw,10rem) 0;
}
.mn-open-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2vw,2rem);
  align-items:start;
}
.mn-open-grid>.eyebrow{grid-column:1/4}
.mn-open-grid h2{
  grid-column:1/9;
  margin-top:1.5rem;
  font-size:clamp(4.4rem,8.6vw,9rem);
  line-height:.78;
  letter-spacing:-.07em;
}
.mn-open-copy{
  grid-column:9/-1;
  align-self:end;
  display:grid;
  gap:1.6rem;
  padding-bottom:.6rem;
}
.mn-open-copy p{
  color:rgba(243,240,233,.58);
  line-height:1.5;
}

/* Responsive */
@media(max-width:1100px){
  .mn-hero-terminal{width:20rem;right:2rem}
  .mn-systems-layout{grid-template-columns:1fr}
  .mn-preview-wrap{position:relative;top:auto}
  .mn-preview{min-height:34rem}
  .mn-system-row{grid-template-columns:3rem 1fr 10rem 2rem}
}
@media(max-width:820px){
  .mn-hero{min-height:auto}
  .mn-hero-inner{padding-top:3rem;padding-bottom:2rem}
  .mn-hero-copy{padding-block:5rem}
  .mn-hero-copy h1{font-size:clamp(4rem,16vw,7rem)}
  .mn-hero-terminal{display:none}
  .mn-hero-foot{grid-template-columns:1fr}
  .mn-intro-grid,
  .mn-systems-head,
  .mn-custom-head{grid-template-columns:1fr}
  .mn-system-row{
    grid-template-columns:2.6rem 1fr 2rem;
    min-height:6.5rem;
  }
  .mn-system-meta{display:none}
  .mn-preview-copy{grid-template-columns:1fr}
  .mn-architecture{
    min-height:auto;
    padding:1rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
  }
  .mn-architecture-core{
    position:relative;
    left:auto;top:auto;
    transform:none;
    grid-column:1/-1;
    width:min(13rem,55vw);
    justify-self:center;
    margin:1.5rem auto 2rem;
  }
  .mn-architecture-layer{
    position:relative;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:auto;
    min-height:9rem;
  }
  .mn-architecture-lines{display:none}
  .mn-custom-bottom{grid-template-columns:1fr}
  .mn-open-grid{display:block}
  .mn-open-grid h2{margin-top:1.4rem}
  .mn-open-copy{margin-top:2.3rem}
}
@media(max-width:560px){
  .mn-hero-top{align-items:flex-start}
  .mn-live{display:none}
  .mn-hero-copy h1{font-size:clamp(3.8rem,19vw,5.8rem)}
  .mn-systems{padding-top:4.5rem}
  .mn-system-title{font-size:1.65rem}
  .mn-preview{min-height:31rem}
  .mn-preview-screen{min-height:19rem}
  .mn-preview-features{grid-template-columns:1fr}
  .mn-architecture{grid-template-columns:1fr}
  .mn-architecture-core{grid-column:auto}
  .mn-signal-track{animation-duration:21s}
}
@media(prefers-reduced-motion:reduce){
  .mn-signal-track,
  .mn-preview-screen::after,
  .mn-live i,
  .mn-preview-status i,
  .mn-token-stream i,
  .mn-bar,
  .mn-architecture-lines path{
    animation:none!important;
  }
}