:root{
  --bg:#f3f4f8;--panel:#fff;--soft:#eceef4;--line:#e0e2ea;--ink:#16181f;--mut:#6b7080;
  --accent:#0fa58f;--accent-ink:#fff;--coral:#ff8a5c;--glow:rgba(15,165,143,.16);
  --sans:'Archivo',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --r:22px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=mono]){
  --bg:#13141a;--panel:#1b1d25;--soft:#262935;--line:#2a2d38;--ink:#eceef4;--mut:#8b90a0;--glow:rgba(15,165,143,.22)}}
:root[data-theme=mono]{--accent:#2e313b;--glow:rgba(0,0,0,.08);filter:grayscale(1) contrast(1.08)}   /* monochrome: the light theme with every colour taken out */
:root[data-theme=dark]{--bg:#13141a;--panel:#1b1d25;--soft:#262935;--line:#2a2d38;--ink:#eceef4;--mut:#8b90a0;--glow:rgba(15,165,143,.22)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:17px/1.6 var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 85% -5%,var(--glow),transparent 70%),radial-gradient(700px 400px at -5% 12%,rgba(255,138,92,.10),transparent 70%);background-repeat:no-repeat}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em}
h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px}
h3{font-size:20px}
p.lead{font-size:19px;color:var(--mut);max-width:62ch}
.tag{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}

/* topo */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;text-decoration:none}
.brand img{width:38px;height:38px}
nav .links{display:flex;gap:14px;margin-left:auto;font-size:14px}
nav .links a{text-decoration:none;white-space:nowrap;color:var(--mut);transition:color .15s}
nav .links a:hover{color:var(--ink)}
#theme{border:1px solid var(--line);background:var(--panel);color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px}
@media(max-width:760px){nav .links{display:none}nav .wrap{justify-content:space-between}}

/* hero */
.hero{padding:84px 0 56px;text-align:center}
.hero img.big{width:168px;height:168px;margin-bottom:26px;filter:drop-shadow(0 12px 24px var(--glow))}
.hero h1{font-size:clamp(40px,7vw,76px);max-width:15ch;margin:0 auto 20px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin:0 auto 30px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid var(--line);background:var(--panel);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.pill{font:500 13px var(--mono);padding:7px 14px;border-radius:999px;background:var(--soft);color:var(--mut)}

/* família */
section{padding:72px 0}
.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:36px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s,box-shadow .2s}
a.card{text-decoration:none;display:block}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(0,0,0,.4)}
.card img{width:88px;height:88px;margin-bottom:18px}
.card h3{margin-bottom:6px}
.card p{color:var(--mut);font-size:15px}

