!doctype html
html lang=en
head
  meta charset=utf-8 
  meta name=viewport content=width=device-width,initial-scale=1 
  meta name=robots content=index,follow 
  titleeVisiontitle
  meta name=description content=eVision — Coming soon. 

  style
    root{
      --bg1#041427;
      --bg2#032c3a;
      --bg3#0a6b7a;
      --cyan#39f5ff;
      --teal#27d7c7;
      --text rgba(230,250,255,.85);
      --muted rgba(230,250,255,.55);
    }

    { box-sizingborder-box; }
    html,body{ height100%; margin0; font-family ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

    body{
      displaygrid;
      place-itemscenter;
      background
        radial-gradient(1200px 700px at 50% 35%, rgba(57,245,255,.12), transparent 55%),
        radial-gradient(900px 600px at 70% 70%, rgba(39,215,199,.10), transparent 60%),
        linear-gradient(145deg, var(--bg1), var(--bg2) 55%, #021018);
      color var(--text);
      overflowhidden;
    }

     subtle moving “mist” 
    bodybefore{
      content;
      positionfixed; inset-20%;
      background
        radial-gradient(closest-side, rgba(57,245,255,.08), transparent 65%),
        radial-gradient(closest-side, rgba(39,215,199,.06), transparent 60%);
      filter blur(24px);
      opacity.55;
      animation drift 14s ease-in-out infinite alternate;
      pointer-eventsnone;
    }

    @keyframes drift{
      from{ transform translate3d(-1.5%, -1%, 0) scale(1.02); }
      to  { transform translate3d( 1.5%,  1%, 0) scale(1.05); }
    }

    .wrap{
      positionrelative;
      widthmin(720px, 92vw);
      padding 34px 18px 24px;
      displayflex;
      flex-directioncolumn;
      align-itemscenter;
      gap 18px;
      text-aligncenter;
    }

    .brand{
      letter-spacing .22em;
      text-transform uppercase;
      font-size 12px;
      color var(--muted);
      user-selectnone;
    }

    .stage{
      positionrelative;
      widthmin(360px, 78vw);
      aspect-ratio 11;
      displaygrid;
      place-itemscenter;
      margin 8px 0 6px;
    }

    .shadow{
      positionabsolute;
      width 62%;
      height 14%;
      bottom 7%;
      left 50%;
      transform translateX(-50%);
      background radial-gradient(closest-side, rgba(0,0,0,.55), transparent 70%);
      filter blur(10px);
      opacity .85;
    }

    .orb{
      positionrelative;
      width 72%;
      aspect-ratio 11;
      border-radius 50%;
      transform-style preserve-3d;
      filter drop-shadow(0 18px 26px rgba(0,0,0,.55));
      animation float 4.6s ease-in-out infinite;
      background
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.22), transparent 35%),
        radial-gradient(circle at 45% 50%, rgba(57,245,255,.22), transparent 55%),
        radial-gradient(circle at 55% 58%, rgba(39,215,199,.16), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(2,10,16,.92), rgba(0,0,0,.95));
      box-shadow
        0 0 0 1px rgba(57,245,255,.12) inset,
        0 0 46px rgba(57,245,255,.18),
        0 0 86px rgba(39,215,199,.10);
      overflowhidden;
    }

    @keyframes float{
      0%,100%{ transform translateY(0px); }
      50%{ transform translateY(-10px); }
    }

     rotating “energy” layer 
    .orbbefore{
      content;
      positionabsolute; inset-14%;
      border-radius 50%;
      background
        conic-gradient(
          from 0deg,
          transparent 0 12%,
          rgba(57,245,255,.22) 12% 18%,
          transparent 18% 34%,
          rgba(39,215,199,.18) 34% 40%,
          transparent 40% 58%,
          rgba(57,245,255,.16) 58% 64%,
          transparent 64% 100%
        );
      filter blur(1px);
      opacity.95;
      mix-blend-mode screen;
      animation spin 5.2s linear infinite;
    }

     inner “eye” glow 
    .orbafter{
      content;
      positionabsolute; inset 18%;
      border-radius 50%;
      background
        radial-gradient(circle at 46% 48%, rgba(57,245,255,.55), transparent 38%),
        radial-gradient(circle at 52% 54%, rgba(39,215,199,.30), transparent 52%),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,.35), transparent 62%);
      opacity.9;
      filter blur(.2px);
      animation pulse 2.6s ease-in-out infinite;
    }

    @keyframes spin{
      to{ transform rotate(360deg); }
    }

    @keyframes pulse{
      0%,100%{ transform scale(1); opacity.78; }
      50%{ transform scale(1.04); opacity1; }
    }

    .tagline{
      margin 0;
      font-size clamp(16px, 2.4vw, 20px);
      color rgba(230,250,255,.78);
      letter-spacing .02em;
      text-shadow 0 2px 18px rgba(0,0,0,.55);
    }

    .sub{
      margin 0;
      font-size 12px;
      color rgba(230,250,255,.45);
      letter-spacing .14em;
      text-transform uppercase;
      user-selectnone;
    }

    .tiny{
      margin-top 6px;
      font-size 12px;
      color rgba(230,250,255,.35);
    }

     optional small “construction” hint, very discreet 
    .tiny span{
      border 1px solid rgba(57,245,255,.18);
      padding 6px 10px;
      border-radius 999px;
      background rgba(2,10,16,.35);
      backdrop-filter blur(6px);
    }
  style
head

body
  main class=wrap role=main aria-label=eVision coming soon
    div class=brandeVisiondiv

    div class=stage aria-hidden=true
      div class=shadowdiv
      div class=orbdiv
    div

    p class=taglineSee what others miss.p
    p class=subComing soonp

    div class=tinyspanUnder quiet constructionspandiv
  main
body
html