/* ===== Base colors (Frutiger Aero inspired) ===== */
:root{
  --sky-1:#b7e5ff;
  --sky-2:#9ff3e1;
  --mint:#caffd7;
  --lime:#a7ff7a;
  --ink:#062338;
  --glass:rgba(255,255,255,.28);
  --glass-border:rgba(255,255,255,.6);
  --shadow:rgba(6,35,56,.15);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

/* ===== Background: layered gradients + vignette ===== */
body{
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  display:grid;
  place-items:center;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(900px 600px at 85% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--mint) 100%);
  position:relative;
  overflow:hidden;
}

/* Subtle vignette for depth */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(80% 80% at 50% 40%, transparent 60%, rgba(0,0,0,.08) 100%);
}

/* ===== Decorative bubbles (soft bokeh) ===== */
.scene{position:relative; width:min(720px, 92vw); height:min(520px, 78vh);}
.bubble{
  position:absolute; border-radius:50%;
  filter: blur(2px);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2) 45%, rgba(255,255,255,0) 70%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  box-shadow: 0 10px 40px rgba(255,255,255,.25);
  opacity:.55;
}
.b1{ width:160px; height:160px; left:-30px; top:10px; }
.b2{ width:120px; height:120px; right:10px; top:60px; }
.b3{ width:200px; height:200px; right:-40px; bottom:-10px; }

/* ===== Glassy card ===== */
.card{
  position:absolute; inset:0; margin:auto;
  max-width:540px; width:92%; padding:2.4rem 2rem;
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(125%);
  box-shadow:
    0 12px 40px var(--shadow),
    inset 0 0 0 1px rgba(255,255,255,.35);
  text-align:center;
}

/* glossy stripe on card */
.card::before{
  content:"";
  position:absolute; left:12px; right:12px; top:10px; height:46px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

/* small green-glass chip */
.chip{
  display:inline-block;
  margin:0 auto 0.9rem;
  padding:0.8rem 1.5rem;   /* bigger bubble */
  font-size:1.3rem;          /* larger text */
  letter-spacing:.3px;
  color:#08351a;
  background: linear-gradient(180deg, #eafff1, #bfffd1);
  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Gradient “Aero” title text */
h1{
  margin:0 0 0.6rem;
  font-weight:700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height:1.1;
  background: linear-gradient(180deg, #0a6dd6, #10a6da 60%, #0e6f88);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(16,166,218,.25);
}

/* Body copy */
.blurb{ margin:0.5rem 0 1rem; font-size:1.06rem; }
.note{  margin:0.25rem 0 0; font-size:0.95rem; color:#0b4c71; }

a{
  color:#006bff;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
a:hover{ text-decoration:underline; }

/* Small screens: tighten spacing a touch */
@media (max-width:420px){
  .card{ padding:1.8rem 1.2rem; }
}