:root {
  --ink: #052630;
  --ink-soft: #0a3a43;
  --paper: #f7faf4;
  --white: #ffffff;
  --text: #16323a;
  --muted: #5d7074;
  --violet: #712985;
  --pink: #f24b21;
  --aqua: #0aa7a0;
  --blue: #168bc4;
  --green: #39a844;
  --yellow: #ffd500;
  --orange: #ff9100;
  --line: rgba(5, 72, 78, .14);
  --gradient: linear-gradient(115deg, #f23a1d 0%, #ff9100 31%, #ffd500 58%, #39a844 100%);
  --cool-gradient: linear-gradient(125deg, #168bc4, #0aa7a0 52%, #712985);
  --shadow: 0 24px 70px rgba(4, 57, 64, .15);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--white); padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 16px; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(3, 35, 43, .95); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,213,0,.16); }
.nav { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 210px; }
.brand-mark { width: 58px; height: 58px; object-fit: cover; object-position: 50% 20%; border-radius: 14px; }
.brand-copy strong { display: block; color: var(--white); font-family: Georgia, serif; letter-spacing: .12em; font-size: 1rem; }
.brand-copy span { color: #b8d8d5; letter-spacing: .23em; font-size: .66rem; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { color: #d7ebe8; font-weight: 650; font-size: .92rem; padding: 12px 13px; border-radius: 999px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: white; background: rgba(10,167,160,.2); }
.nav-apply { background: var(--gradient) !important; color: #060718 !important; }
.menu-button { display: none; color: white; background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 12px; }

.hero { position: relative; overflow: hidden; background-color: var(--ink); background-image: linear-gradient(90deg, rgba(2,27,34,.97) 0%, rgba(4,38,45,.86) 42%, rgba(4,38,45,.3) 74%, rgba(4,38,45,.14) 100%), url("hero-recruitment.webp"); background-size: cover; background-position: center; color: white; padding: 112px 0 104px; }
.hero::before { content: ""; position: absolute; inset: -30% 40% auto -12%; height: 680px; background: radial-gradient(circle, rgba(255,145,0,.27), transparent 64%); }
.hero::after { content: ""; position: absolute; right: -160px; bottom: -240px; width: 630px; height: 630px; border: 1px solid rgba(255,213,0,.28); border-radius: 50%; box-shadow: 0 0 0 70px rgba(10,167,160,.06), 0 0 0 140px rgba(22,139,196,.045); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #ffe469; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .78rem; }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--aqua); }
h1, h2, h3 { margin: 0; line-height: 1.08; }
h1 { font-family: Georgia, serif; font-size: clamp(2.8rem, 6vw, 5.2rem); max-width: 820px; letter-spacing: -.045em; }
.gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: #c9cde1; font-size: 1.13rem; max-width: 640px; margin: 24px 0 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 800; border: 1px solid transparent; cursor: pointer; }
.button-primary { background: var(--gradient); color: #10251f; box-shadow: 0 12px 34px rgba(255,145,0,.25); }
.button-secondary { border-color: rgba(255,255,255,.25); color: white; }
.button-dark { background: var(--ink); color: white; }
.hero-card { position: relative; background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.16); border-radius: 30px; padding: 30px; box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.hero-card::before { content: ""; display: block; width: 70px; height: 5px; border-radius: 10px; background: var(--gradient); margin-bottom: 24px; }
.hero-card h2 { font-family: Georgia, serif; font-size: 2rem; }
.check-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; color: #dfe2f2; }
.check-list li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), var(--green)); color: #0b3029; font-weight: 900; }

.section { padding: 88px 0; }
.section-dark { background: var(--ink); color: white; }
.section-head { max-width: 720px; margin-bottom: 38px; }
.section-head h2 { font-family: Georgia, serif; font-size: clamp(2.1rem, 4vw, 3.5rem); margin-top: 12px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.section-dark .section-head p { color: #bcc1d7; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 8px 30px rgba(30, 31, 70, .055); }
.card h3 { font-size: 1.25rem; margin: 18px 0 10px; }
.card p { color: var(--muted); margin: 0; }
.icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(140deg, rgba(255,213,0,.22), rgba(10,167,160,.18)); color: #d54c15; font-size: 1.45rem; font-weight: 900; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.step { counter-increment: step; border-top: 1px solid rgba(255,255,255,.18); padding: 24px 4px 0; }
.step::before { content: "0" counter(step); display: block; color: #ffd94a; font-weight: 900; letter-spacing: .12em; margin-bottom: 15px; }
.step p { color: #bbc0d7; }

.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: white; padding: 92px 0 82px; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .58; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,35,43,.98) 0%, rgba(5,52,57,.9) 48%, rgba(5,52,57,.3) 100%); }
.page-hero--jobs::before { background-image: url("jobs-production.webp"); background-position: center 38%; }
.page-hero--support::before { background-image: url("candidate-support.webp"); background-position: center 45%; }
.page-hero--apply::before { background-position: center 54%; }
.page-hero--contact::before { background-position: center 36%; }
.page-hero .wrap { position: relative; }
.page-hero h1, .page-hero p { max-width: 720px; text-shadow: 0 3px 22px rgba(0,0,0,.52); }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.7rem); }
.page-hero p { max-width: 720px; color: #c4c9de; font-size: 1.1rem; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.highlight-panel { color: white; background: linear-gradient(145deg, #07424a, #102f4a); border-radius: 30px; padding: 36px; position: sticky; top: 116px; }
.highlight-panel h2 { font-family: Georgia, serif; font-size: 2.2rem; }
.highlight-panel p { color: #c6c9df; }
.job-list { display: grid; gap: 16px; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.job h3 { margin-bottom: 7px; }
.job p { color: var(--muted); margin: 0; }
.tag { display: inline-block; padding: 8px 12px; border-radius: 999px; background: #e7f6df; color: #257a35; font-size: .8rem; font-weight: 800; white-space: nowrap; }

.form-shell { background: white; border-radius: 28px; padding: 34px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 760; font-size: .92rem; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d8daea; border-radius: 13px; padding: 13px 14px; color: var(--text); background: #fbfbfe; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(255,145,0,.18); border-color: var(--orange); }
.consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--muted); }
.form-note { margin-top: 16px; color: var(--muted); font-size: .9rem; }

.contact-card { display: flex; align-items: center; gap: 18px; }
.contact-card strong { display: block; font-size: 1.1rem; }
.contact-card span { color: var(--muted); }
.cta { background: var(--gradient); border-radius: 30px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #080918; }
.cta h2 { font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); }

.site-footer { background: #031a20; color: #c2d9d6; padding: 50px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 44px; }
.footer-grid h3 { color: white; margin-bottom: 14px; }
.footer-links { display: grid; gap: 9px; }
.footer-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #8e94ae; font-size: .88rem; }

.whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #24d366; color: #062b15; border-radius: 999px; font-weight: 900; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.whatsapp::before { content: "◉"; font-size: 1.25rem; }

body:has(.entrance) { overflow: hidden; }
.entrance { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, #19103a 0, #080a20 44%, #03040e 100%); color: white; isolation: isolate; }
.entrance::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(circle at 18% 28%, rgba(255,255,255,.8) 0 1px, transparent 1.6px), radial-gradient(circle at 78% 18%, rgba(35,213,222,.75) 0 1px, transparent 1.5px), radial-gradient(circle at 68% 76%, rgba(239,69,170,.7) 0 1px, transparent 1.5px); background-size: 150px 150px, 190px 190px, 220px 220px; animation: stars 7s linear infinite; }
.entrance::after { content: ""; position: absolute; width: min(88vw, 900px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 210deg, transparent 0 25%, rgba(113,54,242,.45), rgba(239,69,170,.5), rgba(35,213,222,.38), transparent 72%); filter: blur(54px); opacity: 0; animation: aura 3.6s ease-out .25s forwards; z-index: -1; }
.entrance-curtain { position: absolute; top: 0; bottom: 0; width: 52%; background: linear-gradient(90deg, #03040e, #100a2b); z-index: 4; animation: curtains 1.5s cubic-bezier(.77,0,.18,1) .2s forwards; }
.entrance-curtain-left { left: 0; transform-origin: left; }
.entrance-curtain-right { right: 0; transform-origin: right; background: linear-gradient(-90deg, #03040e, #100a2b); }
.entrance-orbit { position: absolute; width: min(70vw, 720px); aspect-ratio: 1; border: 1px solid transparent; border-top-color: rgba(35,213,222,.75); border-right-color: rgba(239,69,170,.4); border-radius: 50%; filter: drop-shadow(0 0 14px rgba(35,213,222,.35)); opacity: 0; }
.entrance-orbit-one { animation: orbit-in 2.8s cubic-bezier(.2,.7,.2,1) .7s forwards, rotate 9s linear 1.2s infinite; }
.entrance-orbit-two { width: min(54vw, 560px); border-top-color: rgba(239,69,170,.8); border-left-color: rgba(113,54,242,.55); animation: orbit-in 2.6s cubic-bezier(.2,.7,.2,1) .9s forwards, rotate-reverse 7s linear 1.4s infinite; }
.entrance-orbit-three { width: min(38vw, 400px); border-color: rgba(255,255,255,.14); border-bottom-color: rgba(136,113,255,.8); animation: orbit-in 2.4s cubic-bezier(.2,.7,.2,1) 1.05s forwards, rotate 5s linear 1.5s infinite; }
.entrance-brand { position: relative; z-index: 5; width: min(76vw, 610px); text-align: center; opacity: 0; transform: translateY(24px) scale(.92); filter: blur(14px); animation: brand-reveal 1.4s cubic-bezier(.16,1,.3,1) 1s forwards; }
.entrance-brand img { width: min(72vw, 560px); margin: 0 auto; mix-blend-mode: screen; }
.entrance-kicker { display: block; margin-bottom: 2px; color: #8cecf1; text-transform: uppercase; letter-spacing: .42em; font-size: .72rem; font-weight: 800; opacity: 0; animation: text-reveal .8s ease 1.8s forwards; }
.entrance-brand p { margin: -4px 0 15px; color: #dddff1; font-family: Georgia, serif; font-size: clamp(.9rem, 2vw, 1.2rem); letter-spacing: .16em; opacity: 0; animation: text-reveal .9s ease 2s forwards; }
.entrance-line { display: block; width: 0; height: 2px; margin: auto; background: linear-gradient(90deg, transparent, var(--violet), var(--pink), var(--aqua), transparent); box-shadow: 0 0 18px rgba(35,213,222,.55); animation: line-grow 1.3s ease 2.05s forwards; }
.entrance-spark { position: absolute; z-index: 6; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 12px 4px currentColor, 0 0 38px 12px currentColor; opacity: 0; }
.entrance-spark::before, .entrance-spark::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%,-50%); }
.entrance-spark::before { width: 55px; height: 1px; }.entrance-spark::after { width: 1px; height: 55px; }
.entrance-spark-one { color: #f35eb8; left: 30%; top: 38%; animation: sparkle 1.2s ease 1.7s; }
.entrance-spark-two { color: #38e1e7; right: 28%; top: 28%; animation: sparkle 1.1s ease 2.1s; }
.entrance-spark-three { color: #8c6aff; right: 35%; bottom: 28%; animation: sparkle 1s ease 2.5s; }
.entrance-skip { position: absolute; right: 24px; bottom: 22px; z-index: 8; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 10px 16px; color: #dfe2f2; background: rgba(255,255,255,.06); cursor: pointer; opacity: 0; animation: text-reveal .8s ease 2.4s forwards; }
.entrance-skip:hover { background: rgba(255,255,255,.13); color: white; }
.entrance-exit { animation: entrance-exit 1.05s cubic-bezier(.7,0,.3,1) forwards; pointer-events: none; }

@keyframes curtains { to { transform: scaleX(0); } }
@keyframes aura { 0% { opacity: 0; transform: scale(.55) rotate(-25deg); } 55% { opacity: .95; } 100% { opacity: .65; transform: scale(1.08) rotate(8deg); } }
@keyframes orbit-in { from { opacity: 0; transform: scale(.45) rotate(-80deg); } to { opacity: .72; transform: scale(1) rotate(0); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate-reverse { to { transform: rotate(-360deg); } }
@keyframes brand-reveal { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes text-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes line-grow { to { width: min(74%, 420px); } }
@keyframes sparkle { 0%,100% { opacity: 0; transform: scale(.15) rotate(0); } 40% { opacity: 1; } 65% { opacity: .8; transform: scale(1) rotate(45deg); } }
@keyframes stars { to { background-position: 150px 150px, -190px 190px, 220px -220px; } }
@keyframes entrance-exit { 0% { opacity: 1; filter: blur(0); } 60% { opacity: .7; filter: blur(8px); } 100% { opacity: 0; visibility: hidden; transform: scale(1.06); filter: blur(20px); } }

/* Gold-and-white logo impact entrance */
.entrance { background: radial-gradient(circle at 50% 46%, #17120d 0%, #080a18 34%, #02030b 78%); perspective: 1100px; }
.entrance::before { inset: 0; opacity: .42; background-image: radial-gradient(circle, rgba(255,241,191,.9) 0 1px, transparent 1.7px); background-size: 92px 92px; animation: gold-stars 8s linear infinite; }
.entrance::after { width: min(88vw, 880px); background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,211,94,.2) 20%, transparent 64%); filter: blur(42px); opacity: 0; animation: impact-aura 2.2s ease 1.05s forwards; }
.impact-mark { position: absolute; left: 50%; top: 46%; width: min(84vw, 560px); height: 330px; transform: translate(-50%,-50%); z-index: 6; filter: drop-shadow(0 0 18px rgba(255,223,126,.28)); animation: mark-fade 1s ease 2.45s forwards; }
.impact-z, .impact-e { position: absolute; top: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(10rem, 27vw, 18rem); line-height: 1; font-weight: 700; color: transparent; background: linear-gradient(115deg, #7d5512 0%, #ffd86a 22%, #fffdf3 48%, #e7b33f 70%, #fff1ae 90%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 24px rgba(255,207,91,.55), 0 18px 44px rgba(0,0,0,.7); }
.impact-z { left: 6%; transform: translate3d(-115vw,-75vh,320px) rotate(-95deg) scale(1.7); animation: crash-z 1.28s cubic-bezier(.12,.74,.18,1.18) .25s forwards; }
.impact-e { right: 6%; transform: translate3d(120vw,70vh,360px) rotate(110deg) scale(1.8); animation: crash-e 1.28s cubic-bezier(.12,.74,.18,1.18) .31s forwards; }
.impact-curve { position: absolute; left: 19%; right: 18%; bottom: 26px; height: 76px; border-bottom: 12px solid #f7d06c; border-radius: 0 0 60% 65%; filter: drop-shadow(0 0 10px white) drop-shadow(0 0 22px #e9af32); opacity: 0; transform: translateY(65vh) scaleX(.15) rotate(20deg); animation: crash-curve 1.1s cubic-bezier(.15,.8,.2,1.18) .78s forwards; }
.impact-flash { position: absolute; left: 50%; top: 46%; width: 8px; height: 8px; z-index: 7; border-radius: 50%; background: white; transform: translate(-50%,-50%) scale(0); box-shadow: 0 0 25px 10px white, 0 0 80px 35px #ffd96a, 0 0 180px 80px rgba(255,255,255,.75); animation: impact-flash 1.1s ease 1.34s forwards; }
.impact-ring { position: absolute; left: 50%; top: 46%; z-index: 5; width: 80px; aspect-ratio: 1; border: 2px solid rgba(255,244,200,.9); border-radius: 50%; transform: translate(-50%,-50%) scale(.15); opacity: 0; }
.impact-ring-one { animation: shockwave 1.4s ease-out 1.38s forwards; }.impact-ring-two { animation: shockwave 1.7s ease-out 1.53s forwards; }
.impact-glow { position: absolute; left: 50%; top: 46%; width: min(80vw, 640px); aspect-ratio: 1; transform: translate(-50%,-50%) scale(.2); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,209,87,.22) 24%, transparent 67%); opacity: 0; animation: glow-bloom 1.7s ease 1.25s forwards; }
.impact-shard { position: absolute; left: 50%; top: 46%; z-index: 7; width: 54px; height: 4px; border-radius: 100%; background: linear-gradient(90deg, white, #f2c457, transparent); opacity: 0; transform-origin: left center; }
.shard-one { animation: shard-one 1s ease-out 1.42s forwards; }.shard-two { animation: shard-two 1.1s ease-out 1.45s forwards; }.shard-three { animation: shard-three 1.05s ease-out 1.48s forwards; }.shard-four { animation: shard-four 1.15s ease-out 1.5s forwards; }
.entrance-brand { z-index: 9; width: min(80vw, 680px); transform: translateY(62px) scale(.9); filter: blur(12px); animation: final-brand 1.25s cubic-bezier(.16,1,.3,1) 2.35s forwards; }
.entrance-brand strong { display: block; color: transparent; background: linear-gradient(105deg, #c18d26, #fffdf4 36%, #f1c75e 57%, #fff6cf); -webkit-background-clip: text; background-clip: text; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 10vw, 6.6rem); letter-spacing: .12em; line-height: 1; text-shadow: 0 0 28px rgba(255,220,125,.18); }
.entrance-kicker { color: #fff4cc; letter-spacing: .5em; animation: final-text .8s ease 2.75s forwards; }
.entrance-brand p { margin: 15px 0 18px; color: white; font-family: inherit; font-size: clamp(.72rem, 1.7vw, 1.02rem); letter-spacing: .56em; animation: final-text .8s ease 2.9s forwards; }
.entrance-line { background: linear-gradient(90deg, transparent, #ba8120, white, #f0be4f, transparent); box-shadow: 0 0 18px rgba(255,221,128,.8); animation: line-grow 1.15s ease 2.85s forwards; }
.entrance-skip { color: #fff5d2; border-color: rgba(255,222,135,.3); animation: final-text .7s ease 3.2s forwards; }
.official-impact-logo { position: absolute; left: 50%; top: 44%; z-index: 6; width: min(82vw, 760px); aspect-ratio: 3 / 2; transform: translate(-50%,-50%); }
.official-piece, .official-logo-reveal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.official-piece { opacity: 0; filter: grayscale(1) sepia(1) saturate(4.3) hue-rotate(2deg) brightness(1.45) contrast(1.08) drop-shadow(0 0 10px white) drop-shadow(0 0 30px #f3bd43); }
.official-piece-one { clip-path: polygon(0 0, 52% 0, 52% 52%, 0 52%); animation: official-piece-one 1.45s cubic-bezier(.12,.74,.18,1.14) .18s forwards, official-piece-fade .72s ease 2.15s forwards; }
.official-piece-two { clip-path: polygon(48% 0, 100% 0, 100% 52%, 48% 52%); animation: official-piece-two 1.45s cubic-bezier(.12,.74,.18,1.14) .25s forwards, official-piece-fade .72s ease 2.15s forwards; }
.official-piece-three { clip-path: polygon(0 48%, 52% 48%, 52% 100%, 0 100%); animation: official-piece-three 1.45s cubic-bezier(.12,.74,.18,1.14) .32s forwards, official-piece-fade .72s ease 2.15s forwards; }
.official-piece-four { clip-path: polygon(48% 48%, 100% 48%, 100% 100%, 48% 100%); animation: official-piece-four 1.45s cubic-bezier(.12,.74,.18,1.14) .38s forwards, official-piece-fade .72s ease 2.15s forwards; }
.official-logo-reveal { opacity: 0; transform: scale(.88); filter: brightness(1.08) drop-shadow(0 0 18px rgba(255,255,255,.3)); animation: official-logo-reveal 1.05s cubic-bezier(.16,1,.3,1) 2.08s forwards; }
.entrance-brand { position: absolute; left: 50%; top: 81%; width: min(82vw, 680px); opacity: 0; transform: translate(-50%,-38%) scale(.94); filter: blur(10px); animation: official-caption 1s cubic-bezier(.16,1,.3,1) 2.5s forwards; }
.entrance-brand em { display: block; color: white; font-family: Georgia, "Times New Roman", serif; font-size: clamp(.88rem, 2vw, 1.2rem); font-style: normal; letter-spacing: .13em; margin: 8px 0 18px; text-shadow: 0 0 18px rgba(255,221,128,.42); }

@keyframes crash-z { 0% { transform: translate3d(-115vw,-75vh,320px) rotate(-95deg) scale(1.7); } 73% { transform: translate3d(14px,5px,0) rotate(3deg) scale(1.03); } 86% { transform: translate3d(-9px,-3px,0) rotate(-1deg) scale(.98); } 100% { transform: translate3d(0,0,0) rotate(0) scale(1); } }
@keyframes crash-e { 0% { transform: translate3d(120vw,70vh,360px) rotate(110deg) scale(1.8); } 73% { transform: translate3d(-14px,-5px,0) rotate(-3deg) scale(1.03); } 86% { transform: translate3d(8px,3px,0) rotate(1deg) scale(.98); } 100% { transform: translate3d(0,0,0) rotate(0) scale(1); } }
@keyframes crash-curve { 0% { opacity: 0; transform: translateY(65vh) scaleX(.15) rotate(20deg); } 70% { opacity: 1; transform: translateY(-8px) scaleX(1.05) rotate(-2deg); } 100% { opacity: 1; transform: translateY(0) scaleX(1) rotate(0); } }
@keyframes impact-flash { 0%,25% { opacity: 0; transform: translate(-50%,-50%) scale(0); } 36% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(18); } }
@keyframes shockwave { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.15); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(12); } }
@keyframes glow-bloom { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 38% { opacity: 1; } 100% { opacity: .25; transform: translate(-50%,-50%) scale(1.35); } }
@keyframes mark-fade { to { opacity: 0; transform: translate(-50%,-56%) scale(1.22); filter: blur(18px); } }
@keyframes final-brand { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes final-text { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shard-one { 0% { opacity: 1; transform: rotate(18deg) translateX(0); } 100% { opacity: 0; transform: rotate(18deg) translateX(42vw) scaleX(2); } }
@keyframes shard-two { 0% { opacity: 1; transform: rotate(155deg) translateX(0); } 100% { opacity: 0; transform: rotate(155deg) translateX(38vw) scaleX(1.6); } }
@keyframes shard-three { 0% { opacity: 1; transform: rotate(235deg) translateX(0); } 100% { opacity: 0; transform: rotate(235deg) translateX(36vw) scaleX(1.8); } }
@keyframes shard-four { 0% { opacity: 1; transform: rotate(305deg) translateX(0); } 100% { opacity: 0; transform: rotate(305deg) translateX(40vw) scaleX(2); } }
@keyframes impact-aura { from { opacity: 0; transform: scale(.4); } to { opacity: .65; transform: scale(1.12); } }
@keyframes gold-stars { to { background-position: 92px 92px; } }
@keyframes official-piece-one { 0% { opacity: 1; transform: translate3d(-85vw,-70vh,420px) rotate(-82deg) scale(1.8); } 72% { opacity: 1; transform: translate3d(12px,9px,0) rotate(2deg) scale(1.03); } 88% { transform: translate3d(-5px,-4px,0) rotate(-.6deg) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes official-piece-two { 0% { opacity: 1; transform: translate3d(92vw,-62vh,450px) rotate(94deg) scale(1.7); } 72% { opacity: 1; transform: translate3d(-11px,8px,0) rotate(-2deg) scale(1.03); } 88% { transform: translate3d(5px,-3px,0) rotate(.6deg) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes official-piece-three { 0% { opacity: 1; transform: translate3d(-95vw,72vh,380px) rotate(76deg) scale(1.75); } 72% { opacity: 1; transform: translate3d(11px,-9px,0) rotate(-2deg) scale(1.03); } 88% { transform: translate3d(-5px,4px,0) rotate(.5deg) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes official-piece-four { 0% { opacity: 1; transform: translate3d(90vw,76vh,410px) rotate(-88deg) scale(1.8); } 72% { opacity: 1; transform: translate3d(-12px,-8px,0) rotate(2deg) scale(1.03); } 88% { transform: translate3d(5px,4px,0) rotate(-.5deg) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes official-piece-fade { to { opacity: 0; filter: grayscale(0) sepia(0) saturate(1) brightness(1.1) drop-shadow(0 0 26px white); } }
@keyframes official-logo-reveal { 0% { opacity: 0; transform: scale(.88); filter: brightness(2.2) saturate(.2) drop-shadow(0 0 45px white); } 55% { opacity: 1; filter: brightness(1.4) saturate(.75) drop-shadow(0 0 32px #ffe7a1); } 100% { opacity: 1; transform: scale(1); filter: brightness(1.06) saturate(1.08) drop-shadow(0 0 18px rgba(255,255,255,.26)); } }
@keyframes official-caption { to { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); } }

/* Cinematic multi-stage gold entrance */
.entrance { overflow: hidden; isolation: isolate; background: #020202; }
.intro-particles { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.intro-grid { position: absolute; left: -18%; right: -18%; bottom: -46%; z-index: 1; height: 82%; opacity: 0; transform: perspective(520px) rotateX(64deg) scale(.45); transform-origin: 50% 100%; background-image: linear-gradient(rgba(229,176,58,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(229,176,58,.16) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(ellipse at 50% 75%, #000 0 28%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 75%, #000 0 28%, transparent 72%); animation: cinematic-grid 4.8s cubic-bezier(.16,1,.3,1) .18s forwards; }
.intro-beam { position: absolute; left: 50%; top: 44%; z-index: 2; width: 170vmax; height: 2px; opacity: 0; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(245,199,94,.72) 16%, rgba(209,145,27,.08) 52%, transparent 76%); filter: blur(.15px) drop-shadow(0 0 10px #ffd773); }
.intro-beam-one { transform: rotate(17deg) scaleX(.02); animation: cinematic-beam 2.3s ease-out 1.86s forwards; }
.intro-beam-two { transform: rotate(108deg) scaleX(.02); animation: cinematic-beam 2.5s ease-out 1.91s forwards; }
.intro-beam-three { transform: rotate(198deg) scaleX(.02); animation: cinematic-beam 2.4s ease-out 1.96s forwards; }
.intro-beam-four { transform: rotate(289deg) scaleX(.02); animation: cinematic-beam 2.6s ease-out 2.01s forwards; }
.official-impact-logo { top: 43%; width: min(84vw, 790px); z-index: 8; transform-style: preserve-3d; }
.official-piece { will-change: transform, opacity, filter; filter: brightness(1.35) contrast(1.12) saturate(1.15) drop-shadow(0 0 8px #fff8dd) drop-shadow(0 0 26px rgba(231,168,45,.9)); }
.official-piece-one { clip-path: polygon(0 0,26% 0,26% 52%,0 52%); animation: cinematic-piece-one 2.05s cubic-bezier(.12,.78,.17,1.12) .42s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-two { clip-path: polygon(24% 0,51% 0,51% 52%,24% 52%); animation: cinematic-piece-two 1.94s cubic-bezier(.12,.78,.17,1.12) .52s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-three { clip-path: polygon(49% 0,76% 0,76% 52%,49% 52%); animation: cinematic-piece-three 2.08s cubic-bezier(.12,.78,.17,1.12) .38s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-four { clip-path: polygon(74% 0,100% 0,100% 52%,74% 52%); animation: cinematic-piece-four 1.98s cubic-bezier(.12,.78,.17,1.12) .58s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-five { clip-path: polygon(0 48%,26% 48%,26% 100%,0 100%); animation: cinematic-piece-five 2.02s cubic-bezier(.12,.78,.17,1.12) .56s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-six { clip-path: polygon(24% 48%,51% 48%,51% 100%,24% 100%); animation: cinematic-piece-six 1.94s cubic-bezier(.12,.78,.17,1.12) .46s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-seven { clip-path: polygon(49% 48%,76% 48%,76% 100%,49% 100%); animation: cinematic-piece-seven 2.1s cubic-bezier(.12,.78,.17,1.12) .6s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-piece-eight { clip-path: polygon(74% 48%,100% 48%,100% 100%,74% 100%); animation: cinematic-piece-eight 2s cubic-bezier(.12,.78,.17,1.12) .5s forwards, cinematic-piece-fade .75s ease 2.78s forwards; }
.official-logo-reveal { opacity: 0; transform: scale(.91) translateZ(-70px); filter: brightness(2) saturate(.45) drop-shadow(0 0 46px #fff); animation: cinematic-logo-reveal 1.38s cubic-bezier(.16,1,.3,1) 2.54s forwards, cinematic-logo-breathe 2.4s ease-in-out 3.92s infinite alternate; }
.official-logo-shine { position: absolute; inset: 4% 9%; z-index: 10; opacity: 0; overflow: hidden; mix-blend-mode: screen; transform: translateX(-160%) skewX(-18deg); background: linear-gradient(100deg, transparent 37%, rgba(255,255,255,.05) 43%, rgba(255,255,255,.92) 50%, rgba(255,214,105,.28) 56%, transparent 63%); filter: blur(2px); animation: cinematic-shine 1.45s cubic-bezier(.2,.7,.25,1) 3.56s forwards; pointer-events: none; }
.impact-core { position: absolute; left: 50%; top: 43%; z-index: 7; width: 10px; height: 10px; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.1); background: white; box-shadow: 0 0 22px 10px white,0 0 75px 34px #f5c65c,0 0 170px 72px rgba(223,154,28,.72); animation: cinematic-core 1.12s ease-out 2.18s forwards; }
.impact-flash { top: 43%; animation: cinematic-flash 1.28s ease 2.18s forwards; }
.impact-ring { top: 43%; border-color: rgba(255,231,165,.95); box-shadow: inset 0 0 12px rgba(255,255,255,.4), 0 0 18px rgba(234,177,54,.5); }
.impact-ring-one { animation: cinematic-ring 1.65s ease-out 2.23s forwards; }
.impact-ring-two { animation: cinematic-ring 2s ease-out 2.39s forwards; }
.impact-glow { top: 43%; animation: cinematic-glow 3.2s ease 1.92s forwards; }
.impact-shard { top: 43%; }
.shard-one { animation: shard-one 1.35s ease-out 2.34s forwards; }.shard-two { animation: shard-two 1.45s ease-out 2.38s forwards; }.shard-three { animation: shard-three 1.4s ease-out 2.42s forwards; }.shard-four { animation: shard-four 1.5s ease-out 2.46s forwards; }
.entrance-brand { top: 82%; z-index: 11; animation: cinematic-caption 1.12s cubic-bezier(.16,1,.3,1) 3.82s forwards; }
.entrance-kicker { opacity: 0; color: #d7a534; animation: cinematic-text .8s ease 4.05s forwards; }
.entrance-brand em { opacity: 0; color: #fff9e8; animation: cinematic-text .9s ease 4.18s forwards; }
.entrance-line { opacity: 0; animation: cinematic-line 1.25s ease 4.28s forwards; }
.entrance-skip { z-index: 14; animation: cinematic-text .72s ease 4.55s forwards; }

@keyframes cinematic-grid { 0%{opacity:0;transform:perspective(520px) rotateX(64deg) scale(.45) translateY(28%)} 32%{opacity:.34} 72%{opacity:.15;transform:perspective(520px) rotateX(64deg) scale(1.35) translateY(-3%)} 100%{opacity:0;transform:perspective(520px) rotateX(64deg) scale(1.85) translateY(-12%)} }
@keyframes cinematic-beam { 0%{opacity:0;scale:.02 1} 12%{opacity:.95} 48%{opacity:.5;scale:1 1} 100%{opacity:0;scale:1.15 .2} }
@keyframes cinematic-piece-one { 0%{opacity:0;transform:translate3d(-86vw,-72vh,680px) rotateX(65deg) rotateY(-75deg) rotateZ(-105deg) scale(2.35)} 12%{opacity:1} 76%{transform:translate3d(13px,8px,12px) rotateZ(2deg) scale(1.035)} 90%{transform:translate3d(-5px,-3px,0) rotateZ(-.5deg) scale(.992)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-two { 0%{opacity:0;transform:translate3d(-28vw,-105vh,920px) rotateX(-90deg) rotateY(55deg) rotateZ(78deg) scale(2.7)} 12%{opacity:1} 76%{transform:translate3d(7px,11px,10px) rotateZ(-1.5deg) scale(1.03)} 90%{transform:translate3d(-3px,-4px,0) scale(.994)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-three { 0%{opacity:0;transform:translate3d(24vw,-108vh,760px) rotateX(95deg) rotateY(-60deg) rotateZ(-84deg) scale(2.4)} 12%{opacity:1} 76%{transform:translate3d(-6px,10px,8px) rotateZ(1.6deg) scale(1.035)} 90%{transform:translate3d(3px,-4px,0) scale(.992)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-four { 0%{opacity:0;transform:translate3d(92vw,-65vh,820px) rotateX(-55deg) rotateY(80deg) rotateZ(112deg) scale(2.5)} 12%{opacity:1} 76%{transform:translate3d(-13px,7px,10px) rotateZ(-2deg) scale(1.04)} 90%{transform:translate3d(5px,-3px,0) scale(.99)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-five { 0%{opacity:0;transform:translate3d(-96vw,74vh,870px) rotateX(-78deg) rotateY(60deg) rotateZ(92deg) scale(2.55)} 12%{opacity:1} 76%{transform:translate3d(12px,-8px,10px) rotateZ(-2deg) scale(1.04)} 90%{transform:translate3d(-5px,3px,0) scale(.99)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-six { 0%{opacity:0;transform:translate3d(-24vw,110vh,740px) rotateX(88deg) rotateY(-62deg) rotateZ(-76deg) scale(2.4)} 12%{opacity:1} 76%{transform:translate3d(6px,-11px,8px) rotateZ(1.6deg) scale(1.035)} 90%{transform:translate3d(-3px,4px,0) scale(.992)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-seven { 0%{opacity:0;transform:translate3d(27vw,106vh,940px) rotateX(-94deg) rotateY(58deg) rotateZ(84deg) scale(2.7)} 12%{opacity:1} 76%{transform:translate3d(-7px,-10px,12px) rotateZ(-1.5deg) scale(1.03)} 90%{transform:translate3d(3px,4px,0) scale(.994)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-eight { 0%{opacity:0;transform:translate3d(94vw,78vh,700px) rotateX(72deg) rotateY(-82deg) rotateZ(-110deg) scale(2.35)} 12%{opacity:1} 76%{transform:translate3d(-12px,-8px,10px) rotateZ(2deg) scale(1.035)} 90%{transform:translate3d(5px,3px,0) scale(.992)} 100%{opacity:1;transform:none} }
@keyframes cinematic-piece-fade { 0%{opacity:1} 100%{opacity:0;filter:brightness(2.6) saturate(.2) drop-shadow(0 0 34px white)} }
@keyframes cinematic-logo-reveal { 0%{opacity:0;transform:scale(.91) translateZ(-70px);filter:brightness(2.8) saturate(.1) drop-shadow(0 0 60px white)} 42%{opacity:1;transform:scale(1.035) translateZ(0);filter:brightness(1.65) saturate(.72) drop-shadow(0 0 38px #ffe7a1)} 100%{opacity:1;transform:scale(1);filter:brightness(1.05) saturate(1.05) drop-shadow(0 0 18px rgba(222,163,45,.48))} }
@keyframes cinematic-logo-breathe { from{filter:brightness(1.02) saturate(1.02) drop-shadow(0 0 14px rgba(222,163,45,.35))} to{filter:brightness(1.12) saturate(1.08) drop-shadow(0 0 28px rgba(244,196,88,.62))} }
@keyframes cinematic-shine { 0%{opacity:0;transform:translateX(-160%) skewX(-18deg)} 18%{opacity:1} 76%{opacity:.9} 100%{opacity:0;transform:translateX(160%) skewX(-18deg)} }
@keyframes cinematic-core { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 16%{opacity:1} 42%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(24)} }
@keyframes cinematic-flash { 0%,14%{opacity:0;transform:translate(-50%,-50%) scale(0)} 26%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(28)} }
@keyframes cinematic-ring { 0%{opacity:1;transform:translate(-50%,-50%) scale(.12)} 100%{opacity:0;transform:translate(-50%,-50%) scale(17)} }
@keyframes cinematic-glow { 0%{opacity:0;transform:translate(-50%,-50%) scale(.12)} 26%{opacity:.95} 60%{opacity:.42;transform:translate(-50%,-50%) scale(1.28)} 100%{opacity:.14;transform:translate(-50%,-50%) scale(1.65)} }
@keyframes cinematic-caption { to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)} }
@keyframes cinematic-text { from{opacity:0;transform:translateY(10px);filter:blur(5px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes cinematic-line { from{opacity:0;width:0} to{opacity:1;width:min(74%,420px)} }

@media (max-width: 920px) {
  .menu-button { display: block; }
  .nav-links { display: none; position: absolute; top: 75px; left: 20px; right: 20px; padding: 14px; background: #07343d; border: 1px solid rgba(255,213,0,.16); border-radius: 18px; flex-direction: column; align-items: stretch; }
  .nav-links.open { display: flex; }
  .nav-links a { text-align: center; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero { padding-top: 70px; }
  .hero-card, .highlight-panel { position: static; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 28px, 1160px); }
  .brand-copy { display: none; }
  .nav { min-height: 72px; }
  .brand { min-width: auto; }
  .brand-mark { width: 48px; height: 48px; }
  .hero, .section { padding: 66px 0; }
  .page-hero { padding: 56px 0 48px; }
  .grid-3, .grid-2, .steps, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .field-full, .consent { grid-column: auto; }
  .job { grid-template-columns: 1fr; }
  .cta { padding: 32px 24px; align-items: flex-start; flex-direction: column; }
  .form-shell { padding: 24px 18px; }
  .whatsapp span { display: none; }
  .whatsapp { width: 58px; height: 58px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .entrance-curtain { display: none; } .entrance, .entrance-brand, .entrance-kicker, .entrance-brand p, .entrance-skip { animation: none; opacity: 1; filter: none; transform: none; } .entrance-orbit, .entrance-spark, .impact-mark, .impact-flash, .impact-ring, .impact-glow, .impact-shard { display: none; } }

/* Final black-and-gold identity */
:root {
  --ink: #050505;
  --ink-soft: #121212;
  --paper: #080808;
  --text: #f3efe4;
  --muted: #b9b1a0;
  --violet: #c78a20;
  --pink: #e2a936;
  --aqua: #f3d77c;
  --blue: #fff4c9;
  --green: #d7a337;
  --yellow: #ffe58a;
  --orange: #d99522;
  --line: rgba(229, 181, 73, .24);
  --gradient: linear-gradient(115deg, #8b5708 0%, #e7b84f 27%, #fff5c5 49%, #d3911b 72%, #f5d77d 100%);
  --cool-gradient: var(--gradient);
  --shadow: 0 24px 70px rgba(0,0,0,.48);
}
body { background: #080808; color: var(--text); }
.site-header { background: rgba(4,4,4,.96); border-bottom-color: rgba(231,184,79,.25); }
.brand-mark { content: url("zianeve-mark-gold.png"); object-fit: contain; filter: none; }
.brand-copy span, .nav-links a { color: #d2c8b2; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff7d9; background: rgba(225,169,54,.13); }
.nav-apply { color: #120d04 !important; }
.hero { background-color: #080808; background-image: linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(5,5,5,.9) 45%, rgba(5,5,5,.4) 76%, rgba(5,5,5,.18) 100%), url("hero-recruitment.webp"); background-blend-mode: normal, luminosity; }
.hero::before { background: radial-gradient(circle, rgba(223,165,47,.3), transparent 66%); }
.hero::after { border-color: rgba(255,226,139,.28); box-shadow: 0 0 0 70px rgba(217,149,34,.045), 0 0 0 140px rgba(255,243,198,.025); }
.gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: #f1c85f; }.eyebrow::before { background: #d59a2a; }
.hero p, .page-hero p, .section-dark .section-head p, .step p { color: #cec7b8; }
.button-primary, .cta { background: var(--gradient); color: #130e05; }
.button-primary { box-shadow: 0 12px 34px rgba(223,165,47,.24); }
.button-secondary { border-color: rgba(238,203,117,.42); color: #fff8df; background: rgba(0,0,0,.22); }
.hero-card { background: linear-gradient(150deg, rgba(255,226,145,.1), rgba(255,255,255,.025)); border-color: rgba(231,184,79,.27); }
.hero-card::before { background: var(--gradient); }
.check-list li { color: #e3ddce; }.check-list li::before { background: var(--gradient); color: #151006; }
.section { background: #080808; }.section-dark { background: #030303; }
.section-head p, .card p, .job p, .contact-card span, .consent, .form-note { color: #aaa291; }
.card, .form-shell, .job { background: #111; border-color: rgba(225,169,54,.19); box-shadow: 0 10px 34px rgba(0,0,0,.28); }
.icon { background: linear-gradient(140deg, rgba(218,154,34,.22), rgba(255,241,184,.08)); color: #efc75f; }
.step { border-top-color: rgba(231,184,79,.24); }.step::before { color: #e9bb4f; }
.page-hero { background: #050505; }.page-hero::before { opacity: .4; filter: grayscale(1) sepia(.24) brightness(.68); }.page-hero::after { background: linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(5,5,5,.9) 50%, rgba(5,5,5,.4) 100%); }
.highlight-panel { background: linear-gradient(145deg, #17130c, #070707); border: 1px solid rgba(231,184,79,.25); }.highlight-panel p { color: #c8bfad; }
.tag { background: rgba(222,169,53,.13); color: #ecc65f; border: 1px solid rgba(222,169,53,.2); }
.field input, .field select, .field textarea { color: #f3efe4; background: #090909; border-color: #3d3525; }.field input:focus, .field select:focus, .field textarea:focus { outline-color: rgba(223,165,47,.2); border-color: #e0ac3f; }
.button-dark { background: #090909; color: #f3cd6c; border: 1px solid rgba(180,121,20,.55); }
.site-footer { background: #020202; color: #c5bdad; border-top: 1px solid rgba(225,169,54,.16); }.footer-bottom { color: #8d8578; border-top-color: rgba(225,169,54,.16); }
.whatsapp { background: var(--gradient); color: #161006; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
@media (max-width: 920px) { .nav-links { background: #090909; border-color: rgba(231,184,79,.25); } }

/* Zianeve signature identity and cinematic entrance v2 */
.brand-mark { content: url("zianeve-emblem.svg"); width: 58px; height: 58px; filter: drop-shadow(0 0 10px rgba(224,168,49,.22)); }
.entrance-v2 { position: fixed; inset: 0; z-index: 1000; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 47%, #171005 0, #050403 30%, #010101 72%); perspective: 1200px; }
.entrance-v2::before, .entrance-v2::after { display: none; }
.entrance-v2 .intro-particles { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.intro-void { position: absolute; z-index: 1; left: 50%; top: 47%; width: min(100vw, 980px); aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.12); background: repeating-conic-gradient(from 12deg, transparent 0 7deg, rgba(231,177,55,.08) 8deg 9deg, transparent 10deg 18deg), radial-gradient(circle, rgba(255,232,155,.15) 0 2%, rgba(212,147,26,.08) 14%, transparent 62%); filter: blur(.3px); animation: void-open 7.4s cubic-bezier(.16,1,.3,1) .1s forwards, void-turn 18s linear infinite; }
.intro-horizon { position: absolute; z-index: 2; left: 50%; top: 47%; width: 0; height: 1px; opacity: 0; transform: translate(-50%,-50%); background: linear-gradient(90deg, transparent, #b87810 13%, #fff8d9 50%, #b87810 87%, transparent); box-shadow: 0 0 8px white, 0 0 36px #f2b83e, 0 0 100px rgba(213,139,17,.75); animation: horizon-open 2.4s cubic-bezier(.16,1,.3,1) 1.05s forwards, horizon-pulse 1.8s ease-in-out 3.5s infinite alternate; }
.gold-ribbon { position: absolute; z-index: 4; left: 50%; top: 47%; width: 84vmax; height: 80px; opacity: 0; transform-origin: 0 50%; border-top: 2px solid rgba(255,231,148,.88); border-radius: 50%; background: linear-gradient(180deg, rgba(243,188,65,.13), transparent 70%); filter: drop-shadow(0 0 9px #e4a529) blur(.25px); mix-blend-mode: screen; }
.ribbon-one { transform: rotate(18deg) translateX(-8%) scaleX(.08); animation: ribbon-flight 4s cubic-bezier(.12,.8,.17,1) .65s forwards; }
.ribbon-two { transform: rotate(153deg) translateX(-8%) scaleX(.08); animation: ribbon-flight 4.3s cubic-bezier(.12,.8,.17,1) .82s forwards; }
.ribbon-three { transform: rotate(236deg) translateX(-8%) scaleX(.08); animation: ribbon-flight 4.1s cubic-bezier(.12,.8,.17,1) .96s forwards; }
.ribbon-four { transform: rotate(318deg) translateX(-8%) scaleX(.08); animation: ribbon-flight 4.4s cubic-bezier(.12,.8,.17,1) 1.08s forwards; }
.portal-ring { position: absolute; z-index: 3; left: 50%; top: 47%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) rotateX(67deg) scale(.1); border: 1px solid rgba(244,194,80,.68); box-shadow: inset 0 0 18px rgba(255,255,255,.16), 0 0 24px rgba(215,148,27,.26); }
.portal-one { width: min(80vw, 820px); animation: portal-form 4.3s cubic-bezier(.16,1,.3,1) .65s forwards, portal-spin 14s linear 3.6s infinite; }
.portal-two { width: min(63vw, 650px); border-style: dashed; animation: portal-form 4.2s cubic-bezier(.16,1,.3,1) .92s forwards, portal-spin-reverse 11s linear 3.7s infinite; }
.portal-three { width: min(46vw, 480px); border-width: 2px; animation: portal-form 4s cubic-bezier(.16,1,.3,1) 1.18s forwards, portal-spin 9s linear 3.7s infinite; }
.intro-sigil { position: absolute; z-index: 9; left: 50%; top: 47%; width: min(86vw, 980px); overflow: visible; opacity: 1; transform: translate(-50%,-50%) scale(.88); filter: drop-shadow(0 28px 55px rgba(0,0,0,.88)); }
.sigil-stroke { stroke-dasharray: 1500; stroke-dashoffset: 1500; filter: drop-shadow(0 0 10px rgba(255,229,139,.8)); animation: draw-sigil 2.45s cubic-bezier(.65,0,.22,1) 1.2s forwards; }
.sigil-fill { opacity: 0; transform-box: fill-box; transform-origin: center; filter: blur(16px) brightness(2.2); }
.sigil-z { transform: scale(.55) rotate(-18deg); animation: molten-form 1.65s cubic-bezier(.16,1,.3,1) 2.22s forwards; }
.sigil-e { transform: scale(.55) rotate(18deg); animation: molten-form 1.75s cubic-bezier(.16,1,.3,1) 2.38s forwards; }
.sigil-orb { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(-180px) scale(2.8); filter: drop-shadow(0 0 18px white); animation: orb-drop 1.25s cubic-bezier(.17,.84,.22,1.2) 2.68s forwards; }
.sigil-wordmark { opacity: 0; transform: translateX(38px); filter: blur(16px); animation: wordmark-arrive 1.4s cubic-bezier(.16,1,.3,1) 3.56s forwards; }
.sigil-rule { stroke-dasharray: 680; stroke-dashoffset: 680; animation: draw-rule 1.2s ease 4.25s forwards; }
.sigil-sub { opacity: 0; animation: subtitle-rise .9s ease 4.48s forwards; }
.sigil-glint { opacity: 0; mix-blend-mode: screen; filter: blur(5px); animation: glint-pass 1.25s cubic-bezier(.2,.7,.25,1) 5.18s forwards; }
.intro-impact { position: absolute; z-index: 8; left: 50%; top: 47%; width: 8px; height: 8px; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.1); background: white; box-shadow: 0 0 26px 14px white, 0 0 90px 42px #f2bc47, 0 0 230px 90px rgba(205,127,9,.72); animation: jewel-impact 1.3s ease-out 3.08s forwards; }
.intro-shock { position: absolute; z-index: 7; left: 50%; top: 47%; width: 90px; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.1); border: 2px solid rgba(255,239,183,.9); box-shadow: 0 0 20px rgba(232,174,52,.7); }
.shock-one { animation: jewel-shock 1.8s ease-out 3.13s forwards; }.shock-two { animation: jewel-shock 2.15s ease-out 3.34s forwards; }
.intro-manifesto { position: absolute; z-index: 12; left: 50%; top: calc(47% + min(25vw, 245px)); width: min(86vw, 720px); margin: 0; color: #fff9e8; opacity: 0; transform: translate(-50%,18px); text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.88rem,1.8vw,1.22rem); letter-spacing: .18em; text-shadow: 0 0 24px rgba(238,183,62,.55); animation: manifesto-rise 1s ease 5.35s forwards; }
.entrance-v2 .entrance-skip { z-index: 15; opacity: 0; color: #f3cc6c; border-color: rgba(233,182,69,.4); background: rgba(8,6,3,.55); backdrop-filter: blur(10px); animation: manifesto-rise .8s ease 5.72s forwards; }

@keyframes void-open { 0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(0)} 24%{opacity:.75} 68%{opacity:.45;transform:translate(-50%,-50%) scale(1.03) rotate(28deg)} 100%{opacity:.16;transform:translate(-50%,-50%) scale(1.28) rotate(42deg)} }
@keyframes void-turn { to{rotate:360deg} }
@keyframes horizon-open { 0%{width:0;opacity:0} 24%{opacity:1} 70%{width:118vw;opacity:.9} 100%{width:92vw;opacity:.38} }
@keyframes horizon-pulse { to{filter:brightness(1.7);opacity:.7} }
@keyframes ribbon-flight { 0%{opacity:0;scale:.08 1} 16%{opacity:1} 65%{opacity:.7;scale:1 1} 100%{opacity:0;scale:1.22 .12} }
@keyframes portal-form { 0%{opacity:0;transform:translate(-50%,-50%) rotateX(67deg) scale(.1)} 42%{opacity:.78} 100%{opacity:.18;transform:translate(-50%,-50%) rotateX(67deg) scale(1)} }
@keyframes portal-spin { to{rotate:360deg} } @keyframes portal-spin-reverse { to{rotate:-360deg} }
@keyframes draw-sigil { 0%{stroke-dashoffset:1500;opacity:.15} 45%{opacity:1;filter:drop-shadow(0 0 15px white)} 100%{stroke-dashoffset:0;opacity:1;filter:drop-shadow(0 0 9px rgba(239,188,69,.62))} }
@keyframes molten-form { 0%{opacity:0} 48%{opacity:1;filter:blur(5px) brightness(1.8)} 100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0) brightness(1.04)} }
@keyframes orb-drop { 0%{opacity:0;transform:translateY(-180px) scale(2.8)} 62%{opacity:1;transform:translateY(9px) scale(.86)} 80%{transform:translateY(-5px) scale(1.12)} 100%{opacity:1;transform:none} }
@keyframes wordmark-arrive { 0%{opacity:0;transform:translateX(38px);filter:blur(16px)} 56%{opacity:1;filter:blur(2px)} 100%{opacity:1;transform:none;filter:blur(0)} }
@keyframes draw-rule { to{stroke-dashoffset:0} } @keyframes subtitle-rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes glint-pass { 0%{opacity:0;transform:translateX(0) skewX(-18deg)} 18%{opacity:.9} 82%{opacity:.9} 100%{opacity:0;transform:translateX(1480px) skewX(-18deg)} }
@keyframes jewel-impact { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 16%{opacity:1} 42%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(26)} }
@keyframes jewel-shock { 0%{opacity:.9;transform:translate(-50%,-50%) scale(.1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(18)} }
@keyframes manifesto-rise { from{opacity:0;transform:translate(-50%,18px);filter:blur(7px)} to{opacity:1;transform:translate(-50%,0);filter:blur(0)} }

@media (max-width: 680px) {
  .intro-sigil { width: 108vw; top: 45%; }
  .intro-manifesto { top: 68%; width: 90vw; font-size: .82rem; letter-spacing: .1em; }
  .portal-one { width: 112vw; }.portal-two { width: 92vw; }.portal-three { width: 70vw; }
  .brand-mark { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-void,.intro-horizon,.gold-ribbon,.portal-ring,.intro-impact,.intro-shock,.intro-particles { display:none !important; }
  .intro-sigil,.sigil-emblem,.sigil-stroke,.sigil-fill,.sigil-orb,.sigil-wordmark,.sigil-rule,.sigil-sub,.intro-manifesto { opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; stroke-dashoffset:0 !important; }
}

/* Bespoke jewel monogram and forge sequence */
.brand-mark { content: url("zianeve-monogram-jewel.png"); object-fit: contain; transform: scale(1.22); filter: drop-shadow(0 0 9px rgba(244,190,65,.36)); }
.jewel-stage { position:absolute; z-index:10; left:34%; top:46%; width:min(38vw,500px); aspect-ratio:1; transform:translate(-50%,-50%); transform-style:preserve-3d; }
.jewel-stage::before { content:""; position:absolute; inset:-30%; z-index:-2; border-radius:50%; opacity:0; background:repeating-conic-gradient(from 0deg,transparent 0 4deg,rgba(255,225,139,.34) 4.3deg 4.7deg,transparent 5deg 11deg); -webkit-mask:radial-gradient(circle,transparent 0 44%,#000 47% 61%,transparent 64%); mask:radial-gradient(circle,transparent 0 44%,#000 47% 61%,transparent 64%); animation:forge-rays 4.8s cubic-bezier(.16,1,.3,1) .55s forwards,portal-spin 16s linear 2s infinite; }
.jewel-stage::after { content:""; position:absolute; inset:5%; z-index:-3; border-radius:50%; opacity:0; background:radial-gradient(circle,rgba(255,255,255,.74),rgba(230,164,35,.26) 28%,transparent 68%); filter:blur(36px); animation:forge-bloom 3.6s ease 1.1s forwards; }
.jewel-main,.jewel-ghost { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.jewel-main { z-index:5; opacity:0; transform:translateZ(900px) rotateY(540deg) rotateZ(-24deg) scale(.08); filter:blur(24px) brightness(2.8) drop-shadow(0 38px 36px rgba(0,0,0,.95)); animation:jewel-forge 3.15s cubic-bezier(.12,.82,.16,1.08) .72s forwards,jewel-float 3.2s ease-in-out 4.25s infinite alternate; }
.jewel-ghost { z-index:3; opacity:0; mix-blend-mode:screen; filter:blur(8px) brightness(1.8) saturate(.7); }
.ghost-left { transform:translateX(-75%) scale(.54) rotate(-34deg); animation:ghost-collision 2.6s cubic-bezier(.14,.8,.18,1) .52s forwards; }
.ghost-right { transform:translateX(75%) scale(.54) rotate(34deg); animation:ghost-collision-right 2.6s cubic-bezier(.14,.8,.18,1) .62s forwards; }
.jewel-aura { position:absolute; inset:-3%; z-index:4; opacity:0; background:linear-gradient(115deg,#6f3b00,#ffd76b 28%,#fffbe5 50%,#bd7410 74%,#ffe793); -webkit-mask:url("zianeve-monogram-jewel.png") center/contain no-repeat; mask:url("zianeve-monogram-jewel.png") center/contain no-repeat; filter:blur(14px); transform:scale(.76); animation:aura-ignite 2.2s ease 2.24s forwards,aura-breathe 1.7s ease-in-out 4.4s infinite alternate; }
.jewel-scan { position:absolute; z-index:8; left:9%; top:4%; width:13%; height:92%; opacity:0; transform:translateX(-240%) skewX(-19deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),rgba(255,220,120,.42),transparent); filter:blur(4px); mix-blend-mode:screen; animation:jewel-scan 1.5s cubic-bezier(.2,.7,.25,1) 4.82s forwards; }
.forge-wordmark { position:absolute; z-index:11; left:64%; top:46%; width:min(50vw,650px); transform:translate(-50%,-50%); text-align:center; }
.forge-name { display:flex; justify-content:center; perspective:850px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.9rem,6vw,6.25rem); line-height:.9; letter-spacing:.08em; white-space:nowrap; }
.forge-name span { display:inline-block; opacity:0; color:transparent; background:linear-gradient(110deg,#704006,#d99520 22%,#fff6c9 46%,#c0790e 70%,#f4c455 88%,#fff3b5); -webkit-background-clip:text;background-clip:text; filter:blur(12px) drop-shadow(0 12px 18px rgba(0,0,0,.8)); transform:translate3d(var(--x,0),var(--y,-160px),420px) rotateX(var(--rx,68deg)) rotateY(var(--ry,0deg)) scale(1.7); animation:letter-land 1.35s cubic-bezier(.14,.82,.18,1.12) forwards; }
.forge-name span:nth-child(1){--x:-190px;--y:-110px;--ry:-80deg;animation-delay:3.24s}.forge-name span:nth-child(2){--x:-95px;--y:170px;--rx:-90deg;animation-delay:3.34s}.forge-name span:nth-child(3){--x:-35px;--y:-190px;--ry:66deg;animation-delay:3.44s}.forge-name span:nth-child(4){--x:0;--y:180px;--rx:92deg;animation-delay:3.54s}.forge-name span:nth-child(5){--x:55px;--y:-180px;--ry:-72deg;animation-delay:3.64s}.forge-name span:nth-child(6){--x:115px;--y:170px;--rx:-86deg;animation-delay:3.74s}.forge-name span:nth-child(7){--x:200px;--y:-100px;--ry:78deg;animation-delay:3.84s}
.forge-rule { height:1px; width:0; margin:22px auto 17px; opacity:0; background:linear-gradient(90deg,transparent,#ad6a0d,#fff0a4,#ad6a0d,transparent); box-shadow:0 0 14px rgba(241,184,60,.62); animation:forge-rule 1.1s ease 4.54s forwards; }
.forge-sub { opacity:0; transform:translateY(20px); color:#e7b84f; font-size:clamp(.72rem,1.25vw,1rem); font-weight:700; letter-spacing:.62em; text-indent:.62em; text-shadow:0 0 18px rgba(225,164,40,.4); animation:forge-sub .9s ease 4.86s forwards; }
.intro-impact { top:46%; animation:jewel-impact 1.45s ease-out 3.1s forwards; }
.intro-shock { top:46%; }.shock-one{animation:jewel-shock 2s ease-out 3.16s forwards}.shock-two{animation:jewel-shock 2.4s ease-out 3.34s forwards}
.intro-manifesto { top:calc(46% + min(25vw,250px)); animation:manifesto-rise 1s ease 5.72s forwards; }
.entrance-v2 .entrance-skip { animation:manifesto-rise .8s ease 6.05s forwards; }

@keyframes jewel-forge { 0%{opacity:0;transform:translateZ(900px) rotateY(540deg) rotateZ(-24deg) scale(.08);filter:blur(24px) brightness(2.8)} 25%{opacity:.8} 66%{opacity:1;transform:translateZ(-35px) rotateY(-18deg) rotateZ(2deg) scale(1.08);filter:blur(1px) brightness(1.55)} 83%{transform:translateZ(18px) rotateY(6deg) rotateZ(-.7deg) scale(.98)} 100%{opacity:1;transform:none;filter:blur(0) brightness(1.03) drop-shadow(0 38px 36px rgba(0,0,0,.95))} }
@keyframes ghost-collision { 0%{opacity:0;transform:translateX(-75%) scale(.54) rotate(-34deg)} 26%{opacity:.7} 72%{opacity:.5;transform:translateX(4%) scale(1.03) rotate(2deg)} 100%{opacity:0;transform:translateX(0) scale(1.2);filter:blur(24px) brightness(3)} }
@keyframes ghost-collision-right { 0%{opacity:0;transform:translateX(75%) scale(.54) rotate(34deg)} 26%{opacity:.7} 72%{opacity:.5;transform:translateX(-4%) scale(1.03) rotate(-2deg)} 100%{opacity:0;transform:translateX(0) scale(1.2);filter:blur(24px) brightness(3)} }
@keyframes forge-rays { 0%{opacity:0;transform:scale(.15) rotate(-35deg)} 40%{opacity:.88} 100%{opacity:.18;transform:scale(1.22) rotate(22deg)} }
@keyframes forge-bloom { 0%{opacity:0;transform:scale(.2)} 45%{opacity:1} 100%{opacity:.32;transform:scale(1.22)} }
@keyframes aura-ignite { 0%{opacity:0;transform:scale(.76)} 45%{opacity:1} 100%{opacity:.42;transform:scale(1.04)} } @keyframes aura-breathe { to{opacity:.72;filter:blur(20px);transform:scale(1.08)} }
@keyframes jewel-scan { 0%{opacity:0;transform:translateX(-240%) skewX(-19deg)} 18%{opacity:1} 82%{opacity:.95} 100%{opacity:0;transform:translateX(690%) skewX(-19deg)} }
@keyframes jewel-float { from{translate:0 0;rotate:-.25deg} to{translate:0 -9px;rotate:.35deg} }
@keyframes letter-land { 0%{opacity:0} 54%{opacity:1;filter:blur(2px) drop-shadow(0 12px 18px rgba(0,0,0,.8))} 78%{transform:translate3d(0,0,0) rotateX(-5deg) rotateY(3deg) scale(1.04)} 100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 12px 18px rgba(0,0,0,.8))} }
@keyframes forge-rule { to{width:86%;opacity:1} } @keyframes forge-sub { to{opacity:1;transform:none} }

@media(max-width:760px){.jewel-stage{left:50%;top:35%;width:min(72vw,420px)}.forge-wordmark{left:50%;top:65%;width:94vw}.forge-name{font-size:clamp(2.3rem,12vw,4.2rem)}.forge-rule{margin:15px auto 13px}.forge-sub{font-size:.7rem;letter-spacing:.42em;text-indent:.42em}.intro-manifesto{top:76%;font-size:.76rem}.portal-ring{top:43%}.intro-horizon{top:46%}}
@media(prefers-reduced-motion:reduce){.jewel-main,.jewel-aura,.forge-name span,.forge-rule,.forge-sub,.intro-manifesto{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.jewel-ghost,.jewel-scan,.jewel-stage::before,.jewel-stage::after{display:none!important}.forge-rule{width:86%!important}}

/* Full brand lockup: keep the company name visible in the mobile header. */
.brand {
  min-width: 250px;
}
.brand-mark {
  content: url("zianeve-logo-family.png");
  width: 245px;
  height: 76px;
  object-fit: contain;
  object-position: left center;
  transform: none;
  filter: drop-shadow(0 0 8px rgba(244,190,65,.24));
}
.brand-copy {
  display: none;
}

@media (max-width: 680px) {
  .nav {
    min-height: 78px;
    gap: 10px;
  }
  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand-mark {
    width: min(56vw, 218px);
    height: 68px;
  }
  .menu-button {
    flex: 0 0 auto;
  }
}

/* One master logo and the same two accessories are used in the header and intro. */
.brand {
  position: relative;
  isolation: isolate;
}
.brand-mark {
  content: url("zianeve-logo-family.png");
}
.brand::before,
.brand::after,
.logo-hat {
  content: "";
  position: absolute;
  z-index: 5;
  display: block;
  background-image: url("zianeve-logo-hats.png");
  background-repeat: no-repeat;
  background-size: 200% auto;
  pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(236,190,89,.26));
}
.brand::before {
  left: 25px;
  top: 43px;
  width: 38px;
  height: 24px;
  background-position: left 39%;
  transform: rotate(-2deg);
}
.brand::after {
  left: 72px;
  top: 1px;
  width: 38px;
  height: 32px;
  background-position: right 39%;
  transform: rotate(3deg);
}
.jewel-stage {
  left: 50%;
  top: 47%;
  width: min(88vw, 980px);
  aspect-ratio: 1919 / 820;
}
.jewel-aura {
  -webkit-mask: url("zianeve-logo-family.png") center / contain no-repeat;
  mask: url("zianeve-logo-family.png") center / contain no-repeat;
}
.logo-hat {
  opacity: 0;
  transform-origin: 50% 80%;
}
.logo-hat-boy {
  left: 11.6%;
  top: 61.5%;
  width: 10.5%;
  height: 15%;
  background-position: left 39%;
  animation: hat-drop-boy 1.2s cubic-bezier(.18,.9,.24,1.15) 5.72s forwards;
}
.logo-hat-girl {
  left: 32.1%;
  top: 1.5%;
  width: 9.8%;
  height: 19%;
  background-position: right 39%;
  animation: hat-drop-girl 1.25s cubic-bezier(.18,.9,.24,1.12) 6.58s forwards;
}
@keyframes hat-drop-boy {
  0% { opacity:0; transform:translate3d(-20px,-210px,0) rotate(-25deg) scale(.9); }
  14% { opacity:1; }
  66% { transform:translate3d(3px,7px,0) rotate(3deg) scale(1.02); }
  79% { transform:translate3d(-1px,-8px,0) rotate(-2deg) scale(.99); }
  90% { transform:translate3d(1px,2px,0) rotate(.8deg); }
  100% { opacity:1; transform:translate3d(0,0,0) rotate(-2deg); }
}
@keyframes hat-drop-girl {
  0% { opacity:0; transform:translate3d(22px,-225px,0) rotate(24deg) scale(.88); }
  14% { opacity:1; }
  66% { transform:translate3d(-3px,8px,0) rotate(-3deg) scale(1.025); }
  79% { transform:translate3d(1px,-7px,0) rotate(2deg) scale(.99); }
  90% { transform:translate3d(-1px,2px,0) rotate(-.8deg); }
  100% { opacity:1; transform:translate3d(0,0,0) rotate(5deg); }
}
.forge-wordmark {
  display: none;
}

/* Recognizable, functional WhatsApp contact button. */
.whatsapp {
  background: #25d366;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 16px 40px rgba(0,0,0,.42), 0 0 0 5px rgba(37,211,102,.12);
}
.whatsapp::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: url("whatsapp-icon.svg") center / contain no-repeat;
}
.whatsapp:hover {
  background: #20bd5a;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .jewel-stage {
    left: 50%;
    top: 46%;
    width: 96vw;
  }
  .brand::before {
    left: 21px;
    top: 39px;
    width: 33px;
    height: 21px;
  }
  .brand::after {
    left: 64px;
    top: 2px;
    width: 33px;
    height: 28px;
  }
}

/* Cinematic logo assembly: separate crystal fragments converge before the accessories land. */
.jewel-ghost { display: none !important; }
.logo-fragment {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  background: url("zianeve-logo-family.png") center / contain no-repeat;
  filter: blur(12px) brightness(2.4) drop-shadow(0 0 22px rgba(244,190,65,.8));
  transform: translate3d(var(--fx),var(--fy),0) rotate(var(--fr)) scale(.58);
  animation: fragment-assemble 3.15s cubic-bezier(.14,.84,.18,1) var(--fd) forwards;
  will-change: transform,opacity,filter;
}
.fragment-1 { --fx:-48vw; --fy:-28vh; --fr:-38deg; --fd:.38s; clip-path:polygon(0 0,35% 0,25% 52%,0 68%); }
.fragment-2 { --fx:42vw; --fy:-34vh; --fr:44deg; --fd:.52s; clip-path:polygon(35% 0,71% 0,62% 48%,25% 52%); }
.fragment-3 { --fx:-52vw; --fy:30vh; --fr:31deg; --fd:.66s; clip-path:polygon(0 68%,25% 52%,39% 100%,0 100%); }
.fragment-4 { --fx:50vw; --fy:34vh; --fr:-36deg; --fd:.8s; clip-path:polygon(25% 52%,62% 48%,67% 100%,39% 100%); }
.fragment-5 { --fx:12vw; --fy:-50vh; --fr:58deg; --fd:.94s; clip-path:polygon(71% 0,100% 0,100% 44%,62% 48%); }
.fragment-6 { --fx:54vw; --fy:8vh; --fr:-50deg; --fd:1.08s; clip-path:polygon(62% 48%,100% 44%,100% 100%,67% 100%); }
.fragment-7 { --fx:-6vw; --fy:48vh; --fr:72deg; --fd:1.2s; clip-path:polygon(25% 52%,35% 0,71% 0,62% 48%); }
.jewel-main {
  opacity: 0;
  transform: scale(.94);
  filter: blur(10px) brightness(2.2) drop-shadow(0 38px 36px rgba(0,0,0,.95));
  animation: logo-lock 1.25s cubic-bezier(.2,.85,.24,1) 3.15s forwards, jewel-float 3.2s ease-in-out 4.7s infinite alternate;
}
.jewel-aura { animation:aura-ignite 2.1s ease 2.72s forwards,aura-breathe 1.7s ease-in-out 4.8s infinite alternate; }
.jewel-scan { animation:jewel-scan 1.5s cubic-bezier(.2,.7,.25,1) 4.95s forwards; }
.intro-impact { animation:jewel-impact 1.55s ease-out 3.2s forwards; }
.shock-one { animation:jewel-shock 2s ease-out 3.28s forwards; }
.shock-two { animation:jewel-shock 2.4s ease-out 3.5s forwards; }
.logo-hat-boy { animation:hat-drop-boy 1.2s cubic-bezier(.18,.9,.24,1.15) 6.12s forwards; }
.intro-manifesto { animation:manifesto-rise 1s ease 7.35s forwards; }
.entrance-v2 .entrance-skip { animation:manifesto-rise .8s ease 7.7s forwards; }

@keyframes fragment-assemble {
  0% { opacity:0; transform:translate3d(var(--fx),var(--fy),0) rotate(var(--fr)) scale(.58); filter:blur(18px) brightness(2.8); }
  15% { opacity:.9; }
  68% { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(1.035); filter:blur(1px) brightness(1.7); }
  82% { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(.995); filter:blur(0) brightness(1.15); }
  100% { opacity:0; transform:translate3d(0,0,0) rotate(0) scale(1); filter:blur(0) brightness(1); }
}
@keyframes logo-lock {
  0% { opacity:0; transform:scale(.94); filter:blur(10px) brightness(2.2) drop-shadow(0 0 42px rgba(255,221,133,.9)); }
  35% { opacity:1; transform:scale(1.045); filter:blur(1px) brightness(1.8) drop-shadow(0 0 54px rgba(255,221,133,.92)); }
  70% { opacity:1; transform:scale(.992); filter:blur(0) brightness(1.08) drop-shadow(0 38px 36px rgba(0,0,0,.95)); }
  100% { opacity:1; transform:scale(1); filter:blur(0) brightness(1.03) drop-shadow(0 38px 36px rgba(0,0,0,.95)); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-fragment { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-hat {
    opacity: 1 !important;
    animation: none !important;
  }
  .logo-hat-boy { transform: rotate(-2deg) !important; }
  .logo-hat-girl { transform: rotate(5deg) !important; }
}