:root{
      --bg:#070A12;
      --text:#FFFFFF;
      --muted:rgba(255,255,255,.72);
      --muted2:rgba(255,255,255,.56);
      --line:rgba(255,255,255,.10);

      --cyan:#2EF2E2;
      --blue:#2A6CFF;
      --orange:#FF6B35;
      --gold:#FFD34D;

      --radius:18px;
      --radius2:24px;
      --max:1180px;

      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --shadow2: 0 12px 32px rgba(0,0,0,.35);

      --hero-pos: 60% 42%;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 520px at 16% 18%, rgba(46,242,226,.10), transparent 60%),
        radial-gradient(900px 520px at 85% 10%, rgba(42,108,255,.10), transparent 62%),
        radial-gradient(900px 520px at 70% 80%, rgba(255,107,53,.08), transparent 60%),
        linear-gradient(180deg, var(--bg), #000 75%);
      overflow-x:hidden;
    }
    .wrap{ width:min(var(--max), calc(100% - 44px)); margin:0 auto; }
    a{ color:inherit; text-decoration:none; }

    .skip{
      position:absolute; left:16px; top:12px;
      transform: translateY(-200%);
      background: rgba(0,0,0,.85);
      border: 1px solid rgba(255,255,255,.18);
      padding: 10px 12px;
      border-radius: 12px;
      color:#fff;
      z-index: 1000;
      transition: transform .18s ease;
    }
    .skip:focus{ transform: translateY(0); outline: none; box-shadow: 0 0 0 4px rgba(42,108,255,.25); }

    .noise{
      pointer-events:none;
      position:fixed; inset:0;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.05) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.04) 0 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,.03) 0 1px, transparent 1px);
      background-size: 180px 180px, 220px 220px, 260px 260px;
      opacity:.12;
      mix-blend-mode: overlay;
      z-index:0;
    }

    .panel{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.34);
      backdrop-filter: blur(10px);
      padding: 22px;
      box-shadow: var(--shadow);
    }

    .hero{
      position:relative;
      min-height: 86vh;
      display:flex;
      align-items:center;
      padding: 54px 0 44px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      z-index:1;
      isolation:isolate;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1200px 720px at 35% 60%, rgba(46,242,226,.14), transparent 60%),
        radial-gradient(1200px 720px at 70% 48%, rgba(255,211,77,.10), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.78));
      z-index:-1;
    }
    .heroBg{
      position:absolute; inset:-6%;
      background-image: var(--hero-bg);
      background-size: cover;
      background-position: var(--hero-pos);
      filter: saturate(1.05) contrast(1.05);
      transform: scale(1.03);
      opacity:.68;
      z-index:-2;
    }

    /* Hero card (matches the centered, glassy block from the design) */
    .heroCard{
      /* Make the hero card behave consistently across the full front-end and
         the Customizer iframe (where some environments inject global styles). */
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: 30px;
      position: relative;
      backdrop-filter: blur(14px);
      color: #fff;
    }
    .heroCard::after{
      content:"";
      position:absolute; inset:0;
      border-radius: inherit;
      pointer-events:none;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 26px 90px rgba(0,0,0,.55);
    }
    /* Defensive coloring: some WP setups/themes/plugins override global text
       colors on the front-end but not inside the Customizer preview.
       Lock hero typography colors so it looks identical in both. */
    .heroCard{ color:#fff; }
    .heroCard h1,
    .heroCard .kicker,
    .heroCard .lead,
    .heroCard .metric .num,
    .heroCard .metric .lbl{ color:#fff; }
    .heroCard .kicker{ color: rgba(255,255,255,.72); }
    .heroCard .lead{ color: rgba(255,255,255,.72); }
    .heroCard .metric .lbl{ color: rgba(255,255,255,.62); }
    .heroCard .btn{ color:#fff; }
    .heroCard .btn.primary{ color:#0A0C12; }
    .heroCard .kicker{ font-size: 11px; margin-bottom: 12px; }
    .heroCard h1{ color:#fff; }
    .heroCard .lead{ margin-bottom: 14px; }
    .heroCard .ctaRow{ margin-top: 14px; }
    .heroCard .btn{ border-radius: 999px; padding: 12px 18px; }
    .heroCard .btn{ color:#fff; }
    .heroCard .btn.primary{ color:#0A0C12; }
    .heroCard .metrics{ gap: 12px; margin-top: 22px; }
    @media (max-width: 560px){
      .heroCard{ padding: 22px; }
      .heroCard .btn{ width:100%; }
      .heroCard .ctaRow{ display:grid; }
    }
    .kicker{
      font-size: 12px;
      letter-spacing: .20em;
      text-transform: uppercase;
      color: rgba(255,255,255,.72);
      margin: 0 0 14px 0;
    }
    h1{
      margin:0 0 14px 0;
      font-size: clamp(38px, 5.2vw, 68px);
      line-height: 1.02;
      letter-spacing: -0.03em;
      font-weight: 800;
    }
    .lead{
      margin:0 0 18px 0;
      color: var(--muted);
      line-height:1.65;
      max-width: 72ch;
      font-size: 15.5px;
    }
    .ctaRow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top: 16px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color:#fff;
      font-weight: 700;
      transition: transform .12s ease, background .18s ease, border-color .18s ease;
      will-change: transform;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
    .btn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(42,108,255,.25); }
    .btn.primary{
      color:#0A0C12;
      border-color: rgba(255,107,53,.55);
      background: linear-gradient(135deg, rgba(255,107,53,.95), rgba(255,211,77,.85));
      box-shadow: 0 18px 60px rgba(255,107,53,.20);
    }
    .btn.ghost{ border-color: rgba(46,242,226,.22); }

    .metrics{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 18px;
    }
    /* Hero layout: consulting-style split (optional right panel) */
    .heroGrid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 16px;
      align-items: stretch;
    }
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }
    }
    .heroPrimary{ padding: 26px; }
    .heroSide{ display:flex; }
    .heroSideCard{
      width:100%;
      padding: 22px;
    }
    .heroSideTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 12px; }
    .heroBadge{ display:inline-flex; align-items:center; gap:10px; font-weight:900; }
    .heroDot{ width:24px; height:24px; border-radius: 10px; background: linear-gradient(135deg, rgba(46,242,226,.95), rgba(42,108,255,.85)); box-shadow: 0 10px 24px rgba(42,108,255,.22); }
    .heroPill{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.82);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .02em;
      white-space:nowrap;
    }
    .heroSideText{ color: var(--muted); line-height:1.6; font-size: 13.5px; margin: 0 0 12px 0; }
    .heroBullets{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
    .heroBullets li{ display:grid; grid-template-columns: 10px 1fr; gap:10px; align-items:flex-start; color: rgba(255,255,255,.78); font-size: 13px; line-height:1.55; }
    .heroBullets li::before{
      content:"";
      width: 8px; height:8px; border-radius: 99px;
      margin-top: 7px;
      background: rgba(46,242,226,.9);
      box-shadow: 0 0 0 4px rgba(46,242,226,.12);
    }
    @media (max-width: 560px){ .metrics{ grid-template-columns:1fr; } }
    .metric{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      padding: 12px 14px;
    }
    .metric .num{ font-size: 22px; font-weight: 800; letter-spacing:-0.01em; }
    .metric .lbl{ margin-top: 4px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 700; }

    main{ position:relative; z-index:1; }
    .section{
      padding: 72px 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.22));
    }
    @media (max-width: 820px){ .section{ padding: 54px 0; } }

    h2{
      margin:0 0 10px 0;
      font-size: clamp(24px, 3vw, 40px);
      letter-spacing: -0.02em;
      font-weight: 800;
    }
    .sub{ margin:0 0 18px 0; color: var(--muted); line-height:1.65; max-width: 92ch; }

    .grid5{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
    @media (max-width: 980px){ .grid5{ grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px){ .grid5{ grid-template-columns: 1fr; } }
    .card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      padding: 14px;
      min-height: 150px;
      transition: transform .16s ease, border-color .18s ease, background .18s ease;
    }
    .card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
    .icon{
      width: 34px; height:34px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.24);
      display:flex; align-items:center; justify-content:center;
      margin-bottom: 10px;
      font-weight: 900;
      color: rgba(255,255,255,.88);
    }
    .card h3{ margin:0 0 6px 0; font-size: 14px; letter-spacing: -0.01em; font-weight: 900; }
    .card p{ margin:0; font-size: 13px; line-height: 1.55; color: var(--muted2); }

    .grid2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; margin-top: 14px; }
    @media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } }
    .box{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.24);
      padding: 18px;
      box-shadow: var(--shadow2);
    }
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.82);
      font-size: 12px;
      font-weight: 900;
      letter-spacing:.02em;
    }
    .hrGlow{
      height:2px; border-radius:999px;
      background: linear-gradient(90deg, rgba(46,242,226,0), rgba(46,242,226,.8), rgba(255,211,77,.7), rgba(255,107,53,0));
      opacity:.7;
      margin: 14px 0 14px;
    }
    .list{ margin: 12px 0 0 0; padding: 0; list-style:none; color: var(--muted); font-size: 14px; line-height: 1.75; }
    .list li{ padding-left: 18px; position:relative; }
    .list li::before{
      content:"";
      width: 6px; height:6px;
      border-radius: 999px;
      background: rgba(46,242,226,.85);
      position:absolute;
      left:0; top: 11px;
      box-shadow: 0 0 0 6px rgba(46,242,226,.08);
    }

    .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
    @media (max-width: 980px){ .grid3{ grid-template-columns: 1fr; } }
    .actionCard{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      padding: 18px;
      min-height: 160px;
      box-shadow: var(--shadow2);
    }
    .actionTop{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; }
    .badgeIcon{
      width: 34px; height:34px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.22);
      color: rgba(255,255,255,.85);
      font-weight: 900;
    }
    .actionCard h3{ margin:0; font-size: 15px; font-weight: 900; letter-spacing:-0.01em; }
    .actionCard p{ margin:0; color: var(--muted2); line-height:1.65; font-size: 14px; max-width: 54ch; }

    /* Highlights */
    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom: 18px;
    }
    .headControls{ display:flex; gap:10px; }
    .iconBtn{
      width:44px; height:44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:#fff;
      font-weight: 900;
      cursor:pointer;
      transition: transform .12s ease, background .18s ease, border-color .18s ease;
    }
    .iconBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
    .iconBtn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(42,108,255,.25); }

    .rail{
      position:relative;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      overflow:hidden;
    }
    .rail::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 220px at 20% 0%, rgba(46,242,226,.10), transparent 55%),
        radial-gradient(900px 220px at 85% 0%, rgba(255,107,53,.08), transparent 55%);
      pointer-events:none;
      opacity:.7;
    }
    .railFade{
      position:absolute; top:0; bottom:0;
      width: 96px;
      pointer-events:none;
      z-index: 3;
    }
    .railFadeL{ left:0; background: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,0)); }
    .railFadeR{ right:0; background: linear-gradient(270deg, rgba(0,0,0,.70), rgba(0,0,0,0)); }

    .track2{
      position:relative;
      z-index: 2;
      display:flex;
      gap: 16px;
      padding: 18px 28px;
      overflow:auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .track2::-webkit-scrollbar{ display:none; }

    .slide2{
      position:relative;
      flex: 0 0 auto;
      width: 320px;
      scroll-snap-align: start;
      border-radius: 24px;
      background: rgba(255,255,255,.03);
      overflow:hidden;
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      transform: translateZ(0);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .slide2::before{
      content:"";
      position:absolute; inset:0;
      border-radius: 24px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05), rgba(46,242,226,.10));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
    }
    .slide2:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 80px rgba(0,0,0,.55);
    }
    @media (max-width: 520px){ .slide2{ width: 82vw; } }

    .imgWrap2{
      position:relative;
      aspect-ratio: 4/5;
      padding: 10px;
      background: rgba(0,0,0,.10);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor: zoom-in;
    }
    .imgWrap2 img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 16px;
      background: rgba(0,0,0,.22);
      filter: contrast(1.02) saturate(1.02);
    }

    /* Modal (lightbox) — consulting clean */
    .lb{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 22px;
      z-index: 999;
    }
    .lb.open{ display:flex; }
    .lbBackdrop{
      position:absolute; inset:0;
      background: rgba(0,0,0,.76);
      backdrop-filter: blur(10px);
      opacity:0;
      transition: opacity .22s ease;
    }
    .lb.open .lbBackdrop{ opacity:1; }

    .lbDialog{
      position:relative;
      width:min(1120px, 100%);
      max-height: calc(100vh - 44px);
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(10,12,18,.55);
      box-shadow: 0 30px 110px rgba(0,0,0,.70);
      overflow:hidden;
      transform: translateY(8px) scale(.985);
      opacity:0;
      transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
    }
    .lb.open .lbDialog{ transform:none; opacity:1; }

    .lbTop{
      display:flex; justify-content:space-between; align-items:center;
      padding: 12px 12px 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .lbTitle{
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.68);
      font-weight: 900;
      padding-left: 8px;
      user-select:none;
    }
    .lbClose{
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:#fff;
      font-size: 18px;
      font-weight: 900;
      cursor:pointer;
      transition: transform .12s ease, background .18s ease, border-color .18s ease;
    }
    .lbClose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
    .lbClose:focus{ outline:none; box-shadow: 0 0 0 4px rgba(42,108,255,.25); }

    .lbBody{
      padding: 14px;
      max-height: calc(100vh - 44px - 56px);
      overflow:auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.18) transparent;
    }
    .lbBody::-webkit-scrollbar{ height:10px; width:10px; }
    .lbBody::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
    .lbImg{
      display:block;
      width: 100%;
      height: auto;
      max-height: calc(100vh - 44px - 56px - 48px);
      object-fit: contain;
      border-radius: 18px;
      background: rgba(0,0,0,.22);
    }

    /* Download & Contact */
    .ctaPanel{
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.35);
      padding: 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
      flex-wrap:wrap;
      box-shadow: var(--shadow);
    }
    .ctaPanel .left{ min-width: 260px; }
    .ctaPanel h3{ margin:0 0 6px 0; font-size: 18px; font-weight: 900; letter-spacing:-0.01em; }
    .ctaPanel p{ margin:0; color: var(--muted); line-height:1.6; max-width: 78ch; font-size: 14px; }
    .ctaPanel .right{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
    .emailChip{
      display:inline-flex; align-items:center;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.90);
      font-weight: 800;
      letter-spacing:-0.01em;
    }

    footer{ padding: 26px 0 38px; color: rgba(255,255,255,.60); font-size: 13px; }
    .footRow{
      display:flex; justify-content:space-between; align-items:center;
      gap: 16px; flex-wrap:wrap;
      border-top: 1px solid rgba(255,255,255,.06);
      padding-top: 18px;
    }

    /* Motion */
    .reveal{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce){
      .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
      .btn,.card,.iconBtn,.slide2,.lbBackdrop,.lbDialog{ transition:none !important; }
    }
  
    .lbTop{ 
      display:flex; justify-content:space-between; align-items:center;
      padding: 12px 12px 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
    }
    .lbTopLeft{ width: 44px; height: 44px; }
    .lbNav{ display:flex; gap:10px; align-items:center; }
    .lbNavBtn{
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:#fff;
      font-size: 18px;
      font-weight: 900;
      cursor:pointer;
      transition: transform .12s ease, background .18s ease, border-color .18s ease;
    }
    .lbNavBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
    .lbNavBtn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(42,108,255,.25); }

    .lbHint{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .lbHint::before, .lbHint::after{
      content:"";
      position:absolute;
      top: 18%;
      bottom: 18%;
      width: 18%;
      border-radius: 22px;
      opacity: 0;
      transition: opacity .18s ease;
    }
    .lbHint::before{ left: 10px; background: linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,0)); }
    .lbHint::after{ right: 10px; background: linear-gradient(270deg, rgba(0,0,0,.26), rgba(0,0,0,0)); }
    .lbDialog:hover .lbHint::before,
    .lbDialog:hover .lbHint::after{ opacity: .9; }