:root{
  --navy:#041322;
  --navy2:#071c30;
  --panel:#0b2238;
  --blue:#1498ff;
  --blue2:#55c7ff;
  --green:#62e63f;
  --text:#f5f9ff;
  --muted:#aab9c9;
  --line:rgba(120,190,255,.22);
  --shadow:0 25px 80px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--navy);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{width:min(1380px,calc(100% - 64px));margin:auto}
header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  height:88px;border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(3,14,25,.92),rgba(3,14,25,.15));
}
.nav{height:88px;display:flex;align-items:center;gap:42px}
.logo{display:flex;align-items:center;gap:11px;min-width:285px}
.logo-name{font-size:25px;font-weight:800;letter-spacing:.8px}
.logo-name span{color:var(--blue)}
.logo-sub{display:block;font-size:8px;letter-spacing:3px;color:#b7c7d7;margin-top:1px}
.navlinks{display:flex;gap:30px;font-size:14px;color:#d9e5f0;flex:1;justify-content:center}
.navlinks a:hover{color:var(--blue2)}
.nav-actions{display:flex;align-items:center;gap:22px;font-size:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:9px;font-weight:700;border:1px solid transparent;
  transition:.25s ease;cursor:pointer;
}
.btn-green{background:var(--green);color:#041108;box-shadow:0 0 30px rgba(98,230,63,.12)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(98,230,63,.25)}
.btn-outline{border-color:#607589;background:rgba(5,22,36,.35)}
.btn-outline:hover{border-color:var(--blue2);transform:translateY(-2px)}
.hero{
  min-height:790px;position:relative;display:flex;align-items:center;
  background:
   radial-gradient(circle at 72% 42%,rgba(0,143,255,.17),transparent 29%),
   radial-gradient(circle at 78% 85%,rgba(70,240,100,.08),transparent 24%),
   linear-gradient(135deg,#020d18 0%,#06182a 55%,#041323 100%);
}
.hero:before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(90,170,230,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,170,230,.055) 1px,transparent 1px);
  background-size:60px 60px;mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%);
}
.hero-content{position:relative;z-index:3;padding-top:80px;width:47%}
.eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--blue2);font-weight:800;margin-bottom:18px}
h1{font-size:clamp(48px,5.2vw,82px);line-height:.98;letter-spacing:-3px;margin:0 0 25px;font-weight:800}
h1 .blue{color:var(--blue)}
.hero-copy{font-size:19px;line-height:1.65;color:#c4d1de;max-width:590px;margin:0 0 32px}

.hero-buttons{
  display:flex;
  gap:25px;
  margin-bottom:10px;
}

.trust-row{
  display:flex;
  gap:30px;
  margin-top:0;
}

.trust{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:1px}
.trust i{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 13px var(--blue)}
.trust.green i{background:var(--green);box-shadow:0 0 13px var(--green)}
.trust.dark i{background:#d8e0e7;box-shadow:none}

.dealer-visual{
  position:absolute;right:-3%;top:115px;width:61%;height:610px;z-index:2;
  filter:drop-shadow(0 35px 45px rgba(0,0,0,.42));
}
.visual-grid{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(18,149,255,.11),transparent 58%);
}
.center-node{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:205px;height:205px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle,#123b5d 0,#082039 58%,#041322 61%);
  border:2px solid #27a9ff;
  box-shadow:0 0 0 10px rgba(20,152,255,.08),0 0 0 28px rgba(20,152,255,.035),0 0 55px rgba(20,152,255,.55);
}
.center-node:before,.center-node:after{
  content:"";position:absolute;border-radius:50%;inset:-18px;border:1px solid rgba(70,200,255,.35);
}
.center-node:after{inset:-34px;border-color:rgba(70,200,255,.12)}
.center-shield{font-size:42px;color:var(--green);display:block}
.center-title{font-weight:800;font-size:20px;letter-spacing:.6px}
.center-sub{font-size:9px;letter-spacing:2.5px;color:#b8d2e5;margin-top:3px}
.line{position:absolute;height:3px;background:linear-gradient(90deg,transparent,var(--blue),var(--green),transparent);transform-origin:left center;box-shadow:0 0 12px rgba(40,170,255,.7)}
.l1{left:49%;top:45%;width:330px;transform:rotate(-28deg)}
.l2{left:49%;top:48%;width:360px;transform:rotate(27deg)}
.l3{left:46%;top:54%;width:300px;transform:rotate(151deg)}
.l4{left:45%;top:58%;width:310px;transform:rotate(208deg)}
.l5{left:48%;top:57%;width:320px;transform:rotate(92deg)}
.pulse{position:absolute;width:9px;height:9px;border-radius:50%;background:white;box-shadow:0 0 18px 5px var(--blue);animation:pulse 2.2s infinite}
.p1{left:63%;top:36%}.p2{left:73%;top:53%}.p3{left:35%;top:67%}.p4{left:40%;top:39%}.p5{left:51%;top:70%}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.building{
  position:absolute;width:225px;height:135px;border:1px solid rgba(145,208,255,.55);
  background:linear-gradient(145deg,rgba(25,59,86,.86),rgba(7,25,42,.94));
  box-shadow:0 18px 30px rgba(0,0,0,.35),inset 0 0 30px rgba(40,150,255,.06);
  transform:skewY(-5deg) rotate(-1deg);
  overflow:hidden;
}
.building:before{
  content:"";position:absolute;inset:14px 14px 18px;
  background:repeating-linear-gradient(90deg,rgba(105,195,255,.15) 0 23px,transparent 23px 28px);
  border-bottom:1px solid rgba(120,200,255,.3)
}
.b-sales{left:4%;top:28%}.b-service{right:3%;top:21%}.b-parts{right:2%;top:59%}.b-fi{left:10%;top:63%}.b-accounting{left:42%;top:74%}.b-management{left:42%;top:4%}
.label{
  position:absolute;z-index:4;top:12px;left:15px;
  padding:8px 13px;border:1px solid rgba(45,169,255,.65);border-radius:7px;
  background:rgba(2,17,30,.82);font-size:12px;font-weight:800;letter-spacing:.7px;
  box-shadow:0 0 18px rgba(20,152,255,.12)
}
.label:before{content:"●";color:var(--green);margin-right:8px;font-size:9px}
.visual-caption{
  position:absolute;left:50%;bottom:1%;transform:translateX(-50%);
  color:#91a7ba;font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.stats{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  background:rgba(3,18,31,.86);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.stat{padding:21px 24px;border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat-number{font-size:25px;font-weight:800}.stat-label{font-size:11px;color:#91a7ba;text-transform:uppercase;letter-spacing:1px;margin-top:3px}
/* =========================================================
   DEALERNOC — HERO KPI + VALUE STRIPS
   Goal-style presentation: colorful, polished, automotive SaaS
========================================================= */

.dn-kpi-strip{
  position:absolute;
  bottom:205px;
  left:50%;
  right:auto;
  width:min(1400px,calc(100% - 72px));
  transform:translateX(-50%);
  border:1px solid rgba(100,195,255,.38);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(14,48,78,.92),rgba(5,27,48,.94));
  box-shadow:
    0 20px 55px rgba(0,0,0,.34),
    0 0 45px rgba(20,152,255,.08);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

.dn-kpi-strip .stats-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.dn-kpi-strip .stat{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:17px;
  padding:16px 22px;
  border-right:1px solid rgba(145,210,255,.22);
}

.dn-kpi-strip .stat:last-child{
  border-right:0;
}

.stat-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stat-icon svg{
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stat-icon-blue{color:#18c5ff}
.stat-icon-green{color:#63e83f}
.stat-icon-red{color:#ff543c}

.dn-kpi-strip .stat-copy{
  min-width:0;
}

.dn-kpi-strip .stat-number{
  color:#f5f9ff;
  font-size:23px;
  line-height:1.05;
  font-weight:850;
  letter-spacing:-.4px;
  white-space:nowrap;
}

.dn-kpi-strip .stat-number-wide{
  font-size:18px;
  letter-spacing:-.2px;
}

.dn-kpi-strip .stat-label{
  margin-top:5px;
  color:#d7e7f2;
  font-size:12px;
  line-height:1.2;
  text-transform:none;
  letter-spacing:0;
}

/* Lower value strip */
.dn-value-strip{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:20px;
  width:min(1400px,calc(100% - 72px));
  transform:translateX(-50%);
}

.dn-value-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr) 1.55fr;
  border:1px solid rgba(100,195,255,.25);
  border-radius:18px;
  overflow:hidden;
  background:rgba(5,27,48,.91);
  box-shadow:0 25px 65px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}

.dn-value-card{
  min-height:158px;
  padding:21px 17px 19px;
  text-align:center;
  border-right:1px solid rgba(145,210,255,.20);
}

.dn-value-icon{
  width:46px;
  height:46px;
  margin:0 auto 11px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dn-value-icon svg{
  width:39px;
  height:39px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dn-value-icon.blue{color:#18bfff}
.dn-value-icon.green{color:#63e83f}

.dn-value-card h3{
  margin:0 0 6px;
  color:#f5f9ff;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
}

.dn-value-card p{
  margin:0;
  color:#a6bacb;
  font-size:11px;
  line-height:1.45;
}

.dn-testimonial{
  position:relative;
  min-height:158px;
  padding:23px 27px 18px 62px;
  background:
    radial-gradient(circle at 20% 25%,rgba(20,152,255,.12),transparent 45%),
    rgba(8,35,58,.72);
}

.dn-quote-mark{
  position:absolute;
  left:24px;
  top:16px;
  color:#18aaff;
  font-size:48px;
  line-height:1;
  font-weight:900;
}

.dn-testimonial p{
  margin:0 0 10px;
  color:#edf7ff;
  font-size:14px;
  line-height:1.55;
}

.dn-quote-by{
  color:#8ea8ba;
  font-size:10px;
  letter-spacing:.2px;
}

.dn-stars{
  margin-top:9px;
  color:#ffbd28;
  font-size:17px;
  letter-spacing:2px;
}

/* Keep both polished strips inside the dark hero frame.
   KPI strip sits above the value strip; the next section
   begins cleanly below both. */
.hero{
  min-height:950px;
  padding-bottom:0;
}

/* Hero copy starts higher so the eyebrow sits closer to the header. */
.hero-content{
  transform:translateY(-195px);
}

@media(max-width:1200px){
  .dn-kpi-strip{
    width:calc(100% - 44px);
  }

  .dn-kpi-strip .stat{
    padding:15px 14px;
    gap:11px;
  }

  .stat-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .stat-icon svg{width:33px;height:33px}

  .dn-kpi-strip .stat-number{font-size:20px}
  .dn-kpi-strip .stat-number-wide{font-size:15px}
  .dn-kpi-strip .stat-label{font-size:10px}

  .dn-value-strip{
    width:calc(100% - 44px);
    bottom:-190px;
  }

  .dn-value-grid{
    grid-template-columns:repeat(5,1fr);
  }

  .dn-testimonial{
    grid-column:1 / -1;
    border-top:1px solid rgba(145,210,255,.20);
    min-height:125px;
  }

  .dn-value-card:nth-child(5){
    border-right:0;
  }
}

@media(max-width:900px){
  .hero-content{
    transform:none;
  }

  .dn-kpi-strip{
    bottom:178px;
  }

  .dn-kpi-strip .stats-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .dn-kpi-strip .stat:nth-child(3){
    border-right:0;
  }

  .dn-kpi-strip .stat:nth-child(4),
  .dn-kpi-strip .stat:nth-child(5){
    border-top:1px solid rgba(145,210,255,.20);
  }

  .dn-value-strip{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    transform:none;
    margin:45px auto 0;
  }

  .dn-value-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dn-value-card:nth-child(2),
  .dn-value-card:nth-child(4){
    border-right:0;
  }

  .dn-value-card:nth-child(3),
  .dn-value-card:nth-child(4),
  .dn-value-card:nth-child(5){
    border-top:1px solid rgba(145,210,255,.20);
  }

  .dn-testimonial{
    grid-column:1 / -1;
  }

  .hero{
    min-height:790px;
    padding-bottom:0;
  }
}

@media(max-width:600px){
  .dn-kpi-strip{
    width:calc(100% - 30px);
    bottom:13px;
    border-radius:14px;
  }

  .dn-kpi-strip .stats-grid{
    grid-template-columns:1fr 1fr;
  }

  .dn-kpi-strip .stat{
    min-height:75px;
    padding:11px 12px;
  }

  .dn-kpi-strip .stat:nth-child(2){
    border-right:0;
  }

  .dn-kpi-strip .stat:nth-child(3),
  .dn-kpi-strip .stat:nth-child(4),
  .dn-kpi-strip .stat:nth-child(5){
    border-top:1px solid rgba(145,210,255,.20);
  }

  .dn-kpi-strip .stat:nth-child(5){
    grid-column:1 / -1;
    border-right:0;
  }

  .dn-kpi-strip .stat-number{
    font-size:18px;
  }

  .dn-kpi-strip .stat-number-wide{
    font-size:14px;
  }

  .dn-kpi-strip .stat-label{
    font-size:9px;
  }

  .stat-icon{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

  .stat-icon svg{
    width:28px;
    height:28px;
  }

  .dn-value-grid{
    grid-template-columns:1fr;
    border-radius:14px;
  }

  .dn-value-card{
    min-height:120px;
    border-right:0;
    border-bottom:1px solid rgba(145,210,255,.20);
  }

  .dn-value-card:nth-child(n){
    border-top:0;
  }

  .dn-testimonial{
    min-height:145px;
    padding:22px 24px 18px 56px;
  }
}
section{padding:105px 0}
.section-head{max-width:760px;margin-bottom:28px}
.section-kicker{color:var(--green);font-size:12px;text-transform:uppercase;letter-spacing:3px;font-weight:800}
h2{font-size:clamp(38px,4.2vw,60px);line-height:1.04;letter-spacing:-2px;margin:12px 0 18px}
.section-head p{font-size:18px;color:var(--muted);line-height:1.7}
/* =========================================================
   DEALERNOC — DEALERSHIP REALITY
========================================================= */

.dn-reality{
  position:relative;
  padding:10px 0 15px;
  background:
    linear-gradient(180deg,#f4f8fb 0%,#ffffff 100%);
  color:#061523;
  overflow:hidden;
}

.dn-reality::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.45;
  background-image:
    linear-gradient(rgba(25,100,145,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,100,145,.045) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(
    180deg,
    transparent,
    #000 25%,
    #000 75%,
    transparent
  );
}

.dn-reality-intro{
  position:relative;
  max-width:850px;
  margin-bottom:18px;
}

.dn-kicker{
  color:#118fe8;
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:5px;
}

.dn-reality-intro h2{
  margin:0 0 22px;
  font-size:clamp(46px,5vw,72px);
  line-height:1;
  letter-spacing:-3px;
  font-weight:850;
}

.dn-reality-intro h2 span{
  color:#118fe8;
}

.dn-reality-intro p{
  max-width:680px;
  margin:0;
  color:#627485;
  font-size:18px;
  line-height:1.7;
}


/* =========================================================
   DEALERNOC — DEPARTMENT GRAPHIC CARDS
   Real-world dealership visuals + DealerNOC messaging
========================================================= */

.dn-department-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.dn-department-card{
  position:relative;
  display:grid;
  grid-template-columns:100px 1fr;
  min-height:300px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(15,82,125,.14);
  border-radius:14px;
  background:linear-gradient(145deg,#ffffff,#f1f6fa);
  box-shadow:0 15px 45px rgba(7,39,63,.07);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.dn-department-card:hover{
  transform:translateY(-6px);
  border-color:rgba(20,152,255,.42);
  box-shadow:0 25px 55px rgba(7,39,63,.13);
}

/* ---------------------------------------------------------
   Department visual
--------------------------------------------------------- */

.dn-department-art{
  position:relative;
  width:120px;
  height:300px;
  overflow:hidden;
  background:#071d30;
}

.dn-department-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.dn-department-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(4,19,34,.04) 0%,
      rgba(4,19,34,.02) 65%,
      rgba(4,19,34,.30) 100%
    );
  pointer-events:none;
}

/* Placeholder visual for departments not yet illustrated */

.dn-department-art.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(20,152,255,.24),
      transparent 42%
    ),
    linear-gradient(180deg,#0b2b45,#061827);
  border-right:1px solid rgba(20,152,255,.16);
}

.dn-department-art.placeholder::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(88,200,255,.18);
  border-radius:10px;
  background:
    linear-gradient(rgba(90,170,230,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,170,230,.045) 1px,transparent 1px);
  background-size:18px 18px;
}

.dn-placeholder-inner{
  position:relative;
  z-index:2;
}

.dn-placeholder-icon{
  font-size:30px;
  line-height:1;
  color:var(--green);
  margin-bottom:12px;
  text-shadow:0 0 14px rgba(98,230,63,.45);
}

.dn-placeholder-label{
  color:#8fb0c5;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.5px;
  line-height:1.5;
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   Department content
--------------------------------------------------------- */

.dn-department-content{
  position:relative;
  padding:27px 25px 24px;
  min-width:0;
}

.dn-department-number{
  position:absolute;
  right:20px;
  top:18px;
  color:#b4c2cc;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

.dn-department-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:10px;
  background:#071d30;
  color:var(--green);
  box-shadow:0 8px 20px rgba(3,19,32,.15);
}

.dn-department-icon svg{
  width:21px;
  height:21px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dn-department-card h3{
  margin:0 0 6px;
  font-size:24px;
  letter-spacing:-.5px;
  color:#061523;
}

.dn-department-card p{
  margin:0 0 16px;
  font-size:17px;
  font-weight:700;
  color:#118fe8;
}

.dn-department-card span{
  display:block;
  color:#81909c;
  font-size:11px;
  line-height:1.55;
  letter-spacing:.5px;
}

.dn-department-status{
  position:absolute;
  left:25px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#6c7e8c;
  font-size:8px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.dn-department-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 9px rgba(98,230,63,.7);
}

/* ---------------------------------------------------------
   Department cards responsive
--------------------------------------------------------- */

@media (max-width:900px){

  .dn-department-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dn-department-card{
    grid-template-columns:92px 1fr;
    min-height:280px;
  }

  .dn-department-art{
    width:92px;
    height:280px;
  }

  .dn-department-content{
    padding:24px 20px 22px;
  }

  .dn-department-status{
    left:20px;
    bottom:18px;
  }
}

@media (max-width:600px){

  .dn-department-grid{
    grid-template-columns:1fr;
  }

  .dn-department-card{
    grid-template-columns:100px 1fr;
    min-height:300px;
  }

  .dn-department-art{
    width:100px;
    height:300px;
  }

  .dn-department-content{
    padding:25px 22px 22px;
  }

  .dn-department-card h3{
    font-size:23px;
  }
}

/* =========================================================
   PAYOFF
========================================================= */

.dn-reality-payoff{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid rgba(8,45,72,.12);
}

.dn-reality-payoff h3{
  margin:0;
  font-size:clamp(32px,3.2vw,48px);
  line-height:1.08;
  letter-spacing:-2px;
}

.dn-reality-payoff h3 span{
  color:#118fe8;
}

.dn-reality-payoff p{
  margin:0;
  color:#627485;
  font-size:17px;
  line-height:1.7;
  max-width:560px;
}


/* =========================================================
   REALITY SECTION RESPONSIVE
========================================================= */

@media (max-width:900px){

  .dn-reality{
    padding:90px 0 95px;
  }

  .dn-department-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dn-reality-payoff{
    grid-template-columns:1fr;
    gap:25px;
  }
}

@media (max-width:600px){

  .dn-reality{
    padding:75px 0 80px;
  }

  .dn-reality-intro{
    margin-bottom:40px;
  }

  .dn-reality-intro h2{
    font-size:42px;
    letter-spacing:-2px;
  }

  .dn-reality-intro p{
    font-size:16px;
  }

  .dn-department-grid{
    grid-template-columns:1fr;
  }

  .dn-department-card{
    min-height:190px;
    padding:24px;
  }

  .dn-reality-payoff{
    margin-top:55px;
    padding-top:10px;
  }
}
/* =========================================================
   DEALERNOC — THE IT LAYER
========================================================= */

.platform{
  position:relative;
  padding:15px 0 15px;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(20,152,255,.12),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #061726 0%,
      #03111e 100%
    );
  overflow:hidden;
}

.platform::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.3;
  background-image:
    linear-gradient(rgba(90,170,230,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,170,230,.045) 1px,transparent 1px);
  background-size:60px 60px;
}

.platform .container{
  position:relative;
  z-index:2;
}

.platform .section-head{
  max-width:820px;
}


/* =========================================================
   IT LAYER VISUAL
========================================================= */

.dn-it-layer{
  position:relative;
  margin:95px auto 0;
  min-height:650px;
  width:min(1120px,100%);
}


/* central technology spine */

.dn-layer-spine{
  position:absolute;
  left:50%;
  top:70px;
  bottom:55px;
  width:2px;
  transform:translateX(-50%);
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--blue),
      var(--green),
      var(--blue),
      transparent
    );
  box-shadow:
    0 0 20px rgba(20,152,255,.45);
}

.dn-layer-core{
  position:absolute;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(
      circle,
      #123d5d 0%,
      #08263e 58%,
      #03121f 60%
    );
  border:2px solid var(--blue);
  box-shadow:
    0 0 0 10px rgba(20,152,255,.06),
    0 0 0 25px rgba(20,152,255,.025),
    0 0 55px rgba(20,152,255,.38);
}

.dn-layer-core::before{
  content:"";
  position:absolute;
  inset:-17px;
  border-radius:50%;
  border:1px solid rgba(80,195,255,.25);
}

.dn-layer-core::after{
  content:"";
  position:absolute;
  inset:-31px;
  border-radius:50%;
  border:1px solid rgba(80,195,255,.10);
}

.dn-layer-core-inner{
  position:relative;
  z-index:2;
}

.dn-layer-core-logo{
  width:58px;
  height:58px;
  margin:0 auto 7px;
  filter:drop-shadow(0 0 10px rgba(57,223,120,.25));
}

.dn-layer-core-logo svg{
  width:100%;
  height:100%;
  display:block;
}

.dn-layer-core-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.6px;
}

.dn-layer-core-title span{
  color:var(--blue);
}

.dn-layer-core-title{
  font-size:20px;
  font-weight:800;
}

.dn-layer-core-sub{
  margin-top:4px;
  color:#9db7ca;
  font-size:8px;
  letter-spacing:2px;
}


/* =========================================================
   TECHNOLOGY CARDS
========================================================= */

.dn-layer-card{
  position:absolute;
  width:330px;
  min-height:125px;
  padding:22px 24px;
  border:1px solid rgba(110,190,240,.20);
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      rgba(12,42,65,.92),
      rgba(4,21,35,.95)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.22);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.dn-layer-card:hover{
  border-color:rgba(55,190,255,.55);
  box-shadow:
    0 20px 55px rgba(0,0,0,.35),
    0 0 25px rgba(20,152,255,.08);
}


/* left */

.dn-layer-card.left{
  left:0;
  text-align:right;
}

.dn-layer-card.right{
  right:0;
}


/* connecting lines */

.dn-layer-card::after{
  content:"";
  position:absolute;
  top:50%;
  width:90px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      var(--blue),
      rgba(20,152,255,0)
    );
}

.dn-layer-card.left::after{
  right:-90px;
}

.dn-layer-card.right::after{
  left:-90px;
  transform:scaleX(-1);
}


/* little node */

.dn-layer-card::before{
  content:"";
  position:absolute;
  top:calc(50% - 4px);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    0 0 12px rgba(98,230,63,.8);
}

.dn-layer-card.left::before{
  right:-94px;
}

.dn-layer-card.right::before{
  left:-94px;
}


/* positions */

/* =========================================================
   TECHNOLOGY LAYER POSITIONS
========================================================= */

.dn-layer-card.network{
  top:10px;
}

.dn-layer-card.devices{
  top:165px;
}

.dn-layer-card.documentation{
  top:320px;
}

.dn-layer-card.security{
  top:10px;
}

.dn-layer-card.management{
  top:165px;
}

.dn-layer-card.communication{
  top:320px;
}

/* top center */
.dn-layer-card.visual-toolbox{
  top:-75px;
  left:50%;
  transform:translateX(-50%);
  text-align:left;
  min-height:110px;
  padding:14px 24px;
}

.dn-layer-card.visual-toolbox::before,
.dn-layer-card.visual-toolbox::after{
  display:none;
}

.dn-layer-card.visual-toolbox .dn-layer-icon{
  float:left;
  margin-right:15px;
  margin-bottom:15px;
}

.dn-layer-card.visual-toolbox p{
  margin-left:57px;
}


/* bottom center */
.dn-layer-card.consumables{
  top:425px;
  left:50%;
  transform:translateX(-50%);
  text-align:left;
  min-height:110px;
  padding:14px 24px;
}

.dn-layer-card.consumables::before,
.dn-layer-card.consumables::after{
  display:none;
}


/* card contents */

.dn-layer-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:12px;
  border-radius:10px;
  background:#071e31;
  color:var(--blue2);
  font-size:21px;
  border:1px solid rgba(80,190,255,.15);
}

.dn-layer-card h3{
  margin:0 0 5px;
  font-size:20px;
  color:#f5f9ff;
}

.dn-layer-card p{
  margin:0;
  color:#91a7ba;
  font-size:13px;
  line-height:1.5;
}


/* right-side card text */

.dn-layer-card.right .dn-layer-icon{
  float:left;
  margin-right:15px;
  margin-bottom:35px;
}

.dn-layer-card.left .dn-layer-icon{
  float:right;
  margin-left:15px;
  margin-bottom:35px;
}

.dn-layer-card.consumables .dn-layer-icon{
  float:left;
  margin-right:15px;
  margin-bottom:15px;
}

.dn-layer-card.consumables h3{
  clear:none;
}

.dn-layer-card.consumables p{
  max-width:none;
  margin:0;
}

/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.dn-layer-bottom{
  position:absolute;
  left:50%;
  bottom:49px;
  transform:translateX(-50%);
  text-align:center;
  white-space:nowrap;
}

.dn-layer-bottom-kicker{
  color:var(--green);
  font-size:10px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
}

.dn-layer-bottom-text{
  margin-top:7px;
  color:#91a7ba;
  font-size:12px;
  letter-spacing:.8px;
}


/* =========================================================
   IT LAYER RESPONSIVE
========================================================= */

@media(max-width:900px){

  .dn-it-layer{
    min-height:auto;
    padding-bottom:20px;
  }

  .dn-layer-spine{
    display:none;
  }

  .dn-layer-core{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin:0 auto 55px;
  }

  .dn-layer-card{
    position:relative;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100%;
    min-height:130px;
    margin-bottom:16px;
    text-align:left !important;
  }

  .dn-layer-card::after,
  .dn-layer-card::before{
    display:none;
  }

  .dn-layer-card.left .dn-layer-icon,
  .dn-layer-card.right .dn-layer-icon{
    float:left;
    margin-left:0;
    margin-right:15px;
    margin-bottom:35px;
  }

  .dn-layer-bottom{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin-top:30px;
    white-space:normal;
  }
}


@media(max-width:600px){

  .dn-it-layer{
    margin-top:45px;
  }

  .dn-layer-core{
    width:150px;
    height:150px;
  }

  .dn-layer-core-title{
    font-size:17px;
  }

  .dn-layer-card{
    padding:20px;
  }

  .dn-layer-card h3{
    font-size:18px;
  }

  .dn-layer-card p{
    font-size:12px;
  }
}
.departments{background:linear-gradient(180deg,#061827,#04121f)}
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dept{
  min-height:180px;padding:27px;border-radius:16px;border:1px solid var(--line);
  background:radial-gradient(circle at 80% 10%,rgba(20,152,255,.13),transparent 30%),#071c2d;
}
.dept h3{margin:0 0 10px;font-size:21px}.dept p{margin:0;color:#91a7ba;line-height:1.55;font-size:14px}
/* =========================================================
   DEALERNOC — ABOUT
   "YES... YOU CAN TAME THE BEAST."
========================================================= */

.dn-about{
  position:relative;
  padding:105px 0 15px;
  background:
    radial-gradient(
      circle at 25% 50%,
      rgba(20,152,255,.10),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #061726 0%,
      #03111e 100%
    );
  overflow:hidden;
}

.dn-about::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.25;
  background-image:
    linear-gradient(rgba(90,170,230,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,170,230,.045) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(
    90deg,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
}

.dn-about .container{
  position:relative;
  z-index:2;
}

.dn-about-box{
  display:grid;
  grid-template-columns:46% 54%;
  align-items:center;
  min-height:650px;
  border:1px solid rgba(100,195,255,.22);
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      rgba(10,38,61,.88),
      rgba(3,19,32,.94)
    );
  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    0 0 45px rgba(20,152,255,.05);
  overflow:hidden;
}

/* ---------------------------------------------------------
   Rack side
--------------------------------------------------------- */

.dn-about-rack{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px 30px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(20,152,255,.13),
      transparent 58%
    );
}

.dn-about-rack::after{
  content:"";
  position:absolute;
  width:75%;
  height:75%;
  border-radius:50%;
  background:rgba(20,152,255,.07);
  filter:blur(55px);
  z-index:-1;
}

.dn-about-rack img{
  display:block;
  width:100%;
  max-width:560px;
  max-height:620px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 30px 35px rgba(0,0,0,.48))
    drop-shadow(0 0 24px rgba(20,152,255,.12));
}

/* ---------------------------------------------------------
   About copy
--------------------------------------------------------- */

.dn-about-copy{
  padding:60px 65px 60px 25px;
}

.dn-about-kicker{
  color:var(--green);
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.dn-about-copy h2{
  margin:0 0 18px;
  font-size:clamp(38px,4vw,58px);
  line-height:1.02;
  letter-spacing:-2.5px;
  font-weight:850;
}

.dn-about-copy h2 span{
  color:var(--blue2);
}

.dn-about-intro{
  margin:0 0 28px;
  max-width:650px;
  color:#a9bdce;
  font-size:16px;
  line-height:1.7;
}

.dn-about-list{
  display:grid;
  gap:15px;
  margin:0;
  padding:0;
  list-style:none;
}

.dn-about-list li{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:13px;
  color:#dceaf4;
  font-size:14px;
  line-height:1.55;
}

.dn-about-list li::before{
  content:"✓";
  flex:0 0 25px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  border-radius:50%;
  background:rgba(98,230,63,.09);
  border:1px solid rgba(98,230,63,.35);
  color:var(--green);
  font-size:13px;
  font-weight:900;
  box-shadow:0 0 12px rgba(98,230,63,.08);
}

.dn-about-list strong{
  color:#ffffff;
  font-weight:800;
}

.dn-about-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:30px;
  padding-top:23px;
  border-top:1px solid rgba(100,195,255,.14);
  color:#7f9caf;
  font-size:11px;
  letter-spacing:.4px;
}

.dn-about-bottom-item{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.dn-about-bottom-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(98,230,63,.8);
}

.dn-about-bottom-divider{
  width:1px;
  height:20px;
  flex:0 0 1px;
  background:rgba(100,195,255,.25);
}

/* ---------------------------------------------------------
   About responsive
--------------------------------------------------------- */

@media(max-width:900px){

  .dn-about{
    padding:80px 0 90px;
  }

  .dn-about-box{
    grid-template-columns:1fr;
  }

  .dn-about-rack{
	min-height:500px;
	padding:25px;
	}

  .dn-about-rack img{
    max-width:450px;
    max-height:500px;
  }

  .dn-about-copy{
    padding:10px 45px 55px;
  }

}

@media(max-width:600px){

  .dn-about{
    padding:70px 0 75px;
  }

  .dn-about-box{
    border-radius:16px;
  }

  .dn-about-rack{
    min-height:390px;
    padding:20px;
  }

  .dn-about-rack img{
    max-width:340px;
    max-height:390px;
  }

  .dn-about-copy{
    padding:5px 25px 40px;
  }

  .dn-about-copy h2{
    font-size:39px;
    letter-spacing:-1.8px;
  }

  .dn-about-intro{
    font-size:15px;
  }

  .dn-about-list li{
    font-size:13px;
  }

  .dn-about-bottom{
    align-items:flex-start;
  }
}


.final-cta{
  text-align:center;
  padding:15px 20px;
  background:
    radial-gradient(circle at 50% 20%,rgba(20,152,255,.2),transparent 35%),
    linear-gradient(180deg,#03101d,#061a2a);
}
.final-cta h2{max-width:800px;margin:12px auto 18px}
.final-cta p{max-width:650px;margin:0 auto 30px;color:var(--muted);font-size:18px;line-height:1.6}
footer{padding:35px 0;border-top:1px solid var(--line);color:#7f94a7;font-size:12px}
.footer-row{display:flex;justify-content:space-between;gap:20px}
@media(max-width:1100px){
  .navlinks{display:none}.logo{flex:1}
  .hero{min-height:980px;align-items:flex-start}.hero-content{width:100%;padding-top:145px}
  .dealer-visual{top:420px;right:-10%;width:105%;height:500px}
  .stats{position:absolute}.stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4),.stat:nth-child(5){display:none}
}
@media(max-width:760px){
  .container{width:min(100% - 34px,1380px)}
  header,.nav{height:72px}.nav-actions .login{display:none}
  .logo{min-width:0}.logo-name{font-size:19px}.logo-sub{font-size:6px}
  .hero{min-height:920px}.hero-content{padding-top:125px}
  h1{font-size:47px;letter-spacing:-2px}.hero-copy{font-size:16px}
  .hero-buttons{flex-wrap:wrap}.trust-row{gap:14px;flex-wrap:wrap}
  .dealer-visual{top:470px;height:360px;width:125%;right:-25%}
  .building{width:145px;height:90px}.center-node{width:135px;height:135px}.center-title{font-size:14px}.center-shield{font-size:27px}
  .l1{width:210px}.l2{width:220px}.l3{width:200px}.l4{width:200px}.l5{width:190px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}.stat{padding:16px}.stat:nth-child(3){display:none}
  section{padding:75px 0}.problem-grid,.platform-grid{grid-template-columns:1fr}.dept-grid{grid-template-columns:1fr 1fr}
  .problem-list{grid-template-columns:1fr}
  .footer-row{flex-direction:column}
}
@media(max-width:480px){.dept-grid{grid-template-columns:1fr}.nav-actions .btn{padding:10px 13px;font-size:12px}}

/* DealerNOC responsive refinements */
.mobile-menu{display:none}
@media (max-width: 1100px){
  .container{width:min(100% - 44px,1380px)}
  .nav{gap:18px}
  .logo{min-width:250px}
  .nav-actions{gap:10px}
  .hero-content{width:100%;max-width:650px}
  .dealer-visual{right:-8%;width:88%}
}
@media (max-width: 820px){
  header{height:76px}
  .nav{height:76px}
  .navlinks{display:none}
  .nav-actions .login{display:none}
  .logo{min-width:0;flex:1}
  .logo-name{font-size:21px}
  .logo-sub{letter-spacing:2px}
  .mobile-menu{display:block;font-size:27px;line-height:1;margin-left:4px}
  .hero{min-height:1080px}
  .hero-content{padding-top:125px}
  .hero h1{font-size:clamp(45px,8vw,66px)}
  .hero-copy{font-size:17px;max-width:600px}
  .dealer-visual{
    top:515px;right:-9%;width:118%;height:470px;
    transform:scale(.92);transform-origin:center top;
  }
  .stats{bottom:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){display:none}
  .stat:nth-child(4),.stat:nth-child(5){display:block}
  .problem-grid,.platform-grid{grid-template-columns:1fr}
  .dept-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .container{width:calc(100% - 30px)}
  .nav-actions .btn{padding:10px 13px;font-size:12px}
  .logo-mark{width:34px;height:40px}
  .logo-name{font-size:18px}
  .logo-sub{font-size:5.5px;letter-spacing:1.7px}
  .hero{min-height:1040px}
  .hero-content{padding-top:112px}
  .eyebrow{font-size:10px;letter-spacing:2px}
  .hero h1{font-size:clamp(42px,12vw,57px);letter-spacing:-2px}
  .hero-copy{font-size:15px;line-height:1.55}
  .hero-buttons{gap:10px}
  .btn{padding:13px 17px}
  .trust-row{gap:13px}
  .trust{font-size:10px;letter-spacing:.7px}
  .dealer-visual{
    top:520px;right:-33%;width:166%;height:360px;
    transform:scale(.9);transform-origin:center top;
  }
  .building{width:150px;height:92px}
  .label{font-size:9px;padding:6px 8px;top:8px;left:9px}
  .center-node{width:135px;height:135px}
  .center-title{font-size:14px}
  .center-sub{font-size:7px}
  .center-shield{font-size:28px}
  .visual-caption{font-size:7px;letter-spacing:1px;white-space:nowrap}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:13px 10px}
  .stat-number{font-size:20px}
  .stat-label{font-size:8px;letter-spacing:.6px}
  section{padding:70px 0}
  h2{font-size:39px;letter-spacing:-1.5px}
  .section-head p{font-size:16px}
  .problem-list{grid-template-columns:1fr}
  .dept-grid{grid-template-columns:1fr}
  .feature{min-height:0;padding:24px}
  .final-cta{padding:80px 15px}
}
@media (max-width: 390px){
  .logo-sub{display:none}
  .nav-actions .btn{padding:9px 10px}
  .hero{min-height:1000px}
  .hero h1{font-size:40px}
  .hero-buttons .btn{width:100%}
  .dealer-visual{top:515px;right:-48%;width:190%;transform:scale(.82)}
  .stats .stat:nth-child(4),.stats .stat:nth-child(5){display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 900px){
  .hero{min-height:780px}
  .hero-content{padding-top:100px;max-width:52%}
  .hero h1{font-size:38px}
  .hero-copy{font-size:14px}
  .dealer-visual{top:95px;right:-7%;width:62%;height:500px}
  .stats{display:none}
}


/* =========================================================
   DEALERNOC HERO VISUAL — V2
   Real dealership campus + technology layer
========================================================= */
.dealer-visual{
  height:625px;
  top:105px;
  right:-3%;
  width:61%;
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.35));
}
.dealer-network-image{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    filter:drop-shadow(0 25px 40px rgba(0,0,0,.35));

    -webkit-mask-image:radial-gradient(
        ellipse 72% 78% at center,
        #000 42%,
        rgba(0,0,0,.90) 55%,
        rgba(0,0,0,.45) 72%,
        transparent 100%
    );

    mask-image:radial-gradient(
        ellipse 72% 78% at center,
        #000 42%,
        rgba(0,0,0,.90) 55%,
        rgba(0,0,0,.45) 72%,
        transparent 100%
    );
}

.dealer-scene{
    display:none;
}
.scene-glow{fill:rgba(20,152,255,.13);filter:blur(28px)}
.scene-lot{fill:#061a2a;stroke:rgba(100,195,255,.25);stroke-width:2}
.scene-road{fill:#04121f;stroke:rgba(100,195,255,.12);stroke-width:2}
.scene-roof{fill:#123b59;stroke:rgba(119,210,255,.62);stroke-width:2}
.scene-wall{fill:#09263e;stroke:rgba(105,194,255,.58);stroke-width:2}
.scene-glass{fill:rgba(77,183,238,.14);stroke:rgba(130,215,255,.38);stroke-width:1.5}
.scene-window{fill:rgba(107,202,255,.20);stroke:rgba(142,222,255,.25);stroke-width:1}
.scene-door{fill:#041a2a;stroke:rgba(120,210,255,.35);stroke-width:1}
.scene-sign{fill:rgba(2,15,27,.94);stroke:#159fff;stroke-width:1.5}
.scene-sign-text{fill:#f5f9fd;font-size:11px;font-weight:800;letter-spacing:.7px}
.scene-dot{fill:#63e83f;filter:drop-shadow(0 0 5px #63e83f)}
.scene-car-body{fill:#237daf;stroke:rgba(180,230,255,.45);stroke-width:1}
.scene-car-window{fill:#08263d}
.scene-wheel{fill:#020b12}
.scene-tree{fill:#0b513c;stroke:rgba(99,232,63,.3);stroke-width:1}
.scene-trunk{stroke:#795d43;stroke-width:3}
.scene-network{fill:none;stroke:#1498ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 20;animation:sceneFlow 1.6s linear infinite;filter:drop-shadow(0 0 7px rgba(20,152,255,.8))}
.scene-network-green{fill:none;stroke:#63e83f;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 20;animation:sceneFlow 1.8s linear infinite;filter:drop-shadow(0 0 7px rgba(99,232,63,.65))}
.scene-pulse{fill:#fff;filter:drop-shadow(0 0 8px #1498ff);animation:scenePulse 2s ease-in-out infinite}
.scene-core{fill:url(#coreGradient);stroke:#159fff;stroke-width:3;filter:drop-shadow(0 0 20px rgba(20,152,255,.65))}
.scene-ring{fill:none;stroke:rgba(88,200,255,.28);stroke-width:2}
.scene-ring2{fill:none;stroke:rgba(88,200,255,.11);stroke-width:2}
.scene-shield{fill:none;stroke:#63e83f;stroke-width:4;stroke-linejoin:round}
.scene-core-title{fill:#fff;font-size:19px;font-weight:800}
.scene-core-sub{fill:#a7bfd0;font-size:7px;font-weight:700;letter-spacing:2.3px}
.scene-caption{fill:#8fa7ba;font-size:9px;font-weight:700;letter-spacing:1.9px}
.dept-scene-group{transition:opacity .25s ease}
.dealer-scene:hover .dept-scene-group{opacity:.72}
.dealer-scene .dept-scene-group:hover{opacity:1}
.dealer-scene .dept-scene-group:hover .scene-wall{stroke:#65d3ff;filter:drop-shadow(0 0 9px rgba(20,152,255,.38))}
.dealer-scene .dept-scene-group:hover .scene-sign{stroke:#63e83f}
@keyframes sceneFlow{to{stroke-dashoffset:-27}}
@keyframes scenePulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.scene-pulse{transform-box:fill-box;transform-origin:center}

@media(max-width:1100px){
  .dealer-visual{top:465px;right:-7%;width:92%;height:505px}
}
@media(max-width:760px){
  .dealer-visual{top:505px;right:-25%;width:145%;height:400px}
  .scene-caption{font-size:7px;letter-spacing:1.2px}
}
@media(max-width:420px){
  .dealer-visual{top:510px;right:-44%;width:184%;height:350px}
}

/* =========================================================
   DEALERNOC COMMAND CENTER
========================================================= */

.dn-command{
  position:relative;
  padding:15px 0 15px;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(20,152,255,.12),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #061726 0%,
      #03111e 100%
    );
  color:#fff;
  overflow:hidden;
}

.dn-command::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(
      rgba(100,190,240,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(100,190,240,.045) 1px,
      transparent 1px
    );
  background-size:55px 55px;
}

.dn-command .container{
  position:relative;
  z-index:2;
}


/* =========================================================
   HEADER
========================================================= */

.dn-command-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:end;
  margin-bottom:65px;
}

.dn-command-kicker{
  color:var(--green);
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:16px;
}

.dn-command-head h2{
  margin:0;
  max-width:850px;
  font-size:clamp(42px,4.5vw,66px);
  line-height:1.02;
  letter-spacing:-3px;
}

.dn-command-head h2 span{
  display:block;
  color:var(--blue2);
}

.dn-command-head > p{
  margin:0 0 4px;
  max-width:500px;
  color:#9db5c8;
  font-size:17px;
  line-height:1.7;
}


/* =========================================================
   CONSOLE
========================================================= */

.dn-console{
  position:relative;
  border:1px solid rgba(95,190,240,.25);
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(
      145deg,
      rgba(10,39,60,.97),
      rgba(3,18,30,.98)
    );
  box-shadow:
    0 35px 90px rgba(0,0,0,.4),
    0 0 70px rgba(20,152,255,.08);
}


/* top bar */

.dn-console-top{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 27px;
  border-bottom:1px solid rgba(100,190,240,.13);
  background:rgba(2,14,24,.62);
}

.dn-console-brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.dn-console-logo{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  filter:drop-shadow(0 0 10px rgba(20,152,255,.22));
}

.dn-console-logo svg{
  display:block;
  width:48px;
  height:48px;
}

.dn-console-brand strong{
  display:block;
  font-size:16px;
}

.dn-console-brand span{
  display:block;
  margin-top:2px;
  color:#7793a7;
  font-size:7px;
  letter-spacing:2px;
}

.dn-console-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:#9fb8c9;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
}

.dn-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    0 0 10px rgba(99,232,63,.8);
}


/* =========================================================
   CONSOLE BODY
========================================================= */

.dn-console-body{
  display:grid;
  grid-template-columns:145px 1fr;
  min-height:485px;
}


/* sidebar */

.dn-console-nav{
  padding:25px 13px;
  border-right:1px solid rgba(100,190,240,.12);
  background:rgba(2,15,26,.45);
}

.dn-nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 12px;
  margin-bottom:5px;
  border-radius:8px;
  color:#7892a5;
  font-size:11px;
  font-weight:700;
}

.dn-nav-item.active{
  background:rgba(20,152,255,.13);
  color:#eaf6ff;
  box-shadow:
    inset 2px 0 0 var(--blue);
}

.dn-nav-item:first-letter{
  color:var(--blue2);
}


/* main */

.dn-console-main{
  padding:25px 28px 28px;
}


/* =========================================================
   SUMMARY CARDS
========================================================= */

.dn-console-summary{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:12px;
}

.dn-health-card,
.dn-mini-card{
  min-height:125px;
  padding:18px;
  border:1px solid rgba(95,190,240,.14);
  border-radius:10px;
  background:rgba(7,30,48,.62);
}

.dn-health-card{
  background:
    linear-gradient(
      145deg,
      rgba(9,51,76,.9),
      rgba(6,28,44,.8)
    );
}

.dn-health-label,
.dn-mini-card span{
  color:#6f8ca0;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.4px;
}

.dn-health-value{
  margin-top:12px;
  color:#f2f9ff;
  font-size:25px;
  font-weight:800;
}

.dn-health-sub{
  margin-top:3px;
  color:#7f9bad;
  font-size:10px;
}

.dn-health-bar{
  height:4px;
  margin-top:16px;
  overflow:hidden;
  border-radius:10px;
  background:#0c2639;
}

.dn-health-bar span{
  display:block;
  width:96%;
  height:100%;
  background:var(--green);
  box-shadow:
    0 0 10px rgba(99,232,63,.6);
}

.dn-mini-card strong{
  display:block;
  margin-top:14px;
  color:#f2f9ff;
  font-size:19px;
}

.dn-mini-card small{
  display:block;
  margin-top:7px;
  color:#7f9bad;
  font-size:9px;
}

.dn-mini-card small b{
  color:var(--green);
}


/* =========================================================
   DEPARTMENTS
========================================================= */

.dn-console-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:27px 0 12px;
  color:#6f8ca0;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
}

.dn-console-section-title span{
  color:var(--green);
  font-size:7px;
}


.dn-console-departments{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.dn-console-dept{
  display:grid;
  grid-template-columns:18px 1fr auto;
  align-items:center;
  gap:8px;
  min-height:63px;
  padding:10px 12px;
  border:1px solid rgba(95,190,240,.12);
  border-radius:9px;
  background:rgba(7,30,48,.5);
}

.dn-dept-status{
  color:var(--green);
  font-size:10px;
  text-shadow:
    0 0 8px rgba(99,232,63,.7);
}

.dn-console-dept strong{
  display:block;
  color:#eaf5fb;
  font-size:11px;
}

.dn-console-dept span{
  display:block;
  margin-top:3px;
  color:#6f899b;
  font-size:8px;
}

.dn-console-dept b{
  color:#6fe94d;
  font-size:8px;
}


/* =========================================================
   BOTTOM
========================================================= */

.dn-console-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:8px;
}

.dn-activity{
  display:flex;
  align-items:center;
  gap:8px;
  margin:9px 0;
  color:#9bb2c2;
  font-size:9px;
}

.dn-activity small{
  margin-left:auto;
  color:#5e788a;
  font-size:8px;
}

.dn-activity-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue2);
  box-shadow:
    0 0 7px rgba(20,152,255,.7);
}


.dn-watching{
  align-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-height:52px;
}

.dn-watching-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--green);
  border:1px solid rgba(99,232,63,.3);
  background:rgba(99,232,63,.06);
}

.dn-watching strong{
  display:block;
  color:#edf7fc;
  font-size:11px;
}

.dn-watching span{
  display:block;
  margin-top:4px;
  color:#6f899b;
  font-size:8px;
}


/* =========================================================
   MESSAGE
========================================================= */

.dn-command-message{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin-top:65px;
  padding-top:55px;
  border-top:1px solid rgba(95,190,240,.13);
}

.dn-command-small{
  margin-bottom:10px;
  color:var(--green);
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}

.dn-command-message h3{
  margin:0;
  font-size:clamp(30px,3vw,44px);
  line-height:1.08;
  letter-spacing:-1.5px;
}

.dn-command-message h3 span{
  color:var(--blue2);
}

.dn-command-message > p{
  margin:0;
  color:#8fa7b9;
  font-size:16px;
  line-height:1.7;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .dn-command{
    padding:90px 0 100px;
  }

  .dn-command-head{
    grid-template-columns:1fr;
    gap:25px;
    margin-bottom:45px;
  }

  .dn-console-body{
    grid-template-columns:1fr;
  }

  .dn-console-nav{
    display:flex;
    gap:5px;
    padding:10px;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid rgba(100,190,240,.12);
  }

  .dn-nav-item{
    flex:0 0 auto;
    margin:0;
  }

  .dn-console-summary{
    grid-template-columns:1fr 1fr;
  }

  .dn-console-departments{
    grid-template-columns:1fr 1fr;
  }

  .dn-command-message{
    grid-template-columns:1fr;
    gap:25px;
  }
}


@media(max-width:600px){

  .dn-command{
    padding:75px 0 80px;
  }

  .dn-command-head h2{
    font-size:39px;
    letter-spacing:-2px;
  }

  .dn-command-head > p{
    font-size:15px;
  }

  .dn-console{
    border-radius:12px;
  }

  .dn-console-top{
    padding:0 15px;
  }

  .dn-console-status{
    font-size:7px;
  }

  .dn-console-main{
    padding:16px;
  }

  .dn-console-summary{
    grid-template-columns:1fr 1fr;
  }

  .dn-health-card{
    grid-column:span 2;
  }

  .dn-mini-card{
    min-height:105px;
  }

  .dn-console-departments{
    grid-template-columns:1fr;
  }

  .dn-console-bottom{
    grid-template-columns:1fr;
  }

  .dn-watching{
    justify-content:flex-start;
  }

  .dn-command-message{
    margin-top:45px;
    padding-top:40px;
  }

  .dn-command-message h3{
    font-size:31px;
  }
}


@media(max-width:420px){

  .dn-console-brand span{
    display:none;
  }

  .dn-console-status{
    display:none;
  }

  .dn-console-summary{
    grid-template-columns:1fr;
  }

  .dn-health-card{
    grid-column:auto;
  }
}

/* =========================================
   DEALERNOC - WHAT WE DO
   ========================================= */

.dn-action-section {
    position: relative;
    padding: 150px 0 15px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(0, 145, 255, .10),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(92, 255, 61, .035),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #041725 0%,
            #031321 55%,
            #02101c 100%
        );

    overflow: hidden;
}


/* technical environment */

.dn-action-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(52, 133, 190, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52, 133, 190, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(52, 133, 190, .018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52, 133, 190, .018) 1px,
            transparent 1px
        );

    background-size:
        70px 70px,
        70px 70px,
        140px 140px,
        140px 140px;

    opacity: .9;

    pointer-events: none;
}


/* subtle system lines */

.dn-action-section::after {
    content: "";
    position: absolute;

    top: 18%;
    left: 50%;

    width: 70%;
    height: 1px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(38, 153, 245, .18),
        transparent
    );

    box-shadow:
        0 180px 0 rgba(38, 153, 245, .05),
        0 360px 0 rgba(38, 153, 245, .035);

    pointer-events: none;
}


.dn-container {
    position: relative;
    z-index: 2;

    width: min(1100px, calc(100% - 48px));

    margin: 0 auto;
}


/* section label */

.dn-section-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    color: #5cff3d;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.dn-section-label::before {
    content: "";

    display: block;

    width: 34px;
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(92, 255, 61, .15),
        rgba(92, 255, 61, .85)
    );

    box-shadow:
        0 0 8px rgba(92, 255, 61, .18);
}

.dn-section-label::after {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #5cff3d;

    box-shadow:
        0 0 7px rgba(92, 255, 61, .75),
        0 0 14px rgba(92, 255, 61, .25);
}


/* heading */

.dn-action-heading {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 70px;
}


.dn-action-heading h2 {
    margin: 0;

    color: #f4f8fc;

    font-size: clamp(46px, 5.2vw, 72px);

    line-height: .96;

    letter-spacing: -2.8px;

    font-weight: 650;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, .18);
}


.dn-action-heading h2 span {
    display: inline-block;

    background: linear-gradient(
        100deg,
        #168df0 0%,
        #2699f5 48%,
        #55c7ff 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: none;

    filter:
        drop-shadow(0 0 18px rgba(38, 153, 245, .12));
}


.dn-action-intro {
    position: relative;

    max-width: 460px;

    padding-left: 24px;
}


.dn-action-intro::before {
    content: "";

    position: absolute;

    top: 4px;
    bottom: 4px;
    left: 0;

    width: 2px;

    background: linear-gradient(
        180deg,
        #2699f5 0%,
        rgba(38, 153, 245, .35) 65%,
        transparent 100%
    );

    box-shadow:
        0 0 12px rgba(38, 153, 245, .14);
}


.dn-action-intro p {
    margin: 0;

    color: #9ab2c5;

    font-size: 16px;
    line-height: 1.75;

    letter-spacing: .05px;
}


/* card grid */

.dn-action-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    position: relative;
}


/* technical transition rail */

.dn-action-grid::before {
    content: "";

    position: absolute;

    top: -34px;
    left: 0;
    right: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(38, 153, 245, .08) 12%,
        rgba(38, 153, 245, .32) 35%,
        rgba(38, 153, 245, .32) 65%,
        rgba(38, 153, 245, .08) 88%,
        transparent 100%
    );

    pointer-events: none;
}


/* small system markers */

.dn-action-grid::after {
    content: "";

    position: absolute;

    top: -37px;
    left: 50%;

    width: 7px;
    height: 7px;

    transform: translateX(-50%);

    border: 1px solid rgba(38, 153, 245, .65);
    border-radius: 50%;

    background: #031321;

    box-shadow:
        0 0 8px rgba(38, 153, 245, .35),
        0 0 18px rgba(38, 153, 245, .12);

    pointer-events: none;
}


/* cards */

.dn-action-card {
    position: relative;

    min-height: 350px;

    padding: 36px;

    border: 1px solid rgba(65, 135, 178, .28);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(20, 152, 255, .10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(13, 42, 63, .98),
            rgba(3, 20, 34, .98)
        );

    overflow: hidden;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(150, 220, 255, .04);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* technical corner accents */

.dn-action-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 42px;

    border-top: 1px solid rgba(45, 165, 255, .55);
    border-left: 1px solid rgba(45, 165, 255, .55);

    border-top-left-radius: 18px;

    pointer-events: none;
}

.dn-action-card::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 42px;
    height: 42px;

    border-right: 1px solid rgba(45, 165, 255, .28);
    border-bottom: 1px solid rgba(45, 165, 255, .28);

    border-bottom-right-radius: 18px;

    pointer-events: none;
}

.dn-action-card-featured::before {
    border-color: rgba(92, 255, 61, .55);
}

.dn-action-card-featured::after {
    border-color: rgba(92, 255, 61, .30);
}


.dn-action-card:hover {
    transform: translateY(-6px);

    border-color: rgba(30, 155, 255, .72);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, .34),
        0 0 45px rgba(0, 130, 255, .11),
        inset 0 1px 0 rgba(120, 205, 255, .08);
}

.dn-action-card-featured {
    border-color: rgba(92, 255, 61, .32);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(92, 255, 61, .08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(12, 45, 48, .96),
            rgba(4, 25, 40, .96)
        );
}

.dn-action-card-featured:hover {
    border-color: rgba(92, 255, 61, .76);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, .34),
        0 0 48px rgba(92, 255, 61, .12),
        inset 0 1px 0 rgba(180, 255, 170, .08);
}


/* numbers */

.dn-action-number {
    position: absolute;

    top: 28px;
    right: 30px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(110, 170, 205, .55);

    font-family: monospace;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.dn-action-number::before {
    content: "";

    display: block;

    width: 24px;
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(45, 165, 255, .05),
        rgba(45, 165, 255, .55)
    );
}

.dn-action-card-featured .dn-action-number {
    color: rgba(120, 220, 115, .65);
}

.dn-action-card-featured .dn-action-number::before {
    background: linear-gradient(
        90deg,
        rgba(92, 255, 61, .05),
        rgba(92, 255, 61, .60)
    );
}


/* icon */

.dn-action-icon {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 30px;

    border: 1px solid rgba(40, 160, 255, .42);

    border-radius: 14px;

    background:
        radial-gradient(
            circle,
            rgba(20, 152, 255, .14),
            transparent 65%
        ),
        #061c2d;

    color: #55c7ff;

    font-size: 25px;

    box-shadow:
        0 0 0 5px rgba(20, 152, 255, .035),
        0 0 25px rgba(0, 150, 255, .12),
        inset 0 1px 0 rgba(160, 225, 255, .08);
}

.dn-action-icon::after {
    content: "";

    position: absolute;

    inset: 7px;

    border: 1px solid rgba(80, 190, 255, .10);

    border-radius: 10px;

    pointer-events: none;
}

.dn-action-card-featured .dn-action-icon {
    border-color: rgba(92, 255, 61, .45);

    color: #5cff3d;

    background:
        radial-gradient(
            circle,
            rgba(92, 255, 61, .12),
            transparent 65%
        ),
        #061c2d;

    box-shadow:
        0 0 0 5px rgba(92, 255, 61, .035),
        0 0 25px rgba(92, 255, 61, .10),
        inset 0 1px 0 rgba(190, 255, 180, .08);
}


/* content */

.dn-action-title {
    margin-bottom: 12px;

    color: #36a9ff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}

.dn-action-card-featured .dn-action-title {
    color: #5cff3d;
}

.dn-action-content h3 {
    margin: 0 0 17px;

    color: #f4f8fc;

    font-size: 27px;
    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.7px;
}

.dn-action-content p {
    max-width: 450px;

    margin: 0;

    color: #91aabd;

    font-size: 15px;
    line-height: 1.7;

    letter-spacing: .05px;
}


/* tags */

.dn-action-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 28px;
}

.dn-action-tags span {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 4px 9px 4px 18px;

    border: 1px solid rgba(80, 135, 170, .22);

    border-radius: 4px;

    background: rgba(4, 25, 40, .55);

    color: #7896aa;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.dn-action-tags span::before {
    content: "";

    position: absolute;

    left: 7px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #2699f5;

    box-shadow:
        0 0 6px rgba(38, 153, 245, .65);
}

.dn-action-card-featured .dn-action-tags span::before {
    background: #5cff3d;

    box-shadow:
        0 0 6px rgba(92, 255, 61, .65);
}


/* bottom status */

.dn-action-bottom {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-top: 55px;

    padding-top: 26px;

    border-top: 1px solid rgba(70, 125, 160, .18);
}

.dn-action-status {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #a4bacb;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.dn-status-dot {
    position: relative;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #5cff3d;

    box-shadow:
        0 0 8px rgba(92, 255, 61, .85),
        0 0 18px rgba(92, 255, 61, .35);
}

.dn-status-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid rgba(92, 255, 61, .20);

    border-radius: 50%;
}

.dn-action-bottom-text {
    color: #718b9e;

    font-size: 12px;

    letter-spacing: .2px;
}

.dn-action-bottom-text span {
    margin-right: 9px;

    color: #e9f2f8;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: .2px;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

    .dn-action-section {
        padding: 100px 0;
    }


    .dn-container {
        width: min(100% - 32px, 600px);
    }


    .dn-action-heading {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 45px;
    }


    .dn-action-heading h2 {
        font-size: clamp(40px, 11vw, 58px);

        letter-spacing: -2px;
    }


    .dn-action-intro {
        max-width: none;
    }


    .dn-action-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .dn-action-card {
        min-height: auto;

        padding: 28px;

    }


    .dn-action-icon {
        margin-bottom: 25px;
    }


    .dn-action-content h3 {
        font-size: 23px;
    }


    .dn-action-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        margin-top: 35px;
    }

}


/* =========================================================
   DEALERNOC — CONTACT / DEMO MODAL
   Added without changing the existing landing-page design.
========================================================= */

.dn-contact-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(1,8,15,.82);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  overflow-y:auto;
}

.dn-contact-modal.is-open{
  display:flex;
}

.dn-contact-dialog{
  position:relative;
  width:min(720px,100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  border:1px solid rgba(85,199,255,.28);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 0%,rgba(20,152,255,.14),transparent 34%),
    linear-gradient(145deg,#0b2238 0%,#061726 100%);
  box-shadow:0 35px 100px rgba(0,0,0,.58),0 0 55px rgba(20,152,255,.08);
  animation:dnModalIn .22s ease-out;
}

@keyframes dnModalIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.dn-contact-header{
  padding:32px 38px 24px;
  border-bottom:1px solid rgba(120,190,255,.13);
}

.dn-contact-kicker{
  margin-bottom:9px;
  color:var(--green);
  font-size:10px;
  font-weight:900;
  letter-spacing:2.5px;
  text-transform:uppercase;
}

.dn-contact-header h2{
  margin:0 42px 9px 0;
  color:#f5f9ff;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-1.5px;
}

.dn-contact-header p{
  margin:0;
  max-width:580px;
  color:#9db5c8;
  font-size:15px;
  line-height:1.65;
}

.dn-contact-close{
  position:absolute;
  top:18px;
  right:20px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,190,255,.18);
  border-radius:9px;
  background:rgba(3,18,31,.55);
  color:#9db5c8;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}

.dn-contact-close:hover{
  color:#fff;
  border-color:rgba(85,199,255,.55);
  background:rgba(20,152,255,.10);
}

.dn-contact-body{
  padding:27px 38px 34px;
}

.dn-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}

.dn-form-group{
  margin-bottom:17px;
}

.dn-form-label{
  display:block;
  margin-bottom:7px;
  color:#dce8f1;
  font-size:12px;
  font-weight:800;
  letter-spacing:.25px;
}

.dn-required{
  color:var(--green);
}

.dn-form-control{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid rgba(120,190,255,.20);
  border-radius:8px;
  outline:none;
  background:#041522;
  color:#f5f9ff;
  font-family:inherit;
  font-size:14px;
  transition:.2s ease;
}

.dn-form-control::placeholder{
  color:#60778a;
}

.dn-form-control:focus{
  border-color:rgba(85,199,255,.75);
  box-shadow:0 0 0 3px rgba(20,152,255,.10);
}

textarea.dn-form-control{
  min-height:125px;
  resize:vertical;
}

select.dn-form-control{
  cursor:pointer;
}

.dn-honeypot{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

.dn-form-status{
  display:none;
  margin-bottom:18px;
  padding:12px 14px;
  border-radius:8px;
  font-size:13px;
  line-height:1.5;
}

.dn-form-status.show{
  display:block;
}

.dn-form-status.error{
  border:1px solid rgba(255,105,105,.30);
  background:rgba(180,50,50,.10);
  color:#ffb0b0;
}

.dn-form-status.success{
  border:1px solid rgba(98,230,63,.30);
  background:rgba(98,230,63,.08);
  color:#b9f4a8;
}

.dn-form-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-top:4px;
}

.dn-form-note{
  color:#70899b;
  font-size:10px;
  line-height:1.5;
}

.dn-form-submit{
  flex:0 0 auto;
  min-width:160px;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--green);
  color:#041108;
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 25px rgba(98,230,63,.10);
  transition:.2s ease;
}

.dn-form-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(98,230,63,.20);
}

.dn-form-submit:disabled{
  opacity:.60;
  cursor:wait;
  transform:none;
}

.dn-contact-success{
  display:none;
  padding:22px 0 8px;
  text-align:center;
}

.dn-contact-success.is-visible{
  display:block;
}

.dn-success-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  border:1px solid rgba(98,230,63,.35);
  border-radius:50%;
  background:rgba(98,230,63,.08);
  color:var(--green);
  font-size:27px;
  box-shadow:0 0 25px rgba(98,230,63,.08);
}

.dn-contact-success h3{
  margin:0 0 9px;
  color:#f5f9ff;
  font-size:25px;
}

.dn-contact-success p{
  margin:0 auto;
  max-width:470px;
  color:#9db5c8;
  font-size:14px;
  line-height:1.65;
}

@media(max-width:600px){
  .dn-contact-modal{
    padding:12px;
  }

  .dn-contact-dialog{
    max-height:calc(100vh - 24px);
    border-radius:14px;
  }

  .dn-contact-header{
    padding:27px 22px 20px;
  }

  .dn-contact-header h2{
    font-size:28px;
  }

  .dn-contact-body{
    padding:22px;
  }

  .dn-form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .dn-form-bottom{
    display:block;
  }

  .dn-form-submit{
    width:100%;
    margin-top:17px;
  }
}


/* Final supplied DealerNOC horizontal SVG header logo */
.dn-header-logo{
  display:flex;
  align-items:center;
  width:auto;
  min-width:285px;
  height:58px;
  text-decoration:none;
}
.dn-header-logo .dn-header-logo-svg{
  display:block;
  width:238px;
  height:auto;
  max-height:50px;
}
@media(max-width:900px){
  .dn-header-logo{
    min-width:0;
    height:52px;
  }
  .dn-header-logo .dn-header-logo-svg{
    width:205px;
    max-height:46px;
  }
}

/* =========================================================
   DEALERNOC — DEPARTMENT CARD COMPACT VERSION
   Remove icons + reduce cards/artwork by 20%
========================================================= */

.dn-department-card{
  grid-template-columns:80px 1fr;
  min-height:240px;
}

.dn-department-art{
  width:96px;
  height:240px;
}

/* Remove department icon boxes */
.dn-department-icon{
  display:none;
}

/* Tighten content slightly */
.dn-department-content{
  padding:22px 22px 20px;
}

.dn-department-status{
  left:22px;
  bottom:17px;
}

/* =========================================================
   DealerNOC multi-page shell
   Shared layout additions — original visual styles preserved.
========================================================= */

html { scroll-behavior: smooth; }
.dn-page-main { min-height: 55vh; }

.dn-contact-page {
  padding: 120px 0 110px;
  background:
    radial-gradient(circle at 75% 20%,rgba(20,152,255,.13),transparent 30%),
    linear-gradient(180deg,#061726,#03111e);
}
.dn-contact-page .dn-contact-dialog {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.dn-contact-page .dn-contact-header { border-radius: 18px 18px 0 0; }
.dn-contact-page .dn-contact-body { border-radius: 0 0 18px 18px; }
.dn-contact-page .dn-contact-close { display:none; }

.dn-placeholder-page {
  padding: 150px 0 130px;
  min-height: 65vh;
  background:
    radial-gradient(circle at 70% 25%,rgba(20,152,255,.12),transparent 32%),
    linear-gradient(180deg,#061726,#03111e);
}

.navlinks a.active { color: var(--blue2); }

.mobile-menu {
  cursor:pointer;
  border:0;
  background:transparent;
  color:#d9e5f0;
  padding:4px;
}
@media (max-width:820px) {
  .dn-contact-page { padding-top:105px; }
}

.dn-page-main.interior-page {
  padding-top: 88px;
}

/* =========================================================
   SHARED HEADER BRANDING
========================================================= */

.dn-header-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
}

.dn-header-logo-svg {
  display: block;
}

.dn-header-tagline {
  display: block;
  margin-top: -6px;
  margin-left: 1px;

  color: #1498FF;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   SHARED PAGE KICKER
========================================================= */

.dn-page-kicker {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 14px;

  color: #39df78;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  line-height: 1.2;
  text-transform: uppercase;
}

.dn-page-kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: #39df78;
  flex: 0 0 auto;
}

/* =========================================================
   DEALERNOC — CONTACT FORM SUCCESS
========================================================= */

.dn-form-status.success{
    display:block;
    margin-bottom:20px;
}

.dn-success-message{
    padding:24px 20px;
    text-align:center;
    border:1px solid rgba(98,230,63,.30);
    border-radius:10px;
    background:rgba(98,230,63,.06);
}

.dn-success-check{
    width:54px;
    height:54px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(98,230,63,.35);
    border-radius:50%;

    background:rgba(98,230,63,.08);

    color:var(--green);
    font-size:26px;
    font-weight:700;
}

.dn-success-message h3{
    margin:0 0 8px;
    color:#f5f9ff;
    font-size:24px;
}

.dn-success-message p{
    margin:0 auto;
    max-width:470px;
    color:#9db5c8;
    font-size:14px;
    line-height:1.6;
}

/* =========================================================
   DEALERNOC — MOBILE NAVIGATION
   ========================================================= */

.mobile-menu{
  display:none;
  cursor:pointer;
  border:0;
  background:transparent;
  color:#d9e5f0;
  padding:6px;
  font-size:28px;
  line-height:1;
  z-index:30;
}

/* Mobile navigation panel */
.mobile-nav{
  display:none;
}

@media (max-width:820px){

  .mobile-menu{
    display:block;
  }

  .mobile-nav{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    z-index:25;

    padding:12px 20px 18px;

    background:
      linear-gradient(
        180deg,
        rgba(4,19,34,.98),
        rgba(3,17,30,.98)
      );

    border-top:1px solid rgba(100,195,255,.14);
    border-bottom:1px solid rgba(100,195,255,.18);

    box-shadow:
      0 20px 45px rgba(0,0,0,.35);

    backdrop-filter:blur(14px);
  }

  .mobile-nav.open{
    display:block;
  }

  .mobile-nav a{
    display:block;
    padding:14px 10px;

    color:#d9e5f0;
    font-size:15px;
    font-weight:700;

    border-bottom:1px solid rgba(145,210,255,.10);

    transition:
      color .2s ease,
      background .2s ease;
  }

  .mobile-nav a:last-child{
    border-bottom:0;
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus{
    color:var(--blue2);
    background:rgba(20,152,255,.06);
  }

  .mobile-nav .mobile-nav-cta{
    margin-top:10px;
    padding:13px 16px;

    text-align:center;

    border:1px solid rgba(98,230,63,.45);
    border-radius:9px;

    background:rgba(98,230,63,.08);
    color:var(--green);
  }

  .mobile-nav .mobile-nav-cta:hover,
  .mobile-nav .mobile-nav-cta:focus{
    background:rgba(98,230,63,.14);
    color:var(--green);
  }
}

/* Keep the mobile menu hidden on desktop */
@media (min-width:821px){
  .mobile-menu,
  .mobile-nav{
    display:none !important;
  }
}