:root{
      --primary:#3b82f6;
      --primary-soft:rgba(59,130,246,0.08);
      --primary-border:rgba(59,130,246,0.18);

      --bg:#f4f7fb;
      --panel:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e2e8f0;
      --danger:#ef4444;

      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;

      --shadow:0 12px 34px rgba(15, 23, 42, 0.08);
      --shadow-soft:0 8px 24px rgba(15, 23, 42, 0.06);
    }





    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:'Inter', sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.45;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    button,
    input,
    textarea,
    select{
      font:inherit;
    }

    button{
      cursor:pointer;
    }

    .hide{
      display:none !important;
    }

    .page{
      min-height:100vh;
      padding:20px;
    }

    /* =========================
      TOP BAR
    ========================== */
    .topbar{
      max-width:1500px;
      margin:0 auto 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .brand-badge{
      width:44px;
      height:44px;
      border-radius:14px;
      background:linear-gradient(135deg, var(--primary), #0f172a);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      box-shadow:var(--shadow-soft);
      flex-shrink:0;
    }

    .brand-text h1{
      font-size:18px;
      font-weight:800;
      letter-spacing:-0.02em;
    }

    .brand-text p{
      font-size:13px;
      color:var(--muted);
      margin-top:2px;
    }

    .top-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .btn{
      appearance:none;
      border:none;
      border-radius:14px;
      padding:11px 18px;
      font-weight:700;
      transition:0.22s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
    }

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

    .btn-primary{
      background:var(--primary);
      color:#fff;
      box-shadow:0 12px 24px rgba(59,130,246,0.20);
    }

    .btn-secondary{
      background:#fff;
      color:var(--text);
      border:1px solid var(--line);
    }

    .btn-danger{
      background:#fff;
      color:var(--danger);
      border:1px solid #fecaca;
    }

    /* =========================
      MAIN LAYOUT
    ========================== */
    .layout{
      max-width:1500px;
      margin:0 auto;
      display:grid;
      grid-template-columns:65% 35%;
      gap:20px;
      align-items:start;
    }

    .panel{
      background:var(--panel);
      border:1px solid rgba(226,232,240,0.95);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
    }

    .sidebar{
      padding:28px;
      max-height:calc(100vh - 40px);
      overflow:auto;
    }

    .preview-wrap{
      padding:14px;
      position:sticky;
      top:20px;
    }

    /* =========================
      FORM SECTIONS
    ========================== */
    .section + .section{
      margin-top:22px;
      padding-top:22px;
      border-top:1px solid var(--line);
    }

    .section-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }

    .section-title h2{
      font-size:15px;
      font-weight:800;
      letter-spacing:-0.01em;
    }

    .section-title span{
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }

    .grid{
      display:grid;
      gap:14px;
    }

    .grid-2{
      grid-template-columns:1fr 1fr;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .field label{
      font-size:13px;
      font-weight:700;
      color:#334155;
    }

    .field input,
    .field textarea,
    .field select{
      width:100%;
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:14px 15px;
      outline:none;
      transition:0.2s ease;
      color:var(--text);
      font-size:15px;
    }

    .field textarea{
      min-height:100px;
      resize:vertical;
    }

    .field input::placeholder,
    .field textarea::placeholder{
      color:#94a3b8;
    }

    .field input:focus,
    .field textarea:focus,
    .field select:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px var(--primary-soft);
    }

    /* =========================
      COLOR PALETTE
    ========================== */
    .palette-wrap{
      display:grid;
      gap:14px;
    }

    .swatches{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(36px, 36px));
      gap:10px;
      align-items:center;
    }

    .swatch{
      width:36px;
      height:36px;
      border-radius:999px;
      border:2px solid #fff;
      box-shadow:0 0 0 1px rgba(15,23,42,0.10);
      transition:0.18s ease;
      cursor:pointer;
    }

    .swatch:hover{
      transform:scale(1.05);
    }

    .swatch.active{
      transform:scale(1.08);
      box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px rgba(15,23,42,0.16);
    }

    .color-picker-row{
      display:grid;
      grid-template-columns:130px 1fr;
      gap:12px;
      align-items:center;
    }

    .color-picker-box{
      display:flex;
      align-items:center;
      justify-content:center;
      height:48px;
      padding:0 10px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      overflow:hidden;
    }

    .color-picker-box input[type="color"]{
      width:100%;
      height:34px;
      padding:0;
      border:none;
      background:none;
      cursor:pointer;
    }

    .color-code{
      height:48px;
      display:flex;
      align-items:center;
      padding:0 14px;
      border:1px solid var(--line);
      border-radius:14px;
      background:#fff;
      color:#475569;
      font-size:14px;
      font-weight:700;
    }

    /* =========================
      LOGO
    ========================== */
    .logo-upload{
      border:1.5px dashed #cbd5e1;
      background:#fafcff;
      border-radius:16px;
      padding:16px;
      text-align:center;
    }

    .logo-preview-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:92px;
      margin-top:12px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      overflow:hidden;
    }

    .logo-preview{
      max-width:100%;
      max-height:84px;
      object-fit:contain;
      display:none;
    }

    .logo-placeholder{
      font-size:13px;
      color:var(--muted);
      padding:18px;
    }

    /* =========================
      TOGGLES
    ========================== */
    .toggles{
      display:grid;
      gap:10px;
    }

    .toggle-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fafcff;
    }

    .toggle-row span{
      font-size:13px;
      font-weight:600;
      color:#334155;
    }

    /* =========================
      ITEMS EDITOR
    ========================== */
    .item-editor{
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      background:#fbfdff;
    }

    .item-editor + .item-editor{
      margin-top:12px;
    }

    .item-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }

    .item-head h4{
      font-size:14px;
      font-weight:800;
    }

    .tiny-btn{
      border:none;
      background:#fff;
      color:var(--danger);
      border:1px solid #fecaca;
      border-radius:10px;
      padding:8px 10px;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }

    .add-item-btn{
      width:100%;
      margin-top:12px;
      border:1px dashed var(--primary);
      background:var(--primary-soft);
      color:var(--primary);
      border-radius:14px;
      padding:13px 14px;
      font-weight:800;
      cursor:pointer;
    }

    .mini-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:12px;
    }

    .muted-note{
      font-size:12px;
      color:var(--muted);
      margin-top:8px;
    }

    /* =========================
      PREVIEW PANEL
    ========================== */
    .preview-toolbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:14px;
      flex-wrap:wrap;
    }

    .preview-toolbar h2{
      font-size:15px;
      font-weight:800;
    }

    .preview-toolbar p{
      font-size:13px;
      color:var(--muted);
    }

    .preview-scroll{
      max-height:calc(100vh - 170px);
      overflow:auto;
      border-radius:18px;
    }

    /* =========================
      INVOICE SHEET
      Designed to fit A4 much better
    ========================== */
    .invoice-sheet{
      background:#fff;
      border-radius:18px;
      border:1px solid var(--line);
      padding:18px;
      width:100%;
      box-shadow:var(--shadow);
      max-width:100%;
    }

    .invoice-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      border-bottom:1px solid var(--line);
      padding-bottom:14px;
      margin-bottom:14px;
    }

    .invoice-logo{
      max-width:140px;
      max-height:50px;
      object-fit:contain;
      display:none;
      margin-bottom:8px;
    }

    .invoice-title{
      font-size:30px;
      font-weight:800;
      letter-spacing:-0.03em;
      color:var(--primary);
      line-height:1.03;
      margin-bottom:4px;
    }

    .invoice-subtext{
      font-size:12px;
      color:var(--muted);
    }

