/* ====== Reset & theme ====== */
:root{
  --navy:#081625; /* fundo principal */
  --navy-2:#0b2236;
  --teal:#16c3d7; /* turquesa */
  --cyan:#19b4e6;
  --lime:#a3e635; /* verde marca */
  --white:#f5f7fb;
  --muted:#cbd5e1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:var(--white); background:var(--navy); overflow-x:hidden}

/* ====== Background layers ====== */
.hero{
  position:relative;min-height:100dvh;display:flex;flex-direction:column;isolation:isolate;
}
.hero::before{ /* background image */
  content:"";position:fixed;inset:0;z-index:-3;background: url('../assets/fundo-ilha.webp') center/cover no-repeat fixed;filter:none;opacity:0.95;transform:scale(1.02); transition:transform .8s ease;
}
.hero::after{ /* vignette + color overlay */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(1200px 600px at 10% 70%, rgba(0,180,220,.18), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}
.grid-overlay{ /* optional grid if needed */
  position:fixed;inset:0;z-index:-1;opacity:.25;pointer-events:none; background-image: 
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px; animation:grid-pan 40s linear infinite;
}
@keyframes grid-pan{from{transform:translateY(0)}to{transform:translateY(-64px)}}

/* ====== Header ====== */
.top-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(16px,4vw,40px)}
.brand img{height:56px; width:auto; display:block; filter:drop-shadow(0 2px 16px rgba(0,0,0,.35))}
.links{display:flex;align-items:center;gap:12px}
.link{color:var(--muted);text-decoration:none;font-weight:500}
.link:hover{color:var(--white)}

/* ====== Hero content ====== */
.content{margin: clamp(24px,6vw,72px) auto 0; padding: 0 clamp(16px,4vw,48px); max-width: min(1200px, 92vw)}
.headline{font-size: clamp(28px, 4vw + 12px, 52px); line-height:1.12; letter-spacing:.2px; margin: 4vh 0 12px; 
  text-shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  animation:fade-up .8s ease both .15s
}
.sub{color:var(--lime); font-size: clamp(16px,1.6vw,22px); letter-spacing:.3px; margin: 2px 0 26px; opacity:.95; animation:fade-up .8s ease both .35s}

.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;padding:12px 16px;border-radius:999px;cursor:pointer;text-decoration:none;font-weight:600;transition:all .25s ease; will-change:transform}
.btn svg{transform:translateY(1px)}
.btn.primary{background:linear-gradient(90deg,var(--teal),var(--cyan)); color:#00121f; box-shadow:0 6px 20px rgba(7,186,213,.25)}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(7,186,213,.35)}
.btn.ghost{color:var(--muted);border-color:rgba(255,255,255,.2);}
.btn.ghost:hover{color:var(--white); border-color:rgba(255,255,255,.35)}
.btn.outline{color:var(--white); border-color:rgba(255,255,255,.25)}
.btn.outline:hover{border-color:rgba(255,255,255,.45); transform:translateY(-1px)}

/* ====== Arcade button (decorative) ====== */
.arcade{position:fixed; bottom:32px; right:32px; width:120px; height:120px; border-radius:50%; border:none; background: radial-gradient(circle at 50% 45%, #08263a 20%, #0f2f46 60%, #0d2a3e 100%); 
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(25,180,230,.45); color:#07283d; display:grid; place-items:center; isolation:isolate; cursor:default; animation:pulse 3s ease-out infinite
}
.arcade .ring{position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 8px rgba(0,255,255,.08), inset 0 0 0 24px rgba(0,255,255,.04)}
.arcade .ring:nth-child(2){inset:10px; box-shadow:inset 0 0 0 8px rgba(0,255,255,.12)}
.arcade .star{position:relative; font-size:46px; color:rgba(255,255,255,.07); filter:drop-shadow(0 0 10px rgba(0,255,255,.12))}
@keyframes pulse{0%{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(25,180,230,.35)}70%{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 28px rgba(25,180,230,0)}100%{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(25,180,230,0)}}

/* ====== Details section ====== */
.details{max-width:min(900px,90vw); margin: 12vh auto 0; padding: 0 clamp(16px,4vw,48px); color: var(--muted); text-shadow:0 1px 0 rgba(0,0,0,.4)}
.details .pill{display:inline-block; padding:6px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:var(--lime); background:rgba(163,230,53,.06); backdrop-filter: blur(6px); font-size:12px; letter-spacing:.4px; text-transform:uppercase; margin-bottom:14px}
.details p{font-size:clamp(16px,1.4vw,18px); line-height:1.65}

.footer{display:flex;align-items:center; justify-content:center; padding:32px; color:#98a3af}

/* ====== Animations ====== */
@keyframes fade-up{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ====== Responsive tweaks ====== */
@media (max-width: 720px){
  .brand img{height:44px}
  .arcade{width:86px;height:86px;bottom:18px;right:18px}
}