/* ============================================================
   Website Design — premium build (brand #ff7a45 / black / white / cream)
   ============================================================ */
      .wd,
      .wd h1,
      .wd h2,
      .wd h3,
      .wd h4,
      .wd h5,
      .wd p,
      .wd span,
      .wd a,
      .wd div,
      .wd li,
      .wd label {
         font-family: "Poppins", sans-serif
      }

      .wd {
         --o: #ff7a45;
         --o2: #ff9e6b;
         --od: #e5622f;
         --ink: #141414;
         --cream: #FFF4EF;
         --dark: #0e0f12;
         --dark2: #17181d;
         position: relative;
         z-index: 2
      }

      #mainfooter {
         position: relative;
         z-index: 1
      }

      .wd * {
         box-sizing: border-box
      }

      #mainheader {
         min-height: 0 !important;
         padding: 0 !important
      }

      .wd .container {
         max-width: 1180px;
         width: 100%;
         margin-left: auto;
         margin-right: auto;
         padding-left: 20px;
         padding-right: 20px
      }

      .wd .cmn_padd {
         padding: 88px 20px
      }

      /* buttons */
      .wd-btn {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         background: var(--o);
         color: #fff;
         font-weight: 600;
         font-size: 15px;
         padding: 15px 25px;
         border-radius: 10px;
         text-decoration: none;
         transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
         border: 2px solid var(--o);
         box-shadow: 0 10px 26px rgba(255, 122, 69, .28)
      }

      .wd-btn:hover {
         background: var(--od);
         border-color: var(--od);
         color: #fff;
         transform: translateY(-3px);
         box-shadow: 0 16px 34px rgba(255, 122, 69, .4)
      }

      .wd-btn.out {
         background: transparent;
         color: var(--o);
         box-shadow: none
      }

      .wd-btn.out:hover {
         background: var(--o);
         color: #fff
      }

      .wd-btn svg {
         width: 17px;
         height: 17px
      }

      .wd-btns {
         display: flex;
         flex-wrap: wrap;
         gap: 15px;
         margin-top: 32px
      }

      /* reveal */
      .wd .reveal {
         opacity: 0;
         transform: translateY(28px);
         transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
         transition-delay: var(--d, 0s)
      }

      .wd .reveal.in {
         opacity: 1;
         transform: none
      }

      @media(prefers-reduced-motion:reduce) {
         .wd .reveal {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important
         }

         .wd [class*="wd-float"] {
            animation: none !important
         }
      }

      /* headings */
      .wd-head {
         text-align: center;
         max-width: 820px;
         margin: 0 auto
      }

      .wd-eyebrow {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         font-size: 12px;
         font-weight: 700;
         letter-spacing: 1.6px;
         text-transform: uppercase;
         color: var(--o);
         background: #fff4ef;
         border: 1px solid #ffd8c6;
         padding: 7px 15px;
         border-radius: 30px;
         margin-bottom: 18px
      }

      .wd-eyebrow svg {
         width: 14px;
         height: 14px;
         stroke: var(--o)
      }

      .wd-eyebrow.on-dark {
         background: rgba(255, 122, 69, .12);
         border-color: rgba(255, 122, 69, .35)
      }

      .wd-head h2 {
         font-size: 40px;
         line-height: 1.14;
         font-weight: 700;
         color: var(--ink);
         margin: 0
      }

      .wd-head h2 span {
         color: var(--o)
      }

      .wd-head .uline {
         width: 118px;
         height: 5px;
         border-radius: 4px;
         background: linear-gradient(90deg, var(--o), #ffc3a3);
         margin: 18px auto 0
      }

      .wd-head p {
         font-size: 16px;
         line-height: 1.75;
         color: #5c5c5c;
         max-width: 720px;
         margin: 22px auto 0
      }

      .wd-head.left {
         text-align: left;
         margin: 0
      }

      .wd-head.left .uline {
         margin: 18px 0 0
      }

      /* icon chip */
      .wd-ic {
         width: 58px;
         height: 58px;
         border-radius: 15px;
         background: linear-gradient(135deg, #fff2ea, #ffe0d1);
         border: 1px solid #ffe0d1;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--o);
         margin: 0 0 18px;
         box-shadow: 0 8px 20px rgba(255, 122, 69, .16)
      }

      .wd-ic svg {
         width: 28px;
         height: 28px;
         stroke: var(--o)
      }

      /* ============================================================
   HERO (dark, two column)
   ============================================================ */
      .wd-hero {
         position: relative;
         overflow: hidden;
         background: var(--dark);
         padding: 160px 20px 106px
      }

      .wd-hero:before {
         content: "";
         position: absolute;
         top: -160px;
         right: -120px;
         width: 640px;
         height: 640px;
         background: radial-gradient(circle, rgba(255, 122, 69, .27), transparent 62%);
         pointer-events: none
      }

      .wd-hero:after {
         content: "";
         position: absolute;
         inset: 0;
         background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
         background-size: 46px 46px;
         mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
         -webkit-mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
         pointer-events: none
      }

      .wd-hero .container {
         position: relative;
         z-index: 2;
         display: grid;
         grid-template-columns: 1.02fr .98fr;
         gap: 54px;
         align-items: center
      }

      .wd-heleft {
         max-width: 600px
      }

      .wd-hero-eyebrow {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         font-size: 12px;
         font-weight: 700;
         letter-spacing: 1.6px;
         text-transform: uppercase;
         color: var(--o2);
         background: rgba(255, 122, 69, .1);
         border: 1px solid rgba(255, 122, 69, .32);
         padding: 8px 16px;
         border-radius: 30px;
         margin-bottom: 22px
      }

      .wd-hero-eyebrow svg {
         width: 15px;
         height: 15px;
         stroke: var(--o2)
      }

      .wd-h1 {
         font-size: 54px;
         line-height: 1.07;
         font-weight: 800;
         color: #fff;
         margin: 0 0 20px;
         letter-spacing: -.5px
      }

      .wd-h1 span {
         color: var(--o)
      }

      .wd-sub {
         font-size: 18.5px;
         line-height: 1.7;
         color: #b9bcc6;
         max-width: 545px;
         margin: 0
      }

      .wd-trust {
         display: flex;
         flex-wrap: wrap;
         gap: 10px 22px;
         margin-top: 32px
      }

      .wd-trust .t {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         font-size: 13.5px;
         font-weight: 500;
         color: #cfd2db
      }

      .wd-trust .t svg {
         width: 16px;
         height: 16px;
         stroke: var(--o);
         flex: 0 0 auto
      }

      .wd-hero .anim {
         opacity: 0;
         transform: translateY(26px);
         animation: wdUp .8s cubic-bezier(.16, 1, .3, 1) forwards
      }

      .wd-hero .anim.d1 {
         animation-delay: .06s
      }

      .wd-hero .anim.d2 {
         animation-delay: .16s
      }

      .wd-hero .anim.d3 {
         animation-delay: .26s
      }

      .wd-hero .anim.d4 {
         animation-delay: .36s
      }

      .wd-hero .anim.d5 {
         animation-delay: .46s
      }

      @keyframes wdUp {
         to {
            opacity: 1;
            transform: none
         }
      }

      @media(prefers-reduced-motion:reduce) {
         .wd-hero .anim {
            opacity: 1;
            transform: none;
            animation: none
         }
      }

      .wd-float {
         animation: wdFloaty 6s ease-in-out infinite
      }

      @keyframes wdFloaty {

         0%,
         100% {
            transform: translateY(0)
         }

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

      /* before / after site visual */
      .wd-ba {
         position: relative;
         max-width: 452px;
         margin-left: auto;
         display: flex;
         flex-direction: column;
         gap: 16px
      }

      .wd-site {
         position: relative;
         background: #fff;
         border-radius: 15px;
         overflow: hidden;
         box-shadow: 0 30px 70px rgba(0, 0, 0, .5)
      }

      .wd-site .cap {
         position: absolute;
         top: 44px;
         left: 14px;
         z-index: 3;
         font-size: 9.5px;
         font-weight: 800;
         letter-spacing: 1px;
         text-transform: uppercase;
         padding: 4px 10px;
         border-radius: 20px
      }

      .wd-site.before .cap {
         background: #efe9e4;
         color: #9a8f88
      }

      .wd-site.after .cap {
         background: var(--o);
         color: #fff;
         box-shadow: 0 8px 18px rgba(255, 122, 69, .4)
      }

      .wd-site .bar {
         display: flex;
         align-items: center;
         gap: 6px;
         padding: 9px 12px;
         background: #f3f0ee;
         border-bottom: 1px solid #e7e0da
      }

      .wd-site .bar i {
         width: 9px;
         height: 9px;
         border-radius: 50%;
         background: #d7cfc8;
         display: inline-block
      }

      .wd-site .bar .url {
         margin-left: 8px;
         font-size: 10px;
         color: #9a9a9a;
         background: #fff;
         border: 1px solid #e7e0da;
         border-radius: 6px;
         padding: 3px 9px;
         flex: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
      }

      .wd-site.before .body {
         padding: 26px 16px 16px;
         background: #fbfbfb
      }

      .wd-site.before .body .h {
         height: 9px;
         width: 64%;
         background: #d9d4cf;
         border-radius: 3px;
         margin: 0 0 9px
      }

      .wd-site.before .body .l {
         height: 6px;
         background: #e6e2de;
         border-radius: 3px;
         margin-bottom: 6px
      }

      .wd-site.before .body .l.s {
         width: 82%
      }

      .wd-site.before .body .l.t {
         width: 90%
      }

      .wd-site.before .clutter {
         display: flex;
         gap: 6px;
         margin: 12px 0 4px
      }

      .wd-site.before .clutter span {
         flex: 1;
         height: 26px;
         background: #e6e2de;
         border-radius: 4px
      }

      .wd-site.before .warn {
         display: inline-flex;
         align-items: center;
         gap: 5px;
         font-size: 9.5px;
         font-weight: 700;
         color: #c0392b;
         background: #fdecea;
         border: 1px solid #f5c6c0;
         border-radius: 20px;
         padding: 4px 9px;
         margin-top: 8px
      }

      .wd-site.before .warn svg {
         width: 11px;
         height: 11px;
         stroke: #c0392b
      }

      .wd-site.after .body {
         padding: 26px 18px 20px;
         background: linear-gradient(180deg, #fff, #fff8f4)
      }

      .wd-site.after .body .h {
         font-size: 14px;
         font-weight: 800;
         color: #141414;
         margin: 0 0 4px;
         line-height: 1.25
      }

      .wd-site.after .body .h span {
         color: var(--o)
      }

      .wd-site.after .body .s {
         font-size: 10.5px;
         color: #777;
         margin: 0 0 13px;
         line-height: 1.5
      }

      .wd-site.after .cta {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         background: var(--o);
         color: #fff;
         font-size: 11.5px;
         font-weight: 700;
         padding: 9px 15px;
         border-radius: 8px;
         box-shadow: 0 8px 18px rgba(255, 122, 69, .35)
      }

      .wd-site.after .cta svg {
         width: 13px;
         height: 13px;
         stroke: #fff
      }

      .wd-site.after .chips {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-top: 13px
      }

      .wd-site.after .chips .ok {
         display: inline-flex;
         align-items: center;
         gap: 4px;
         font-size: 9.5px;
         font-weight: 700;
         color: #1a7f43;
         background: #e8f7ee;
         border: 1px solid #b7e6c8;
         border-radius: 20px;
         padding: 4px 9px
      }

      .wd-site.after .chips .ok svg {
         width: 11px;
         height: 11px;
         stroke: #1a7f43
      }

      .wd-arrow {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         font-size: 11px;
         font-weight: 800;
         letter-spacing: 1px;
         text-transform: uppercase;
         color: var(--o2)
      }

      .wd-arrow svg {
         width: 16px;
         height: 16px;
         stroke: var(--o2)
      }

      .wd-lead {
         position: absolute;
         right: -16px;
         bottom: 26px;
         z-index: 5;
         display: flex;
         align-items: center;
         gap: 11px;
         background: #fff;
         border-radius: 13px;
         padding: 11px 14px;
         box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
         border: 1px solid #f0eae6;
         max-width: 222px
      }

      .wd-lead .ic {
         width: 36px;
         height: 36px;
         border-radius: 10px;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto
      }

      .wd-lead .ic svg {
         width: 18px;
         height: 18px;
         stroke: #fff
      }

      .wd-lead b {
         display: block;
         font-size: 12px;
         color: #111;
         line-height: 1.2
      }

      .wd-lead small {
         font-size: 10.5px;
         color: #8a8a8a
      }

      /* ============================================================
   WHY YOUR WEBSITE DECIDES (light, 2-col + funnel)
   ============================================================ */
      .wd-split {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 58px;
         align-items: center
      }

      .wd-split .lead {
         font-size: 17px;
         line-height: 1.8;
         color: #565656;
         margin: 24px 0 0
      }

      .wd-note {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         margin-top: 24px;
         font-size: 14px;
         font-weight: 600;
         color: #333;
         background: #fff4ef;
         border: 1px solid #ffd8c6;
         border-radius: 30px;
         padding: 10px 18px
      }

      .wd-note svg {
         width: 16px;
         height: 16px;
         stroke: var(--o)
      }

      .wd-funnel {
         background: #fff;
         border: 1px solid #f0e5de;
         border-radius: 20px;
         padding: 26px 24px;
         box-shadow: 0 24px 56px rgba(0, 0, 0, .09)
      }

      .wd-funnel .th {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .7px;
         text-transform: uppercase;
         color: #9a9a9a;
         margin: 0 0 14px
      }

      .wd-funnel .src {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 10px
      }

      .wd-funnel .src .s {
         display: flex;
         align-items: center;
         gap: 8px;
         background: #faf7f5;
         border: 1px solid #f0e5de;
         border-radius: 12px;
         padding: 11px 12px;
         font-size: 13px;
         font-weight: 600;
         color: #444
      }

      .wd-funnel .src .s svg {
         width: 16px;
         height: 16px;
         stroke: var(--o);
         flex: 0 0 auto
      }

      .wd-funnel .down {
         display: flex;
         justify-content: center;
         margin: 8px 0
      }

      .wd-funnel .down svg {
         width: 22px;
         height: 22px;
         stroke: #c9beb6
      }

      .wd-funnel .hub {
         display: flex;
         align-items: center;
         gap: 12px;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         border-radius: 14px;
         padding: 15px 18px;
         color: #fff;
         box-shadow: 0 14px 30px rgba(255, 122, 69, .32)
      }

      .wd-funnel .hub .ic {
         width: 40px;
         height: 40px;
         border-radius: 11px;
         background: rgba(255, 255, 255, .18);
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto
      }

      .wd-funnel .hub .ic svg {
         width: 22px;
         height: 22px;
         stroke: #fff
      }

      .wd-funnel .hub b {
         font-size: 15px;
         display: block;
         line-height: 1.2
      }

      .wd-funnel .hub small {
         font-size: 11.5px;
         opacity: .92
      }

      .wd-funnel .out {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         background: #0e0f12;
         border-radius: 12px;
         padding: 13px;
         color: #fff;
         font-size: 13.5px;
         font-weight: 700;
         margin-top: 8px
      }

      .wd-funnel .out svg {
         width: 16px;
         height: 16px;
         stroke: var(--o2)
      }

      /* ============================================================
   WHAT WE BUILD (cream, 4 cards)
   ============================================================ */
      .wd-do {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 22px;
         margin-top: 52px
      }

      .wd-do .it {
         background: #fff;
         border: 1px solid #f2ece7;
         border-radius: 18px;
         padding: 30px 26px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
         transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
      }

      .wd-do .it:hover {
         transform: translateY(-10px);
         box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
         border-color: #ffd8c6
      }

      .wd-do .it h4 {
         font-size: 17px;
         font-weight: 600;
         color: #111;
         margin: 0 0 9px
      }

      .wd-do .it p {
         font-size: 14px;
         line-height: 1.7;
         color: #666;
         margin: 0
      }

      /* ============================================================
   WHAT YOU GET (dark; checklist + performance dashboard)
   ============================================================ */
      .wd-get {
         background: var(--dark);
         position: relative;
         overflow: hidden
      }

      .wd-get:before {
         content: "";
         position: absolute;
         bottom: -160px;
         left: -120px;
         width: 560px;
         height: 560px;
         background: radial-gradient(circle, rgba(255, 122, 69, .16), transparent 62%);
         pointer-events: none
      }

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

      .wd-get .wd-head h2 {
         color: #fff
      }

      .wd-get .wd-head p {
         color: #b9bcc6
      }

      .wd-getwrap {
         display: grid;
         grid-template-columns: 1fr 1.05fr;
         gap: 56px;
         align-items: center;
         margin-top: 8px
      }

      .wd-checklist {
         list-style: none;
         padding: 0;
         margin: 26px 0 0
      }

      .wd-checklist li {
         position: relative;
         padding: 0 0 18px 44px;
         color: #e7e8ee;
         font-size: 16px;
         line-height: 1.55;
         font-weight: 500
      }

      .wd-checklist li:last-child {
         padding-bottom: 0
      }

      .wd-checklist li:before {
         content: "";
         position: absolute;
         left: 0;
         top: -1px;
         width: 28px;
         height: 28px;
         border-radius: 9px;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: center;
         background-size: 15px
      }

      .wd-score {
         background: #fff;
         border-radius: 20px;
         box-shadow: 0 34px 70px rgba(0, 0, 0, .42);
         border: 1px solid #f0e5de;
         overflow: hidden
      }

      .wd-score .sh {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 18px 22px;
         border-bottom: 1px solid #f0eae6
      }

      .wd-score .sh b {
         font-size: 14.5px;
         font-weight: 700;
         color: #111
      }

      .wd-score .sh .up {
         display: inline-flex;
         align-items: center;
         gap: 5px;
         font-size: 11.5px;
         font-weight: 700;
         color: var(--o);
         background: #fff0e8;
         border: 1px solid #ffd8c6;
         padding: 4px 10px;
         border-radius: 20px
      }

      .wd-score .sh .up svg {
         width: 12px;
         height: 12px;
         stroke: var(--o)
      }

      .wd-score .sb {
         display: flex;
         align-items: center;
         gap: 20px;
         padding: 22px 22px 8px
      }

      .wd-score .ring {
         position: relative;
         width: 96px;
         height: 96px;
         flex: 0 0 96px
      }

      .wd-score .ring svg {
         width: 96px;
         height: 96px;
         transform: rotate(-90deg)
      }

      .wd-score .ring .v {
         position: absolute;
         inset: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center
      }

      .wd-score .ring .v b {
         font-size: 26px;
         font-weight: 800;
         color: #111;
         line-height: 1
      }

      .wd-score .ring .v small {
         font-size: 10px;
         color: #9a9a9a;
         font-weight: 600
      }

      .wd-score .sx b {
         display: block;
         font-size: 14px;
         font-weight: 700;
         color: #111
      }

      .wd-score .sx p {
         margin: 5px 0 0;
         font-size: 12.5px;
         color: #777;
         line-height: 1.5
      }

      .wd-score .tiles {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 12px;
         padding: 14px 22px 22px
      }

      .wd-score .tiles .tl {
         background: #faf7f5;
         border: 1px solid #f0e5de;
         border-radius: 12px;
         padding: 13px 10px;
         text-align: center
      }

      .wd-score .tiles .tl .n {
         display: block;
         font-size: 20px;
         font-weight: 800;
         color: var(--o);
         line-height: 1
      }

      .wd-score .tiles .tl .l {
         display: block;
         font-size: 11px;
         color: #8a8a8a;
         font-weight: 600;
         margin-top: 5px
      }

      /* WHO IT'S FOR tags */
      .wd-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 14px;
         justify-content: center;
         margin-top: 44px
      }

      .wd-tags .tg {
         background: #fff;
         border: 1px solid #efe1d9;
         border-radius: 40px;
         padding: 13px 22px;
         font-size: 14px;
         font-weight: 600;
         color: #222;
         box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
         transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease
      }

      .wd-tags .tg:hover {
         border-color: var(--o);
         color: var(--o);
         transform: translateY(-4px);
         box-shadow: 0 12px 26px rgba(255, 122, 69, .2)
      }

      /* ===== Reused: Why Digital Rafter + Pricing (dwp) ===== */
      .dwp,
      .dwp h2,
      .dwp h3,
      .dwp h4,
      .dwp p,
      .dwp span,
      .dwp a,
      .dwp li,
      .dwp div {
         font-family: "Poppins", sans-serif
      }

      .dwp .cmn_padd {
         padding: 88px 20px
      }

      .dwp .container {
         max-width: 1180px;
         width: 100%;
         margin-left: auto;
         margin-right: auto;
         padding-left: 20px;
         padding-right: 20px
      }

      .dwp-why {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         grid-auto-rows: 1fr;
         gap: 24px;
         max-width: 1160px;
         margin: 52px auto 0
      }

      .dwp-why .it {
         background: #fff;
         border: 1px solid #f2ece7;
         border-radius: 18px;
         padding: 32px 26px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
         transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
      }

      .dwp-why .it:hover {
         transform: translateY(-10px);
         box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
         border-color: #ffd8c6
      }

      .dwp-why .it h4 {
         font-size: 17px;
         font-weight: 600;
         color: #111;
         margin: 0 0 8px
      }

      .dwp-why .it p {
         font-size: 14px;
         line-height: 1.7;
         color: #666;
         margin: 0
      }

      .dwp-ic {
         width: 58px;
         height: 58px;
         border-radius: 15px;
         background: linear-gradient(135deg, #fff2ea, #ffe0d1);
         border: 1px solid #ffe0d1;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--o);
         margin: 0 0 18px;
         box-shadow: 0 8px 20px rgba(255, 122, 69, .16)
      }

      .dwp-ic svg {
         width: 28px;
         height: 28px;
         stroke: var(--o)
      }

      .dwp-price {
         display: flex;
         flex-wrap: wrap;
         gap: 26px;
         justify-content: center;
         align-items: stretch;
         margin-top: 54px
      }

      .dwp-tier {
         flex: 1 1 300px;
         max-width: 350px;
         background: #fff;
         border: 1px solid #efe1d9;
         border-radius: 20px;
         padding: 38px 32px;
         display: flex;
         flex-direction: column;
         box-shadow: 0 12px 34px rgba(0, 0, 0, .06);
         transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease
      }

      .dwp-tier:hover {
         transform: translateY(-8px);
         box-shadow: 0 28px 56px rgba(255, 122, 69, .16)
      }

      .dwp-tier.pop {
         border: 2px solid var(--o);
         transform: scale(1.045);
         position: relative;
         box-shadow: 0 26px 56px rgba(255, 122, 69, .26);
         background: linear-gradient(180deg, #fffaf7, #fff)
      }

      .dwp-tier.pop:hover {
         transform: scale(1.045) translateY(-8px)
      }

      .dwp-badge {
         position: absolute;
         top: -15px;
         left: 50%;
         transform: translateX(-50%);
         background: var(--o);
         color: #fff;
         font-size: 12px;
         font-weight: 700;
         padding: 7px 18px;
         border-radius: 20px;
         letter-spacing: .5px;
         white-space: nowrap;
         box-shadow: 0 10px 22px rgba(255, 122, 69, .4)
      }

      .dwp-tier h3 {
         font-size: 20px;
         font-weight: 700;
         color: #111;
         margin: 0 0 8px
      }

      .dwp-amt {
         font-size: 40px;
         font-weight: 800;
         color: #111;
         line-height: 1;
         margin: 0
      }

      .dwp-amt span {
         font-size: 15px;
         font-weight: 500;
         color: #888
      }

      .dwp-tier .desc {
         font-size: 14px;
         color: #666;
         line-height: 1.6;
         margin: 12px 0 22px
      }

      .dwp-feats {
         list-style: none;
         padding: 0;
         margin: 0 0 28px
      }

      .dwp-feats li {
         position: relative;
         padding: 0 0 13px 28px;
         font-size: 14px;
         color: #444;
         line-height: 1.5
      }

      .dwp-feats li:before {
         content: "";
         position: absolute;
         left: 0;
         top: 2px;
         width: 18px;
         height: 18px;
         border-radius: 50%;
         background: #fff0e8;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a45' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: center;
         background-size: 12px
      }

      .dwp-btn {
         display: block;
         text-align: center;
         background: var(--o);
         color: #fff;
         font-weight: 600;
         font-size: 15px;
         padding: 15px;
         border-radius: 10px;
         text-decoration: none;
         margin-top: auto;
         border: 2px solid var(--o);
         transition: transform .25s ease, box-shadow .25s ease, background .25s ease
      }

      .dwp-btn:hover {
         background: var(--od);
         border-color: var(--od);
         color: #fff;
         transform: translateY(-3px);
         box-shadow: 0 14px 30px rgba(255, 122, 69, .36)
      }

      .dwp-tier:not(.pop) .dwp-btn {
         background: #fff;
         color: var(--o)
      }

      .dwp-tier:not(.pop) .dwp-btn:hover {
         background: var(--o);
         color: #fff
      }

      .dwp-sub {
         text-align: center;
         color: #9a8f8a;
         font-size: 13px;
         margin: 14px auto 0;
         font-style: italic
      }

      .dwp-fine {
         text-align: center;
         color: #777;
         font-size: 14px;
         margin: 44px auto 0
      }

      /* ============================================================
   CLOSING CTA (dark)
   ============================================================ */
      .wd-close {
         background: var(--dark);
         position: relative;
         overflow: hidden;
         padding: 78px 20px
      }

      .wd-close:before {
         content: "";
         position: absolute;
         top: -140px;
         left: 50%;
         transform: translateX(-50%);
         width: 640px;
         height: 420px;
         background: radial-gradient(circle, rgba(255, 122, 69, .24), transparent 62%);
         pointer-events: none
      }

      .wd-close .container {
         position: relative;
         z-index: 2;
         text-align: center
      }

      .wd-close h2 {
         color: #fff;
         font-size: 36px;
         font-weight: 700;
         margin: 0 auto 14px;
         letter-spacing: -.4px;
         max-width: 720px
      }

      .wd-close h2 span {
         color: var(--o)
      }

      .wd-close p {
         color: #b9bcc6;
         font-size: 16.5px;
         line-height: 1.7;
         max-width: 560px;
         margin: 0 auto
      }

      .wd-close .wd-btns {
         justify-content: center
      }

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

      @media(max-width:1200px) {
         .wd-btn {
            padding: 15px;
         }
      }


      @media(max-width:992px) {
         .wd-hero {
            padding: 96px 18px 76px
         }

         .wd-hero .container {
            grid-template-columns: 1fr;
            gap: 48px
         }

         .wd-h1 {
            font-size: 42px
         }

         .wd-ba {
            margin: 0 auto
         }

         .wd-split,
         .wd-getwrap {
            grid-template-columns: 1fr;
            gap: 42px
         }

         .wd-head.left {
            text-align: center;
            margin: 0 auto
         }

         .wd-head.left .uline {
            margin: 18px auto 0
         }

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

         .wd-get .wd-head {
            text-align: center;
            margin: 0 auto
         }

         .wd-get .wd-head .uline {
            margin: 18px auto 0
         }

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

      @media(max-width:600px) {
         .wd-h1 {
            font-size: 34px
         }

         .wd-head h2,
         .wd-close h2 {
            font-size: 28px
         }

         .wd-do,
         .dwp-why {
            grid-template-columns: 1fr
         }

         .wd-btns {
            flex-direction: column
         }

         .wd-btn {
            justify-content: center
         }

         .wd-lead {
            right: 0
         }
      }

@media (max-width: 991px) {
   .wd-hero {
      padding-top: 140px
   }
}