/* =========================
  INVOICE META
========================== */
.invoice-meta{
  min-width: 250px;
  max-width: 280px;
  display:grid;
  gap:8px;
}

.meta-box{
  display:grid;
  grid-template-columns:88px 1fr;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbfdff;
  min-height:auto;
}

.meta-box strong{
  font-size:10px;
  line-height:1.2;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:800;
}

.meta-box span{
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  color:#0f172a;
  text-align:left;
  word-break:break-word;
}







.invoice-meta{
  min-width: 235px !important;
  max-width: 235px !important;
  gap:6px !important;
}

.meta-box{
  grid-template-columns:82px 1fr !important;
  gap:6px !important;
  padding:6px 8px !important;
  border-radius:8px !important;
  min-height:auto !important;
}

.meta-box strong{
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:0.05em !important;
}

.meta-box span{
  font-size:10.5px !important;
  line-height:1.2 !important;
}



    .invoice-parties{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-bottom:14px;
    }

    .party-card{
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      background:#fff;
      min-height:unset;
    }

    .party-card h3{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.09em;
      color:#64748b;
      margin-bottom:10px;
    }

    .party-block{
      font-size:13px;
      color:#0f172a;
      line-height:1.55;
      min-height:100px;
    }

    .party-block .name{
      font-weight:800;
      font-size:15px;
      margin-bottom:6px;
      color:#111827;
    }

    .party-line{
      margin-bottom:3px;
      white-space:pre-line;
      word-break:break-word;
    }

    .empty-text{
      color:#94a3b8;
      font-style:italic;
    }

    /* =========================
      ITEMS TABLE
    ========================== */
    .items-table-wrap{
      overflow:auto;
      margin-bottom:14px;
      border:1px solid var(--line);
      border-radius:14px;
    }

    table{
      width:100%;
      border-collapse:collapse;
      min-width:620px;
    }

    thead th{
      background:var(--primary-soft);
      color:#0f172a;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.08em;
      text-align:left;
      padding:11px 13px;
      border-bottom:1px solid var(--line);
    }

    tbody td{
      padding:11px 13px;
      border-bottom:1px solid var(--line);
      vertical-align:top;
      font-size:13px;
      color:#0f172a;
    }

    tbody tr:last-child td{
      border-bottom:none;
    }

    .td-right{
      text-align:right;
    }

    .desc-small{
      color:var(--muted);
      font-size:11px;
      margin-top:3px;
      line-height:1.45;
    }

    .empty-row{
      text-align:center;
      color:#94a3b8;
      padding:18px !important;
      font-style:italic;
    }

    /* =========================
      SUMMARY / NOTES
    ========================== */
    .summary-area{
      display:grid;
      grid-template-columns:1.15fr 0.85fr;
      gap:14px;
      margin-bottom:14px;
    }

    .notes-box,
    .summary-box{
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      background:#fff;
    }

    .notes-box h4,
    .summary-box h4{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.08em;
      color:#64748b;
      margin-bottom:10px;
    }

    .notes-content,
    .terms-content{
      font-size:13px;
      color:#334155;
      white-space:pre-line;
      line-height:1.55;
      min-height:24px;
    }

    .terms-box{
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid var(--line);
    }

    .summary-list{
      display:grid;
      gap:9px;
    }

    .sum-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-size:13px;
      color:#334155;
    }

    .sum-row strong{
      color:#111827;
      text-align:right;
    }

    .sum-row.total{
      padding-top:10px;
      border-top:1px solid var(--line);
      font-size:15px;
      font-weight:800;
    }

    .sum-row.amount-due{
      margin-top:2px;
      background:var(--primary-soft);
      border:1px solid var(--primary-border);
      border-radius:12px;
      padding:12px 14px;
      font-size:15px;
      font-weight:800;
      color:#0f172a;
    }

    .invoice-footer{
      border-top:1px solid var(--line);
      padding-top:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:12px;
      color:var(--muted);
    }

    .invoice-footer strong{
      color:#475569;
    }





    
    /* =========================
      RESPONSIVE
    ========================== */
 /* =========================
  GLOBAL SAFETY FIXES
========================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.page,
.layout,
.panel,
.sidebar,
.preview-wrap,
.preview-scroll,
.invoice-sheet,
.topbar,
.brand,
.top-actions,
.section,
.grid,
.field {
  min-width: 0;
}

/* =========================
  TABLET
========================== */
@media (max-width: 1180px){
  .page{
    padding:16px;
  }

  .layout{
    grid-template-columns:1fr;
    gap:16px;
  }

  .sidebar,
  .preview-wrap{
    max-height:none;
    position:relative;
    top:0;
    width:100%;
  }

  .preview-scroll{
    max-height:none;
  }

  .invoice-sheet{
    width:100%;
    max-width:100%;
  }
}




















    /* =========================
      PRINT / PDF FIX
      Makes the invoice print cleaner,
      more compact, and closer to one A4 page
    ========================== */
    @page{
      size:A4;
      margin:10mm;
    }

    @media print{
      html, body{
        background:#fff !important;
        margin:0 !important;
        padding:0 !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
      }

      .topbar,
      .sidebar,
      .preview-toolbar{
        display:none !important;
      }

      .page,
      .layout,
      .preview-wrap,
      .preview-scroll{
        margin:0 !important;
        padding:0 !important;
        max-width:none !important;
        width:100% !important;
        display:block !important;
        overflow:visible !important;
      }

      .panel{
        border:none !important;
        box-shadow:none !important;
        background:#fff !important;
      }

      .invoice-sheet{
        width:190mm !important;
        max-width:190mm !important;
        min-height:auto !important;
        margin:0 auto !important;
        border:none !important;
        border-radius:0 !important;
        box-shadow:none !important;
        padding:0 !important;
      }

      .invoice-title{
        font-size:28px !important;
      }

      .invoice-subtext{
        font-size:11px !important;
      }

      .invoice-header{
        padding-bottom:10px !important;
        margin-bottom:10px !important;
      }

      .invoice-parties{
        gap:10px !important;
        margin-bottom:10px !important;
      }

      .party-card,
      .notes-box,
      .summary-box{
        padding:10px !important;
      }

      .items-table-wrap{
        margin-bottom:10px !important;
        overflow:visible !important;
      }

      table{
        min-width:100% !important;
      }

      thead th,
      tbody td{
        padding:8px 9px !important;
        font-size:11.5px !important;
      }

      .desc-small{
        font-size:10px !important;
      }

      .summary-area{
        gap:10px !important;
        margin-bottom:10px !important;
      }

      .notes-content,
      .terms-content,
      .party-block{
        font-size:11.5px !important;
        line-height:1.45 !important;
      }

      .meta-box{
        padding:8px 10px !important;
      }

      .meta-box strong{
        font-size:10px !important;
      }

      .meta-box span{
        font-size:11.5px !important;
      }

      .invoice-footer{
        padding-top:10px !important;
        font-size:10.5px !important;
      }

      .sum-row{
        font-size:11.5px !important;
      }

      .sum-row.total,
      .sum-row.amount-due{
        font-size:13px !important;
      }
    }



    

