@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600&family=Reddit+Mono:wght@400;500&display=swap');
:root{
  --bg:#020202;
  --bg2:#101010;
  --surface:#151515;
  --text:#8A8380;
  --light:#EEEEEE;
  --muted:#4D4946;
  --accent:#FFA517;
  --line:#262626;
  --max:1300px;
  --r:4px
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Reddit Mono',monospace;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden
}
img{
  max-width:100%;
  height:auto;
  display:block
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit
}
.container{
  width:min(var(--max),calc(100% - 40px));
  margin:auto
}
.section{
  padding:100px 0
}
.section.alt{
  background:var(--bg2)
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--light);
  font-size:12px;
  margin-bottom:18px
}
.eyebrow:before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent)
}
h1,h2,h3{
  font-family:'Inclusive Sans',sans-serif;
  color:var(--light);
  font-weight:500;
  margin:0 0 18px
}
h1{
  font-size:clamp(50px,6vw,72px);
  line-height:1;
  letter-spacing:-4.5px
}
h2{
  font-size:clamp(34px,4vw,46px);
  line-height:1.1;
  letter-spacing:-3.2px
}
h3{
  font-size:24px;
  line-height:1.15;
  letter-spacing:-1px
}
.lead{
  max-width:720px;
  font-size:17px
}
.center{
  text-align:center
}
.center .eyebrow{
  justify-content:center
}
.center .lead{
  margin-inline:auto
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:10px 13px;
  border:1px solid var(--light);
  border-radius:var(--r);
  text-transform:uppercase;
  font-size:12px;
  font-weight:500;
  transition:.25s
}
.btn.primary{
  background:var(--light);
  color:#020202
}
.btn.primary:hover{
  background:transparent;
  color:var(--light)
}
.btn.ghost{
  color:var(--light);
  background:transparent
}
.btn.ghost:hover{
  background:var(--light);
  color:#020202
}
.btn .arrow{
  font-size:18px
}
.grid{
  display:grid;
  gap:18px
}
.g2{
  grid-template-columns:repeat(2,1fr)
}
.g3{
  grid-template-columns:repeat(3,1fr)
}
.g4{
  grid-template-columns:repeat(4,1fr)
}
.card{
  border:1px solid var(--line);
  background:#080808;
  padding:28px;
  border-radius:var(--r)
}
.card.light{
  background:var(--light);
  color:#38332f;
  border-color:var(--light)
}
.card.light h3,.card.light h2{
  color:#111
}
.icon{
  width:42px;
  height:42px;
  object-fit:contain;
  margin-bottom:24px
}
.num{
  font-size:12px;
  color:var(--accent);
  margin-bottom:12px
}
.image-frame{
  border:1px solid var(--line);
  padding:8px;
  background:#191919
}
.image-frame img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.chip{
  border:1px solid var(--line);
  padding:9px 12px;
  border-radius:999px;
  color:var(--light);
  font-size:12px
}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line)
}
.stat{
  padding:32px;
  border-right:1px solid var(--line)
}
.stat:last-child{
  border-right:0
}
.stat strong{
  display:block;
  font-family:'Inclusive Sans';
  font-size:42px;
  color:var(--light);
  letter-spacing:-2px
}
.faq{
  border-top:1px solid var(--line)
}
.faq-item{
  border-bottom:1px solid var(--line)
}
.faq-btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  background:none;
  border:0;
  color:var(--light);
  padding:20px 0;
  text-align:left;
  cursor:pointer
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
}
.faq-item.open .faq-answer{
  max-height:220px
}
.faq-answer p{
  margin:0 0 20px;
  max-width:900px
}
.page-hero{
  padding:150px 0 90px;
  background:radial-gradient(circle at 20% 10%,rgba(255,165,23,.08),transparent 28%),var(--bg2)
}
.cta-box{
  background:var(--light);
  color:#111;
  padding:44px;
  border-radius:var(--r);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.cta-box h2{
  color:#111;
  max-width:650px
}
.logo-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:25px;
  align-items:center
}
.logo-strip img{
  width:100%;
  height:40px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.4);
  opacity:.7
}
.hero{
  padding:135px 0 95px;
  position:relative;
  overflow:hidden
}
.hero:before{
  content:'';
  position:absolute;
  inset:-30% 0 auto;
  height:620px;
  background:radial-gradient(circle,rgba(255,165,23,.09),transparent 60%);
  pointer-events:none
}
.hero-inner{
  position:relative;
  text-align:center;
  z-index:1
}
.hero h1{
  max-width:980px;
  margin-inline:auto
}
.hero .lead{
  max-width:650px;
  margin:0 auto 24px
}
.hero-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap
}
.hero-dashboard{
  margin:65px auto 0;
  max-width:1080px;
  position:relative
}
.hero-dashboard:before{
  content:'';
  position:absolute;
  inset:-30px;
  border:1px solid rgba(255,165,23,.15);
  pointer-events:none
}
.hero-dashboard img{
  border:1px solid var(--line);
  width:100%
}
.feature-stack .feature-row{
  display:grid;
  grid-template-columns:80px 1fr 1.1fr;
  gap:24px;
  align-items:center;
  padding:28px 0;
  border-top:1px solid var(--line)
}
.feature-stack .feature-row:last-child{
  border-bottom:1px solid var(--line)
}
.feature-stack img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover
}
.pricing .card{
  display:flex;
  flex-direction:column;
  min-height:520px
}
.price{
  font-family:'Inclusive Sans';
  font-size:46px;
  color:var(--light);
  letter-spacing:-2px
}
.price small{
  font:400 14px 'Reddit Mono';
  color:var(--text)
}
.pricing ul{
  padding-left:18px
}
.pricing .btn{
  margin-top:auto
}
.team-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  margin-bottom:18px
}
.contact-options .card{
  min-height:180px
}
.contact-list{
  display:grid;
  gap:14px
}
.contact-list a{
  color:var(--light)
}
.map-placeholder{
  min-height:380px;
  background:linear-gradient(135deg,#171717,#090909);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--muted)
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important
  }
}
/* ===== Fidelity pass: original Elementor interaction + section DNA ===== */
body{
  background:#020202
}
.section{
  position:relative
}
.section-title-row{
  display:flex;
  justify-content:space-between;
  gap:36px;
  align-items:end;
  margin-bottom:38px
}
.section-title-row>div:first-child{
  max-width:720px
}
.section-title-row .section-copy{
  max-width:520px
}
.panel-white{
  background:#eee;
  color:#4e4e4e;
  border-radius:4px
}
.panel-white h2,.panel-white h3,.panel-white .eyebrow{
  color:#111
}
.panel-white .eyebrow:before{
  background:#ffa517
}
.panel-white .btn.primary{
  background:#111;
  color:#eee;
  border-color:#111
}
.panel-white .btn.primary:hover{
  background:#ffa517;
  border-color:#ffa517;
  color:#020202
}
.card,.feature-card,.process-card,.price-card,.blog-card,.team-card{
  transition:transform .4s cubic-bezier(.2,.65,.25,1),border-color .35s ease,background-color .35s ease,color .35s ease,box-shadow .35s ease
}
.card:hover,.feature-card:hover,.process-card:hover,.team-card:hover{
  transform:translateY(-5px);
  border-color:#eee
}
.card:hover h3,.feature-card:hover h3,.process-card:hover h3{
  color:#ffa517
}
.btn{
  position:relative;
  overflow:hidden
}
.btn:after{
  content:'';
  position:absolute;
  inset:0;
  background:#ffa517;
  transform:translateX(-102%);
  transition:transform .35s ease;
  z-index:0
}
.btn:hover:after{
  transform:none
}
.btn>*{
  position:relative;
  z-index:1
}
.btn.primary:hover,.btn.ghost:hover{
  border-color:#ffa517;
  color:#020202;
  background:transparent
}
.btn:not(:has(*)){
  z-index:1
}
.nav>a:not(.btn){
  position:relative
}
.nav>a:not(.btn):after{
  content:'';
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:1px;
  background:#ffa517;
  transition:right .25s ease
}
.nav>a:not(.btn):hover:after,.nav>a.active:not(.btn):after{
  right:0
}
.hero{
  min-height:760px;
  padding:165px 0 80px;
  background-image:linear-gradient(to bottom,rgba(2,2,2,.1),#020202 95%),url('../images/particle-background.png');
  background-size:cover;
  background-position:top center
}
.hero:before{
  background:radial-gradient(circle at 50% 25%,rgba(255,165,23,.07),transparent 38%)
}
.hero-dashboard{
  max-width:1120px;
  margin-top:72px
}
.hero-dashboard img{
  border:1px solid #343434;
  box-shadow:0 28px 90px rgba(0,0,0,.45)
}
.hero-dashboard:after{
  content:'';
  position:absolute;
  left:-2%;
  right:-2%;
  bottom:-25px;
  height:70%;
  background:linear-gradient(to bottom,transparent,#020202);
  pointer-events:none;
  opacity:.15
}
.logo-marquee{
  overflow:hidden;
  margin-top:28px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.logo-marquee .logo-item{
  width:185px;
  display:grid;
  place-items:center;
  padding:0 25px;
  flex:0 0 185px
}
.logo-marquee img{
  height:34px;
  width:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(1.5);
  opacity:.68;
  transition:.3s
}
.logo-marquee .logo-item:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.04)
}
.about-media{
  position:relative;
  margin-top:54px;
  border:1px solid #2d2d2d;
  background:#111;
  padding:8px
}
.about-media img{
  width:100%;
  max-height:540px;
  object-fit:cover
}
.video-chip{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:10px;
  background:#eee;
  color:#111;
  padding:10px 14px;
  border-radius:4px;
  font-size:11px;
  text-transform:uppercase
}
.video-chip .play{
  position:relative;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ffa517;
  display:grid;
  place-items:center;
  font-size:9px
}
.mosaic{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  grid-template-areas:'a b b' 'c c d';
  gap:18px
}
.mosaic-card{
  min-height:265px;
  border:1px solid #292929;
  background:#080808;
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:.4s
}
.mosaic-card:nth-child(1){
  grid-area:a
}
.mosaic-card:nth-child(2){
  grid-area:b;
  background:#eee;
  color:#444
}
.mosaic-card:nth-child(2) h3{
  color:#111
}
.mosaic-card:nth-child(3){
  grid-area:c
}
.mosaic-card:nth-child(4){
  grid-area:d
}
.mosaic-card:hover{
  transform:translateY(-5px);
  border-color:#eee
}
.mosaic-card .metric{
  font-family:'Inclusive Sans';
  font-size:62px;
  letter-spacing:-4px;
  color:#111
}
.mosaic-card.dark .metric{
  color:#eee
}
.mosaic-card .mini-ui{
  position:absolute;
  right:20px;
  bottom:18px;
  width:42%;
  height:88px;
  border:1px solid currentColor;
  opacity:.18
}
.mosaic-card .orb{
  width:13px;
  height:13px;
  background:#ffa517;
  border-radius:50%;
  margin-bottom:32px
}
.difference-panel{
  padding:70px 54px
}
.difference-grid{
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:70px
}
.difference-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px 42px
}
.difference-item{
  position:relative;
  padding-left:26px
}
.difference-item:before{
  content:'◆';
  position:absolute;
  left:0;
  top:2px;
  color:#ffa517;
  font-size:11px
}
.difference-item h3{
  font-size:19px;
  margin-bottom:9px
}
.difference-item p{
  font-size:13px;
  margin:0;
  color:#5b5755
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #262626;
  border-bottom:1px solid #262626
}
.process-card{
  min-height:270px;
  padding:28px 22px;
  border-right:1px solid #262626;
  position:relative
}
.process-card:last-child{
  border-right:0
}
.process-card:before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:#ffa517;
  transform:scaleX(0);
  transform-origin:left;
  transition:.35s
}
.process-card:hover:before{
  transform:scaleX(1)
}
.process-icon{
  width:42px;
  height:42px;
  border:1px solid #333;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#ffa517;
  margin:38px 0 34px;
  transition:.35s
}
.process-card:hover .process-icon{
  background:#ffa517;
  color:#020202;
  border-color:#ffa517;
  transform:rotate(8deg)
}
.why-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:center
}
.why-art{
  background:#282421;
  padding:32px
}
.why-art img{
  aspect-ratio:1/1;
  object-fit:cover
}
.why-list{
  border-top:1px solid #272727
}
.why-item{
  padding:18px 0;
  border-bottom:1px solid #272727
}
.why-item h3{
  font-size:18px;
  margin:0 0 7px
}
.why-item p{
  margin:0;
  font-size:13px
}
.why-item:hover h3{
  color:#ffa517
}
.stats{
  background:#080808
}
.stat{
  transition:.35s
}
.stat:hover{
  background:#101010
}
.stat strong{
  transition:.35s
}
.stat:hover strong{
  color:#ffa517;
  transform:translateY(-3px)
}
.testimonial-panel{
  padding:56px;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:58px
}
.quote-card{
  background:#050505;
  color:#8a8380;
  padding:42px;
  min-height:290px;
  position:relative;
  overflow:hidden
}
.quote-card:before{
  content:'“';
  font-family:serif;
  font-size:110px;
  position:absolute;
  right:22px;
  top:-20px;
  color:#ffa517;
  opacity:.13
}
.quote-card p{
  font-size:15px
}
.quote-person{
  color:#eee;
  margin-top:28px
}
.quote-person strong{
  display:block;
  font-family:'Inclusive Sans';
  font-size:18px;
  font-weight:500
}
.quote-dots{
  display:flex;
  gap:8px;
  margin-top:22px
}
.quote-dot{
  width:7px;
  height:7px;
  border:0;
  border-radius:50%;
  background:#393939;
  cursor:pointer
}
.quote-dot.active{
  background:#ffa517
}
.price-card{
  display:flex;
  flex-direction:column;
  min-height:560px;
  border:1px solid #2a2a2a;
  padding:28px;
  background:#060606
}
.price-card:hover{
  transform:translateY(-5px);
  border-color:#eee
}
.price-card.featured{
  background:#111;
  border-color:#aaa
}
.price-card .price{
  margin:22px 0
}
.price-card ul{
  list-style:none;
  padding:0;
  margin:20px 0 30px
}
.price-card li{
  padding:7px 0;
  border-bottom:1px solid #202020;
  font-size:12px
}
.price-card li:before{
  content:'•';
  color:#ffa517;
  margin-right:9px
}
.price-card .btn{
  margin-top:auto;
  justify-content:center
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.blog-card{
  border:1px solid #262626;
  background:#0b0b0b;
  overflow:hidden
}
.blog-card:hover{
  transform:translateY(-5px);
  border-color:#eee
}
.blog-thumb{
  height:205px;
  overflow:hidden;
  background:#171717
}
.blog-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease,filter .4s ease
}
.blog-card:hover .blog-thumb img{
  transform:scale(1.045);
  filter:saturate(1.12)
}
.blog-body{
  padding:20px
}
.blog-body h3{
  font-size:19px
}
.blog-meta{
  font-size:10px;
  text-transform:uppercase;
  color:#69625e;
  margin-bottom:12px
}
.faq-btn span{
  color:#ffa517;
  transition:transform .3s
}
.faq-item.open .faq-btn span{
  transform:rotate(45deg)
}
.faq-btn:hover{
  color:#ffa517
}
.faq-item{
  transition:border-color .3s
}
.faq-item:hover{
  border-color:#555
}
.cta-box{
  min-height:450px;
  align-items:flex-end;
  background:#eee;
  position:relative;
  overflow:hidden
}
.cta-box:before{
  content:'';
  position:absolute;
  width:250px;
  height:250px;
  border:1px solid rgba(255,165,23,.35);
  border-radius:50%;
  right:-70px;
  top:-90px
}
.cta-box>div{
  position:relative;
  z-index:1
}
.site-footer a{
  transition:color .25s,transform .25s
}
.site-footer a:hover{
  color:#ffa517
}
.footer-grid>div{
  transition:transform .35s
}
.footer-grid>div:hover{
  transform:translateY(-3px)
}
@media(max-width:992px){
  .mosaic{
    grid-template-columns:1fr 1fr;
    grid-template-areas:'a b' 'c d'
  }
  .difference-grid,.testimonial-panel,.why-layout{
    grid-template-columns:1fr
  }
  .process-grid{
    grid-template-columns:1fr 1fr
  }
  .process-card:nth-child(2){
    border-right:0
  }
  .section-title-row{
    align-items:start;
    flex-direction:column
  }
  .blog-grid{
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:768px){
  .hero{
    min-height:auto;
    padding-top:135px
  }
  .mosaic{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:'a' 'b' 'c' 'd'
  }
  .difference-panel{
    padding:34px 24px
  }
  .difference-grid,.difference-list{
    grid-template-columns:1fr
  }
  .process-grid{
    grid-template-columns:1fr
  }
  .process-card{
    border-right:0;
    border-bottom:1px solid #262626
  }
  .process-card:last-child{
    border-bottom:0
  }
  .testimonial-panel{
    padding:28px 20px
  }
  .blog-grid{
    grid-template-columns:1fr
  }
  .cta-box{
    min-height:360px
  }
}
.video-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  place-items:center
}
.video-modal.open{
  display:grid
}
.video-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(4px)
}
.video-dialog{
  width:min(820px,calc(100% - 30px));
  aspect-ratio:16/9;
  background:#080808;
  border:1px solid #3a3a3a;
  position:relative;
  z-index:1;
  box-shadow:0 30px 100px rgba(0,0,0,.65)
}
.video-close{
  position:absolute;
  right:12px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #444;
  background:#111;
  color:#eee;
  font-size:25px;
  z-index:3;
  cursor:pointer
}
.video-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  background:radial-gradient(circle at center,rgba(255,165,23,.11),transparent 35%),#070707
}
.video-placeholder .play{
  position:relative;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#ffa517;
  color:#111;
  display:grid;
  place-items:center
}
.quote-slide{
  animation:quoteIn .45s ease
}
@keyframes quoteIn{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:none
  }
}