/* ─── BASE ───────────────────────────────────── */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'DM Sans', sans-serif;
     color: #0f172a;
     background: #ffffff;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Syne', sans-serif;
 }

 a {
     text-decoration: none;
 }

 /* ─── UTILITIES ──────────────────────────────── */
 .offers-section {
     padding: 70px 0;
 }

 .offers-section--tight {
     padding: 72px 0;
 }

 .offers-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: #2563eb;
     background: rgba(37, 99, 235, .08);
     border: 1px solid rgba(37, 99, 235, .15);
     border-radius: 100px;
     padding: 5px 14px;
     margin-bottom: 20px;
 }

 .offers-label i {
     font-size: .7rem;
 }

 .offers-section-title {
     font-size: clamp(1.85rem, 3vw, 2.6rem);
     font-weight: 800;
     color: #0f172a;
     line-height: 1.2;
     margin-bottom: 14px;
 }

 .offers-section-sub {
     font-size: 1.05rem;
     color: #64748b;
     max-width: 540px;
     line-height: 1.7;
 }

 /* Buttons */
 .offers-btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #ffffff;
     color: #2563eb;
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: .92rem;
     padding: 13px 26px;
     border-radius: 100px;
     border: none;
     box-shadow: 0 2px 14px rgba(37, 99, 235, .18);
     transition: transform .2s ease, box-shadow .2s ease;
     cursor: pointer;
 }

 .offers-btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 24px rgba(37, 99, 235, .26);
     color: #1d4ed8;
 }

 .offers-btn-outline {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: transparent;
     color: rgba(255, 255, 255, .92);
     font-family: 'Syne', sans-serif;
     font-weight: 600;
     font-size: .92rem;
     padding: 12px 26px;
     border-radius: 100px;
     border: 1.5px solid rgba(255, 255, 255, .40);
     transition: all .2s ease;
     cursor: pointer;
 }

 .offers-btn-outline:hover {
     background: rgba(255, 255, 255, .12);
     border-color: rgba(255, 255, 255, .7);
     color: #fff;
 }



 /* ═══════════════════════════════════════
       HERO
    ════════════════════════════════════════ */
 .offers-hero {
     background:
         radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%),
         radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%),
         linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
     padding: 70px 0px;
     position: relative;
     overflow: hidden;
 }

 .email-templetetext {
     padding: 12px 14px;
     color: rgba(255, 255, 255, .85);
     background: rgba(255, 255, 255, .12);
     border-color: rgba(255, 255, 255, .2);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     border-radius: 100px;
     margin-bottom: 20px;
 }

 .offers-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .04) 0%, transparent 60%);
     pointer-events: none;
 }

 .offers-hero-shape {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, .04);
     pointer-events: none;
 }

 .offers-hero-shape--1 {
     width: 440px;
     height: 440px;
     top: -120px;
     right: -80px;
 }



 .offers-hero-headline {
     font-size: clamp(2.2rem, 4.5vw, 3.4rem);
     font-weight: 800;
     color: #ffffff;
     line-height: 1.15;
     margin-bottom: 18px;
 }

 .offers-hero-headline span {
     background: linear-gradient(90deg, #7dd3fc, #a78bfa);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .offers-hero-sub {
     color: rgba(255, 255, 255, .78);
     font-size: 1.08rem;
     line-height: 1.72;
     margin-bottom: 36px;
     max-width: 480px;
 }

 .offers-hero-ctas {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
 }



 /* Mockup */

 /* ── HERO RIGHT — STACKED TEMPLATE CARDS ── */
 .ohr-wrap {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0px 20px;
     min-height: 440px
 }

 .ohr-stack {
     position: relative;
     width: 300px;
     height: 420px
 }

 .ohr-card {
     position: absolute;
     width: 276px;
     border-radius: 16px;
     overflow: hidden;
     height: 390px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
     background: white;

 }

 .ohr-card--3 {
     transform: translateX(-50%) rotate(6deg);
     z-index: 1;
     opacity: .7;
     left: 85%;
     bottom: 0;
 }

 .ohr-card--2 {
     left: 2%;
     transform: translateX(-50%) rotate(-3deg);
     z-index: 2;
     opacity: .88;
     bottom: 0;
 }

 .ohr-card--1 {
     top: 32px;
     left: 50%;
     transform: translateX(-50%) rotate(0deg);
     z-index: 3
 }

 /* Flash Sale card */
 .ohr-c1-head {
     background: linear-gradient(135deg, #1d4ed8, #6c46ff);
     padding: 22px 20px 18px;
     text-align: center
 }

 .ohr-c1-badge {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background: rgba(255, 255, 255, .18);
     color: #fff;
     font-size: .6rem;
     font-weight: 700;
     letter-spacing: .09em;
     text-transform: uppercase;
     padding: 3px 10px;
     border-radius: 100px;
     margin-bottom: 10px
 }

 .ohr-c1-title {
     font-size: 1.4rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.15;
     margin-bottom: 4px
 }

 .ohr-c1-title span {
     color: #fde68a
 }

 .ohr-c1-sub {
     font-size: .68rem;
     color: rgba(255, 255, 255, .75)
 }

 .ohr-c1-body {
     background: #fff;
     padding: 14px 18px
 }

 .ohr-c1-count {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 6px;
     margin-bottom: 12px
 }

 .ohr-c1-t {
     background: #f1f5f9;
     border-radius: 7px;
     padding: 6px 9px;
     text-align: center;
     min-width: 42px
 }

 .ohr-c1-n {
     font-size: 1.1rem;
     font-weight: 800;
     color: #2563eb;
     line-height: 1
 }

 .ohr-c1-l {
     font-size: .52rem;
     color: #94a3b8;
     margin-top: 1px
 }

 .ohr-c1-col {
     font-size: .85rem;
     color: #cbd5e1;
     font-weight: 700
 }

 .ohr-c1-prod {
     display: flex;
     gap: 10px;
     align-items: center;
     background: #f8faff;
     border-radius: 10px;
     padding: 10px 12px;
     margin-bottom: 11px
 }

 .ohr-c1-pimg {
     width: 42px;
     height: 42px;
     border-radius: 8px;
     overflow: hidden;
     flex-shrink: 0
 }

 .ohr-c1-pimg img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .ohr-c1-pname {
     font-size: .74rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 3px
 }

 .ohr-c1-prices {
     display: flex;
     gap: 6px;
     align-items: center
 }

 .ohr-c1-np {
     font-size: .82rem;
     font-weight: 800;
     color: #2563eb
 }

 .ohr-c1-op {
     font-size: .7rem;
     color: #94a3b8;
     text-decoration: line-through
 }

 .ohr-c1-off {
     font-size: .58rem;
     font-weight: 700;
     background: #dcfce7;
     color: #16a34a;
     padding: 2px 6px;
     border-radius: 100px
 }

 .ohr-c1-cta {
     display: block;
     text-align: center;
     background: linear-gradient(90deg, #2563eb, #6c46ff);
     color: #fff;
     font-size: .75rem;
     font-weight: 700;
     padding: 9px;
     border-radius: 8px
 }

 /* Festive card */
 .ohr-c2-head {
     background: linear-gradient(135deg, #b45309, #f59e0b);
     padding: 18px 18px 14px;
     text-align: center
 }

 .ohr-c2-title {
     font-size: 1.05rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 3px
 }

 .ohr-c2-sub {
     font-size: .62rem;
     color: rgba(255, 255, 255, .8)
 }

 .ohr-c2-body {
     background: #fff;
     padding: 12px 16px
 }

 .ohr-c2-row {
     display: flex;
     gap: 8px;
     margin-bottom: 10px
 }

 .ohr-c2-item {
     flex: 1;
     background: #fffbeb;
     border-radius: 8px;
     padding: 8px;
     text-align: center
 }

 .ohr-c2-iimg {
     width: 100%;
     height: 36px;
     border-radius: 5px;
     overflow: hidden;
     margin-bottom: 5px
 }

 .ohr-c2-iimg img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .ohr-c2-ip {
     font-size: .72rem;
     font-weight: 800;
     color: #b45309
 }

 .ohr-c2-cta {
     display: block;
     text-align: center;
     background: linear-gradient(90deg, #b45309, #f59e0b);
     color: #fff;
     font-size: .72rem;
     font-weight: 700;
     padding: 8px;
     border-radius: 7px
 }

 /* VIP card */
 .ohr-c3-head {
     background: linear-gradient(135deg, #0c4a6e, #0284c7);
     padding: 16px 16px 12px;
     text-align: center
 }

 .ohr-c3-title {
     font-size: 1rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 2px
 }

 .ohr-c3-sub {
     font-size: .6rem;
     color: rgba(255, 255, 255, .75)
 }

 .ohr-c3-body {
     background: #fff;
     padding: 10px 14px
 }

 .ohr-c3-row {
     display: flex;
     gap: 7px;
     margin-bottom: 9px
 }

 .ohr-c3-item {
     flex: 1;
     border-radius: 7px;
     background: #f0f9ff;
     padding: 7px
 }

 .ohr-c3-iimg {
     width: 100%;
     height: 30px;
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 4px
 }

 .ohr-c3-iimg img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .ohr-c3-ip {
     font-size: .68rem;
     font-weight: 800;
     color: #0c4a6e;
     text-align: center
 }

 .ohr-c3-cta {
     display: block;
     text-align: center;
     background: linear-gradient(90deg, #0c4a6e, #0284c7);
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     padding: 7px;
     border-radius: 6px
 }

 /* Floating badges */




 .ohr-bn {
     font-size: 1rem;
     font-weight: 800;
     color: #2563eb;
     line-height: 1
 }

 .ohr-bl {
     font-size: .62rem;
     color: #64748b;
     margin-top: 1px
 }

 /* Live dot */
 .ohr-live {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background: #fff;
     border-radius: 100px;
     padding: 5px 10px;
     font-size: .65rem;
     font-weight: 700;
     color: #16a34a;
     position: absolute;
     top: 20px;
     right: 10px;
     z-index: 10;
     box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
 }

 .ohr-live-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #16a34a;
     flex-shrink: 0
 }

 @media(max-width:768px) {
     .ohr-badge {
         display: none
     }

     .ohr-wrap {
         padding: 20px 10px
     }

     .ohr-stack {
         width: 260px
     }

     .ohr-card {
         width: 242px;
         height: max-content;
     }

     .ohr-card--3 {
         left: 70%;
     }

     .ohr-card--2 {
         left: 25%;
         transform: translateX(-50%) rotate(-3deg);
         z-index: 2;
         opacity: .88;
         bottom: 0;
     }

 }

 /* ═══════════════════════════════════════
       TEMPLATE SHOWCASE
    ════════════════════════════════════════ */
 .offers-showcase {
     background:
         radial-gradient(circle at 20% 15%, rgb(10 165 255 / 28%), transparent 30%), radial-gradient(circle at 85% 40%, rgba(123, 75, 255, .10), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
 }

 .offers-tpl-card {
     background: #ffffff;
     border-radius: 10px;
     border: 1px solid #e2e8f0;
     box-shadow: 0 4px 24px rgba(37, 99, 235, .08);
     overflow: hidden;
     transition: transform .22s ease, box-shadow .22s ease;
     position: relative;
 }

 .offers-tpl-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 44px rgba(37, 99, 235, .14);
 }

 .offers-tpl-thumb {
     position: relative;
     height: 424px;
     overflow: hidden;
 }

 .offers-tpl-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .35s ease;
     display: block;
 }

 .offers-tpl-card:hover .offers-tpl-thumb img {
     transform: scale(1.04);
 }

 .offers-tpl-thumb-overlay {
     position: absolute;
     inset: 0;
 }

 .offers-tpl-thumb-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     color: #fff;
     font-size: .65rem;
     font-weight: 700;
     letter-spacing: .07em;
     text-transform: uppercase;
     padding: 4px 10px;
     border-radius: 100px;
 }

 .offers-tpl-info {
     padding: 10px 16px 16px;
     position: absolute;
     bottom: 6px;
     background: rgb(223 223 223 / 31%);
     backdrop-filter: blur(4px);
     width: 96%;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 10px;
 }

 .offers-tpl-tag {
     font-size: .68rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .07em;
     color: #585858;
     margin-bottom: 5px;
 }

 .offers-tpl-name {
     font-family: 'Syne', sans-serif;
     font-size: 1.02rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 12px;
 }

 .offers-tpl-meta {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 14px;
 }

 .offers-tpl-meta-item {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: .75rem;
     color: #64748b;
 }

 .offers-tpl-meta-item i {
     color: #2563eb;
     font-size: .7rem;
 }

 .offers-tpl-use-btn {
     border-radius: 25px;
     border: 1px solid #2563eb;
     color: #2563eb;
     text-align: center;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: 16px;
     display: flex;
     padding: 10px 14px;
     transition: all 0.4s ease-in-out;
     z-index: 1;
     position: relative;
     align-items: center;
     justify-content: center;
     gap: 6px;
     background: transparent;
 }

 .offers-tpl-use-btn:hover {
     background: #2563eb;
     color: #fff;
 }

 /* ═══════════════════════════════════════
       FEATURES
    ════════════════════════════════════════ */
 .offers-features {
     background: radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%),
         radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%),
         linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
 }

 .offers-feat-card {
     background: #f7fbff;
     border: 1px solid #e2e8f0;
     border-radius: 20px;
     padding: 28px 24px;
     transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
 }

 .offers-feat-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 32px rgba(37, 99, 235, .1);
     border-color: rgba(37, 99, 235, .2);
 }

 .offers-feat-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, #2563eb, #6c46ff);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 18px;
     color: #fff;
     font-size: 1.2rem;
     box-shadow: 0 4px 14px rgba(37, 99, 235, .25);
 }

 .offers-feat-title {
     font-family: 'Syne', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 8px;
 }

 .offers-feat-desc {
     font-size: .88rem;
     color: #64748b;
     line-height: 1.65;
 }

 /* ═══════════════════════════════════════
       USE CASES
    ════════════════════════════════════════ */
 .offers-usecases {
     background:
         radial-gradient(circle at 20% 15%, rgb(10 165 255 / 28%), transparent 30%), radial-gradient(circle at 85% 40%, rgba(123, 75, 255, .10), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
 }

 .offers-uc-card {
     border-radius: 20px;
     padding: 32px 28px;
     color: #fff;
     position: relative;
     overflow: hidden;
     transition: transform .22s ease;
 }

 .offers-uc-card:hover {
     transform: translateY(-4px);
 }

 .offers-uc-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, .04);
     border-radius: inherit;
 }

 .offers-uc-card--1 {
     background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
 }

 .offers-uc-card--2 {
     background: linear-gradient(135deg, #6c46ff 0%, #9b6ef3 100%);
 }

 .offers-uc-card--3 {
     background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
 }

 .offers-uc-card--4 {
     background: linear-gradient(135deg, #0f766e 0%, #10b981 100%);
 }

 .offers-uc-icon-wrap {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: rgba(255, 255, 255, .15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
     color: #fff;
     margin-bottom: 18px;
 }

 .offers-uc-title {
     font-family: 'Syne', sans-serif;
     font-size: 1.15rem;
     font-weight: 800;
     margin-bottom: 10px;
 }

 .offers-uc-desc {
     font-size: .86rem;
     opacity: .82;
     line-height: 1.6;
 }

 .offers-uc-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: .82rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .9);
     margin-top: 18px;
 }

 .offers-uc-link:hover {
     opacity: .8;
     color: #fff;
 }

 /* ═══════════════════════════════════════
       STATS
    ════════════════════════════════════════ */
 .offers-stats {
     background: radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%),
         radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%),
         linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
 }

 .offers-stat-card {
     text-align: center;
     padding: 36px 24px;
     border-radius: 20px;
     border: 1px solid #e2e8f0;
     background: #f7fbff;
     transition: transform .22s ease, box-shadow .22s ease;
 }

 .offers-stat-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 32px rgba(37, 99, 235, .1);
 }

 .offers-stat-num {
     font-family: 'Syne', sans-serif;
     font-size: 2.8rem;
     font-weight: 800;
     line-height: 1;
     background: linear-gradient(135deg, #2563eb, #6c46ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 10px;
 }

 .offers-stat-label {
     font-size: .92rem;
     color: #64748b;
     font-weight: 500;
     line-height: 1.5;
 }

 .offers-stat-bar-wrap {
     width: 60px;
     height: 5px;
     background: #e2e8f0;
     border-radius: 100px;
     margin: 12px auto 0;
     overflow: hidden;
 }

 .offers-stat-bar {
     height: 100%;
     border-radius: 100px;
     background: linear-gradient(90deg, #2563eb, #6c46ff);
 }

 /* ═══════════════════════════════════════
       HOW IT WORKS
    ════════════════════════════════════════ */
 .offers-how {
     background: white;
 }

 .offers-steps-row {
     display: flex;
     align-items: flex-start;
     gap: 0;
     position: relative;
 }

 .offers-steps-row::before {
     content: '';
     position: absolute;
     top: 36px;
     left: calc(16.66% + 36px);
     right: calc(16.66% + 36px);
     height: 2px;
     background: linear-gradient(90deg, #2563eb, #6c46ff);
     z-index: 0;
 }

 .offers-step {
     flex: 1;
     text-align: center;
     padding: 0 20px;
     position: relative;
     z-index: 1;
 }

 .offers-step-circle {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: linear-gradient(135deg, #2563eb, #6c46ff);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     color: #fff;
     font-size: 1.4rem;
     box-shadow: 0 6px 22px rgba(37, 99, 235, .3);
     position: relative;
 }

 .offers-step-num {
     position: absolute;
     top: -4px;
     right: -4px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: #fff;
     color: #2563eb;
     font-family: 'Syne', sans-serif;
     font-size: .7rem;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(37, 99, 235, .2);
 }

 .offers-step-title {
     font-family: 'Syne', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 8px;
 }

 .offers-step-desc {
     font-size: .86rem;
     color: #64748b;
     line-height: 1.6;
 }

 /* ═══════════════════════════════════════
       EMAIL PREVIEW
    ════════════════════════════════════════ */
 .offers-preview {
     background: #ffffff;
 }

 .offers-preview-wrap {
     max-width: 1060px;
     margin: 0 auto;
     border-radius: 24px;
     overflow: hidden;
     box-shadow: 0 24px 80px rgba(37, 99, 235, .14), 0 0 0 1px #e2e8f0;
 }

 .offers-preview-topbar {
     background: #f1f5f9;
     padding: 12px 18px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .offers-preview-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .offers-preview-address {
     flex: 1;
     background: #fff;
     border-radius: 6px;
     padding: 5px 12px;
     font-size: .72rem;
     color: #64748b;
     margin-left: 8px;
 }

 .offers-preview-body {
     background: #f8faff;
 }

 .offers-preview-header {
     background: linear-gradient(135deg, #1d4ed8 0%, #6c46ff 100%);
     padding: 36px 40px;
     text-align: center;
 }

 .offers-preview-logo {
     font-family: 'Syne', sans-serif;
     font-size: .8rem;
     font-weight: 800;
     color: rgba(255, 255, 255, .7);
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: 20px;
 }

 .offers-preview-headline {
     font-family: 'Syne', sans-serif;
     font-size: 2rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.2;
     margin-bottom: 8px;
 }

 .offers-preview-headline span {
     color: #fde68a;
 }

 .offers-preview-sub {
     color: rgba(255, 255, 255, .78);
     font-size: .88rem;
     margin-bottom: 22px;
 }

 .offers-preview-code {
     display: inline-block;
     background: rgba(255, 255, 255, .15);
     border: 2px dashed rgba(255, 255, 255, .4);
     color: #fff;
     font-family: 'Syne', sans-serif;
     font-size: .95rem;
     font-weight: 800;
     padding: 8px 22px;
     border-radius: 8px;
     letter-spacing: .1em;
 }

 .offers-preview-products {
     padding: 28px 32px;
 }

 .offers-preview-products-title {
     font-family: 'Syne', sans-serif;
     font-size: .8rem;
     font-weight: 700;
     color: #64748b;
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-bottom: 16px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
 }

 .offers-preview-products-title i {
     color: #2563eb;
 }

 .offers-preview-prod-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 12px;
     margin-bottom: 20px;
 }

 .offers-preview-prod-card {
     border-radius: 12px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
 }

 .offers-preview-prod-thumb {
     overflow: hidden;
 }

 .offers-preview-prod-thumb img {
     width: 100%;
     height: 218px;
     object-fit: cover;
     display: block;
 }

 .offers-preview-prod-info {
     padding: 8px 10px;
 }

 .offers-preview-prod-name {
     font-family: 'Syne', sans-serif;
     font-size: .68rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 4px;
 }

 .offers-preview-prod-row {
     display: flex;
     gap: 6px;
     align-items: center;
 }

 .offers-preview-prod-price {
     font-size: .72rem;
     font-weight: 700;
     color: #2563eb;
 }

 .offers-preview-prod-old {
     font-size: .62rem;
     color: #64748b;
     text-decoration: line-through;
 }

 .offers-preview-cta-wrap {
     text-align: center;
     padding: 0 32px 28px;
 }

 .offers-preview-cta {
     display: inline-block;
     background: linear-gradient(90deg, #2563eb, #6c46ff);
     color: #fff;
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: .9rem;
     padding: 13px 36px;
     border-radius: 100px;
     box-shadow: 0 4px 18px rgba(37, 99, 235, .3);
 }

 .offers-preview-footer {
     background: #f1f5f9;
     padding: 20px 32px;
     text-align: center;
 }

 .offers-preview-footer-text {
     font-size: .72rem;
     color: #64748b;
     line-height: 1.7;
 }

 /* ═══════════════════════════════════════
       TESTIMONIALS
    ════════════════════════════════════════ */

 /* ═══════════════════════════════════════
       FINAL CTA
    ════════════════════════════════════════ */



 /* ── OFFERS FAQ — ofq- prefix ── */
 .ofq-section {
     padding: 70px 0;
     background:
         radial-gradient(circle at 20% 15%, rgb(10 165 255 / 28%), transparent 30%), radial-gradient(circle at 85% 40%, rgba(123, 75, 255, .10), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
 }

 .ofq-grid {
     display: grid;
     grid-template-columns: 1fr 1.7fr;
     gap: 48px;
     align-items: start;
     margin-top: 52px;
 }

 .ofr-label {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: rgba(29, 107, 243, 0.08);
     color: #1d6bf3;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 50px;
     margin-bottom: 16px;
 }

 .ofr-section-title {
     font-size: clamp(26px, 3.1vw, 32px);
     font-weight: 800;
     color: rgb(7, 9, 15);
     line-height: 1.1;
     letter-spacing: -1.5px;
     margin-bottom: 16px;
 }

 .ofr-section-sub {
     font-size: 16px;
     color: #6b7280;
     max-width: 540px;
     line-height: 1.75;
     font-weight: 300;
 }

 /* ── LEFT: image card ── */
 .ofq-img-card {
     position: relative;
     border-radius: 22px;
     overflow: hidden;
 }

 .ofq-img-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* ── RIGHT: accordion list ── */
 .ofq-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .ofq-item {
     background: #ffffff;
     border: 1px solid #e2e8f0;
     border-radius: 14px;
     overflow: hidden;
     transition: border-color .2s, box-shadow .2s;
 }

 .ofq-item.ofq-open {
     border-color: rgba(37, 99, 235, .28);
     box-shadow: 0 6px 24px rgba(37, 99, 235, .08);
 }

 .ofq-q {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 18px 20px;
     cursor: pointer;
     font-size: .96rem;
     font-weight: 700;
     color: #0f172a;
     line-height: 1.45;
     user-select: none;
     transition: color .18s;
 }

 .ofq-item.ofq-open .ofq-q {
     color: #2563eb;
 }

 .ofq-toggle {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: #f1f5f9;
     border: 1.5px solid #e2e8f0;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background .18s, border-color .18s, transform .25s;
 }

 .ofq-toggle i {
     font-size: .85rem;
     color: #64748b;
     transition: color .18s, transform .25s;
 }

 .ofq-item.ofq-open .ofq-toggle {
     background: #2563eb;
     border-color: #2563eb;
     transform: rotate(45deg);
 }

 .ofq-item.ofq-open .ofq-toggle i {
     color: #ffffff;
 }

 .ofq-ans {
     max-height: 0;
     overflow: hidden;
     transition: max-height .32s ease, padding .28s ease;
     padding: 0 20px;
 }

 .ofq-item.ofq-open .ofq-ans {
     max-height: 300px;
     padding: 0 20px 18px;
 }

 .ofq-ans-inner {
     font-size: .88rem;
     color: #64748b;
     line-height: 1.72;
     border-top: 1px solid #f1f5f9;
     padding-top: 14px;
 }

 /* responsive */
 @media (max-width: 900px) {
     .ofq-grid {
         grid-template-columns: 1fr;
         gap: 36px;
     }

     .ofq-img-card,
     .ofq-img-card img {
         min-height: 280px;
     }
 }

 @media (max-width: 768px) {
     .ofq-section {
         padding: 40px 0;
     }
 }

 /* ─── RESPONSIVE ─────────────────────────────── */
 @media (max-width: 992px) {
     .offers-steps-row::before {
         display: none;
     }

     .offers-steps-row {
         flex-direction: column;
         gap: 32px;
         align-items: center;
     }

     .offers-step {
         max-width: 320px;
     }
 }

 @media (max-width: 768px) {

     .offers-section,
     .offers-section--tight {
         padding: 40px 0;
     }

     .offers-hero {
         padding: 50px 0px 88px 0px;
     }

     .offers-mockup-wrap {
         margin-top: 48px;
     }

     .ohr-live {
         top: 45px;
         right: 30px;
     }

     .offers-mockup-float {
         display: none;
     }

     .offers-preview-prod-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 .gridaint-bluetext {
     border: 1px solid white;
     color: white;
 }

 /* pricing Templete css start================================ */
.pricing-templeteimg{
    height: 600px;
}


.pricing-templeteimg img{
    position: relative;
    animation-name: animation-4;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 .prc-compare {
     background:
         radial-gradient(circle at 20% 15%, rgb(10 165 255 / 28%), transparent 30%), radial-gradient(circle at 85% 40%, rgba(123, 75, 255, .10), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
 }

 .prc-compare-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 4px 28px rgba(37, 99, 235, .09);
     border: 1px solid #e2e8f0;
 }

 .prc-compare-table th {
     padding: 18px 22px;
     text-align: left;
     font-size: .82rem;
     font-weight: 800;
     background: #f7fbff;
     color: #0f172a;
     border-bottom: 1px solid #e2e8f0;
 }

 .prc-compare-table th:first-child {
     width: 38%;
 }

 .prc-compare-table th.prc-th-ours {
     background: linear-gradient(135deg, #2563eb, #6c46ff);
     color: #fff;
     text-align: center;
 }

 .prc-compare-table th.prc-th-basic {
     text-align: center;
     background: #f1f5f9;
 }

 .prc-compare-table td {
     padding: 14px 22px;
     font-size: .87rem;
     color: #0f172a;
     border-bottom: 1px solid #f1f5f9;
 }

 .prc-compare-table tr:last-child td {
     border-bottom: none;
 }

 .prc-compare-table tr:nth-child(even) td {
     background: #fafcff;
 }

 .prc-compare-table tr:hover td {
     background: rgba(37, 99, 235, .03);
 }

 .prc-td-center {
     text-align: center;
 }

 .prc-td-ours {
     background: rgba(37, 99, 235, .04) !important;
     text-align: center;
 }

 .prc-check {
     color: #16a34a;
     font-size: 1rem;
 }

 .prc-cross {
     color: #dc2626;
     font-size: 1rem;
 }

 .prc-partial {
     color: #f59e0b;
     font-size: .78rem;
     font-weight: 600;
 }




 ══════════════════════════════════════ */ .prc-preview {
     background: #fff;
 }

 .prc-prev-wrap {
     max-width: 1060px;
     margin: 0 auto;
     border-radius: 22px;
     overflow: hidden;
     box-shadow: 0 24px 80px rgba(37, 99, 235, .13), 0 0 0 1px #e2e8f0;
 }

 .prc-prev-bar {
     background: #f1f5f9;
     padding: 11px 17px;
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .prc-prev-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .prc-prev-addr {
     flex: 1;
     background: #fff;
     border-radius: 6px;
     padding: 5px 11px;
     font-size: 12px;
     color: #64748b;
     margin-left: 7px;
 }

 .prc-prev-hdr {
     background: linear-gradient(135deg, #1d4ed8, #6c46ff);
     padding: 18px 34px;
     text-align: center;
 }

 .prc-prev-logo {
     font-size: .78rem;
     font-weight: 800;
     color: rgba(255, 255, 255, .65);
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: 4px;
 }

 .prc-prev-title {
     font-size: 1.9rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.2;
     margin-bottom: 8px;
 }

 .prc-prev-title span {
     color: #fde68a;
 }

 .prc-prev-sub {
     color: rgba(255, 255, 255, .76);
     font-size: .87rem;
     margin-bottom: 0;
 }

 .prc-prev-body {
     background: #f8faff;
     padding: 30px 10px 2px 10px;
 }

 .prc-prev-plans-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 14px;
     margin-bottom: 24px;
 }

 .prc-prev-plan {
     background: #fff;
     border-radius: 14px;
     padding: 20px 16px;
     text-align: center;
     border: 1.5px solid #e2e8f0;
     position: relative;
 }

 .prc-prev-plan--pop {
     border-color: #2563eb;
     box-shadow: 0 8px 28px rgba(37, 99, 235, .16);
     transform: translateY(-4px);
 }

 .prc-prev-pop-tag {
     position: absolute;
     top: -12px;
     left: 50%;
     transform: translateX(-50%);
     background: #2563eb;
     color: #fff;
     font-size: .65rem;
     font-weight: 800;
     padding: 3px 12px;
     border-radius: 100px;
     white-space: nowrap;
 }

 .prc-prev-plan-name {
     font-size: .7rem;
     font-weight: 700;
     color: #64748b;
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-bottom: 8px;
 }

 .prc-prev-plan-price {
     font-size: 2rem;
     font-weight: 800;
     color: #0f172a;
     line-height: 1;
 }

 .prc-prev-plan--pop .prc-prev-plan-price {
     color: #2563eb;
 }

 .prc-prev-plan-per {
     font-size: .72rem;
     color: #94a3b8;
     margin-bottom: 14px;
 }

 .prc-prev-plan-feats {
     text-align: left;
     margin-bottom: 16px;
 }

 .prc-prev-feat-row {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: .78rem;
     color: #64748b;
     margin-bottom: 6px;
 }

 .prc-prev-feat-row i {
     color: #2563eb;
     font-size: .8rem;
     flex-shrink: 0;
 }

 .prc-prev-plan-cta {
     display: block;
     text-align: center;
     padding: 10px;
     border-radius: 9px;
     font-size: .82rem;
     font-weight: 700;
 }

 .prc-prev-cta-grey {
     background: #f1f5f9;
     color: #64748b;
 }

 .prc-prev-cta-bl {
     background: #2563eb;
     color: #fff;
     box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
 }

 .prc-prev-note {
     text-align: center;
     font-size: .8rem;
     color: #94a3b8;
 }

 .prc-prev-note i {
     color: #2563eb;
     margin-right: 4px;
 }

 /* ── USE CASES GRID ── */
 .prc-usecases {
     background: #ffffff;
 }

 .puc-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0;
     border-radius: 24px;
     overflow: hidden;
     border: 1px solid #e2e8f0;
     box-shadow: 0 4px 32px rgba(37, 99, 235, .06);
 }

 .puc-item {
     background: #fff;
     padding: 44px 40px;
     position: relative;
     overflow: hidden;
     transition: background .22s;
 }

 .puc-item:hover {
     background: #f7fbff;
 }

 .puc-item--tl {
     border-right: 1px solid #e2e8f0;
     border-bottom: 1px solid #e2e8f0;
 }

 .puc-item--tr {
     border-bottom: 1px solid #e2e8f0;
 }

 .puc-item--bl {
     border-right: 1px solid #e2e8f0;
 }


 .puc-ic-wrap {
     margin-bottom: 20px;
 }

 .puc-ic {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .puc-title {
     font-size: 1.15rem;
     font-weight: 800;
     color: #0f172a;
     line-height: 1.25;
     margin-bottom: 10px;
 }

 .puc-desc {
     font-size: .87rem;
     color: #64748b;
     line-height: 1.72;
     margin-bottom: 22px;
     max-width: 340px;
 }

 .puc-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
     margin-bottom: 26px;
 }

 .puc-tag {
     display: inline-flex;
     align-items: center;
     font-size: .7rem;
     font-weight: 600;
     padding: 4px 11px;
     border-radius: 100px;
     border: 1px solid;
 }

 .puc-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
 }

 .puc-metric {
     display: inline-flex;
     align-items: baseline;
     gap: 5px;
     padding: 8px 14px;
     border-radius: 10px;
     border: 1px solid;
     background: #f8faff;
 }

 .puc-metric-num {
     font-size: 1.25rem;
     font-weight: 800;
     line-height: 1;
 }

 .puc-metric-lbl {
     font-size: .7rem;
     color: #64748b;
     font-weight: 500;
 }

 .puc-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: .8rem;
     font-weight: 700;
     text-decoration: none;
     transition: gap .18s;
 }

 .puc-link:hover {
     gap: 10px;
 }

 .puc-deco {
     position: absolute;
     bottom: -62px;
    right: -48px;
    width: 200px;
    height: 200px;
     border-radius: 50%;
     opacity: .06;
     pointer-events: none;
 }

 @media (max-width: 768px) {
     .puc-grid {
         grid-template-columns: 1fr;
     }

     .puc-item--tl,
     .puc-item--bl {
         border-right: none;
     }
     .pricing-templeteimg{
    height: 300px;
}

     .puc-item--tl,
     .puc-item--tr,
     .puc-item--bl {
         border-bottom: 1px solid #e2e8f0;
     }

     .puc-item {
         padding: 32px 24px;
     }
 }

 /* pricing Templete css End================================ */
   /* ============================================================
   TRUESEND EMAIL TEMPLATES / SUBSCRIPTION PAGE
   Prefix  : sub-
   Colors  : direct hex only, no :root vars
   Icons   : Hugeicons hgi-stroke-rounded
============================================================ */
 
    /* ── UTILITIES ─────────────────────────── */
    .sub-section {
        padding: 70px 0;
    }

    .sub-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #2563eb;
        background: rgba(37, 99, 235, .08);
        border: 1px solid rgba(37, 99, 235, .15);
        border-radius: 100px;
        padding: 5px 14px;
        margin-bottom: 20px;
    }

    .sub-section-title {
        font-size: clamp(1.8rem, 3vw, 2.55rem);
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    .sub-section-sub {
        font-size: 1.04rem;
        color: #64748b;
        max-width: 540px;
        line-height: 1.72;
    }

    /* buttons */
    .sub-btn-pri {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #2563eb;
        color: #fff;
        font-weight: 700;
        font-size: .92rem;
        padding: 13px 28px;
        border-radius: 100px;
        border: none;
        box-shadow: 0 4px 18px rgba(37, 99, 235, .32);
        transition: transform .2s, box-shadow .2s, background .2s;
        cursor: pointer;
    }

    .sub-btn-pri:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(37, 99, 235, .4);
        background: #1d4ed8;
        color: #fff;
    }

    .sub-btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: #2563eb;
        font-weight: 700;
        font-size: .92rem;
        padding: 12px 26px;
        border-radius: 100px;
        border: 1.5px solid rgba(37, 99, 235, .35);
        transition: all .2s;
        cursor: pointer;
    }

    .sub-btn-ghost:hover {
        background: rgba(37, 99, 235, .06);
        border-color: #2563eb;
    }

    .sub-btn-wh {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        color: #2563eb;
        font-weight: 700;
        font-size: .88rem;
        padding: 12px 24px;
        border-radius: 100px;
        border: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
        transition: transform .2s, box-shadow .2s;
        cursor: pointer;
    }

    .sub-btn-wh:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 26px rgba(0, 0, 0, .24);
        color: #1d4ed8;
    }

    .sub-btn-ol {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, .1);
        color: rgba(255, 255, 255, .9);
        font-weight: 600;
        font-size: .88rem;
        padding: 11px 24px;
        border-radius: 100px;
        border: 1.5px solid rgba(255, 255, 255, .32);
        transition: all .2s;
        cursor: pointer;
    }

    .sub-btn-ol:hover {
        background: rgba(255, 255, 255, .18);
        border-color: rgba(255, 255, 255, .7);
        color: #fff;
    }

    /* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
    .sub-hero {
        background:
            radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%),
            radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%),
            linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
        padding: 110px 0 80px;
        position: relative;
        overflow: hidden;
    }

    .sub-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
        background-size: 56px 56px;
        pointer-events: none;
    }

    .sub-hero-shape {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        background: rgba(255, 255, 255, .04);
    }

    .sub-hero-shape--a {
        width: 440px;
        height: 440px;
        top: -120px;
        right: -80px;
    }

    .sub-hero-shape--b {
        width: 200px;
        height: 200px;
        bottom: 60px;
        left: 6%;
        background: rgba(108, 70, 255, .12);
    }

    .sub-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #7dd3fc;
        background: rgba(125, 211, 252, .12);
        border: 1px solid rgba(125, 211, 252, .22);
        border-radius: 100px;
        padding: 10px 14px;
        margin-bottom: 22px;
    }

    .sub-hero-eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #7dd3fc;
        flex-shrink: 0;
    }

    .sub-hero-headline {
        font-size: clamp(2rem, 3.8vw, 3.1rem);
        font-weight: 800;
        color: #fff;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .sub-hero-headline span {
        background: linear-gradient(90deg, #7dd3fc, #a78bfa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .sub-hero-sub {
        color: rgba(255, 255, 255, .74);
        font-size: 1.02rem;
        line-height: 1.75;
        margin-bottom: 32px;
        max-width: 460px;
    }

    .sub-hero-ctas {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 36px;
    }



    /* hero right builder mockup */
    .sub-builder-wrap {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 32px 80px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1);
        position: relative;
        z-index: 1;
    }

    .sub-builder-topbar {
        background: #f1f5f9;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #e2e8f0;
    }

    .sub-builder-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .sub-builder-tabs {
        display: flex;
        gap: 1px;
        margin-left: 12px;
    }

    .sub-builder-tab {
        font-size: .65rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 5px;
        color: #64748b;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .sub-builder-tab--active {
        background: #fff;
        color: #0f172a;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    }

    .sub-builder-body {
        display: grid;
        grid-template-columns: 120px 1fr;
        min-height: 360px;
    }

    /* left panel */
    .sub-builder-panel {
        background: #f8faff;
        border-right: 1px solid #e2e8f0;
        padding: 12px 10px;
    }

    .sub-builder-panel-title {
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #94a3b8;
        margin-bottom: 10px;
        padding: 0 4px;
    }

    .sub-builder-block {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: .68rem;
        font-weight: 600;
        color: #475569;
        padding: 7px 8px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #fff;
        margin-bottom: 6px;
        cursor: grab;
        transition: border-color .18s, box-shadow .18s;
    }

    .sub-builder-block:hover {
        border-color: rgba(37, 99, 235, .3);
        box-shadow: 0 2px 8px rgba(37, 99, 235, .1);
        color: #2563eb;
    }

    .sub-builder-block i {
        font-size: .75rem;
        color: #2563eb;
    }

    .sub-builder-block--active {
        border-color: #2563eb;
        background: #eff6ff;
        color: #2563eb;
    }

    /* right preview */
    .sub-builder-preview {
        padding: 14px;
        background: #f1f5f9;
        overflow: hidden;
    }

    .sub-builder-email {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    }

    .sub-builder-email-hdr {
        background: linear-gradient(135deg, #1d4ed8, #6c46ff);
        padding: 18px 18px 14px;
        text-align: center;
    }

    .sub-builder-email-logo {
        font-size: .55rem;
        font-weight: 800;
        color: rgba(255, 255, 255, .65);
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .sub-builder-email-title {
        font-size: .95rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 4px;
    }

    .sub-builder-email-sub {
        font-size: .6rem;
        color: rgba(255, 255, 255, .75);
    }

    .sub-builder-email-body {
        padding: 14px 16px;
    }

    .sub-builder-email-text {
        font-size: .7rem;
        color: #475569;
        line-height: 1.65;
        margin-bottom: 12px;
    }

    .sub-builder-email-btn {
        display: block;
        text-align: center;
        background: #2563eb;
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        padding: 9px;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .sub-builder-email-divider {
        height: 1px;
        background: #f1f5f9;
        margin-bottom: 10px;
    }

    .sub-builder-email-feat {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
    }

    .sub-builder-feat-item {
        flex: 1;
        background: #f8faff;
        border-radius: 7px;
        padding: 8px 7px;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .sub-builder-feat-ic {
        font-size: .85rem;
        color: #2563eb;
        margin-bottom: 3px;
    }

    .sub-builder-feat-lbl {
        font-size: .52rem;
        font-weight: 600;
        color: #64748b;
    }

    .sub-builder-email-footer {
        background: #f8faff;
        padding: 8px 16px;
        text-align: center;
        border-top: 1px solid #f1f5f9;
    }

    .sub-builder-email-footer-txt {
        font-size: .55rem;
        color: #94a3b8;
    }

    /* selected block indicator */
    .sub-builder-selected {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
        border-radius: 4px;
        position: relative;
    }

    .sub-builder-selected::before {
        content: 'CTA Button';
        position: absolute;
        top: -16px;
        left: 0;
        font-size: .48rem;
        font-weight: 700;
        color: #fff;
        background: #2563eb;
        padding: 1px 6px;
        border-radius: 3px;
    }

    /* floating badges */
    .sub-hero-badge {
        position: absolute;
        z-index: 2;
        background: #fff;
        border-radius: 11px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
        padding: 9px 13px;
    }

    .sub-hero-badge--a {
        top: -10px;
        left: -12px;
    }

    .sub-hero-badge--b {
        bottom: 20px;
        right: -12px;
    }

    .sub-hero-badge-num {
        font-size: 1rem;
        font-weight: 800;
        color: #2563eb;
        line-height: 1;
    }

    .sub-hero-badge-lbl {
        font-size: .62rem;
        color: #64748b;
        margin-top: 1px;
    }

    /* ══════════════════════════════════════
   TEMPLATE GALLERY
══════════════════════════════════════ */


    /* ══════════════════════════════════════
   LIVE BUILDER PREVIEW
══════════════════════════════════════ */
    .sub-builder-section {
        background: #fff;
    }

    .sub-live-builder {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 40px rgba(37, 99, 235, .1);
    }

    .sub-live-topbar {
        background: #f8faff;
        padding: 12px 20px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sub-live-topbar-dots {
        display: flex;
        gap: 6px;
    }

    .sub-live-topbar-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .sub-live-topbar-title {
        font-size: .78rem;
        font-weight: 700;
        color: #0f172a;
    }

    .sub-live-topbar-actions {
        display: flex;
        gap: 8px;
    }

    .sub-live-action-btn {
        font-size: .72rem;
        font-weight: 600;
        padding: 5px 14px;
        border-radius: 7px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        cursor: pointer;
    }

    .sub-live-action-btn--pri {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
    }

    .sub-live-body {
        display: grid;
        grid-template-columns: 220px 1fr 240px;
    }

    /* blocks panel */
    .sub-live-blocks {
        background: #f8faff;
        border-right: 1px solid #e2e8f0;
        padding: 16px 12px;
    }

    .sub-live-blocks-title {
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: #94a3b8;
        margin-bottom: 14px;
    }

    .sub-live-block {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #fff;
        margin-bottom: 8px;
        cursor: grab;
        transition: all .18s;
    }

    .sub-live-block:hover {
        border-color: rgba(37, 99, 235, .3);
        background: #eff6ff;
    }

    .sub-live-block i {
        font-size: 1rem;
        color: #2563eb;
        width: 20px;
        text-align: center;
    }

    .sub-live-block-info {}

    .sub-live-block-name {
        font-size: .78rem;
        font-weight: 700;
        color: #0f172a;
    }

    .sub-live-block-desc {
        font-size: .65rem;
        color: #94a3b8;
        margin-top: 1px;
    }

    .sub-live-section-divider {
        margin: 14px 0 10px;
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: #94a3b8;
    }

    /* canvas */
    .sub-live-canvas {
        background: #f1f5f9;
        padding: 20px;
        overflow: hidden;
    }

    .sub-live-email {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
        max-width: 480px;
        margin: 0 auto;
    }

    .sub-live-email-hdr {
        background: linear-gradient(135deg, #1d4ed8, #6c46ff);
        padding: 28px 28px 22px;
        text-align: center;
    }

    .sub-live-email-logo {
        font-size: .6rem;
        font-weight: 800;
        color: rgba(255, 255, 255, .65);
        letter-spacing: .12em;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .sub-live-email-hl {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .sub-live-email-sub {
        font-size: .72rem;
        color: rgba(255, 255, 255, .75);
    }

    .sub-live-email-body {
        padding: 20px 24px;
    }

    .sub-live-email-txt {
        font-size: .82rem;
        color: #475569;
        line-height: 1.7;
        margin-bottom: 16px;
    }

    .sub-live-el {
        margin-bottom: 12px;
        border-radius: 8px;
        transition: outline .15s;
        cursor: pointer;
    }

    .sub-live-el:hover {
        outline: 2px dashed rgba(37, 99, 235, .3);
    }

    .sub-live-el-selected {
        outline: 2px solid #2563eb !important;
    }

    .sub-live-email-btn-el {
        display: block;
        text-align: center;
        background: #2563eb;
        color: #fff;
        font-size: .85rem;
        font-weight: 700;
        padding: 12px;
        border-radius: 9px;
    }

    .sub-live-email-img-el {
        width: 100%;
        height: 90px;
        background: linear-gradient(135deg, #dbeafe, #ede9fe);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        font-size: .8rem;
        font-weight: 600;
    }

    .sub-live-email-div-el {
        height: 1px;
        background: #f1f5f9;
    }

    .sub-live-email-feat-row {
        display: flex;
        gap: 8px;
    }

    .sub-live-email-feat-box {
        flex: 1;
        background: #f8faff;
        border-radius: 8px;
        padding: 12px;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .sub-live-feat-ic {
        font-size: 1.1rem;
        color: #2563eb;
        margin-bottom: 5px;
    }

    .sub-live-feat-nm {
        font-size: .72rem;
        font-weight: 700;
        color: #0f172a;
    }

    /* properties panel */
    .sub-live-props {
        background: #f8faff;
        border-left: 1px solid #e2e8f0;
        padding: 16px 14px;
    }

    .sub-live-props-title {
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: #94a3b8;
        margin-bottom: 14px;
    }

    .sub-prop-group {
        margin-bottom: 16px;
    }

    .sub-prop-label {
        font-size: .7rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 5px;
    }

    .sub-prop-input {
        width: 100%;
        font-size: .78rem;
        padding: 7px 10px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #0f172a;
        outline: none;
    }

    .sub-prop-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

    .sub-prop-colors {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .sub-prop-color {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color .15s;
    }

    .sub-prop-color:hover,
    .sub-prop-color--sel {
        border-color: #0f172a;
    }

    .sub-prop-toggle {
        display: flex;
        background: #e2e8f0;
        border-radius: 7px;
        padding: 2px;
        margin-bottom: 6px;
    }

    .sub-prop-toggle-btn {
        flex: 1;
        font-size: .68rem;
        font-weight: 600;
        padding: 5px;
        border-radius: 5px;
        border: none;
        background: transparent;
        color: #64748b;
        cursor: pointer;
    }

    .sub-prop-toggle-btn--active {
        background: #fff;
        color: #0f172a;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    }

    /* ══════════════════════════════════════
   SUBSCRIPTION LIFECYCLE
══════════════════════════════════════ */
    .sub-lifecycle {
        background:
            radial-gradient(circle at 20% 15%, rgb(10 165 255 / 28%), transparent 30%), radial-gradient(circle at 85% 40%, rgba(123, 75, 255, .10), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    }

    .sub-lifecycle-flow {
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
    }

    .sub-lifecycle-step {
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 1;
        padding: 0 8px;
    }

    .sub-lifecycle-step-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin: 0 auto 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        position: relative;
        border: 3px solid;
    }



    .sub-lifecycle-step-name {
        font-size: 17px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 4px;
    }

    .sub-lifecycle-step-desc {
        font-size: 14px;
        color: #64748b;
        line-height: 1.5;
    }

    .sub-lifecycle-step-tag {
        display: inline-block;
        font-size: .6rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 100px;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    /* ══════════════════════════════════════
   FEATURES
══════════════════════════════════════ */
    .sub-features {
        background: #fff;
    }

    .sub-feat-card {
        background: #f7fbff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 26px 22px;
        transition: transform .22s, box-shadow .22s, border-color .22s;
        height: 100%;
    }

    .sub-feat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(37, 99, 235, .1);
        border-color: rgba(37, 99, 235, .2);
    }

    .sub-feat-ic {
        width: 50px;
        height: 50px;
        border-radius: 13px;
        background: linear-gradient(135deg, #2563eb, #6c46ff);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.2rem;
        margin-bottom: 16px;
        box-shadow: 0 4px 14px rgba(37, 99, 235, .24);
    }

    .sub-feat-title {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 7px;
    }

    .sub-feat-desc {
        font-size: .87rem;
        color: #64748b;
        line-height: 1.65;
    }

    /* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */

    /* ══════════════════════════════════════
   EMAIL SEQUENCE PREVIEW
══════════════════════════════════════ */
    .sub-sequence {
        background: radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%),
            radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%),
            linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
    }

    .sub-seq-flow {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }

    .sub-seq-card {
        flex: 1;
        background: #fff;
        border-radius: 18px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(37, 99, 235, .08);
        transition: transform .22s, box-shadow .22s;
    }

    .sub-seq-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 36px rgba(37, 99, 235, .13);
    }

    .sub-seq-step-badge {
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        border-radius: 100px;
        margin-bottom: 8px;
        position: absolute;
        top: -49px;
        right: 50px;
        width: 64px;
        height: 64px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background: radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%), radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%), linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
        border: 4px solid white;
    }

    .sub-seq-email-hdr {
        padding: 18px 18px 14px;
        text-align: center;

    }

    .sub-seq-email-hdr img {
        width: 100%;
        object-fit: cover;
        height: 218px;
        border-radius: 10px;
    }

 
  

    .sub-seq-email-body {
        padding: 20px 16px 14px 16px;
        position: relative;
    }

    .sub-seq-email-text {
        font-size: 15px;
        color: #64748b;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .sub-seq-email-cta {
        display: block;
        text-align: center;
        padding: 9px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        background: #2563eb;
    }

    .sub-seq-email-meta {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        color: #94a3b8;
    }

    .sub-seq-email-meta i {
        font-size: .65rem;
    }



    .sub-seq-footer {
        padding: 12px 16px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fafcff;
    }

    .sub-seq-timing {
        font-size: 12px;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .sub-seq-timing i {
        color: #2563eb;
    }

    .sub-seq-open-rate {
        font-size: .68rem;
        font-weight: 700;
        color: #16a34a;
    }

    /* ══════════════════════════════════════
   INTEGRATIONS
══════════════════════════════════════ */
    .sub-integrations {
        background:
            radial-gradient(circle at 20% 15%, rgba(10, 165, 255, .08), transparent 30%),
            radial-gradient(circle at 85% 40%, rgba(123, 75, 255, .08), transparent 40%),
            linear-gradient(180deg, #fff 0%, #f7fbff 100%);
    }

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

    .sub-integ-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        padding: 22px 16px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(37, 99, 235, .06);
        transition: transform .22s, box-shadow .22s, border-color .22s;
    }

    .sub-integ-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(37, 99, 235, .1);
        border-color: rgba(37, 99, 235, .2);
    }

    .sub-integ-ic {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        font-size: 1.3rem;
    }

    .sub-integ-name {
        font-size: .82rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 4px;
    }

    .sub-integ-cat {
        font-size: .68rem;
        color: #94a3b8;
        font-weight: 500;
    }

    .sub-integ-tag {
        display: inline-block;
        font-size: .6rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 100px;
        margin-top: 8px;
    }

    /* ══════════════════════════════════════
   FINAL CTA
══════════════════════════════════════ */
    .sub-final-cta {
        background:
            radial-gradient(900px 500px at 15% 25%, rgba(62, 171, 255, .30), transparent 60%),
            radial-gradient(900px 500px at 85% 30%, rgba(108, 70, 255, .22), transparent 60%),
            linear-gradient(135deg, #0a4da6 0%, #0a84d6 45%, #0b3b8f 100%);
        padding: 96px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .sub-final-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .06), transparent 58%);
        pointer-events: none;
    }

    .sub-final-title {
        font-size: clamp(1.85rem, 3.5vw, 2.75rem);
        font-weight: 800;
        color: #fff;
        margin-bottom: 14px;
    }

    .sub-final-sub {
        color: rgba(255, 255, 255, .74);
        font-size: 1.04rem;
        max-width: 470px;
        margin: 0 auto 34px;
        line-height: 1.7;
    }

    /* ── REVEAL ANIMATION ── */
    .sub-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .5s ease, transform .5s ease;
    }

    .sub-reveal.sub-in {
        opacity: 1;
        transform: translateY(0);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 992px) {
        .sub-lifecycle-flow {
            flex-wrap: wrap;
        }

        .sub-lifecycle-arrow {
            display: none;
        }

        .sub-lifecycle-step {
            min-width: 120px;
            margin-bottom: 24px;
        }

        .sub-seq-flow {
            flex-direction: column;
        }

        .sub-seq-arrow {
            flex-direction: row;
            width: 100%;
            padding: 10px 0;
            justify-content: flex-start;
            padding-left: 24px;
        }

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

        .sub-live-body {
            grid-template-columns: 1fr;
        }

        .sub-live-props {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .sub-section {
            padding: 64px 0;
        }

        .sub-hero {
            padding: 90px 0 60px;
        }

        .sub-hero-badge {
            display: none;
        }

        .sub-live-blocks {
            display: none;
        }

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

        .sub-builder-body {
            grid-template-columns: 1fr;
        }
        .sub-live-topbar-dots {
    display: none;
}
    }