@charset "ISO-8859-1"; :root { --c-blue: #3b82f6; --c-purple: #8b5cf6; --c-pink: #ec4899; --c-orange: #f97316; --c-yellow: #f59e0b; --c-green: #10b981; --cg:#4CAF50; --ct:#00BCD4; --cb:#2196F3; --cp:#9C27B0; --ck:#E91E63; --co:#FF9800; --grad:linear-gradient(90deg,#4CAF50,#00BCD4,#2196F3,#9C27B0,#E91E63,#FF9800); --plural-grad: linear-gradient(135deg, var(--c-blue), var(--c-purple), var(--c-pink), var(--c-orange)); --plural-grad-2: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899, #ef4444, #f59e0b, #10b981); --shadow-sm:0 4px 6px -1px rgba(0,0,0,.05); --shadow-lg:0 25px 50px -12px rgba(0,0,0,.15); --bg:#fff; --bg2:#f8fafc; --bg3:#f1f5f9; --tx:#0f172a; --mu:#64748b; --hi:#94a3b8; --br:rgba(15,23,42,.08); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } * { cursor:default; user-select:none } a,button,.ncta,.btn,.nlinks a,.cl-row { cursor:pointer } input,textarea { cursor:text; user-select:text } html { scroll-behavior:smooth } body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--tx); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.6 } nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:64px; background:rgba(255,255,255,.55); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(15,23,42,.06); transition:background .3s } .nav-logo-img { height:34px; width:auto; display:block } .nbrand { display:flex; align-items:center; gap:10px; text-decoration:none; } .nlinks { display:flex; gap:26px; list-style:none } .nlinks a { text-decoration:none; font-size:.87rem; font-weight:500; color:var(--mu); position:relative; transition:color .25s; cursor:pointer } .nlinks a::after { content:''; position:absolute; width:0; height:2px; bottom:-4px; left:0; background:var(--grad); transition:width .3s } .nlinks a:hover { color:var(--tx) } .nlinks a:hover::after { width:100% } .nav-right { display:flex; align-items:center; gap:12px } .lang-switcher { position:relative } .lang-btn { display:flex; align-items:center; gap:5px; background:transparent; border:1.5px solid var(--br); border-radius:7px; padding:6px 10px; font-size:.78rem; font-weight:600; color:var(--tx); cursor:pointer; transition:border-color .25s } .lang-btn:hover { border-color:var(--cb) } .lang-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--br); border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.1); min-width:160px; overflow:hidden; z-index:200 } .lang-menu.open { display:block } .lang-opt { display:block; width:100%; text-align:left; padding:10px 16px; font-size:.85rem; font-weight:500; background:transparent; border:none; cursor:pointer; color:var(--tx); transition:background .2s } .lang-opt:hover { background:var(--bg2) } .lang-opt.active { color:var(--cb); font-weight:700 } .ncta { font-family:'Inter',sans-serif; font-size:.82rem; font-weight:700; background:var(--tx); color:#fff; text-decoration:none; padding:9px 20px; border-radius:7px; transition:opacity .25s,transform .2s; cursor:pointer; white-space:nowrap } .ncta:hover { opacity:.85; transform:translateY(-1px) } .nav-hamburger { display:none; flex-direction:column; justify-content:space-between; width:40px; height:40px; background:transparent; border:1.5px solid var(--br); border-radius:8px; cursor:pointer; padding:11px 10px } .nav-hamburger span { display:block; width:100%; height:2px; background:var(--tx); border-radius:2px; transition:all .3s } #nav-mobile-menu a { display:block; padding:14px 5%; font-size:1rem; font-weight:500; color:var(--mu); text-decoration:none; border-bottom:1px solid var(--br); position:relative; transition:color .25s } #nav-mobile-menu a:last-child { border-bottom:none } #nav-mobile-menu a:hover { color:var(--tx) } #nav-mobile-menu a::after { content:''; position:absolute; width:0; height:2px; top:0; left:0; background:var(--grad); transition:width .3s } #nav-mobile-menu a:hover::after { width:100% } .lang-flag { width:20px; height:14px; border-radius:2px; flex-shrink:0; display:inline-block; vertical-align:middle } .lang-opt { display:flex; align-items:center; gap:10px } .npill span { font-family:'Inter',sans-serif; font-weight:800; font-size:13px; color:#fff } .cbar { position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad) } .hero { padding:96px 5% 80px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; min-height:88vh } .eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mu); margin-bottom:22px } .edot { width:6px; height:6px; border-radius:50%; background:var(--cg); animation:pulse 2s infinite } h1 { font-family:'Inter',sans-serif; font-weight:800; font-size:clamp(2.4rem,4.2vw,3.8rem); line-height:1.06; letter-spacing:-.035em; margin-bottom:20px } .hg { background:var(--grad); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradShift 4s ease infinite } .hdesc { font-size:1.05rem; color:var(--mu); line-height:1.78; max-width:500px; margin-bottom:32px } .hbtns { display:flex; gap:12px; flex-wrap:wrap } .btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 26px; border-radius:8px; font-family:'Inter',sans-serif; font-weight:700; font-size:.85rem; text-decoration:none; transition:all .25s; border:none; cursor:pointer; line-height:1.4 } .bs { background:var(--tx); color:#fff } .bs:hover { background:#1e293b; transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,.18) } .bo { background:transparent; border:1.5px solid rgba(15,23,42,.14); color:var(--tx) } .bo:hover { border-color:var(--tx) } .hstats { display:flex; gap:32px; flex-wrap:wrap; margin-top:36px; padding-top:28px; border-top:1px solid var(--br) } .hsn { font-family:'Inter',sans-serif; font-weight:800; font-size:1.6rem; line-height:1; background:var(--grad); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradShift 4s ease infinite } .hsl { font-size:.74rem; color:var(--mu); margin-top:3px } .hstats>div:nth-child(2) .hsn { animation-delay:-.8s } .hstats>div:nth-child(3) .hsn { animation-delay:-1.6s } .dbfloat { animation:float 6s ease-in-out infinite } .dbwrap { background:var(--bg2); border-radius:16px; border:1px solid var(--br); box-shadow:0 32px 64px -16px rgba(15,23,42,.12); overflow:hidden; transform:perspective(2400px) rotateY(-14deg) rotateX(4deg); transform-origin:center center; transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease } .hviz:hover .dbwrap { transform:perspective(2400px) rotateY(-14deg) rotateX(4deg) scale(1.03); box-shadow:0 48px 80px -16px rgba(15,23,42,.18) } .dbtop { background:#fff; height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--br) } .mac { display:flex; gap:7px } .mac div { width:11px; height:11px; border-radius:50% } .mac div:nth-child(1) { background:#ff5f56 } .mac div:nth-child(2) { background:#ffbd2e } .mac div:nth-child(3) { background:#27c93f } .dbsys { font-family:'Inter',sans-serif; font-weight:700; font-size:.88rem } .dblive { font-size:.72rem; font-weight:700; background:rgba(76,175,80,.1); color:#2e7d32; padding:4px 12px; border-radius:20px } .dbinner { display:grid; grid-template-columns:155px 1fr; height:420px } .dbside { background:#fff; padding:16px; border-right:1px solid var(--br); display:flex; flex-direction:column; gap:7px } .dbslogo { height:30px; border-radius:7px; background:linear-gradient(135deg,var(--cb),var(--cp)); margin-bottom:12px } .dbl { height:11px; border-radius:20px; background:var(--bg3) } .dbl.act { background:rgba(33,150,243,.18); width:75% } .dbmain { padding:16px; display:flex; flex-direction:column; gap:13px; overflow:hidden } .dbkpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px } .kpi { background:#fff; border-radius:10px; padding:14px 12px; border:1px solid var(--br) } .kpil { font-size:.68rem; color:var(--mu); margin-bottom:5px } .kpiv { font-family:'Inter',sans-serif; font-weight:800; font-size:1.5rem } .kpiv.b { color:var(--cb) } .kpiv.g { color:var(--cg) } .kpiv.p { color:var(--cp) } .dbchart { background:#fff; border-radius:10px; border:1px solid var(--br); padding:14px; flex:1 } .chlbl { font-size:.68rem; color:var(--mu); font-weight:500; margin-bottom:10px } .bars { display:flex; align-items:flex-end; gap:7px; height:82px } .bar { flex:1; border-radius:4px 4px 0 0; transition:height .8s cubic-bezier(.16,1,.3,1) } .dbtable { background:#fff; border-radius:10px; border:1px solid var(--br); overflow:hidden; font-size:.72rem } .dbrow { display:grid; grid-template-columns:1fr 76px 60px; padding:7px 12px; border-bottom:1px solid var(--br); align-items:center } .dbrow:last-child { border-bottom:none } .dbrow.head { background:var(--bg2); font-weight:600; color:var(--mu); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em } .chip { font-size:.65rem; font-weight:700; padding:2px 9px; border-radius:20px } .chip.g { background:rgba(76,175,80,.1); color:#2e7d32 } .chip.b { background:rgba(33,150,243,.1); color:#1565c0 } .strip { background:var(--tx); padding:56px 5%; display:grid; grid-template-columns:repeat(3,1fr); gap:40px } .strip-item { text-align:center } .sn { font-family:'Inter',sans-serif; font-weight:800; font-size:2.8rem; background:var(--grad); background-size:180%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:8px; } .sl { font-size:.95rem; color:rgba(255,255,255,.6); font-weight:500 } .strip-item:nth-child(2) .sn { animation-delay:-.8s } .strip-item:nth-child(3) .sn { animation-delay:-1.6s } section { padding:88px 5% } .tag { font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mu); margin-bottom:12px } h2 { font-family:'Inter',sans-serif; font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:16px } .sp { font-size:.95rem; color:var(--mu); line-height:1.8; max-width:520px } .sysh .sp { max-width:100%; margin:0 auto } #produtos,#servicos,#clientes,.about { overflow:visible } .about { background:var(--bg); padding:120px 5% 0; overflow:hidden } .about-intro { margin:0 auto; text-align:center; padding-bottom:80px } .about-intro .tag { margin-bottom:16px } .about-intro h2 { font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:24px; line-height:1.06 } .about-intro p { font-size:1.05rem; color:var(--mu); line-height:1.85; margin:0 auto } .about-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0 0 80px; overflow:visible } .pillar { padding:40px 36px; border-radius:20px; border:1px solid rgba(0,0,0,.04); background:#fff; position:relative; overflow:hidden; transition:all .3s cubic-bezier(.16,1,.3,1); box-shadow:0 4px 6px -1px rgba(0,0,0,.05) } .pillar:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg) } .pillar::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; opacity:0; transition:all .3s cubic-bezier(.16,1,.3,1) } .pillar:nth-child(1)::before { background:linear-gradient(90deg,var(--cg),var(--ct)) } .pillar:nth-child(2)::before { background:linear-gradient(90deg,var(--cb),var(--cp)) } .pillar:nth-child(3)::before { background:linear-gradient(90deg,var(--ck),var(--co)) } .pillar:hover::before { opacity:1 } .pillar-num { font-size:5rem; font-weight:800; line-height:1; margin-bottom:20px; opacity:.06; letter-spacing:-.05em } .pillar-accent { width:32px; height:3px; border-radius:2px; margin-bottom:24px } .pillar h3 { font-size:1.1rem; font-weight:700; margin-bottom:12px; line-height:1.3 } .pillar p { font-size:.88rem; color:var(--mu); line-height:1.75 } .about-logo-strip { background:var(--tx); padding:32px 5%; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; } .als-label { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; } .als-logo { height:34px; width:auto; display:block; flex-shrink:0; transition:.3s; } .als-orgs { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); text-align:center; } .sysh { margin:0 auto; text-align:center; padding-bottom:56px } .sysgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; overflow:visible; padding-bottom:20px } .sc { background:#0f172a; padding:40px 36px; border-radius:20px; border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; transition:all .3s cubic-bezier(.16,1,.3,1); box-shadow:0 8px 32px rgba(0,0,0,.2) } .sc:hover { transform:translateY(-10px); box-shadow:0 32px 64px rgba(0,0,0,.35); border-color:rgba(255,255,255,.12) } .sc::before { content:''; position:absolute; top:-50%; left:-60%; width:40%; height:200%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent); transform:skewX(-15deg); opacity:0; transition:all .5s ease } .sc:nth-child(1)::before { background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent) } .sc:nth-child(2)::before { background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent) } .sc:nth-child(3)::before { background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent) } .sc:hover::before { opacity:1; left:120% } .snum { font-family:'Inter',sans-serif; font-weight:800; font-size:3rem; opacity:.12; color:#fff; position:absolute; top:12px; right:16px; line-height:1 } .sbadge { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:14px } .sb { background:rgba(76,175,80,.2); color:#86efac } .spk { background:rgba(33,150,243,.2); color:#93c5fd } .sg { background:rgba(255,221,0,.2); color:#fcfaa5 } .sh { font-family:'Inter',sans-serif; font-weight:700; font-size:1.15rem; margin-bottom:10px; line-height:1.2; color:#f1f5f9 } .sdesc { font-size:.84rem; color:rgba(255,255,255,.72); line-height:1.7; margin-bottom:16px } .fl { display:flex; flex-direction:column; gap:5px } .fi { font-size:.79rem; color:rgba(255,255,255,.6); padding-left:14px; position:relative; line-height:1.5 } .fi::before { content:'›'; position:absolute; left:0; color:rgba(255,255,255,.55); font-size:.9rem; line-height:1.3 } .cap { background:var(--bg3); overflow:visible } .capgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; overflow:visible; padding-bottom:20px } .ci { background:transparent; padding:24px 20px; border-radius:12px; border:1px solid transparent; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; transition:all .3s cubic-bezier(.16,1,.3,1); box-shadow:none } .ci:hover { background:#fff; border-color:rgba(0,0,0,.06); box-shadow:0 8px 24px -4px rgba(0,0,0,.08); transform:translateY(-4px) } .ci::before { content:''; position:absolute; top:24px; left:0; width:3px; height:32px; border-radius:2px; opacity:.3; transition:all .3s cubic-bezier(.16,1,.3,1) } .ci:nth-child(1)::before { background:var(--cg) } .ci:nth-child(2)::before { background:var(--ct) } .ci:nth-child(3)::before { background:var(--cb) } .ci:nth-child(4)::before { background:var(--cp) } .ci:nth-child(5)::before { background:var(--ck) } .ci:nth-child(6)::before { background:var(--co) } .ci:nth-child(7)::before { background:var(--cg) } .ci:nth-child(8)::before { background:var(--ct) } .ci:hover::before { opacity:1; width:4px; height:80% } .cacc { height:2px; width:32px; border-radius:1px; margin-bottom:16px } .cn { font-family:'Inter',sans-serif; font-weight:800; font-size:2.2rem; opacity:.07; line-height:1; margin-bottom:10px } .ct { font-family:'Inter',sans-serif; font-weight:700; font-size:.88rem; margin-bottom:5px } .cd { font-size:.79rem; color:var(--mu); line-height:1.65 } .cli-header { margin:0 auto; text-align:center; padding-bottom:48px } .cli-header .sp { max-width:100% } .cliinner { display:grid; grid-template-columns:1fr 1fr; gap:24px } .cllist { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--br); border-radius:12px; overflow:hidden } .clrow { background:var(--bg); padding:20px; display:flex; flex-direction:column; gap:4px; transition:background .25s; justify-content:center } .clrow:hover { background:var(--bg2) } .cln { font-weight:600; font-size:.88rem; color:var(--tx) } .cls { font-size:.72rem; color:var(--mu) } .clarr { display:none } .cli-numbers { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--br); border-radius:12px; overflow:hidden } .cli-num-item { background:var(--bg); padding:24px 20px; display:flex; flex-direction:column; gap:6px; transition:background .25s; justify-content:center } .cli-num-val { font-family:'Inter',sans-serif; font-weight:800; font-size:1.9rem; line-height:1; background:var(--plural-grad-2); background-size:140%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradShift 10s ease infinite } .cli-num-item:hover { background:var(--bg2) } .cli-num-lbl { font-size:.78rem; color:var(--mu); line-height:1.4 } .cli-num-item:nth-child(2) .cli-num-val { animation-delay:-.8s } .cli-num-item:nth-child(3) .cli-num-val { animation-delay:-1.6s } .cli-num-item:nth-child(4) .cli-num-val { animation-delay:-2.4s } .cli-num-item:nth-child(5) .cli-num-val { animation-delay:-3.2s } .cli-num-item:nth-child(6) .cli-num-val { animation-delay:-4s } .cta { background:var(--bg2) } .ctabox { background:#fff; border-radius:20px; border:1px solid var(--br); padding:60px; max-width:820px; margin:0 auto; position:relative; overflow:hidden } .ctabox::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad) } .ctabox h2 { text-align:center } .ctasub { text-align:center; color:var(--mu); font-size:.95rem; max-width:560px; margin:12px auto 32px } .fg { display:grid; grid-template-columns:1fr 1fr; gap:14px } .fg .full { grid-column:1/-1 } input,textarea { width:100%; padding:13px 16px; border:1.5px solid rgba(15,23,42,.1); border-radius:8px; font-size:.9rem; font-family:'Inter',sans-serif; background:var(--bg2); color:var(--tx); transition:border-color .25s,background .25s,box-shadow .25s; outline:none } input:focus,textarea:focus { border-color:var(--cb); background:#fff; box-shadow:0 0 0 3px rgba(33,150,243,.1) } textarea { resize:vertical; min-height:100px } .fbtn { width:100%; padding:15px; font-family:'Inter',sans-serif; font-weight:700; font-size:.95rem; background:var(--tx); color:#fff; border:none; border-radius:8px; cursor:pointer; margin-top:4px; transition:background .25s,transform .2s } .fbtn:hover { background:#1e293b; transform:translateY(-2px) } footer { background:var(--tx); padding:28px 5%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px } .fbrand { display:flex; align-items:center; gap:9px } .fpill span { font-family:'Inter',sans-serif; font-weight:800; font-size:10px; color:#fff } .fname { font-family:'Inter',sans-serif; font-weight:700; font-size:.88rem; color:rgba(255,255,255,.45) } .fcopy { font-size:.78rem; color:rgba(255,255,255,.72) } .flinks { display:flex; gap:18px } .flinks a { font-size:.78rem; color:rgba(255,255,255,.7); text-decoration:none; transition:color .25s } .flinks a:hover { color:rgba(255,255,255,.8) } .footer-logo-img { height:26px; margin:0 10px 3px 0; vertical-align:middle; } .wa-float { position:fixed; bottom:28px; right:28px; z-index:500; width:62px; height:62px; border-radius:50%; background:#25d366; box-shadow:0 4px 20px rgba(37,211,102,.5); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; animation:waPulse 2.5s infinite; } .wa-float:hover { transform:scale(1.12); } .wa-float svg { width:32px; height:32px; fill:#fff; } .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease } .reveal.on { opacity:1; transform:translateY(0) } .pillar.reveal.on:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg) } .sc.reveal.on:hover { transform:translateY(-10px); box-shadow:0 32px 64px rgba(0,0,0,.35); border-color:rgba(255,255,255,.12) } .ci.reveal.on:hover { background:#fff; border-color:rgba(0,0,0,.06); box-shadow:0 8px 24px -4px rgba(0,0,0,.08); transform:translateY(-4px) } .d1 { transition-delay:.1s } .d2 { transition-delay:.2s } .d3 { transition-delay:.3s } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.5; transform:scale(.85) } } @keyframes gradShift { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } @keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } } @keyframes waPulse { 0%,100% { box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.3); } 50% { box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 14px rgba(37,211,102,0); } } @media(max-width:960px) { .hero { grid-template-columns:1fr; padding-top:64px } .hero-visual,.hviz { display:none } .about { grid-template-columns:1fr; gap:36px } .about-pillars { grid-template-columns:1fr } .sysgrid,.sysh { grid-template-columns:1fr } .cliinner { grid-template-columns:1fr } .cllist,.cli-numbers { height:auto } .capgrid { grid-template-columns:1fr 1fr } .strip { grid-template-columns:1fr; text-align:center } } @media(max-width:860px) { .ncta { display:none } } @media(max-width:650px) { .nlinks { display:none } .nav-hamburger { display:flex } .capgrid,.fg { grid-template-columns:1fr } .ctabox { padding:28px 18px } .about-logo-strip { flex-direction:column; gap:12px; padding:24px 5% } .als-label,.als-orgs { text-align:center } .als-logo { height:30px; order:-1 } .hbtns { flex-direction:column } .hbtns .btn { width:100%; text-align:center } footer { display:inline-flex; justify-content:center; flex-wrap:wrap; gap:12px } }</style>