.nwd-page{
  --nwd-purple:#7033f3;
  --nwd-purple-dark:#5720e7;
  --nwd-text:#111a37;
  --nwd-muted:#68718b;
  --nwd-line:#e9e5f1;
  margin:0;
  overflow-x:hidden;
  background:#fff;
  color:var(--nwd-text);
}

.nwd-container{
  width:min(1280px,92%);
  margin:0 auto;
}


/* ================================================================
   HERO
   ================================================================ */

.nwd-hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 45px;
  background:
    radial-gradient(circle at 67% 34%,rgba(111,48,243,.07),transparent 32%),
    #fff;
}

.nwd-hero::after{
  content:"";
  position:absolute;
  right:-220px;
  bottom:-280px;
  width:650px;
  height:650px;
  border:1px solid rgba(121,65,244,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 45px rgba(115,55,245,.015),
    0 0 0 90px rgba(115,55,245,.012);
}

.nwd-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:38px;
  align-items:center;
}

.nwd-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  margin-bottom:22px;
  border:1px solid #dfd4fa;
  border-radius:999px;
  background:#f7f3ff;
  color:#682fee;
  font-size:12px;
  font-weight:800;
}

.nwd-eyebrow svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

.nwd-hero h1{
  margin:0;
  max-width:570px;
  font-size:clamp(46px,5vw,68px);
  line-height:1.03;
  letter-spacing:-2.2px;
}

.nwd-hero h1 span{
  display:block;
  color:var(--nwd-purple);
}

.nwd-lead{
  max-width:600px;
  margin:23px 0;
  color:var(--nwd-muted);
  font-size:16px;
  line-height:1.72;
}

.nwd-benefits{
  display:grid;
  gap:11px;
}

.nwd-benefits div{
  display:flex;
  align-items:center;
  gap:10px;
  color:#505970;
  font-size:14px;
}

.nwd-benefits span{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#7033ef;
  color:#fff;
}

.nwd-benefits svg{
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
}

.nwd-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.nwd-btn{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:0 26px;
  border-radius:9px;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.nwd-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

.nwd-btn-primary{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #7d42ff,
      #5820ec
    );
  box-shadow:
    0 13px 29px rgba(91,37,220,.19);
}

.nwd-btn-secondary{
  border:1px solid #cdbcf7;
  background:#fff;
  color:#6530e7;
}

.nwd-btn:hover{
  transform:translateY(-2px);
}

.nwd-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:33px;
}

.nwd-trust-row > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.nwd-trust-row svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#6d31ee;
  stroke-width:1.8;
}

.nwd-trust-row strong,
.nwd-trust-row small{
  display:block;
}

.nwd-trust-row strong{
  font-size:9px;
}

.nwd-trust-row small{
  margin-top:2px;
  color:#838a9c;
  font-size:7px;
}


/* HERO VISUAL */

.nwd-hero-visual{
  position:relative;
  min-height:515px;
  display:grid;
  place-items:center;
}

.nwd-hero-glow{
  position:absolute;
  inset:13% 8%;
  border-radius:50%;
  background:rgba(110,48,242,.08);
  filter:blur(70px);
}

.nwd-hero-image{
  position:relative;
  z-index:2;
  width:100%;
  max-width:760px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(
      0 28px 35px rgba(28,22,60,.12)
    );
  animation:nwdHeroFloat 5s infinite ease-in-out;
}

@keyframes nwdHeroFloat{
  0%,100%{
    transform:translateY(0)
  }

  50%{
    transform:translateY(-8px)
  }
}

.nwd-floating-card{
  position:absolute;
  z-index:5;
  width:185px;
  display:flex;
  gap:11px;
  padding:16px;
  border:1px solid #e9e4f3;
  border-radius:12px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 35px rgba(45,29,88,.10);
  backdrop-filter:blur(10px);
  animation:nwdCardFloat 4.5s infinite ease-in-out;
}

.nwd-floating-top{
  right:-20px;
  top:10px;
}

.nwd-floating-bottom{
  right:-5px;
  bottom:15px;
  animation-delay:1.1s;
}

@keyframes nwdCardFloat{
  0%,100%{
    transform:translateY(0)
  }

  50%{
    transform:translateY(-7px)
  }
}

.nwd-floating-card > div{
  width:35px;
  height:35px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f1ebff;
  color:#7035ed;
}

.nwd-floating-card svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.nwd-floating-card strong,
.nwd-floating-card small{
  display:block;
}

.nwd-floating-card strong{
  font-size:10px;
}

.nwd-floating-card small{
  margin-top:4px;
  color:#7a8297;
  font-size:8px;
  line-height:1.5;
}


/* ================================================================
   SHARED HEADINGS
   ================================================================ */

.nwd-section-head{
  max-width:700px;
  margin:0 auto 37px;
  text-align:center;
}

.nwd-section-head > span{
  color:#6f32ee;
  font-size:10px;
  font-weight:900;
}

.nwd-section-head h2{
  margin:11px 0 9px;
  font-size:31px;
  letter-spacing:-1px;
}

