@font-face{font-family:'Plus Jakarta Sans';font-weight:400 700;font-display:swap;src:url("fonts/plus-jakarta-sans-latin.woff2") format('woff2')}
@font-face{font-family:'DM Sans';font-weight:300 700;font-display:swap;src:url("fonts/dm-sans-latin.woff2") format('woff2')}

html{scroll-behavior:smooth}
body{margin:0;background:#0A0A0A;color:#F0F5F0;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#09C449;text-decoration:none}
a:hover{color:#5BE38C}
img{max-width:100%}

@keyframes fdxPulse{0%,100%{opacity:.3}50%{opacity:1}}

.wrap{max-width:1360px;margin:0 auto}
.rule-top{border-top:1px solid #1A1F1A}
.accent{color:#09C449}
.ink{color:#F0F5F0}
.muted{color:#4E544E}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:3px;font-family:'DM Sans';font-weight:500;padding:15px 26px;font-size:15px;cursor:pointer}
.btn-sm{padding:10px 18px;font-size:13px;gap:8px}
.btn-lg{padding:16px 28px;font-size:16px}
.btn-primary{background:#09C449;color:#0A0A0A;border:0}
.btn-primary:hover{background:#5BE38C;color:#0A0A0A}
.btn-outline{border:1px solid #2A2F2A;color:#F0F5F0;background:transparent;padding:15px 24px}
.btn-outline:hover{border-color:#7E857E;color:#FFFFFF}
.btn-outline.btn-lg{padding:16px 28px}

/* Header */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(20px,4vw,56px);background:rgba(10,10,10,0.88);backdrop-filter:blur(14px);border-bottom:1px solid #1A1F1A}
.logo{height:20px;display:block;flex:none}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;justify-content:flex-end}
.nav-link{font:400 13px 'DM Sans';letter-spacing:0.01em;color:#7E857E}
.nav-link:hover{color:#FFFFFF}

/* Hero */
.hero{padding:clamp(56px,9vw,120px) clamp(20px,4vw,56px) clamp(40px,5vw,64px)}
.eyebrow-row{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid #1A1F1A}
.pulse-dot{width:5px;height:5px;border-radius:9999px;background:#09C449;animation:fdxPulse 3.2s ease-in-out infinite}
.eyebrow{font:400 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.14em;text-transform:uppercase;color:#7E857E}
.hero-title{margin:36px 0 0;font:600 clamp(38px,6.4vw,88px)/1.02 'Plus Jakarta Sans';letter-spacing:-0.042em;color:#FFFFFF;max-width:17ch;text-wrap:pretty}
.hero-lower{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,48px);align-items:end;padding-top:26px;border-top:1px solid #1A1F1A}
.hero-lede{margin:0;font:400 clamp(17px,1.5vw,20px)/1.65 'DM Sans';color:#8E958E;max-width:46ch}
.hero-ctas{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-meta{font:400 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.12em;text-transform:uppercase;color:#4E544E}

/* Demo */
.demo-section{padding:0 clamp(20px,4vw,56px) clamp(64px,9vw,120px)}
/* Capped at the video's native 1280px so it is never upscaled on wide screens.
   The footer meta line shares the cap to stay flush with the frame. */
.demo-inner{max-width:1280px}
/* Explicit ratio reserves the box before the video/poster loads — no layout shift. */
.demo-frame{position:relative;aspect-ratio:16/9;border:1px solid #2A2F2A;border-radius:4px;overflow:hidden;background:#0F110F}
.demo-video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#000;object-fit:contain}
.demo-fallback{margin:0;padding:24px;text-align:center;font:400 14px/1.6 'DM Sans';color:#C6CCC6}
.demo-idle{position:absolute;inset:0}
/* No dimming filter: the poster is now product UI, and the scrim below already
   darkens the top/bottom bands where the overlay text sits. */
.demo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.6) 0%,rgba(10,10,10,0.1) 40%,rgba(10,10,10,0.95) 100%)}
.demo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.4vw,32px)}
.demo-overlay-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mono-tag{font:400 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.16em;text-transform:uppercase}
.mono-tag.accent{color:#09C449}
.mono-tag.muted{color:#7E857E}
.demo-overlay-bottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:end}
.demo-caption{margin:0;font:400 clamp(15px,1.4vw,18px)/1.55 'DM Sans';color:#F0F5F0;max-width:50ch}
.play-btn{border:0;transition:background 180ms ease,transform 180ms ease}
.play-btn:hover{background:#5BE38C}
.play-btn:active{transform:scale(0.98)}
.play-icon{font-size:12px}
.demo-footer{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px;font:400 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.12em;text-transform:uppercase;color:#4E544E}

/* Narrow screens: the overlay's caption + CTA need ~223px, but a 16:9 frame is
   only ~198px tall here, which clipped the Play button. The media keeps 16:9
   and the caption/CTA stack beneath it instead. Restored to the overlaid
   composition once the video is playing (.is-playing) and above 640px. */
@media (max-width:640px){
  .demo-frame{aspect-ratio:auto}
  .demo-frame.is-playing{aspect-ratio:16/9}
  /* relative (not static) so the in-flow overlay still paints above the
     absolutely-positioned <video> behind it */
  .demo-idle{position:relative;z-index:1}
  .demo-idle picture{display:block;aspect-ratio:16/9}
  .demo-poster{position:static;display:block;width:100%;height:100%}
  .demo-scrim{display:none}
  /* the <picture> is the poster in this layout, so keep the video (and its own
     poster/controls) out of sight until it is actually playing */
  .demo-frame:not(.is-playing) .demo-video{visibility:hidden}
  .demo-overlay{position:static;gap:18px;padding:18px}
  .demo-overlay-bottom{grid-template-columns:1fr;gap:18px}
}
.rule-line{flex:1;height:1px;background:#1A1F1A;min-width:30px}

/* Shared section layout */
.section{padding:clamp(64px,9vw,120px) clamp(20px,4vw,56px)}
.grid-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,64px)}
.align-start{align-items:start}
.align-end{align-items:end}
.section-label{margin:0 0 18px;font:400 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.18em;text-transform:uppercase}
.h2{margin:0;font:600 clamp(28px,3.6vw,50px)/1.08 'Plus Jakarta Sans';letter-spacing:-0.032em;color:#FFFFFF;text-wrap:pretty}
.lede{margin:0;padding-top:8px;font:400 clamp(16px,1.4vw,18px)/1.75 'DM Sans';color:#8E958E}
.lede-flush{padding-top:0}

/* Pattern section */
.panel-grid{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:#1A1F1A;border:1px solid #1A1F1A;border-radius:4px;overflow:hidden}
.panel{background:#0A0A0A;padding:clamp(22px,2.6vw,34px)}
.panel.col{display:flex;flex-direction:column}
.micro-label{margin:0 0 20px;font:400 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.14em;text-transform:uppercase;color:#4E544E}
.quote{margin:0 0 22px;font:400 clamp(18px,1.8vw,23px)/1.45 'Plus Jakarta Sans';color:#FFFFFF;letter-spacing:-0.015em}
.kv-list{display:flex;flex-direction:column}
.kv-row{display:grid;grid-template-columns:minmax(120px,0.5fr) 1fr;gap:16px;padding:14px 0;border-top:1px solid #1A1F1A}
.kv-key{font:400 10px ui-monospace,monospace;letter-spacing:0.1em;text-transform:uppercase;color:#4E544E}
.kv-val{font:400 14px/1.5 'DM Sans';color:#C6CCC6}
.kv-val.muted{color:#4E544E}
.panel-footnote{margin:22px 0 0;font:400 15px/1.6 'DM Sans';color:#8E958E}
.num-list{display:flex;flex-direction:column}
.num-row{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid #1A1F1A}
.num-row-last{border-bottom:1px solid #1A1F1A}
.num{font:400 10px ui-monospace,monospace}
.num-label{font:400 15px 'DM Sans';color:#F0F5F0}
.num-tail{margin-left:auto;font:400 12px 'DM Sans';color:#4E544E;text-align:right}
.panel-callout{margin:auto 0 0;padding-top:24px;font:600 clamp(18px,1.8vw,22px)/1.35 'Plus Jakarta Sans';letter-spacing:-0.02em;color:#FFFFFF}

/* Operational Reality section */
.reality-card{margin-top:clamp(32px,4vw,52px);border:1px solid #2A2F2A;border-radius:4px;overflow:hidden;background:#0A0A0A}
.reality-card-header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid #1A1F1A}
.reality-card-title{display:flex;align-items:center;gap:12px}
.reality-card-title .mono-tag{letter-spacing:0.14em}
.symbol-icon{height:14px;display:block;opacity:0.85}
.reality-status{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font:400 10px ui-monospace,monospace;letter-spacing:0.12em;text-transform:uppercase;color:#4E544E}
.status-done{color:#09C449}
.status-active{color:#7E857E}
.reality-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:#1A1F1A}
.reality-col{background:#0A0A0A;padding:24px 22px}
.reality-col.alt{background:#0F110F}
.col-title{margin:0 0 3px;font:600 15px 'Plus Jakarta Sans';color:#FFFFFF}
.col-subtitle{margin:0 0 18px;font:400 10px ui-monospace,monospace;letter-spacing:0.1em;text-transform:uppercase;color:#4E544E}
.fact-list{display:flex;flex-direction:column;gap:14px}
.fact-list.gap-lg{gap:16px}
.fact{margin:0;font:400 14px/1.5 'DM Sans';color:#F0F5F0}
.fact-source{margin:4px 0 0;font:400 10px ui-monospace,monospace;letter-spacing:0.1em;text-transform:uppercase;color:#4E544E}
.fact-source.accent{color:#09C449}
.fact-source.muted{color:#7E857E}
.fact-caveat{margin:6px 0 0;font:400 13px/1.55 'DM Sans';color:#4E544E}
.tag-critical{display:inline-block;margin-bottom:7px;padding:3px 8px;border-radius:2px;border:1px solid rgba(239,68,68,0.3);font:500 9px ui-monospace,monospace;letter-spacing:0.12em;text-transform:uppercase;color:#EF4444}
.reality-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:#1A1F1A;border-top:1px solid #1A1F1A}
.stat{background:#0A0A0A;padding:16px 22px}
.stat-label{margin:0 0 6px;font:400 10px ui-monospace,monospace;letter-spacing:0.12em;text-transform:uppercase;color:#4E544E}
.stat-value{margin:0;font:500 15px 'DM Sans';color:#F0F5F0}
.stat-critical{color:#EF4444}
.stat-accent{color:#09C449}

/* How Fabe works (cream band) */
.works-section{background:#F0F1EC;color:#14170F}
.works-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid #D6D8CF}
.works-accent{font:400 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.18em;text-transform:uppercase;color:#4A7F58}
.works-rule{flex:1;height:1px;background:#D6D8CF;min-width:24px}
.works-muted{font:400 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.14em;text-transform:uppercase;color:#5F6459}
.works-h2{margin:34px 0 0;font:600 clamp(34px,4.6vw,66px)/1.04 'Plus Jakarta Sans';letter-spacing:-0.042em;color:#14170F}
.works-accent-strong{color:#0B7A34}
.works-grid{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border:1px solid #D6D8CF;border-radius:4px;overflow:hidden}
.work-card{background:#FBFBF8;padding:clamp(24px,2.6vw,34px);border-left:1px solid #D6D8CF;margin-left:-1px;display:flex;flex-direction:column;gap:14px;transition:background 200ms ease}
.work-card:hover{background:#FFFFFF}
.work-step{font:400 10px ui-monospace,monospace;letter-spacing:0.16em;text-transform:uppercase;color:#0B7A34}
.work-title{margin:0;font:600 clamp(20px,2vw,26px)/1.28 'Plus Jakarta Sans';letter-spacing:-0.025em;color:#14170F}
.work-body{margin:0;font:400 15px/1.7 'DM Sans';color:#54594C}
.work-footer{margin-top:auto;padding-top:18px;border-top:1px solid #D6D8CF;display:flex;flex-direction:column;gap:8px}
.hyp-row{display:flex;align-items:center;gap:12px}
.hyp-id{font:400 10px ui-monospace,monospace;color:#0B7A34}
.hyp-label{font:400 13px 'DM Sans';color:#33372C}
.work-footer-label{margin:0 0 10px;font:400 10px ui-monospace,monospace;letter-spacing:0.12em;text-transform:uppercase;color:#5F6459}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:6px 11px;border-radius:2px;border:1px solid #C9CCC0;font:400 12px 'DM Sans';color:#14170F}
.audience-list{gap:9px}
.audience-row{display:flex;align-items:baseline;gap:12px}
.audience-name{font:400 13px 'DM Sans';color:#14170F;min-width:132px}
.audience-need{font:400 12px 'DM Sans';color:#5F6459}
.works-callout{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 26px;border-left:2px solid #0B7A34;background:#FBFBF8}
.works-callout-title{margin:0;font:600 clamp(18px,1.8vw,24px)/1.3 'Plus Jakarta Sans';letter-spacing:-0.025em;color:#14170F}
.works-callout-sub{margin:0;font:400 15px 'DM Sans';color:#54594C}

/* Engagement CTA */
.cta-card{max-width:1360px;margin:0 auto;position:relative;border-radius:4px;overflow:hidden;border:1px solid #2A2F2A}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(45%) brightness(0.45)}
.cta-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,10,10,0.97) 0%,rgba(10,10,10,0.82) 50%,rgba(10,10,10,0.5) 100%)}
.cta-content{position:relative;padding:clamp(40px,7vw,88px) clamp(24px,4vw,60px);max-width:820px}
.cta-content .section-label{margin-bottom:18px}
.cta-content .h2{margin:0 0 18px}
.cta-lede{margin:0 0 30px;font:400 clamp(16px,1.4vw,18px)/1.7 'DM Sans';color:#C6CCC6;max-width:52ch}

/* Footer */
.site-footer{padding:40px clamp(20px,4vw,56px) 52px;border-top:1px solid #1A1F1A}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-logo{height:18px;display:block;opacity:0.75}
.footer-text{margin:0;font:400 12px 'DM Sans';color:#4E544E}