:root{--sky:#6DB3F2;--blue:#2F7FD1;--mid:#1D5FA8;--navy:#0B2545;--paper:#F1F4F8;--ink:#0E1A2B;
  --f-d:"Fredoka","Avenir Next",system-ui,sans-serif;--f-b:"Karla","Segoe UI",system-ui,sans-serif;
  --fw:clamp(8px,1.3vw,16px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;color:var(--paper);font:400 1.1rem/1.65 var(--f-b);overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:4px}

/* Banner: a normal full-height section */
.intro{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;text-align:center;padding:0 1.5rem}
.waves{position:absolute;inset:0;width:100%;height:100%}
.waves ellipse{fill:url(#fade);transform-box:fill-box;transform-origin:center;
  animation:pulse var(--t,8s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes pulse{0%,100%{opacity:.18;transform:scaleY(.5)}50%{opacity:.85;transform:scaleY(1.5)}}
.title{position:relative}
.title h1{font:700 clamp(3rem,10vw,8rem)/.95 var(--f-d);letter-spacing:-.01em;margin:0 0 1rem}
.title p{font-size:clamp(1.05rem,2.2vw,1.5rem);color:var(--sky);margin:0}

.menu{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;padding:5rem 1.5rem 1rem}
.menu a{font:600 clamp(1.1rem,2.4vw,1.5rem) var(--f-d);text-decoration:none;color:#fff;background:var(--mid);
  padding:.7em 1.5em;border:5px solid #000;border-radius:999px;box-shadow:inset 0 0 0 2px #fff;transition:background .2s,color .2s}
.menu a:hover,.menu a:focus-visible{background:var(--sky);color:#000}

/* Outlined text: black fill, thin white line, black outer outline */
.pop{position:relative;isolation:isolate;margin:0 0 1rem;font:700 clamp(2.2rem,5vw,3.2rem)/1.05 var(--f-d);
  color:#000;-webkit-text-stroke:.07em #fff;paint-order:stroke fill;stroke-linejoin:round}
.pop::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:#000;
  -webkit-text-stroke:.24em #000;paint-order:stroke fill;stroke-linejoin:round}

/* Layered squares: front card, mid square, big navy square. Each is outlined black, then a thin white line, then its own color. */
.layer{position:relative;width:min(100% - 3.5rem,38rem);margin:7rem clamp(1.75rem,12vw,14rem) 8rem auto;
  padding:clamp(1.75rem,5vw,3rem);display:flex;flex-direction:column;justify-content:center;color:var(--ink);
  --s:1;--sx:calc(100% - 3.2rem);--sy:3.2rem;
  border:5px solid #000;border-radius:1.8rem;box-shadow:inset 0 0 0 2px #fff;
  background:
    radial-gradient(circle at var(--sx) var(--sy),#FFF6D6 0 .9rem,#FFD76A .9rem 1.25rem,rgba(255,215,106,.35) 1.25rem,rgba(255,215,106,0) 2.4rem),
    radial-gradient(circle 26rem at var(--sx) var(--sy),rgba(241,244,248,0) 0 2rem,var(--paper) 100%),
    repeating-conic-gradient(from 0deg at var(--sx) var(--sy),rgba(255,200,70,.24) 0 6deg,rgba(255,255,255,0) 6deg 12deg),
    var(--paper)}
.layer.flip{margin:7rem auto 8rem clamp(1.75rem,12vw,14rem);--s:-1}
@media(min-width:48rem){.layer{aspect-ratio:1}}
.layer::before,.layer::after{content:"";position:absolute;z-index:-1;border:5px solid #000;box-shadow:inset 0 0 0 2px #fff;border-radius:1.8rem}
.layer::after{inset:-5px;background:var(--mid);transform:translate(calc(var(--s)*1.9rem),1.9rem)}
.layer::before{inset:calc(-2.6rem - 5px);z-index:-2;background:var(--navy);border-radius:2.4rem;transform:translate(calc(var(--s)*-1.3rem),-1.1rem)}
.layer p{margin:0 0 1rem}
.layer ul{list-style:none;margin:0;padding:0}
.layer li{border-top:1px solid rgba(14,26,43,.25);padding:.8rem 0}
.layer li:last-child{border-bottom:1px solid rgba(14,26,43,.25)}
.layer li a{font:600 1.3rem var(--f-d);text-decoration:none}
.layer li a:hover{color:var(--mid)}
.layer li span{display:block;font-size:.95rem;color:#43546a}
.layer .btn{align-self:flex-start;color:#fff;background:var(--mid);text-decoration:none;font:600 1.1rem var(--f-d);
  padding:.7em 1.5em;border:4px solid #000;border-radius:999px;box-shadow:inset 0 0 0 2px #fff}
.layer .btn:hover{background:#000}
section{scroll-margin-top:2rem}
footer{padding:3rem 1.5rem 4rem;text-align:center;color:#8aa0b8;font-size:.95rem}

/* Glowing page frame: three warped layers that fade in and out of phase */
.frame{position:fixed;inset:0;pointer-events:none;z-index:50}
.frame i{position:absolute;inset:0;border-radius:20px;will-change:opacity;animation:shimmer var(--t) ease-in-out infinite;animation-delay:var(--d)}
.frame i:nth-child(1){border:var(--fw) solid var(--blue);box-shadow:0 0 28px 6px var(--blue),inset 0 0 28px 6px var(--blue);filter:url(#w1);--t:9s;--d:0s}
.frame i:nth-child(2){inset:calc(var(--fw)*.3);border:calc(var(--fw)*.7) solid var(--sky);box-shadow:0 0 22px 3px var(--sky),inset 0 0 22px 3px var(--sky);filter:url(#w2);--t:11s;--d:-3.5s}
.frame i:nth-child(3){inset:calc(var(--fw)*.45);border:3px solid #fff;box-shadow:0 0 10px 2px var(--sky),inset 0 0 10px 2px var(--sky);filter:url(#w3);--t:7s;--d:-5s}
@keyframes shimmer{0%,100%{opacity:.2}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.waves ellipse{animation:none;opacity:.5}.frame i{animation:none;opacity:.7}}