.nwd-section-head p{
  margin:0;
  color:var(--nwd-muted);
  font-size:13px;
  line-height:1.6;
}


/* ================================================================
   FEATURES
   ================================================================ */

.nwd-features{
  padding:65px 0 40px;
}

.nwd-feature-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:13px;
}

.nwd-feature-grid article{
  min-height:190px;
  padding:20px 15px;
  border:1px solid var(--nwd-line);
  border-radius:12px;
  background:#fff;
  transition:.2s ease;
}

.nwd-feature-grid article:hover{
  transform:translateY(-5px);
  border-color:#d7caf8;
  box-shadow:
    0 15px 34px rgba(50,31,96,.08);
}

.nwd-feature-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin:0 auto 15px;
  border-radius:50%;
  background:#f1ebff;
  color:#7136ed;
}

.nwd-feature-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nwd-feature-grid h3{
  margin:0 0 8px;
  text-align:center;
  font-size:12px;
}

.nwd-feature-grid p{
  margin:0;
  text-align:center;
  color:#747d91;
  font-size:9px;
  line-height:1.6;
}


/* ================================================================
   PROCESS
   ================================================================ */

.nwd-process{
  padding:30px 0 50px;
}

.nwd-process-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  padding:30px 22px;
  border:1px solid #e8e1f9;
  border-radius:14px;
  background:
    linear-gradient(
      90deg,
      #fff,
      #faf8ff,
      #fff
    );
}

.nwd-process-grid article{
  position:relative;
  text-align:center;
}

.nwd-process-grid article::after{
  content:"";
  position:absolute;
  top:32px;
  right:-20px;
  width:30px;
  height:1px;
  background:
    repeating-linear-gradient(
      90deg,
      #976cf4 0 5px,
      transparent 5px 9px
    );
}

.nwd-process-grid article:last-child::after{
  display:none;
}

.nwd-process-grid article > span{
  position:absolute;
  top:-5px;
  right:25%;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#7032ef;
  color:#fff;
  font-size:7px;
  font-weight:800;
}

.nwd-process-grid article > div{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:50%;
  background:#eee7ff;
  color:#7033ea;
}

.nwd-process-grid svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.nwd-process-grid h3{
  margin:0 0 7px;
  font-size:11px;
}

.nwd-process-grid p{
  margin:0 auto;
  max-width:130px;
  color:#737b90;
  font-size:8px;
  line-height:1.55;
}


/* ================================================================
   PROJECTS
   ================================================================ */

.nwd-projects{
  padding:30px 0 60px;
}

.nwd-project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.nwd-project-card{
  overflow:hidden;
  border:1px solid #e7e3ef;
  border-radius:13px;
  background:#fff;
  box-shadow:
    0 10px 30px rgba(39,27,78,.06);
  transition:.25s ease;
}

.nwd-project-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 45px rgba(40,28,82,.12);
}

.nwd-browser{
  overflow:hidden;
  background:#f5f4f7;
}

.nwd-browser-bar{
  height:31px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 10px;
  background:#f0eef3;
}

.nwd-browser-bar > div{
  display:flex;
  gap:4px;
}

.nwd-browser-bar i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c8c4cd;
}

.nwd-browser-bar span{
  overflow:hidden;
  color:#777e8e;
  font-size:7px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.nwd-live-preview{
  position:relative;
  height:260px;
  overflow:hidden;
  background:
    linear-gradient(
      135deg,
      #f8f6ff,
      #fff
    );
}

.nwd-live-preview iframe{
  width:1440px;
  height:900px;
  border:0;
  transform:
    scale(.285);
  transform-origin:
    top left;
  pointer-events:none;
  background:#fff;
}

.nwd-preview-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:
    rgba(24,17,45,.01);
  opacity:0;
  transition:.2s ease;
}

.nwd-project-card:hover
.nwd-preview-overlay{
  opacity:1;
  background:
    rgba(25,16,51,.23);
  backdrop-filter:blur(1px);
}

.nwd-preview-overlay a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border-radius:8px;
  background:#fff;
  color:#632ee6;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  box-shadow:
    0 10px 30px rgba(0,0,0,.15);
}

.nwd-preview-overlay svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

.nwd-project-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
}

.nwd-project-info strong,
.nwd-project-info span{
  display:block;
}

.nwd-project-info strong{
  font-size:13px;
}

.nwd-project-info span{
  margin-top:4px;
  color:#858c9c;
  font-size:9px;
}

.nwd-project-info > a{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f0eaff;
  color:#6830ea;
}

.nwd-project-info svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}


/* ================================================================
   PRICING
   ================================================================ */

.nwd-pricing{
  padding:25px 0 65px;
}

.nwd-price-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px;
  align-items:stretch;
}

.nwd-price-grid article{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid #e7e3ee;
  border-radius:12px;
  background:#fff;
  transition:.2s ease;
}

.nwd-price-grid article:hover{
  transform:translateY(-5px);
  box-shadow:
    0 16px 36px rgba(47,31,92,.08);
}

