#nwpf-root{
      /* Theme variables scoped to the component only */
      --primary: #ff0044;
      --secondary: #cc0036;
      --accent: #ff3366;
      --light: #fff5f7;
      --dark: #0f172a;
      --gray: #64748b;
      --success: #10b981;
      --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      --glow: 0 0 15px rgba(255, 0, 68, 0.5);

      --bg-gradient:
        radial-gradient(1200px 800px at 10% 10%, rgba(255,0,68,0.08), transparent 60%),
        radial-gradient(1000px 700px at 90% 20%, rgba(255,51,102,0.08), transparent 60%),
        linear-gradient(180deg, #0b1022 0%, #0f172a 60%, #0b0f1e 100%);
      --glass-bg: rgba(255,255,255,0.06);
      --glass-border: rgba(255, 0, 68, 0.18);
      --ring: conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary));
      --card-radius: 18px;
      --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
      --shadow-2: 0 20px 60px rgba(0,0,0,0.45);

      position: relative;
      color: var(--light);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg-gradient), #0f172a;
      overflow-x: hidden;
      overflow-wrap: anywhere;
      line-height: 1.4;
    }

    /* Larger paragraph text per request */
    #nwpf-root p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.75; }

    /* Local reset scoped inside namespace */
    #nwpf-root, #nwpf-root *{ box-sizing: border-box }
    #nwpf-root a{ color: inherit; text-decoration: none }
    #nwpf-root img, #nwpf-root video, #nwpf-root canvas, #nwpf-root svg{ max-width: 100%; height: auto; display: block }

    /* Background canvas */
    #nwpf-root #nwpf-starfield{
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
    }

    /* Layout container */
    #nwpf-root .nwpf-container{
      width: min(1220px, 100%);
      margin-inline: auto;
      padding-inline: clamp(12px, 4vw, 24px);
    }

    /* Nav */
    #nwpf-root .nwpf-nav{
      position: sticky; top: 0; z-index: 50;
      background: linear-gradient(180deg, rgba(15,23,42,0.7), rgba(15,23,42,0.35));
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    #nwpf-root .nwpf-navRow{
      display:flex; align-items:center; justify-content:space-between; min-height: 72px; gap: 12px;
    }
    #nwpf-root .nwpf-brand{
      display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:0.2px; min-width: 0;
    }
    #nwpf-root .nwpf-logo{
      width:36px; height:36px; border-radius:12px;
      background: radial-gradient(circle at 30% 30%, var(--primary), var(--secondary));
      box-shadow: var(--glow);
      position: relative; overflow: hidden; flex: 0 0 auto;
    }
    #nwpf-root .nwpf-logo::after{
      content:""; position:absolute; inset: -2px;
      background: radial-gradient(60px 60px at 70% 70%, rgba(255,255,255,0.18), transparent 60%);
      filter: blur(6px);
    }
    #nwpf-root .nwpf-brandTitle{ white-space: nowrap }
    #nwpf-root .nwpf-small{ color:#aeb6ce; font-size: 12px; display:block }

    #nwpf-root .nwpf-primaryNav{
      display:flex; gap:16px; list-style:none; padding:0; margin:0; align-items:center; min-width:0; overflow:auto;
    }
    #nwpf-root .nwpf-primaryNav a{
      color: #eaeaf3; font-weight:600; opacity:0.9;
      padding:10px 12px; border-radius:10px; transition: var(--transition); white-space: nowrap;
    }
    #nwpf-root .nwpf-primaryNav a:hover{opacity:1; background: rgba(255,255,255,0.06)}
    #nwpf-root .nwpf-cta{
      display:inline-flex; align-items:center; gap:10px;
      padding:12px 18px; border-radius:12px; font-weight:700; white-space: nowrap;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 8px 24px rgba(255,0,68,0.35);
      transition: var(--transition);
      border:1px solid rgba(255,0,68,0.35);
      flex: 0 0 auto;
    }
    #nwpf-root .nwpf-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255,0,68,0.45) }

    /* Hero */
    #nwpf-root .nwpf-hero{ position: relative; z-index:1; padding: clamp(48px, 8vw, 84px) 0 30px; }
    #nwpf-root .nwpf-eyebrow{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px; border-radius:999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--glass-border);
      font-weight:700; color: #ffd1dd; letter-spacing:0.3px;
    }
    #nwpf-root .nwpf-eyebrow .nwpf-dot{ width:8px; height:8px; border-radius:50%; background: var(--success); box-shadow: 0 0 10px rgba(16,185,129,0.8) }
    #nwpf-root .nwpf-title{
      margin:18px 0 12px;
      font-family: "Space Grotesk", Inter, sans-serif;
      font-size: clamp(32px, 6vw, 68px);
      line-height: 1.05;
      background: linear-gradient(90deg, #fff, #ffdfe7 40%, #ffc1cf);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    #nwpf-root .nwpf-subtitle{
      color: #c9c9d9; font-size: clamp(16px, 1.7vw, 20px);
      max-width: 860px; line-height: 1.6;
    }
    #nwpf-root .nwpf-heroCta{
      display:flex; flex-wrap:wrap; gap:10px; margin-top: 24px;
    }
    #nwpf-root .nwpf-btnGhost{
      padding:12px 16px; border-radius:12px; font-weight:700;
      border:1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.03);
      transition: var(--transition); color: #e9e9f3;
    }
    #nwpf-root .nwpf-btnGhost:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.07); }

    /* Stats */
    #nwpf-root .nwpf-stats{
      margin: 32px 0 10px;
      display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px;
    }
    #nwpf-root .nwpf-stat{
      position:relative; border-radius: 16px; padding:16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.1);
      overflow:hidden; min-width: 0;
    }
    #nwpf-root .nwpf-stat::before{
      content:""; position:absolute; inset: -2px; border-radius: 16px;
      background: radial-gradient(300px 200px at 20% 0%, rgba(255,0,68,0.12), transparent 50%);
      pointer-events:none;
    }
    #nwpf-root .nwpf-statLabel{ color:#b8bed0; font-weight:600; letter-spacing:0.3px }
    #nwpf-root .nwpf-statValue{
      font-family: "Space Grotesk", Inter, sans-serif;
      font-size: clamp(22px, 3.5vw, 40px); font-weight:800; margin-top:6px;
      color:#fff; text-shadow: var(--glow);
    }
    #nwpf-root .nwpf-badgeInline{
      font-size:12px; padding:4px 8px; border-radius:999px; margin-left:8px;
      background: rgba(16,185,129,0.12);
      color: #b6ffda; border:1px solid rgba(16,185,129,0.4);
    }

    /* Trusted logos marquee */
    #nwpf-root .nwpf-trusted{ margin: 26px 0 10px; position: relative; }
    #nwpf-root .nwpf-trustedLabel{ color:#b8bed0; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
    #nwpf-root .nwpf-check{
      width:18px; height:18px; border-radius:5px;
      background: linear-gradient(135deg, var(--success), #24d3a7);
      box-shadow: 0 0 12px rgba(16,185,129,0.6);
      display:inline-block; position:relative; flex: 0 0 auto;
    }
    #nwpf-root .nwpf-check::after{
      content:""; position:absolute; inset:3px 4px 4px 3px;
      border: 2px solid #083a2b; border-top:0; border-left:0; transform: rotate(45deg);
    }
    #nwpf-root .nwpf-marquee{
      overflow:hidden;
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      border:1px solid rgba(255,255,255,0.1); border-radius: 14px;
      background: rgba(255,255,255,0.04);
    }
    #nwpf-root .nwpf-marqueeTrack{
      display:flex; gap:24px; align-items:center; padding:12px 18px;
      animation: nwpf-marquee 28s linear infinite;
    }
    #nwpf-root .nwpf-marquee:hover .nwpf-marqueeTrack{ animation-play-state: paused }
    #nwpf-root .nwpf-logoChip{
      display:flex; align-items:center; gap:10px;
      padding:10px 14px; border-radius:12px;
      border:1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.04);
      color:#f3e7ea; font-weight:700; white-space:nowrap;
      box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    }
    #nwpf-root .nwpf-logoDot{
      width:10px; height:10px; border-radius:50%;
      background: radial-gradient(circle at 30% 30%, var(--primary), var(--secondary));
      box-shadow: var(--glow);
    }
    @keyframes nwpf-marquee{
      from{ transform: translateX(0) }
      to{ transform: translateX(-50%) }
    }

    /* Section headings */
    #nwpf-root .nwpf-section{ position:relative; z-index:1; padding: clamp(40px, 8vw, 56px) 0; }
    #nwpf-root .nwpf-section h2{
      font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(24px, 4vw, 42px);
      margin: 0 0 12px;
      background: linear-gradient(90deg, #fff, #ffe1ea 50%, #ffd0dd);
      -webkit-background-clip: text; color: transparent;
    }
    #nwpf-root .nwpf-section p.nwpf-lead{ color:#cdd3e5; max-width: 820px; }

    /* Filters */
    #nwpf-root .nwpf-filters{
      display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 8px;
    }
    #nwpf-root .nwpf-filterBtn{
      padding:10px 14px; border-radius:10px; font-weight:700; color:#e8e4e9;
      background: rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.12);
      transition: var(--transition);
    }
    #nwpf-root .nwpf-filterBtn.nwpf-active, #nwpf-root .nwpf-filterBtn:hover{ background: rgba(255,0,68,0.14); border-color: rgba(255,0,68,0.35) }

    /* Project grid */
    #nwpf-root .nwpf-grid{
      margin-top: 18px;
      display:grid; gap:18px;
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    #nwpf-root .nwpf-card{
      grid-column: span 4; min-height: 320px; background: rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.12); border-radius: var(--card-radius); overflow:hidden;
      display:flex; flex-direction:column; box-shadow: var(--shadow-1);
      transform-style: preserve-3d; perspective: 800px; transition: var(--transition);
      position:relative; isolation:isolate; min-width: 0;
    }
    #nwpf-root .nwpf-card:hover{ transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-2) }
    #nwpf-root .nwpf-cardMedia{
      height: 160px; position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.08);
      background: linear-gradient(135deg, rgba(255,0,68,0.12), rgba(255,255,255,0.02));
    }
    #nwpf-root .nwpf-mediaImg{
      width: 100%; height: 100%; object-fit: cover; display: block;
      background: radial-gradient(circle at 40% 30%, rgba(255,0,68,0.16), rgba(255,255,255,0.02));
    }
    #nwpf-root .nwpf-mock{
      position:absolute; inset:0; display:grid; place-items:center;
      color:#ffe8ee; font-weight:900; letter-spacing:1px; font-size: 18px; text-align:center; padding: 0 8px;
      opacity:0.0; /* hide overlay text now that we have images */
    }
    #nwpf-root .nwpf-badge{
      position:absolute; top:12px; left:12px; z-index:2; padding:6px 10px; border-radius:999px;
      font-size:12px; font-weight:800; letter-spacing:0.3px;
      background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
      backdrop-filter: blur(6px);
    }
    #nwpf-root .nwpf-badge.nwpf-verified{ background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.45); color:#b6ffda; box-shadow: 0 0 12px rgba(16,185,129,0.3) }
    #nwpf-root .nwpf-badge.nwpf-returning{ left:auto; right:12px; background: rgba(255,0,68,0.14); border-color: rgba(255,0,68,0.45); color:#ffd7df; }

    #nwpf-root .nwpf-cardBody{ padding:16px }
    #nwpf-root .nwpf-cardBody h3{ margin:0 0 6px; font-size: clamp(18px, 2.6vw, 20px) }
    #nwpf-root .nwpf-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
    #nwpf-root .nwpf-tag{
      font-size:12px; padding:6px 8px; border-radius:999px;
      background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
      color: #e7e7f5;
    }
    #nwpf-root .nwpf-impact{
      margin-top: 12px; display:flex; flex-wrap:wrap; gap:10px; color:#cfd5e7; font-size:13px
    }
    #nwpf-root .nwpf-cardFoot{
      margin-top:auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-top:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03)
    }
    #nwpf-root .nwpf-btnInline{
      padding:8px 12px; border-radius:10px; font-weight:800;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border:1px solid rgba(255,0,68,0.4); color:#fff; transition: var(--transition)
    }
    #nwpf-root .nwpf-btnInline:hover{ transform: translateY(-2px) }

    /* Spotlight slider */
    #nwpf-root .nwpf-spotlight{
      margin-top: 24px;
      display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; align-items:stretch;
    }
    #nwpf-root .nwpf-spotCard{
      position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,0.12);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      min-height: 320px; box-shadow: var(--shadow-1);
    }
    #nwpf-root .nwpf-spotMedia{
      position:relative; height: clamp(180px, 26vw, 280px);
      background: radial-gradient(circle at 40% 30%, rgba(255,0,68,0.16), rgba(255,255,255,0.02));
      overflow: hidden;
    }
    #nwpf-root .nwpf-spotImg{ width:100%; height:100%; object-fit: cover; display:block }
    #nwpf-root .nwpf-spotBody{ padding:18px }
    #nwpf-root .nwpf-spotMetrics{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; color:#d8deef; }
    #nwpf-root .nwpf-spotNav{ position:absolute; bottom:12px; right:12px; display:flex; gap:8px }
    #nwpf-root .nwpf-spotBtn{
      width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
      background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-weight:900;
      transition: var(--transition);
    }
    #nwpf-root .nwpf-spotBtn:hover{ background: rgba(255,0,68,0.16); border-color: rgba(255,0,68,0.4) }

    /* Returning customers orbit */
    #nwpf-root .nwpf-orbitWrap{
      display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center; margin-top: 18px;
    }
    #nwpf-root .nwpf-orbit{
      position:relative; width: clamp(260px, 55vw, 420px); height: clamp(260px, 55vw, 420px); margin: 0 auto;
      border-radius:50%;
      background:
        radial-gradient(closest-side, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(farthest-side, rgba(255,0,68,0.14), transparent 60%);
      border:1px dashed rgba(255,255,255,0.14);
      box-shadow: inset 0 0 30px rgba(255,0,68,0.14);
      animation: nwpf-spin 40s linear infinite;
    }
    @keyframes nwpf-spin{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }
    #nwpf-root .nwpf-sat{
      position:absolute; width: 64px; height:64px; border-radius:14px; display:grid; place-items:center;
      background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
      box-shadow: var(--shadow-1);
    }
    #nwpf-root .nwpf-sat .nwpf-logoDot{ width:12px; height:12px }
    #nwpf-root .nwpf-sat b{ font-size:11px; text-align:center; padding:6px; line-height:1.1 }
    /* positions */
    #nwpf-root .nwpf-sat:nth-child(1){ top:-12px; left:calc(50% - 32px) }
    #nwpf-root .nwpf-sat:nth-child(2){ top:40px; right:-12px }
    #nwpf-root .nwpf-sat:nth-child(3){ top:calc(50% - 32px); right:-12px }
    #nwpf-root .nwpf-sat:nth-child(4){ bottom:40px; right:0 }
    #nwpf-root .nwpf-sat:nth-child(5){ bottom:-12px; left:calc(50% - 32px) }
    #nwpf-root .nwpf-sat:nth-child(6){ bottom:40px; left:-12px }
    #nwpf-root .nwpf-sat:nth-child(7){ top:calc(50% - 32px); left:-12px }
    #nwpf-root .nwpf-sat:nth-child(8){ top:40px; left:0 }

    #nwpf-root .nwpf-orbitLegend{
      background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
      border-radius: 14px; padding: 16px; box-shadow: var(--shadow-1);
    }
    #nwpf-root .nwpf-progress{ height: 10px; border-radius:999px; background: rgba(255,255,255,0.06); overflow:hidden; border:1px solid rgba(255,255,255,0.12); margin: 10px 0 6px }
    #nwpf-root .nwpf-progress > span{
      display:block; height:100%; width: 0%;
      background: linear-gradient(90deg, var(--success), #23e0b4);
      box-shadow: 0 0 16px rgba(16,185,129,0.4) inset;
      transition: width 1.6s ease;
    }

    /* Testimonials */
    #nwpf-root .nwpf-testimonialGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top: 18px }
    #nwpf-root .nwpf-testimonialCard{
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      padding: 18px; border-radius: 16px; box-shadow: var(--shadow-1);
    }
    #nwpf-root .nwpf-testimonialCard p{ color:#dbe2f5; margin:0 }
    #nwpf-root .nwpf-testimonialMeta{ display:flex; align-items:center; gap:10px; margin-top:8px; color:#cfd5e7 }
    #nwpf-root .nwpf-avatar{
      width:36px; height:36px; border-radius:10px;
      background: radial-gradient(circle at 30% 30%, var(--primary), var(--accent));
      box-shadow: var(--glow);
    }

    /* Certifications + Stack */
    #nwpf-root .nwpf-certs{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 8px }
    #nwpf-root .nwpf-cert{
      display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 12px;
      background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:#e8e4ea; font-weight:700;
    }
    #nwpf-root .nwpf-pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px; border-radius:999px; font-weight:700; color:#f2e7ec;
      background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12)
    }
    #nwpf-root .nwpf-stack{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px }

    /* CTA panel */
    #nwpf-root .nwpf-ctaPanel{
      margin: 26px 0 10px; position:relative; overflow:hidden;
      border-radius: 18px; border:1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(800px 300px at -10% 120%, rgba(255,0,68,0.16), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      box-shadow: var(--shadow-2);
    }
    #nwpf-root .nwpf-ctaInner{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; padding: 22px }
    #nwpf-root .nwpf-actions{ display:flex; flex-wrap:wrap; gap:12px }
    #nwpf-root .nwpf-btnOutline{
      padding:12px 14px; border-radius:12px; font-weight:800; color:#ffe9ef;
      border: 2px solid rgba(255,0,68,0.5); background: rgba(255,0,68,0.08);
      box-shadow: 0 8px 22px rgba(255,0,68,0.25); transition: var(--transition)
    }
    #nwpf-root .nwpf-btnOutline:hover{ transform: translateY(-2px) }

    /* Footer */
    #nwpf-root .nwpf-footer{
      margin-top: 40px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.1);
      color:#c9cfe2; font-size:14px
    }
    #nwpf-root .nwpf-footerWrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between }

    /* Reveal on scroll */
    #nwpf-root .nwpf-reveal{ opacity:0; transform: translateY(14px) scale(0.98); transition: 700ms cubic-bezier(.2,.9,.2,1); }
    #nwpf-root .nwpf-reveal.is-in{ opacity:1; transform: none }

    /* Responsive tweaks */
    @media (max-width: 1120px){
      #nwpf-root .nwpf-spotlight{ grid-template-columns: 1fr }
    }
    @media (max-width: 1024px){
      #nwpf-root .nwpf-grid .nwpf-card{ grid-column: span 6 }
      #nwpf-root .nwpf-stats{ grid-template-columns: repeat(2, minmax(0,1fr)) }
      #nwpf-root .nwpf-orbitWrap{ grid-template-columns: 1fr }
    }
    @media (max-width: 720px){
      #nwpf-root .nwpf-grid .nwpf-card{ grid-column: span 12; min-height: 280px }
      #nwpf-root .nwpf-testimonialGrid{ grid-template-columns: 1fr }
      #nwpf-root .nwpf-hero{ padding-top: 48px }
      #nwpf-root .nwpf-navRow{ flex-wrap: wrap; justify-content: center; padding: 8px 0 }
      #nwpf-root .nwpf-primaryNav{ justify-content: center; width: 100% }
    }
    @media (max-width: 420px){
      #nwpf-root .nwpf-title{ font-size: clamp(26px, 8vw, 40px) }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      #nwpf-root .nwpf-marqueeTrack, #nwpf-root .nwpf-orbit{ animation: none }
      #nwpf-root .nwpf-card:hover{ transform: none }
    }