/* Real brand mono, self-hosted on the Dazzl Webflow site (same font used live) */
  @font-face{

    font-family:'Maison Neue Mono';

    src:url('/assets/c6515990eb3543e4-6941705f3483a007a3bd7b6a_FontsFree-Net-Maison-Neue-Mono.ttf') format('truetype');

    font-weight:400;
font-style:normal;
font-display:swap;

  }

  :root{

    --black:#1E1E1E;
--dark-grey:#727272;
--light-grey:#D9D9D9;
--neon:#E7F6A0;
--white:#FFFFFF;

    --radius:14px;
--maxw:1160px;
--mono:'Maison Neue Mono','Courier New',monospace;

  }

  *{
box-sizing:border-box;
margin:0;
padding:0}

  html{
scroll-behavior:smooth}

  body{
font-family:'Inter',Arial,sans-serif;
background:var(--black);
color:var(--white);
-webkit-font-smoothing:antialiased;
line-height:1.6}

  img{
display:block;
max-width:100%}

  a{
color:inherit;
text-decoration:none}


  /* shared */
  .wrap{
max-width:var(--maxw);
margin:0 auto;
padding:0 28px}

  .section{
padding:96px 0}

  .eyebrow{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2.5px;
font-size:12px;
color:var(--neon);
display:inline-block;
margin-bottom:22px}

  .eyebrow.dark{
color:var(--black);
opacity:.7}

  h1,h2,h3{
font-weight:700;
letter-spacing:-.02em;
line-height:1.05;
color:var(--white)!important}

  p{
font-size:18px}

  .lead{
font-size:20px;
color:var(--light-grey);
max-width:62ch}


  /* Real brand button: matches the live main-btn class (2px radius, mono uppercase) */
  .btn{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--neon);