.nwd-price-grid article.popular{
  border:1.5px solid #7b3df4;
  box-shadow:
    0 14px 35px rgba(101,44,225,.10);
}

.nwd-popular{
  position:absolute;
  top:-13px;
  right:18px;
  padding:6px 10px;
  border-radius:999px;
  background:#7032ef;
  color:#fff;
  font-size:8px;
  font-weight:800;
}

.nwd-price-grid h3{
  margin:0;
  font-size:14px;
}

.nwd-price-grid article > small{
  margin-top:5px;
  color:#858c9d;
  font-size:8px;
}

.nwd-price-grid article > strong{
  margin-top:16px;
  color:#6c30ec;
  font-size:22px;
}

.nwd-price-grid article > em{
  margin-top:4px;
  color:#767e91;
  font-size:7px;
  font-style:normal;
}

.nwd-price-grid ul{
  flex:1;
  padding:0;
  margin:17px 0;
  list-style:none;
}

.nwd-price-grid li{
  position:relative;
  padding-left:14px;
  margin-bottom:8px;
  color:#596277;
  font-size:8px;
}

.nwd-price-grid li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#7133ec;
  font-weight:900;
}

.nwd-price-grid article > a{
  min-height:39px;
  display:grid;
  place-items:center;
  border:1px solid #9b72f3;
  border-radius:7px;
  color:#6830e8;
  text-decoration:none;
  font-size:9px;
  font-weight:800;
}

.nwd-price-grid .popular > a{
  border-color:transparent;
  background:
    linear-gradient(
      135deg,
      #7a3eff,
      #5b23e9
    );
  color:#fff;
}


/* ================================================================
   FINAL
   ================================================================ */

.nwd-final{
  padding:0 0 70px;
}

.nwd-final-panel{
  display:grid;
  grid-template-columns:75px 1fr 290px;
  gap:23px;
  align-items:center;
  padding:25px 30px;
  border:1px solid #dfd5f7;
  border-radius:14px;
  background:
    linear-gradient(
      90deg,
      #fff,
      #faf7ff,
      #fff
    );
}

.nwd-final-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eee7ff;
  color:#7132ed;
}

.nwd-final-icon svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.nwd-final-panel h2{
  margin:0 0 7px;
  font-size:24px;
}

.nwd-final-panel p{
  margin:0;
  color:#737c91;
  font-size:11px;
}

.nwd-final-actions{
  display:grid;
  gap:8px;
}


/* ================================================================
   REVEALS
   ================================================================ */

[data-nwd-reveal]{
  opacity:0;
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.75,.2,1);
}

[data-nwd-reveal="left"]{
  transform:translateX(-30px);
}

[data-nwd-reveal="right"]{
  transform:translateX(30px);
}

[data-nwd-reveal="up"]{
  transform:translateY(24px);
}

[data-nwd-reveal].nwd-visible{
  opacity:1;
  transform:none;
}


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

@media(max-width:1100px){

  .nwd-hero-grid{
    grid-template-columns:1fr;
  }

  .nwd-hero-visual{
    width:min(850px,100%);
    margin:auto;
  }

  .nwd-feature-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .nwd-process-grid{
    grid-template-columns:repeat(3,1fr);
    gap:30px 10px;
  }

  .nwd-process-grid article:nth-child(3)::after,
  .nwd-process-grid article:nth-child(6)::after{
    display:none;
  }

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

}


@media(max-width:760px){

  .nwd-hero{
    padding-top:50px;
  }

  .nwd-floating-card{
    display:none;
  }

  .nwd-feature-grid,
  .nwd-process-grid,
  .nwd-project-grid,
  .nwd-price-grid{
    grid-template-columns:1fr;
  }

  .nwd-process-grid article::after{
    display:none;
  }

  .nwd-live-preview{
    height:230px;
  }

  .nwd-final-panel{
    grid-template-columns:1fr;
    text-align:center;
  }

  .nwd-final-icon{
    margin:auto;
  }

}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  [data-nwd-reveal]{
    opacity:1;
    transform:none;
  }

}


/* =====================================================================
   NEXUS WEB DESIGN ONGOING COSTS V1
   ===================================================================== */

.nwd-ongoing-costs{
  padding:20px 0 58px;
}

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

.nwd-ongoing-grid article{
  min-height:118px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border:1px solid #e8e4f0;
  border-radius:12px;
  background:#fff;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.nwd-ongoing-grid article:hover{
  transform:translateY(-4px);
  border-color:#d6caf7;
  box-shadow:0 15px 34px rgba(49,31,93,.08);
}

.nwd-ongoing-icon{
  width:52px;
  height:52px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f1ebff;
  color:#7033ee;
}

.nwd-ongoing-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nwd-ongoing-grid h3{
  margin:0 0 6px;
  font-size:13px;
}

.nwd-ongoing-grid p{
  margin:0;
  color:#6d7589;
  font-size:10px;
  line-height:1.5;
}

@media(max-width:1000px){

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

}

@media(max-width:620px){

  .nwd-ongoing-grid{
    grid-template-columns:1fr;
  }

}