:root{
  --bg:#0f1419;
  --bg-2:#161c22;
  --bg-3:#1d242b;
  --sand:#c7c2b1;
  --sand-dim:#8f8b7f;
  --red:#ec230b;
  --line:rgba(199,194,177,.18);
  --serif:"Instrument Serif", "New Spirit", Georgia, serif;
  --sans:"Instrument Sans", system-ui, sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--sand);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
ul{list-style:none}
strong{color:#e9e5d8;font-weight:600}
em{font-family:var(--serif);font-style:italic;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
::selection{background:var(--red);color:var(--bg)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent}
.brand img{width:52px;height:auto}
.nav{display:flex;gap:30px;align-items:center;font-family:var(--serif);font-size:20px}
.nav a{text-decoration:none;opacity:.85}
.nav a:hover{opacity:1;color:#fff}
.nav-cta{border:1px solid var(--sand);padding:4px 18px;border-radius:99px;opacity:1!important}
.nav-cta:hover{background:var(--red);border-color:var(--red);color:var(--bg)!important}

/* hero: the ID poster */
.hero{position:relative;min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:28px 32px 36px;text-align:center}
.frame{width:100%;display:flex;justify-content:space-between;font-family:var(--serif);font-size:clamp(17px,1.7vw,24px);color:var(--sand)}
.frame span{flex:1}
.frame span:first-child{text-align:left}
.frame span:last-child{text-align:right}
.hero-logo{display:block;width:min(66vw,640px);margin:24px auto 12px;color:var(--sand)}
.hero-logo .nb{width:100%;height:auto;overflow:visible}
.hero-logo .nb{animation:breathe 7s ease-in-out infinite;transform-origin:50% 60%}
@keyframes breathe{50%{transform:scale(1.015) rotate(-.6deg)}}
.hero-role{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dim);display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}

/* showcase */
.showcase{position:relative;padding:40px 0 0;overflow:hidden}
.fan{position:relative;height:clamp(300px,42vw,540px);max-width:960px;margin:0 auto}
.card{position:absolute;bottom:0;left:50%;width:clamp(170px,30vw,340px);aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:0 40px 70px -25px rgba(0,0,0,.8);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.c1{transform:translateX(-118%) rotate(-8deg) translateY(30px)}
.c3{transform:translateX(18%) rotate(8deg) translateY(30px)}
.c2{transform:translateX(-50%);z-index:2;width:clamp(190px,34vw,380px)}
.fan:hover .c1{transform:translateX(-128%) rotate(-11deg) translateY(18px)}
.fan:hover .c3{transform:translateX(28%) rotate(11deg) translateY(18px)}
.ticker{position:relative;z-index:3;background:var(--sand);color:var(--bg);padding:14px 0;overflow:hidden;transform:rotate(-2deg) translateY(-28px);margin:0 -20px}
.ticker-track{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker span{font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);padding:0 26px;white-space:nowrap;line-height:1.1}
.ticker span::after{content:"";display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--red);margin-left:52px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track,.hero-logo .nb{animation:none}}

/* headings */
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7vw,96px);line-height:.95;letter-spacing:-.01em;color:#e9e5d8}
.h2 em{color:var(--red)}
.kicker{font-family:var(--serif);font-size:22px;color:var(--sand-dim)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center;padding-top:100px;padding-bottom:110px}
.about-photo img{border-radius:18px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.handle{display:inline-block;margin-top:16px;font-family:var(--serif);font-size:26px;text-decoration:none}
.handle em{color:var(--red)}
.handle:hover{color:#fff}
.about-text .h2{margin-bottom:30px}
.about-text p{margin-bottom:16px;max-width:58ch;color:var(--sand)}

/* tools */
.tools{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;padding-top:90px;padding-bottom:110px;align-items:start;border-top:1px solid var(--line)}
.tool-groups{display:grid;gap:36px}
.tool-group h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:14px;color:#e9e5d8}
.tool-group h3 em{color:var(--sand-dim)}
.apps{display:flex;gap:12px;flex-wrap:wrap}
.app{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:24px;border:2px solid currentColor}
.ps,.lr{background:#001e36;color:#31a8ff}
.ai{background:#330000;color:#ff9a00}
.id{background:#49021f;color:#ff3366}
.ae,.pr{background:#00005b;color:#9999ff}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chips li{border:1px solid var(--sand);padding:8px 22px;border-radius:99px;font-family:var(--serif);font-size:20px}

/* social grid */
.social{background:var(--bg-2);padding:110px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.section-head p{color:var(--sand-dim);max-width:34ch;font-family:var(--serif);font-size:22px;line-height:1.3}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;border-radius:12px;overflow:hidden;color:inherit}
.grid .tile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.grid .tile:hover img{transform:scale(1.04)}
.tile:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* feature */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center;padding-top:120px;padding-bottom:120px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dim)}
.feature-title{font-family:var(--serif);font-weight:400;font-size:clamp(60px,8vw,112px);line-height:.9;margin-top:16px;color:#e9e5d8}
.feature-title em{display:block;color:var(--red)}
.feature-sub{font-size:28px;margin:12px 0 30px}
.feature hr{border:0;border-top:1px solid var(--line);max-width:340px;margin-bottom:22px}
.feature h3{font-size:17px;font-weight:600;color:#e9e5d8}
.feature p{color:var(--sand-dim)}
.feature-img{border-radius:16px;box-shadow:0 50px 90px -35px rgba(0,0,0,.9)}
.feature-img img{width:100%}

/* identity */
.identity{padding:30px 0 120px}
.boards{display:grid;gap:56px}
.boards figure .tile{border-radius:16px;background:#fff;padding:10px}
.boards figure .tile img{border-radius:9px}
.boards figcaption{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.boards figcaption strong{font-family:var(--serif);font-weight:400;font-size:30px}
.boards figcaption em{color:var(--sand-dim);font-size:20px}

/* contact */
.contact{position:relative;background:var(--sand);color:var(--bg);padding:120px 0 0;overflow:hidden;text-align:center}
.contact .kicker{color:#5d5a50}
.contact-inner{position:relative;z-index:1}
.contact-title{font-family:var(--serif);font-weight:400;font-size:clamp(54px,9vw,128px);line-height:.92;margin:14px auto 40px;max-width:12ch}
.contact-title em{color:var(--red)}
.btn{display:inline-block;background:var(--bg);color:var(--sand);text-decoration:none;font-weight:600;padding:18px 32px;border-radius:99px;font-size:17px;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-3px);background:var(--red);color:var(--bg)}
.contact-word{color:var(--bg);opacity:.1;margin:80px auto 0;width:min(90vw,980px);transform:translateY(18%)}
.nb-big{width:100%;height:auto}

.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:28px;font-size:14px;color:var(--sand-dim)}
.foot img{width:40px;height:auto}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(8,10,12,.94);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1400px,100%);max-height:90vh;object-fit:contain;border-radius:8px;cursor:default}
.lb-close{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer}

/* responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .about,.tools,.feature{grid-template-columns:1fr;gap:40px}
  .about{padding-top:80px;padding-bottom:80px}
  .tools{padding-top:70px;padding-bottom:80px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .top{padding:12px 16px}
  .nav{gap:14px;font-size:18px}
  .nav a:not(.nav-cta){display:none}
  .hero{padding:20px 16px 28px;min-height:calc(100svh - 64px)}
  .frame{font-size:16px}
  .frame span:nth-child(2){display:none}
  .hero-logo{width:84vw}
  .hero-role{font-size:12px;gap:10px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .social{padding:80px 0}
  .feature{padding-top:80px;padding-bottom:80px}
  .identity{padding-bottom:80px}
  .contact{padding-top:90px}
  .foot{flex-direction:column;text-align:center}
}

.boards .tile,.boards .tile img{cursor:zoom-in;transition:none;transform:none!important}

/* gerações em IA */
.ai-gen{background:var(--bg-2);padding:110px 0}
.ai-grid{display:grid;grid-template-columns:minmax(0,600px);gap:24px;align-items:start}
.ai-media{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--bg-3)}
.ai-video{aspect-ratio:9/16}
.ai-media video,.ai-media img{width:100%;height:100%;object-fit:cover;display:block}
.ai-tag{position:absolute;top:14px;left:14px;background:var(--bg);color:var(--sand);font-family:var(--serif);font-size:18px;padding:2px 14px;border-radius:99px}
.ai-sound{position:absolute;bottom:14px;right:14px;background:rgba(15,20,25,.8);color:var(--sand);border:1px solid var(--sand);font-family:var(--serif);font-size:17px;padding:4px 14px;border-radius:99px;cursor:pointer}
.ai-sound.on{background:var(--red);border-color:var(--red);color:var(--bg)}
.ai-item figcaption{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.ai-item figcaption strong{font-family:var(--serif);font-weight:400;font-size:30px}
.ai-item figcaption em{color:var(--sand-dim);font-size:20px}
@media (max-width:640px){.ai-grid{grid-template-columns:1fr}.ai-gen{padding:80px 0}}