@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{
  --base:#0c2321; --base-2:#12302c; --base-3:#1a4039;
  --paper:#f3efe6; --paper-dim:rgba(243,239,230,.72); --line:rgba(243,239,230,.14);
  --accent:#9ad8bd; --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(--base);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(--accent);outline-offset:3px;border-radius:14px}

.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(70% 40% at 10% 0,rgba(46,122,105,.45),transparent 70%),
  radial-gradient(60% 35% at 100% 100%,rgba(38,100,88,.35),transparent 70%),
  linear-gradient(180deg,var(--base-3),var(--base) 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(--accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px;animation:load 2.4s var(--ease) .2s forwards}
.prog .tip{transform-origin:60px 60px;animation:tip 2.4s var(--ease) .2s forwards}
.prog .tip circle{fill:var(--paper);stroke:rgba(154,216,189,.45);stroke-width:3;paint-order:stroke}
@keyframes load{to{stroke-dashoffset:24}}
@keyframes tip{to{transform:rotate(273.6deg)}}
@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);flex:none}
.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(--accent)}
.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(--base);border-color:var(--paper);min-height:72px}
@media (hover:hover){.card-main:hover{background:#fff;border-color:#fff}}
.card-main small{color:rgba(12,35,33,.72)}
.card-main .ico{background:rgba(12,35,33,.08);color:var(--base)}

.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(--accent);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(--accent)}

.foot{margin-top:30px;text-align:center}
.foot p{font-size:12px;color:var(--paper-dim)}

@media (min-width:768px){.wrap{padding-top:56px}}
@media (prefers-reduced-transparency:reduce){.status,.about{background:var(--base-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}