/* ============================================================
   VÊRGE — Design System (compartilhado entre todas as páginas)
   ============================================================ */

:root{
  --black:#141414;
  --black-2:#1c1b19;
  --cream:#fbfaf7;
  --cream-2:#f2f0ec;
  --bronze:#a89f8f;
  --bronze-dim:#6f6a60;
  --text-dark:#1b1b1b;
  --text-muted:#6b6862;
  --off-white:#eae7e0;
  --serif: Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--serif);
  background:var(--black);
  color:var(--off-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--bronze); color:var(--black);}

@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  a, button, .btn, .card, .rank{ cursor:none; }
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor{
  position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--bronze); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), background .28s;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } }
.cursor.hover{ width:52px; height:52px; background:transparent; border:1px solid var(--bronze); }

/* ---------- GRAIN ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay; background-repeat:repeat; background-size:120px 120px;
}

/* ---------- SMOOTH SCROLL WRAPPER ---------- */
#wrapper{ position:fixed; top:0; left:0; width:100%; will-change:transform; }
#spacer{ width:1px; }
@media (prefers-reduced-motion: reduce){ #wrapper{ position:static; } }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 5vw;
  mix-blend-mode:difference;
}
.nav .word{ font-size:15px; letter-spacing:6px; color:#fff; }
.nav .links{ display:flex; gap:30px; align-items:center; }
.nav .links a{
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#fff;
  position:relative; padding:4px 0; transition:opacity .3s;
}
.nav .links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:#fff; transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.nav .links a:hover::after, .nav .links a.current::after{ width:100%; }
.nav .links a.current{ opacity:1; }
.nav .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav .burger span{ width:24px; height:1.5px; background:#fff; display:block; transition:.3s; }

/* mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-size:24px; letter-spacing:3px; text-transform:uppercase; color:var(--off-white); }
.mobile-menu a.current{ color:var(--bronze); }

@media (max-width:760px){
  .nav .links{ display:none; }
  .nav .burger{ display:flex; }
}

/* ---------- RANK RAIL ---------- */
.rail{
  position:fixed; right:36px; top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:22px;
}
.rail .rank{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.28);
  transition:color .5s ease, letter-spacing .5s ease;
  display:flex; align-items:center; gap:10px;
  background:none; border:none; font-family:var(--serif); padding:4px 0;
}
.rail .rank .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.28); transition:all .5s ease; }
.rail .rank.active{ color:#fff; letter-spacing:3px; }
.rail .rank.active .dot{ background:var(--bronze); width:6px; height:6px; box-shadow:0 0 8px var(--bronze); }
@media (max-width:900px){ .rail{ display:none; } }

/* ---------- SECTION BASE ---------- */
section, footer.footer{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6vh 7vw; overflow:hidden;
}
.manifesto, .journey-intro, .method, .quote, .compact{ min-height:auto; padding:8vh 7vw; }
.dark{ background:var(--black); color:var(--off-white); }
.light{ background:var(--cream); color:var(--text-dark); }

.reveal{
  opacity:0; transform:translateY(36px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
.reveal.d4{ transition-delay:.48s; }

/* ---------- HERO ---------- */
.hero{ padding:0; }
.hero .bg{ position:absolute; inset:-6% -6%; background-size:cover; background-position:center 30%; will-change:transform; }
.hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 35%, rgba(10,10,10,0.78) 78%, rgba(10,10,10,0.97) 100%);
}
.hero .spot{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,40%), rgba(168,159,143,0.13), transparent 60%);
}
.hero .content{ position:relative; z-index:2; text-align:center; max-width:900px; }
.hero .kicker{ font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--bronze); margin-bottom:28px; }
.hero h1{ font-weight:400; font-size:clamp(38px, 6.4vw, 88px); line-height:1.08; margin:0 0 26px 0; color:#fff; }
.hero h1 .word-anim{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .word-anim span{ display:inline-block; transform:translateY(110%); transition:transform 1.1s cubic-bezier(.2,.8,.15,1); }
.hero.loaded h1 .word-anim span{ transform:translateY(0); }
.hero h1 em{ font-style:italic; color:var(--off-white); }
.hero p{ font-size:clamp(15px, 1.6vw, 19px); color:#cfcabf; line-height:1.7; max-width:560px; margin:0 auto; }
.hero .cta-row{ margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.scrollcue{ position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; }
.scrollcue .line{ width:1px; height:52px; background:linear-gradient(to bottom, transparent, var(--bronze) 60%, transparent); animation:scrolldown 2.2s ease-in-out infinite; }
@keyframes scrolldown{ 0%{transform:scaleY(0);transform-origin:top;opacity:0;} 40%{transform:scaleY(1);transform-origin:top;opacity:1;} 60%{transform:scaleY(1);transform-origin:bottom;opacity:1;} 100%{transform:scaleY(0);transform-origin:bottom;opacity:0;} }
.scrollcue span{ font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--bronze-dim); }

/* ---------- SUBPAGE HERO (páginas internas) ---------- */
.subhero{ min-height:66vh; padding:0; }
.subhero .bg{ position:absolute; inset:-6%; background-size:cover; background-position:center; will-change:transform; }
.subhero .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.92) 100%); }
.subhero .content{ position:relative; z-index:2; text-align:center; max-width:820px; }
.subhero .kicker{ font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--bronze); margin-bottom:22px; }
.subhero h1{ font-weight:400; font-size:clamp(34px, 5.4vw, 72px); line-height:1.1; margin:0 0 22px 0; color:#fff; }
.subhero h1 em{ font-style:italic; }
.subhero p{ font-size:clamp(15px,1.6vw,18px); color:#cfcabf; line-height:1.7; max-width:600px; margin:0 auto; }

/* ---------- MANIFESTO ---------- */
.manifesto{ text-align:center; }
.manifesto .kicker{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--bronze-dim); margin-bottom:18px;}
.manifesto h2{ font-weight:400; font-size:clamp(26px, 3.6vw, 44px); line-height:1.3; max-width:840px; margin:0 auto 26px auto; }
.manifesto p{ font-size:16.5px; line-height:1.7; color:var(--text-muted); max-width:640px; margin:0 auto 14px auto; text-align:left; }
.manifesto .divider{ width:64px; border:none; border-top:1.5px solid var(--bronze); margin:26px auto; }
.skyline-svg{ width:min(560px,80vw); height:auto; margin:0 auto 26px auto; display:block; }
.skyline-svg path, .skyline-svg line{ stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.4s cubic-bezier(.2,.7,.15,1); }
.skyline-svg.in path, .skyline-svg.in line{ stroke-dashoffset:0; }

/* ---------- TICKER ---------- */
.ticker{ overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); padding:14px 0; background:var(--black); }
.ticker-track{ display:inline-block; font-size:14px; letter-spacing:5px; color:var(--bronze-dim); animation:marquee 26s linear infinite; text-transform:uppercase; }
.ticker-track span{ margin:0 28px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- JOURNEY INTRO ---------- */
.journey-intro{ text-align:center; }
.journey-intro .kicker{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--bronze); margin-bottom:18px;}
.journey-intro h2{ font-weight:400; font-size:clamp(28px, 4.2vw, 52px); line-height:1.25; max-width:820px; margin:0 auto 20px auto; color:#fff; }
.journey-intro p{ font-size:16px; line-height:1.7; color:#cfcabf; max-width:560px; margin:0 auto 30px auto; }
.rankline{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--bronze-dim); }
.rankline span.step{ padding:8px 18px; }
.rankline span.arrow{ color:rgba(255,255,255,0.2); font-size:11px; }

/* ---------- QUOTE / DUOTONE ---------- */
.quote{ text-align:center; }
.quote .bg{ position:absolute; inset:-6%; background-size:cover; background-position:center; will-change:transform; }
.quote .veil{ position:absolute; inset:0; background:rgba(20,17,13,0.72); }
.quote .content{ position:relative; z-index:2; max-width:840px; }
.quote blockquote{ font-size:clamp(24px,3.6vw,42px); font-style:italic; line-height:1.5; margin:0 0 28px 0; color:#f5f1e8; }
.quote .attr{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#c9b896; }

/* ---------- LEVEL PANELS ---------- */
.level{ background:var(--black); align-items:stretch; justify-content:flex-end; flex-direction:row; padding:0; }
.level .bg{ position:absolute; inset:-6%; background-size:cover; background-position:center; will-change:transform; }
.level .veil{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.8) 40%, rgba(10,10,10,0.4) 75%, rgba(10,10,10,0.18) 100%); }
.level.flip .veil{ background:linear-gradient(270deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.8) 40%, rgba(10,10,10,0.4) 75%, rgba(10,10,10,0.18) 100%); }
.level.flip{ justify-content:flex-start; }
.level .panel{ position:relative; z-index:2; width:min(560px, 88vw); padding:6vh 4vw; display:flex; flex-direction:column; justify-content:center; }
.level .num{ font-size:13px; letter-spacing:3px; color:var(--bronze); margin-bottom:14px; }
.level h3{ font-size:clamp(32px,4.4vw,56px); font-weight:400; margin:0 0 12px 0; color:#fff; line-height:1.1;}
.level .tagline{ font-style:italic; font-size:16px; color:#cfcabf; margin-bottom:18px; line-height:1.6; }
.level .resultado{ font-size:14.5px; color:#b8b0a6; line-height:1.65; margin-bottom:20px; border-left:1px solid var(--bronze); padding-left:18px; }
.level ul{ list-style:none; padding:0; margin:0; }
.level ul li{ font-size:13.5px; color:#cfcabf; padding:10px 0; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; gap:12px; }
.level ul li:last-child{ border-bottom:1px solid rgba(255,255,255,0.12); }
.level .access{ margin-top:30px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--bronze-dim); }
.level .imgmask{ position:absolute; inset:0; clip-path:inset(0 0 100% 0); transition:clip-path 1.5s cubic-bezier(.2,.8,.15,1); }
.level.flip .imgmask{ clip-path:inset(0 100% 0 0); }
.level.in .imgmask{ clip-path:inset(0 0 0 0); }

/* ---------- METHOD ---------- */
.method{ text-align:center; }
.method .texture{ position:absolute; inset:0; opacity:.05; background-size:cover; background-position:center; filter:grayscale(1); }
.method .kicker{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--bronze-dim); margin-bottom:18px; position:relative; z-index:2;}
.method h2{ font-weight:400; font-size:clamp(26px,3.6vw,42px); max-width:760px; margin:0 auto 24px auto; line-height:1.3; position:relative; z-index:2;}
.method-grid{ display:flex; gap:40px; flex-wrap:wrap; justify-content:center; max-width:900px; margin-top:6px; position:relative; z-index:2;}
.method-grid .item{ width:250px; text-align:left; }
.method-grid .item .n{ font-size:12px; color:var(--bronze-dim); letter-spacing:2px; margin-bottom:10px;}
.method-grid .item p{ font-size:14.5px; color:var(--text-muted); line-height:1.7; }
.method-grid .item h4{ font-size:17px; font-weight:400; margin:0 0 10px 0; color:var(--text-dark); }

/* ---------- SECTION HEADING (genérico) ---------- */
.section-head{ text-align:center; max-width:760px; margin:0 auto; }
.section-head .kicker{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--bronze); margin-bottom:18px; }
.section-head.on-light .kicker{ color:var(--bronze-dim); }
.section-head h2{ font-weight:400; font-size:clamp(26px,3.6vw,44px); line-height:1.28; margin:0 auto 20px auto; }
.section-head p{ font-size:16px; line-height:1.7; color:#cfcabf; max-width:600px; margin:0 auto; }
.section-head.on-light p{ color:var(--text-muted); }

/* ---------- MATERIAL CARDS ---------- */
.materials{ align-items:stretch; }
.materials .inner{ width:100%; max-width:1080px; margin:0 auto; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:26px; margin-top:48px; }
.mat-card{
  position:relative; background:var(--black-2); border:1px solid rgba(255,255,255,0.10);
  padding:34px 30px; display:flex; flex-direction:column;
  transition:border-color .4s ease, transform .4s ease, background .4s ease;
}
.mat-card:hover{ border-color:var(--bronze); transform:translateY(-4px); background:#211f1c; }
.mat-card .tag{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--bronze); margin-bottom:16px; }
.mat-card h3{ font-size:22px; font-weight:400; color:#fff; margin:0 0 12px 0; line-height:1.25; }
.mat-card p{ font-size:14.5px; line-height:1.65; color:var(--text-muted); flex:1; margin:0 0 24px 0; }
.mat-card .dl{
  align-self:flex-start; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#fff;
  border-bottom:1px solid var(--bronze); padding-bottom:4px; transition:color .3s, letter-spacing .3s;
}
.mat-card .dl:hover{ color:var(--bronze); letter-spacing:3px; }

/* ---------- CONTACT / FORM ---------- */
.contact{ align-items:stretch; }
.contact .inner{ width:100%; max-width:620px; margin:0 auto; }
.form{ margin-top:44px; display:flex; flex-direction:column; gap:22px; text-align:left; }
.form label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--bronze-dim); display:block; margin-bottom:10px; }
.form input, .form textarea, .form select{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.2);
  color:var(--off-white); font-family:var(--serif); font-size:16px; padding:10px 2px; outline:none;
  transition:border-color .3s;
}
.form input:focus, .form textarea:focus, .form select:focus{ border-color:var(--bronze); }
.form textarea{ resize:vertical; min-height:90px; }
.form select option{ background:var(--black-2); color:var(--off-white); }
.form .btn{ align-self:flex-start; margin-top:8px; }
.form-note{ font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.6; }

