:root{
        /* Premium “Future Glass” palette */
        --bg0:#070A12;
        --bg1:#0B1020;
        --surface: rgba(255,255,255,.06);
        --surface2: rgba(255,255,255,.09);
        --border: rgba(140,170,255,.18);
        --text:#EAF0FF;
        --muted: rgba(234,240,255,.72);
        --muted2: rgba(234,240,255,.56);
        --cyan:#00D9FF;
        --violet:#7C4DFF;
        --magenta:#FF4FD8; /* optional micro-accent */
        --shadow: 0 18px 60px rgba(0,0,0,.55);
        --radius: 18px;
        --radius2: 26px;
        --max: 1120px;
      }

      *{box-sizing:border-box}
      html{scroll-behavior:smooth}
      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 800px at 18% 12%, rgba(0,217,255,.12), transparent 55%),
          radial-gradient(900px 700px at 82% 24%, rgba(124,77,255,.16), transparent 58%),
          radial-gradient(1000px 900px at 50% 90%, rgba(255,79,216,.08), transparent 60%),
          linear-gradient(180deg, var(--bg0), var(--bg1));
        overflow-x:hidden;
      }

      a{color:inherit}
      .wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
      .glass{
        background: linear-gradient(180deg, var(--surface), rgba(255,255,255,.04));
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      /* Subtle animated “sheen” */
      .sheen{
        position:relative;
        overflow:hidden;
      }
      .sheen:before{
        content:"";
        position:absolute;
        inset:-2px;
        background: linear-gradient(120deg, transparent 0%, rgba(0,217,255,.08) 35%, rgba(124,77,255,.10) 55%, transparent 85%);
        transform: translateX(-40%);
        opacity:.9;
        filter: blur(2px);
        animation: sheen 10s ease-in-out infinite;
        pointer-events:none;
      }
      @keyframes sheen{
        0%{transform:translateX(-45%)}
        50%{transform:translateX(45%)}
        100%{transform:translateX(-45%)}
      }

      /* Header */
      header{
        position:sticky;
        top:0;
        z-index:50;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: rgba(7,10,18,.55);
        border-bottom: 1px solid rgba(140,170,255,.10);
      }
      header .wrap{ position:relative; }

      .mobileMenu{
        display:none; /* keep */
        position:absolute;
        right:22px;
        top:64px;
        width: min(360px, calc(100vw - 44px));
        padding:12px;
        border-radius: 18px;
        border:1px solid rgba(140,170,255,.16);
        background: rgba(7,10,18,.85);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: var(--shadow);
        z-index:100;
      }

      
      .nav{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:14px 0;
      }
      .brand{
        display:flex;
        align-items:center;
        gap:12px;
        min-width:200px;
      }
      .logo{
        width:200px;
        overflow:hidden;
      }
      .logo img{width:100%; height:100%; object-fit:contain; display:block}
      .brand strong{
        letter-spacing:.08em;
        font-size:12px;
        color:rgba(234,240,255,.86);
      }
      .brand span{
        display:block;
        font-size:12px;
        color:var(--muted2);
        margin-top:2px;
      }

      nav ul{
        list-style:none;
        display:none;
        gap:18px;
        margin:0;
        padding:0;
        align-items:center;
      }
      nav a{
        text-decoration:none;
        font-size:13px;
        color:rgba(234,240,255,.78);
        padding:10px 10px;
        border-radius:12px;
        border:1px solid transparent;
        transition: .18s ease;
      }
      nav a:hover{
        color:var(--text);
        border-color: rgba(140,170,255,.18);
        background: rgba(255,255,255,.04);
      }

      .nav-cta{
        display:flex;
        gap:10px;
        align-items:center;
      }
      .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:10px 14px;
        border-radius: 14px;
        border:1px solid rgba(140,170,255,.20);
        background: rgba(255,255,255,.04);
        color: var(--text);
        text-decoration:none;
        font-size:13px;
        letter-spacing:.02em;
        transition:.18s ease;
        white-space:nowrap;
      }
      .btn:hover{
        transform: translateY(-1px);
        border-color: rgba(0,217,255,.30);
        box-shadow: 0 14px 40px rgba(0,217,255,.08);
      }
      .btn.primary{
        background: linear-gradient(135deg, rgba(0,217,255,.22), rgba(124,77,255,.18));
        border-color: rgba(0,217,255,.34);
      }

      /* Mobile nav */
      .menuBtn{
        display:inline-flex;
        border:1px solid rgba(140,170,255,.22);
        background: rgba(255,255,255,.04);
        color:var(--text);
        padding:10px 12px;
        border-radius: 14px;
      }

      /* Hero */
      .hero{
        padding: 56px 0 26px;
      }
      .heroGrid{
        display:grid;
        grid-template-columns: 1fr;
        gap:18px;
        align-items:stretch;
      }
      .heroCard{
        padding:26px;
        border-radius: var(--radius2);
      }
      .kicker{
        display:inline-flex;
        gap:10px;
        align-items:center;
        font-size:12px;
        letter-spacing:.16em;
        text-transform:uppercase;
        color:rgba(234,240,255,.74);
      }
      .dot{
        width:8px; height:8px;
        border-radius:99px;
        background: var(--cyan);
        box-shadow: 0 0 0 6px rgba(0,217,255,.10);
      }
      h1{
        margin:14px 0 10px;
        font-size:46px;
        line-height:1.06;
        letter-spacing:-.02em;
      }
      .sub{
        color:var(--muted);
        font-size:16px;
        line-height:1.55;
        margin: 0 0 16px;
        max-width: 56ch;
      }
      .heroActions{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-top: 16px;
      }
      .trustRow{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-top: 16px;
      }
      .pill{
        font-size:12px;
        color: rgba(234,240,255,.78);
        border:1px solid rgba(140,170,255,.18);
        background: rgba(255,255,255,.03);
        padding:8px 10px;
        border-radius:999px;
      }

      .heroVisual{
        padding:18px;
        border-radius: var(--radius2);
        display:flex;
        flex-direction:column;
        gap:12px;
      }
      .frame{
        border-radius: 18px;
        border: 1px solid rgba(140,170,255,.18);
        background:
          radial-gradient(900px 320px at 40% 10%, rgba(0,217,255,.20), transparent 60%),
          linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
        aspect-ratio: 16 / 10;
        overflow:hidden;
        position:relative;
      }
      .heroVideo{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;   /* use "contain" if you never want cropping */
        display:block;
      }

      .frame .scan{
        position:absolute; inset:0;
        background:
          repeating-linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.06) 1px,
            transparent 1px,
            transparent 7px
          );
        opacity:.14;
        mix-blend-mode: overlay;
        pointer-events:none;
      }
      .frame .caption{
        position:absolute;
        left:14px;
        right:14px;
        bottom:12px;
        display:flex;
        justify-content:space-between;
        gap:10px;
        align-items:end;
        pointer-events:none;
      }
      .badge{
        font-size:11px;
        letter-spacing:.12em;
        text-transform:uppercase;
        color: rgba(234,240,255,.78);
        border:1px solid rgba(140,170,255,.18);
        background: rgba(7,10,18,.40);
        padding:8px 10px;
        border-radius: 999px;
        backdrop-filter: blur(10px);
      }
      .mini{
        font-size:12px;
        color: rgba(234,240,255,.72);
        max-width: 34ch;
      }
      .mock{
        position:absolute;
        inset:0;
        display:grid;
        place-items:center;
        padding:18px;
      }
      .mockInner{
        width: 100%;
        height: 100%;
        border-radius: 16px;
        border: 1px solid rgba(0,217,255,.22);
        background:
          radial-gradient(220px 220px at 25% 30%, rgba(0,217,255,.22), transparent 60%),
          radial-gradient(260px 240px at 80% 70%, rgba(124,77,255,.20), transparent 62%),
          linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
        position:relative;
        overflow:hidden;
      }
      .mockInner:after{
        content:"";
        position:absolute;
        inset:-20%;
        background: linear-gradient(135deg, transparent 0%, rgba(0,217,255,.16) 35%, rgba(124,77,255,.16) 55%, transparent 78%);
        transform: rotate(12deg);
        animation: moveGlow 8s ease-in-out infinite;
        filter: blur(2px);
        opacity:.9;
      }
      @keyframes moveGlow{
        0%{transform:translateX(-18%) rotate(12deg)}
        50%{transform:translateX(18%) rotate(12deg)}
        100%{transform:translateX(-18%) rotate(12deg)}
      }
      .mockLabel{
        position:absolute;
        left:14px; top:14px;
        font-size:12px;
        color: rgba(234,240,255,.72);
        border: 1px solid rgba(140,170,255,.18);
        background: rgba(7,10,18,.36);
        padding:8px 10px;
        border-radius: 12px;
        backdrop-filter: blur(10px);
      }
      .mockHint{
        position:absolute;
        right:14px; top:14px;
        font-size:12px;
        color: rgba(234,240,255,.72);
        border: 1px solid rgba(140,170,255,.18);
        background: rgba(7,10,18,.36);
        padding:8px 10px;
        border-radius: 12px;
        backdrop-filter: blur(10px);
      }

      /* Sections */
      section{padding: 32px 0}
      .sectionTitle{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:18px;
        margin-bottom:14px;
      }
      h2{
        margin:0;
        font-size:24px;
        letter-spacing:-.01em;
      }
      .lead{
        margin:0;
        color: var(--muted);
        font-size:14px;
        line-height:1.55;
        max-width: 62ch;
      }

      .grid3{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:12px;
      }
      .card{
        padding:16px;
        border-radius: var(--radius);
      }
      .card h3{
        margin:2px 0 8px;
        font-size:14px;
        letter-spacing:.01em;
      }
      .card p{
        margin:0;
        color: var(--muted);
        font-size:13px;
        line-height:1.6;
      }
      .tag{
        display:inline-flex;
        gap:10px;
        align-items:center;
        color: rgba(234,240,255,.80);
        font-size:11px;
        letter-spacing:.14em;
        text-transform:uppercase;
      }
      .tag .spark{
        width:9px; height:9px; border-radius:99px;
        background: linear-gradient(135deg, var(--cyan), var(--violet));
        box-shadow: 0 0 0 6px rgba(124,77,255,.10);
      }

      /* Results / gallery */
      .gallery{
        display:grid;
        grid-template-columns: 1fr;
        gap:12px;
      }
      .resultBox{
        padding:16px;
        border-radius: var(--radius);
      }
      .slider{
        position:relative;
        border-radius: 16px;
        overflow:hidden;
        border:1px solid rgba(140,170,255,.18);
        background: rgba(255,255,255,.03);
        aspect-ratio: 16 / 10;
      }
      .slide{
        position:absolute; inset:0;
        display:grid; place-items:center;
        font-size:12px;
        color: rgba(234,240,255,.70);
      }
      /* Media inside before/after slider */
      .slideMedia{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit: fill ; /* change to contain if you don't want cropping */
        display:block;
      }

      .beforeLayer{
        background:
          linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
          radial-gradient(500px 260px at 20% 20%, rgba(255,255,255,.05), transparent 60%);
      }
      .afterLayer{
        background:
          radial-gradient(600px 260px at 55% 25%, rgba(0,217,255,.22), transparent 60%),
          radial-gradient(520px 280px at 70% 80%, rgba(124,77,255,.18), transparent 62%),
          linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
      }
      .afterClip{
        position:absolute; inset:0;
        clip-path: inset(0 50% 0 0);
      }
      .handle{
        position:absolute;
        top:0; bottom:0;
        left:50%;
        width:2px;
        background: rgba(234,240,255,.62);
        box-shadow: 0 0 0 10px rgba(0,217,255,.08);
      }
      /* Make the image slider draggable */
      .slider{
        touch-action: none; /* prevents page scrolling while dragging on mobile */
        cursor: ew-resize;
      }
      .knob{
        position:absolute;
        top:50%; left:50%;
        transform: translate(-50%, -50%);
        width:44px; height:44px;
        border-radius: 999px;
        border:1px solid rgba(140,170,255,.25);
        background: rgba(7,10,18,.55);
        backdrop-filter: blur(10px);
        display:grid;
        place-items:center;
        color: rgba(234,240,255,.82);
        font-size:12px;
        letter-spacing:.08em;
        pointer-events: none;
      }
      .range{
        width:100%;
        margin-top:12px;
      }
      .range input{
        width:100%;
        accent-color: var(--cyan);
      }
      .bullets{
        display:grid;
        gap:10px;
      }
      .bullets li{
        color: var(--muted);
        font-size:13px;
        line-height:1.5;
      }

      /* Steps */
      .steps{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:12px;
      }
      .step{
        padding:16px;
        border-radius: var(--radius);
        position:relative;
      }
      .stepNum{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:34px; height:34px;
        border-radius: 12px;
        border:1px solid rgba(0,217,255,.26);
        background: rgba(0,217,255,.08);
        color: rgba(234,240,255,.92);
        font-weight:600;
        margin-bottom:10px;
      }

      /* Industries */
      .tiles{
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        gap:10px;
      }
      .tile{
        padding:12px 12px;
        border-radius: 14px;
        border:1px solid rgba(140,170,255,.14);
        background: rgba(255,255,255,.03);
        color: rgba(234,240,255,.80);
        font-size:13px;
        text-align:center;
      }

      /* AMPLIFY*/
      /* AMPLIFY (premium gradient border) */
      .amplifyCard{
        position: relative;
        border: 1px solid transparent; /* lets the gradient border be the hero */
        box-shadow:
          0 18px 55px rgba(0,0,0,.52),
          0 0 0 1px rgba(255, 215, 0, .10) inset;
      }

      /* gradient “gold” border */
      .amplifyCard:before{
        content:"";
        position:absolute;
        inset:0;
        border-radius: inherit;
        padding: 1px; /* border thickness */
        background: linear-gradient(
          135deg,
          rgba(255, 215, 0, .85),
          rgba(255, 234, 150, .55),
          rgba(255, 215, 0, .55)
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events:none;
        opacity: .9;
      }

      /* subtle inner warmth + corner glow */
      .amplifyCard:after{
        content:"";
        position:absolute;
        inset: -2px;
        border-radius: inherit;
        background:
          radial-gradient(380px 220px at 18% 18%, rgba(255,215,0,.12), transparent 60%),
          radial-gradient(420px 260px at 85% 80%, rgba(255,215,0,.08), transparent 62%);
        filter: blur(2px);
        pointer-events:none;
        opacity: .9;
      }

      .amplifyCard .tag{
        border-color: rgba(255, 215, 0, .28);
      }

      .amplifyCard .tag .spark{
        background: linear-gradient(135deg, rgba(255,215,0,.95), rgba(255,79,216,.35));
        box-shadow: 0 0 0 6px rgba(255, 215, 0, .10);
      }
  

      /* Contact */
      .contactGrid{
        display:grid;
        grid-template-columns: 1fr .9fr;
        gap:12px;
        align-items:start;
      }
      form{
        padding:16px;
        border-radius: var(--radius);
      }
      label{
        display:block;
        font-size:12px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color: rgba(234,240,255,.68);
        margin: 12px 0 6px;
      }
      input, textarea, select{
        width:100%;
        border-radius: 14px;
        border: 1px solid rgba(140,170,255,.18);
        background: rgba(7,10,18,.30);
        color: var(--text);
        padding: 12px 12px;
        outline:none;
      }
      textarea{min-height:120px; resize:vertical}
      input:focus, textarea:focus, select:focus{
        border-color: rgba(0,217,255,.34);
        box-shadow: 0 0 0 6px rgba(0,217,255,.10);
      }
      .formRow{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:10px;
      }
      .note{
        color: var(--muted2);
        font-size:12px;
        line-height:1.55;
        margin: 10px 0 0;
      }
      .contactCard{
        padding:16px;
        border-radius: var(--radius);
      }
      .contactCard h3{
        margin:0 0 8px;
        font-size:14px;
      }
      .contactCard p{
        margin:0 0 10px;
        color: var(--muted);
        font-size:13px;
        line-height:1.6;
      }
      .miniList{
        margin:10px 0 0;
        padding:0;
        list-style:none;
        display:grid;
        gap:10px;
      }
      .miniList a{
        text-decoration:none;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        padding:12px 12px;
        border-radius: 14px;
        border:1px solid rgba(140,170,255,.16);
        background: rgba(255,255,255,.03);
        color: rgba(234,240,255,.86);
        font-size:13px;
      }
      .miniList a span{color: rgba(234,240,255,.65); font-size:12px}
      .disabled{
        opacity:.55;
        cursor:not-allowed;
      }

      footer{
        padding: 22px 0 34px;
        border-top: 1px solid rgba(140,170,255,.10);
        color: rgba(234,240,255,.62);
        font-size:12px;
      }
      .foot{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
      }
      .foot a{color: rgba(234,240,255,.68); text-decoration:none}
      .foot a:hover{color: var(--text)}
      .sep{opacity:.5}

      /* Responsive */
      @media (max-width: 980px){
        .heroGrid{grid-template-columns: 1fr; }
        .gallery{grid-template-columns: 1fr}
        .grid3{grid-template-columns: 1fr}
        .steps{grid-template-columns: 1fr}
        .tiles{grid-template-columns: repeat(3, 1fr)}
        .contactGrid{grid-template-columns: 1fr}
        nav ul{display:none}
        .menuBtn{display:inline-flex}
        .nav-cta{display:flex}
        /* brand can shrink, CTA stays visible */
        .brand{ min-width: 0; flex: 1 1 auto; }
        .logo{ width: 180px; max-width: 58vw; }

        /* show only Menu + primary CTA in header */
        .nav-cta > a.btn{ display:none; }
        .nav-cta > a.btn.primary{ display:inline-flex; }
        .nav-cta > .menuBtn{ display:inline-flex; }
      }
      .mobileMenu a{
        display:block;
        padding:12px 10px;
        margin: 8px 0;
        border-radius: 14px;
        border:1px solid rgba(140,170,255,.16);
        background: rgba(255,255,255,.03);
        text-decoration:none;
        color: rgba(234,240,255,.86);
      }