/* =========================================================
PREMIUM FULL-WIDTH SEO SECTION - FREE INVOICE GENERATOR
========================================================= */

.invoice-seo-premium {
  position: relative;
  width: 100%;
  padding: 100px 0;
  background:
    radial-gradient(circle at top left, rgba(60, 104, 230, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(60, 104, 230, 0.06), transparent 24%),
    linear-gradient(180deg, #f7f9fc 0%, #ffffff 30%, #f8fbff 100%);
  overflow: hidden;
}

.invoice-seo-shell {
  position: relative;
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  z-index: 2;
}

.invoice-seo-bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}

.invoice-seo-bg-shape.shape-one {
  width: 320px;
  height: 320px;
  background: rgba(60, 104, 230, 0.10);
  top: 120px;
  left: -80px;
}

.invoice-seo-bg-shape.shape-two {
  width: 420px;
  height: 420px;
  background: rgba(60, 104, 230, 0.08);
  bottom: 60px;
  right: -120px;
}

.invoice-seo-badge,
.card-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(60, 104, 230, 0.10);
  color: #2f5bdd;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.white-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.invoice-seo-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}

.invoice-seo-hero-text h2,
.panel-head h3,
.seo-premium-card h3,
.seo-split-content h3,
.invoice-seo-final-cta-content h3 {
  margin: 18px 0 18px;
  color: #0f172a;
  font-size: clamp(2rem, 3.2vw, 4rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.panel-head h3,
.seo-premium-card h3,
.seo-split-content h3,
.invoice-seo-final-cta-content h3 {
  font-size: clamp(1.55rem, 2vw, 2.4rem);
}

.invoice-seo-hero-text p,
.seo-premium-card p,
.panel-head p,
.premium-step-card p,
.premium-faq-answer p,
.invoice-seo-tool-card p,
.seo-split-content p,
.highlight-box p,
.invoice-seo-final-cta-content p {
  color: #5b6475;
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0 0 16px;
}

.invoice-seo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 18px;
}

.invoice-seo-btn {
  min-height: 54px;
  padding: 0 24px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.25s ease;
}

.invoice-seo-btn-primary {
  background: #3c68e6;
  color: #ffffff;
  box-shadow: 0 16px 35px rgba(60, 104, 230, 0.24);
}

.invoice-seo-btn-primary:hover,
.invoice-seo-btn-secondary:hover,
.invoice-seo-btn-white:hover,
.invoice-seo-btn-ghost:hover {
  transform: translateY(-2px);
}

.invoice-seo-btn-secondary {
  background: #ffffff;
  color: #111827;
  border: 1px solid #d8e1f0;
}

.invoice-seo-btn-white {
  background: #ffffff;
  color: #2450d2;
}

.invoice-seo-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  background: transparent;
}

.invoice-seo-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.invoice-seo-mini-points span {
  padding: 10px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5ebf5;
  color: #344054;
  font-size: 0.92rem;
  font-weight: 600;
}

.invoice-seo-hero-visual {
  position: relative;
}

.premium-invoice-showcase {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-invoice-board {
  position: relative;
  width: min(100%, 540px);
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(222, 230, 244, 0.85);
  box-shadow:
    0 30px 70px rgba(18, 31, 53, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.premium-invoice-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

.premium-brand {
  font-size: 1.35rem;
  font-weight: 800;
  color: #2450d2;
}

.premium-brand-sub {
  color: #667085;
  font-size: 0.95rem;
}

.premium-status {
  padding: 10px 14px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2f5bdd;
  font-size: 0.88rem;
  font-weight: 700;
}

.premium-invoice-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.meta-box {
  padding: 16px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid #e5edf8;
}

.meta-box span {
  display: block;
  color: #667085;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.meta-box strong {
  color: #101828;
  font-size: 1rem;
}

.premium-lines {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.premium-lines span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eaf0f8 0%, #dfe8f7 100%);
}

.premium-lines span.small {
  width: 62%;
}

.premium-total-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3c68e6 0%, #2d57d6 100%);
  color: #ffffff;
}

.premium-total-box span {
  font-size: 0.95rem;
  opacity: 0.95;
}

.premium-total-box strong {
  font-size: 1.05rem;
}

.premium-float-card {
  position: absolute;
  min-width: 180px;
  max-width: 220px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e6edf8;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(10px);
}

.premium-float-card strong {
  display: block;
  font-size: 0.98rem;
  color: #111827;
  margin-bottom: 6px;
}

.premium-float-card span {
  color: #667085;
  font-size: 0.9rem;
  line-height: 1.5;
}

.card-top-left {
  top: 34px;
  left: 0;
}

.card-top-right {
  top: 74px;
  right: 0;
}

.card-bottom-left {
  bottom: 58px;
  left: 10px;
}

.card-bottom-right {
  bottom: 34px;
  right: 0;
}

.invoice-seo-premium-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  gap: 24px;
  margin-bottom: 28px;
}

.seo-premium-card,
.invoice-seo-wide-panel,
.invoice-seo-tools-panel,
.invoice-seo-feature-band,
.invoice-seo-split {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(225, 232, 243, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.06);
}

.seo-premium-card-lg {
  padding-right: 36px;
}

.seo-premium-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.seo-premium-list li {
  position: relative;
  padding-left: 24px;
  color: #475467;
  line-height: 1.7;
}

.seo-premium-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3c68e6;
  transform: translateY(-50%);
}

.invoice-seo-wide-panel,
.invoice-seo-feature-band,
.invoice-seo-split,
.invoice-seo-tools-panel {
  margin-bottom: 28px;
}

.panel-head {
  max-width: 760px;
  margin-bottom: 26px;
}

.premium-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.premium-step-card {
  position: relative;
  padding: 24px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f9ff 100%);
  border: 1px solid #e6edf8;
  min-height: 220px;
}

