:root{
  --bg:#060611;
  --bg2:#0b0b18;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.12);
  --glow1:#7c3aed;
  --glow2:#22d3ee;
  --glow3:#f59e0b;
  --radius:22px;
  --shadow: 0 20px 70px rgba(0,0,0,.55);
  --shadow2: 0 14px 40px rgba(0,0,0,.35);
  --max:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(34,211,238,.18), transparent 58%),
    radial-gradient(700px 400px at 55% 85%, rgba(245,158,11,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.noise{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.26;
  pointer-events:none;
  z-index:1;
}
.bg-orbs{position:fixed; inset:0; pointer-events:none; z-index:0}
.orb{
  position:absolute;
  width:520px;height:520px;border-radius:999px;
  filter: blur(70px);
  opacity:.35;
  transform: translate3d(0,0,0);
  animation: floaty 14s var(--ease) infinite;
}
.o1{left:-180px; top:120px; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.7), transparent 60%)}
.o2{right:-220px; top:60px; background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.55), transparent 62%); animation-delay:-4s}
.o3{left:45%; bottom:-260px; background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.35), transparent 62%); animation-delay:-8s}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-16px,0) scale(1.04)}
}

/* cursor glow */
.cursor-glow{
  position:fixed; left:0; top:0;
  width:460px; height:460px;
  margin:-230px 0 0 -230px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.16), rgba(124,58,237,.12), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
  z-index:2;
  opacity:.0;
  transition: opacity .25s var(--ease);
}
@media (hover:none){ .cursor-glow{display:none} }

/* topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(14px);
  background: rgba(6,6,17,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar .brand{
  display:flex; align-items:center; gap:12px;
  padding:14px 0;
}
.topbar .brand img{width:44px;height:44px; object-fit:contain; filter: drop-shadow(0 10px 30px rgba(124,58,237,.35))}
.brand-text{display:flex;flex-direction:column; line-height:1.05}
.brand-name{font-weight:820; letter-spacing:.2px}
.brand-tag{font-size:12px; color:var(--muted2)}
.topbar{padding:0 20px}
.topbar > *{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); font-size:14px; transition: color .2s var(--ease)}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none; background:transparent; border:0; padding:10px; cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:rgba(255,255,255,.72); margin:5px 0;border-radius:2px}

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
  cursor:pointer;
  will-change: transform;
}
.btn:hover{transform: translateY(-2px) scale(1.01); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09)}
.btn:active{transform: translateY(0) scale(.99)}
.btn.small{padding:10px 14px; font-size:14px}
.btn.primary{
  border-color: rgba(34,211,238,.25);
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(34,211,238,.22));
}
.btn.ghost{
  background: rgba(255,255,255,.04);
}
.btn-glint{
  position:absolute; inset:-2px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
  opacity:.55;
  pointer-events:none;
}
.btn.primary:hover .btn-glint{animation: glint 1.2s var(--ease) both}
@keyframes glint{
  to{transform: translateX(120%)}
}

/* sections */
.section{position:relative; padding:86px 0; z-index:3}
.section.alt{
  background: radial-gradient(800px 520px at 20% 10%, rgba(124,58,237,.14), transparent 60%),
              radial-gradient(700px 440px at 80% 40%, rgba(34,211,238,.10), transparent 60%),
              rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section-head{margin-bottom:26px}
.section-head h2{margin:0 0 10px; font-size: clamp(26px, 3vw, 42px); letter-spacing:-.6px}
.sub{margin:0; max-width:780px; color:var(--muted); font-size:16px; line-height:1.6}

/* hero */
.hero{padding:70px 0 40px; position:relative; z-index:3}
.hero-grid{
  width:min(var(--max), calc(100% - 40px)); margin:0 auto;
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--muted);
  font-size:13px;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,1), rgba(124,58,237,1));
  box-shadow: 0 0 18px rgba(34,211,238,.35);
}
h1{margin:14px 0 12px; font-size: clamp(42px, 5.2vw, 76px); line-height:.95; letter-spacing:-1.6px}
.kicker{display:inline-block; opacity:.9}
.shimmer{
  display:inline-block;
  background: linear-gradient(90deg, rgba(34,211,238,1), rgba(124,58,237,1), rgba(245,158,11,1));
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: shimmer 5s linear infinite;
  text-shadow: 0 0 28px rgba(124,58,237,.14);
}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.lead{margin:0; color:var(--muted); font-size:17px; line-height:1.7; max-width:640px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px}
.hero-proof{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.mini{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-size:13px;
}
.mini-ico{opacity:.9}
.hero-art{position:relative}
.parallax{
  position:relative;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  aspect-ratio: 1/1.05;
}
.layer{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform: translate3d(0,0,0) scale(1.05);
  will-change: transform;
  filter: saturate(1.07) contrast(1.06);
}
.l1{opacity:.95}
.l2{opacity:.72; mix-blend-mode:screen}
.l3{opacity:.55; mix-blend-mode:lighten}
.halo{
  position:absolute; inset:-10%;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.12), rgba(124,58,237,.10), transparent 60%);
  filter: blur(18px);
  animation: halo 8s var(--ease) infinite;
}
@keyframes halo{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(10px,-10px,0)}}
.floating-cards{position:absolute; inset:auto 0 -18px 0; display:flex; justify-content:center; gap:10px; pointer-events:none}
.float-card{
  pointer-events:none;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,6,17,.62);
  box-shadow: var(--shadow2);
  color:var(--text);
  font-size:13px;
  transform: translateY(0);
  animation: bob 4.8s var(--ease) infinite;
}
.fc1{animation-delay:-.5s}
.fc2{animation-delay:-1.2s}
.fc3{animation-delay:-1.8s}
@keyframes bob{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
}
.fc-ico{width:18px;height:18px; color: rgba(255,255,255,.85)}
.fc-ico svg{width:18px;height:18px}