/* ---------- FOOTER ---------- */
.footer{ text-align:center; }
.footer .bg{ position:absolute; inset:-6%; background-size:cover; background-position:center; will-change:transform; }
.footer .veil{ position:absolute; inset:0; background:rgba(10,10,10,0.9); }
.footer .content{ position:relative; z-index:2; }
.footer .word{ font-size:26px; letter-spacing:10px; color:#fff; margin-bottom:26px; }
.footer .tagline{ font-style:italic; font-size:18px; color:#cfcabf; line-height:1.6; margin-bottom:32px; }
.footer .links{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.footer .links a{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--bronze-dim); transition:color .3s; }
.footer .links a:hover{ color:#fff; }
.footer .copy{ font-size:10.5px; color:#54504a; letter-spacing:1px; }

/* ---------- BUTTON ---------- */
.btn{ display:inline-block; font-family:var(--serif); border:1px solid var(--bronze); color:#fff; padding:14px 34px; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; transition:all .3s ease; background:transparent; cursor:pointer; }
.btn:hover{ background:var(--bronze); color:var(--black); }
.btn.solid{ background:var(--bronze); color:var(--black); }
.btn.solid:hover{ background:transparent; color:#fff; }

@media (max-width:760px){
  .level{ flex-direction:column !important; justify-content:flex-end !important; }
  .level .panel{ width:100%; padding:6vh 7vw 8vh 7vw; }
  .hero .kicker{ letter-spacing:3px; }
  .method-grid{ gap:26px; }
  .ticker-track{ font-size:11px; letter-spacing:3px; }
}