.step-no {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #3c68e6;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.96rem;
  margin-bottom: 18px;
  box-shadow: 0 14px 28px rgba(60, 104, 230, 0.22);
}

.premium-step-card h4,
.invoice-seo-tool-card h4,
.highlight-box h4 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.feature-band-head {
  margin-bottom: 22px;
}

.feature-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-pill-card {
  min-height: 78px;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e6edf8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #24324a;
  font-weight: 700;
}

.invoice-seo-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
}

.seo-split-highlight {
  display: flex;
  justify-content: center;
}

.highlight-box {
  width: 100%;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 22px 50px rgba(29, 78, 216, 0.22);
}

.highlight-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.highlight-box h4,
.highlight-box p {
  color: #ffffff;
}

.premium-faq-list {
  display: grid;
  gap: 16px;
}

.premium-faq-item {
  border: 1px solid #e5ebf5;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.premium-faq-question {
  width: 100%;
  border: none;
  background: #ffffff;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  color: #101828;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.premium-faq-icon {
  color: #3c68e6;
  font-size: 1.35rem;
  transition: transform 0.25s ease;
}

.premium-faq-answer {
  display: none;
  padding: 0 22px 22px;
}

.premium-faq-item.active .premium-faq-icon {
  transform: rotate(45deg);
}

