@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-800.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-italic.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:400 600;font-display:swap;src:url(fonts/manrope.woff2) format("woff2")}

:root{
  --navy:#0a1428; --navy-2:#101e3a; --navy-3:#182a4e;
  --paper:#f3efe6; --paper-dim:rgba(243,239,230,.72); --line:rgba(243,239,230,.14);
  --sand:#c9a96a; --live:#5fd39a;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --body:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--navy);color:var(--paper);-webkit-text-size-adjust:100%}
body{font:400 15px/1.55 var(--body);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
em{font-family:var(--serif);font-style:italic;font-weight:400}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:14px}

.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(70% 40% at 10% 0,rgba(44,82,150,.5),transparent 70%),
  radial-gradient(60% 35% at 100% 100%,rgba(42,74,133,.4),transparent 70%),
  linear-gradient(180deg,var(--navy-3),var(--navy) 55%)}
.grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* coluna estreita, pensada para celular */
.wrap{width:min(100% - 36px,420px);margin-inline:auto;padding:max(26px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom))}

.hero{text-align:center;display:flex;flex-direction:column;align-items:center}
.avatar{position:relative;width:112px;height:112px;margin-bottom:14px}
.avatar img{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;border-radius:50%}
.prog{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prog circle{fill:none}
.prog .track{stroke:rgba(243,239,230,.16);stroke-width:2.4}
.prog .arc{stroke:var(--sand);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px;animation:load 5.4s var(--ease) infinite}
.prog .tip{transform-origin:60px 60px;animation:tip 5.4s var(--ease) infinite}
.prog .tip circle{fill:var(--paper);stroke:rgba(201,169,106,.45);stroke-width:3;paint-order:stroke}
@keyframes load{0%{stroke-dashoffset:100;opacity:1}62%{stroke-dashoffset:24;opacity:1}88%{stroke-dashoffset:24;opacity:1}100%{stroke-dashoffset:24;opacity:0}}
@keyframes tip{0%{transform:rotate(0);opacity:1}62%{transform:rotate(273.6deg);opacity:1}88%{transform:rotate(273.6deg);opacity:1}100%{transform:rotate(273.6deg);opacity:0}}
@keyframes fade{to{opacity:1}}

.status{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 11px;border:1px solid var(--line);border-radius:99px;background:rgba(243,239,230,.05);font:600 13px/1 var(--body);margin-bottom:14px;opacity:0;animation:fade .9s var(--ease) .15s forwards}
.dot{width:7px;height:7px;border-radius:50%;background:var(--live);animation:ping 2s ease-out infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,211,154,.6)}70%,100%{box-shadow:0 0 0 7px rgba(95,211,154,0)}}
.roll{display:block;height:1.4em;overflow:hidden;text-align:left;line-height:1.4em;min-width:164px}
.reel{display:block;animation:roll 9s infinite}
.reel b{display:block;font-weight:600;height:1.4em;white-space:nowrap}
@keyframes roll{
  0%,27%{transform:translateY(0);filter:blur(0)}
  31%{filter:blur(1.5px)}
  34%,61%{transform:translateY(-1.4em);filter:blur(0)}
  64%{filter:blur(1.5px)}
  67%,94%{transform:translateY(-2.8em);filter:blur(0)}
  97%{filter:blur(1.5px)}
  100%{transform:translateY(-4.2em);filter:blur(0)}
}

