:root {
      --lime: #00cc33;
      --lime-dark: #009922;
      --black: #000000;
      --white: #ffffff;
      --gray: #a0a0a0;
      --border: #1e1e1e;
      --card: #080808;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--black);
      color: var(--white);
      font-family: 'Space Grotesk', sans-serif;
      overflow-x: hidden;
      cursor: none;
      -webkit-font-smoothing: antialiased;
    }
    /* ── Cursor ── */
    .cursor {
      width: 10px; height: 10px; background: var(--lime);
      border-radius: 50%; position: fixed; pointer-events: none;
      z-index: 9999; transform: translate(-50%,-50%); mix-blend-mode: difference;
    }
    .cursor-ring {
      width: 34px; height: 34px; border: 1px solid var(--lime);
      border-radius: 50%; position: fixed; pointer-events: none;
      z-index: 9998; transform: translate(-50%,-50%); opacity: .45;
    }
    @media (pointer: coarse) { .cursor, .cursor-ring { display: none; } body { cursor: auto; } }
    /* ── Fonts ── */
    .font-display { font-family: 'Bebas Neue', sans-serif; }
    .font-mono { font-family: 'DM Mono', monospace; }
    /* ── Noise grain ── */
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:.28;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
    }
    /* ── Nav ── */
    #main-nav {
      position:fixed; top:0; left:0; right:0; z-index:500;
      background:rgba(0,0,0,.78);
      backdrop-filter:blur(18px) saturate(160%);
      -webkit-backdrop-filter:blur(18px) saturate(160%);
      border-bottom:1px solid var(--border);
      transition: border-color .3s;
    }
    /* ── Section label ── */
    .slabel {
      font-family:'DM Mono',monospace; font-size:.7rem;
      letter-spacing:.22em; color:var(--gray); text-transform:uppercase;
    }
    /* ── Marquee ── */
    .mq-track {
      display:flex; white-space:nowrap;
      animation: mq 32s linear infinite;
    }
    .mq-track.rev { animation-direction:reverse; animation-duration:26s; }
    .mq-track.slow { animation-duration:45s; }
    .mq-track:hover { animation-play-state:paused; }
    @keyframes mq { to { transform:translateX(-50%); } }
    .mq-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#040404; }
    /* ── Bento card ── */
    .bcard {
      border:1px solid var(--border); background:var(--card);
      transition: border-color .3s, box-shadow .3s, transform .3s;
      position:relative; overflow:hidden;
    }
    .bcard::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(circle at 80% 20%, rgba(0,204,51,.06) 0%, transparent 60%);
      opacity:0; transition:opacity .4s;
    }
    .bcard:hover::before { opacity:1; }
    .bcard:hover {
      border-color:var(--lime);
      box-shadow:0 0 0 1px var(--lime), 0 0 36px rgba(0,204,51,.15);
      transform:translateY(-3px) rotate(-.25deg);
    }
    /* ── Buttons ── */
    .btn-lime {
      background:var(--lime); color:#000; font-weight:700;
      font-family:'Space Grotesk',sans-serif; border:2px solid var(--lime);
      transition:all .25s; letter-spacing:.04em; display:inline-block;
      text-align:center; cursor:none;
    }
    .btn-lime:hover { background:transparent; color:var(--lime); box-shadow:0 0 22px rgba(0,204,51,.38); }
    .btn-outline {
      background:transparent; color:var(--white); font-weight:600;
      font-family:'Space Grotesk',sans-serif; border:2px solid #2a2a2a;
      transition:all .25s; letter-spacing:.04em; display:inline-block;
      text-align:center; cursor:none;
    }
    .btn-outline:hover { border-color:var(--lime); color:var(--lime); }
    /* ── Underline grow ── */
    .ugrow { position:relative; display:inline-block; }
    .ugrow::after {
      content:''; position:absolute; bottom:-2px; left:0;
      width:0; height:1.5px; background:var(--lime); transition:width .3s;
    }
    .ugrow:hover::after { width:100%; }
    /* ── Reveal ── */
    .reveal { opacity:0; transform:translateY(42px); }
    /* ── Hero bg ── */
    .hero-bg {
      background:
        radial-gradient(ellipse 80% 60% at 65% 40%, rgba(0,204,51,.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 10% 80%, rgba(0,204,51,.04) 0%, transparent 60%);
    }
    /* ── Grid pattern ── */
    .grid-bg {
      background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 80px 80px;
    }
    /* ── Stat num ── */
    .stat-num { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.4rem,5vw,4.2rem); color:var(--lime); line-height:1; }
    .service-tag { font-family:'DM Mono',monospace; font-size:.67rem; color:var(--lime); letter-spacing:.2em; }
    /* ── Logo carousel item ── */
    .logo-item {
      border:1px solid #1a1a1a; background:#090909;
      transition:all .3s; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
      padding:14px 24px; flex-shrink:0; margin:0 8px;
    }
    .logo-item:hover { border-color:var(--lime); background:rgba(0,204,51,.04); }
    .logo-text {
      font-family:'Bebas Neue',sans-serif;
      font-size:1rem; letter-spacing:.08em;
      color:#fff; opacity:.7;
      white-space:nowrap;
    }
    /* ── How We Work step ── */
    .step-card {
      position:relative; border:1px solid var(--border);
      background:var(--card); border-radius:12px;
      transition:all .3s;
    }
    .step-card:hover {
      border-color:var(--lime);
      box-shadow:0 0 0 1px var(--lime), 0 0 28px rgba(0,204,51,.12);
    }
    .step-num {
      font-family:'Bebas Neue',sans-serif;
      font-size:5rem; line-height:1;
      color:var(--lime); opacity:.12;
      position:absolute; top:12px; right:16px;
    }
    /* ── Testimonial card ── */
    .tcard {
      border:1px solid var(--border); background:#080808;
      border-radius:12px; transition:all .3s;
    }
    .tcard:hover { border-color:var(--lime); box-shadow:0 0 24px rgba(0,204,51,.1); }
    .stars { color:var(--lime); font-size:1rem; letter-spacing:2px; }
    /* ── Contact form ── */
    .form-input {
      width:100%; background:#0c0c0c; border:1px solid #252525;
      color:#fff; border-radius:8px; padding:14px 16px;
      font-family:'Space Grotesk',sans-serif; font-size:.9rem;
      outline:none; transition:border-color .25s;
      -webkit-appearance:none;
    }
    .form-input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(0,204,51,.08); }
    .form-input::placeholder { color:#555; }
    .form-label { font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.15em; color:var(--gray); text-transform:uppercase; display:block; margin-bottom:8px; }
    select.form-input option { background:#0c0c0c; }
    /* ── Checkbox custom ── */
    .check-item {
      display:flex; align-items:center; gap:10px;
      border:1px solid #222; border-radius:8px; padding:10px 16px;
      cursor:pointer; transition:all .2s; user-select:none;
    }
    .check-item:hover { border-color:var(--lime); }
    .check-item.selected { border-color:var(--lime); background:rgba(0,204,51,.07); color:var(--lime); }
    .check-box {
      width:18px; height:18px; border:1.5px solid #333; border-radius:4px;
      display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s;
    }
    .check-item.selected .check-box { border-color:var(--lime); background:var(--lime); }
    /* ── Industry pill ── */
    .ind-pill {
      border:1px solid #1e1e1e; background:#090909; border-radius:12px;
      transition:all .3s; cursor:default;
    }
    .ind-pill:hover { border-color:var(--lime); background:rgba(0,204,51,.05); transform:scale(1.025); }
    /* ── Animated border badge ── */
    @property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
    @keyframes bspin { to { --angle:360deg; } }
    .badge-border {
      border:1px solid transparent;
      background: linear-gradient(#080808,#080808) padding-box,
                  conic-gradient(from var(--angle),var(--lime) 0%,transparent 30%,transparent 70%,var(--lime) 100%) border-box;
      animation:bspin 4s linear infinite;
    }
    /* ── Floating WhatsApp ── */
    .wa-float {
      position:fixed; bottom:24px; right:24px; z-index:800;
      width:56px; height:56px; border-radius:50%;
      background:#25d366; display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 20px rgba(37,211,102,.4);
      transition:transform .3s, box-shadow .3s; cursor:pointer;
      text-decoration:none;
    }
    .wa-float:hover { transform:scale(1.12); box-shadow:0 6px 28px rgba(37,211,102,.6); }
    .wa-float-label {
      position:absolute; right:66px; background:#111; border:1px solid #222;
      color:#fff; font-size:.75rem; padding:6px 12px; border-radius:20px;
      white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s;
      font-family:'Space Grotesk',sans-serif;
    }
    .wa-float:hover .wa-float-label { opacity:1; }
    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width:3px; }
    ::-webkit-scrollbar-track { background:#000; }
    ::-webkit-scrollbar-thumb { background:var(--lime); border-radius:2px; }
    /* ── Mobile nav menu ── */
    #mobile-menu { display:none; }
    #mobile-menu.open { display:flex; }
    /* ── Success message ── */
    #form-success { display:none; }
    /* ── Credentials Card ── */
    .cred-card {
      border:1px solid var(--border); background:var(--card);
      border-radius:12px; transition:all .3s;
    }
    .cred-card:hover { border-color:var(--lime); box-shadow:0 0 32px rgba(0,204,51,.15); }
    /* ── Lead magnet ── */
    .lead-box {
      background: linear-gradient(135deg, #080808 0%, rgba(0,204,51,.05) 100%);
      border:1px solid var(--border); border-radius:16px;
    }
    /* ── Testimonial slider ── */
    .tslider { overflow:hidden; }
    .tslider-track {
      display:flex; transition:transform .5s cubic-bezier(.22,.61,.36,1);
    }
    .tslide { flex:0 0 100%; }
    /* ── Page sections ── */
    .page-section { display:none; }
    .page-section.active { display:block; }
    /* ── Mobile responsive fixes ── */
    @media (max-width:640px) {
      .stat-num { font-size:2.2rem; }
      .step-num { font-size:3.5rem; }
    }

/* ════════════════════════════════════════════════
   NEW IMMERSIVE HERO & BACKGROUND FIX
   ════════════════════════════════════════════════ */

/* 1. Top Margin & Content Fix */
.hero-top-margin-fix {
    margin-top: 40px; /* Increased from -80px to pull text higher */
    position: relative;
    z-index: 10;
}

/* 2. Background Container Logic - FIXED POSITIONING */
.hero-visual-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%; 
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Prevents background from blocking clicks */
}

.hero-visual-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Blends image into the black background */
    mask-image: linear-gradient(to right, transparent, black 30%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 30%);
    filter: brightness(0.8); 
}


/* 3. Mobile Responsiveness */
@media (max-width: 1023px) {
    .hero-visual-container {
        display: none !important;
    }

    .hero-top-margin-fix {
        /* This is the hammer: force it down and kill the negative margin */
        margin-top: 20px !important; 
        padding-top: 100px !important; 
        text-align: left;
    }

    #hero-h1 {
        font-size: 2.6rem !important; /* Slightly smaller to ensure fit */
        line-height: 1.1;
        margin-top: 10px;
    }
}

/* 4. Keep Hover Effect */
#hero:hover .hero-visual-container img {
    transform: scale(1.02);
    transition: transform 10s ease-out;
}

    /* ════════════════════════════════════════════════
       CIRCULAR SPINNING BADGE (near CTA buttons)
    ════════════════════════════════════════════════ */
    .hero-badge-ring {
      position: relative;
      width: 80px; height: 80px;
      flex-shrink: 0;
    }
    .hero-badge-svg {
      width: 100%; height: 100%;
      animation: badge-spin 18s linear infinite;
    }
    @keyframes badge-spin { to { transform: rotate(360deg); } }
    .hero-badge-text { text-transform: uppercase; }
    .hero-badge-center {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }

    /* ════════════════════════════════════════════════
       TYPOGRAPHY UPGRADES — body descriptions
    ════════════════════════════════════════════════ */
    /* Larger base descriptive text throughout */
    .bcard p,
    .step-card p,
    .tcard p,
    .ind-pill p,
    .cred-card p,
    .lead-box p {
      font-size: .95rem !important;
      line-height: 1.7 !important;
      color: rgba(255,255,255,.52) !important;
    }
    /* "Nine powerful verticals" subtitle — bold & bigger */
    .services-subtitle {
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      color: rgba(255,255,255,.72) !important;
      letter-spacing: .01em;
    }
    /* General body copy bump */
    section p:not(.slabel):not(.service-tag):not(.stat-num) {
      font-size: clamp(.9rem, 1.5vw, 1rem);
    }

    /* ════════════════════════════════════════════════
       LOGO GRID — full colour, no filter
    ════════════════════════════════════════════════ */
    .logo-img-item {
      border: 1px solid #1a1a1a;
      background: #0a0a0a;
      transition: all .3s;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      padding: 16px 28px;
      flex-shrink: 0;
      margin: 0 8px;
      height: 80px;
    }
    .logo-img-item:hover {
      border-color: rgba(0,204,51,.45);
      background: rgba(0,204,51,.04);
      box-shadow: 0 0 18px rgba(0,204,51,.1);
    }
    .logo-img-item img {
      height: 40px;
      max-width: 140px;
      width: auto;
      object-fit: contain;
      /* NO grayscale — full colour */
      filter: none;
      transition: transform .3s;
    }
    .logo-img-item:hover img { transform: scale(1.06); }
    /* Fallback text if image 404s */
    .logo-img-item .logo-fallback {
      font-family: 'Bebas Neue', sans-serif;
      font-size: .95rem;
      letter-spacing: .08em;
      color: rgba(255,255,255,.6);
      white-space: nowrap;
    }

    /* ══════════════════════════════════════════════
       DEMURUP SMART POPUP MODAL
    ══════════════════════════════════════════════ */

    /* — Overlay backdrop — */
    #dr-popup-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      pointer-events: none;
      transition: background 0.45s ease, backdrop-filter 0.45s ease;
    }
    #dr-popup-overlay.visible {
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      pointer-events: all;
    }

    /* — Modal card — */
    #dr-popup-modal {
      position: relative;
      width: 100%;
      max-width: 520px;
      border-radius: 20px;
      padding: 2px; /* space for animated border */
      background: transparent;
      opacity: 0;
      transform: translateY(32px) scale(0.94);
      transition: opacity 0.42s cubic-bezier(.22,.61,.36,1),
                  transform 0.42s cubic-bezier(.22,.61,.36,1);
      will-change: transform, opacity;
    }
    #dr-popup-overlay.visible #dr-popup-modal {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* — Animated neon border via conic gradient — */
    @property --pop-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes pop-border-spin { to { --pop-angle: 360deg; } }

    #dr-popup-modal::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 1.5px;
      background: conic-gradient(
        from var(--pop-angle),
        #00cc33 0%,
        #00ff44 15%,
        transparent 35%,
        transparent 65%,
        #00cc33 85%,
        #00ff44 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: pop-border-spin 3s linear infinite;
      pointer-events: none;
    }

    /* — Static outer glow — */
    #dr-popup-modal::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 22px;
      box-shadow:
        0 0 0 1px rgba(0, 204, 51, 0.25),
        0 0 40px rgba(0, 204, 51, 0.18),
        0 0 100px rgba(0, 204, 51, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.8);
      pointer-events: none;
    }

    /* — Inner content box — */
    #dr-popup-inner {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background:
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(0, 204, 51, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 80% 100%, rgba(0, 180, 50, 0.06) 0%, transparent 55%),
        linear-gradient(160deg, #0a0f0a 0%, #060806 40%, #020302 100%);
      padding: 40px 36px 36px;
    }

    /* — Top accent bar — */
    #dr-popup-inner::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #00cc33 30%, #00ff44 50%, #00cc33 70%, transparent);
      opacity: 0.8;
    }

    /* — Scanline texture — */
    #dr-popup-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 204, 51, 0.012) 2px,
        rgba(0, 204, 51, 0.012) 4px
      );
      pointer-events: none;
      border-radius: 18px;
    }

    /* — Close button — */
    #dr-close-btn {
      position: absolute;
      top: 16px; right: 16px;
      width: 32px; height: 32px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
      color: rgba(255,255,255,0.45);
      z-index: 10;
    }
    #dr-close-btn:hover {
      border-color: rgba(255, 60, 60, 0.5);
      background: rgba(255, 60, 60, 0.08);
      color: #ff5555;
      transform: scale(1.08);
    }

    /* — Floating badge — */
    .dr-pop-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 204, 51, 0.1);
      border: 1px solid rgba(0, 204, 51, 0.25);
      border-radius: 20px;
      padding: 5px 12px 5px 8px;
      margin-bottom: 22px;
    }
    .dr-pop-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #00cc33;
      box-shadow: 0 0 8px #00cc33, 0 0 16px rgba(0,204,51,0.5);
      animation: dr-pulse 1.8s ease-in-out infinite;
    }
    @keyframes dr-pulse {
      0%, 100% { box-shadow: 0 0 6px #00cc33, 0 0 12px rgba(0,204,51,0.5); transform: scale(1); }
      50% { box-shadow: 0 0 12px #00cc33, 0 0 24px rgba(0,204,51,0.7); transform: scale(1.2); }
    }
    .dr-pop-badge-text {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      color: #00cc33;
      text-transform: uppercase;
    }

    /* — Headline — */
    .dr-pop-headline {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2rem, 6vw, 2.75rem);
      line-height: 0.95;
      letter-spacing: -0.01em;
      color: #ffffff;
      margin-bottom: 12px;
    }
    .dr-pop-headline em {
      font-style: normal;
      color: #00cc33;
      text-shadow: 0 0 30px rgba(0, 204, 51, 0.45);
    }

    /* — Sub text — */
    .dr-pop-sub {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
      margin-bottom: 28px;
    }

    /* — Divider — */
    .dr-pop-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,204,51,0.2) 40%, rgba(0,204,51,0.2) 60%, transparent);
      margin-bottom: 28px;
    }

    /* — CTA Button — */
    #dr-cta-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 15px 24px;
      background: #00cc33;
      color: #000;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border: 2px solid #00cc33;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
      position: relative;
      overflow: hidden;
      margin-bottom: 16px;
    }
    #dr-cta-btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
      transition: left 0.5s ease;
    }
    #dr-cta-btn:hover::before { left: 100%; }
    #dr-cta-btn:hover {
      background: transparent;
      color: #00cc33;
      box-shadow: 0 0 0 1px #00cc33, 0 0 24px rgba(0,204,51,0.35), 0 0 60px rgba(0,204,51,0.12);
      transform: translateY(-1px);
    }
    #dr-cta-btn:active { transform: translateY(0); }
    .dr-cta-arrow {
      transition: transform 0.25s;
    }
    #dr-cta-btn:hover .dr-cta-arrow { transform: translateX(4px); }

    /* — Maybe later link — */
    #dr-later-btn {
      display: block;
      text-align: center;
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.28);
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.2s;
      padding: 6px;
      background: none;
      border: none;
      width: 100%;
    }
    #dr-later-btn:hover { color: rgba(255,255,255,0.55); }

    /* — Bottom trust strip — */
    .dr-pop-trust {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.05);
      flex-wrap: wrap;
    }
    .dr-trust-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.28);
      text-transform: uppercase;
    }
    .dr-trust-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(0,204,51,0.55);
    }

    /* — Countdown ring — */
    .dr-timer-ring {
      position: absolute;
      top: 18px;
      left: 18px;
      width: 28px;
      height: 28px;
    }
    .dr-timer-ring svg { transform: rotate(-90deg); }
    .dr-timer-circle {
      fill: none;
      stroke: rgba(0,204,51,0.7);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 75.4;
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 1s linear;
    }
    .dr-timer-ring-bg {
      fill: none;
      stroke: rgba(255,255,255,0.06);
      stroke-width: 2;
    }

    /* — Confetti particle on open — */
    @keyframes dr-confetti-fall {
      0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
    }
    .dr-confetti {
      position: absolute;
      width: 5px; height: 5px;
      border-radius: 1px;
      animation: dr-confetti-fall 0.9s ease-out forwards;
      pointer-events: none;
    }

    /* — "Maybe later" countdown badge (reappear) — */
    #dr-reappear-badge {
      display: none;
      position: fixed;
      bottom: 90px; right: 24px;
      z-index: 9999;
      background: #0a0f0a;
      border: 1px solid rgba(0,204,51,0.3);
      border-radius: 12px;
      padding: 10px 14px;
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      color: rgba(0,204,51,0.7);
      text-transform: uppercase;
      box-shadow: 0 0 20px rgba(0,204,51,0.1);
      animation: dr-badge-in 0.3s ease;
      cursor: pointer;
    }
    @keyframes dr-badge-in {
      from { opacity:0; transform:translateY(8px); }
      to   { opacity:1; transform:translateY(0); }
    }
    #dr-reappear-badge:hover { border-color: rgba(0,204,51,0.6); }

    /* — Mobile fixes — */
    @media (max-width: 480px) {
      #dr-popup-inner { padding: 36px 22px 28px; }
      .dr-pop-headline { font-size: 2rem; }
      .dr-pop-trust { gap: 10px; }
    }
  
    /* Base style for logos: Original Color & Clear */
/* --- Client Logo Original Style --- */
.client-logo-container img {
    max-height: 85px; /* Increased from 55px */
    width: auto;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto; /* Keeps them centered in their grid cell */
}
/* Simple hover effect to keep it interactive */
.client-logo-container img:hover {
    transform: scale(1.1);
}

/* Grid layout fix */
.client-logo-container .grid {
    display: grid;
    align-items: center;
    justify-items: center;
}

/* Blog styles */

/* --- Blog Popup Styles --- */

/* 1. Body Locking - Prevents scrolling the main page while popup is open */
body.popup-open {
    overflow: hidden;
}

/* 2. Overlay */
#blog-popup-overlay {
    backdrop-filter: blur(10px); /* Blurs the background main site */
}

/* 3. The 'Active' state (triggered by JS) */
#blog-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 4. Animation for the popup box itself */
#blog-popup-overlay.active .reveal-up {
    animation: revealUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}