.marquee{
  margin-top:34px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.marquee-track{
  display:flex;
  gap:26px;
  padding:12px 0;
  white-space:nowrap;
  animation: marquee 22s linear infinite;
  color:rgba(255,255,255,.70);
  font-size:13px;
}
.marquee-track span{
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background: rgba(255,255,255,.04);
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* cards */
.grid3{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px}
.grid2{display:grid; grid-template-columns: repeat(2,1fr); gap:16px}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:18px 18px 16px;
  box-shadow: var(--shadow2);
}
.card h3{margin:10px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); line-height:1.65}
.card-ico{
  width:46px;height:46px;border-radius:16px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(34,211,238,.10));
  color: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card-ico svg{width:28px;height:28px}

/* callout */
.callout{
  margin-top:18px;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(34,211,238,.08), rgba(255,255,255,.02));
  padding:18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.callout h3{margin:0 0 6px; font-size:18px}
.callout p{margin:0; color:var(--muted); line-height:1.6}

/* split */
.split{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}
.stack{display:flex; flex-direction:column; gap:12px}
.step{
  display:flex; gap:14px;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
}
.step-num{
  width:44px;height:44px;border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight:800;
}
.step h3{margin:0 0 6px}
.step p{margin:0; color:var(--muted); line-height:1.6}
.showcase{position:sticky; top:92px}
.showcase-frame{
  border-radius: 28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadow);
  position:relative;
}
.showcase-frame img{width:100%; height:auto; display:block; transform:scale(1.02); filter:saturate(1.08) contrast(1.05)}
.glowline{
  position:absolute; inset:auto -30% 12% -30%;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), rgba(124,58,237,.9), transparent);
  filter: blur(.2px);
  opacity:.65;
  animation: sweep 3.6s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-35%)}50%{transform:translateX(35%)}100%{transform:translateX(-35%)}}
.showcase-caption{margin-top:10px}
.showcase-caption p{margin:0 0 8px}
.muted{color:var(--muted2)}

/* pricing */
.pricing{display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:18px}
.price-card{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:18px;
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.price-card.featured{
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(34,211,238,.10), rgba(255,255,255,.03));
  border-color: rgba(34,211,238,.22);
}
.badge{
  position:absolute; right:14px; top:14px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.80);
  font-size:12px;
}
.pc-top h3{margin:0 0 6px; font-size:20px}
.pc-sub{margin:0; color:var(--muted)}
.pc-list{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.pc-list li{display:flex; gap:10px; color:rgba(255,255,255,.85)}
.tick{
  width:18px;height:18px;border-radius:8px;
  background: rgba(34,211,238,.16);
  border:1px solid rgba(34,211,238,.28);
  position:relative;
  flex:0 0 18px;
}
.tick:after{
  content:"";
  position:absolute; left:5px; top:3px;
  width:6px; height:10px;
  border-right:2px solid rgba(255,255,255,.88);
  border-bottom:2px solid rgba(255,255,255,.88);
  transform: rotate(40deg);
}
.pc-cta{margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.pc-note{color:var(--muted2); font-size:13px}
.scarcity{
  margin-top:16px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px
}
.scarcity h3{margin:0 0 6px}
.scarcity p{margin:0;color:var(--muted);line-height:1.6}
.slots{
  min-width:220px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding:14px;
  text-align:center;
}
.slots-title{display:block; font-size:12px; color:var(--muted2)}
.slots-num{display:block; font-size:44px; font-weight:900; letter-spacing:-1px; margin:6px 0; background: linear-gradient(90deg, rgba(34,211,238,1), rgba(124,58,237,1)); -webkit-background-clip:text; background-clip:text; color:transparent}
.slots-sub{display:block; font-size:12px; color:var(--muted2)}

/* timeline */
.timeline{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.t-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
}
.t-dot{
  width:14px;height:14px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,1), rgba(124,58,237,1));
  box-shadow: 0 0 18px rgba(34,211,238,.22);
  margin-top:6px;
  flex:0 0 14px;
}
.t-body h3{margin:0 0 6px}
.t-body p{margin:0; color:var(--muted); line-height:1.6}

