:root{
/*	--bkg1:#82c6ec; --bkg2:#3382ae;	*/
	--bkg1:#000; --bkg2:#062341;
	--ink:yellow; --cta:#ff7a3d; --cta2:#f2ad53;
}
*{box-sizing:border-box}
body{
	margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
	color:var(--ink);
	background: linear-gradient(180deg, var(--bkg1), var(--bkg2));
	background-image: url('../images/darkblue.jpg');
	min-height:100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display:flex; align-items:center; justify-content:center; text-align:center;
}

.wrap{ position:relative; z-index:2; width:min(1100px, 96vw); padding: clamp(20px,4vw,40px) }

/* HERO layout */
.hero{
	display:grid; grid-template-columns:1fr; gap:clamp(16px,3vw,28px); align-items:center;
	justify-items:center;
}

/* Dash Gator */
.gator { display:flex; justify-content:center; align-items:flex-end }
.gator img{
	width:80%; max-width:260px; height:auto; user-select:none;
	animation:spin 0.33s linear 3;
}
@keyframes spin { 
	100% { 
		-webkit-transform: rotate(360deg); 
		transform:rotate(360deg); 
	} 
}

h1{
	margin:0;
	font-size: clamp(2.1rem, 6vw, 3.6rem);
	line-height:1.05;
	color:gold;
	text-shadow: 0 2px 0 rgba(80,88,91,1), 0 8px 24px rgba(255,255,255,.25);
}

.lead{
	margin:6px auto 0; max-width:68ch;
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	color:gold;
}

.floaters{ position:fixed; inset:0; pointer-events:none; z-index:1 }
.floater{
	position:absolute; font-size:24px; opacity:.9;
	animation: up 9s linear infinite;
}
.floater:nth-child(0){ animation-duration:12s }
.floater:nth-child(1){ animation-duration:6s }
.floater:nth-child(2){ animation-duration:10s }
.floater:nth-child(3){ animation-duration:4s }
.floater:nth-child(4){ animation-duration:14s }
.floater:nth-child(5){ animation-duration:8s }
.floater:nth-child(6){ animation-duration:16s }
@keyframes up{
	from{ transform:translateY(110vh) }
	to{ transform:translateY(-10vh) }
}

.benefits{
	display:grid; gap:12px; margin: 12px auto 0; width:min(700px, 84vw);
}
.chip{
	display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
	background: rgba(255,255,255,.9);
	border: 2px solid rgba(95,97,8,1);
	color:black;
	border-radius:50px; padding:12px 16px;
	box-shadow: 0 8px 20px rgba(13, 90, 165, .10);
	transform: translateY(10px); opacity:0;
	animation: pop .55s cubic-bezier(.2,.9,.2,1.2) forwards;
}
.chip:nth-child(0){ animation-delay:.1s }
.chip:nth-child(1){ animation-delay:.22s }
.chip:nth-child(2){ animation-delay:.44s }
.chip:nth-child(3){ animation-delay:.66s }
.chip:nth-child(4){ animation-delay:.88s }
.chip:nth-child(5){ animation-delay:.110s }
@keyframes pop{ to{ transform:none; opacity:1 } }
.emo{ font-size:1.4rem }

.cta{ margin-top: clamp(18px,3.2vw,30px) }
.cta a{
	display:inline-grid; place-items:center; text-decoration:none; font-weight:400; letter-spacing:.3px;
	padding:16px 36px; border-radius:999px; color:#112;
	background: radial-gradient(120% 120% at 30% 20%, var(--cta2) 0, #ffe618 45%, var(--cta) 100%);
	font-size: clamp(1.05rem, 2.8vw, 1.35rem);
	box-shadow: 0 2px 6px rgba(255, 153, 0, .4);
	transition: transform .15s ease, filter .15s ease;
	position:relative; overflow:hidden;
}
.cta a:hover{ transform: translateY(-2px) scale(1.03); filter: saturate(1.06) }
.cta a::after{
	content:""; position:absolute; inset:0;
	background: radial-gradient(60% 120% at 70% 0%, rgba(255,255,255,.5), transparent 40%);
	mix-blend-mode: overlay; opacity:.6; pointer-events:none;
	animation: shine 2.6s ease-in-out infinite;
}
@keyframes shine{ 0%,100%{ transform:translateX(-12%) } 50%{ transform:translateX(12%) } }

@media (min-width: 960px){
	.hero{ grid-template-columns: .9fr 1.1fr; text-align:left }
	.gator{ justify-content:flex-end }
	.lead{ margin-left:0 }
}

/* HTML: <div class="tooltip">This is the same as #7 but with another shape for the tail </div> */
.tooltip {
	gap: 10px;
	color: black;
	font-size: 16px;
	max-width: 80ch;
	text-align: left top;
}
.tooltip {
	/* tail dimension */
	--b: 3em;   /* base */
	--h: 3.6em; /* height */
	--t: .6;    /* thickness (from 0 to 1) */

	--p: 50%;  /* main position (0%:top 100%:bottom) */
	--r: 1.2em; /* the radius */

	padding: 1em;
	border-radius: var(--r)/min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2);
	background: rgba(255,255,255,.9);
	position: relative;
	border: 2px solid rgba(95,97,8,1);
}
.tooltip:before {
	content: "";
	position: absolute;
	right: 100%;
	top: clamp(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
	width: var(--h);
	height: var(--b);
	background: inherit;
	border-bottom-left-radius: 100%;
	-webkit-mask: radial-gradient(105% calc(var(--t)*100%) at 100% 0,#0000 99%,#000 101%);
}