.elementor-452 .elementor-element.elementor-element-7f5b677{--display:flex;}.elementor-452 .elementor-element.elementor-element-7f5b677.e-con{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-452 .elementor-element.elementor-element-7f5b677{--width:130.099%;}}/* Start custom CSS */<style>
    #wrapbeacon-landing { all: initial; }
#wrapbeacon-landing { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
#wrapbeacon-landing * { box-sizing: border-box; }

    :root{
      /* Brand palette (from WrapBeacon logo) */
      --bg: #0b1220;
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.10);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --muted2: rgba(255,255,255,.55);
      --border: rgba(255,255,255,.14);

      /* Primary/secondary/accent derived from logo */
      --brand: #00A8F8;   /* WrapBeacon blue */
      --brand2: #2DD4FF;  /* lighter cyan highlight */
      --accent: #F88715;  /* WrapBeacon orange */

      --shadow: 0 18px 50px rgba(0,0,0,.45);
      --radius: 16px;
      --radius2: 22px;
      --max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 20% 0%, rgba(0,168,248,.20), transparent 60%),
        radial-gradient(900px 600px at 85% 10%, rgba(45,212,255,.16), transparent 55%),
        radial-gradient(800px 520px at 60% 110%, rgba(248,135,21,.12), transparent 60%),
        var(--bg);
      line-height:1.45;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid var(--border);
      background: linear-gradient(90deg, rgba(0,168,248,.12), rgba(45,212,255,.10));
      padding:8px 12px; border-radius:999px;
      color:var(--muted);
      font-size:13px;
      backdrop-filter: blur(10px);
    }
    .dot{width:8px;height:8px;border-radius:99px;background:var(--brand)}

    header{
      position:sticky; top:0; z-index:50;
      background: linear-gradient(180deg, rgba(11,18,32,.82), rgba(11,18,32,.55));
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:16px;
    }

    /* Brand block: logo (image) + tagline below */
    .brandblock{display:flex; flex-direction:column; gap:4px; text-decoration:none}
    .brandblock img{display:block; width:240px; height:auto}
    .tagline{font-size:12px; color:var(--muted2); margin:0}

    nav ul{
      list-style:none; margin:0; padding:0;
      display:flex; gap:18px; align-items:center;
    }
    nav a{
      text-decoration:none;
      color:var(--muted);
      font-size:14px;
      padding:8px 10px;
      border-radius:10px;
    }
    nav a:hover{background:rgba(255,255,255,.06); color:var(--text)}

    .nav-actions{display:flex; gap:10px; align-items:center}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      text-decoration:none;
      font-size:14px;
      color:var(--text);
      cursor:pointer;
    }
    .btn:hover{background:rgba(255,255,255,.10)}
    .btn-primary{
      border-color: rgba(0,168,248,.55);
      background: linear-gradient(90deg, rgba(0,168,248,.30), rgba(45,212,255,.18));
      box-shadow: 0 18px 45px rgba(0,168,248,.12);
    }
    .btn-primary:hover{filter:brightness(1.05)}
    .hamburger{display:none}

    .hero{padding:54px 0 26px;}
    .grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:28px;
      align-items:center;
    }
    h1{
      font-size:44px;
      line-height:1.06;
      margin:12px 0 14px;
      letter-spacing:-.6px;
    }
    .lead{font-size:18px;color:var(--muted);max-width:56ch;margin:0 0 20px}

    .kpis{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px;}
    .kpi{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      padding:10px 12px;
      border-radius: 14px;
      min-width: 170px;
    }
    .kpi b{font-size:14px}
    .kpi span{display:block;color:var(--muted2);font-size:12px;margin-top:4px}

    .card{
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border-radius: 22px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card .inner{padding:18px}
    .mock{
      aspect-ratio: 4/3;
      background:
        radial-gradient(380px 260px at 25% 25%, rgba(0,168,248,.26), transparent 60%),
        radial-gradient(360px 260px at 80% 30%, rgba(45,212,255,.18), transparent 60%),
        rgba(255,255,255,.04);
      border-bottom:1px solid rgba(255,255,255,.10);
      position:relative;
      overflow:hidden;
    }
    .mock img{
      width:100%; height:100%; object-fit:cover; display:block;
    }

    .mini{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:14px;
    }
    .mini .tile{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      border-radius: 14px;
      padding:12px;
    }
    .tile b{font-size:13px}
    .tile p{margin:6px 0 0; color:var(--muted2); font-size:12px}

    section{padding:42px 0}
    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }
    h2{margin:0; font-size:28px; letter-spacing:-.3px;}
    .sub{color:var(--muted); max-width:70ch; margin:8px 0 0; font-size:15px;}

    .three{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
      margin-top:18px;
    }
    .feat{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding:16px;
    }
    .feat .icon{
      width:36px;height:36px;border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      display:flex;align-items:center;justify-content:center;
      font-size:18px;
      margin-bottom:12px;
    }
    .feat h3{margin:0 0 6px; font-size:16px}
    .feat p{margin:0; color:var(--muted); font-size:14px}

    .how{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      margin-top:18px;
      align-items:stretch;
    }
    .step{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding:16px;
      display:flex; gap:12px;
    }
    .badge{
      width:30px; height:30px; border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:var(--text);
      font-weight:700;
      flex:0 0 auto;
    }
    .step b{display:block; margin-bottom:4px}
    .step p{margin:0; color:var(--muted); font-size:14px}

    .pricing{
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:14px;
      margin-top:18px;
    }
    .price{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      border-radius: 22px;
      overflow:hidden;
      display:flex; flex-direction:column;
    }
    .price .top{padding:16px; border-bottom:1px solid rgba(255,255,255,.10)}
    .price .top b{font-size:16px}
    .price .amt{font-size:30px; margin-top:6px}
    .price .amt span{font-size:13px; color:var(--muted2); font-weight:500}
    .price ul{margin:0; padding:14px 18px 18px; list-style:none; display:grid; gap:10px; color:var(--muted)}
    .price li{display:flex; gap:10px; align-items:flex-start; font-size:14px}
    .check{color:var(--brand); font-weight:800}
    .price .cta{padding:16px; margin-top:auto}
    .price.featured{
      border-color: rgba(0,168,248,.55);
      background: linear-gradient(180deg, rgba(0,168,248,.16), rgba(45,212,255,.08));
      box-shadow: 0 24px 55px rgba(0,168,248,.10);
    }

    .faq{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      margin-top:18px;
    }
    details{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding:14px 14px;
    }
    summary{cursor:pointer; font-weight:650; list-style:none;}
    summary::-webkit-details-marker{display:none}
    details p{margin:10px 0 0; color:var(--muted); font-size:14px}

    .cta-band{
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(90deg, rgba(0,168,248,.18), rgba(45,212,255,.14));
      border-radius: 22px;
      padding:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .cta-band p{margin:6px 0 0; color:var(--muted)}

    footer{
      padding:32px 0 44px;
      color:var(--muted2);
      border-top:1px solid rgba(255,255,255,.10);
      margin-top:10px;
    }
    .foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start;}
    .foot a{color:var(--muted); text-decoration:none}
    .foot a:hover{text-decoration:underline}
    .small{font-size:12px; color:var(--muted2); max-width:70ch}

    .form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:14px;
    }
    .form input,.form textarea{
      width:100%;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      color:var(--text);
      outline:none;
    }
    .form textarea{grid-column:1 / -1; min-height:92px; resize:vertical}
    .note{margin-top:10px; color:var(--muted2); font-size:12px;}

    @media (max-width: 1120px){
      .pricing{grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 920px){
      .grid{grid-template-columns: 1fr; }
      h1{font-size:38px}
      .three{grid-template-columns: 1fr; }
      .how{grid-template-columns: 1fr; }
      .pricing{grid-template-columns: 1fr; }
      .faq{grid-template-columns: 1fr; }
      .brandblock img{width:220px}
    }
    @media (max-width: 720px){
      nav ul{display:none}
      .hamburger{display:inline-flex}
      .nav-actions .btn:not(.btn-primary){display:none}
      .kpi{min-width:unset; flex:1}
      .mini{grid-template-columns: 1fr}
      .brandblock img{width:190px}
    }
    /* --- HARD OVERRIDES to beat Astra/Elementor globals --- */
#wrapbeacon-landing, 
#wrapbeacon-landing * {
  box-sizing: border-box;
}