.invoice-seo-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.invoice-seo-tool-card {
  display: block;
  text-decoration: none;
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e6edf8;
  transition: all 0.25s ease;
}

.invoice-seo-tool-card:hover {
  transform: translateY(-4px);
  border-color: #cddcff;
  box-shadow: 0 20px 40px rgba(60, 104, 230, 0.09);
}

.invoice-seo-final-cta {
  margin-top: 10px;
  padding: 42px 34px;
  border-radius: 30px;
  background: linear-gradient(135deg, #3c68e6 0%, #1f49c8 100%);
  box-shadow: 0 24px 55px rgba(60, 104, 230, 0.22);
}

.invoice-seo-final-cta-content {
  max-width: 760px;
}

.invoice-seo-final-cta-content h3,
.invoice-seo-final-cta-content p {
  color: #ffffff;
}

/* Responsive */
@media (max-width: 1200px) {
  .invoice-seo-premium-grid {
    grid-template-columns: 1fr;
  }

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

  .invoice-seo-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .invoice-seo-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .invoice-seo-premium {
    padding: 76px 0;
  }

  .invoice-seo-shell {
    width: min(100% - 28px, 1380px);
  }

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

  .premium-invoice-showcase {
    min-height: auto;
    padding: 40px 0;
  }

  .card-top-left,
  .card-top-right,
  .card-bottom-left,
  .card-bottom-right {
    position: static;
  }

  .premium-invoice-showcase {
    display: grid;
    gap: 16px;
  }

  .premium-float-card {
    max-width: none;
  }

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

@media (max-width: 767px) {
  .invoice-seo-hero-text h2,
  .panel-head h3,
  .seo-premium-card h3,
  .seo-split-content h3,
  .invoice-seo-final-cta-content h3 {
    line-height: 1.15;
  }

  .seo-premium-card,
  .invoice-seo-wide-panel,
  .invoice-seo-tools-panel,
  .invoice-seo-feature-band,
  .invoice-seo-split {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .premium-invoice-board {
    padding: 20px;
    border-radius: 22px;
  }

  .premium-invoice-top,
  .premium-total-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .premium-invoice-meta {
    grid-template-columns: 1fr;
  }

  .premium-steps-grid,
  .feature-band-grid,
  .invoice-seo-tools-grid {
    grid-template-columns: 1fr;
  }

  .invoice-seo-hero-actions {
    flex-direction: column;
  }

  .invoice-seo-btn {
    width: 100%;
  }

  .invoice-seo-final-cta {
    padding: 30px 20px;
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .invoice-seo-shell {
    width: min(100% - 20px, 1380px);
  }

  .premium-faq-question {
    padding: 18px 16px;
    font-size: 0.96rem;
  }

  .premium-faq-answer {
    padding: 0 16px 16px;
  }
}

/* SEO CSS Ends */



/* ===============================
   INVOICE KEYWORD CLUSTER SECTION
   =============================== */

.invoice-keyword-cluster{
  width:100%;
  padding:80px 0;
  background:#f7f9fc;
}

.invoice-keyword-cluster .container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

/* Section header */

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-badge{
  display:inline-block;
  background:#e9efff;
  color:#3C68E6;
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:30px;
  margin-bottom:15px;
}

.section-head h2{
  font-size:36px;
  font-weight:700;
  color:#0b1c39;
  margin-bottom:10px;
}

.section-head p{
  font-size:16px;
  color:#6b7280;
  max-width:700px;
  margin:auto;
}

/* Grid */

.keyword-cluster-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

/* Cards */

.keyword-card{
  background:#fff;
  padding:28px;
  border-radius:14px;
  border:1px solid #edf0f6;
  transition:all .25s ease;
  position:relative;
}

.keyword-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  border-color:#dfe6f3;
}

.keyword-card h3{
  font-size:18px;
  color:#0b1c39;
  margin-bottom:10px;
  font-weight:600;
}

.keyword-card p{
  font-size:15px;
  color:#6b7280;
  line-height:1.6;
}

/* subtle accent */

.keyword-card::before{
  content:"";
  width:4px;
  height:35px;
  background:#3C68E6;
  position:absolute;
  left:0;
  top:25px;
  border-radius:0 4px 4px 0;
}

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

@media (max-width:1024px){

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

}

@media (max-width:640px){

  .keyword-cluster-grid{
    grid-template-columns:1fr;
  }

  .section-head h2{
    font-size:28px;
  }

}