.image-row{margin-top:16px; display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
.img-card{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  box-shadow: var(--shadow2);
  overflow:hidden;
  height: 320px;
  width:100%;
  object-fit:cover;
  filter: saturate(1.06) contrast(1.05);
}

/* contact */
.contact{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start}
.form{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:16px;
  box-shadow: var(--shadow2);
  position:relative;
}
label{display:block; margin:0 0 12px}
label span{display:block; font-size:12px; color:rgba(255,255,255,.78); margin:0 0 6px}
input, select, textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:12px 12px;
  outline:none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(34,211,238,.35);
  background: rgba(0,0,0,.26);
}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor:pointer}
.chip input{width:auto}
.form-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px}
.fine{margin:0; font-size:12px; color:var(--muted2); max-width:360px}
.form-toast{
  position:absolute; left:16px; right:16px; bottom:16px;
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.82);
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.form-toast.show{opacity:1; transform: translateY(0)}
.side-card{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:16px;
  box-shadow: var(--shadow2);
}
.side-card h3{margin:0 0 6px}
.side-card p{margin:0 0 12px}
.side-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.side-list li{display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.86)}
.legal{margin-top:10px; font-size:12px}

/* footer */
.footer{
  padding:36px 0 50px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px}
.foot-left{display:flex; align-items:center; gap:12px}
.foot-left img{width:40px;height:40px; object-fit:contain}
.foot-title{font-weight:850}
.foot-sub{font-size:12px; color:var(--muted2)}
.foot-right{display:flex; gap:14px; color:var(--muted); font-size:13px}
.foot-right a:hover{color:var(--text)}

/* tilt + reveal */
.tilt{transform-style:preserve-3d}
.reveal{opacity:1; transform:none; transition: opacity .65s var(--ease), transform .65s var(--ease)}
.js .reveal{opacity:0; transform: translateY(14px)}
.js .reveal.in{opacity:1; transform: translateY(0)}

/* responsiveness */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero-art{order:-1}
  .parallax{aspect-ratio: 16/12}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .showcase{position:relative; top:auto}
  .pricing{grid-template-columns:1fr}
  .scarcity{flex-direction:column; align-items:stretch}
  .contact{grid-template-columns:1fr}
  .image-row{grid-template-columns:1fr}
  .img-card{height:260px}
  .nav{display:none}
  .nav-toggle{display:block}
  .topbar > *{padding:0 0}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .cursor-glow{display:none}
}


/* logo band (full-size logo placement) */
.logo-band{
  padding: 54px 0;
  position:relative;
  z-index:3;
}
.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(124,58,237,.06), rgba(34,211,238,.04));
  padding: 18px;
  box-shadow: var(--shadow2);
}
.logo-full{
  width: min(420px, 52vw);
  height: auto;
  filter: drop-shadow(0 18px 60px rgba(124,58,237,.22));
}
.logo-copy h2{margin:0 0 6px; font-size: clamp(22px, 2.4vw, 34px); letter-spacing:-.6px}
.logo-copy .sub{margin:0}

/* contact direct line */
.contact-direct{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.contact-direct a{
  color: rgba(255,255,255,.88);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-direct a:hover{color: var(--text)}

/* sticky bottom contact bar */
body{
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
.bottom-bar{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: blur(14px);
  background: rgba(6,6,17,.62);
  border-top: 1px solid rgba(255,255,255,.10);
}
.bottom-inner{
  width:min(var(--max), calc(100% - 0px));
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.bb-btn{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.bb-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.09);
}
.bb-btn:active{transform: translateY(0)}
.bb-ico{font-size:16px; line-height:1}
.bb-sub{
  color: var(--muted2);
  font-size: 12px;
  line-height:1.15;
}
.bb-whatsapp{
  border-color: rgba(34,211,238,.22);
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(255,255,255,.04));
}
.bb-email{
  border-color: rgba(124,58,237,.20);
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(255,255,255,.04));
}

@media (max-width: 640px){
  .logo-wrap{flex-direction:column; text-align:center}
  .logo-full{width: min(520px, 78vw)}
  .bottom-inner{grid-template-columns: 1fr; }
}