color:var(--black);
font-family:var(--mono);
font-weight:500;
font-size:13px;
letter-spacing:-.05em;
text-transform:uppercase;
line-height:1;
padding:10px;
border-radius:2px;
transition:transform .15s ease,filter .15s ease}

  .btn:hover{
transform:translateY(-1px);
filter:brightness(.96)}

  .btn:focus-visible{
outline:3px solid var(--white);
outline-offset:3px}

  .btn.ghost{
background:transparent;
color:var(--white);
border:1px solid rgba(255,255,255,.25)}

  .btn.ghost:hover{
border-color:var(--neon);
color:var(--neon)}

  .btn .arrow{
font-family:var(--mono);
font-size:13px}

  .btn-row{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:34px}


  /* placeholders */
  .ph{
background:#242424;
border:2px dashed rgba(255,255,255,.18);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:24px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.3px;
font-size:11px;
color:var(--dark-grey);
line-height:1.7}

  .ph.video{
position:relative}

  .ph.video::after{
content:"\25B6";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-160%);
font-size:26px;
color:rgba(231,246,160,.8)}

  .img-slot{
position:relative;
overflow:hidden;
border-radius:var(--radius);
background:#242424}

  .img-slot.light{
background:#efefef}

  .img-slot img{
display:block;
width:100%;
height:100%;
object-fit:cover}

  .img-slot.video::after{
content:"\25B6";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:26px;
color:rgba(231,246,160,.9);
z-index:2;
text-shadow:0 2px 12px rgba(0,0,0,.45)}

  .ba-card .balabel{
z-index:2}

  .proof-visual.img-slot{
border-left:1px solid rgba(255,255,255,.1);
border-radius:0;
min-height:300px}


  /* hero */
  .hero{
padding-top:84px;
padding-bottom:0}

  .hero h1{
font-size:clamp(2.5rem,6vw,5rem);
max-width:16ch;
margin-bottom:26px}

  .hero h1 .accent{
color:var(--neon)}

  .hero .lead{
margin-bottom:0}

  .hero-img{
margin-top:54px;
aspect-ratio:16/7;
line-height:1.8;
font-size:12px}


  /* stats */
  .stats{
padding:84px 0}

  .stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);
overflow:hidden}

  .stat{
background:var(--black);
padding:34px 26px}

  .stat .num{
font-size:clamp(2.4rem,5.2vw,4rem);
font-weight:700;
letter-spacing:-.03em;
line-height:1}

  .stat .num.neon{
color:var(--neon)}

  .stat .unit{
font-size:1rem;
font-weight:500;
color:var(--light-grey);
margin-left:4px}

  .stat .tag{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:var(--dark-grey);
margin-top:16px;
line-height:1.5}


  /* timeline (light) */
  .story{
background:var(--white);
color:var(--black)}

  .story .intro{
max-width:680px;
margin-bottom:48px}

  .story h2{
font-size:clamp(1.8rem,3.8vw,2.9rem);
margin-bottom:20px;
color:var(--black)!important}

  .story .intro p{
font-size:19px;
color:#2b2b2b}

  .tl{
display:grid;
gap:26px}

  .tl-row .tl-label{
display:flex;
justify-content:space-between;
align-items:baseline;
margin-bottom:10px}

  .tl-row .tl-who{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:12px;
color:var(--dark-grey)}

  .tl-row .tl-dur{
font-weight:700;
font-size:18px;
color:var(--black)}

  .tl-row.dz .tl-dur{
color:#3f6d00}

  .tl-bar{
display:flex;
height:50px;
border-radius:10px;
overflow:hidden;
border:1px solid var(--light-grey)}

  .seg{
display:flex;
align-items:center;
justify-content:center;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:.6px;
font-size:10.5px;
color:#2b2b2b;
border-right:1px solid rgba(255,255,255,.6);
padding:0 8px;
text-align:center;
line-height:1.3}

  .seg:last-child{
border-right:none}

  .seg.g1{
background:#ededed}
.seg.g2{
background:#e2e2e2}
.seg.g3{
background:#d6d6d6}
.seg.g4{
background:#c9c9c9}

  .seg.dz{
background:var(--neon);
color:#1E1E1E}

  .seg.live{
background:#f3f9da;
color:#6f7d3f}

  .tl-foot{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:.8px;
font-size:10.5px;
color:var(--dark-grey);
margin-top:18px;
line-height:1.6}

  .tl-save{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
background:var(--neon);
color:var(--black);
padding:18px 22px;
border-radius:var(--radius);
margin-top:22px}

  .tl-save .s1{
font-weight:700;
font-size:18px}

  .tl-save .s2{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px}


  /* before / after */
  .ba-head{
margin-bottom:42px}

  .ba-head h2{
font-size:clamp(1.7rem,3.6vw,2.8rem);
max-width:20ch}

  .ba-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px}

  .ba-card{
position:relative;
aspect-ratio:4/5;
font-size:11px;
letter-spacing:1.3px}

  .ba-card .balabel{
position:absolute;
top:16px;
left:16px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2px;
font-size:11px;
background:var(--black);
color:var(--white);
padding:7px 12px;
border-radius:999px}

  .ba-card.after .balabel{
background:var(--neon);
color:var(--black)}


  /* workflow (product in action) */
  .flow h2{
font-size:clamp(1.8rem,3.8vw,2.9rem);
max-width:18ch;
margin-bottom:14px}

  .flow .lead{
margin-bottom:42px}

  .flow-video{
aspect-ratio:16/9;
margin-bottom:42px;
font-size:12px}

  .flow-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px}

  .fstep{
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);
background:rgba(255,255,255,.04);
padding:24px 22px}

  .fstep .n{
font-family:var(--mono);
font-size:12px;
letter-spacing:2px;
color:var(--neon);
margin-bottom:14px}

  .fstep h3{
font-size:17px;
margin-bottom:8px}

  .fstep p{
font-size:14.5px;
color:var(--light-grey);
line-height:1.5}


  /* use cases */
  .uc{
background:var(--white);
color:var(--black)}

  .uc h2{
font-size:clamp(1.8rem,3.8vw,2.9rem);
max-width:18ch;
margin-bottom:42px;
color:var(--black)!important}

  .uc-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px}

  .uc-card{
border:1px solid var(--light-grey);
border-radius:var(--radius);
padding:28px;
background:#fafafa}

  .uc-card .k{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.5px;
font-size:11px;
color:#6f7d3f;
margin-bottom:12px}

  .uc-card h3{
font-size:19px;
margin-bottom:8px;
color:var(--black)!important}

  .uc-card p{
font-size:15px;
color:#555;
line-height:1.55}


  /* positioning band */
  .band{
background:var(--neon);
color:var(--black);
padding:90px 0}

  .band h2{
font-size:clamp(1.7rem,3.6vw,2.7rem);
max-width:20ch;
letter-spacing:-.02em;
line-height:1.15;
color:var(--black)!important}

  .band p{
font-size:18px;
color:rgba(30,30,30,.78);
max-width:60ch;
margin-top:20px}


  /* proof */
  .proof-card{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:0;
border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);
overflow:hidden}

  .proof-copy{
padding:48px 44px}

  .proof-copy .eyebrow{
margin-bottom:18px}

  .proof-copy blockquote{
font-size:clamp(1.4rem,2.6vw,2rem);
font-weight:700;
letter-spacing:-.02em;
line-height:1.2;
margin-bottom:22px;
color:var(--white)!important}

  .proof-copy .byline{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
color:var(--dark-grey)}

  .proof-copy .byline strong{
color:var(--white);
font-weight:500}

  .proof-copy .pnums{
display:flex;
gap:34px;
margin:30px 0 6px;
flex-wrap:wrap}

  .proof-copy .pnum b{
display:block;
font-size:30px;
font-weight:700;
letter-spacing:-.02em;
color:var(--neon)}

  .proof-copy .pnum span{
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:1.2px;
font-size:10.5px;
color:var(--dark-grey)}

  .proof-visual{
border-left:1px solid rgba(255,255,255,.1)}


  /* responsive */
  @media(max-width:900px){

    .proof-visual.img-slot{
border-left:none;
border-top:1px solid rgba(255,255,255,.1);
min-height:300px}

    .stats-grid{
grid-template-columns:repeat(2,1fr)}

    .flow-steps{
grid-template-columns:1fr 1fr}

    .uc-grid{
grid-template-columns:1fr}

    .proof-card{
grid-template-columns:1fr}

    .proof-visual{
border-left:none;
border-top:1px solid rgba(255,255,255,.1);
min-height:300px}

  }

  @media(max-width:720px){

    .section{
padding:64px 0}

    .ba-grid{
grid-template-columns:1fr}

    .flow-steps{
grid-template-columns:1fr}

    .seg{
font-size:9px}

  }

  @media(prefers-reduced-motion:reduce){
*{
transition:none!important;
scroll-behavior:auto!important}
}