/* ============================================================
   Local SEO — visual redesign  (brand: #ff7a45 / black / white / cream)
   ============================================================ */
      .lseo,
      .lseo h1,
      .lseo h2,
      .lseo h3,
      .lseo h4,
      .lseo h5,
      .lseo p,
      .lseo span,
      .lseo a,
      .lseo div,
      .lseo li {
         font-family: "Poppins", sans-serif
      }

      .lseo {
         --o: #ff7a45;
         --o2: #ff9e6b;
         --od: #e5622f;
         --ink: #141414;
         --cream: #FFF4EF;
         --dark: #0e0f12;
         --dark2: #17181d
      }

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

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

      .lseo .container {
         max-width: 1180px;
         margin: 0 auto
      }

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

      /* ---------- buttons ---------- */
      .lseo-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)
      }

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

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

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

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

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

      /* ---------- scroll reveal ---------- */
      .lseo .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)
      }

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

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

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

      /* ---------- section heading ---------- */
      .lseo-head {
         text-align: center;
         max-width: 780px;
         margin: 0 auto
      }

      .lseo-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
      }

      .lseo-eyebrow svg {
         width: 14px;
         height: 14px
      }

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

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

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

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

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

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

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

      /* ---------- icon chip ---------- */
      .lseo-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)
      }

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

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

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

      .lseo-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
      }

      .lseo-hero .container {
         position: relative;
         z-index: 2;
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 56px;
         align-items: center
      }

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

      .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: 24px
      }

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

      .lseo-h1 {
         font-size: 56px;
         line-height: 1.08;
         font-weight: 800;
         color: #fff;
         margin: 0 0 20px;
         letter-spacing: -.5px
      }

      .lseo-h1 span {
         color: var(--o);
         position: relative;
         white-space: nowrap
      }

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

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

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

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

      /* hero entrance */
      .lseo-hero .anim {
         opacity: 0;
         transform: translateY(26px);
         animation: heroUp .8s cubic-bezier(.16, 1, .3, 1) forwards
      }

      .lseo-hero .anim.d1 {
         animation-delay: .08s
      }

      .lseo-hero .anim.d2 {
         animation-delay: .18s
      }

      .lseo-hero .anim.d3 {
         animation-delay: .28s
      }

      .lseo-hero .anim.d4 {
         animation-delay: .4s
      }

      .lseo-hero .anim.d5 {
         animation-delay: .5s
      }

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

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

      /* AI answer card mockup (hero right) */
      .lseo-float {
         animation: floaty 6s ease-in-out infinite
      }

      @keyframes floaty {

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

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

      .aicard {
         position: relative;
         background: #fff;
         border-radius: 20px;
         padding: 22px 22px 24px;
         box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
         max-width: 430px;
         margin-left: auto
      }

      .aicard .bar {
         display: flex;
         align-items: center;
         gap: 8px;
         padding-bottom: 15px;
         border-bottom: 1px solid #f0eae6;
         margin-bottom: 16px
      }

      .aicard .spark {
         width: 26px;
         height: 26px;
         border-radius: 8px;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         display: flex;
         align-items: center;
         justify-content: center
      }

      .aicard .spark svg {
         width: 15px;
         height: 15px;
         stroke: #fff
      }

      .aicard .bar b {
         font-size: 13.5px;
         color: #111;
         font-weight: 700
      }

      .aicard .bar em {
         font-size: 11.5px;
         color: #9a9a9a;
         font-style: normal;
         margin-left: auto
      }

      .aicard .q {
         display: inline-block;
         background: #f4f1ee;
         color: #333;
         font-size: 13.5px;
         font-weight: 500;
         padding: 9px 15px;
         border-radius: 14px 14px 14px 4px;
         margin-bottom: 15px
      }

      .aicard .ans {
         font-size: 13.5px;
         line-height: 1.7;
         color: #555;
         margin: 0 0 15px
      }

      .aicard .ans b {
         color: #111
      }

      .biz {
         border: 1.5px solid #ffe0d1;
         background: linear-gradient(135deg, #fff8f4, #fff);
         border-radius: 14px;
         padding: 15px 16px;
         position: relative
      }

      .biz .rec {
         position: absolute;
         top: -11px;
         right: 14px;
         background: var(--o);
         color: #fff;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .4px;
         padding: 5px 11px;
         border-radius: 20px;
         box-shadow: 0 6px 14px rgba(255, 122, 69, .4)
      }

      .biz .bn {
         display: flex;
         align-items: center;
         gap: 10px
      }

      .biz .logo {
         width: 38px;
         height: 38px;
         border-radius: 10px;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         color: #fff;
         font-weight: 800;
         font-size: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto
      }

      .biz .bn h5 {
         margin: 0;
         font-size: 14.5px;
         font-weight: 700;
         color: #111
      }

      .biz .bn .meta {
         font-size: 11.5px;
         color: #8a8a8a;
         display: flex;
         align-items: center;
         gap: 5px;
         margin-top: 2px
      }

      .biz .bn .meta svg {
         width: 12px;
         height: 12px;
         stroke: #8a8a8a
      }

      .biz .stars {
         color: var(--o);
         font-size: 12.5px;
         letter-spacing: 2px;
         margin: 11px 0 0
      }

      .biz .stars small {
         color: #999;
         font-size: 11.5px;
         letter-spacing: 0;
         margin-left: 6px
      }

      .aicard .src {
         display: flex;
         gap: 7px;
         flex-wrap: wrap;
         margin-top: 15px
      }

      .aicard .src .c {
         font-size: 10.5px;
         color: #8a8a8a;
         background: #f4f1ee;
         border-radius: 20px;
         padding: 4px 11px
      }

      /* =====================================================================
   BEFORE / AFTER band
   ===================================================================== */
      .lseo-ba {
         background: var(--cream)
      }

      .ba-grid {
         display: grid;
         grid-template-columns: 1fr auto 1fr;
         gap: 26px;
         align-items: center;
         margin-top: 48px
      }

      .ba-card {
         background: #fff;
         border-radius: 18px;
         padding: 26px 26px 28px;
         box-shadow: 0 14px 40px rgba(0, 0, 0, .07);
         position: relative;
         border: 1px solid #f0e5de
      }

      .ba-card.before {
         background: #f4f2f0;
         border: 1px solid #e7e2dd
      }

      .ba-tag {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: 1.2px;
         text-transform: uppercase;
         padding: 6px 13px;
         border-radius: 20px;
         margin-bottom: 18px
      }

      .ba-card.before .ba-tag {
         background: #e6e2de;
         color: #8a8078
      }

      .ba-card.after .ba-tag {
         background: #fff0e8;
         color: var(--o)
      }

      .ba-q {
         font-size: 13px;
         color: #8f8f8f;
         margin: 0 0 12px
      }

      .ba-q b {
         color: #4a4a4a
      }

      .ba-line {
         display: flex;
         align-items: center;
         gap: 10px;
         font-size: 13.5px;
         padding: 9px 0;
         border-bottom: 1px dashed #e5ded8;
         color: #7c7c7c
      }

      .ba-line:last-child {
         border-bottom: 0
      }

      .ba-line .dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background: #c9c2bb;
         flex: 0 0 auto
      }

      .ba-line.you {
         color: #a09890;
         font-weight: 600
      }

      .ba-line.you .dot {
         background: #c9c2bb
      }

      .ba-card.after .ba-line {
         color: #555
      }

      .ba-card.after .ba-line .dot {
         background: var(--o2)
      }

      .ba-card.after .ba-line.you {
         background: linear-gradient(135deg, #fff5f0, #ffe9df);
         border: 1.5px solid #ffd6c4;
         border-radius: 12px;
         padding: 12px 14px;
         color: #111;
         font-weight: 700;
         margin-top: 6px
      }

      .ba-card.after .ba-line.you .dot {
         width: 20px;
         height: 20px;
         background: var(--o);
         display: flex;
         align-items: center;
         justify-content: center
      }

      .ba-card.after .ba-line.you .dot svg {
         width: 12px;
         height: 12px;
         stroke: #fff
      }

      .ba-card.after .ba-line.you .rb {
         margin-left: auto;
         background: var(--o);
         color: #fff;
         font-size: 10px;
         font-weight: 700;
         padding: 3px 9px;
         border-radius: 20px
      }

      .ba-foot {
         margin-top: 18px;
         font-size: 13px;
         font-weight: 700
      }

      .ba-card.before .ba-foot {
         color: #a89f97
      }

      .ba-card.after .ba-foot {
         color: var(--o)
      }

      .ba-arrow {
         width: 62px;
         height: 62px;
         border-radius: 50%;
         background: var(--o);
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 14px 30px rgba(255, 122, 69, .4);
         animation: pulse 2.4s ease-in-out infinite
      }

      .ba-arrow svg {
         width: 28px;
         height: 28px;
         stroke: #fff
      }

      @keyframes pulse {

         0%,
         100% {
            transform: scale(1)
         }

         50% {
            transform: scale(1.09)
         }
      }

      @media(prefers-reduced-motion:reduce) {
         .ba-arrow {
            animation: none
         }
      }

      /* =====================================================================
   Generic two-column split (Why / Result)
   ===================================================================== */
      .lseo-split {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center
      }

      .lseo-split.rev .split-media {
         order: -1
      }

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

      .split-points {
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         margin-top: 26px
      }

      .split-points .p {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         font-size: 13.5px;
         font-weight: 600;
         color: #333;
         background: #fff;
         border: 1px solid #efe1d9;
         border-radius: 30px;
         padding: 9px 16px;
         box-shadow: 0 6px 18px rgba(0, 0, 0, .05)
      }

      .split-points .p svg {
         width: 15px;
         height: 15px;
         stroke: var(--o)
      }

      /* WHY media: old links -> AI answer (layered/overlap) */
      .whymedia {
         position: relative;
         min-height: 340px
      }

      .whymedia .old {
         background: #fff;
         border: 1px solid #ececec;
         border-radius: 16px;
         padding: 20px 22px;
         box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
         max-width: 330px;
         transform: rotate(-4deg);
         filter: grayscale(.15)
      }

      .whymedia .old .lab {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: 1px;
         text-transform: uppercase;
         color: #b7b7b7;
         margin-bottom: 14px
      }

      .whymedia .old .bl {
         margin-bottom: 14px;
         opacity: .6
      }

      .whymedia .old .bl b {
         display: block;
         font-size: 13px;
         color: #1a53c0;
         font-weight: 600;
         margin-bottom: 5px
      }

      .whymedia .old .bl i {
         display: block;
         height: 6px;
         border-radius: 4px;
         background: #e4e4e4;
         font-style: normal
      }

      .whymedia .old .bl i+i {
         margin-top: 5px;
         width: 80%
      }

      .whymedia .new {
         position: absolute;
         right: 0;
         bottom: 0;
         background: var(--dark);
         border-radius: 16px;
         padding: 20px 22px;
         box-shadow: 0 26px 60px rgba(0, 0, 0, .32);
         max-width: 320px;
         transform: rotate(3deg)
      }

      .whymedia .new .lab {
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 11px;
         font-weight: 700;
         letter-spacing: 1px;
         text-transform: uppercase;
         color: var(--o2);
         margin-bottom: 13px
      }

      .whymedia .new .lab svg {
         width: 14px;
         height: 14px;
         stroke: var(--o2)
      }

      .whymedia .new p {
         font-size: 13px;
         line-height: 1.65;
         color: #c8cbd3;
         margin: 0 0 13px
      }

      .whymedia .new p b {
         color: #fff
      }

      .whymedia .new .chip {
         display: flex;
         align-items: center;
         gap: 9px;
         background: rgba(255, 122, 69, .14);
         border: 1px solid rgba(255, 122, 69, .3);
         border-radius: 12px;
         padding: 11px 13px
      }

      .whymedia .new .chip .lg {
         width: 30px;
         height: 30px;
         border-radius: 8px;
         background: var(--o);
         color: #fff;
         font-weight: 800;
         font-size: 13px;
         display: flex;
         align-items: center;
         justify-content: center
      }

      .whymedia .new .chip b {
         font-size: 13px;
         color: #fff
      }

      .whymedia .new .chip .bd {
         margin-left: auto;
         background: var(--o);
         color: #fff;
         font-size: 9.5px;
         font-weight: 700;
         padding: 3px 8px;
         border-radius: 20px
      }

      /* RESULT media: map + result card */
      .resmedia {
         position: relative;
         min-height: 360px
      }

      .resmap {
         position: relative;
         background: linear-gradient(135deg, #fff6f1, #ffe9df);
         border: 1px solid #ffe0d1;
         border-radius: 20px;
         height: 360px;
         overflow: hidden;
         box-shadow: 0 18px 46px rgba(0, 0, 0, .08)
      }

      .resmap svg.grid {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         opacity: .5
      }

      .resmap .pin {
         position: absolute;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: rgba(255, 122, 69, .3)
      }

      .resmap .pin.p1 {
         top: 26%;
         left: 22%
      }

      .resmap .pin.p2 {
         top: 64%;
         left: 34%
      }

      .resmap .pin.p3 {
         top: 40%;
         left: 74%
      }

      .resmap .pin.p4 {
         top: 76%;
         left: 70%
      }

      .resmap .main {
         position: absolute;
         top: 42%;
         left: 47%;
         transform: translate(-50%, -50%);
         text-align: center
      }

      .resmap .main .ring {
         width: 54px;
         height: 54px;
         border-radius: 50%;
         background: var(--o);
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 10px 26px rgba(255, 122, 69, .5);
         margin: 0 auto;
         animation: pulse 2.4s ease-in-out infinite
      }

      .resmap .main .ring svg {
         width: 26px;
         height: 26px;
         stroke: #fff
      }

      .rescard {
         position: absolute;
         right: -6px;
         bottom: -14px;
         background: #fff;
         border-radius: 14px;
         padding: 14px 16px;
         box-shadow: 0 22px 50px rgba(0, 0, 0, .16);
         display: flex;
         align-items: center;
         gap: 12px;
         max-width: 270px;
         border: 1px solid #f0e5de
      }

      .rescard .lg {
         width: 40px;
         height: 40px;
         border-radius: 10px;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         color: #fff;
         font-weight: 800;
         font-size: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto
      }

      .rescard h5 {
         margin: 0;
         font-size: 13.5px;
         font-weight: 700;
         color: #111
      }

      .rescard .st {
         color: var(--o);
         font-size: 11px;
         letter-spacing: 1px
      }

      .rescard .st small {
         color: #999;
         letter-spacing: 0;
         margin-left: 4px
      }

      .rescard .bd {
         position: absolute;
         top: -10px;
         left: 14px;
         background: var(--o);
         color: #fff;
         font-size: 9.5px;
         font-weight: 700;
         padding: 4px 10px;
         border-radius: 20px
      }

      /* RESULT list (right) */
      .reslist {
         display: flex;
         flex-direction: column;
         gap: 6px;
         margin-top: 26px
      }

      .resitem {
         display: flex;
         gap: 16px;
         padding: 16px 0;
         position: relative
      }

      .resitem:not(:last-child):after {
         content: "";
         position: absolute;
         left: 28px;
         top: 64px;
         bottom: -6px;
         width: 2px;
         background: linear-gradient(#ffd8c6, transparent)
      }

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

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

      .resitem h4 {
         margin: 4px 0 5px;
         font-size: 18px;
         font-weight: 600;
         color: #111
      }

      .resitem p {
         margin: 0;
         font-size: 14.5px;
         line-height: 1.65;
         color: #666
      }

      /* =====================================================================
   WHAT WE DO grid (5 cards)
   ===================================================================== */
      .lseo-grid {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
         grid-auto-rows: 1fr;
         gap: 24px;
         max-width: 1160px;
         margin: 52px auto 0
      }

      .lseo-grid .it:nth-child(4) {
         grid-column: 2 / span 2
      }

      .lseo-grid .it:nth-child(5) {
         grid-column: 4 / span 2
      }

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

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

      .lseo-grid .it h4 {
         font-size: 18.5px;
         font-weight: 600;
         color: #111;
         margin: 0 0 9px
      }

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

      /* THE RESULT / 3-up (kept for other uses) */
      .lseo-3 {
         display: flex;
         flex-wrap: wrap;
         gap: 24px;
         margin-top: 44px
      }

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

      .lseo-3 .it:hover {
         transform: translateY(-10px);
         box-shadow: 0 26px 52px rgba(255, 122, 69, .16)
      }

      .lseo-3 .it h4 {
         font-size: 18px;
         font-weight: 600;
         color: #111;
         margin: 0 0 8px
      }

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

      /* =====================================================================
   FEATURED PROJECTS (dark)
   ===================================================================== */
      .lseo-fp {
         background: var(--dark);
         position: relative;
         overflow: hidden
      }

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

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

      .lseo-fp .lseo-head h2 {
         color: #fff
      }

      .lseo-fp .lseo-head p {
         color: #b9bcc6
      }

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

      .lseo-fpgrid .it {
         grid-column: span 2;
         background: #fff;
         border-radius: 18px;
         padding: 30px 28px;
         box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
         transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease;
         display: flex;
         flex-direction: column;
         border: 1px solid rgba(255, 255, 255, .06)
      }

      .lseo-fpgrid .it:hover {
         transform: translateY(-10px);
         box-shadow: 0 30px 60px rgba(255, 122, 69, .28)
      }

      .lseo-fpgrid .it:nth-child(4) {
         grid-column: 2 / span 2
      }

      .lseo-fpgrid .it:nth-child(5) {
         grid-column: 4 / span 2
      }

      .lseo-fpgrid .it h4 {
         font-size: 18px;
         font-weight: 700;
         color: #111;
         margin: 0 0 16px
      }

      .lseo-big {
         margin: 0 0 2px
      }

      .lseo-big .num {
         font-size: 34px;
         font-weight: 800;
         color: var(--o);
         line-height: 1
      }

      .lseo-big .lbl {
         display: block;
         font-size: 13px;
         color: #777;
         font-weight: 600;
         margin-top: 6px
      }

      .lseo-sec {
         margin-top: auto;
         padding-top: 14px;
         border-top: 1px solid #efe7e2;
         font-size: 14px;
         color: #555;
         font-weight: 500
      }

      .lseo-fpgrid a.it {
         text-decoration: none;
         color: inherit
      }

      .lseo-cs {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         color: var(--o);
         font-weight: 700;
         font-size: 13px;
         margin-top: 16px
      }

      .lseo-cs svg {
         width: 14px;
         height: 14px;
         stroke: var(--o);
         transition: transform .25s ease
      }

      .lseo-fpgrid a.it:hover .lseo-cs svg {
         transform: translateX(4px)
      }

      /* =====================================================================
   TESTIMONIALS
   ===================================================================== */
      .lseo-tst {
         display: flex;
         flex-wrap: wrap;
         gap: 26px;
         justify-content: center;
         margin-top: 52px
      }

      .lseo-tst .tc {
         flex: 1 1 380px;
         max-width: 520px;
         background: #fff;
         border-radius: 18px;
         padding: 34px 32px;
         box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
         border: 1px solid #f2ece7;
         position: relative;
         transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease
      }

      .lseo-tst .tc:before {
         content: "\201C";
         position: absolute;
         top: 8px;
         right: 26px;
         font-size: 88px;
         line-height: 1;
         color: #ffe0d1;
         font-family: Georgia, serif
      }

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

      .lseo-tst .stars {
         color: var(--o);
         font-size: 16px;
         letter-spacing: 3px;
         margin-bottom: 14px;
         position: relative
      }

      .lseo-tst .q {
         font-size: 16px;
         line-height: 1.75;
         color: #333;
         margin: 0 0 22px;
         position: relative
      }

      .lseo-tst .who {
         display: flex;
         align-items: center;
         gap: 13px
      }

      .lseo-tst .av {
         width: 46px;
         height: 46px;
         border-radius: 50%;
         background: linear-gradient(135deg, var(--o), #ff9e6b);
         color: #fff;
         font-weight: 700;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 18px;
         box-shadow: 0 8px 18px rgba(255, 122, 69, .3)
      }

      .lseo-tst .nm {
         font-weight: 600;
         color: #111
      }

      .lseo-tst .nm small {
         display: block;
         font-weight: 500;
         color: #999;
         font-size: 12.5px
      }

      /* =====================================================================
   WHY DIGITAL RAFTER
   ===================================================================== */
      .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;
         margin: 0 auto
      }

      .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)
      }

      /* WHO IT'S FOR tags */
      .lseo-lead {
         font-size: 16px;
         line-height: 1.75;
         color: #5c5c5c;
         max-width: 780px;
         margin: 22px auto 0;
         text-align: center
      }

      .lseo-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 14px;
         justify-content: center;
         margin-top: 44px
      }

      .lseo-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
      }

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

      /* PRICING */
      .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
      }

      /* =====================================================================
   FINAL CTA (dark)
   ===================================================================== */
      .lseo-close {
         background: var(--dark);
         text-align: center;
         padding: 88px 20px;
         position: relative;
         overflow: hidden
      }

      .lseo-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
      }

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

      .lseo-close h2 {
         color: #fff;
         font-size: 40px;
         font-weight: 700;
         margin: 0 auto 16px;
         max-width: 760px;
         text-align: center;
         letter-spacing: -.4px
      }

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

      .lseo-close p {
         color: #b9bcc6;
         font-size: 16.5px;
         line-height: 1.7;
         max-width: 600px;
         margin: 0 auto;
         text-align: center
      }

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

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

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


      @media(max-width:992px) {
         .lseo-hero .container {
            grid-template-columns: 1fr;
            gap: 48px
         }

         .lseo-h1 {
            font-size: 44px
         }

         .aicard {
            margin: 0 auto
         }

         .lseo-split {
            grid-template-columns: 1fr;
            gap: 40px
         }

         .lseo-split.rev .split-media {
            order: 0
         }

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

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

         .split-points {
            justify-content: center
         }

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

         .lseo-grid .it,
         .lseo-grid .it:nth-child(4),
         .lseo-grid .it:nth-child(5),
         .lseo-fpgrid .it,
         .lseo-fpgrid .it:nth-child(4),
         .lseo-fpgrid .it:nth-child(5) {
            grid-column: auto
         }

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

         .whymedia {
            min-height: 420px;
            max-width: 400px;
            margin: 0 auto
         }
      }

      @media(max-width:767px) {
         .lseo-h1 {
            font-size: 36px
         }

         .lseo-head h2,
         .lseo-close h2 {
            font-size: 30px
         }

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

         .ba-arrow {
            transform: rotate(90deg);
            margin: 0 auto
         }

         @keyframes pulse {

            0%,
            100% {
               transform: rotate(90deg) scale(1)
            }

            50% {
               transform: rotate(90deg) scale(1.09)
            }
         }
      }

      @media(max-width:560px) {

         .lseo-grid,
         .lseo-fpgrid,
         .dwp-why {
            grid-template-columns: 1fr
         }

         .lseo-hero {
            padding: 92px 18px 84px
         }

         .lseo-btns {
            flex-direction: column
         }

         .lseo-btn {
            justify-content: center
         }
      }

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