:root{
      --bg:#2c6f86;
      --bg2:#1f586d;
      --panel:rgba(10, 37, 52, .38);
      --text:#ffffff;
      --muted:rgba(255,255,255,.88);
      --accent:#f5a81c;
      --accent2:#2fbae3;
      --shadow: 0 22px 60px rgba(0,0,0,.28);
      --radius: 18px;
    }

    *{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(1100px 650px at 50% 10%, rgba(255,255,255,.14), transparent 55%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      overflow-x:hidden;
    }

    /* subtle vertical beams like the reference */
    .beams{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.35;
      background:
        linear-gradient(90deg,
          transparent 0 10%, rgba(255,255,255,.12) 10% 14%, transparent 14% 24%,
          rgba(255,255,255,.10) 24% 28%, transparent 28% 42%,
          rgba(255,255,255,.08) 42% 46%, transparent 46% 60%,
          rgba(255,255,255,.10) 60% 64%, transparent 64% 78%,
          rgba(255,255,255,.08) 78% 82%, transparent 82% 100%);
      transform:translateY(-2%);
    }

    .wrap{
      position:relative;
      min-height:100%;
      display:flex;
      flex-direction:column;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px 18px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      padding:10px 14px;
      border-radius:14px;
      background:rgba(0,0,0,.08);
      backdrop-filter: blur(8px);
    }

    .brand img{
      height:128px;
      width:auto;
      display:block;
    }

    main{
      flex:1;
      display:grid;
      place-items:center;
      padding:22px 18px 120px;
    }

    .panel{
      width:min(860px, 100%);
      border-radius:var(--radius);
      background:var(--panel);
      box-shadow:var(--shadow);
      padding:34px 22px 30px;
      text-align:center;
      position:relative;
      overflow:hidden;
    }

    h1{
      margin:10px 0 8px;
      letter-spacing:.16em;
      font-weight:900;
      text-transform:uppercase;
      font-size: clamp(44px, 4vw, 88px);
      line-height:1;
      text-shadow: 0 6px 18px rgba(0,0,0,.28);
    }

    .sub{
      margin: 12px auto 18px;
      max-width: 46ch;
      color:var(--muted);
      font-size: clamp(15px, 2.2vw, 18px);
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:999px;
      color:rgba(255,255,255,.92);
      font-size:13px;
      margin-bottom:12px;
    }
    .dot{width:8px;height:8px;border-radius:99px;background:var(--accent); box-shadow:0 0 0 4px rgba(245,168,28,.18)}

    /* NEW: contact row */
    .contact{
      display:flex;
      gap:12px;
      justify-content:center;
      flex-wrap:wrap;
      margin: 14px auto 0;
    }
    .contact-item{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:12px;
      background:rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.18);
      color:rgba(255,255,255,.92);
      text-decoration:none;
      box-shadow: 0 10px 24px rgba(0,0,0,.16);
      transition: transform .08s ease, filter .18s ease, background .18s ease;
    }
    .contact-item:hover{
      background:rgba(0,0,0,.24);
      filter:saturate(1.03) brightness(1.02);
    }
    .contact-item:active{transform:translateY(1px)}
    .contact-item svg{
      width:18px;height:18px;
      fill:none;
      stroke:currentColor;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
      opacity:.95;
    }

    .note{
      margin:14px 0 0;
      color:rgba(255,255,255,.75);
      font-size:13px;
    }

    /* paper planes */
    .plane{
      position:absolute;
      width:0;height:0;
      border-style:solid;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
      opacity:.95;
      pointer-events:none;
    }
    .plane.left{
      border-width:0 0 46px 46px;
      border-color: transparent transparent var(--accent) transparent;
      left:-18px;
      top:56%;
      transform:rotate(-12deg);
    }
    .plane.right{
      border-width:46px 46px 0 0;
      border-color: #ff4b2b transparent transparent transparent;
      right:-18px;
      top:58%;
      transform:rotate(14deg);
      opacity:.88;
    }
    .plane.mid{
      border-width:0 0 34px 34px;
      border-color: transparent transparent var(--accent2) transparent;
      right:12%;
      bottom:30%;
      transform:rotate(-6deg);
      opacity:.82;
    }

    .pill--row{
  gap:24px;              /* space between items */
  flex-wrap:wrap;        /* wraps nicely on mobile */
  justify-content:center;
}

.pill-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}


    /* clouds */
    .clouds{
      position:absolute;
      left:0; right:0; bottom:0;
      height:160px;
      pointer-events:none;
      background:
        radial-gradient(90px 70px at 10% 70%, rgba(255,255,255,.85) 0 65%, transparent 66%),
        radial-gradient(120px 90px at 26% 78%, rgba(255,255,255,.78) 0 66%, transparent 67%),
        radial-gradient(150px 110px at 45% 86%, rgba(255,255,255,.86) 0 66%, transparent 67%),
        radial-gradient(120px 90px at 64% 82%, rgba(255,255,255,.80) 0 66%, transparent 67%),
        radial-gradient(140px 100px at 82% 86%, rgba(255,255,255,.86) 0 66%, transparent 67%),
        radial-gradient(120px 90px at 96% 78%, rgba(255,255,255,.78) 0 66%, transparent 67%);
      opacity:.55;
    }

    footer{
      position:absolute;
      bottom:14px;
      width:100%;
      text-align:center;
      color:rgba(255,255,255,.65);
      font-size:12px;
      padding:0 18px;
    }

    @media (max-width:520px){
      .brand img{height:64px}
      .panel{padding:28px 16px 24px}
      .plane.left{top:64%}
      .contact-item{width:100%; justify-content:center;}
    }