/* Headings defaulting to blue */
#wrapbeacon-landing h1,
#wrapbeacon-landing h2,
#wrapbeacon-landing h3,
#wrapbeacon-landing h4,
#wrapbeacon-landing h5,
#wrapbeacon-landing h6 {
  color: var(--text) !important;
}

/* Nav + general links defaulting to theme blue */
#wrapbeacon-landing a {
  color: inherit !important;
  text-decoration: none !important;
}
#wrapbeacon-landing nav a {
  color: var(--muted) !important;
}
#wrapbeacon-landing nav a:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Buttons getting theme styles */
#wrapbeacon-landing .btn,
#wrapbeacon-landing a.btn,
#wrapbeacon-landing button.btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}

#wrapbeacon-landing .btn-primary,
#wrapbeacon-landing a.btn-primary {
  border-color: rgba(0,168,248,.55) !important;
  background: linear-gradient(90deg, rgba(0,168,248,.30), rgba(45,212,255,.18)) !important;
  box-shadow: 0 18px 45px rgba(0,168,248,.12) !important;
}
/* Subtle noise overlay to remove visible gradient banding */
#wrapbeacon-landing {
  position: relative;
  min-height: 100vh;
}

#wrapbeacon-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter>
<rect width='200' height='200' filter='url(%23n)' opacity='.25'/>
</svg>");
  mix-blend-mode: overlay;
}
#wrapbeacon-landing section { background: transparent !important; }

  </style>/* End custom CSS */