.name{font:800 clamp(48px,15vw,60px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em;display:flex;gap:.28em;justify-content:center;overflow:hidden;padding-bottom:.05em}
.name span{display:inline-block;transform:translateY(105%);animation:rise 1s var(--ease) .2s forwards}
.name .n2{color:transparent;-webkit-text-stroke:1.4px var(--paper);animation-delay:.3s}
@keyframes rise{to{transform:none}}
.role{font:400 19px/1.25 var(--serif);color:var(--paper-dim);margin-top:4px;text-wrap:balance;opacity:0;animation:fade .9s var(--ease) .5s forwards}
.role em{color:var(--paper)}

.links{display:grid;gap:10px;margin-top:22px}
.card{position:relative;display:flex;align-items:center;gap:13px;min-height:64px;padding:11px 14px 11px 11px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(243,239,230,.07),rgba(243,239,230,.03));box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s,background .3s;animation:up .8s var(--ease) backwards}
.card:nth-child(1){animation-delay:.55s}.card:nth-child(2){animation-delay:.63s}.card:nth-child(3){animation-delay:.71s}.card:nth-child(4){animation-delay:.79s}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
.card:active{transform:scale(.985);box-shadow:0 3px 8px -6px rgba(0,0,0,.5)}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:rgba(243,239,230,.4);background:linear-gradient(180deg,rgba(243,239,230,.1),rgba(243,239,230,.04));box-shadow:0 16px 28px -12px rgba(0,0,0,.65)}
  .card:hover:active{transform:translateY(-1px) scale(.99)}
}
.txt{display:flex;flex-direction:column;flex:1;min-width:0}
.txt strong{font:700 22px/1.05 var(--display);text-transform:uppercase;letter-spacing:.025em}
.txt small{font-size:13px;line-height:1.35;color:var(--paper-dim);margin-top:2px}
.ico{width:42px;height:42px;padding:10px;flex:none;border-radius:13px;background:rgba(243,239,230,.08);color:var(--sand)}
.arrow{width:20px;height:20px;flex:none;opacity:.8;transition:transform .45s var(--ease)}
@media (hover:hover){.card:hover .arrow{transform:translate(3px,-3px)}}
.card-main{background:var(--paper);color:var(--navy);border-color:var(--paper);min-height:72px}
@media (hover:hover){.card-main:hover{background:#fff;border-color:#fff}}
.card-main small{color:rgba(10,20,40,.72)}
.card-main .ico{background:rgba(10,20,40,.08);color:var(--navy)}

.about{margin-top:34px;padding:20px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(243,239,230,.03)}
.about h2{font:800 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.about h2 em{text-transform:none;color:var(--sand);font-size:1.15em}
.about p{color:var(--paper-dim);margin-bottom:9px}
.about .soon{margin:12px 0 0;font:italic 400 17px var(--serif);color:var(--sand)}

.foot{margin-top:30px;text-align:center}
blockquote{font:italic 400 18px/1.3 var(--serif);color:var(--paper-dim);max-width:30ch;margin:0 auto}
cite{display:block;font:600 12px var(--body);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-top:10px}
.foot p{margin-top:22px;font-size:12px;color:var(--paper-dim);opacity:.8}

/* cursor: ponto + anel fino (só mouse) */
.cur-ring,.cur-dot{display:none;position:fixed;left:0;top:0;pointer-events:none;z-index:50;border-radius:50%}
@media (hover:hover) and (pointer:fine){
  html.cur,html.cur a{cursor:none}
  html.cur .cur-ring,html.cur .cur-dot{display:block}
}
.cur-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--paper);transition:opacity .25s}
.cur-ring{width:22px;height:22px;margin:-11px 0 0 -11px;border:1px solid rgba(243,239,230,.55);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s,border-color .3s,opacity .3s}
.cur-ring.hot{width:38px;height:38px;margin:-19px 0 0 -19px;background:rgba(201,169,106,.12);border-color:var(--sand)}
.cur-ring.down{width:16px;height:16px;margin:-8px 0 0 -8px}
.cur-dot.hot{opacity:0}
.cur-ring.off,.cur-dot.off{opacity:0}

@media (min-width:768px){.wrap{padding-top:56px}}
@media (prefers-reduced-transparency:reduce){.status,.about{background:var(--navy-2)}.grain{display:none}}
@media (prefers-contrast:more){:root{--paper-dim:rgba(243,239,230,.94);--line:rgba(243,239,230,.5)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .status,.role{opacity:1}
  .name span{transform:none}
  .prog .arc{stroke-dashoffset:24}.prog .tip{transform:rotate(273.6deg)}
  .reel{transform:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}