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

:root { color-scheme: dark; --ink: #f3f7fb; --muted: #aab8c8; --accent: #75e0d0; --panel: rgba(19, 32, 47, .93); }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: #0b1420; font-family: 'DM Sans', sans-serif; }
body::before { position: fixed; z-index: -2; inset: 0; content: ''; background: linear-gradient(115deg, rgba(9, 20, 32, .88), rgba(11, 24, 37, .67)), url('img/backgroundpag.jpg') center / cover no-repeat; }
body::after { position: fixed; z-index: -1; inset: 0; content: ''; background: radial-gradient(ellipse at 50% 42%, transparent 0, rgba(6, 13, 22, .33) 75%); }
.page-shell { position: relative; isolation: isolate; min-height: 100vh; padding: 24px 28px 18px; overflow: hidden; }
.topbar, footer { width: min(100%, 1000px); margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 17px 'Manrope', sans-serif; letter-spacing: -.5px; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(117,224,208,.5); border-radius: 11px; color: var(--accent); background: rgba(117,224,208,.1); }
.brand-accent { color: var(--accent); }
.topbar-note { display: flex; align-items: center; gap: 9px; color: #c1ccd7; font-size: 12px; letter-spacing: .02em; }
.status-dot, .caption-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(117,224,208,.65); }
.profile-card { position: relative; width: min(100%, 510px); margin: 25px auto 20px; padding: 39px 54px 33px; overflow: hidden; border: 1px solid rgba(209,226,239,.15); border-radius: 28px; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06); text-align: center; backdrop-filter: blur(18px); }
.card-glow { position: absolute; z-index: -1; top: -180px; left: 50%; width: 400px; height: 300px; transform: translateX(-50%); border-radius: 50%; background: rgba(62,186,178,.18); filter: blur(55px); }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.eyebrow span { width: 17px; height: 1px; background: var(--accent); }
h1 { margin: 13px 0 10px; font: 800 clamp(32px, 5vw, 43px)/1.12 'Manrope', sans-serif; letter-spacing: -.055em; }
h1 em { color: var(--accent); font-style: normal; }
.intro { max-width: 350px; margin: 0 auto 21px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.social-link { display: flex; align-items: center; gap: 12px; width: min(100%, 330px); min-height: 58px; margin: 0 auto 21px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(255,255,255,.055); color: var(--ink); text-align: left; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; }
.social-link:hover { transform: translateY(-2px); border-color: rgba(117,224,208,.45); background: rgba(117,224,208,.09); }
.instagram-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #8c4ee8, #ed477b 58%, #ffad54); }
.instagram-icon svg { width: 22px; height: 22px; }
.social-copy { display: grid; gap: 2px; flex: 1; }
.social-copy strong { font-size: 12px; font-weight: 700; }
.social-copy small { color: var(--muted); font-size: 11px; }
.arrow { color: var(--accent); font-size: 18px; }
.contact-panel { width: min(100%, 330px); margin: 0 auto 21px; text-align: left; }
.contact-panel > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.055); color: var(--ink); cursor: pointer; font: 700 13px 'Manrope', sans-serif; list-style: none; }
.contact-panel > summary::-webkit-details-marker { display: none; }
.contact-panel > summary:hover { border-color: rgba(117,224,208,.45); background: rgba(117,224,208,.09); }
.contact-toggle { color: var(--accent); font-size: 20px; font-weight: 400; }
.contact-content { margin-top: 10px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(7,15,24,.48); }
.contact-content h2, .pix-block h3 { margin: 0; color: var(--ink); font: 700 14px 'Manrope', sans-serif; }
.contact-description { margin: 6px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.contact-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.contact-link:hover { text-decoration: underline; }
.pix-block { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); }
.pix-key-row { display: flex; align-items: stretch; gap: 7px; }
.pix-key-row code { display: flex; align-items: center; flex: 1; min-width: 0; padding: 9px 10px; overflow-wrap: anywhere; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #dce6ee; background: rgba(7,15,24,.7); font: 11px 'DM Sans', sans-serif; }
.copy-button { flex: 0 0 auto; padding: 0 11px; border: 1px solid rgba(117,224,208,.4); border-radius: 10px; color: var(--accent); background: rgba(117,224,208,.08); cursor: pointer; font: 600 11px 'DM Sans', sans-serif; }
.copy-button:hover { background: rgba(117,224,208,.16); }
.pix-copy-result { min-height: 14px; margin: 5px 0 0; color: var(--accent); font-size: 10px; }
.portrait-wrap { position: relative; width: 174px; margin: 0 auto; padding: 6px; border: 1px solid rgba(117,224,208,.4); border-radius: 50%; background: rgba(117,224,208,.08); }
.portrait { display: block; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: center 50%; }
.portrait-fallback { width: 160px; height: 160px; place-items: center; border-radius: 50%; color: #d9fff8; background: radial-gradient(circle at 50% 30%, #4d8b91, #172e43 65%); font: 800 54px 'Manrope', sans-serif; }
.portrait-fallback:not([hidden]) { display: grid; }
figcaption { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; color: #dce6ee; font-size: 11px; }
.caption-dot { width: 6px; height: 6px; }
.caption-separator { color: #66798a; }
.about-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 17px 0 22px; padding: 13px 10px; border-block: 1px solid rgba(255,255,255,.09); text-align: left; }
.sparkle { color: var(--accent); font-size: 23px; }
.about-note p { margin: 0; font-size: 12px; line-height: 1.6; }
.about-note strong { color: var(--accent); }
.about-note p span { color: var(--muted); }
.arrival-section { margin-top: 3px; }
.arrival-section h2, .message-section h2 { margin: 0; font: 700 14px 'Manrope', sans-serif; }
.form-hint { margin: 5px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.arrival-form, .message-form, .pix-form { display: grid; gap: 9px; }
.arrival-form select, .message-form input:not([type="hidden"]), .message-form textarea, .pix-form input:not([type="hidden"]), .pix-form textarea { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; outline: none; color: var(--ink); background-color: rgba(7,15,24,.62); font: 12px 'DM Sans', sans-serif; }
.arrival-form select, .message-form input:not([type="hidden"]), .pix-form input:not([type="hidden"]) { height: 42px; padding: 0 13px; }
.message-form textarea, .pix-form textarea { min-height: 96px; padding: 12px 13px; resize: vertical; line-height: 1.5; }
.arrival-form select:focus, .message-form input:focus, .message-form textarea:focus, .pix-form input:focus, .pix-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(117,224,208,.12); }
.arrival-form select:invalid, .message-form input::placeholder, .message-form textarea::placeholder, .pix-form input::placeholder, .pix-form textarea::placeholder { color: #778899; }
.arrival-form select option { color: #f3f7fb; background: #13202f; }
.message-form label, .pix-form label { margin-top: 2px; color: #dce6ee; text-align: left; font-size: 11px; font-weight: 600; }
.message-form label span, .pix-form label span { color: var(--muted); font-weight: 400; }
.arrival-form button, .message-form button, .pix-form button:not(.copy-button) { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 12px; color: #0b2025; background: var(--accent); cursor: pointer; font: 700 12px 'DM Sans', sans-serif; transition: filter .2s, transform .2s; }
.arrival-form button:hover, .message-form button:hover, .pix-form button:not(.copy-button):hover { transform: translateY(-1px); filter: brightness(1.08); }
.arrival-form button:disabled, .message-form button:disabled, .pix-form button:disabled { cursor: wait; opacity: .72; }
.message-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.message-section .form-hint { margin-bottom: 14px; }
.message-form, .pix-form { gap: 8px; }
.message-form button, .pix-form button:not(.copy-button) { margin-top: 3px; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.result { min-height: 16px; margin: 2px 0 0; color: var(--accent); font-size: 11px; line-height: 1.5; }
footer { color: #9aabba; text-align: center; font-size: 10px; letter-spacing: .04em; }
footer span { color: #ee7b8c; }
.footer-year { color: #718395; }
.ambient { position: absolute; z-index: -1; border: 1px solid rgba(117,224,208,.14); border-radius: 50%; pointer-events: none; }
.ambient-one { top: 18%; left: -170px; width: 340px; height: 340px; box-shadow: 0 0 0 24px rgba(117,224,208,.025), 0 0 0 56px rgba(117,224,208,.018); }
.ambient-two { right: -200px; bottom: 9%; width: 390px; height: 390px; box-shadow: 0 0 0 28px rgba(117,224,208,.025), 0 0 0 68px rgba(117,224,208,.018); }

@media (max-width: 560px) {
  .page-shell { padding: 17px 15px 16px; }
  .topbar-note { font-size: 10px; }
  .profile-card { margin-top: 19px; padding: 32px 23px 25px; border-radius: 23px; }
  h1 { font-size: clamp(31px, 9vw, 39px); }
  .portrait-wrap { width: 156px; }
  .portrait, .portrait-fallback { width: 142px; height: 142px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}