/* app */
.app{border-top:1px solid var(--line)}
.app .head{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.app .head img{width:104px;height:104px}
.app .head h2{margin:0}
.app .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;margin-top:30px}
.app:nth-of-type(even) .grid{grid-template-columns:1fr 1.05fr}
.app:nth-of-type(even) .grid .shot{order:-1}
@media(max-width:860px){.app .grid,.app:nth-of-type(even) .grid{grid-template-columns:1fr}.app:nth-of-type(even) .grid .shot{order:0}}
ul.feat{list-style:none;padding:0;display:grid;gap:14px}
ul.feat li{display:grid;grid-template-columns:22px 1fr;gap:12px}
ul.feat li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:3px;background:var(--glow) no-repeat center/12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230fa58f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
ul.feat b{font-weight:650}
ul.feat span{color:var(--mut)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.facts .pill{background:transparent;border:1px solid var(--line)}
.facts .pill b{color:var(--ink);font-weight:500}

/* maquetas */
.shot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.5);font-size:13px}
.bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
.bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.bar i:first-child{background:var(--coral)}.bar i:nth-child(2){background:#e9c46a}.bar i:nth-child(3){background:var(--accent)}
.bar span{margin-left:auto;font:12px var(--mono);color:var(--mut)}
/* caixote-docs */
.files{display:grid;grid-template-columns:150px 1fr;min-height:300px}
.files aside{border-right:1px solid var(--line);padding:12px;color:var(--mut);display:grid;gap:6px;align-content:start}
.files aside b{color:var(--ink);background:var(--soft);padding:6px 10px;border-radius:10px;font-weight:500}
.files aside div{padding:6px 10px}
.files .list{padding:12px;display:grid;gap:4px;align-content:start}
.row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px}
.row.sel{background:var(--glow)}
.ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:600 10px var(--mono);color:#fff;background:linear-gradient(135deg,var(--accent),#0b7f70)}
.ico.c{background:linear-gradient(135deg,var(--coral),#e56a3a)}.ico.g{background:linear-gradient(135deg,#6d7bff,#4c57d6)}
.row em{font-style:normal;color:var(--mut);font:12px var(--mono)}
.search{margin:12px 12px 4px;padding:9px 14px;border-radius:999px;background:var(--soft);color:var(--mut)}
.search mark{background:var(--glow);color:var(--ink);border-radius:4px;padding:0 3px}
/* chat */
.chat{padding:18px;display:grid;gap:10px;min-height:300px;align-content:end}
.b{max-width:76%;padding:9px 14px;border-radius:18px;background:var(--soft)}
.b.me{margin-left:auto;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.b:not(.me){border-bottom-left-radius:5px}
.b small{display:block;font:11px var(--mono);opacity:.7;margin-top:3px}
.b.file{display:flex;gap:10px;align-items:center}
.lock{display:flex;gap:8px;justify-content:center;font:12px var(--mono);color:var(--mut);padding:4px}
/* todo */
.todo{padding:18px;display:grid;gap:8px;min-height:300px;align-content:start}
.t{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid var(--line)}
.t::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--mut);flex:none}
.t.done{opacity:.55;text-decoration:line-through}
.t.done::before{border-color:var(--accent);background:var(--accent)}
.t em{margin-left:auto;font:12px var(--mono);color:var(--mut);font-style:normal}
.t .p{font:600 10px var(--mono);padding:3px 8px;border-radius:999px;background:var(--coral);color:#fff}
/* calendario */
.cal{padding:14px}
.cal .hd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;color:var(--mut);font:11px var(--mono);margin-bottom:6px}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .d{aspect-ratio:1/.85;border-radius:10px;background:var(--soft);padding:5px 6px;font:11px var(--mono);color:var(--mut);position:relative;overflow:hidden}
.cal .d.t0{background:var(--glow);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal .d u{display:block;text-decoration:none;font:600 9px var(--sans);margin-top:2px;padding:1px 4px;border-radius:4px;background:var(--accent);color:#fff;white-space:nowrap;overflow:hidden}
.cal .d u.c{background:var(--coral)}

/* integração */
.integ{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px;margin-top:34px}
.integ svg{width:100%;height:auto;display:block}
.integ text{font-family:var(--sans);fill:var(--ink)}
.integ .m{font-family:var(--mono);fill:var(--mut);font-size:11px}
.integ .node{fill:var(--soft);stroke:var(--line)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:22px}
.cols .card h3{font-size:17px;margin-bottom:8px}

/* stack */
pre{background:#0d0e12;color:#e8e9ef;border-radius:16px;padding:20px;overflow:auto;font:14px/1.6 var(--mono);margin-top:22px}
pre .c{color:#7d8296}pre .k{color:#ff8a5c}pre .v{color:#4fd1bd}
table{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
td:first-child{font-weight:650;white-space:nowrap}
td.mono{font-size:13px;color:var(--mut)}
.scroll{overflow-x:auto}
.st-ok,.st-next{font:500 12px var(--mono);padding:3px 9px;border-radius:999px;white-space:nowrap}
.st-ok{background:var(--glow);color:var(--accent)}.st-next{background:rgba(255,138,92,.16);color:var(--coral)}

footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:14px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}

.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn,.card{transition:none}}
.integ .cols{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
a.lang{font:600 12px var(--mono);text-decoration:none;border:1px solid var(--line);background:var(--panel);padding:9px 12px;border-radius:999px;color:var(--ink)}
.demos{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
.demos .mono{font-size:13px;color:var(--mut);width:100%;text-align:center}
.demos .btn{padding:9px 18px;font-size:15px;border-color:var(--accent)}
.demo-wrap{position:relative}
.demo-btn{font:600 14px var(--sans);background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;height:36px;padding:0 16px;cursor:pointer;transition:transform .15s}
.demo-btn:hover{transform:translateY(-1px)}
.demo-menu{position:absolute;right:0;top:46px;width:300px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 24px 50px -16px rgba(0,0,0,.45);z-index:30}
.demo-menu p{padding:10px 12px 8px;display:grid;line-height:1.3}
.demo-menu p small{color:var(--mut);font-size:12px}
.demo-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none}
.demo-menu a:hover{background:var(--soft)}
.demo-menu img{width:44px;height:44px;flex:none}
.demo-menu a span{display:grid;line-height:1.25}
.demo-menu a small{color:var(--mut);font-size:12.5px}
.demo-menu[hidden]{display:none}
@media(max-width:760px){.brand img{width:32px;height:32px}.demo-btn{white-space:nowrap}nav .wrap{gap:10px}nav .wrap>.demo-wrap{margin-left:auto}nav .wrap>.brand{margin-right:0}}
nav .links{margin-left:auto}
@media(max-width:760px){.demo-wrap{position:static}.demo-menu{position:fixed;left:16px;right:16px;top:66px;width:auto}nav .wrap>.demo-wrap{margin-left:auto}}
/* rss */
.rss{padding:14px;display:grid;gap:8px;min-height:300px;align-content:start}
.rss .a{padding:10px 14px;border-radius:14px;border:1px solid var(--line)}
.rss .a b{display:block;font-size:14px}
.rss .a small{font:11px var(--mono);color:var(--mut)}
.rss .a.read{opacity:.6}.rss .a.read b{font-weight:500}
.rss .a .star{float:right;color:var(--coral)}

.soon{display:inline-block;margin-left:10px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--coral,#ff8a5c);color:var(--coral,#ff8a5c);vertical-align:middle}
.notice{background:var(--soft);border-bottom:1px solid var(--line);text-align:center;padding:12px 16px;font-size:15px;color:var(--ink)}
.notice b{color:var(--coral,#ff8a5c)}
.card .soon{margin:0 0 0 8px;font-size:10px;padding:3px 7px}