@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg: #10031d;
  --bg-deep: #080010;
  --surface: rgba(53, 25, 77, .52);
  --surface-strong: rgba(56, 28, 81, .76);
  --line: rgba(228, 205, 246, .13);
  --line-bright: rgba(228, 205, 246, .21);
  --white: #f7f1fc;
  --muted: #b8a8c5;
  --purple: #a63cf0;
  --pink: #e44aff;
  --blue: #233f9c;
  --mono: 'Manrope', Arial, sans-serif;
  --sans: 'Inter', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; overflow-x: hidden; color: var(--white); background: var(--bg-deep); font-family: var(--sans); }

.background { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(circle at 14% 0%, #471353 0, transparent 31%), radial-gradient(circle at 87% 87%, #17205d 0, transparent 37%), linear-gradient(116deg, #20052f 0%, #12021e 49%, #090113 100%); }
.gradient { position: absolute; border-radius: 50%; filter: blur(88px); opacity: .5; animation: drift 13s ease-in-out infinite alternate; }
.gradient-1 { width: 28rem; height: 28rem; background: #8a27ba; top: -15rem; left: -9rem; }
.gradient-2 { width: 32rem; height: 32rem; background: #283b91; right: -13rem; bottom: -12rem; animation-delay: -4s; }
.gradient-3 { width: 24rem; height: 24rem; background: #56229a; left: 43%; top: 24%; opacity: .18; animation-delay: -7s; }
.noise { position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(rgba(255,255,255,.8) .5px, transparent .5px); background-size: 4px 4px; }
@keyframes drift { to { transform: translate3d(25px, -15px, 0) scale(1.08); } }

header { position: relative; z-index: 3; width: min(1420px, calc(100% - 68px)); margin: 29px auto 0; }
.navbar { min-height: 68px; display: flex; align-items: center; gap: 21px; }
.brand { width: 59px; height: 59px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--white); text-decoration: none; font-size: 0; box-shadow: 0 6px 30px rgba(0,0,0,.18); }
.brand::after { content: '✦'; font-size: 1.3rem; color: #f6dbff; text-shadow: 0 0 18px var(--pink); }
.brand-mark { display: none; }
nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 41px); min-height: 66px; padding: 0 31px; border: 1px solid var(--line); border-radius: 999px; background: rgba(48, 23, 70, .4); backdrop-filter: blur(18px); }
nav a { position: relative; color: var(--muted); font-size: .93rem; font-weight: 700; text-decoration: none; transition: color .2s ease; }
nav a:hover, nav a.active { color: var(--white); }
nav a.active::after { content: ''; position: absolute; right: 0; bottom: -15px; left: 0; height: 4px; border-radius: 99px; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.instagram { margin-left: auto; padding: 14px 21px; border: 1px solid var(--line); border-radius: 999px; color: var(--white); text-decoration: none; background: rgba(47, 22, 68, .46); font-size: .82rem; font-weight: 700; backdrop-filter: blur(18px); transition: border-color .2s ease, transform .2s ease; }
.instagram span { margin-left: 7px; color: var(--pink); font-size: 1rem; }.instagram:hover { border-color: var(--pink); transform: translateY(-2px); }

main { width: min(1240px, calc(100% - 68px)); margin: 0 auto; }
.hero { min-height: 605px; padding: 118px 0 55px; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero::before { content: ''; position: absolute; width: min(720px, 90vw); height: 330px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(181, 51, 243, .2), rgba(53, 30, 128, .05) 55%, transparent 72%); filter: blur(5px); }
.hero::after { content: 'FUROSITY  /  PRÓXIMAMENTE'; position: absolute; bottom: 15px; left: 0; color: #a291b2; font: 600 .62rem var(--mono); letter-spacing: .16em; }
.badge { display: inline-flex; gap: 9px; align-items: center; padding: 9px 13px; border: 1px solid var(--line-bright); border-radius: 999px; color: #d4c7dd; background: rgba(47, 23, 70, .55); font-size: .65rem; font-weight: 700; letter-spacing: .08em; backdrop-filter: blur(12px); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #e946ff; box-shadow: 0 0 13px 4px rgba(228, 74, 255, .38); }
.hero h1 { max-width: 910px; margin: 28px 0 20px; font-size: clamp(3.4rem, 8.3vw, 7.2rem); line-height: .98; letter-spacing: -.075em; font-weight: 400; text-shadow: 0 5px 35px rgba(0,0,0,.22); }
.hero h1 em { color: #f7eaff; font-style: normal; font-weight: 700; background: linear-gradient(100deg, #e445ff 5%, #f6d6ff 55%, #7e79ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { max-width: 515px; color: var(--muted); font-size: 1.03rem; line-height: 1.75; }
.buttons { display: flex; justify-content: center; gap: 16px; margin-top: 33px; }.primary, .secondary { text-decoration: none; font-size: .8rem; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.primary { padding: 15px 20px; border-radius: 11px; color: white; background: linear-gradient(105deg, #942ed9, #d33bfa); box-shadow: 0 12px 30px rgba(186,47,237,.26); }.primary span { margin-left: 8px; font-size: 1rem; }.primary:hover { transform: translateY(-3px); box-shadow: 0 17px 36px rgba(186,47,237,.42); }
.secondary { padding: 14px 19px; border: 1px solid var(--line-bright); border-radius: 11px; color: var(--white); background: rgba(61,33,83,.37); }.secondary:hover { border-color: var(--pink); transform: translateY(-3px); }

.dashboard { display: grid; grid-template-columns: .85fr 1.65fr; grid-template-rows: 1fr 1fr; gap: 20px; padding: 38px 0 105px; }
.panel { position: relative; min-height: 185px; padding: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); backdrop-filter: blur(18px); transition: transform .25s ease, border-color .25s ease, background .25s ease; }.panel:hover { transform: translateY(-5px); border-color: rgba(233,88,255,.38); background: var(--surface-strong); }
.panel span { display: block; margin-bottom: 27px; color: #e64aff; font-size: .76rem; font-weight: 800; }.panel h2, .panel h3 { letter-spacing: -.045em; line-height: 1.08; }.panel h2 { max-width: 460px; font-size: clamp(1.65rem, 2.7vw, 2.6rem); }.panel h3 { font-size: 1.55rem; }.panel p { max-width: 450px; margin-top: 14px; color: #c4b4cf; font-size: .88rem; line-height: 1.6; }
.large { grid-row: span 2; padding: 42px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(120deg, rgba(121,44,165,.8), rgba(34, 57, 135, .72)); }.large span { color: #f060ff; }.large::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(124deg, transparent 45%, rgba(255,255,255,.08)); }.large > * { position: relative; z-index: 1; }
.dashboard > .panel:not(.large)::before { content: '✦'; display: block; width: 29px; height: 29px; margin-bottom: 20px; border-radius: 9px; color: #f1c6ff; text-align: center; line-height: 29px; background: rgba(203, 70, 241, .2); }
footer { width: min(1420px, calc(100% - 68px)); margin: 0 auto; padding: 25px 0 34px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #9687a5; font-size: .69rem; }.footer-note { color: #c5b5d2; }
.hidden { opacity: 0; transform: translateY(18px); }.visible { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s ease; }.navbar.scrolled { filter: drop-shadow(0 9px 18px rgba(0,0,0,.1)); }

@media (max-width: 760px) { header, main, footer { width: min(100% - 34px, 1240px); } header { margin-top: 15px; }.navbar { gap: 12px; }.brand { width: 50px; height: 50px; } nav { display: none; }.instagram { padding: 12px 16px; }.hero { min-height: 560px; padding: 88px 0 69px; }.hero h1 { font-size: clamp(3.25rem, 14.5vw, 5rem); }.hero::after { bottom: 17px; }.dashboard { grid-template-columns: 1fr; grid-template-rows: auto; padding-top: 10px; }.large { grid-row: auto; min-height: 250px; padding: 30px; }.panel { min-height: 180px; } }
@media (max-width: 430px) { .hero p { max-width: 320px; font-size: .93rem; }.buttons { flex-direction: column; }.primary, .secondary { width: 100%; }.dashboard { gap: 14px; } footer { gap: 11px; flex-direction: column; } }